/* ==========================================================================
   Lingo4all Academy — página pública (v2, 2026-09)
   --------------------------------------------------------------------------
   Identidade oficial (agreement.lingo4all.com/branding):
     Lingo Navy   #1E3A5C   autoridade
     Lingo Red    #D9342B   energia → reservado à CONVERSÃO (CTA principal)
     Lingo Green  #0E9F6E   crescimento → "incluído / concluído / gratuito"
     Lingo Blue   #3B8FE5   apoio → progresso e interação
     Deep Navy    #0A1525   fundos escuros
   Tipografia: Inter. Raios 6/10/14/22. Espaçamento 4 8 16 24 32 48 64 96.

   O QUE MUDOU DA V1, E PORQUÊ. A v1 era uma sequência de secções brancas,
   cinzentas e navy, todas com cartões — lia-se como documentação. A v2
   alterna fundos claros, QUENTES e escuros, reduz a superfície azul, mostra
   o produto real em molduras de aparelho e reserva o vermelho ao botão que
   converte. O azul deixa de ser decoração: marca progresso (barra, escada,
   abas) e mais nada.

   CLASSES QUE O local/lingoplacement REUTILIZA e que têm de continuar a
   existir com o mesmo sentido: .btn .btn-primary .btn-outline .btn-row
   .eyebrow .lead e os tokens --navy --red --green --blue --deep --bg
   --bg-alt --surface --ink --ink-2 --ink-3 --rule --rule-2 --on-dark
   --on-dark-2 --r-sm --r-md --r-lg --s1…--s8 --max --read --shadow-1/2.
   ========================================================================== */

:root{
  --navy:#1E3A5C;
  --red:#D9342B;
  --green:#0E9F6E;
  --blue:#3B8FE5;
  --deep:#0A1525;

  --bg:#FFFFFF;
  --bg-alt:#F4F7FA;
  --bg-warm:#FBF7F1;          /* o fundo quente que quebra a monotonia azul */
  --bg-sky:#EEF5FC;           /* azul muito claro: progresso, interação */
  --surface:#FFFFFF;
  --ink:#132537;
  --ink-2:#42586E;
  --ink-3:#5B6F87;
  --rule:#DBE4EC;
  --rule-2:#C3D0DC;

  --on-dark:#EAF1F8;
  --on-dark-2:#A7BED4;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:22px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --max:1240px; --read:66ch;

  --shadow-1:0 1px 2px rgba(19,37,55,.06), 0 6px 18px -10px rgba(19,37,55,.20);
  --shadow-2:0 2px 6px rgba(19,37,55,.08), 0 22px 46px -22px rgba(19,37,55,.32);
  --shadow-3:0 30px 70px -30px rgba(10,21,37,.55);

  --cefr-1:#9FC9F2;
  --cefr-2:#6FAEEA;
  --cefr-3:#3B8FE5;
  --cefr-4:#2A6FBE;
  --cefr-5:#245A99;
  --cefr-6:#1E3A5C;
}

/*  A INTER É SERVIDA DAQUI, não do Google Fonts. Três razões: o `preload` no
    HTML faz a fonte chegar antes da primeira pintura (troca quase nula, CLS
    medido a cair de 0,20 para ~0 em EN); não há pedido a terceiros; e todas
    as páginas que usam este CSS (landing, nivelamento, resposta da lista de
    espera) ficam com a mesma tipografia. Fonte variável (400–900), subconjuntos latin/latin-ext, SIL OFL. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url(/_academy-assets/fonts/inter-var-latin-ext.woff2?v=20260908) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url(/_academy-assets/fonts/inter-var-latin.woff2?v=20260908) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Inter (SIL OFL 1.1) — subconjuntos latin/latin-ext servidos localmente, para preload e sem terceiros */

/*  A Inter chega com display=swap: primeiro pinta-se com a fonte
    de reserva, depois troca-se. Se a reserva tiver outras métricas, o texto
    cresce ou encolhe na troca e a página salta (CLS medido em EN: 0,20). Uma
    fonte de reserva LOCAL com as métricas da Inter ajustadas (size-adjust,
    ascent/descent-override) faz a troca ser quase invisível.               */
@font-face{
  font-family:"Inter Fallback"; src:local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust:107%; ascent-override:90%; descent-override:22%; line-gap-override:0%;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--navy); text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:var(--r-sm)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,4vw,48px)}
.narrow{max-width:var(--read)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-md) 0;
  font-weight:700;
}
.skip:focus{left:0}

/* ---------- ícones (Lucide, inline) ---------- */
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ico-sm{width:16px; height:16px}

