/* ETA (Η) — landing de ação única, em linguagem de família.
   Paleta: o violeta canônico da Eta, o mesmo do cartão da página
   inicial e do tema da conversa (#6A35C0 no claro, #C3A6FF no escuro).
   Três modos: claro, escuro e alto contraste, cada um com os dois temas. */

/* ══════════ tokens ══════════════════════════════════════════════════ */
:root{
  --brand:#6A35C0;          /* acento: texto, botão, foco           */
  --brand-fundo:#EEE6FB;    /* fundo suave do acento                */
  --on-brand:#FFFFFF;       /* o que fica sobre o acento            */
  --papel:#FCFBFF;          /* fundo da página                      */
  --papel-alt:#F3F0FA;      /* fundo das faixas alternadas          */
  --cartao:#FFFFFF;
  --texto:#1E1630;
  --texto-fraco:#4B4165;
  --linha:#DDD5EE;          /* separação decorativa                 */
  --linha-forte:#8E7CB5;    /* borda de controle (≥3:1 com o fundo) */
  --tinta:#190F2B;          /* fundo escuro do fecho e do rodapé    */
  --tinta-texto:#F2EEFB;
  --tinta-fraco:#C9BFE0;
  --tinta-acento:#C3A6FF;
  --tinta-linha:#44335F;
  --raio:14px;
  --sombra:0 1px 2px rgba(30,22,48,.06), 0 8px 24px rgba(30,22,48,.07);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#C3A6FF; --brand-fundo:#2E2250; --on-brand:#13101C;
    --papel:#13101C; --papel-alt:#191423; --cartao:#1C1728;
    --texto:#EEE8FB; --texto-fraco:#B2A7C9;
    --linha:#322A45; --linha-forte:#6E6190;
    --tinta:#0E0B16; --tinta-texto:#EEE8FB; --tinta-fraco:#B2A7C9;
    --tinta-acento:#C3A6FF; --tinta-linha:#322A45;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#C3A6FF; --brand-fundo:#2E2250; --on-brand:#13101C;
  --papel:#13101C; --papel-alt:#191423; --cartao:#1C1728;
  --texto:#EEE8FB; --texto-fraco:#B2A7C9;
  --linha:#322A45; --linha-forte:#6E6190;
  --tinta:#0E0B16; --tinta-texto:#EEE8FB; --tinta-fraco:#B2A7C9;
  --tinta-acento:#C3A6FF; --tinta-linha:#322A45;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
/* alto contraste: preto e branco puros, sem fundo suave e com borda em tudo */
:root[data-contrast="alto"]{
  --brand:#33006E; --brand-fundo:#FFFFFF; --on-brand:#FFFFFF;
  --papel:#FFFFFF; --papel-alt:#FFFFFF; --cartao:#FFFFFF;
  --texto:#000000; --texto-fraco:#000000;
  --linha:#000000; --linha-forte:#000000;
  --tinta:#000000; --tinta-texto:#FFFFFF; --tinta-fraco:#FFFFFF;
  --tinta-acento:#FFFFFF; --tinta-linha:#FFFFFF;
  --sombra:none;
}
@media (prefers-color-scheme:dark){
  :root[data-contrast="alto"]:not([data-theme="light"]){
    --brand:#D9C2FF; --brand-fundo:#000000; --on-brand:#000000;
    --papel:#000000; --papel-alt:#000000; --cartao:#000000;
    --texto:#FFFFFF; --texto-fraco:#FFFFFF;
    --linha:#FFFFFF; --linha-forte:#FFFFFF;
    --tinta:#000000; --tinta-texto:#FFFFFF; --tinta-fraco:#FFFFFF;
    --tinta-acento:#D9C2FF; --tinta-linha:#FFFFFF;
  }
}
:root[data-contrast="alto"][data-theme="dark"]{
  --brand:#D9C2FF; --brand-fundo:#000000; --on-brand:#000000;
  --papel:#000000; --papel-alt:#000000; --cartao:#000000;
  --texto:#FFFFFF; --texto-fraco:#FFFFFF;
  --linha:#FFFFFF; --linha-forte:#FFFFFF;
  --tinta:#000000; --tinta-texto:#FFFFFF; --tinta-fraco:#FFFFFF;
  --tinta-acento:#D9C2FF; --tinta-linha:#FFFFFF;
}

/* ══════════ base ════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font:400 1rem/1.55 var(--sans);
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:700; line-height:1.15; letter-spacing:-.01em}
p,ul,ol{margin:0}
ul,ol{list-style:none; padding:0}
a{color:var(--brand)}
strong{font-weight:700}
em{font-style:italic; color:var(--brand)}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px}
.faixa{width:100%; max-width:1080px; margin:0 auto; padding:0 16px}

/* pular para o conteúdo / ouvir: só aparecem no teclado */
.skip{
  position:fixed; left:12px; top:-100px; z-index:60;
  background:var(--brand); color:var(--on-brand);
  padding:10px 16px; border:0; border-radius:0 0 10px 10px;
  font:600 .95rem var(--sans); text-decoration:none; cursor:pointer;
}
.skip:focus{top:0}
.skip-ouvir{left:230px}
#ouvir[hidden],#ouvir-parar[hidden],#skip-ouvir[hidden]{display:none!important}

/* o trecho que está sendo lido em voz alta */
.lendo{outline:3px solid var(--brand)!important; outline-offset:5px; border-radius:6px; background:var(--brand-fundo)}
:root[data-contrast="alto"] .lendo{background:transparent}

/* ══════════ topo ════════════════════════════════════════════════════ */
.topo{
  position:sticky; top:0; z-index:40;
  background:var(--papel); border-bottom:1px solid var(--linha);
}
.topo-in{display:flex; align-items:center; gap:12px; min-height:58px; flex-wrap:wrap}
.marca{display:flex; align-items:center; gap:9px; margin-right:auto}
.seal{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:10px; background:var(--brand); color:var(--on-brand);
  font:700 1.05rem var(--serif);
}
.marca-t{display:flex; flex-direction:column; line-height:1.1}
.nome{font:700 1.08rem var(--serif)}
.sub{font-size:.74rem; color:var(--texto-fraco)}

.ctrl{display:flex; align-items:center; gap:6px}
.a11y,.lang-g{display:flex; gap:2px; align-items:center; border:1px solid var(--linha-forte); border-radius:11px; padding:3px}
.a11y button,.lang-g button,.tg-b{
  height:32px; min-width:32px; padding:0 7px;
  border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--texto-fraco); cursor:pointer;
  font:600 .78rem/1 var(--sans);
}
.tg-b{border-color:var(--linha-forte)}
.a11y button:hover,.lang-g button:hover,.tg-b:hover{color:var(--texto); background:var(--brand-fundo)}
.a11y button[aria-pressed="true"],.lang-g button[aria-pressed="true"],.tg-b.on{
  color:var(--brand); border-color:var(--brand); font-weight:700;
}
/* só o ícone na barra, como na página inicial; o nome vive no aria-label */
.ouvir-b{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 8px}
.ouvir-t{display:none}

