/* AtriaON — sistema visual único do site (contrato em design/DESIGN.md).
   Estrutura e linguagem do site do HNSF (fundo claro, títulos grandes e leves em duas cores, botões em pílula,
   a assistente em painel logo abaixo do banner), com a identidade da AtriaON: azul-marinho e verde da logo,
   Aller nos títulos (a letra do site original) e Wix Madefor Text no texto. Mobile first. */

@font-face { font-family: "Aller"; src: url("fontes/aller-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Aller"; src: url("fontes/aller-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aller"; src: url("fontes/aller-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --marinho: #0F2D57;        /* a cor das letras da logo */
  --profundo: #0A1F3D;
  --azul: #0C4A91;           /* o fim do degradê do "o" da logo */
  --azul-rodape: #1D54A2;    /* rodapé do site original */
  --verde: #0A9C44;          /* o "O" da logo: detalhes, ícones, traços (texto grande só) */
  --verde-forte: #08803A;    /* botões e texto pequeno em verde (5:1 sobre branco) */
  --verde-claro: #E6F5EC;
  --azul-claro: #EAF0F8;
  --fundo: #F7F9FC;
  --nevoa: #EEF2F8;
  --branco: #FFFFFF;
  --tinta: #13243F;
  --suave: #4A5A71;
  --linha: #DBE3EE;
  --borda-campo: #8796AC;
  --alerta: #B42318;
  --alerta-claro: #FDEEEC;
  --sobre-escuro: #C9D6EA;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(15, 45, 87, .06);
  --sombra-2: 0 24px 60px -28px rgba(15, 45, 87, .30), 0 2px 6px rgba(15, 45, 87, .04);
  --sombra-botao: 0 12px 24px -12px rgba(8, 128, 58, .6);

  --titulo: "Aller", "Wix Madefor Text", "Helvetica Neue", Arial, sans-serif;
  --fonte: "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --container: 1240px;
  --gutter: 20px;
  --secao: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --barra: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.6; color: var(--tinta); background: var(--fundo);
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.escuro :focus-visible { outline-color: #7FE0A6; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--texto { max-width: calc(780px + 2 * var(--gutter)); }
.so-leitor, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--marinho); color: var(--branco); padding: 10px 16px; border-radius: var(--r-sm); }
.pular:focus { top: 12px; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tipografia ---------- */
.rotulo { font-size: .8125rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); line-height: 1.4; }
.rotulo--verde { color: var(--verde-forte); }
h1, .h1 { font-family: var(--titulo); font-size: clamp(2.5rem, 1.5rem + 4vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 400; color: var(--marinho); text-wrap: balance; }
h2, .h2 { font-family: var(--titulo); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.015em; font-weight: 400; color: var(--marinho); text-wrap: balance; }
h3, .h3 { font-family: var(--titulo); font-size: 1.375rem; line-height: 1.25; font-weight: 700; color: var(--marinho); }
.duas-cores span:not(.ef-marca) { display: block; color: var(--verde-forte); }
.lead { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--suave); max-width: 62ch; }
.on { color: var(--verde-forte); }
.atria { color: var(--marinho); font-weight: 700; }
.pequeno { font-size: .9375rem; color: var(--suave); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 26px; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.1; text-align: center; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--verde-forte); color: var(--branco); box-shadow: var(--sombra-botao); }
.btn--primario:hover { background: #066A30; }
.btn--marinho { background: var(--marinho); color: var(--branco); box-shadow: 0 12px 24px -12px rgba(15, 45, 87, .6); }
.btn--marinho:hover { background: var(--profundo); }
.btn--contorno { border: 1.5px solid var(--marinho); color: var(--marinho); background: transparent; }
.btn--contorno:hover { background: var(--marinho); color: var(--branco); }
.btn--claro { background: var(--branco); color: var(--marinho); }
.seta { transition: transform .15s ease; }
.btn:hover .seta { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn, .seta { transition: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--linha); background: var(--branco); color: var(--marinho); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.chip:hover, .chip--atual { border-color: var(--marinho); }
.chip--atual { background: var(--marinho); color: var(--branco); }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(247, 249, 252, .82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo__in { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.marca { display: inline-flex; flex: none; }
.marca img { width: 152px; height: auto; }
.nav { display: none; margin-inline: auto; }
.nav ul { display: flex; gap: 6px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); color: var(--marinho); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav a:hover { background: var(--nevoa); }
.nav a[aria-current="page"] { color: var(--verde-forte); font-weight: 700; }
.topo__cta { display: none; }
.topo__menu { margin-left: auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--marinho); }
.topo__menu .ico { width: 26px; height: 26px; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .topo__cta { display: inline-flex; min-height: 48px; padding: 0 22px; }
  .topo__menu { display: none; }
  .topo__in { min-height: 88px; }
  .marca img { width: 176px; }
}
.pg-pacotes .nav, .pg-pacotes .topo__menu { display: none; }
.pg-pacotes .topo__cta { display: inline-flex; margin-left: auto; min-height: 44px; padding: 0 18px; font-size: .9375rem; }

.gaveta { position: fixed; inset: 0; z-index: 60; background: var(--fundo); padding: 16px var(--gutter) 32px; overflow-y: auto; }
.gaveta[hidden] { display: none; }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.gaveta__fecha { width: 48px; height: 48px; display: grid; place-items: center; color: var(--marinho); }
.gaveta__lista { margin-top: 24px; display: grid; }
.gaveta__lista a { display: block; padding: 16px 4px; font-family: var(--titulo); font-size: 1.75rem; color: var(--marinho); text-decoration: none; border-bottom: 1px solid var(--linha); }
.gaveta__lista a[aria-current="page"] { color: var(--verde-forte); }
.gaveta .btn { margin-top: 28px; width: 100%; }

/* ---------- seções ---------- */
.sec { padding-block: var(--secao); }
.sec--curta { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sec--nevoa { background: var(--nevoa); }
.sec--branca { background: var(--branco); }
.sec__cab { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.sec__cab--centro { margin-inline: auto; text-align: center; justify-items: center; }
.traco { width: 56px; height: 4px; border-radius: 4px; background: var(--verde); }
.cab { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.cab .lead { margin-top: 18px; }
.trilha { display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--suave); margin-bottom: 18px; }
.trilha li + li::before { content: "/"; margin-right: 6px; color: var(--borda-campo); }
.trilha a { color: var(--suave); }

/* ---------- herói da home ---------- */
.heroi { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.heroi__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
.heroi h1 { text-transform: none; }
.heroi__texto .lead { margin-top: 22px; }
.heroi__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.heroi__nota { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: .9375rem; }
.heroi__nota i { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 5px var(--verde-claro); flex: none; }
.video-cartao { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--profundo); box-shadow: var(--sombra-2); aspect-ratio: 16 / 9; }
.video-cartao video, .video-cartao img { width: 100%; height: 100%; object-fit: cover; }
.video-cartao__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 55%, rgba(10, 31, 61, .55)); color: var(--branco); }
.video-cartao__play span { display: inline-flex; align-items: center; gap: 12px; position: absolute; left: 20px; bottom: 18px; font-weight: 700; font-size: 1rem; }
.video-cartao__play b { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); color: var(--marinho); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.video-cartao__play b svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; stroke: none; }
.video-cartao__play:hover b { transform: scale(1.06); }
.video-cartao.tocando .video-cartao__play { display: none; }
@media (min-width: 960px) { .heroi__grid { grid-template-columns: 1.02fr 1fr; } }

/* ---------- a assistente (Aria): painel marinho, conversa dentro da página ---------- */
.as-painel { position: relative; border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, #164382 0%, var(--marinho) 46%, var(--profundo) 100%); color: var(--branco); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); overflow: hidden; box-shadow: var(--sombra-2); }
.as-painel::after { content: ""; position: absolute; right: -120px; top: -140px; width: 360px; height: 360px; border-radius: 50%; border: 34px solid rgba(10, 156, 68, .22); pointer-events: none; }
.as-painel__grid { position: relative; z-index: 1; display: grid; gap: 26px; align-items: center; }
.as-painel__grid > * { min-width: 0; } /* sem isso o rótulo espaçado empurrava a coluna 6 px para fora no celular */
.as-quem .rotulo { letter-spacing: .16em; }
.as-quem { display: flex; align-items: center; gap: 16px; }
.as-quem img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--verde); background: var(--branco); flex: none; }
.as-quem .rotulo { color: var(--sobre-escuro); }
.as-quem__on { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .875rem; color: #9BE7B8; font-weight: 600; }
.as-quem__on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.as-painel h2 { color: var(--branco); margin-top: 18px; }
.as-painel h2 span { display: block; color: #6FE09E; }
.as-painel .lead { color: var(--sobre-escuro); margin-top: 14px; }
.as-busca { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.as-campo { position: relative; }
.as-form { display: flex; align-items: center; gap: 6px; background: var(--branco); border-radius: var(--r-pill); padding: 6px 6px 6px 22px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55); }
.as-form input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; font-size: 1.0625rem; color: var(--tinta); }
.as-form input::placeholder { color: #6C7A8F; }
.as-limpar { display: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; color: var(--suave); }
.as-campo.tem-texto .as-limpar { display: grid; }
.as-mic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--marinho); flex: none; background: var(--azul-claro); }
.as-mic .ico { width: 24px; height: 24px; }
.as-mic.ouvindo { background: var(--verde-claro); color: var(--verde-forte); animation: as-pulsa 1s infinite; }
.no-voice .as-mic { display: none; }
.as-enviar { min-height: 52px; padding: 0 22px; border-radius: var(--r-pill); background: var(--verde-forte); color: var(--branco); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.as-enviar:hover { background: #066A30; }
.as-enviar span { display: none; }
@media (min-width: 560px) { .as-enviar span { display: inline; } }
.as-sug { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; display: none; background: var(--branco); border-radius: var(--r-md); box-shadow: var(--sombra-2); padding: 6px; }
.as-campo.aberto .as-sug { display: grid; }
.as-sug button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; color: var(--tinta); font-size: .9375rem; }
.as-sug button:hover, .as-sug button.act { background: var(--nevoa); }
.as-sug .i { width: 16px; height: 16px; color: var(--suave); fill: none; stroke: currentColor; stroke-width: 2; }
.as-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.as-atalhos[hidden] { display: none; }
.as-atalhos button { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid rgba(255, 255, 255, .35); color: var(--branco); font-size: .9375rem; font-weight: 600; }
.as-atalhos button:hover { background: rgba(255, 255, 255, .1); border-color: var(--branco); }
.as-dica { font-size: .875rem; color: var(--sobre-escuro); }
@media (min-width: 960px) { .as-painel__grid { grid-template-columns: 1fr 1.15fr; gap: 48px; } }
.as-painel--compacto .as-painel__grid { grid-template-columns: 1fr; }
@media (min-width: 960px) { .as-painel--compacto .as-painel__grid { grid-template-columns: .9fr 1.1fr; } }

/* a caixa de resposta: uma só, troca a cada pergunta (padrão do Owner desde o HNSF) */
.as-resposta { position: relative; z-index: 1; margin-top: 22px; }
.as-resposta:empty { display: none; }
.as-conv { background: var(--branco); color: var(--tinta); border-radius: var(--r-lg); padding: clamp(1rem, .6rem + 1.6vw, 1.75rem); display: grid; gap: 16px; animation: as-sobe .3s ease; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.as-conv[hidden] { display: none; }
.as-troca { display: grid; gap: 14px; }
.as-eu { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.as-eu small { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.as-eu p { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.as-cartao { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.as-cartao > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--verde); }
.as-corpo { display: grid; gap: 12px; min-width: 0; }
.as-corpo > * { animation: as-entra .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.as-eb { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-forte); }
.as-fala { font-family: var(--titulo); font-size: clamp(1.125rem, 1rem + .5vw, 1.35rem); line-height: 1.35; color: var(--marinho); font-weight: 700; }
.as-corpo h3 { font-size: 1.25rem; }
.as-corpo p { color: var(--tinta); }
.as-ctx { display: flex; flex-wrap: wrap; gap: 6px; }
.as-ctx span { padding: 3px 10px; border-radius: var(--r-pill); background: var(--azul-claro); color: var(--marinho); font-size: .8125rem; font-weight: 600; }
.as-fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.as-fato { border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 10px 14px; background: var(--fundo); }
.as-fato small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.as-fato b { font-size: 1.0625rem; color: var(--marinho); }
.as-fato--destaque { border-color: var(--verde); background: var(--verde-claro); }
.as-fato--destaque b { color: var(--verde-forte); font-size: 1.25rem; }
.as-itens { display: grid; gap: 8px; }
.as-itens li { position: relative; padding-left: 28px; }
.as-itens li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308803A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.as-pacotes { display: grid; gap: 8px; }
.as-pacotes button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--linha); background: var(--branco); text-align: left; }
.as-pacotes button:hover { border-color: var(--marinho); }
.as-pacotes b { color: var(--marinho); }
.as-pacotes small { display: block; color: var(--suave); font-size: .8125rem; }
.as-pacotes em { font-style: normal; font-weight: 700; color: var(--verde-forte); white-space: nowrap; }
.as-nota { font-size: .875rem; color: var(--suave); padding: 10px 14px; border-left: 3px solid var(--verde); background: var(--fundo); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.as-rot { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.as-opcoes { display: grid; gap: 8px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chips button { min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--linha); color: var(--marinho); font-size: .9375rem; font-weight: 600; background: var(--branco); text-align: left; }
.as-chips button:hover { border-color: var(--marinho); }
.as-chips--seguir button { border-style: dashed; border-color: var(--verde); color: var(--verde-forte); }
.as-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.as-acoes .btn { min-height: 48px; }
.as-fonte { font-size: .8125rem; color: var(--suave); padding-top: 10px; border-top: 1px solid var(--linha); }
.as-alerta .as-eb { color: var(--alerta); }
.as-alerta .as-fala { color: var(--alerta); }
.as-digitando { display: flex; align-items: center; gap: 12px; color: var(--suave); font-size: .9375rem; }
.as-digitando img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--verde); }
.as-pontos { display: inline-flex; gap: 5px; }
.as-pontos i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); animation: as-ponto 1.1s infinite ease-in-out; }
.as-pontos i:nth-child(2) { animation-delay: .15s; }
.as-pontos i:nth-child(3) { animation-delay: .3s; }
.as-digitando--voz .as-digitando__txt { font-weight: 700; color: var(--verde-forte); animation: as-respira 1.6s ease-in-out infinite; }
.as-seguir { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--linha); border-radius: var(--r-pill); padding: 5px 5px 5px 18px; background: var(--fundo); }
.as-seguir:focus-within { border-color: var(--marinho); }
.as-seguir input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.as-seguir .as-mic { width: 46px; height: 46px; }
.as-seguir button[type="submit"] { width: 46px; height: 46px; border-radius: 50%; background: var(--marinho); color: var(--branco); display: grid; place-items: center; flex: none; }
.as-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.as-aviso { font-size: .8125rem; color: var(--suave); flex: 1 1 240px; line-height: 1.45; }
.as-nova { font-size: .875rem; font-weight: 700; color: var(--marinho); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; padding: 0 4px; }
.as-ouvir { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--verde-claro); color: var(--verde-forte); font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.as-ouvir.tocando { background: var(--verde-forte); color: var(--branco); }
.as-gravando { --nivel: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-2); }
.as-gravando[hidden] { display: none; }
.as-gravando__txt { font-size: .9375rem; color: var(--suave); line-height: 1.35; }
.as-gravando__txt b { color: var(--verde-forte); }
.as-gravando__x { font-size: .875rem; font-weight: 700; color: var(--suave); text-decoration: underline; min-height: 40px; }
.as-gravando__aviso { grid-column: 1 / -1; font-size: .75rem; color: var(--suave); }
.as-gravando__aviso:empty { display: none; }
.as-onda { display: inline-flex; align-items: center; gap: 3px; height: 28px; }
.as-onda i { width: 4px; border-radius: 4px; background: var(--verde); height: calc(6px + var(--nivel) * 22px); transition: height .08s linear; }
.as-onda i:nth-child(2) { height: calc(6px + var(--nivel) * 14px); }
.as-onda i:nth-child(3) { height: calc(6px + var(--nivel) * 26px); }
.as-onda i:nth-child(4) { height: calc(6px + var(--nivel) * 10px); }
.as-lead { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--fundo); }
.as-lead label { display: grid; gap: 4px; font-size: .875rem; font-weight: 600; color: var(--suave); }
.as-lead input[type=text], .as-lead input[type=tel] { height: 48px; border: 1.5px solid var(--borda-campo); border-radius: var(--r-sm); padding: 0 12px; background: var(--branco); font-size: 1rem; }
.as-lead .as-aceite { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.as-lead .as-aceite input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--verde-forte); }
.as-erro { color: var(--alerta); font-weight: 600; font-size: .875rem; }
.as-ok { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--verde-claro); color: var(--verde-forte); font-weight: 600; }
@keyframes as-ponto { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
@keyframes as-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes as-sobe { from { opacity: 0; transform: translateY(10px); } }
@keyframes as-pulsa { 50% { box-shadow: 0 0 0 8px rgba(10, 156, 68, .18); } }
@keyframes as-respira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 480px) {
  .as-cartao { grid-template-columns: 1fr; }
  .as-cartao > img { display: none; }
  .as-gravando { grid-template-columns: auto 1fr; }
  .as-gravando__x { grid-column: 1 / -1; justify-self: start; }
  .as-form { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .as-corpo > *, .as-conv { animation: none; }
  .as-pontos i, .as-mic.ouvindo, .as-digitando--voz .as-digitando__txt { animation: none; }
}

/* ---------- diferenciais ---------- */
.dif { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.dif__item { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 26px 24px; display: grid; gap: 10px; align-content: start; box-shadow: var(--sombra-1); }
.dif__item img { width: 52px; height: 52px; }
.dif__item p { color: var(--suave); font-size: 1rem; }

/* ---------- soluções ---------- */
.sol { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.sol__img { border-radius: var(--r-lg); background: linear-gradient(160deg, var(--azul-claro), var(--branco)); padding: clamp(1rem, .5rem + 2vw, 2rem); }
.sol__lista { display: grid; gap: 4px; }
.sol__lista li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.sol__lista li:last-child { border-bottom: 0; }
.sol__num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--verde-claro); color: var(--verde-forte); font-weight: 700; font-family: var(--titulo); }
.sol__lista h3 { font-size: 1.1875rem; }
.sol__lista p { color: var(--suave); margin-top: 4px; }
.sol__acoes { margin-top: 26px; }
@media (min-width: 960px) { .sol { grid-template-columns: 1fr 1fr; } }
.sol-det { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.sol-det article { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 12px; align-content: start; }
.sol-det .sol__num { margin-bottom: 4px; }
.sol-det ul { display: grid; gap: 8px; margin-top: 4px; }
.sol-det li { position: relative; padding-left: 22px; color: var(--suave); }
.sol-det li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.sol-det .btn { justify-self: start; margin-top: 8px; }

/* ---------- pacotes (o bloco vem do servidor: servidor/pacotes.mjs) ---------- */
.pacotes { background: var(--branco); }
.pacotes--landing { background: transparent; padding-top: 0; }
.pacotes__grade { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 760px) { .pacotes__grade--2, .pacotes__grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pacotes__grade--3 { grid-template-columns: repeat(3, 1fr); } }
.pacote { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--r-lg); padding: 30px 26px 26px; box-shadow: var(--sombra-1); }
.pacote--destaque { border-color: var(--marinho); box-shadow: var(--sombra-2); }
.pacote__selo { position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--verde-forte); color: var(--branco); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pacote__nome { font-size: 1.5rem; }
.pacote__fid { font-size: .875rem; font-weight: 700; color: var(--verde-forte); }
.pacote__resumo { color: var(--suave); }
.pacote__preco { display: grid; gap: 2px; padding: 16px 0; border-block: 1px solid var(--linha); }
.pacote__preco small { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.pacote__preco strong { font-family: var(--titulo); font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.75rem); line-height: 1.05; color: var(--marinho); font-weight: 700; }
.pacote__preco span { font-size: 1rem; color: var(--suave); font-weight: 600; margin-left: 2px; }
.pacote__valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }
.pacote__preco em { font-style: normal; font-size: .875rem; color: var(--suave); }
.pacote__consulta { font-size: 1.75rem !important; }
.pacote__itens { display: grid; gap: 10px; }
.pacote__itens li { position: relative; padding-left: 28px; font-size: .9875rem; }
.pacote__itens li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308803A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pacote__extra { font-size: .9375rem; font-weight: 600; color: var(--marinho); background: var(--azul-claro); border-radius: var(--r-sm); padding: 10px 12px; }
.pacote__obs { font-size: .8125rem; color: var(--suave); }
.pacote__botao { margin-top: auto; width: 100%; }
.pacotes__aviso { margin-top: 22px; font-size: .875rem; color: var(--suave); text-align: center; }

