/* =====================================================================================
   Viver de Comprinha · sistema de marca para o SITE (institucional, landings A/B/C e manual)
   Fonte: Brandbook v1.0 (out/2026). Regras que este arquivo garante:
   - 5 cores: Lavanda 55% · Violeta 20% · Lilás 10% · Ameixa 10% · Lima 5% (um acento lima por bloco).
   - Bricolage Grotesque 800 nos títulos (espaçamento levemente fechado); Figtree 400–700 no texto.
   - Espaço em múltiplos de 4: 4, 8, 12, 16, 24, 32, 48 (+ 64/96/128 só para seções do site).
   - Raios 8 / 16 / 24 / pílula. Uma sombra só: no cartão de oferta. Sem gradiente, sem borda de um lado.
   - Lima e lilás nunca são texto sobre fundo claro. Botões com 48 px de altura mínima.
   ===================================================================================== */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-display:swap;src:url("fontes/bricolage-latin.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("fontes/figtree-latin.woff2") format("woff2")}

:root{
  /* cores da marca */
  --violeta:#5B21B6; --violeta-escuro:#4C1D95; --lilas:#A78BFA; --lavanda:#F3EEFF; --lima:#C8F03C; --ameixa:#1F1535;
  /* derivadas só de leitura (tons do mesmo matiz, para borda e apoio) */
  --branco:#FFFFFF; --texto:#1F1535; --texto-apoio:#5A4E78; --texto-suave:#6E6390;
  --borda:#E2D8FA; --borda-forte:#CDBDF6; --lavanda-2:#EAE1FF; --lavanda-3:#DCCEFF;
  --sucesso:#1B7A47; --erro:#B42318;
  /* tipografia */
  --f-titulo:"Bricolage Grotesque",system-ui,sans-serif; --f-texto:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-display-xl:clamp(40px,7vw,72px); --t-display-lg:clamp(32px,5vw,48px); --t-titulo:clamp(24px,3.2vw,32px);
  --t-corpo-lg:18px; --t-corpo:16px; --t-pequeno:14px; --t-legenda:12px;
  /* espaço */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px; --e8:32px; --e12:48px; --e16:64px; --e24:96px; --e32:128px;
  /* forma */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --sombra-oferta:0 12px 32px -12px rgba(91,33,182,.28);
  --foco:0 0 0 4px rgba(91,33,182,.35);
  --ease:cubic-bezier(.22,1,.36,1); --ease-mola:cubic-bezier(.34,1.56,.64,1);
  --largura:1200px;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{max-width:100%}
body.site{overflow-x:clip;font-family:var(--f-texto);font-size:var(--t-corpo);line-height:1.6;color:var(--texto);background:var(--lavanda);
  -webkit-font-smoothing:antialiased}  /* overflow-x:clip (não hidden): hidden faria do body o contêiner de rolagem e o topo deixaria de grudar */
img,svg,video{display:block;max-width:100%}
a{color:var(--violeta)}
a:hover{color:var(--violeta-escuro)}
:focus-visible{outline:none;box-shadow:var(--foco);border-radius:var(--r-sm)}
.pular{position:absolute;left:-999px;top:8px;background:var(--ameixa);color:var(--lavanda);padding:12px 16px;border-radius:var(--r-pill);z-index:999}
.pular:focus{left:16px}
[hidden]{display:none!important}

/* ---------- tipografia ---------- */
.titulo-xl,.titulo-lg,.titulo,h1,h2,h3{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--texto)}
.titulo-xl,h1{font-size:var(--t-display-xl)}
.titulo-lg,h2{font-size:var(--t-display-lg)}
.titulo,h3{font-size:var(--t-titulo);line-height:1.15}
h4{font-family:var(--f-texto);font-weight:700;font-size:18px;line-height:1.3}
.corpo-lg{font-size:var(--t-corpo-lg);color:var(--texto-apoio)}
.pequeno{font-size:var(--t-pequeno);color:var(--texto-apoio)}
.legenda{font-size:var(--t-legenda);font-weight:700;color:var(--texto-apoio)}
.olho{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violeta)}
.olho::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--violeta)}
.destaque{color:var(--violeta)}
.marca-texto{font-family:var(--f-titulo);font-weight:800}