/* ---------- tipografia ---------- */
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); margin:0 0 var(--s3);
}
.eyebrow.on-dark{color:#8CC0F1}
h1{
  font-weight:900; font-size:clamp(2.35rem,4.9vw,3.9rem); line-height:1.04;
  letter-spacing:-.032em; margin:0 0 var(--s4); text-wrap:balance;
}
h2{
  font-weight:800; font-size:clamp(1.75rem,3.1vw,2.55rem); line-height:1.12;
  letter-spacing:-.024em; margin:0 0 var(--s3); text-wrap:balance;
}
h3{font-weight:700; font-size:1.2rem; line-height:1.3; letter-spacing:-.012em; margin:0 0 var(--s2)}
h4{font-weight:700; font-size:1rem; line-height:1.34; margin:0 0 6px}
p{margin:0 0 var(--s3); max-width:var(--read)}
.lead{font-size:clamp(1.08rem,1.6vw,1.26rem); color:var(--ink-2); line-height:1.55}
.muted{color:var(--ink-3)}
.small{font-size:.9rem}

/* ---------- secções ---------- */
section{padding-block:clamp(60px,7.5vw,104px); position:relative}
section.alt{background:var(--bg-alt)}
section.warm{background:var(--bg-warm)}
section.sky{background:var(--bg-sky)}
section.dark{background:var(--navy); color:var(--on-dark)}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:var(--on-dark-2)}
.sec-head{max-width:58ch; margin-bottom:var(--s6)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center p{margin-inline:auto}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:700; font-size:1rem; line-height:1;
  padding:15px 26px; border-radius:var(--r-md); border:2px solid transparent;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
  min-height:48px;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 8px 24px -10px rgba(217,52,43,.7)}
.btn-primary:hover{background:#C22C24; box-shadow:0 12px 28px -10px rgba(217,52,43,.75)}
.btn-secondary{background:var(--navy); color:#fff}
.btn-secondary:hover{background:#16304E}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--rule-2)}
.btn-outline:hover{border-color:var(--navy); background:#fff}
.btn-ghost-light{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.34)}
.btn-ghost-light:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:10px 16px; font-size:.9rem; min-height:44px}
.btn-lg{padding:18px 32px; font-size:1.08rem}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5); align-items:center}
.btn .ico{width:18px; height:18px}

/* ---------- cabeçalho ---------- */
.hdr{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex; align-items:center; gap:var(--s4); min-height:72px}
.hdr-logo{display:flex; align-items:center; flex:none; min-height:44px}
.hdr-logo img{height:34px; width:auto}
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{
  color:var(--ink-2); text-decoration:none; font-weight:600; font-size:.93rem;
  padding:9px 13px; border-radius:var(--r-sm); min-height:44px; display:flex; align-items:center;
}
.nav a:hover{color:var(--navy); background:var(--bg-alt)}
.hdr-act{display:flex; align-items:center; gap:10px; flex:none}
.hdr-act .btn-sm, .lang-btn, .burger{min-height:44px; min-width:44px}

.lang{position:relative}
.lang-btn{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:700; font-size:.86rem;
  background:transparent; border:1px solid var(--rule-2); border-radius:var(--r-sm);
  padding:9px 12px; color:var(--ink-2); cursor:pointer;
}
.lang-btn:hover{border-color:var(--navy); color:var(--navy)}
.lang-ico{width:15px;height:15px;flex:none;display:block}
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:186px;
  background:#fff; border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--shadow-2); padding:6px; margin:0; list-style:none; z-index:20;
}
.lang-menu[hidden]{display:none}
.lang-menu a{
  display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:600;
}
.lang-menu a:hover{background:var(--bg-alt)}
.lang-menu a[aria-current="true"]{color:var(--blue)}
.lang-menu a[aria-current="true"]::after{content:""; margin-left:auto; width:7px; height:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg)}

.burger{display:none; background:transparent; border:1px solid var(--rule-2); border-radius:var(--r-sm); padding:10px 12px; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:var(--navy); border-radius:2px}
.burger span+span{margin-top:4px}

@media (max-width:1080px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:#fff;
    border-bottom:1px solid var(--rule); padding:var(--s2) clamp(20px,4vw,48px) var(--s4);
    box-shadow:var(--shadow-1);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 6px; border-bottom:1px solid var(--rule); border-radius:0}
  .burger{display:block; order:3}
  .hdr-in{gap:var(--s2)}
  .hdr-act .btn-hide-sm{display:none}
}
@media (max-width:560px){
  .hdr-in{min-height:62px; gap:10px}
  .hdr-logo img{height:28px}
  .hdr-act{gap:7px; min-width:0}
  .lang-btn{padding:8px 9px}
  .lang-btn .lang-txt{display:none}
  .btn-sm{padding:9px 12px; font-size:.84rem}
  .burger{padding:9px 10px}
}

/* ---------- hero ----------
   Escuro, mas não um véu azul: um fundo deep-navy com um brilho radial
   azul discreto e a fotografia REAL ao lado, na sua própria moldura. O
   produto (ecrã do Academy) entra numa moldura de portátil sobreposta à
   fotografia, e o telemóvel sobreposto a ambos. Três camadas, três
   profundidades — e o texto continua sobre fundo liso, legível.         */