/* ---------- blog na home e depoimentos ---------- */
.blog-grade { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.blog-cartao { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; }
.blog-cartao__capa img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-cartao__txt { display: grid; gap: 8px; padding: 20px 22px 24px; }
.blog-cartao h2, .blog-cartao h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; }
.blog-cartao h2 a, .blog-cartao h3 a { color: var(--marinho); text-decoration: none; }
.blog-cartao h2 a:hover, .blog-cartao h3 a:hover { text-decoration: underline; }
.blog-cartao p { color: var(--suave); font-size: .9375rem; }
.blog-cartao__meta { font-size: .8125rem !important; }
.blog-categorias { margin-top: 26px; }
.blog-paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.dep { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.dep figure { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 14px; align-content: start; }
.dep__estrelas { color: #F2B01E; letter-spacing: 2px; font-size: 1.125rem; }
.dep blockquote { font-size: 1rem; color: var(--tinta); }
.dep figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.dep figcaption i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--azul-claro); color: var(--marinho); font-style: normal; font-weight: 700; }
.dep figcaption small { display: block; color: var(--suave); font-size: .8125rem; }

/* ---------- chamada final, contato e textos ---------- */
.chamada { border-radius: var(--r-lg); background: linear-gradient(120deg, var(--marinho), var(--azul)); color: var(--branco); padding: clamp(2rem, 1.2rem + 3vw, 3.5rem); display: grid; gap: 22px; align-items: center; }
.chamada h2 { color: var(--branco); }
.chamada p { color: var(--sobre-escuro); }
@media (min-width: 900px) { .chamada { grid-template-columns: 1.4fr auto; } }
.contato-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .contato-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.canal { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--branco); color: var(--marinho); text-decoration: none; }
.canal + .canal { margin-top: 12px; }
.canal .ico { width: 28px; height: 28px; color: var(--verde-forte); }
.canal b { display: block; font-size: 1.0625rem; }
.canal small { color: var(--suave); }
.form { display: grid; gap: 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.form h2 { font-size: 1.75rem; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .9375rem; color: var(--tinta); }
.form input, .form select, .form textarea { min-height: 50px; border: 1.5px solid var(--borda-campo); border-radius: var(--r-sm); padding: 10px 14px; background: var(--branco); font-size: 1rem; width: 100%; }
.form textarea { min-height: 110px; resize: vertical; }
.form .aceite { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--suave); }
.form .aceite input { width: 20px; height: 20px; min-height: 0; flex: 0 0 20px; margin-top: 2px; accent-color: var(--verde-forte); }
.form__duas { display: grid; gap: 14px; }
@media (min-width: 600px) { .form__duas { grid-template-columns: 1fr 1fr; } }
.form__msg { font-weight: 600; }
.form__msg--erro { color: var(--alerta); }
.form__msg--ok { color: var(--verde-forte); }
.texto-legal { display: grid; gap: 16px; }
.texto-legal h2 { font-size: 1.5rem; margin-top: 14px; }
.texto-legal ul { display: grid; gap: 8px; }
.texto-legal li { position: relative; padding-left: 20px; }
.texto-legal li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }

