/* SS Finance · direcao "Painel" (LP6, tokens do C-28/C-29). Um so bloco :root; nenhuma cor fora dele.
   Fundo claro, blocos brancos com fio, marinho como tinta, dourado so no botao. */
:root{
  --tinta:#0b2545;          /* o marinho da marca, agora a cor do texto forte */
  --tinta-2:#46546b;        /* texto corrido */
  --tinta-3:#5b677a;        /* texto de apoio (>= 4,5:1 sobre o fundo e o bloco) */
  --fundo:#f3f5f8;
  --bloco:#ffffff;
  --fio:#e1e6ed;
  --fio-forte:#c9d1dc;
  --dourado:#c9a227;        /* o unico destaque: o botao principal */
  --dourado-escuro:#b8931f;
  --verde:#1d6b45;          /* o numero positivo do exemplo */
  --raio-1:6px;
  --raio-2:10px;
  /* variante escura (lp6e, G-47): os tokens escuros do TOKENS_Painel.md, so nas faixas de marinho */
  --marinho:#0b2545;        /* o texto do botao dourado, nas faixas claras e nas escuras */
  --e-fundo:#0a1628;
  --e-bloco:#112240;
  --e-fio:#223858;
  --e-fio-forte:#2e4a70;
  --e-tinta:#eef2f7;
  --e-tinta-2:#b7c2d1;
  --e-tinta-3:#8d9bb0;
  --e-verde:#5cc493;
  /* a moldura do celular (G-49) */
  --aparelho:#101318;
  --aparelho-borda:#4b5566;
}

/* Fonte hospedada no proprio site (OFL; licenca em /fonts). Nada de Google Fonts. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta-2);font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.55;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;color:var(--tinta);font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--tinta);text-underline-offset:3px}
a:hover{color:var(--tinta-2)}
img{max-width:100%;height:auto}
strong,b{color:var(--tinta);font-weight:600}

/* ---------- a variante escura (lp6e, G-47) ----------
   O topo, o heroi, o app e o fecho (contato e rodape) em marinho; o meio da pagina continua claro.
   Um so lugar troca os tokens; as faixas vao de ponta a ponta com uma sombra recortada, sem mudar o HTML. */
header.topo,.hero,.app,.contato,.rodape{--fundo:var(--e-fundo);--bloco:var(--e-bloco);--fio:var(--e-fio);--fio-forte:var(--e-fio-forte);
  --tinta:var(--e-tinta);--tinta-2:var(--e-tinta-2);--tinta-3:var(--e-tinta-3);--verde:var(--e-verde);color:var(--tinta-2)}
.hero,.app,.contato,.rodape{background:var(--fundo);box-shadow:0 0 0 100vmax var(--fundo);clip-path:inset(0 -100vmax)}

/* ---------- acabamento: o que vale para todos (sem movimento) ---------- */
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:3px;box-shadow:0 0 0 2px var(--bloco)}
::selection{background:color-mix(in srgb,var(--dourado) 40%,var(--bloco));color:var(--tinta)}

/* alvos de toque de 44 px */
header nav a{display:inline-flex;align-items:center;min-height:44px}
.rodape a{display:inline-flex;align-items:center;min-height:44px}
.link-alvo{display:inline-flex;align-items:center;min-height:44px}
summary{min-height:44px}

section[id]{scroll-margin-top:24px}

/* o toque no celular (G-44, 7): o realce azul padrao sai e tudo que e clicavel ganha um estado pressionado */
a,button,summary,.opcao{-webkit-tap-highlight-color:transparent}
.btn:active{background:var(--dourado-escuro)}
.btn-sec:active,.vitrine-controles button:active,.conhecer .opcao:active{background:var(--fundo);border-color:var(--tinta)}
.vitrine-controles button[aria-pressed="true"]:active{background:var(--tinta-2)}
summary:active{background:var(--fundo)}
header nav a:not(.btn):active,.rodape a:active,.link-alvo:active,.voltar:active{color:var(--tinta-3)}

