/* Página de vendas, documentos jurídicos e telas curtas de /videos. Só usa tokens.css. */
[hidden]{display:none!important}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:var(--e4);top:-100px;z-index:10;background:var(--superficie);color:var(--texto);padding:var(--e3) var(--e4);
  border-radius:var(--r-campo);border:2px solid var(--brand)}
.pular:focus{top:var(--e3)}
img,video{max-width:100%}

/* cabeçalho */
.topo nav{display:flex;align-items:center;gap:var(--e4)}
.link-topo{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e2);font-weight:600;color:var(--texto)}
.botao--pequeno{min-height:44px;padding:0 var(--e4)}
.nome,.botao--pequeno{white-space:nowrap}
@media (max-width:430px){.topo{gap:var(--e2)}.nome{font-size:.9375rem}.topo nav{gap:var(--e1)}.link-topo{padding:0 var(--e1)}.botao--pequeno{padding:0 var(--e3);font-size:.875rem}}
@media (max-width:760px){.hero p.sub{font-size:var(--t1)}}

/* hero */
.hero{padding-top:var(--e6)}
.hero h1{max-width:15ch}
.aviso-ia{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:var(--e4) 0;color:var(--apoio);font-size:var(--t0)}
.aviso-ia p{max-width:75ch}
.aviso-ia strong{color:var(--texto)}

/* moldura de celular: SVG de aparelho real (corpo 300x620, tela 272x592, 9:19,5) com o vídeo 9:16 dentro, centrado.
   O SVG vem de <symbol id="celular">; as cores saem das variáveis abaixo, nos dois temas. */
.celular{--cel-corpo:#1B2030;--cel-aro:#4A5370;--cel-botao:#2A3148;
  position:relative;width:100%;max-width:280px;margin-inline:auto;aspect-ratio:300/620}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .celular{--cel-corpo:#38425F;--cel-aro:#A6B0C5;--cel-botao:#5A6585}}
:root[data-theme="dark"] .celular{--cel-corpo:#38425F;--cel-aro:#A6B0C5;--cel-botao:#5A6585}
.celular>svg{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 22px 24px rgba(20,24,31,.22)) drop-shadow(0 4px 6px rgba(20,24,31,.18))}
.cel-corpo{fill:var(--cel-corpo)} .cel-aro{fill:none;stroke:var(--cel-aro);stroke-width:1.5}
.cel-botao{fill:var(--cel-botao)} .cel-tela,.cel-ilha{fill:#000} .cel-home{fill:#fff;opacity:.55}
.celular .tela{position:absolute;left:4.667%;width:90.667%;top:11.935%;height:78%;background:#000;overflow:hidden}
.celular video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.celular .play{bottom:12%}
.legenda-video strong{display:block;color:var(--texto);font-weight:600}

/* seções */
.cab-secao h2{max-width:20ch}
.cab-secao--larga h2{max-width:26ch}
.texto{max-width:62ch}
.faixa{border-top:1px solid var(--linha)}

/* como funciona: a ordem importa, então o número fica */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e6);counter-reset:passo}
.passos li{counter-increment:passo;border-top:2px solid var(--brand);padding-top:var(--e4);display:grid;gap:var(--e2);align-content:start}
.passos li::before{content:counter(passo);font:800 var(--t4)/1 var(--fonte-titulo);color:var(--brand);letter-spacing:-.03em}
.passos h3{font-size:var(--t1);letter-spacing:-.01em;line-height:1.25}
.passos p{color:var(--apoio);font-size:var(--t0)}
.fecho{margin-top:var(--e6)}
@media (max-width:900px){.passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.passos{grid-template-columns:1fr}}

/* o que vem em cada vídeo */
.vem{display:grid;grid-template-columns:1fr 1fr;gap:var(--e7)}
.vem h3{margin-bottom:var(--e4)}
.vem ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3)}
.vem li{display:flex;gap:var(--e3);align-items:flex-start;max-width:50ch}
.vem li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;border-radius:50%;background:var(--brand);
  -webkit-mask:url("../img/check.svg") center/contain no-repeat;mask:url("../img/check.svg") center/contain no-repeat}
