/* =====================================================================
   UP ADV — página de pré-lançamento
   Superfície SEPARADA do sistema. Nada aqui é servido pelo servidor da
   aplicação, e nenhum dado de cliente passa por aqui.

   Os tokens abaixo são CÓPIA do bloco :root de `frontend/css/app.css`
   (rodada 13, já com os valores corrigidos em contraste). São copiados, e
   não importados, porque esta pasta precisa poder ser publicada sozinha,
   sem levar junto a folha da aplicação. Ao mexer na paleta do sistema,
   mexa aqui também — é o preço de manter as duas superfícies separadas.
   ===================================================================== */

@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('../assets/fontes/dm-sans-latin.woff2') 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;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('../assets/fontes/dm-sans-latin-ext.woff2') 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;
}

:root{
  --brand:#7b2ff7; --brand-600:#6420d6; --brand-700:#4c118f;
  --brand-100:#ece0ff; --brand-50:#f8f4ff;
  --meteorite:#2b0d63; --meteorite-deep:#190638;
  --ink:#1a1426; --ink-2:#332c4a;
  --muted:#5e5875; --muted-2:#6a6483;
  --line:#e6e2f0; --line-2:#f0edf7;
  --bg:#f7f5fc; --surface:#ffffff;
  --ok:#00a37e; --ok-bg:#e3f7f1; --ok-line:#bfece0; --ok-texto:#0a7259;
  --warn:#b57500; --warn-bg:#fff4d6; --warn-line:#f4dfa3; --warn-texto:#7d5200;
  --bad:#d6336c; --bad-bg:#fde8ef; --bad-line:#f7c3d4; --bad-texto:#b01d52;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(29,30,32,.04), 0 4px 16px rgba(43,13,99,.06);
  --shadow-lg:0 12px 40px rgba(43,13,99,.14);
  --ring:0 0 0 2px var(--surface),0 0 0 4px var(--brand);
  --font:'DM Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --largura:1080px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}
body{font-family:var(--font);background:var(--surface);color:var(--ink-2);font-size:16px;line-height:1.55;}
img,svg{max-width:100%;height:auto;}
a{color:var(--brand-600);font-weight:600;}
h1,h2,h3{color:var(--ink);letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px;}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.pular{position:absolute;left:16px;top:-48px;background:var(--surface);color:var(--brand-600);padding:10px 16px;border-radius:0 0 10px 10px;font-weight:700;z-index:50;transition:top .15s;}
.pular:focus{top:0;}

.faixa{width:100%;}
.miolo{max-width:var(--largura);margin:0 auto;padding:0 24px;}

/* ─────────────── AVISO DE ESTÁGIO ───────────────
   Fica no topo de tudo, de propósito: a primeira coisa que a página diz
   sobre si é que o produto ainda não está à venda. */
.estagio{background:var(--meteorite-deep);color:#e6e1f7;font-size:14px;padding:10px 0;}
.estagio .miolo{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;}
.estagio b{color:#fff;}

/* ─────────────── TOPO ─────────────── */
.topo{background:
    radial-gradient(900px 600px at 85% -20%,rgba(123,47,247,.55),transparent 60%),
    radial-gradient(700px 500px at -10% 120%,rgba(123,47,247,.32),transparent 60%),
    linear-gradient(135deg,var(--meteorite-deep),var(--meteorite) 55%,#3b2385);
  color:#fff;padding:28px 0 84px;}
.topo-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ─── O LOGO, COM NEON ───
   TRÊS SOMBRAS E NENHUM RETÂNGULO. `drop-shadow` segue o contorno real do
   PNG, então a luz nasce da letra e da seta; `box-shadow` faria o halo sair
   da caixa da imagem, que é a diferença entre brilho e adesivo.

   As três camadas são o que faz parecer neon de verdade, e não borrão:

     6px, quase branca  — o miolo aceso, encostado na letra
     15px, roxo médio   — o corpo da luz
     32px, roxo escuro  — o derrame no fundo, que dá profundidade

   Uma sombra só, no meio do caminho, espalha a cor sem acender nada. E o
   miolo claro é o que engana o olho: neon tem o centro mais quente que a
   borda, não o contrário.

   AS OPACIDADES SÃO METADE do que foram por algumas horas em 28/09/2026. As
   três camadas continuam, porque são elas que fazem parecer luz em vez de
   borrão — o que mudou foi o volume. Num logo de 230px o halo forte passava
   do contorno e engrossava a letra; assim ele acende sem inchar.

   Some em alto contraste, onde ornamento atrapalha a leitura. */
.topo-barra img{width:230px;
  filter:
    drop-shadow(0 0 6px rgba(233,213,255,.45))
    drop-shadow(0 0 15px rgba(168,85,247,.38))
    drop-shadow(0 0 32px rgba(124,45,247,.28));}
@media (prefers-contrast:more){ .topo-barra img{filter:none;} }

.topo h1{color:#fff;font-size:clamp(34px,5.6vw,58px);margin:58px 0 20px;max-width:16ch;
  letter-spacing:-.035em;}
.topo .linha-fina{font-size:clamp(17px,2.2vw,21px);color:rgba(255,255,255,.88);
  max-width:58ch;line-height:1.55;}
.topo .apoio{margin-top:14px;font-size:15px;color:#d2bdff;max-width:58ch;}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;padding:14px 26px;border-radius:12px;
  text-decoration:none;white-space:normal;transition:background .15s,transform .15s,box-shadow .15s;}
.btn-principal{background:var(--brand);color:#fff;box-shadow:0 2px 12px rgba(123,47,247,.34);}
.btn-principal:hover{background:var(--brand-600);transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(123,47,247,.42);}
.topo .btn-principal,.fecho .btn-principal,.porque-escuro .btn-principal{
  background:#fff;color:var(--brand-600);box-shadow:0 10px 30px rgba(15,8,40,.35);}
.topo .btn-principal:hover,.fecho .btn-principal:hover,.porque-escuro .btn-principal:hover{
  background:#fff;box-shadow:0 14px 36px rgba(15,8,40,.45);}
.btn-secundario{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);}
.btn-secundario:hover{background:rgba(255,255,255,.2);}
.btn-violeta{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(43,13,99,.2);}
.btn-violeta:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 8px 20px rgba(123,47,247,.28);}

/* ─────────────── SEÇÕES ─────────────── */
section{padding:72px 0;}
section.alt{background:var(--bg);}

/* ─── A SEÇÃO ESCURA NO MEIO DA PÁGINA ───
   Sete blocos claros seguidos viram uma superfície só, e o olho para de
   marcar onde um assunto termina e outro começa. Esta é a seção dos
   diferenciais — o argumento que mais precisa ser lido — e é a que ganha o
   fundo da marca, o mesmo do fecho e das cartelas do vídeo. */
.porque-escuro{
  background:
    radial-gradient(60% 55% at 18% 12%, rgba(124,45,247,.32), transparent 70%),
    radial-gradient(55% 55% at 86% 90%, rgba(76,17,143,.44), transparent 72%),
    #0b0517;
  color:#fff;
}
.porque-escuro .rotulo{color:#c084fc;}
.porque-escuro h2{color:#fff;}
.porque-escuro .cartao{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);
  box-shadow:none;}
.porque-escuro .cartao::before{background:linear-gradient(90deg,#c084fc,#7c2df7);}
.porque-escuro .cartao h3{color:#fff;}
.porque-escuro .cartao p{color:rgba(255,255,255,.76);}
.porque-escuro .cartao strong{color:#fff;}
.rotulo{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-600);margin-bottom:12px;}
section h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:16px;max-width:22ch;}
.chamada{font-size:17px;color:var(--muted);max-width:62ch;}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px;margin-top:40px;}
.grade > *{min-width:0;}
/* O TRAÇO DA MARCA no alto de cada cartão. É o mínimo de cor que devolve
   identidade a uma grade de retângulos brancos, sem disputar leitura com o
   texto — e some por completo em "prefers-contrast", onde ornamento atrapalha. */
.cartao{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:26px 24px;
  box-shadow:var(--shadow);}
.cartao::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-700));}
section.alt .cartao{background:var(--surface);}
.cartao h3{font-size:18px;margin-bottom:8px;}
.cartao p{font-size:15px;color:var(--muted);}
.cartao .selo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:var(--brand-100);color:var(--brand-600);font-weight:700;font-size:15px;margin-bottom:14px;}

/* passos */
.passos{counter-reset:passo;display:grid;gap:18px;margin-top:40px;}
.passo{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);}
.passo::before{counter-increment:passo;content:counter(passo);
  width:44px;height:44px;border-radius:14px;background:var(--meteorite);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;}
.passo h3{font-size:17px;margin-bottom:6px;}
.passo p{font-size:15px;color:var(--muted);}
.passo p + p{margin-top:8px;}

/* ─────────────── EXEMPLO FICTÍCIO ─────────────── */
.exemplo{margin-top:40px;border:2px dashed #d4c4ff;border-radius:20px;padding:10px;background:
  repeating-linear-gradient(45deg,#fbf7ff,#fbf7ff 10px,#f5efff 10px,#f5efff 20px);}
.exemplo-aviso{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-size:13px;font-weight:700;color:var(--brand-700);padding:8px 12px;text-align:center;}
.exemplo-corpo{background:var(--surface);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
.exemplo-topo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line-2);padding-bottom:14px;margin-bottom:14px;}
.exemplo-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--meteorite),var(--brand));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.exemplo-nome{font-weight:700;color:var(--ink);font-size:16px;}
.exemplo-nome span{display:block;font-weight:500;font-size:13px;color:var(--muted);}
.etiqueta{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border:1px solid;}
.etiqueta.critica{background:var(--bad-bg);color:var(--bad-texto);border-color:var(--bad-line);}
.motivos{margin:0 0 4px 18px;font-size:14.5px;color:var(--ink-2);}
.motivos li{margin-bottom:4px;}
.exemplo-pe{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted);
  border-top:1px solid var(--line-2);margin-top:14px;padding-top:12px;}

/* ─────────────── NÃO FAZ ─────────────── */
.naofaz{display:grid;gap:14px;margin-top:36px;}
.naofaz li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;list-style:none;
  font-size:15.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);
  border-left:4px solid var(--brand);border-radius:12px;padding:16px 18px;}