/* ══════════ 1. herói ════════════════════════════════════════════════ */
.hero{padding:34px 0 30px; background:
  radial-gradient(115% 80% at 12% 0%, var(--brand-fundo) 0%, transparent 62%);}
:root[data-contrast="alto"] .hero{background:none; border-bottom:1px solid var(--linha)}
.hero-in{display:grid; grid-template-columns:1.08fr .92fr; gap:34px; align-items:center}
.eyebrow{
  font:700 .72rem/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); margin-bottom:10px;
}
h1{font-size:clamp(1.85rem,4.4vw,2.9rem); margin-bottom:12px}
.intro{font-size:1.06rem; color:var(--texto-fraco); max-width:42ch; margin-bottom:18px}
.acao{margin:0 0 10px}
.btn{
  display:inline-block; background:var(--brand); color:var(--on-brand);
  padding:15px 26px; border:2px solid var(--brand); border-radius:999px;
  font:700 1.04rem/1 var(--sans); text-decoration:none;
  box-shadow:var(--sombra); transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:11px 18px; font-size:.95rem; box-shadow:none}
.trust{font-size:.86rem; color:var(--texto-fraco)}

/* a demonstração */
.mock{
  margin:0; background:var(--cartao); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden;
}
.mock-head{display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--linha)}
.mock-head .seal{width:28px; height:28px; font-size:.9rem; border-radius:8px}
.mh-t{display:flex; flex-direction:column; line-height:1.15}
.mh-name{font:700 .92rem var(--sans)}
.mh-role{font-size:.72rem; color:var(--texto-fraco)}
.mock-body{display:flex; flex-direction:column; gap:8px; padding:14px}
.mb{display:flex}
.mb.a{justify-content:flex-start}
.mb.u{justify-content:flex-end}
.bub{max-width:88%; padding:10px 13px; border-radius:14px; font-size:.92rem}
.mb.u .bub{background:var(--brand); color:var(--on-brand); border-bottom-right-radius:5px}
.mb.a .bub{background:var(--papel-alt); border:1px solid var(--linha); border-bottom-left-radius:5px}
.bub-q{font-weight:600}
.mock-foot{padding:0 14px 12px; font-size:.74rem; color:var(--texto-fraco)}