.vem dl{margin:0;display:grid;gap:var(--e4)}
.vem dt{font-weight:700}
.vem dd{margin:0;color:var(--apoio)}
.vem .bloco+.bloco{margin-top:var(--e6)}
@media (max-width:760px){.vem{grid-template-columns:1fr;gap:var(--e6)}}

/* planos: o formulário do Básico fica dentro do cartão */
.plano-cartao .promessa{color:var(--apoio)}
.resumo-contrato{display:grid;gap:var(--e2);padding:var(--e4);border:1px solid var(--linha);border-radius:var(--r-campo,8px);background:color-mix(in srgb,var(--brand) 6%,var(--superficie));font-size:var(--t0)}
.resumo-contrato h4{margin:0;font:700 var(--t1) var(--fonte-titulo)}
.resumo-contrato p{margin:0;line-height:1.45}
.plano-cartao .por-video{display:block;font:500 var(--t0) var(--fonte-texto);color:var(--apoio);letter-spacing:0;margin-top:var(--e1)}
.plano-cartao form{display:grid;gap:var(--e4);margin-top:auto;padding-top:var(--e3)}
.plano-cartao .texto-pequeno{font-size:var(--t0);color:var(--apoio)}
.nota-planos{margin-top:var(--e5);color:var(--apoio);font-size:var(--t0);max-width:75ch}
.link-amostra{display:inline-block;margin-top:var(--e1)}

/* portfólio */
.aviso-ficticio{border:1.5px solid var(--brand);border-radius:var(--r-cartao);padding:var(--e4) var(--e5);background:var(--superficie);margin-bottom:var(--e7);max-width:75ch}
.aviso-ficticio strong{display:block;font:700 var(--t1) var(--fonte-titulo);margin-bottom:var(--e1)}
.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e6);list-style:none;margin:0;padding:0}
.vitrine figure{margin:0}
.vitrine figcaption{margin-top:var(--e5);display:grid;gap:var(--e2);font-size:var(--t0);color:var(--apoio);max-width:34ch;margin-inline:auto}
.vitrine figcaption strong{display:block;color:var(--texto);font:700 var(--t1) var(--fonte-titulo);letter-spacing:-.01em}
.vitrine .meta{font-weight:600;color:var(--texto);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .vitrine{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--e5);margin-inline:calc(var(--e5) * -1);padding:0 var(--e5) var(--e4);scroll-padding:0 var(--e5);overscroll-behavior-x:contain}
  .vitrine>li{flex:0 0 min(78%,320px);scroll-snap-align:center}
}

/* amostra e Premium: texto de um lado, formulário do outro */
.duas{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--e7);align-items:start}
.duas .lado p{color:var(--apoio);margin-top:var(--e4);max-width:44ch}
.duas .lado h2{margin-top:var(--e3)}
.lado .sem-cartao{margin-top:var(--e5);display:grid;gap:var(--e2);padding:0;list-style:none;color:var(--texto)}
.lado .sem-cartao li{display:flex;gap:var(--e3);align-items:flex-start}
.lado .sem-cartao li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;border-radius:50%;background:var(--brand);
  -webkit-mask:url("../img/check.svg") center/contain no-repeat;mask:url("../img/check.svg") center/contain no-repeat}
@media (max-width:860px){.duas{grid-template-columns:1fr;gap:var(--e6)}}