.naofaz b{display:block;color:var(--ink);margin-bottom:2px;}
.naofaz .x{width:26px;height:26px;border-radius:50%;background:var(--bad-bg);color:var(--bad-texto);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}

/* ─────────────── ESTADO REAL ─────────────── */
.estado{background:var(--meteorite-deep);color:#e6e1f7;}
.estado h2{color:#fff;}
.estado .chamada{color:rgba(255,255,255,.82);}
.estado .rotulo{color:#d2bdff;}
.estado-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;margin-top:36px;}
.estado-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:22px;}
.estado-item h3{color:#fff;font-size:16px;margin-bottom:8px;}
.estado-item p{font-size:14.5px;color:rgba(255,255,255,.8);}
.estado-item .marca-estado{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:inline-block;padding:3px 10px;border-radius:999px;margin-bottom:12px;}
.marca-estado.pronto{background:rgba(0,163,126,.22);color:#8ef0d3;}
.marca-estado.falta{background:rgba(255,255,255,.14);color:#e6e1f7;}

/* ─────────────── LISTA DE ESPERA ─────────────── */
.espera{background:var(--bg);}
.formulario{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:32px;max-width:620px;margin-top:36px;}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.campo label{font-size:14px;font-weight:600;color:var(--ink-2);}
.campo input,.campo select,.campo textarea{font-family:inherit;font-size:16px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--surface);outline:none;
  transition:border-color .15s,box-shadow .15s;}
.campo textarea{min-height:96px;resize:vertical;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--brand);box-shadow:var(--ring);}
.campo .dica{font-size:13px;color:var(--muted);}
.formulario .btn{width:100%;}
.consentimento{background:var(--brand-50);border:1px solid #dcd2ff;border-radius:12px;padding:14px 16px;}
.linha-consentimento{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:500;font-size:14.5px;color:var(--ink-2);line-height:1.45;}
.linha-consentimento input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--brand);cursor:pointer;}
.lgpd{font-size:13.5px;color:var(--muted);margin-top:18px;line-height:1.55;border-top:1px solid var(--line-2);padding-top:16px;}
.lgpd p{color:var(--ink-2);margin-bottom:8px;}
.lgpd ul{margin:0 0 0 18px;}
.lgpd li{margin-bottom:6px;}
.lgpd b{color:var(--ink-2);}

/* ─────────────── RODAPÉ ─────────────── */
footer{background:var(--surface);border-top:1px solid var(--line-2);padding:40px 0;font-size:14px;color:var(--muted);}
footer .miolo{display:grid;gap:18px;}
footer img{width:150px;}
footer .aviso{font-size:13px;line-height:1.6;max-width:78ch;}

@media(max-width:700px){
  section{padding:56px 0;}
  .topo{padding-bottom:64px;}
  .topo h1{margin-top:40px;}
  .acoes .btn{width:100%;}
  .passo{grid-template-columns:1fr;}
  .passo::before{margin-bottom:4px;}
  .formulario{padding:24px 20px;}
}

/* ─────────────── PLANOS ───────────────
   Preço é a informação que mais decide, então a tipografia dele é a maior do
   bloco. O plano do meio é o recomendado e por isso é o único elevado — não
   por cor gritante, que aqui pareceria propaganda. */
.planos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:22px;margin-top:40px;align-items:stretch;}
.planos-grade > *{min-width:0;}
.plano{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%;position:relative;}
.plano h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);margin:0 0 4px;}
.plano-para{font-size:14px;color:var(--muted);margin:0 0 18px;}
.plano-preco{font-size:44px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:0 0 20px;line-height:1;}
.plano-preco .moeda{font-size:19px;font-weight:600;color:var(--muted);margin-right:4px;vertical-align:super;}
.plano-preco .periodo{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;}
/* Centavos menores que os reais: R$ 59,90 tem de ler como "cinquenta e nove",
   e nao como um numero comprido. O preco e a primeira coisa que o olho mede. */