/* ---------- blog (posts gerados por servidor/blog.mjs) ---------- */
.post__cab { padding-block: clamp(2rem, 1rem + 3vw, 4rem) 1.5rem; max-width: calc(860px + 2 * var(--gutter)); }
.post__cab h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); margin-top: 12px; }
.post__cab .lead { margin-top: 16px; }
.post__meta, .post__ia, .post__selo { margin-top: 16px; font-size: .9375rem; color: var(--suave); }
.post__capa { max-width: calc(1080px + 2 * var(--gutter)); }
.post__capa img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 16 / 8.5; object-fit: cover; }
.post__corpo { max-width: calc(760px + 2 * var(--gutter)); padding-block: 2rem 1rem; font-size: 1.125rem; line-height: 1.75; }
.post__corpo > * + * { margin-top: 1.1em; }
.post__corpo h2 { font-size: 1.9rem; margin-top: 1.6em; }
.post__corpo h3 { margin-top: 1.4em; }
.post__corpo ul, .post__corpo ol { padding-left: 1.3em; }
.post__corpo ul { list-style: disc; }
.post__corpo ol { list-style: decimal; }
.post__corpo li + li { margin-top: .4em; }
.post__corpo blockquote { border-left: 4px solid var(--verde); padding: 4px 0 4px 18px; color: var(--suave); }
.post__corpo img { border-radius: var(--r-md); }
.post__corpo figcaption { font-size: .875rem; color: var(--suave); margin-top: 8px; }
.post__corpo a { color: var(--verde-forte); }
.post__corpo table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.post__corpo th, .post__corpo td { border-bottom: 1px solid var(--linha); padding: 10px 8px; text-align: left; }
.post__tabela-rolagem { overflow-x: auto; }
.post__sumario { background: var(--nevoa); border-radius: var(--r-md); padding: 18px 22px; }
.post__sumario p { font-weight: 700; color: var(--marinho); }
.post__destaque { background: var(--azul-claro); border-radius: var(--r-md); padding: 16px 20px; }
.post__destaque--atencao { background: var(--alerta-claro); }
.post__faq details { border-bottom: 1px solid var(--linha); padding: 12px 0; }
.post__faq summary { font-weight: 700; color: var(--marinho); cursor: pointer; }
.post__pe { max-width: calc(760px + 2 * var(--gutter)); padding-block: 1rem 3rem; display: grid; gap: 18px; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post__tags li { padding: 4px 12px; border-radius: var(--r-pill); background: var(--nevoa); font-size: .875rem; color: var(--suave); }
.post__compartilhar, .post__redes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .9375rem; }
.post__compartilhar span, .post__redes span { font-weight: 700; color: var(--marinho); }
.post__compartilhar button { color: var(--azul); text-decoration: underline; }
.post__previa { background: #FFF6DB; padding: 10px var(--gutter); text-align: center; font-weight: 600; }
.post__acao { margin-top: 1.5em; }
.post__acao--centro { text-align: center; }
.cor-marinho { color: var(--marinho); } .cor-verde { color: var(--verde-forte); } .cor-azul { color: var(--azul); } .cor-suave { color: var(--suave); }
.al-centro { text-align: center; } .al-direita { text-align: right; } .al-justificado { text-align: justify; }

/* ---------- rodapé ---------- */
.rodape { background: linear-gradient(160deg, var(--marinho), var(--azul-rodape)); color: var(--sobre-escuro); padding-block: 3.5rem 1.5rem; margin-top: var(--secao); }
.rodape a { color: var(--branco); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .rodape__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.rodape__marca img { width: 168px; }
.rodape__marca p { margin-top: 16px; max-width: 34ch; }
.rodape h2 { font-family: var(--fonte); font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--branco); margin-bottom: 14px; }
.rodape ul { display: grid; gap: 10px; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .875rem; }
.rodape__base .on { color: #6FE09E; }

/* ---------- barra do celular ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--branco); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 30px -18px rgba(15, 45, 87, .35); }
.barra a, .barra button { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 8px; min-height: var(--barra); font-size: .75rem; font-weight: 600; color: var(--marinho); text-decoration: none; }
.barra .ico { width: 22px; height: 22px; }
.barra a[aria-current="page"] { color: var(--verde-forte); }
.barra__whats { color: var(--verde-forte) !important; }
@media (min-width: 1024px) { .barra { display: none; } body { padding-bottom: 0; } }
@media (max-width: 560px) {
  .video-cartao__play span { left: 14px; bottom: 12px; right: 14px; gap: 10px; font-size: .875rem; line-height: 1.25; }
  .video-cartao__play b { width: 48px; height: 48px; flex: none; }
  .video-cartao__play b svg { width: 20px; height: 20px; }
}

/* =====================================================================================================
   MOTION (assets/motion.js + GSAP 3.13 em assets/vendor). Padrão: rolagem nativa (sem sequestro de scroll),
   entradas com opacidade + subida + desfoque, curvas próprias, e tudo desligado com "reduzir movimento".
   O estado inicial escondido só vale com html.motion (posto por motion-cedo.js); sem JS, tudo aparece.
   ===================================================================================================== */
:root {
  --curva-saida: cubic-bezier(.22, 1, .36, 1);     /* chega rápido e assenta devagar */
  --curva-cena: cubic-bezier(.77, 0, .175, 1);     /* troca de cena */
}

/* ---------- manifesto: as palavras acendem com a rolagem ---------- */
.manifesto { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.manifesto__grade { display: grid; gap: 14px; }
.manifesto__texto { font-family: var(--titulo); font-size: clamp(1.375rem, .95rem + 1.5vw, 2.35rem); line-height: 1.28; letter-spacing: -.012em; color: var(--marinho); max-width: 34ch; text-wrap: pretty; }
@media (min-width: 960px) { .manifesto__grade { grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: 48px; align-items: start; } .manifesto__grade .rotulo { padding-top: .65em; } }
html.motion .manifesto__texto .palavra { opacity: .18; }

/* ---------- soluções em narrativa: imagem fixa, item ativo acompanha a rolagem ---------- */
.sol__palco { display: grid; gap: 16px; }
.sol__progresso { height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.sol__progresso i { display: block; height: 100%; background: var(--verde); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 960px) {
  .narrativa .sol { align-items: start; }
  .narrativa .sol__palco { position: sticky; top: 120px; }
  /* o texto de todas as soluções fica sempre legível (pedido do Owner, 24/10/2026): a rolagem só marca o número e a barra */
  .narrativa .sol__lista li { padding: 26px 0; }
  html.motion .narrativa .sol__lista li .sol__num { transition: background .45s var(--curva-saida), color .45s var(--curva-saida); }
  html.motion .narrativa .sol__lista li.ativo .sol__num { background: var(--verde-forte); color: var(--branco); }
}

/* ---------- estados iniciais (só com motion) ---------- */
html.motion [data-revelar], html.motion [data-revelar-grupo] > *, html.motion [data-titulo-mascara],
html.motion .cab .container > *, html.motion .post__cab > * { opacity: 0; } /* o topo das páginas internas fica escondido desde a primeira pintura */
html.motion [data-revelar-painel] { clip-path: inset(10% 4% 0 4% round 28px); opacity: 0; }
html.motion-solto [data-revelar], html.motion-solto [data-revelar-grupo] > *, html.motion-solto [data-titulo-mascara], html.motion-solto [data-revelar-painel],
html.motion-solto .cab .container > *, html.motion-solto .post__cab > * { opacity: 1 !important; clip-path: none !important; }

/* ---------- toque e foco: retorno imediato, sem show ---------- */
.btn { transition: transform .16s var(--curva-saida), box-shadow .2s var(--curva-saida), background .2s var(--curva-saida), color .2s var(--curva-saida); }
.btn:active { transform: scale(.97); }
.blog-cartao, .pacote, .dif__item, .dep figure, .sol-det article { transition: transform .45s var(--curva-saida), box-shadow .45s var(--curva-saida); }
@media (hover: hover) {
  .blog-cartao:hover, .pacote:hover, .dif__item:hover, .sol-det article:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
  .blog-cartao__capa { overflow: hidden; display: block; }
  .blog-cartao__capa img { transition: transform .9s var(--curva-saida); }
  .blog-cartao:hover .blog-cartao__capa img { transform: scale(1.04); }
}
.topo { transition: transform .45s var(--curva-saida), border-color .2s; }
.topo.escondido { transform: translateY(-100%); }

/* ---------- transição entre páginas (View Transitions, mesma origem) ---------- */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
.barra { view-transition-name: barra; }
::view-transition-old(root) { animation: pagina-sai .32s var(--curva-cena) both; }
::view-transition-new(root) { animation: pagina-entra .62s var(--curva-saida) .06s both; }
@keyframes pagina-sai { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn, .blog-cartao, .pacote, .dif__item, .topo, .blog-cartao__capa img { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- herói em duas colunas: chamada à esquerda, vídeo inteiro (16:9, sem recorte) à direita.
   Pedido do Owner (24/10/2026): a primeira tela mostra a chamada e o vídeo, e o vídeo nunca é cortado. ---------- */
.heroi--duplo { padding-block: clamp(2rem, 1rem + 5vh, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.heroi__duplo { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); align-items: center; }
.heroi__titulo { margin-top: 14px; font-size: clamp(2.2rem, .8rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.heroi__titulo span { display: block; color: var(--verde-forte); }
.heroi__texto .lead { margin-top: 18px; max-width: 44ch; }
.heroi__texto .heroi__acoes { margin-top: 26px; }
.heroi__video { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-lg); box-shadow: 0 40px 90px -40px rgba(10, 31, 61, .55); }
.heroi__video video, .heroi__video img { object-fit: contain; background: var(--profundo); }
@media (min-width: 1024px) {
  .heroi__duplo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }
}
@media (max-width: 700px) {
  .heroi__texto .rotulo { display: none; }
  .heroi__texto .heroi__acoes .btn--contorno { display: none; } /* "Falar com a Aria" já está na barra fixa do celular */
  .heroi__titulo { font-size: clamp(2.2rem, 1.4rem + 4vw, 2.75rem); }
}


/* =====================================================================================================
   FUNDOS DE TECNOLOGIA (pedido do Owner, 24/10/2026): os vídeos claros do site original atrás das seções, com véu
   claro para o texto continuar legível, grade de pontos e luz suave ("cara de IA"), bordas que se dissolvem entre uma
   seção e outra, e parallax (motion.js). O vídeo só carrega perto da tela e pausa fora dela (site.js); com "reduzir
   movimento", economia de dados ou o botão "Pausar fundo" do rodapé, fica a imagem parada.
   ===================================================================================================== */
.tem-fundo { position: relative; isolation: isolate; }
.tem-fundo > .container { position: relative; z-index: 1; }
.fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.fundo__midia { position: absolute; inset: -10% 0; will-change: transform; }
.fundo__midia video, .fundo__midia img { width: 100%; height: 100%; object-fit: cover; }
.fundo::before, .fundo::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* grade de pontos: some nas bordas */
.fundo::before { background-image: radial-gradient(rgba(15, 45, 87, .16) 1px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); opacity: .55; }

/* herói: dunas de dados embaixo, texto sobre véu claro, luz verde e azul */
.fundo--dunas .fundo__midia { inset: -6% 0 -14% 0; }
.fundo--dunas .fundo__midia video, .fundo--dunas .fundo__midia img { object-position: 50% 80%; }
.fundo--dunas::after { background:
  radial-gradient(40% 50% at 12% 30%, rgba(10, 156, 68, .10), transparent 70%),
  radial-gradient(35% 45% at 85% 20%, rgba(12, 74, 145, .12), transparent 70%),
  linear-gradient(to bottom, rgba(247, 249, 252, .94) 0%, rgba(247, 249, 252, .78) 45%, rgba(247, 249, 252, .30) 100%); }
.heroi--duplo .fundo { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); }

/* manifesto: cubo de blocos à esquerda, véu mais forte do lado do texto */
.fundo--cubo .fundo__midia video, .fundo--cubo .fundo__midia img { object-position: 30% 50%; }
.fundo--cubo::after { background: linear-gradient(90deg, rgba(247, 249, 252, .35) 0%, rgba(247, 249, 252, .82) 48%, rgba(247, 249, 252, .95) 70%); }
@media (max-width: 959px) { .fundo--cubo::after { background: rgba(247, 249, 252, .84); } }

/* pacotes: vidro branco por trás dos cartões */
.pacotes.tem-fundo { background: var(--branco); }
.fundo--vidro::after { background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, .7)); }
.fundo--vidro::before { opacity: .35; }

/* chamada final: fitas acendendo sobre o marinho */
.chamada.tem-fundo { overflow: hidden; }
.chamada > :not(.fundo) { position: relative; z-index: 1; }
.chamada .fundo { -webkit-mask-image: none; mask-image: none; }
.fundo--fitas .fundo__midia { mix-blend-mode: screen; opacity: .32; }
.fundo--fitas::before { display: none; }
.fundo--fitas::after { background: linear-gradient(120deg, rgba(15, 45, 87, .55), rgba(12, 74, 145, .15)); }

/* o cinza do vídeo do cubo é mais escuro que o fundo da página: as bordas do vídeo se dissolvem, sem retângulo */
.fundo--cubo .fundo__midia { -webkit-mask-image: radial-gradient(ellipse 48% 70% at 30% 50%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 48% 70% at 30% 50%, #000 30%, transparent 78%); filter: brightness(1.07) saturate(1.15); }
.fundo--vidro .fundo__midia { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 85%); }

/* =====================================================================================================
   VIDRO E EFEITOS: a parte genérica mora na biblioteca Efeitos AtriaON (biblioteca-efeitos/efeitos.css, copiada
   pelo build para assets/efeitos/). Aqui fica só onde cada efeito entra neste site.
   ===================================================================================================== */
/* ---------- onde o vidro entra ---------- */
/* cabeçalho: cápsula de liquid glass flutuando sobre a página */
.topo { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; padding-top: 12px; }
.topo .topo__in { min-height: 64px; padding-inline: 14px 10px; border-radius: var(--r-pill); }
@media (min-width: 1024px) { .topo .topo__in { min-height: 72px; padding-inline: 26px 12px; } }
.topo .container.topo__in { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); }
.topo__cta, .gaveta .btn { box-shadow: 0 10px 24px -12px rgba(8, 128, 58, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* botões: o secundário vira vidro; o principal ganha o brilho do alto */
.btn--contorno { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); border-color: rgba(15, 45, 87, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.btn--primario { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%); box-shadow: var(--sombra-botao), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* herói: moldura de vidro no vídeo e etiquetas flutuando */
.heroi__palco { position: relative; padding: 10px; border-radius: calc(var(--r-lg) + 10px); }
.heroi__palco .heroi__video { box-shadow: none; }
.etiqueta { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: var(--r-pill); font-size: .875rem; font-weight: 700; color: var(--marinho); white-space: nowrap; }
.etiqueta b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-claro); color: var(--verde-forte); font-size: .75rem; }
.etiqueta--1 { left: -26px; top: 16%; }
.etiqueta--2 { right: 28px; bottom: -22px; } /* fora do vídeo: não cobre o "Conheça a AtriaON" */
@media (max-width: 1023px) { .etiqueta--1 { left: 10px; top: -16px; } .etiqueta--2 { right: 10px; bottom: -18px; } }
@media (max-width: 420px) { .etiqueta { font-size: .78rem; padding: 8px 12px 8px 8px; } .etiqueta b { width: 24px; height: 24px; } }

/* cartões de vidro sobre as luzes */
.pacotes.tem-fundo { background: transparent; }
.sol__img { background: rgba(255, 255, 255, .45); }
/* camadas de efeito dentro das seções ficam atrás do conteúdo */
.tem-orbes { position: relative; isolation: isolate; }
.tem-orbes > .container { position: relative; z-index: 1; }

/* painel da Aria: continua marinho sólido (vidro escuro sobre fundo claro ficava cinza); o vidro fica no campo e nos atalhos */
.as-form { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55), inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .5); }
.as-atalhos button { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.as-painel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05) 40%, rgba(10, 156, 68, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

.pacote__selo { z-index: 3; box-shadow: 0 6px 16px -8px rgba(8, 128, 58, .8); } /* acima da borda viva */

/* ---------- efeitos da biblioteca neste site ---------- */
.heroi__rede { z-index: 0; opacity: .8; /* a rede some atrás da chamada: os pontos não cruzam o texto */
  -webkit-mask-image: radial-gradient(ellipse 34% 42% at 27% 48%, transparent 45%, #000 85%); mask-image: radial-gradient(ellipse 34% 42% at 27% 48%, transparent 45%, #000 85%); }
/* faixa de termos: vidro fino atravessando a página entre o herói e a Aria */
.faixa { padding-block: 6px 0; position: relative; z-index: 2; }
.faixa__letreiro { border-block: 1px solid rgba(15, 45, 87, .08); background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); }
.faixa__trilho { gap: 0; padding: 16px 0; }
.faixa__trilho li { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--titulo); font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: var(--marinho); white-space: nowrap; }
.faixa__trilho li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-claro); }
/* soluções: piso de grade em perspectiva no pé da seção */
.tem-piso { position: relative; isolation: isolate; overflow: hidden; }
.tem-piso > .container { position: relative; z-index: 1; }
.solucoes__piso { top: auto; height: 46%; opacity: .7; }
/* aurora atrás do painel da Aria */
.as-painel .ef-aurora { opacity: .55; border-radius: inherit; }

/* ---------- Efeitos dos módulos aplicados ao site (recorte em assets/efeitos/efeitos-recorte.css) ---------- */
/* menu do topo: sublinhado verde que corre no hover; a página atual fica sublinhada */
.nav a:hover { background: transparent; }
.nav a[aria-current="page"] .ef-sublinhado::after { transform: scaleX(1); }
.nav a:hover .ef-sublinhado::after, .nav a:focus-visible .ef-sublinhado::after { transform: scaleX(1); transform-origin: 0 50%; }
.rodape a.ef-sublinhado:hover { text-decoration: none; }
.rodape .ef-sublinhado::after { --ef-verde: #3DD07A; }
/* diferenciais com holofote: mantêm o raio e a sombra do site, sem a borda cinza (a borda agora é de luz) */
.dif__item.ef-holofote-cartao { border-color: transparent; border-radius: var(--r-lg); }
/* marca-texto nos títulos: a palavra pode quebrar no celular */
@media (max-width: 600px) { h1 .ef-marca { white-space: normal; } }
/* voltar ao topo: acima da barra do celular */
.ef-voltar-topo { bottom: calc(var(--barra) + 14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
@media (min-width: 1024px) { .ef-voltar-topo { bottom: 28px; right: 28px; } }

/* ---------- cabeçalho ao rolar: vidro quase sólido (pedido do Owner: o menu se mistura com o título e o vídeo atrás) ---------- */
.topo .topo__in.ef-vidro { transition: background-color .35s var(--curva-saida), box-shadow .35s var(--curva-saida), -webkit-backdrop-filter .35s, backdrop-filter .35s; }
.topo.rolou .topo__in.ef-vidro.ef-vidro {
  background: #fff;
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); /* sem a lente líquida: nada distorcido atrás do texto */
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px -22px rgba(15, 45, 87, .45), 0 2px 8px rgba(15, 45, 87, .08);
}
@media (prefers-reduced-transparency: reduce) { .topo.rolou .topo__in.ef-vidro.ef-vidro { background: #fff; } }

/* ---------- cores de texto e marca-texto do editor do blog (lista fechada em servidor/blog.mjs, ADR-004) ---------- */
.post__corpo .cor-tinta { color: var(--tinta); } .post__corpo .cor-marinho { color: var(--marinho); } .post__corpo .cor-verde { color: var(--verde-forte); }
.post__corpo .cor-azul { color: var(--azul); } .post__corpo .cor-cinza { color: var(--suave); } .post__corpo .cor-vermelho { color: var(--alerta); }
.post__corpo .marca-verde { background: var(--verde-claro); } .post__corpo .marca-amarelo { background: #FFF3C4; } .post__corpo .marca-rosa { background: #FCEEEC; }
.post__corpo :is(.marca-verde, .marca-amarelo, .marca-rosa) { padding: 0 .2em; border-radius: .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post__corpo .tam-pequeno { font-size: .875em; } .post__corpo .tam-grande { font-size: 1.25em; }