/* ---------- layout ---------- */
.c{width:100%;max-width:var(--largura);margin:0 auto;padding:0 16px}
@media(min-width:768px){.c{padding:0 32px}}
.secao{padding:var(--e16) 0}
@media(min-width:960px){.secao{padding:var(--e24) 0}}
.secao-branca{background:var(--branco)}
.secao-ameixa{background:var(--ameixa);color:var(--lavanda)}
.secao-ameixa h1,.secao-ameixa h2,.secao-ameixa h3,.secao-ameixa h4{color:var(--lavanda)}
.secao-ameixa .corpo-lg,.secao-ameixa .pequeno,.secao-ameixa p{color:#D9CEF5}
.secao-ameixa .olho{color:#D9CEF5} .secao-ameixa .olho::before{background:#D9CEF5}  /* lima fica para um único preenchimento por bloco */
.secao-violeta{background:var(--violeta);color:var(--lavanda)}
.secao-violeta h2,.secao-violeta h3{color:var(--lavanda)} .secao-violeta p{color:#EDE5FF}
.cab-secao{max-width:760px;margin-bottom:var(--e12)}
.cab-secao.centro{margin-left:auto;margin-right:auto;text-align:center}
.cab-secao.centro .olho{justify-content:center}
.cab-secao h2{margin:var(--e3) 0 var(--e4)}
.grade{display:grid;gap:var(--e4)}
@media(min-width:720px){.grade-2{grid-template-columns:repeat(2,1fr)}.grade-3{grid-template-columns:repeat(2,1fr)}.grade-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grade-3{grid-template-columns:repeat(3,1fr)}.grade-4{grid-template-columns:repeat(4,1fr)}.gap-g{gap:var(--e6)}}
.dividir{display:grid;gap:var(--e12);align-items:center}
@media(min-width:960px){.dividir{grid-template-columns:1fr 1fr}.dividir.inverso>:first-child{order:2}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);
  font:700 16px/1 var(--f-texto);text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease-mola),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-violeta{background:var(--violeta);color:#fff}
.btn-violeta:hover{background:var(--violeta-escuro);color:#fff}
.btn-lima{background:var(--lima);color:var(--ameixa)}            /* o acento: um por bloco */
.btn-lima:hover{color:var(--ameixa)}
.btn-contorno{background:transparent;border-color:var(--violeta);color:var(--violeta)}
.btn-contorno:hover{background:var(--violeta);color:#fff}
.btn-claro{background:var(--lavanda);color:var(--violeta)}
.btn-grande{min-height:56px;padding:0 32px;font-size:17px}
.btn .seta{transition:transform .35s var(--ease)}
.btn:hover .seta{transform:translateX(4px)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}
.ctas-nota{font-size:var(--t-pequeno);color:var(--texto-apoio);margin-top:var(--e3)}

/* ---------- selos e avisos ---------- */
.selo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--lavanda-2);color:var(--violeta)}
.selo-lima{background:var(--lima);color:var(--ameixa)}
.selo-ameixa{background:var(--ameixa);color:var(--lavanda)}
.aviso-afiliado{font-size:var(--t-legenda);font-weight:700;color:var(--texto-apoio)}
.aviso-afiliado::before{content:"Link de afiliado · "}
.nota-honesta{display:flex;gap:12px;align-items:flex-start;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);padding:16px;font-size:14px;color:var(--texto-apoio)}
.nota-honesta svg{flex:none;color:var(--violeta)}

/* ---------- cartões ---------- */
.cartao{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6);
  transition:transform .5s var(--ease),border-color .3s}
.cartao:hover{border-color:var(--borda-forte)}
.cartao-elevar:hover{transform:translateY(-6px)}
.cartao h3{font-size:22px;margin:var(--e4) 0 var(--e2)}
.cartao p{color:var(--texto-apoio)}
.cartao-lavanda{background:var(--lavanda);border-color:var(--lavanda-3)}
.cartao-ameixa{background:#2A1E47;border-color:#3A2C5E;color:var(--lavanda)}
.cartao-ameixa h3{color:var(--lavanda)} .cartao-ameixa p{color:#D9CEF5}
.icone-bloco{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--lavanda);color:var(--violeta)}
.cartao-ameixa .icone-bloco{background:#3A2C5E;color:var(--lavanda)}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* cartão de oferta: único lugar com sombra */
.oferta-c{background:var(--branco);border-radius:var(--r-lg);box-shadow:var(--sombra-oferta);padding:var(--e4);display:grid;gap:var(--e2);max-width:340px}
.oferta-c .img{aspect-ratio:4/3;border-radius:var(--r-md);background:var(--lavanda-2);display:grid;place-items:center;color:var(--violeta)}
.oferta-c .nome{font-weight:700;font-size:16px}
.oferta-c .de{font-size:14px;color:var(--texto-apoio)}
.oferta-c .por{font:800 24px/1 var(--f-titulo);color:var(--texto)}

/* ---------- topo ---------- */
.s-topo{position:sticky;top:0;z-index:50;background:rgba(243,238,255,.86);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.s-topo.rolou{border-bottom-color:var(--borda);background:rgba(243,238,255,.96)}
.s-topo .c{display:flex;align-items:center;gap:var(--e6);height:72px}
.s-topo .logo img{height:36px;width:auto}
.s-nav{display:none;gap:var(--e6);margin-left:auto;align-items:center}
.s-nav a{font-weight:600;font-size:15px;color:var(--texto);text-decoration:none;position:relative;padding:8px 0}
.s-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--violeta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.s-nav a:hover::after,.s-nav a[aria-current="page"]::after{transform:scaleX(1)}
.s-acoes{display:flex;gap:var(--e2);margin-left:auto;align-items:center}
.s-acoes .entrar{display:none}
.s-menu-bt{width:48px;height:48px;border-radius:var(--r-pill);border:0;background:var(--branco);color:var(--texto);display:grid;place-items:center;cursor:pointer}
@media(min-width:1080px){.s-nav{display:flex}.s-acoes{margin-left:var(--e4)}.s-acoes .entrar{display:inline-flex}.s-menu-bt{display:none}}
@media(max-width:420px){.s-topo .logo img{height:30px}.s-acoes .btn{padding:0 16px;font-size:15px}}
@media(max-width:400px){.s-acoes .btn-violeta{display:none}}  /* o CTA continua na gaveta e no herói */
.s-gaveta{position:fixed;inset:72px 0 0;background:var(--lavanda);z-index:49;padding:var(--e6) 16px;display:flex;flex-direction:column;gap:var(--e2);
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--ease),visibility .3s;overflow:auto}
.s-gaveta.aberta{opacity:1;transform:none;visibility:visible}
.s-gaveta a{font:800 28px/1.2 var(--f-titulo);color:var(--texto);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--borda)}
.s-gaveta .btn{margin-top:var(--e4);font:700 17px/1 var(--f-texto);padding:0 24px;border-bottom:0}
.s-gaveta a.btn-violeta{color:#fff} .s-gaveta a.btn-contorno{color:var(--violeta)}
.s-gaveta .btn{width:100%;justify-content:center}
.progresso-leitura{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--violeta);transform-origin:left;transform:scaleX(0);z-index:60}

/* ---------- hero ---------- */
.hero{position:relative;padding:var(--e12) 0 var(--e16);overflow:hidden}
@media(min-width:960px){.hero{padding:var(--e16) 0 var(--e24)}}
.hero .dividir{gap:var(--e12)}
.hero h1{margin:var(--e4) 0 var(--e6)}
.hero .corpo-lg{max-width:560px;margin-bottom:var(--e8)}
.palavra-troca{display:inline-grid;vertical-align:bottom}
.palavra-troca>span{grid-area:1/1;transition:opacity .5s,transform .6s var(--ease)}
.palavra-troca>span:not(.ativa){opacity:0;transform:translateY(40%)}

/* textura de sorrisos (elemento gráfico da marca), deixa metade da área livre */
.textura-sorriso{position:absolute;pointer-events:none;inset:auto -10% -20% auto;width:60%;height:70%;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Cpath d='M14 18q22 22 44 0' fill='none' stroke='%23DCCEFF' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:72px 48px;mask-image:radial-gradient(closest-side,#000 55%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.secao-ameixa .textura-sorriso{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='48' viewBox='0 0 72 48'%3E%3Cpath d='M14 18q22 22 44 0' fill='none' stroke='%233A2C5E' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")}

/* blocos de canto redondo (ilustração geométrica) */
.blocos{position:absolute;inset:0;pointer-events:none}
.blocos i{position:absolute;border-radius:var(--r-lg);background:var(--lavanda-3)}
.blocos i.lilas{background:var(--lilas);opacity:.35}
.blocos i.moeda{border-radius:50%}

/* ---------- molduras de tela real ---------- */
.celular{position:relative;width:min(300px,78vw);aspect-ratio:9/19.2;border-radius:44px;background:var(--ameixa);padding:12px;margin:0 auto}
.celular::before{content:"";position:absolute;top:22px;left:50%;width:80px;height:22px;border-radius:12px;background:#000;transform:translateX(-50%);z-index:2}
.celular .tela{width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--lavanda);position:relative}
.celular .tela img{width:100%;height:100%;object-fit:cover;object-position:top}
.celular .tela img.troca{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.celular .tela img.troca.ativa{opacity:1}
.navegador{border-radius:var(--r-lg);overflow:hidden;background:var(--branco);border:6px solid var(--ameixa)}  /* sem sombra: a única sombra da marca é a do cartão de oferta */
.navegador .barra{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--lavanda-2)}
.navegador .barra i{width:10px;height:10px;border-radius:50%;background:var(--lilas)}
.navegador .barra span{margin-left:12px;font-size:12px;color:var(--texto-apoio);background:var(--branco);border-radius:var(--r-pill);padding:3px 12px}
.navegador img{width:100%;height:auto}
.legenda-tela{font-size:12px;color:var(--texto-suave);text-align:center;margin-top:var(--e3)}

/* chat simulado (mensagem no grupo) */
.chat-sim{background:var(--branco);border-radius:var(--r-lg);border:1px solid var(--borda);padding:var(--e4);max-width:360px}
.chat-sim .cab{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--borda);margin-bottom:12px}
.chat-sim .cab img{width:36px;height:36px}
.chat-sim .cab b{display:block;font-size:14px} .chat-sim .cab small{font-size:12px;color:var(--texto-suave)}
.balao-msg{background:var(--lavanda);border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14px;line-height:1.5;white-space:pre-line}
.balao-msg + .balao-msg{margin-top:10px}
.digitando{display:inline-flex;gap:4px;padding:12px 14px;background:var(--lavanda);border-radius:4px 16px 16px 16px}
.digitando i{width:7px;height:7px;border-radius:50%;background:var(--lilas);animation:pulo 1.2s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulo{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ---------- passos e linha do tempo ---------- */
.passos-s{display:grid;gap:var(--e4);counter-reset:passo}
@media(min-width:960px){.passos-s{grid-template-columns:repeat(4,1fr)}}
.passo-s{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6);position:relative}
.passo-s::before{counter-increment:passo;content:counter(passo);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--violeta);color:#fff;font:800 18px/1 var(--f-titulo);margin-bottom:var(--e4)}
.passo-s h3{font-size:20px;margin-bottom:var(--e2)}
.passo-s p{font-size:15px;color:var(--texto-apoio)}

/* rolagem com tela fixa (storytelling) */
.historia{display:grid;gap:var(--e12)}
@media(min-width:960px){.historia{grid-template-columns:1fr 1fr}.historia .fixo{position:sticky;top:110px;align-self:start}}
.historia .etapa{min-height:auto;padding:var(--e8) 0;opacity:.35;transition:opacity .5s}
@media(min-width:960px){.historia .etapa{min-height:70vh;display:flex;flex-direction:column;justify-content:center}}
.historia .etapa.ativa{opacity:1}
.historia .etapa .num{font:800 14px/1 var(--f-texto);letter-spacing:.12em;color:var(--violeta);text-transform:uppercase}
.historia .etapa h3{margin:var(--e3) 0}
.historia .etapa p{color:var(--texto-apoio);max-width:460px}
.historia .etapa .mobile-tela{margin-top:var(--e6)}
@media(min-width:960px){.historia .etapa .mobile-tela{display:none}}
@media(max-width:959px){.historia .fixo{display:none}.historia .etapa{opacity:1}}

/* ---------- abas ---------- */
.abas{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e8)}
.aba{min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--borda-forte);background:var(--branco);font:700 15px var(--f-texto);color:var(--texto);cursor:pointer;transition:background .2s,color .2s}
.aba[aria-selected="true"]{background:var(--violeta);border-color:var(--violeta);color:#fff}
.painel-aba{animation:surge .6s var(--ease)}
@keyframes surge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- faixa rolante (nichos) ---------- */
.faixa{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.faixa .trilho{display:flex;gap:var(--e3);width:max-content;animation:rolar 40s linear infinite}
.faixa:hover .trilho{animation-play-state:paused}
.faixa .item{padding:12px 20px;border-radius:var(--r-pill);background:var(--branco);border:1px solid var(--borda);font-weight:700;white-space:nowrap}
.faixa.inversa .trilho{animation-direction:reverse}
@keyframes rolar{to{transform:translateX(-50%)}}

/* ---------- números ---------- */
.numeros{display:grid;gap:var(--e4)}
@media(min-width:720px){.numeros{grid-template-columns:repeat(4,1fr)}}
.numero{padding:var(--e6);border-radius:var(--r-lg);background:var(--branco);border:1px solid var(--borda)}
.numero b{display:block;font:800 clamp(40px,5vw,56px)/1 var(--f-titulo);color:var(--violeta);letter-spacing:-.02em}
.numero span{display:block;margin-top:var(--e2);font-weight:600}
.numero small{display:block;margin-top:var(--e1);font-size:12px;color:var(--texto-suave)}

/* ---------- planos ---------- */
.planos-s{display:grid;gap:var(--e4)}
@media(min-width:720px){.planos-s{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.planos-s{grid-template-columns:repeat(4,1fr)}}
.plano-s{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e6);display:flex;flex-direction:column;gap:var(--e3)}
.plano-s.dest{border:2px solid var(--violeta);position:relative}
.plano-s .preco{font:800 44px/1 var(--f-titulo);letter-spacing:-.02em}
.plano-s .preco small{font:600 15px var(--f-texto);color:var(--texto-apoio)}
.plano-s ul{list-style:none;display:grid;gap:10px;margin:var(--e2) 0 var(--e4);flex:1}
.plano-s li{display:flex;gap:10px;font-size:15px}
.plano-s li svg{color:var(--violeta);flex:none;margin-top:2px}
.alternador{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--branco);border:1px solid var(--borda)}
.alternador button{min-height:40px;padding:0 18px;border-radius:var(--r-pill);border:0;background:none;font:700 14px var(--f-texto);cursor:pointer;color:var(--texto)}
.alternador button[aria-pressed="true"]{background:var(--violeta);color:#fff}

/* ---------- tabela comparativa ---------- */
.tabela-s{width:100%;border-collapse:separate;border-spacing:0;background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);overflow:hidden;font-size:15px}
.tabela-s th,.tabela-s td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--borda);vertical-align:top}
.tabela-s th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-apoio);background:var(--lavanda-2)}
.tabela-s tr:last-child td{border-bottom:0}
.tabela-rolar{overflow-x:auto;border-radius:var(--r-lg)}