.plano-preco .centavos{font-size:24px;font-weight:700;letter-spacing:-.02em;vertical-align:baseline;}
.plano-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.plano-itens li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.plano-itens li::before{content:'';position:absolute;left:0;top:7px;width:15px;height:15px;border-radius:50%;
  background:var(--ok-bg);border:1px solid var(--ok-line);}
.plano-itens li::after{content:'';position:absolute;left:4.5px;top:11px;width:6px;height:3px;
  border-left:2px solid var(--ok-texto);border-bottom:2px solid var(--ok-texto);transform:rotate(-45deg);}
.plano-itens li.nao{color:var(--muted);}
.plano-itens li.nao::before{background:var(--line-2);border-color:var(--line);}
.plano-itens li.nao::after{left:4px;top:13px;width:7px;height:0;border-left:none;border-bottom:2px solid var(--muted);transform:none;}
.plano.destaque{border-color:var(--brand);box-shadow:var(--shadow-lg);}
.plano-selo{position:absolute;top:-13px;left:26px;background:var(--brand);color:#fff;font-size:11.5px;
  font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;}
.planos-nota{margin-top:28px;font-size:14px;color:var(--muted);max-width:74ch;}

/* ─────────────── DEMONSTRAÇÃO ─────────────── */
.miolo.estreito{max-width:760px;}
.demo-itens{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.demo-itens li{position:relative;padding-left:30px;font-size:15.5px;color:var(--ink-2);line-height:1.55;}
.demo-itens li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px var(--brand-100);}
.demo-aviso{margin-top:26px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-texto);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:14.5px;}
.demo-cta{margin-top:24px;}