/* ══════════ 2. tira de autoridade ═══════════════════════════════════ */
.tira{background:var(--brand-fundo); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); padding:20px 0}
.tira-in{display:grid; grid-template-columns:auto 1fr; gap:6px 26px; align-items:start}
.tira-h{font-size:1.12rem; max-width:13ch}
.tira-p{font-size:.95rem; color:var(--texto-fraco)}
.selos{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.selos li{
  border:1px solid var(--linha-forte); border-radius:999px; padding:4px 12px;
  font:600 .76rem var(--sans); color:var(--texto);
}

/* ══════════ 3 e 4. blocos ═══════════════════════════════════════════ */
.bloco{padding:34px 0}
.bloco.alt{background:var(--papel-alt)}
.bloco h2{font-size:clamp(1.4rem,2.9vw,1.8rem); margin-bottom:18px}

.cartoes{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.cartoes li{
  background:var(--cartao); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px;
}
.cartoes h3{font-size:1rem; margin:8px 0 5px}
.cartoes p{font-size:.9rem; color:var(--texto-fraco)}
.ic{font-size:1.3rem; line-height:1}

.linhas{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px}
.linhas li{display:grid; grid-template-columns:auto 1fr; gap:4px 11px}
.linhas .ic{grid-row:1/3; align-self:start; margin-top:2px}
.linhas h3{font-size:.98rem}
.linhas p{font-size:.9rem; color:var(--texto-fraco)}

.nota{
  margin-top:16px; padding:12px 14px; font-size:.88rem; color:var(--texto-fraco);
  background:var(--cartao); border:1px solid var(--linha); border-left:4px solid var(--brand);
  border-radius:0 var(--raio) var(--raio) 0;
}

/* ══════════ 5. dúvidas ══════════════════════════════════════════════ */
.faq{columns:2; column-gap:26px}
.faq details{
  break-inside:avoid; margin:0 0 9px; background:var(--cartao);
  border:1px solid var(--linha); border-radius:var(--raio);
}
.faq summary{
  padding:12px 14px; cursor:pointer; font:600 .95rem var(--sans);
  list-style:none; display:flex; align-items:center; gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+"; flex:none; display:grid; place-items:center;
  width:21px; height:21px; border-radius:6px;
  background:var(--brand-fundo); border:1px solid var(--linha-forte);
  color:var(--brand); font:700 .95rem/1 var(--sans);
}
.faq details[open] summary::before{content:"−"}
.faq details[open] summary{color:var(--brand)}
.faq details p{padding:0 14px 13px 45px; font-size:.9rem; color:var(--texto-fraco)}

/* ══════════ 6. fecho ════════════════════════════════════════════════ */
.fecho{background:var(--tinta); color:var(--tinta-texto); padding:36px 0 40px; text-align:center}
.fecho .faixa{display:flex; flex-direction:column; align-items:center; gap:14px}
.passos{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px}
.passos li{display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--tinta-fraco)}
.passos .n{
  display:grid; place-items:center; width:25px; height:25px; flex:none;
  border-radius:999px; border:1px solid var(--tinta-acento);
  color:var(--tinta-acento); font:700 .82rem/1 var(--sans);
}
.fecho h2{font-size:clamp(1.5rem,3.4vw,2.1rem); max-width:26ch}
.fecho .btn{background:var(--tinta-acento); border-color:var(--tinta-acento); color:var(--tinta)}
.fecho .trust{color:var(--tinta-fraco)}
:root[data-contrast="alto"] .fecho .btn{background:var(--tinta-acento); color:#000}

/* ══════════ rodapé ══════════════════════════════════════════════════ */
.rodape{background:var(--tinta); color:var(--tinta-fraco); border-top:1px solid var(--tinta-linha); padding:18px 0 24px}
.rodape .faixa{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; justify-content:space-between}
.legal{font-size:.82rem}
.legal strong{color:var(--tinta-texto)}
.flinks a{
  color:var(--tinta-acento); font-size:.84rem;
  /* WCAG 2.2, critério 2.5.8: alvo de toque de 24x24 no mínimo. A letra do
     rodapé tem 16 px de altura; o respiro leva o alvo a 26 px e a margem
     negativa devolve o espaço, para o rodapé continuar com o mesmo desenho.
     A margem negativa não encolhe o alvo: quem é clicável é a caixa com o
     respiro dentro. */
  display:inline-block; padding:5px 3px; margin:-5px -3px;
}

/* ══════════ barra que acompanha a rolagem ═══════════════════════════ */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--cartao); border-top:1px solid var(--linha-forte);
  box-shadow:0 -6px 20px rgba(30,22,48,.1);
}
.barra-in{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 16px}
.barra-t{font-size:.9rem; color:var(--texto-fraco)}
body.com-barra{padding-bottom:62px}

/* ══════════ telas estreitas ═════════════════════════════════════════ */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:22px}
  .cartoes{grid-template-columns:repeat(2,1fr)}
  .tira-in{grid-template-columns:1fr; gap:8px}
  .tira-h{max-width:none}
  .faq{columns:1}
}
@media (max-width:640px){
  .hero{padding:24px 0 26px}
  .bloco{padding:26px 0}
  .cartoes,.linhas{grid-template-columns:1fr}
  .intro{font-size:1rem}
  .btn{display:block; text-align:center; padding:15px 18px}
  .barra-t{display:none}
  .barra .btn{display:block; width:100%}
  .barra-in{padding:8px 16px}
  .topo-in{min-height:52px; row-gap:6px}
  .ctrl{margin-left:auto}
  .sub{display:none}
}
@media (max-width:420px){
  .a11y,.lang-g{padding:2px}
  .a11y button,.lang-g button,.tg-b{min-width:28px; padding:0 4px; font-size:.74rem}
  .ctrl{gap:4px}
  .faixa{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
  .btn:hover{transform:none}
}
@media print{
  .topo,.barra,.skip{display:none!important}
  .faq details{break-inside:avoid}
}