/* ---------- topo: branco com fio; fixo so em tela larga ---------- */
header.topo{background:var(--fundo);border-bottom:1px solid var(--fio);padding:0 24px}
.topo-in{max-width:1180px;margin:0 auto;min-height:68px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.marca{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
/* o brasao oficial (G-43): a versao marinho, desenhada para fundo claro */
.brasao{display:block;height:auto}
.marca picture,.rodape-marca picture{display:block;flex:none}
.marca .brasao{width:44px}
.marca-nome{font-size:20px;font-weight:700;color:var(--tinta)}
header nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
header nav a:not(.btn){color:var(--tinta-2);text-decoration:none;font-size:15px}
header nav a:not(.btn):hover{color:var(--tinta)}
header nav a[aria-current="true"]{color:var(--tinta)}
.marco-topo{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}
.voltar{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-2);text-decoration:none;font-size:15px}
@media (min-width: 960px){
  header.topo{position:sticky;top:0;z-index:50}
  section[id]{scroll-margin-top:84px}
}
@media (max-width: 860px){
  header nav{display:none}               /* no celular, so a marca: o botao do heroi vem logo abaixo */
  .topo-in{min-height:60px}
}

/* ---------- botoes: o dourado e o unico destaque ---------- */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--raio-1);background:var(--dourado);
  color:var(--marinho);font-weight:600;font-size:16px;text-decoration:none}
.btn:hover{background:var(--dourado-escuro);color:var(--marinho)}
header nav .btn{min-height:44px;padding:0 16px;font-size:15px}
.btn-destaque::after{content:"→" / "";display:inline-block;margin-left:10px}
.btn-sec{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--fio-forte);border-radius:var(--raio-1);
  background:var(--bloco);color:var(--tinta);font-weight:600;text-decoration:none}
.btn-sec:hover{border-color:var(--tinta);color:var(--tinta)}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px}
.cta .trigger{margin:0;font-size:15px;color:var(--tinta-3)}

/* ---------- heroi: o texto, a foto e a tela do app do mesmo tamanho, e o cartao do exemplo ---------- */
.hero{max-width:1228px;margin:0 auto 24px;padding:56px 24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,66px);line-height:1.04;letter-spacing:-.025em}
.hero-sub{margin:20px 0 0;font-size:19px;max-width:30em}
.hero-cartao{--alt:clamp(300px,34vw,440px);position:relative;display:grid;grid-template-columns:auto auto;
  grid-template-rows:var(--alt) auto;column-gap:16px;row-gap:8px;justify-content:end}
.hero-cartao picture{display:block;grid-row:1;grid-column:1;height:var(--alt)}
.hero-foto{display:block;height:100%;width:auto;aspect-ratio:280/340;object-fit:cover;border-radius:var(--raio-2);border:1px solid var(--fio)}
.foto-nome{grid-row:2;grid-column:1;align-self:start;font-size:14px;color:var(--tinta-3)}
.celular{grid-row:1;grid-column:2;height:var(--alt);aspect-ratio:1000/2166}
.celular .aparelho-tela{display:flex;flex-direction:column;height:100%}
.celular .tela{display:block;flex:1;min-height:0;width:100%;object-fit:cover;object-position:top}

/* a moldura do celular (G-49, adendo 1): reta e so em CSS. O corpo escuro com o fio de metal, os cantos do
   aparelho, a faixa de status com a ilha e a tela com os cantos internos; na proporcao das telas (520 x 1125) */
.celular,.aparelho{display:block;position:relative;padding:3.4%;background:var(--aparelho);border-radius:15% / 7%;
  box-shadow:0 0 0 1px var(--aparelho-borda),inset 0 0 0 1px color-mix(in srgb,var(--aparelho-borda) 55%,transparent)}
.aparelho-tela{position:relative;display:block;overflow:hidden;padding-top:9%;border-radius:11.5% / 5.3%;background:var(--marinho)}
.aparelho-tela::before{content:"";position:absolute;top:0;left:50%;width:28%;aspect-ratio:5/1;margin:1.7% 0 0 -14%;
  border-radius:999px;background:var(--aparelho)}
.aparelho img{display:block;width:100%;height:auto}
.tela-provisoria{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--tinta)}
.tela-provisoria .sigla{width:46px;height:46px;border:1.5px solid var(--dourado);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;color:var(--dourado)}
.tela-provisoria .nome{font-size:12px;color:var(--bloco);text-align:center;padding:0 8px}
/* o cartao "Meu mes": exemplo ficticio, os mesmos numeros do mock do app, embaixo da tela do app (G-41);
   os numeros contam uma vez (vida.js) */