/* ═══════════════ VÍDEO ═══════════════
   O vídeo é a gravação do sistema, sem narração. As legendas fazem o papel
   da voz — por isso são grandes e ficam DENTRO do quadro, não no rodapé. */
.video-caixa{position:relative;margin:26px 0 14px;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:var(--meteorite-deep);border:1px solid var(--brand-700);
  box-shadow:var(--shadow);cursor:pointer;}
.video-caixa video{display:block;width:100%;height:100%;object-fit:cover;}

/* Faixa escura só atrás do texto: escurecer o vídeo inteiro esconde o que
   ele veio mostrar. */
.video-legendas{position:absolute;left:0;right:0;bottom:0;padding:54px 22px 26px;
  background:linear-gradient(to top,rgba(20,12,45,.92) 32%,rgba(20,12,45,0));
  pointer-events:none;}
.video-legenda-texto{margin:0;color:#fff;font-size:19px;line-height:1.45;font-weight:600;
  text-align:center;text-wrap:balance;transition:opacity .25s;}
.video-legenda-texto.vazia{opacity:0;}
.video-legenda-texto a{color:#d2bdff;}

.video-botao{position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  background:rgba(25,6,56,.62);border:2px solid rgba(255,255,255,.82);color:#fff;font-size:24px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity .25s,transform .2s;backdrop-filter:blur(2px);}
.video-botao:hover{transform:scale(1.06);}
.video-botao .video-icone-play{padding-left:6px;}
.video-botao .video-icone-pause{display:none;font-size:18px;letter-spacing:2px;}
.video-caixa.tocando .video-botao{opacity:0;}
.video-caixa.tocando:hover .video-botao{opacity:1;}
.video-caixa.tocando .video-icone-play{display:none;}
.video-caixa.tocando .video-icone-pause{display:inline;}

.video-progresso{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18);}
.video-progresso span{display:block;height:100%;width:0;background:var(--brand);transition:width .25s linear;}

/* O fim do vídeo é o melhor momento para pedir a ação. */
.video-fim{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:rgba(20,12,45,.93);padding:24px;text-align:center;}
.video-caixa.terminou .video-fim{display:flex;}
.video-caixa.terminou .video-botao,
.video-caixa.terminou .video-legendas{display:none;}
.video-fim p{margin:0;color:#fff;font-size:18px;font-weight:600;}
.video-fim-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.video-fim-acoes .btn-linha{border-color:rgba(255,255,255,.5);color:#fff;}

/* Navegador que não toca webm mostra o cartaz e o recado, não um quadro preto. */
.video-caixa.sem-suporte video{opacity:.25;}
.video-caixa.sem-suporte .video-botao,
.video-caixa.sem-suporte .video-progresso{display:none;}
.video-caixa.sem-suporte .video-legenda-texto{opacity:1;}

@media (max-width: 640px){
  .video-legenda-texto{font-size:15px;}
  .video-legendas{padding:38px 14px 20px;}
  .video-botao{width:60px;height:60px;font-size:19px;}
}
.video-nota{font-size:13.5px;color:var(--muted);line-height:1.6;}
.apoio-oferta{margin-top:14px;font-size:13.5px;color:var(--brand-100);font-weight:600;}

/* ═══════════════ GARANTIA ═══════════════ */
.garantia-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px;margin:26px 0 18px;}
.garantia-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;min-width:0;box-shadow:var(--shadow);}
.garantia-numero{display:block;font-size:44px;font-weight:800;line-height:1;
  color:var(--brand-600);letter-spacing:-.03em;}
.garantia-item h3{font-size:15px;font-weight:700;color:var(--ink);margin:4px 0 12px;}
.garantia-item p{font-size:14px;color:var(--ink-2);line-height:1.65;margin:0;}
.garantia-nota{font-size:13.5px;color:var(--muted);line-height:1.65;}

/* ═══════════════ FORMULÁRIO DE ASSINATURA ═══════════════ */
.form-espera{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:16px;margin-top:26px;}
.campo-linha{display:flex;flex-direction:column;gap:6px;min-width:0;}
.campo-linha label{font-size:13px;font-weight:600;color:var(--ink-2);}
.campo-linha .dica{font-weight:400;color:var(--muted);}
.campo-linha input,.campo-linha select{width:100%;min-width:0;padding:11px 13px;font:inherit;
  font-size:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);}
.campo-linha input:focus-visible,.campo-linha select:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.campo-aceite{grid-column:1/-1;}
.campo-aceite label{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  color:var(--ink-2);line-height:1.6;cursor:pointer;min-height:32px;}
.campo-aceite input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--brand);}
#formAssinar button[type="submit"]{grid-column:1/-1;justify-self:start;}
.form-status{grid-column:1/-1;margin:0;font-size:13.5px;line-height:1.6;min-height:1.2em;}
.form-status.erro{color:var(--bad-texto);}
.form-status.ok{color:var(--ok-texto);}
.form-rodape{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--muted);line-height:1.65;}
.plano .btn{margin-top:18px;width:100%;justify-content:center;}