.formulario{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-cartao);padding:var(--e6);display:grid;gap:var(--e5);box-shadow:var(--sombra)}
.formulario .par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);align-items:start}
@media (max-width:560px){.formulario{padding:var(--e5)}.formulario .par{grid-template-columns:1fr}}
.campo textarea{min-height:112px;resize:vertical;line-height:1.45}
.campo select{appearance:none;padding-right:var(--e7);
  background-image:linear-gradient(45deg,transparent 50%,var(--apoio) 50%),linear-gradient(135deg,var(--apoio) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.campo input::placeholder,.campo textarea::placeholder{color:var(--apoio);opacity:1}
.campo .obrigatorio{color:var(--apoio);font-weight:500}
.escolha{display:flex;gap:var(--e3);align-items:flex-start;min-height:44px;padding:var(--e2) 0;font-size:var(--t0);cursor:pointer}
.escolha input{flex:none;width:24px;height:24px;margin:var(--e1) 0 0;min-height:0;cursor:pointer}
.erro{color:var(--erro);font-size:var(--t0)}
.grupo{display:grid;gap:var(--e1);border:0;margin:0;padding:0;min-width:0}
.grupo legend{font:600 var(--t0) var(--fonte-texto);padding:0;margin-bottom:var(--e1)}
.turnstile{min-height:65px}
.turnstile .erro{color:var(--erro);font-size:var(--t0)}

.form-aviso{border:1.5px solid var(--campo-borda);border-radius:var(--r-campo);padding:var(--e3) var(--e4);font-size:var(--t0);background:var(--fundo)}
.form-aviso[hidden]{display:none}
.form-aviso--erro{border-color:var(--erro);background:color-mix(in srgb,var(--erro) 9%,var(--superficie))}
.form-aviso--ok{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--superficie))}
.form-aviso strong{display:block}
.sem-js{border:1.5px solid var(--erro);border-radius:var(--r-campo);padding:var(--e3) var(--e4);font-size:var(--t0);background:color-mix(in srgb,var(--erro) 9%,var(--superficie))}
.microtexto{font-size:var(--t0);color:var(--apoio)}
.botao--carregando{cursor:progress}

/* perguntas frequentes */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--linha)}
.faq details>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--e4);
  min-height:56px;padding:var(--e3) 0;font:700 var(--t1)/1.3 var(--fonte-titulo);letter-spacing:-.01em}
.faq details>summary::-webkit-details-marker{display:none}
.faq details>summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--mov)}
.faq details[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .resposta{padding:0 0 var(--e5);color:var(--apoio);max-width:66ch}
.faq .resposta p+p{margin-top:var(--e3)}
.faq .mais{border-bottom:0}
.faq .mais>summary{justify-content:flex-start;color:var(--brand);font:700 var(--t0) var(--fonte-texto)}
.faq .mais>summary::after{margin-left:var(--e1)}
.faq .mais[open]>summary{border-bottom:1px solid var(--linha)}

/* rodapé */
.rodape{border-top:1px solid var(--linha);padding:var(--e7) 0 var(--e8);color:var(--apoio);font-size:var(--t0)}
.rodape .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--e6)}
.rodape strong{color:var(--texto);font:700 var(--t1) var(--fonte-titulo)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1)}
.rodape li a{display:inline-flex;min-height:44px;align-items:center}
.rodape .fim{margin-top:var(--e6);display:grid;gap:var(--e1)}
@media (max-width:560px){.rodape .cols{grid-template-columns:1fr}}

/* documentos jurídicos */
.doc{max-width:760px;padding:var(--e5) 0 var(--e8)}
.doc h1{font-size:var(--t4);margin-top:var(--e4)}
.link-topo{white-space:nowrap}
.doc .versao{color:var(--apoio);margin-top:var(--e3)}
.doc h2{font-size:var(--t2);margin:var(--e7) 0 var(--e3)}
.doc p,.doc ul,.doc ol{margin-top:var(--e3)}
.doc ul,.doc ol{padding-left:var(--e5);display:grid;gap:var(--e2)}
.doc li{max-width:66ch}
.doc p{max-width:66ch}
.doc .tabela{overflow-x:auto;margin-top:var(--e4);border:1px solid var(--linha);border-radius:var(--r-campo)}
.doc table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t0)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:var(--e3) var(--e4);border-bottom:1px solid var(--linha)}
.doc th{background:var(--superficie);font-weight:700}
.doc tr:last-child td{border-bottom:0}
.revisao{border:1.5px solid var(--brand);border-radius:var(--r-cartao);padding:var(--e4) var(--e5);background:var(--superficie);margin-top:var(--e5);max-width:66ch}
.revisao strong{font:700 var(--t1) var(--fonte-titulo)}
.migalha{font-size:var(--t0);color:var(--apoio);margin-top:var(--e2)}