.hero{
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(59,143,229,.28), transparent 62%),
    radial-gradient(700px 500px at 10% 90%, rgba(30,58,92,.9), transparent 60%),
    linear-gradient(160deg,#0C1B30 0%, var(--deep) 60%, #0B1A2E 100%);
  color:#fff; overflow:hidden; padding-block:clamp(52px,7vw,96px) clamp(56px,7vw,88px);
}
.hero-in{display:grid; gap:var(--s7); align-items:center}
@media(min-width:1000px){ .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4vw,64px)} }
.hero h1{color:#fff; max-width:14ch}
.hero .lead{color:var(--on-dark-2); max-width:48ch}
.hero-cta{margin-top:var(--s5)}
.hero-micro{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:var(--s3) 0 0;
  font-size:.88rem; color:var(--on-dark-2); max-width:none;
}
.hero-micro .ico{width:16px; height:16px; color:#5FD3A8}
.hero-proof{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin:var(--s5) 0 0; padding:10px 14px; border-radius:var(--r-md);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  font-size:.9rem; font-weight:600; color:#DCE9F6; max-width:none;
}
.hero-proof .sep{color:rgba(255,255,255,.35)}
.hero-proof .cefr-seal{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  background:rgba(59,143,229,.22); color:#BFDCF8; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
}

.hero-visual{position:relative; min-height:420px}
@media(max-width:999px){ .hero-visual{min-height:0; margin-top:var(--s2)} }
.hero-photo{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--shadow-3); width:min(100%,520px); margin-left:auto;
  background:#12233A;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:62% 30%}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,21,37,0) 55%,rgba(10,21,37,.55) 100%);
}
.hero-visual .hero-laptop{
  position:absolute; left:0; bottom:-6%; width:min(74%,560px); z-index:2;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
}
.hero-visual .hero-phone{
  position:absolute; right:-2%; bottom:-10%; width:min(24%,150px); z-index:3;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.5));
}
.hero-chip{
  position:absolute; top:6%; left:-2%; z-index:3;
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  background:#fff; color:var(--navy); border-radius:var(--r-md); box-shadow:var(--shadow-2);
  font-size:.82rem; font-weight:700;
}
.hero-chip .steps{display:inline-flex; gap:4px}
.hero-chip .steps b{display:grid; place-items:center; width:26px; height:26px; border-radius:6px; font-size:.7rem; color:#fff}
@media(max-width:999px){
  .hero-visual{display:grid; grid-template-columns:minmax(0,1fr); }
  .hero-photo{aspect-ratio:16/10; width:100%}
  .hero-visual .hero-laptop{position:relative; left:auto; bottom:auto; width:min(88%,560px); margin:-14% auto 0; }
  .hero-visual .hero-phone{right:4%; bottom:-4%; width:min(22%,130px)}
  .hero-chip{top:auto; bottom:calc(100% - 14px); left:12px}
}
@media(max-width:560px){ .hero-chip{display:none} .hero-visual .hero-phone{display:none} .hero-visual .hero-laptop{width:96%; margin-top:-10%} }

/* ---------- molduras de aparelho ----------
   Feitas em CSS, sem imagem de bezel: só a captura real dentro. A imagem
   tem width/height explícitos e aspect-ratio, para não haver CLS.        */
.dev-laptop{position:relative; padding:1.8% 1.8% 0; background:#16202C; border-radius:14px 14px 4px 4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dev-laptop::after{content:""; display:block; position:absolute; left:-4%; right:-4%; bottom:-10px; height:12px; background:linear-gradient(#2A3644,#1A2430); border-radius:0 0 12px 12px}
.dev-laptop .dev-screen{aspect-ratio:16/10; overflow:hidden; border-radius:6px 6px 0 0; background:#fff}
.dev-laptop .dev-screen img{width:100%; height:100%; object-fit:cover; object-position:top}
.dev-phone{position:relative; padding:5% 4%; background:#16202C; border-radius:12% / 6%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dev-phone .dev-screen{aspect-ratio:390/844; overflow:hidden; border-radius:9% / 4.5%; background:#fff}
.dev-phone .dev-screen img{width:100%; height:100%; object-fit:cover; object-position:top}

/* ---------- barra de confiança ---------- */
.trust{padding-block:var(--s5); border-bottom:1px solid var(--rule); background:var(--bg)}
.trust-list{
  list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.trust-list li{display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:var(--ink-2)}
.trust-list .ico{color:var(--blue)}

/* ---------- jornada (6 passos) ---------- */
.journey{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); counter-reset:j}
@media(min-width:700px){ .journey{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1100px){ .journey{grid-template-columns:repeat(6,1fr); gap:var(--s3)} }
.journey li{position:relative; padding-top:var(--s3)}
.journey li::before{
  counter-increment:j; content:counter(j,decimal-leading-zero);
  display:block; font-weight:900; font-size:.8rem; letter-spacing:.14em; color:var(--blue); margin-bottom:10px;
}
.journey li::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),rgba(59,143,229,.15));
}
.journey li:first-child::after{background:var(--red)}
.journey h3{font-size:1.02rem; margin:0 0 6px}
.journey p{font-size:.92rem; color:var(--ink-2); margin:0}
.journey-media{
  margin-top:var(--s6); display:grid; gap:var(--s4); align-items:center;
}
@media(min-width:900px){ .journey-media{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.journey-photo{border-radius:var(--r-xl); overflow:hidden; aspect-ratio:3/2; box-shadow:var(--shadow-2)}
.journey-photo img{width:100%; height:100%; object-fit:cover}
.cami{border:1px solid var(--rule); border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--shadow-1); display:grid; grid-template-columns:150px 1fr; align-items:center}
.cami picture,.cami img{height:100%; min-height:190px}
@media(max-width:480px){ .cami{grid-template-columns:110px 1fr} }
.cami video{width:100%; display:block; background:#0A1525; aspect-ratio:16/9}
.cami-cap{padding:14px 18px; font-size:.88rem; color:var(--ink-2); margin:0; max-width:none}

/* ---------- demonstração interativa ----------
   Abas acessíveis (role=tablist). Cada painel tem o ecrã REAL (captura da
   conta técnica de demonstração) numa moldura, mais um painel lateral que
   explica o que se vê. Nada aqui finge guardar ou corrigir: os controlos
   são ilustrativos e dizem-no.                                            */
.demo{display:grid; gap:var(--s4); margin-top:var(--s5)}
@media(min-width:1000px){ .demo{grid-template-columns:260px minmax(0,1fr); gap:var(--s5); align-items:start} }
.demo-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
@media(min-width:1000px){ .demo-tabs{flex-direction:column; overflow:visible; position:sticky; top:96px} }
.demo-tab{
  display:flex; align-items:center; gap:10px; flex:none;
  font:inherit; font-weight:700; font-size:.92rem; color:var(--ink-2); text-align:left;
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-md);
  padding:12px 14px; cursor:pointer; min-height:48px; white-space:nowrap;
}
.demo-tab .ico{color:var(--ink-3)}
.demo-tab:hover{border-color:var(--rule-2); background:#fff}
.demo-tab[aria-selected="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.demo-tab[aria-selected="true"] .ico{color:#8CC0F1}
.demo-panel[hidden]{display:none}
.demo-panel{display:grid; gap:var(--s4)}
@media(min-width:1180px){ .demo-panel{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start} }
.demo-shot{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow-2); background:#fff}
.demo-shot img{width:100%; height:auto; display:block}
.demo-side{background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s4)}
.demo-side h3{font-size:1.06rem; margin:0 0 8px}
.demo-side p{font-size:.94rem; color:var(--ink-2)}
.demo-side ul{margin:0 0 var(--s3); padding-left:1.1em; font-size:.92rem; color:var(--ink-2)}
.demo-note{
  display:flex; gap:9px; align-items:flex-start; margin:var(--s3) 0 0; padding:10px 12px;
  border-radius:var(--r-sm); background:var(--bg-sky); color:var(--ink-2); font-size:.82rem; max-width:none;
}
.demo-note .ico{width:16px; height:16px; color:var(--blue); margin-top:2px}

/* controlos ilustrativos da demonstração */
.demo-ctl{display:grid; gap:10px; margin-top:var(--s3)}
.demo-rec{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px;
  border:1px solid var(--rule-2); background:#fff; font:inherit; font-weight:700; font-size:.9rem; color:var(--navy); cursor:pointer;
}
.demo-rec .dot{width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(217,52,43,.5)}
.demo-rec[aria-pressed="true"] .dot{animation:pulse 1.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,52,43,.55)} 100%{box-shadow:0 0 0 12px rgba(217,52,43,0)}}
.demo-timer{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-2); font-size:.9rem}
.demo-audio{display:flex; align-items:center; gap:10px}
.demo-audio button{width:40px; height:40px; border-radius:50%; border:0; background:var(--navy); color:#fff; display:grid; place-items:center; cursor:pointer}
.demo-audio .track{flex:1; height:6px; border-radius:999px; background:var(--rule); overflow:hidden}
.demo-audio .track i{display:block; height:100%; width:0; background:var(--blue); transition:width .25s linear}
.demo-choice{display:grid; gap:8px}
.demo-choice label{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--r-sm); font-size:.92rem; cursor:pointer; background:#fff}
.demo-choice label:has(input:checked){border-color:var(--blue); background:var(--bg-sky)}
.demo-feedback{font-size:.88rem; font-weight:700; margin:6px 0 0; color:var(--ink-2); min-height:1.4em}
.demo-feedback.ok{color:#0A7D56}
.demo-feedback.no{color:#9B2A23}
.demo-write{width:100%; min-height:96px; font:inherit; font-size:.95rem; padding:12px; border:1px solid var(--rule-2); border-radius:var(--r-sm); resize:vertical}
.demo-count{font-size:.82rem; color:var(--ink-3); margin:6px 0 0; text-align:right; max-width:none}

/* rubrica real */
.rubric{width:100%; border-collapse:collapse; font-size:.84rem}
.rubric th,.rubric td{border:1px solid var(--rule); padding:8px 10px; vertical-align:top; text-align:left}
.rubric thead th{background:var(--bg-alt); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.rubric tbody th{font-weight:700; color:var(--ink); background:#fff; width:26%}
.rubric td b{display:block; color:var(--blue); font-size:.74rem; margin-bottom:2px}
.rubric-scroll{overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--rule); background:#fff}
.rubric-scroll:focus-visible{outline:3px solid var(--blue); outline-offset:-3px}

/* progresso */
.prog{display:grid; gap:12px}
.prog-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; font-size:.92rem}
.prog-row .ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#fff; background:var(--rule-2)}
.prog-row .ic.done{background:var(--green)}
.prog-row .ic.now{background:var(--blue)}
.prog-row .st{font-size:.78rem; font-weight:700; color:var(--ink-3)}
.prog-row .st.ok{color:#0A7D56}
.bar{height:10px; background:var(--bg-alt); border-radius:999px; overflow:hidden; border:1px solid var(--rule)}
.bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--green)); border-radius:999px; transition:width .5s ease}
.prog-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px}
.prog-head b{font-size:1rem}
.prog-pct{font-weight:800; color:var(--green)}

/* ---------- níveis (transformação) ---------- */
.ladder{display:grid; gap:var(--s3); margin-top:var(--s5)}
@media(min-width:700px){ .ladder{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .ladder{grid-template-columns:repeat(4,1fr)} }
.lv{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); position:relative;
}
.lv::before{content:""; position:absolute; left:var(--s4); right:var(--s4); top:0; height:4px; border-radius:0 0 4px 4px; background:var(--c,var(--blue))}
.lv-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px}
.lv-code{
  display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  font-weight:900; font-size:1.15rem; letter-spacing:-.02em; color:#fff; background:var(--c,var(--blue));
}
.lv-name{font-weight:800; font-size:1.05rem; letter-spacing:-.01em}
.lv p{font-size:.94rem; color:var(--ink-2); margin:6px 0 0}
.lv ul{margin:var(--s2) 0 0; padding-left:1.1em; font-size:.9rem; color:var(--ink-2)}
.lv li{margin-bottom:5px}
.lv li::marker{color:var(--c,var(--blue))}
.lv-foot{margin-top:auto; padding-top:var(--s3); display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:.8rem; color:var(--ink-3)}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.tag-live{background:rgba(14,159,110,.13); color:#0A7D56}
.tag-soon{background:rgba(59,143,229,.14); color:#1F63A8}
.tag-planned{background:#EDF2F7; color:var(--ink-3)}
.tag-base{background:var(--bg-sky); color:var(--navy)}
.ladder-next{display:grid; gap:var(--s3); margin-top:var(--s3)}
@media(min-width:700px){ .ladder-next{grid-template-columns:repeat(2,1fr)} }
.lv.next{background:transparent; border-style:dashed}
.lv.next .lv-code{background:#fff; color:var(--c); border:2px solid var(--c)}
.lv.dim{border-style:dashed; opacity:.8}
.lv.dim .lv-code{background:#fff; color:var(--ink-3); border:2px solid var(--rule-2)}
.lv.dim p{font-size:.88rem}
.cefr-note{
  margin-top:var(--s5); padding:var(--s3) var(--s4);
  border-left:4px solid var(--blue); background:#fff; border-radius:0 var(--r-md) var(--r-md) 0;
}
.cefr-note p{margin:0; font-size:.92rem; color:var(--ink-2); max-width:none}

/* ---------- programas ----------
   Três pesos visuais para três coisas diferentes: a formação principal
   (grande, com moldura forte), a prática complementar (lista) e os
   programas profissionais (pequenos, com a sua condição escrita).      */
.prog-grid{display:grid; gap:var(--s4); margin-top:var(--s5)}
@media(min-width:960px){ .prog-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.prog-main{
  background:var(--navy); color:#fff; border-radius:var(--r-xl); padding:clamp(24px,3vw,40px);
  display:grid; gap:var(--s3); position:relative; overflow:hidden;
}
.prog-main::after{content:""; position:absolute; width:340px; height:340px; right:-120px; bottom:-160px; border-radius:50%; background:radial-gradient(rgba(59,143,229,.45),transparent 70%)}
.prog-main>*{position:relative}
.prog-main h3{color:#fff; font-size:1.5rem; margin:0}
.prog-main p{color:var(--on-dark-2); margin:0}
.prog-main .levels{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.prog-main .levels b{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:#fff; font-size:.9rem}
.prog-main ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:.93rem; color:#DCE9F6}
.prog-main li{position:relative; padding-left:26px}
.prog-main li::before{content:""; position:absolute; left:0; top:.45em; width:8px; height:14px; border-right:2px solid #5FD3A8; border-bottom:2px solid #5FD3A8; transform:rotate(45deg) translate(2px,-3px)}
.prog-kind{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8CC0F1}
.prog-list{display:grid; gap:var(--s3)}
.prog-item{background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s4)}
.prog-item .prog-kind{color:var(--blue)}
.prog-item h3{font-size:1.06rem; margin:6px 0 6px}
.prog-item p{font-size:.92rem; color:var(--ink-2); margin:0}
.prog-item .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.chip{font-size:.78rem; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--bg-alt); color:var(--ink-2); border:1px solid var(--rule)}
.prog-item.pro{border-style:dashed; background:var(--bg-alt)}
.prog-item.pro .prog-kind{color:var(--ink-3)}
.prog-item.pro .chip{background:#fff}
.prog-cond{display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:.82rem; color:var(--ink-3)}
.prog-cond .ico{width:15px; height:15px; margin-top:3px}

/* ---------- Academy + Play ---------- */
.play{
  display:grid; gap:var(--s5); align-items:center;
  background:linear-gradient(135deg,#123A63 0%,#0A1525 70%);
  border-radius:var(--r-xl); padding:clamp(28px,4vw,56px); color:#fff; overflow:hidden; position:relative;
}
@media(min-width:960px){ .play{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} }
.play h2{color:#fff; margin-bottom:var(--s3)}
.play p{color:var(--on-dark-2)}
.play-rel{display:grid; gap:10px; margin:var(--s4) 0 0; padding:0; list-style:none}
.play-rel li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; font-size:.93rem; color:#DCE9F6}
.play-rel .ico{color:#8CC0F1; margin-top:3px}
.play-rel b{color:#fff}
.play-shots{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.play-shot{border-radius:var(--r-md); overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0F2038; box-shadow:var(--shadow-2)}
.play-shot img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
.play-shot.wide{grid-column:span 2}
.play-shot figcaption{font-size:.76rem; color:var(--on-dark-2); padding:7px 10px; background:rgba(255,255,255,.05)}
.play-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s4)}
.play-tag{font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.10); color:#DCE9F6; border:1px solid rgba(255,255,255,.16)}

/* ---------- prova do produto ---------- */
.stats{display:grid; gap:var(--s3); margin-top:var(--s5); grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s4)}
.stat b{display:block; font-size:clamp(1.9rem,3vw,2.5rem); font-weight:900; letter-spacing:-.03em; color:var(--navy); line-height:1.05}
.stat span{display:block; font-size:.9rem; color:var(--ink-2); margin-top:6px}
.stat small{display:block; font-size:.76rem; color:var(--ink-3); margin-top:8px}
.proof-grid{display:grid; gap:var(--s4); margin-top:var(--s5)}
@media(min-width:960px){ .proof-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.proof-card{background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s4)}
.proof-card h3{font-size:1.06rem}
.proof-card p{font-size:.92rem; color:var(--ink-2)}
.unit-list{list-style:none; margin:0; padding:0; display:grid; gap:2px; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; background:var(--rule)}
.unit-list li{display:flex; align-items:center; gap:10px; padding:9px 12px; background:#fff; font-size:.88rem}
.unit-list .kind{margin-left:auto; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); flex:none}
.unit-list .k{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:#fff; font-size:.62rem; font-weight:900; flex:none}
.k-in{background:var(--cefr-2)} .k-pr{background:var(--blue)} .k-ev{background:var(--red)} .k-rv{background:var(--green)}
.proof-src{font-size:.78rem; color:var(--ink-3); margin-top:var(--s3); max-width:none}

/* ---------- planos ---------- */
.plans{display:grid; gap:var(--s4); margin-top:var(--s5); align-items:stretch}
.plan{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5) var(--s4) var(--s4);
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-1);
}
.plan.feat{border:2px solid var(--navy); box-shadow:var(--shadow-2)}
@media(min-width:900px){
  .plans{grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto auto auto auto 1fr auto; align-items:start}
  .plan{grid-row:span 7}
  /*  Dentro do subgrid, `margin-top:auto` empurrava o botão para o FUNDO da
      faixa 7 — e quando a nota de um cartão quebra em mais linhas do que a dos
      outros (acontece em EN), os botões deixam de ficar na mesma linha. Com
      align-self:start os três botões nascem no topo da faixa, sempre.       */
  @supports(grid-template-rows:subgrid){ .plan{display:grid; grid-template-rows:subgrid; gap:0} .plan .plan-cta{margin-top:0; align-self:start} }
  .plan.feat{transform:translateY(-10px)}
}
@media(max-width:899px){ .plan.feat{order:-1} .plan-badge--vazio{display:none} }
.plan-badge{
  align-self:flex-start; justify-self:start; font-size:.7rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; background:var(--navy); color:#fff;
  padding:6px 12px; border-radius:999px; margin-bottom:var(--s3); border:2px solid var(--navy);
}
.plan-badge--alt{background:#fff; color:var(--navy)}
.plan-badge--vazio{visibility:hidden}
.plan h3{margin:0 0 6px; font-size:1.35rem; letter-spacing:-.02em; color:var(--navy)}
.plan-for{font-size:.93rem; color:var(--ink-2); margin:0 0 var(--s4)}
.plan-price{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:var(--s3) 0 var(--s4); margin:0 0 var(--s3)}
.pp-parcelas{display:block; font-size:.9rem; font-weight:700; color:var(--ink-2)}
.pp-valor{display:block; font-size:2.9rem; line-height:1.04; font-weight:900; letter-spacing:-.035em; color:var(--navy); margin:2px 0 0}
.pp-periodo{display:block; font-size:.95rem; color:var(--ink-2); margin-top:2px}
.pp-anual{display:inline-block; margin-top:12px; font-size:.9rem; font-weight:700; color:var(--ink); background:var(--bg-alt); border:1px solid var(--rule); padding:7px 13px; border-radius:999px}
section.alt .pp-anual{background:#F0F5FA}
.plan-pp{margin:0 0 var(--s3); font-size:.9rem; font-weight:700; color:var(--ink-2)}
.plan-pp--realce{color:#0A6B4A; background:#E8F6F0; border-radius:var(--r-sm); padding:9px 12px}
.plan-pp:empty{padding:0; margin:0; background:none}
.plan-inc{list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:10px; font-size:.93rem; color:var(--ink-2); align-content:start}
.plan-inc li{position:relative; padding-left:27px}
.plan-inc li::before{content:""; position:absolute; left:0; top:.32em; width:17px; height:17px; border-radius:50%; background:#E6F5EE}
.plan-inc li::after{content:""; position:absolute; left:5px; top:.62em; width:6px; height:3px; border-left:2px solid #0A6B4A; border-bottom:2px solid #0A6B4A; transform:rotate(-45deg)}
.plan-cta{margin-top:auto}
.plan-cta .btn{width:100%}
.plan-ctanota{margin:10px 0 0; font-size:.81rem; line-height:1.45; color:var(--ink-2); text-align:center}
.plans-lanc{
  margin:var(--s5) 0 0; padding:13px 18px;
  border-left:4px solid var(--blue); border-radius:0 var(--r-md) var(--r-md) 0;
  background:#fff; color:var(--ink); font-size:.94rem; font-weight:700; max-width:var(--read);
}
.plans-lanc + .plans{margin-top:var(--s4)}
.cmp-nota{margin:0; max-width:none; padding:12px 20px; font-size:.86rem; color:var(--ink-2); border-top:1px solid var(--rule); background:var(--bg-alt)}
.cmp-nota + .cmp-nota{border-top:0; padding-top:0}
.plans-moeda{margin:var(--s4) 0 0; font-size:.9rem; font-weight:700; color:var(--ink-2)}
.plans-nota{margin:8px 0 0; font-size:.88rem; color:var(--ink-2); max-width:var(--read)}
.plans-cmp{margin-top:var(--s5); border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.plans-cmp>summary{cursor:pointer; padding:14px 20px; min-height:48px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:11px; list-style:none}
.plans-cmp>summary::-webkit-details-marker{display:none}
.plans-cmp>summary::before{content:""; flex:none; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease}
.plans-cmp[open]>summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
.plans-cmp>summary:hover{background:var(--bg-alt)}
.cmp-scroll{overflow-x:auto; border-top:1px solid var(--rule); -webkit-overflow-scrolling:touch}
.cmp-scroll:focus-visible{outline:3px solid var(--blue); outline-offset:-3px}
table.cmp{border-collapse:collapse; width:100%; min-width:620px; font-size:.9rem}
.cmp th,.cmp td{padding:11px 14px; border-bottom:1px solid var(--rule); text-align:center}
.cmp thead th{background:var(--bg-alt); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.cmp thead th.cmp-feat{color:var(--navy)}
.cmp tbody th{position:sticky; left:0; z-index:1; text-align:left; font-weight:600; color:var(--ink); background:var(--surface); min-width:200px}
.cmp thead th:first-child{position:sticky; left:0; z-index:2; text-align:left; background:var(--bg-alt)}
.cmp td{color:var(--ink-2)}
.cmp-sim span[aria-hidden]{color:#0A6B4A; font-weight:900; font-size:1.05rem}
.cmp-nao span[aria-hidden]{color:var(--ink-3)}
.cmp-txt{font-size:.85rem}
.cmp-dica{display:none}
@media(max-width:700px){
  .cmp-dica{display:block; margin:0; padding:0 20px 12px; font-size:.84rem; color:var(--ink-2)}
  table.cmp{min-width:520px; font-size:.85rem}
  .cmp th,.cmp td{padding:9px 10px}
  .cmp tbody th{min-width:142px}
}
.plan-free{margin-top:var(--s5); border:1px dashed var(--rule-2); border-radius:var(--r-lg); padding:var(--s5); background:#fff; display:grid; gap:var(--s3)}
@media(min-width:820px){ .plan-free{grid-template-columns:minmax(0,1fr) auto; align-items:center} }
.plan-free h3{margin:0}
.plan-free p{margin:6px 0 0; font-size:.94rem; color:var(--ink-2)}

/* ---------- lista de espera (formulário) ---------- */
.wl{display:grid; gap:var(--s5); margin-top:var(--s5); align-items:start}
@media(min-width:960px){ .wl{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} }
.wl-side h3{font-size:1.1rem}
.wl-side ul{margin:0 0 var(--s3); padding-left:1.1em; font-size:.94rem; color:var(--ink-2)}
.wl-side li{margin-bottom:6px}
.wl-form{background:#fff; border:1px solid var(--rule); border-radius:var(--r-xl); padding:clamp(20px,3vw,36px); box-shadow:var(--shadow-1)}
.wl-form fieldset{border:0; padding:0; margin:0 0 var(--s3); min-width:0}
.wl-form legend{font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0; margin-bottom:10px}
.f-grid{display:grid; gap:14px}
@media(min-width:640px){ .f-grid{grid-template-columns:repeat(2,1fr)} .f-grid .span{grid-column:span 2} }
.f{display:grid; gap:6px}
.f label{font-size:.9rem; font-weight:700; color:var(--ink)}
.f label .opt{font-weight:500; color:var(--ink-3)}
.f input,.f select{
  font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--rule-2); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); min-height:48px; width:100%;
}
.f input:focus-visible,.f select:focus-visible{outline:3px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.f input[aria-invalid="true"],.f select[aria-invalid="true"]{border-color:#B3261E; background:#FFF7F6}
.f-err{font-size:.84rem; color:#9B2A23; font-weight:600; margin:0; min-height:0}
.f-err:empty{display:none}
.f-hint{font-size:.82rem; color:var(--ink-3); margin:0}
.f-check{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px 0; font-size:.9rem; color:var(--ink-2)}
.f-check input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--navy); flex:none}
.f-check.req label{color:var(--ink)}
.f-actions{margin-top:var(--s3); display:grid; gap:12px}
.f-actions .btn{width:100%}
.f-actions .btn[aria-busy="true"]{opacity:.75; cursor:progress}
.f-legal{font-size:.8rem; color:var(--ink-3); margin:0; max-width:none}
.f-status{margin:0; padding:0; font-size:.94rem; font-weight:600; max-width:none}
.f-status:empty{display:none}
.f-status.ok{padding:14px 16px; border-radius:var(--r-md); background:#E8F6F0; color:#0A6B4A; border:1px solid #BFE6D3}
.f-status.err{padding:14px 16px; border-radius:var(--r-md); background:#FFF3F2; color:#9B2A23; border:1px solid #F3C7C3}
.hp{position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden}
.wl-done{display:grid; gap:12px; padding:var(--s4); border-radius:var(--r-lg); background:#E8F6F0; border:1px solid #BFE6D3; color:#0A6B4A}
.wl-done h3{color:#0A6B4A; margin:0}
.wl-done p{color:#0A6B4A; margin:0; max-width:none}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s5); border-top:1px solid var(--rule)}
@media(min-width:960px){ .faq{columns:2; column-gap:var(--s6); border-top:0} .faq details{break-inside:avoid; border-top:1px solid var(--rule)} }
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s3) 42px var(--s3) 0; position:relative; font-weight:700; font-size:1rem; color:var(--ink); min-height:48px; display:flex; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:10px; height:10px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:translateY(-70%) rotate(45deg); transition:transform .18s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--navy)}
.faq .a{padding:0 0 var(--s4)}
.faq .a p{margin:0; color:var(--ink-2); font-size:.95rem}

/* ---------- CTA final ---------- */
.final{
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(59,143,229,.25), transparent 60%),
    linear-gradient(150deg,var(--navy),var(--deep));
  color:#fff; text-align:center;
}
.final h2{color:#fff; max-width:22ch; margin-inline:auto}
.final p{color:var(--on-dark-2); margin-inline:auto}
.final .btn-row{justify-content:center}

/* ---------- rodapé ---------- */
.ftr{background:var(--deep); color:var(--on-dark-2); padding-block:var(--s7) var(--s5); font-size:.92rem}
.ftr-grid{display:grid; gap:var(--s6)}
@media(min-width:860px){ .ftr-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))} }
.ftr img{height:32px; width:auto; margin-bottom:var(--s3)}
.ftr h3{color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 var(--s3)}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.ftr ul a{display:flex; align-items:center; min-height:44px}
.ftr a{color:var(--on-dark-2); text-decoration:none}
.ftr a:hover{color:#fff; text-decoration:underline}
.ftr p{color:var(--on-dark-2); font-size:.9rem}
.ftr-bot{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center; justify-content:space-between; font-size:.85rem}
.ftr-bot a{display:inline-flex; align-items:center; min-height:44px}
.ftr-bot .lang-btn{border-color:rgba(255,255,255,.24); color:var(--on-dark-2); background:transparent}
.ftr-bot .lang-btn:hover{color:#fff; border-color:rgba(255,255,255,.5)}
.ftr-bot .lang-menu{bottom:calc(100% + 8px); top:auto}

/* ---------- movimento discreto ----------
   Entrada suave por secção (só onde o visitante chega a ver), desligada
   com prefers-reduced-motion. A classe .in é posta pelo lp.js via
   IntersectionObserver; sem JS, nada fica invisível.                    */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
  .js .reveal.in{opacity:1; transform:none}
}

/* ---------- rede de segurança ---------- */
@media (max-width:400px){ .btn-row .btn{width:100%} .btn-row{gap:10px} }
html,body{max-width:100%; overflow-x:clip}
img,video,iframe{max-width:100%}