/* ── Perguntas frequentes ────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 17px;
  color: var(--ink); list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* O sinal de abrir precisa existir sem depender da cor: um triângulo que
   gira é legível também para quem não distingue as cores do tema. */
.faq-item summary::after {
  content: '▸'; color: var(--brand); font-size: 18px; flex: none;
  transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item summary:hover { background: var(--line-2); }
.faq-item summary:focus-visible { outline: none; box-shadow: var(--ring); }
.faq-item p {
  margin: 0; padding: 0 22px 20px; color: var(--muted); line-height: 1.7; font-size: 16px;
}
@media (max-width: 640px) {
  .faq-item summary { padding: 15px 17px; font-size: 16px; }
  .faq-item p { padding: 0 17px 17px; font-size: 15px; }
}

/* ── Cupom no checkout ───────────────────────────────────────────────── */
.cupom-linha { display: flex; gap: 8px; align-items: stretch; }
.cupom-linha input { flex: 1; min-width: 0; text-transform: uppercase; }
.cupom-linha .btn { flex: none; padding: 0 18px; }
.cupom-retorno { margin: 8px 0 0; font-size: 14px; line-height: 1.55; min-height: 1px; }
.cupom-retorno.ok { color: var(--ok-texto); }
.cupom-retorno.erro { color: var(--bad-texto); }
/* O painel que substitui o checkout quando o cupom é de período gratuito.
   Ele precisa ser visualmente diferente do resto do formulário: é o momento
   em que a pessoa descobre que não vai pagar nada hoje. */
.cupom-trial {
  margin-top: 10px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-texto);
}
.cupom-trial b { display: block; font-size: 17px; margin-bottom: 4px; }
.cupom-trial .valor { font-size: 26px; font-weight: 700; margin: 8px 0 4px; }
.cupom-trial small { display: block; font-size: 13.5px; line-height: 1.55; opacity: .92; }
@media (max-width: 520px) {
  .cupom-linha { flex-direction: column; }
  .cupom-linha .btn { width: 100%; }
}

/* Os três botões de plano na mesma linha, custe o que custar ao cartão mais
   curto: botão desalinhado faz a coluna parecer inacabada. */
.plano .btn{margin-top:auto;}
.plano-itens{margin-bottom:22px;}

/* ─────────── FUNCIONALIDADES ───────────
   Nove cartões numa grade que respira: em três colunas no desktop, duas no
   tablet e uma no celular. Mais estreito que isso e o texto vira coluna de
   jornal; mais largo e a linha passa de 75 caracteres, onde o olho perde o
   começo da seguinte. */
.grade-func{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
.cartao.func h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

/* O selo de plano fica NO TÍTULO, e não num rodapé do cartão: quem varre a
   grade lendo só os títulos precisa saber ali que aquilo depende do plano.
   Descobrir isso no checkout é perder a venda e a confiança de uma vez. */
.func-plano{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-700);background:var(--brand-100);
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}

/* ─────────── AS PERGUNTAS ───────────
   São falas, e por isso vêm em itálico com aspas: o visitante precisa ouvir
   a própria voz, não ler uma lista de recursos. */
.perguntas{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.perguntas li{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 18px;font-size:16px;font-style:italic;color:var(--ink-2);
}
.perguntas-fecho{margin:28px 0 0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:68ch;}
.perguntas-fecho strong{color:var(--ink);}

/* O bordão da marca, usado como assinatura de seção. Aparece poucas vezes na
   página inteira, e é isso que o mantém com força. */
.bordao{
  margin:26px 0 0;font-size:clamp(22px,3.4vw,30px);font-weight:700;
  letter-spacing:-.01em;color:var(--brand-700);
}
.acoes-centro{margin-top:26px;justify-content:center;}

/* ─────────── A OFERTA DURANTE A VISITA ───────────
   CANTO, E NÃO CENTRO. Modal que cobre a tela obriga a pessoa a resolver o
   popup antes de voltar ao que estava lendo, e quem é interrompido assim
   fecha por reflexo — inclusive quem teria aceitado. No canto, ela termina o
   parágrafo e decide depois. */
.oferta{
  position:fixed;right:20px;bottom:20px;z-index:60;width:min(360px,calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(25,6,56,.28);padding:22px 22px 18px;
  /* Nasce deslocada e invisível; a classe .visivel a traz. */
  opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease;
}
.oferta.visivel{opacity:1;transform:none;}
.oferta-fechar{
  position:absolute;top:8px;right:10px;background:none;border:0;cursor:pointer;
  font-size:24px;line-height:1;color:var(--muted);padding:4px 8px;border-radius:8px;
}
.oferta-fechar:hover{color:var(--ink);background:var(--line-2);}
.oferta-selo{
  margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-700);
}
.oferta-titulo{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.35;color:var(--ink);}
.oferta-texto{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--muted);}
.oferta .btn{width:100%;justify-content:center;}
.oferta-nota{margin:10px 0 0;font-size:11.5px;color:var(--muted-2);line-height:1.5;}