/* páginas curtas: obrigado, assinatura confirmada */
.curta{padding:var(--e8) 0;max-width:640px}
.curta h1{font-size:var(--t4)}
.curta p{margin-top:var(--e4);max-width:52ch}
.curta .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}

/* entrada de página: um momento só, o hero */
@media (prefers-reduced-motion:no-preference){
  .hero .sub,.hero .acoes,.hero .nota{animation:sobe 520ms cubic-bezier(.2,.7,.2,1) both}
  .hero .acoes{animation-delay:70ms}
  .hero .nota{animation-delay:140ms}
  @keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:var(--e5)}

/* toque e interação */
a,button,summary,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--brand) 18%,transparent)}
a:hover{text-decoration-thickness:2px}
.botao:hover,.nome:hover{text-decoration:none}
.quem{overflow-wrap:anywhere}

/* botão fixo no celular: some quando o botão do hero, os formulários ou o rodapé já estão na tela */
.barra-cta{display:none}
@media (max-width:760px){
  html{scroll-padding-bottom:96px}
  body:has(.barra-cta){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .barra-cta{display:block;position:fixed;inset:auto 0 0 0;z-index:5;padding:var(--e3) var(--e5) calc(var(--e3) + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--fundo) 97%,transparent);border-top:1px solid var(--linha);
    transition:transform var(--mov),visibility var(--mov)}
  .barra-cta .botao{width:100%}
  .barra-cta[data-oculta]{transform:translateY(100%);visibility:hidden}
}

/* migalha dos documentos */
.migalha ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.migalha li+li::before{content:"›";margin-right:var(--e2);color:var(--apoio)}
.doc .migalha ol{display:flex}

/* ---- v1.1 ---------------------------------------------------------------------------------- */

/* quadro "ATENÇÃO: LIMITA DIREITO" (CDC, art. 54, § 4º): faixa cheia com o aviso, borda inteira, nunca só a cor */
.limita{margin:var(--e5) 0;max-width:70ch;border:2px solid var(--erro);border-radius:var(--r-cartao);overflow:hidden;
  background:color-mix(in srgb,var(--erro) 7%,var(--superficie))}
.doc .limita-titulo{display:flex;align-items:center;gap:var(--e2);margin:0;max-width:none;padding:var(--e2) var(--e4);
  background:var(--erro);color:var(--sobre-erro);font:800 var(--t0)/1.3 var(--fonte-titulo);letter-spacing:.05em}
.limita-titulo::before{content:"";flex:none;width:22px;height:22px;background:currentColor;
  -webkit-mask:url("../img/atencao.svg") center/contain no-repeat;mask:url("../img/atencao.svg") center/contain no-repeat}
.doc .limita-texto{margin:0;max-width:none;padding:var(--e4);font-size:var(--t1)}
.limita:has(:target){outline:3px solid var(--brand);outline-offset:3px}
.doc [id]{scroll-margin-top:var(--e5)}
.doc .limita-texto[id]{scroll-margin-top:calc(var(--e8) + var(--e4))}
.doc h3{font-size:var(--t1);margin:var(--e5) 0 var(--e2)}
.doc code{font-size:.92em;overflow-wrap:anywhere}
.doc strong{font-weight:700}

/* sumário e navegação entre documentos */
.sumario{margin-top:var(--e5);border:1px solid var(--linha);border-radius:var(--r-cartao);background:var(--superficie);padding:0 var(--e5)}
.sumario>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--e3);min-height:52px;font-weight:700;color:var(--brand)}
.sumario>summary::-webkit-details-marker{display:none}
.sumario>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--mov)}
.sumario[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.doc .sumario ul{list-style:none;margin:0;padding:0 0 var(--e4);columns:2 280px;column-gap:var(--e6);display:block}
.doc .sumario li{break-inside:avoid;max-width:none}
.sumario a{display:inline-flex;min-height:36px;align-items:center}
.outros-docs{margin-top:var(--e8);border-top:1px solid var(--linha);padding-top:var(--e5)}
.doc .outros-docs h2{margin:0 0 var(--e3);font-size:var(--t1)}
.doc .outros-docs ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--e1) var(--e5)}
.outros-docs a{display:inline-flex;min-height:44px;align-items:center}