.cartao-mes{grid-row:2;grid-column:2;display:flex;flex-direction:column;gap:4px;padding:10px 12px;
  border:1px solid var(--fio);border-radius:var(--raio-2);background:var(--bloco);color:var(--tinta);font-size:13px;line-height:1.3}
.cartao-mes .cm-rot{font-size:13px;color:var(--tinta-3)}
.cartao-mes .cm-lin{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cartao-mes b{font-size:16px;font-weight:700}
.cartao-mes .cm-pos{color:var(--verde)}
/* as barras do "realizado x planejado" (G-44, 1): os numeros do mock do app, em % da renda */
.cm-barras{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--fio)}
.cm-barra{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:3px;font-size:13px}
.cm-bval{color:var(--tinta-3)}
.cm-trilho{grid-column:1 / -1;position:relative;height:5px;border-radius:3px;background:var(--fio)}
.cm-cheio{display:block;height:100%;border-radius:3px;background:var(--tinta);transform-origin:left center}
.cm-barra:nth-child(1) .cm-cheio{width:46%}
.cm-barra:nth-child(2) .cm-cheio{width:15%}
.cm-barra:nth-child(3) .cm-cheio{width:3%}
.prova{list-style:none;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--fio);display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}
.prova li{color:var(--tinta);font-weight:600;font-size:16px}
@media (max-width: 1040px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-cartao{justify-content:start}
  .cartao-mes{grid-row:3;grid-column:1 / -1;margin-top:8px}   /* embaixo das duas: alinha a 768 px (G-44) */
}
@media (max-width: 700px){
  .hero{padding-top:32px}
  .hero-sub{font-size:18px}
  .hero-cartao{--alt:min(300px,calc((100vw - 60px) / 1.29));column-gap:12px}
  .prova{grid-template-columns:1fr;gap:8px}
}

/* ---------- secoes: blocos brancos com fio sobre o fundo; tamanhos diferentes ---------- */
.sec{max-width:1228px;margin:0 auto 24px;padding:0 24px}
.sec-in{background:var(--bloco);border:1px solid var(--fio);border-radius:var(--raio-2);padding:48px}
.sec h2{font-size:clamp(28px,3.2vw,36px);line-height:1.18;letter-spacing:-.015em}
.sec h3{font-size:18px}
.sec p{margin:16px 0 0}
.intro{max-width:44em}
.aviso{font-size:15px;color:var(--tinta-3)}
@media (max-width: 700px){
  .sec{padding:0 16px;margin-bottom:16px}
  .sec-in{padding:32px 20px}
}

/* a dor: o texto em linhas com fio; o destaque sem borda lateral */
.dor-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.dor-texto p{margin:0;padding:14px 0;border-bottom:1px solid var(--fio);font-size:18px;color:var(--tinta-2)}
.dor-texto p:first-child{padding-top:0}
.dor-texto .dor-destaque{border-bottom:0;padding-top:24px;font-size:21px;font-weight:700;color:var(--tinta)}
.dd-linha{display:block;margin-top:6px;font-size:17px;font-weight:400;color:var(--tinta-2)}

/* metodo: as etapas numa tabela; os 7 pilares numa lista que abre e fecha */
.etapas{width:100%;border-collapse:collapse;margin-top:32px}
.etapas th,.etapas td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-top:1px solid var(--fio)}
.etapas thead th{padding-top:0;border-top:0;font-size:14px;font-weight:600;color:var(--tinta-3)}
.etapas tbody th{width:220px;color:var(--tinta);font-weight:700}
.pilares-titulo{max-width:36em;margin:56px 0 16px;font-size:21px !important;line-height:1.35}
.pilar{border-top:1px solid var(--fio)}
.pilar:last-child{border-bottom:1px solid var(--fio)}
.pilar summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,240px) minmax(0,1fr) 24px;gap:16px;
  align-items:baseline;padding:16px 0}