/* No celular a oferta ocupa a largura e encosta embaixo: no canto ela
   cobriria o polegar justamente onde ficam os botões da página. */
@media (max-width:560px){
  .oferta{right:12px;left:12px;bottom:12px;width:auto;}
}

/* Quem pediu menos animação no sistema operacional não recebe o deslize. */
@media (prefers-reduced-motion:reduce){
  .oferta{transition:none;transform:none;}
}

/* ─────────── MARKETING ───────────
   Três cartões, e nenhum deles vende serviço: dizem o que a frente é, em
   que estágio está e sob que regra opera. Quem quiser mais, conversa. */
.mkt-grade{
  display:grid;gap:18px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.mkt-cartao{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);
}
.mkt-cartao h3{margin:0 0 8px;font-size:17px;color:var(--ink);}
.mkt-cartao p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);}

/* O aviso de que não está incluso. Menor que o corpo, mas com contraste de
   texto comum — letra clara sobre fundo claro aqui seria esconder. */
.mkt-aviso{
  margin:14px 0 0;font-size:13px;font-weight:600;color:var(--ink-2);
}

/* ─────────── O FECHO ───────────
   Centralizado, curto, sobre o roxo da marca. É a única seção da página em
   que a marca aparece grande fora do topo — e por isso ela fecha. */