/* ---------- FAQ ---------- */
.faq-s details{background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-md);margin-bottom:var(--e3);transition:border-color .3s}
.faq-s details[open]{border-color:var(--borda-forte)}
.faq-s summary{list-style:none;cursor:pointer;padding:20px 56px 20px 20px;font-weight:700;font-size:17px;position:relative}
.faq-s summary::-webkit-details-marker{display:none}
.faq-s summary::after{content:"";position:absolute;right:20px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--lavanda) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%235B21B6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--ease)}
.faq-s details[open] summary::after{transform:rotate(45deg)}
.faq-s .resp{padding:0 20px 20px;color:var(--texto-apoio)}

/* ---------- CTA final ---------- */
.cta-faixa{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--violeta);color:var(--lavanda);padding:var(--e12) var(--e6);text-align:center}
@media(min-width:960px){.cta-faixa{padding:var(--e16)}}
.cta-faixa h2{color:var(--lavanda);max-width:720px;margin:0 auto var(--e4)}
.cta-faixa p{color:#EDE5FF;max-width:560px;margin:0 auto var(--e8)}
.cta-faixa .ctas{justify-content:center}

/* ---------- rodapé ---------- */
.s-rodape{background:var(--ameixa);color:#D9CEF5;padding:var(--e16) 0 var(--e8);font-size:15px}
.s-rodape a{color:#D9CEF5;text-decoration:none}
.s-rodape a:hover{color:var(--lavanda);text-decoration:underline}
.s-rodape .topo-r{display:grid;gap:var(--e8)}
@media(min-width:960px){.s-rodape .topo-r{grid-template-columns:1.6fr repeat(4,1fr)}}
.s-rodape h4,.s-rodape h2.rodape-tit{color:var(--lavanda);font:700 14px/1.3 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--e4)}
.s-rodape ul{list-style:none;display:grid;gap:10px}
.s-rodape .logo-r img{height:44px;width:auto;margin-bottom:var(--e4)}
.s-rodape .base{margin-top:var(--e12);padding-top:var(--e6);border-top:1px solid #3A2C5E;display:flex;flex-wrap:wrap;gap:var(--e4);justify-content:space-between;font-size:13px}
.s-rodape .aviso-legal{font-size:13px;color:#B7A9DC;margin-top:var(--e4);max-width:420px}

/* ---------- motion (motion.js liga as classes) ---------- */
[data-anima]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
[data-anima="esq"]{transform:translateX(-36px)} [data-anima="dir"]{transform:translateX(36px)}
[data-anima="zoom"]{transform:scale(.92)} [data-anima="sem"]{transform:none}
[data-anima].visivel{opacity:1;transform:none}
.flutua{animation:flutua 6s ease-in-out infinite}
.flutua.lento{animation-duration:9s}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.gira-lento{animation:gira 30s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.inclina{transition:transform .2s ease-out;transform-style:preserve-3d;will-change:transform}
.sorriso-anima path{stroke-dasharray:140;stroke-dashoffset:140;animation:traca 1.4s var(--ease) .4s forwards}
@keyframes traca{to{stroke-dashoffset:0}}
.paralaxe{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-anima]{opacity:1;transform:none}
  .faixa .trilho{animation:none;flex-wrap:wrap;width:auto}
  .faixa .item[aria-hidden="true"]{display:none}            /* a cópia só existe para o loop */
  .palavra-troca{display:inline}
  .palavra-troca>span:not(.ativa){display:none}            /* sem espaço reservado para as outras palavras */
  .sorriso-anima path{stroke-dashoffset:0}
}

/* faixa de lançamento: honestidade enquanto o envio direto aos grupos não está liberado para todos (remover ao ligar) */
.aviso-lancamento{background:var(--ameixa);color:var(--lavanda);font-size:14px;line-height:1.4;text-align:center;padding:10px 16px}
.aviso-lancamento a{color:var(--lavanda);font-weight:700}
/* no celular, entradas laterais viram verticais (nada empurra a largura) */
@media(max-width:767px){[data-anima="esq"],[data-anima="dir"]{transform:translateY(28px)}}

/* ---------- ajustes de acessibilidade (juízes, 16/10/2026) ---------- */
:focus-visible{outline:3px solid var(--violeta);outline-offset:2px;box-shadow:none}
.secao-ameixa :focus-visible,.secao-violeta :focus-visible,.cta-faixa :focus-visible,.s-rodape :focus-visible{outline-color:var(--lima)}
main p a:not(.btn),main li a:not(.btn),main td a:not(.btn),.resp a,.nota-honesta a{text-decoration:underline;text-underline-offset:2px}
.legenda-tela,.s-rodape .aviso-legal,.ctas-nota,small{font-size:14px}
.s-rodape li a{display:inline-flex;align-items:center;min-height:48px}
.s-rodape ul{gap:0}
.tabela-rolar:focus-visible{outline:3px solid var(--violeta);outline-offset:2px}
.faixa-pausa{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--e3);padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--borda-forte);background:var(--branco);color:var(--texto);font:700 14px var(--f-texto);cursor:pointer}
.faixa.pausada .trilho{animation-play-state:paused}
.celular .tela{padding-top:34px;background:var(--branco)}
.s-menu-bt[aria-expanded="true"] .ic-menu,.s-menu-bt .ic-fechar{display:none}
.s-menu-bt[aria-expanded="true"] .ic-fechar{display:block}
@media (prefers-reduced-motion:reduce){.faixa-pausa{display:none}}
/* rodada 2 dos juízes: alvos, textos e faixa dentro de um landmark */
.aviso-lancamento{padding:4px 16px}
.aviso-lancamento a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.olho{font-size:14px}
.migalha a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.doc-indice a,.indice a,.mi-indice a{min-height:48px;display:flex;align-items:center}
.dica-rolar,.mi-rotulo,.rascunho{font-size:14px}
.s-gaveta{inset:auto 0 0;top:var(--topo-h,72px)}
/* rodada 3: links em fundos escuros com contraste; logo com alvo de 48 px */
.cartao-ameixa a:not(.btn),.secao-ameixa a:not(.btn),.secao-violeta a:not(.btn),.cta-faixa a:not(.btn),.aviso-lancamento a{color:var(--lavanda)}
.s-topo .logo{display:inline-flex;align-items:center;min-height:48px}