.pilar summary::-webkit-details-marker{display:none}
.pilar .pn{color:var(--tinta-3);font-weight:600}
.pilar .pnome{color:var(--tinta);font-weight:700}
.pilar .prisco{color:var(--tinta-2)}
.pilar summary::after{content:"+" / "";justify-self:end;font-size:22px;line-height:1;color:var(--tinta-3)}
.pilar[open] summary::after{content:"\2212" / ""}
.pilar .pcorpo{padding:0 40px 18px 44px}
.pilar .pcorpo p{margin:0 0 10px;max-width:46em}
.pilar .pcorpo b{margin-right:6px}
.pilar .pprova{color:var(--tinta-3)}
@media (max-width: 860px){
  .etapas thead{display:none}
  .etapas tr{display:block;padding:12px 0;border-top:1px solid var(--fio)}
  .etapas th,.etapas td{display:block;padding:2px 0;border:0}
  .etapas tbody th{width:auto}
  .pilar summary{grid-template-columns:24px minmax(0,1fr) 24px;row-gap:2px}
  .pilar .prisco{grid-column:2;grid-row:2}
  .pilar summary::after{grid-column:3;grid-row:1}
  .pilar .pcorpo{padding:0 0 16px 40px}
}

/* o app: fora do bloco, em largura total; o texto e as telas do produto, grandes */
.app .sec-in{background:transparent;border:0;padding:48px 0}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.app h2{font-size:clamp(32px,4vw,44px)}
.beneficios{list-style:none;margin:24px 0 0;padding:0}
.beneficios li{padding:12px 0;border-top:1px solid var(--fio)}
.beneficios li:last-child{border-bottom:1px solid var(--fio)}
.beneficios strong{display:block}
.telas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tela-fig{margin:0}
.tela-fig .aparelho{max-width:300px;margin:0 auto}
.tela-fig figcaption{margin-top:8px;font-size:15px;font-weight:600;color:var(--tinta)}
.vitrine-controles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.vitrine-controles[hidden]{display:none}
.vitrine-controles button{min-height:44px;padding:0 16px;border:1px solid var(--fio-forte);border-radius:999px;background:var(--bloco);
  color:var(--tinta);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.vitrine-controles button:hover{border-color:var(--tinta)}
.vitrine-controles button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--bloco)}
.vitrine-controles .pausa{border-style:dashed}
.vitrine-controles button{position:relative;overflow:hidden}
@media (min-width: 1000px){
  .app-texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .app-texto>*{grid-column:1}
  .app-texto .beneficios{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .telas{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 700px){
  .app .sec-in{padding:32px 0}
  .telas{gap:16px}
}

/* quem esta por tras: a foto e os fatos numa tabela de 2 colunas */
.sobre-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start}
.sobre-grid:not(:has(.sobre-foto)){grid-template-columns:minmax(0,760px)}
/* G-60: fotos reais (aparece so com a lista cheia) */
.fotos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.foto-real{margin:0}
.foto-real img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--fio)}
.foto-real figcaption{margin-top:8px;font-size:.9rem;color:var(--tinta-3)}
.foto-samuel{display:block;width:100%;height:auto;aspect-ratio:280/340;object-fit:cover;border-radius:var(--raio-2);border:1px solid var(--fio)}
.quem{margin:16px 0 24px !important}
.quem strong{display:block;font-size:20px}
.quem span{display:block;margin-top:2px;font-size:15px;color:var(--tinta-3)}
.fatos{margin:0}
.fatos>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--fio)}
.fatos dt{font-weight:600;color:var(--tinta)}
.fatos dd{margin:0}

/* depoimentos (G-21): so aparecem com autorizacao */
.dep-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px 48px;margin-top:24px}
.dep{margin:0;padding-top:20px;border-top:1px solid var(--fio)}
.dep video{display:block;width:100%;height:auto;margin-bottom:16px;border-radius:var(--raio-1);background:var(--tinta)}
.dep blockquote{margin:0 0 14px;font-size:19px;line-height:1.5;color:var(--tinta)}
.dep figcaption{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--tinta-3)}

/* empresas: o texto e uma lista com fio */
.empresas-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.itens-emp{list-style:none;margin:0;padding:0}
.itens-emp li{padding:16px 0;border-top:1px solid var(--fio)}
.itens-emp li:first-child{border-top:0;padding-top:0}
.itens-emp h3{font-size:17px}
.itens-emp p{margin:4px 0 0}
@media (max-width: 1000px){
  .dor-grid,.empresas-grid{grid-template-columns:1fr;gap:28px}
  .sobre-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .sobre-foto{max-width:300px}
}
@media (max-width: 700px){
  .fatos>div{grid-template-columns:1fr;gap:2px}
  .dor-texto p{font-size:17px}
}