.fecho{
  background:
    radial-gradient(60% 55% at 20% 15%, rgba(124,45,247,.34), transparent 70%),
    radial-gradient(55% 55% at 84% 92%, rgba(76,17,143,.46), transparent 72%),
    #0b0517;
  color:#fff;text-align:center;padding:72px 0 66px;
}
.fecho .miolo{display:flex;flex-direction:column;align-items:center;gap:4px;}
.fecho-marca{
  margin:0;font-size:13px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:#d2bdff;
}
.fecho-bordao{
  margin:6px 0 0;font-size:clamp(30px,5.4vw,48px);font-weight:800;
  letter-spacing:-.03em;color:#fff;
}
.fecho-bordao em{
  font-style:normal;
  background:linear-gradient(92deg,#c084fc,#7c2df7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fecho-oferta{margin:12px 0 0;font-size:14px;color:rgba(255,255,255,.82);}
.fecho .acoes-centro{margin-top:24px;}

/* ═══════════════ DEMONSTRAÇÕES POR FUNCIONALIDADE ═══════════════
   NO PADRÃO DO RESTO DA PÁGINA. A primeira versão era um retângulo preto
   solto sobre o fundo claro: funcionava, mas parecia colado de outro site.
   Agora a seção usa o mesmo vocabulário dos cartões que já existem aqui —
   superfície branca, a borda de `--line`, o raio de `--radius` e a sombra
   de `--shadow` — e o vídeo é o conteúdo dentro do cartão, não o cartão.

   NO DESKTOP, DUAS COLUNAS. As sete abas empilhadas à direita aparecem de
   uma vez, sem rolagem lateral, e o texto da funcionalidade fica ao lado do
   vídeo em vez de embaixo — quem lê não precisa desviar o olho para baixo e
   voltar. No celular a coluna se desfaz e volta a ordem natural: escolher,
   ver, ler. */
.demo{
  margin-top:26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  display:grid;
  gap:16px;
}

@media(min-width:920px){
  .demo{
    grid-template-columns:minmax(0,1.72fr) minmax(230px,1fr);
    grid-template-areas:
      "palco abas"
      "dizeres dizeres";
    column-gap:22px;
    row-gap:16px;
    padding:18px;
    align-items:start;
  }
  .demo-palco{grid-area:palco;}
  .demo-abas{grid-area:abas;flex-direction:column;overflow:visible;padding:0;gap:7px;}
  .demo-aba{width:100%;text-align:left;padding:10px 14px;}
  /* O texto fica em UMA coluna, embaixo do vídeo. Tentei jogá-lo em duas,
     com a nota de rodapé subindo para o lado das abas, e a nota apareceu
     acima do título: `.demo-dizeres p` é mais específico que `.demo-nota`
     e vencia o `grid-column`. Duas colunas dentro de uma linha que já é
     coluna de outro grid não valem o remendo. */
  .demo-dizeres{grid-area:dizeres;margin-top:0;max-width:78ch;}
}

/* As abas rolam na horizontal no celular em vez de quebrarem em três linhas:
   sete botões empilhados empurram o vídeo — que é o conteúdo — para fora da
   primeira tela de quem chega rolando. O `scroll-snap` faz a aba parar
   inteira, e não pela metade. */
.demo-abas{display:flex;gap:8px;overflow-x:auto;padding:2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
/* A ABA. Fundo branco em repouso e uma BARRA ROXA À ESQUERDA quando ativa —
   o mesmo recurso que o próprio sistema usa para marcar o item selecionado
   na barra lateral. A primeira versão marcava o ativo só com um lilás claro
   de fundo, que a três metros de distância some: a pessoa não sabia em qual
   das sete estava.

   A barra é "::before" posicionado, e não "border-left", para o texto não
   pular três pixels quando a aba muda de estado. */
.demo-aba{position:relative;flex:0 0 auto;scroll-snap-align:start;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font:600 14px/1.25 var(--font);padding:11px 15px;border-radius:var(--radius-sm);
  display:flex;align-items:baseline;gap:8px;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s;}
.demo-aba::before{content:'';position:absolute;left:0;top:50%;
  width:3px;height:0;border-radius:0 3px 3px 0;background:var(--brand);
  transform:translateY(-50%);transition:height .2s ease;}
.demo-aba:hover{border-color:var(--brand-100);background:var(--brand-50);color:var(--ink);}
.demo-aba.ativa{background:var(--surface);border-color:var(--brand);
  color:var(--brand-700);box-shadow:0 1px 2px rgba(43,13,99,.06);}
.demo-aba.ativa::before{height:58%;}
.demo-aba:focus-visible{outline:none;box-shadow:var(--ring);}

/* A DURAÇÃO, escrita pelo JS a partir do próprio arquivo de legendas. Diz
   de antemão quanto custa assistir — vinte segundos é um compromisso que
   se aceita; um vídeo sem duração à vista é um que se pula. */
.demo-aba span{margin-left:auto;font-size:12px;font-weight:600;
  color:var(--muted-2);font-variant-numeric:tabular-nums;}
.demo-aba.ativa span{color:var(--brand);}

.demo-palco{position:relative;aspect-ratio:16/9;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--meteorite-deep);border:1px solid var(--line);}
.demo-video{display:block;width:100%;height:100%;object-fit:cover;}

/* A legenda fica DENTRO do vídeo, com um degradê por baixo: sobre a tela
   clara do sistema, texto branco sem fundo some. O degradê cobre a faixa de
   baixo, que é onde a interface tem menos informação. */
.demo-legendas{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(to top,rgba(12,4,32,.9),rgba(12,4,32,.6) 55%,transparent);
  pointer-events:none;}
.demo-legenda{margin:0;color:#fff;font-size:16px;line-height:1.4;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.5);transition:opacity .25s;}
.demo-legenda.vazia{opacity:0;}

.demo-dizeres{max-width:62ch;}
.demo-dizeres h3{font-size:19px;line-height:1.3;color:var(--ink);letter-spacing:-.015em;}
.demo-dizeres p{margin-top:7px;color:var(--muted);font-size:15px;line-height:1.6;}
.demo-nota{margin-top:12px !important;font-size:12.5px !important;color:var(--muted-2) !important;}

#demonstracoes .acoes-centro{margin-top:26px;}

@media(max-width:640px){
  .demo{padding:12px;}
  .demo-legendas{padding:30px 12px 12px;}
  .demo-legenda{font-size:14px;}
  .demo-dizeres h3{font-size:17px;}
  .demo-dizeres p{font-size:14.5px;}
}

/* ═══════════════ O PROBLEMA ═══════════════ */
.problema-fecho{margin-top:26px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:72ch;}
.problema-fecho strong{color:var(--ink);}

/* ═══════════════ PARA QUEM É / PLANOS ═══════════════
   TRÊS CARTÕES DE ESCOLHA, e não uma tabela comparativa. Quem chega não quer
   comparar dezoito linhas de recurso: quer se reconhecer num perfil e ver
   quanto custa. A tabela detalhada vive na tela de Conta, para quem já
   assinou e vai trocar de plano.

   O do meio é o destacado porque é o que serve à maioria — banca pequena com
   equipe —, e porque um trio sem eixo faz o olho percorrer os três sem parar
   em nenhum. */
.perfis{display:grid;gap:18px;margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:stretch;}
.perfil{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;
  box-shadow:var(--shadow);}
.perfil.destaque{border-color:var(--brand);box-shadow:var(--shadow-lg);}
.perfil-quem{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-600);margin-bottom:10px;}
.perfil h3{font-size:19px;line-height:1.3;color:var(--ink);letter-spacing:-.015em;}
.perfil-texto{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted);flex:1;}
.perfil-preco{margin:20px 0 16px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
.perfil-preco b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.perfil-preco span{font-size:13px;color:var(--muted-2);font-weight:600;}
.perfil .btn{justify-content:center;}
.perfis-nota{margin-top:20px;font-size:14px;color:var(--muted);max-width:72ch;}

/* ═══════════════ POR QUE UP ADV ═══════════════
   DUAS COLUNAS FIXAS, e não `auto-fit`. São quatro cartões: o auto-fit
   cabia três na linha e jogava o quarto sozinho, com metade da faixa vazia
   ao lado — o último argumento da seção, que é o de portabilidade dos
   dados, ficava parecendo sobra. Em 2×2 os quatro têm o mesmo peso. */
.grade-porque{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:720px){ .grade-porque{grid-template-columns:1fr;} }

/* ═══════════════ CONFIANÇA ═══════════════
   Lista e não cartões: são quatro respostas curtas a quatro perguntas, e
   cartão pede um título que aqui só repetiria a primeira frase em negrito. */
.confianca-lista{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;max-width:76ch;}
.confianca-lista li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.6;
  color:var(--muted);}
.confianca-lista li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--brand);}
.confianca-lista b{color:var(--ink);font-weight:700;}