/* índice dos termos: duas portas, uma para cada tipo de contratante */
.termos-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-top:var(--e5)}
.termos-opcao{display:grid;gap:var(--e1);align-content:start;padding:var(--e5);border:1.5px solid var(--brand);border-radius:var(--r-cartao);background:var(--superficie);color:var(--texto);text-decoration:none;transition:transform var(--mov),box-shadow var(--mov)}
.termos-opcao:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.termos-opcao strong{font:700 var(--t2)/1.2 var(--fonte-titulo);letter-spacing:-.01em}
.termos-opcao>span:last-child{color:var(--apoio);font-size:var(--t0)}
.termos-opcao-doc{font:800 var(--t0) var(--fonte-titulo);color:var(--brand);letter-spacing:.06em}
@media (max-width:560px){.termos-opcoes{grid-template-columns:1fr}}

/* tabelas dos documentos: no celular cada linha vira um bloco com o rótulo da coluna */
@media (max-width:640px){
  .doc .tabela{border:0;overflow:visible}
  .doc table.empilha{min-width:0;display:block}
  .doc .empilha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .doc .empilha tbody,.doc .empilha tr{display:block}
  .doc .empilha tr{border:1px solid var(--linha);border-radius:var(--r-campo);background:var(--superficie);margin-bottom:var(--e3);padding:var(--e2) var(--e4)}
  .doc .empilha td{display:block;border:0;padding:var(--e2) 0}
  .doc .empilha td+td{border-top:1px solid var(--linha)}
  .doc .empilha td::before{content:attr(data-rotulo);display:block;font-size:.875rem;font-weight:700;color:var(--apoio)}
  .doc .empilha td.primeira{font-weight:600}
}

/* formulário de assinar: campos que trocam conforme CPF ou CNPJ */
.campos-tipo{display:grid;gap:var(--e5)}
@media (prefers-reduced-motion:no-preference){.campos-tipo{animation:sobe 260ms cubic-bezier(.2,.7,.2,1) both}}
.estado-doc{font-size:var(--t0);font-weight:600;color:var(--brand)}
.estado-doc::before{content:"";display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-right:var(--e2);background:currentColor;
  -webkit-mask:url("../img/check.svg") center/contain no-repeat;mask:url("../img/check.svg") center/contain no-repeat}
.campo input[name="documento"]{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* chave de tema no cabeçalho (criada por js/tema.js): só forma e as cores de texto e fundo dos tokens */
.tema-chave{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--e1);
  background:transparent;border:0;border-radius:var(--r-pilula);cursor:pointer;touch-action:manipulation;color:var(--texto)}
.tema-chave__trilho{position:relative;display:block;width:52px;height:30px;border-radius:var(--r-pilula);border:2px solid var(--texto);background:var(--fundo)}
.tema-chave__bola{position:absolute;left:2px;top:2px;width:22px;height:22px;border-radius:50%;background:var(--texto);color:var(--fundo);
  display:grid;place-items:center;transition:transform var(--mov)}
.tema-chave[aria-checked="true"] .tema-chave__bola{transform:translateX(22px)}
.tema-chave__bola svg{grid-area:1/1;width:16px;height:16px}
.tema-chave__sol{fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tema-chave__sol circle{stroke:none}
.tema-chave__lua{fill:currentColor;stroke:none}
.tema-chave[aria-checked="true"] .tema-chave__sol,.tema-chave[aria-checked="false"] .tema-chave__lua{display:none}
.tema-chave:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* celular estreito: com a chave, a navegação do cabeçalho vai para a linha de baixo se não couber ao lado do nome */
@media (max-width:430px){.topo{flex-wrap:wrap;row-gap:var(--e1)}.topo nav{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}}