/* duvidas e fecho: mais estreitos que os outros blocos */
.duvidas,.contato{max-width:868px}
.contato{margin-bottom:0;padding-top:56px;padding-bottom:8px}
.duvidas h2{margin-bottom:20px}
.duvidas details{border-top:1px solid var(--fio)}
.duvidas details:last-of-type{border-bottom:1px solid var(--fio)}
.duvidas summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
  font-weight:600;color:var(--tinta)}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:"+" / "";font-size:22px;line-height:1;color:var(--tinta-3)}
.duvidas details[open] summary::after{content:"\2212" / ""}
.duvidas details p{margin:0 0 16px;max-width:46em}
.contato h2{font-size:clamp(30px,4vw,42px)}
.outros-contatos{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px !important}
.linha-contato{font-size:15px;color:var(--tinta-3)}

/* rodape: na faixa marinho do fecho (lp6e) */
.rodape{max-width:1228px;margin:0 auto;padding:32px 24px 48px;font-size:14px;color:var(--tinta-3)}
.rodape-in,.rodape-links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.rodape-links{justify-content:flex-start;margin-top:8px}
.rodape-marca{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:16px;font-weight:700;color:var(--tinta)}
.rodape-marca .brasao{width:36px}
.rodape a{color:var(--tinta-2)}
.rodape a:hover{color:var(--tinta)}

/* ---------- paginas internas: politica, formulario, recebemos e 404 ---------- */
.pol,.form-pag,.erro-pag{max-width:760px;margin:32px auto;padding:48px;background:var(--bloco);border:1px solid var(--fio);border-radius:var(--raio-2)}
.pol h1,.form-pag h1,.erro-pag h1{margin:0 0 10px;font-size:clamp(32px,5vw,44px);line-height:1.1;letter-spacing:-.02em}
.pol h2{margin:36px 0 8px;font-size:22px}
.pol .data{margin:0 0 24px;font-size:15px;color:var(--tinta-3)}
.erro-pag{text-align:center}
.selo{display:block;margin:0 0 20px}
.erro-pag .selo{display:flex;justify-content:center}
.selo .brasao{width:96px}
.erro-pag p{margin:0 0 32px;font-size:19px}
.form-pag{max-width:680px}
.form-pag .apoio{margin:0 0 32px;font-size:19px}
.conhecer{display:flex;flex-direction:column;gap:24px}
.conhecer .campo{display:flex;flex-direction:column;gap:8px}
.conhecer label,.conhecer legend{font-weight:600;color:var(--tinta);font-size:16px}
.conhecer input[type=text],.conhecer input[type=tel],.conhecer input[type=email]{min-height:48px;padding:10px 14px;font:inherit;
  color:var(--tinta);background:var(--bloco);border:1px solid var(--fio-forte);border-radius:var(--raio-1)}