@media(max-width:640px){
  .perfil{padding:20px 18px 18px;}
  .perfil-preco b{font-size:27px;}
  .problema-fecho{font-size:15.5px;}
  .confianca-lista li{font-size:14.5px;}
}

/* ═══════════════ AS PROVAS DA PRIMEIRA DOBRA ═══════════════
   Três colunas no desktop, empilhadas no celular. O rótulo em cima e a
   explicação embaixo, porque o olho pega os três rótulos numa varrida e só
   desce ao que interessou.

   A barra roxa à esquerda é o mesmo recurso das abas de demonstração e do
   item ativo da barra lateral do sistema — repetir o sinal é o que faz a
   página parecer o produto. */
/* Três colunas alinhadas à esquerda, cada uma com a barra roxa na lateral —
   o mesmo sinal das abas de demonstração e do item ativo na barra lateral
   do sistema. Repetir o sinal é o que faz a página parecer o produto. */
.topo-provas{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(218px,1fr));max-width:880px;}
.topo-provas li{position:relative;padding-left:15px;font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.78);}
.topo-provas li::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;
  border-radius:3px;background:linear-gradient(180deg,#c084fc,#7c2df7);}
.topo-provas b{display:block;color:#fff;font-size:15.5px;font-weight:700;
  letter-spacing:-.01em;margin-bottom:2px;}

@media(max-width:640px){
  .topo-provas{margin-top:26px;gap:12px;}
  .topo-provas li{font-size:13.5px;}
  .topo-provas b{font-size:14.5px;}
}

@media(max-width:640px){
  .topo-provas{margin-top:28px;gap:12px;}
  .topo-provas li{font-size:13.5px;}
  .topo-provas b{font-size:14.5px;}
  /* O halo encolhe junto com o logo: no celular o mesmo raio de brilho
     ocupa proporcionalmente muito mais da tela e vira mancha. */
  .topo-barra img{width:172px;
    filter:
      drop-shadow(0 0 4px rgba(233,213,255,.42))
      drop-shadow(0 0 10px rgba(168,85,247,.34))
      drop-shadow(0 0 20px rgba(124,45,247,.24));}
}

/* =====================================================================
   DOCUMENTOS JURÍDICOS — Termos de Uso e Política de Privacidade

   Texto longo, lido com atenção e às vezes procurado por cláusula. O que
   muda em relação ao resto da página: medida de leitura mais estreita
   (68ch), numeração automática das cláusulas e âncora visível em cada
   uma — quem precisa citar "cláusula 7.2" precisa conseguir apontar para
   ela.
   ===================================================================== */
.documento{background:var(--bg);}
.documento .miolo{max-width:820px;}
.documento h1{font-size:clamp(28px,4vw,38px);margin-bottom:10px;}
.doc-versao{font-size:13.5px;color:var(--muted);margin-bottom:8px;}
.doc-resumo{background:var(--brand-50);border:1px solid #dcd2ff;border-radius:var(--radius);
  padding:20px 22px;margin:26px 0 8px;font-size:15.5px;color:var(--ink-2);}
.doc-resumo b{color:var(--ink);}
.doc-resumo ul{margin:10px 0 0 18px;display:flex;flex-direction:column;gap:6px;}

.doc-sumario{margin:30px 0 10px;padding:20px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);}
.doc-sumario h2{font-size:14px!important;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:12px;}
.doc-sumario ol{margin:0 0 0 20px;font-size:15px;display:flex;flex-direction:column;gap:5px;}

.documento article{margin-top:38px;}
.documento article h2{font-size:21px;margin-bottom:14px;max-width:none;scroll-margin-top:24px;}
.documento article h3{font-size:16.5px;margin:22px 0 8px;}
.documento p{font-size:16px;color:var(--ink-2);max-width:68ch;margin-bottom:12px;line-height:1.62;}
.documento li{font-size:16px;color:var(--ink-2);max-width:66ch;margin-bottom:8px;line-height:1.6;}
.documento ul,.documento ol{margin:0 0 14px 22px;}
.documento .destaque{background:var(--warn-bg);border:1px solid var(--warn-line);
  color:var(--warn-texto);border-radius:var(--radius-sm);padding:16px 18px;margin:16px 0;
  font-size:15.5px;max-width:none;}
.documento .destaque b{color:var(--warn-texto);}
.documento table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:15px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.documento th,.documento td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);
  vertical-align:top;color:var(--ink-2);}
.documento th{background:var(--brand-50);color:var(--ink);font-size:13.5px;font-weight:700;}
.documento tr:last-child td{border-bottom:0;}
.doc-pe{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted);}

@media(max-width:640px){
  .documento p,.documento li{font-size:15.5px;}
  .documento table{display:block;overflow-x:auto;}
}

/* O que vai ser cobrado, logo acima do aceite. Discreto no peso e forte no
   número: é a última informação antes do clique, e ela precisa ser lida
   inteira sem parecer um banner. */
.checkout-total{background:var(--brand-50);border:1px solid #dcd2ff;border-radius:12px;
  padding:13px 16px;margin:0 0 16px;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.checkout-total:empty{display:none;}
.checkout-total b{color:var(--ink);font-size:16px;}
.checkout-total s{color:var(--muted);text-decoration-thickness:1.5px;}