.conhecer input:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.conhecer input:user-invalid{border-color:var(--tinta);border-width:2px}
/* G-44 (4): o campo obrigatorio ganha um ok so depois de a pessoa sair dele (:user-valid); o botao em envio */
.conhecer .campo:has(input[required]:user-valid) label::after{content:"✓" / "";margin-left:8px;color:var(--verde);font-weight:700}
.conhecer button[aria-disabled="true"]{background:var(--dourado-escuro);cursor:progress}
.com-ok{display:flex;align-items:center;gap:14px}
.ok{flex:none;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.conhecer .grupo{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.conhecer .grupo legend{margin-bottom:10px;padding:0}
.conhecer .opcao{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;font-weight:400;
  border:1px solid var(--fio-forte);border-radius:999px;background:var(--bloco);cursor:pointer}
.conhecer .opcao:hover{border-color:var(--tinta)}
.conhecer .opcao:has(input:checked){border-color:var(--tinta);background:var(--fundo)}
.conhecer .opcao input,.conhecer .consentimento input{width:20px;height:20px;margin:0;accent-color:var(--tinta)}
.conhecer .consentimento{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-weight:400;line-height:1.5}
.conhecer .consentimento input{flex:none;margin-top:3px}
.conhecer button{align-self:flex-start;border:0;font:inherit;font-weight:600;cursor:pointer}
.conhecer .isca{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-pag .aviso-erro{margin:0 0 24px;padding:16px 20px;border:1px solid var(--fio-forte);border-radius:var(--raio-1);background:var(--fundo);color:var(--tinta)}
.form-pag .aviso-erro ul{margin:0;padding-left:20px}
.form-pag .secundario{margin:32px 0 0}
@media (max-width: 700px){
  .pol,.form-pag,.erro-pag{margin:16px;padding:32px 20px}
}

/* ---------- movimento: TUDO aqui dentro. Quem pede menos movimento ve a pagina parada e completa. ---------- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  /* hover e foco so no que e clicavel: botao, link, pilar, duvida */
  .btn,.btn-sec,.vitrine-controles button,.rodape a,header nav a,.link-alvo{
    transition:background-color .15s ease,border-color .15s ease,color .15s ease,background-size .25s ease}
  .btn-destaque::after{transition:transform .2s ease}
  .btn-destaque:hover::after,.btn-destaque:focus-visible::after{transform:translateX(4px)}
  .pilar summary::after,.duvidas summary::after{transition:color .15s ease}
  .pilar summary:hover::after,.duvidas summary:hover::after{color:var(--tinta)}

  /* o sublinhado dos links cresce da esquerda (no mouse e no teclado) */
  header nav a:not(.btn),.rodape a,.link-alvo{text-decoration:none;
    background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat}
  header nav a:not(.btn):hover,.rodape a:hover,.link-alvo:hover,
  header nav a:not(.btn):focus-visible,.rodape a:focus-visible,.link-alvo:focus-visible{background-size:100% 1px}

  /* a passagem entre as paginas (G-44, 3): View Transitions, so CSS; o topo e o brasao ficam no lugar e o resto
     troca num cruzamento curto. Onde nao ha suporte, a troca seca de sempre */
  @view-transition{navigation:auto}
  header.topo{view-transition-name:topo}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  ::view-transition-group(topo){animation-duration:.22s}
  html:active-view-transition .marca .brasao{animation:none}

  /* o brasao entra uma vez ao abrir a pagina: opacidade e escala, curto, sem laco (G-43) */
  @keyframes brasao-entra{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
  .marca .brasao{animation:brasao-entra .45s cubic-bezier(.2,.7,.3,1) both}
  .selo .brasao{animation:brasao-entra .5s cubic-bezier(.2,.7,.3,1) .1s both}

  /* as barras do cartao enchem uma vez quando ele aparece (o vida.js poe 'cheio'); sem JS, ja vem cheias */
  .cm-cheio{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
  .cm-barra:nth-child(2) .cm-cheio{transition-duration:.6s}
  .vida .cartao-mes:not(.cheio) .cm-cheio{transform:scaleX(0)}

  /* o ok do campo aparece, e o do "Recebemos" se desenha uma vez (o traco do circulo, depois o do visto) */
  @keyframes ok-entra{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
  .conhecer .campo:has(input[required]:user-valid) label::after{display:inline-block;animation:ok-entra .25s ease-out both}
  @keyframes desenhar{from{stroke-dashoffset:var(--comp)}to{stroke-dashoffset:0}}
  .ok circle{--comp:66;stroke-dasharray:66;animation:desenhar .5s ease-out .15s both}
  .ok path{--comp:16;stroke-dasharray:16;animation:desenhar .3s ease-out .6s both}

  /* o topo (G-44, 5): sem fio enquanto a pagina esta no alto; o link da secao atual sublinhado */
  header.topo{transition:border-color .2s ease}
  .vida header.topo:not(.rolou){border-bottom-color:transparent}
  header nav a[aria-current="true"]{background-size:100% 1px}

  /* cada secao entra uma vez, inteira: opacidade e 12 px, 300 ms. So existe com a classe 'vida' (vida.js);
     o que ja esta na tela ao carregar nao some; terminada a entrada, o vida.js tira as classes. */
  .vida .revelar{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
  .vida .revelar.visto{opacity:1;transform:none}

  /* a vitrine do app: uma tela grande por vez, deslizando; com os botoes de cada tela e o de pausa.
     So existe com a classe 'vitrine-ativa' (vida.js); sem ela, as 4 telas ficam a vista. */
  @media (max-width: 999.98px){
    .vitrine-ativa .telas{display:grid;grid-template-columns:minmax(0,360px);justify-content:center;overflow:hidden}
    .vitrine-ativa .tela-fig{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateX(32px);
      transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
    .vitrine-ativa .tela-fig.saiu{transform:translateX(-32px)}
    .vitrine-ativa .tela-fig.ativa{opacity:1;visibility:visible;transform:none;
      transition:opacity .35s ease,transform .35s ease,visibility 0s}
    .vitrine-ativa .tela-fig figcaption{text-align:center}
  }
  @media (min-width: 1000px){
    .vitrine-ativa .tela-fig{opacity:.7;transition:opacity .35s ease}
    .vitrine-ativa .tela-fig .aparelho{transition:box-shadow .35s ease}
    .vitrine-ativa .tela-fig.ativa{opacity:1}
    .vitrine-ativa .tela-fig.ativa .aparelho{box-shadow:0 0 0 1px var(--aparelho-borda),0 0 0 3px var(--tinta)}
  }

  /* a linha de tempo na aba ativa (G-44, 8): enche em 5 s ate a proxima tela; com a troca parada, some */
  @keyframes tempo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .vitrine-rodando .vitrine-controles button[aria-pressed="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;
    height:2px;border-radius:1px;background:var(--dourado);transform-origin:left center;animation:tempo 5s linear both}

  /* o metodo guiado pela rolagem (G-44, 2): cada etapa ganha um ponto que se preenche quando ela chega ao meio da
     tela, e a linha ate a proxima etapa enche conforme se le. So onde o navegador suporta; nos outros, a tabela de sempre */
  @supports (animation-timeline: view()){
    @keyframes etapa-ponto{from{background:var(--bloco);border-color:var(--fio-forte)}to{background:var(--tinta);border-color:var(--tinta)}}
    @keyframes etapa-linha{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .etapas tbody th{position:relative;padding-left:30px;
      background:linear-gradient(var(--fio),var(--fio)) 5px 34px / 2px calc(100% - 18px) no-repeat}
    .etapas tbody tr:last-child th{background:none}
    .etapas tbody th::before{content:"";position:absolute;left:0;top:22px;width:12px;height:12px;border-radius:50%;
      border:2px solid var(--fio-forte);background:var(--bloco);
      animation:etapa-ponto linear both;animation-timeline:view();animation-range:entry 100% contain 45%}
    .etapas tbody th::after{content:"";position:absolute;left:5px;top:34px;bottom:-16px;width:2px;background:var(--tinta);
      transform-origin:top center;animation:etapa-linha linear both;animation-timeline:view();animation-range:contain 45% exit 40%}
    .etapas tbody tr:last-child th::after{content:none}
  }

  /* os pilares e o FAQ abrem e fecham deslizando (onde o navegador suporta; nos outros, abre seco) */
  @supports selector(::details-content){
    html{interpolate-size:allow-keywords}
    .duvidas details::details-content{block-size:0;opacity:0;overflow:clip;
      transition:block-size .3s ease,opacity .25s ease,content-visibility .3s allow-discrete}
    .duvidas details[open]::details-content{block-size:auto;opacity:1}
    .pilar::details-content{block-size:0;opacity:0;overflow:clip;
      transition:block-size .3s ease,opacity .25s ease,content-visibility .3s allow-discrete}
    .pilar[open]::details-content{block-size:auto;opacity:1}
  }
}

/* ---------- impressao (a politica sai limpa no papel) ---------- */
@media print{
  body{background:var(--bloco);font-size:12pt}
  header.topo,.rodape-links,.voltar,.cta{display:none}
  .pol{max-width:none;margin:0;padding:0;border:0}
  .pol a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;color:var(--tinta-2)}
  .pol h2{break-after:avoid}
  .rodape{padding:16pt 0 0;--tinta:var(--marinho);--tinta-2:var(--marinho);--tinta-3:var(--marinho);color:var(--marinho);
    background:none;box-shadow:none}
}