/* ==========================================================================
   KONTO by Vekso · landing
   O chassi de sala de controle com a arquitetura de um finance SaaS: pílula
   flutuante, manchete central, esteira de texto, cartões inclinados sobre a
   captura e cards em cinco tons da própria família do Saffron.
   Sem vidro, sem gradiente decorativo. O ouro continua sendo o único aceso.
   ========================================================================== */

:root{
  --fundo:#131313;
  --chassi:#1D1E1E;
  --chassi-alto:#262827;
  --linha:#2E312F;
  --linha-forte:#3E423F;

  --texto:#DDE0E2;
  --texto-2:#B9BEC2;
  --texto-3:#8D9296;
  --texto-forte:#FFFEFB;
  --gravado:#9AA0A8;
  --apagado:#6E7378;

  --ouro:#F6C945;
  --ouro-2:#E0B535;
  --creme:#F5E3B4;
  --marfim:#FFFEFB;
  --areia:#F1EFE9;

  /* tintas sobre fundo claro: uma por superfície, para o contraste não cair */
  --tinta:#161616;
  --tinta-ouro:#3A3116;
  --tinta-creme:#55492A;
  --tinta-marfim:#55585C;
  --oliva:#564919;
  --oliva-claro:#6B5A26;

  --display:'Archivo',system-ui,sans-serif;
  --corpo:'Inter',system-ui,sans-serif;
  --rotulo:'JetBrains Mono',ui-monospace,monospace;

  --r-bloco:56px;
  --r-card:34px;
  --r-medio:26px;
  --r-visor:22px;
  --r-campo:16px;
  --pilula:999px;

  --gut:clamp(1.25rem,4vw,7.5rem);
  --max:1200px;
  --respiro:clamp(4.5rem,9vw,9.375rem);

  --sombra:0 26px 50px -20px rgba(0,0,0,.55);
  --sombra-tela:0 40px 80px -30px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}

/* qualquer display declarado aqui (.campo é flex, .chave é inline-flex) ganha do display:none
   que o navegador dá ao atributo hidden, e o elemento escondido pelo JS reaparecia na tela.
   Medido em 12/08/2026 no formulário da lista: os campos e o botão continuavam visíveis
   depois do REGISTRADO. Esta linha vale para todo hidden da página, não só o do formulário. */
[hidden]{display:none !important}

/* a esteira é mais larga que a tela de propósito. overflow-x só no body não segura:
   o navegador PROPAGA o overflow do body para a janela quando o html é visible, e aí o
   body volta a ser visible e nada recorta. Medido em 27/08/2026: documento com 1900px
   numa janela de 1440px, com barra horizontal. Precisa estar nos dois, e clip em vez de
   hidden porque clip não cria caixa de rolagem, então position:sticky continua servindo. */
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6.5rem}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font:400 1.0625rem/1.62 var(--corpo);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;color:var(--texto-forte);letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
b{font-weight:700}

::selection{background:var(--ouro);color:var(--tinta)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:4px}

.pular{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--ouro);color:var(--tinta);
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-campo) 0;
  font:600 .9375rem var(--corpo);
}
.pular:focus{left:0}

/* ---------- peças do mundo ---------- */

.gravado{
  font:500 .65625rem/1.4 var(--rotulo);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gravado);
}
.gravado-oliva{font-weight:700;letter-spacing:.2em;color:var(--oliva)}
.aceso{color:var(--ouro)}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:16px;height:16px;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.ic-lg{width:26px;height:26px;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.ic-check{width:18px;height:18px;stroke-width:2.2}

.chave{
  display:inline-flex;align-items:center;gap:.625rem;
  background:var(--ouro);color:var(--tinta);
  border:0;border-radius:var(--pilula);
  padding:1.0625rem 2rem;
  font:600 1.03125rem/1 var(--corpo);
  cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 16px 40px -18px rgba(246,201,69,.7);
  transition:background .18s ease,transform .18s ease;
}
.chave:hover{background:var(--ouro-2);transform:translateY(-1px)}
.chave:active{transform:translateY(0)}
.chave[disabled]{opacity:.55;cursor:progress}

/* o brilho que atravessa a chave, o único adorno que se move sozinho no botão.
   A camada tem a largura do BOTÃO e o brilho é um gradiente dentro dela, porque a
   porcentagem do translateX conta a largura do próprio elemento: com uma faixa fixa
   de 56px, "320%" andava 179px e parava no meio de um botão de 300px. Medido em
   27/08/2026. Com a camada do tamanho do botão, -100% a 100% atravessa de fora a
   fora em qualquer largura, do botão da pílula ao botão do formulário. */
.chave::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,0) 62%);
  animation:brilho 4.6s ease-in-out infinite;
  pointer-events:none;
}
.chave-pequena{padding:.75rem 1.375rem;font-size:.90625rem;box-shadow:none}
.chave-vazia{
  background:var(--chassi);color:var(--texto-forte);
  border:1px solid var(--linha-forte);font-weight:500;box-shadow:none;
}
.chave-vazia:hover{background:var(--chassi-alto)}
.chave-vazia::after{display:none}
.chave-bloco{display:flex;justify-content:center;width:100%;padding:1.125rem}

.carimbo{
  display:inline-block;align-self:flex-start;
  font:700 .625rem/1 var(--rotulo);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta);background:var(--ouro);
  border-radius:8px;padding:.5625rem .9375rem;
  transform:rotate(-9deg);
  animation:balancar 6s ease-in-out infinite;
}
.carimbo-inverso{color:var(--ouro);background:var(--tinta)}

.tarja{
  display:inline-block;align-self:flex-start;
  font:700 .65625rem/1 var(--rotulo);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--creme);background:var(--tinta);
  border-radius:var(--pilula);padding:.375rem .875rem;
}

/* ---------- topo ---------- */

.topo{display:flex;justify-content:center;padding:1.75rem var(--gut) 0}
.pilula{
  display:flex;align-items:center;gap:.5rem;
  background:var(--chassi);border:1px solid var(--linha);
  border-radius:var(--pilula);
  padding:.5rem .5rem .5rem 1.375rem;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9);
}
.marca{display:flex;align-items:center;gap:.625rem;padding-right:1.125rem}
.marca-ic{width:30px;height:30px;border-radius:8px;flex:none}
.marca-txt{display:flex;flex-direction:column;gap:.125rem}
.marca-nome{font:800 1.1875rem/1 var(--display);letter-spacing:-.03em;color:var(--texto-forte)}
.marca-selo{font:400 .625rem/1 var(--rotulo);letter-spacing:.18em;text-transform:uppercase;color:var(--gravado)}
.marca-grande{padding-right:0}
.marca-grande .marca-ic{width:46px;height:46px;border-radius:12px}
.marca-grande .marca-nome{font-size:1.625rem}
.marca-grande .marca-selo{font-size:.6875rem}
.pilula-links{display:flex;align-items:center;gap:.125rem}
.pilula-links a{
  display:block;padding:.5625rem 1rem;border-radius:var(--pilula);
  font:500 .90625rem/1 var(--corpo);color:var(--texto);
  transition:background .16s ease,color .16s ease;
}
.pilula-links a:hover{background:var(--chassi-alto);color:var(--texto-forte)}
.pilula .chave{margin-left:.625rem}

/* ---------- abertura ---------- */

.abre{
  display:flex;flex-direction:column;align-items:center;gap:1.625rem;
  padding:5.5rem var(--gut) 0;text-align:center;
}
.etiqueta-viva{
  display:flex;align-items:center;gap:.625rem;
  background:var(--chassi);border:1px solid var(--linha);
  border-radius:var(--pilula);padding:.5rem 1.125rem .5rem .875rem;
  font:500 .6875rem/1 var(--rotulo);letter-spacing:.18em;text-transform:uppercase;color:var(--texto);
}
.ponto{
  width:7px;height:7px;border-radius:var(--pilula);background:var(--ouro);flex:none;
  animation:acender 2.1s ease-in-out infinite;
}
.manchete{font-size:clamp(2.625rem,7.2vw,5.5rem);max-width:20ch}
.palavra{display:inline-block;animation:revelar-palavra .9s cubic-bezier(.2,.8,.2,1) backwards}
.palavra:nth-child(1){animation-delay:.05s}
.palavra:nth-child(2){animation-delay:.14s}
.palavra:nth-child(3){animation-delay:.23s}
.palavra:nth-child(5){animation-delay:.34s}
.palavra:nth-child(6){animation-delay:.43s}
.palavra:nth-child(7){animation-delay:.52s}

.linha-fina{max-width:45ch;font-size:1.21875rem;line-height:1.6;color:var(--texto-2);text-wrap:pretty}
.acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem;padding-top:.5rem}
.aviso{letter-spacing:.16em}

/* ---------- a esteira ---------- */

.esteira{padding-top:4.625rem;overflow:hidden}
.esteira-trilho{
  display:flex;width:max-content;
  animation:deslizar 26s linear infinite;
}
.esteira-trilho span{
  font:900 clamp(3.5rem,8vw,7.25rem)/1 var(--display);
  letter-spacing:-.045em;white-space:nowrap;
  color:#1F2120;padding-right:2.75rem;
}

/* ---------- a vitrine ---------- */

.vitrine-caixa{padding:0 var(--gut);margin-top:-3.875rem}
.vitrine{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  background:var(--creme);border-radius:var(--r-bloco);
  padding:3.5rem 3.5rem 0;
  display:flex;flex-direction:column;align-items:center;gap:2.125rem;
  overflow:hidden;
}
.vitrine-placa{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.875rem;
  font:500 .71875rem/1 var(--rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--oliva);
}
.vitrine-placa span{display:flex;align-items:center;gap:.5625rem}
.vitrine-placa span+span{border-left:1px solid rgba(107,90,34,.28);padding-left:1.875rem}
.vitrine-tela{
  width:100%;max-width:1030px;height:auto;
  border-radius:20px 20px 0 0;
  box-shadow:var(--sombra-tela);
  animation:subir 1.15s cubic-bezier(.2,.7,.2,1) .55s backwards;
}

.cartao{
  position:absolute;
  display:flex;flex-direction:column;gap:.25rem;
  border-radius:var(--r-visor);padding:1.25rem 1.5rem;
  box-shadow:var(--sombra);
}
.cartao b{font:800 1.5625rem/1.15 var(--display);letter-spacing:-.03em}
.cartao span:last-child{font-size:.8125rem;line-height:1.4}
.cartao-extrato{
  left:1.75rem;top:30rem;
  background:var(--tinta);--giro:-7deg;--ritmo:7.5s;
}
.cartao-extrato b{color:var(--texto-forte)}
.cartao-extrato span:last-child{color:var(--texto-3)}
.cartao-fatura{
  right:2.875rem;top:11.625rem;
  background:var(--ouro);--giro:6deg;--ritmo:8.8s;
}
.cartao-fatura .gravado{color:var(--oliva);font-weight:700}
.cartao-fatura b{color:var(--tinta)}
.cartao-fatura span:last-child{color:var(--tinta-ouro)}
.cartao-nota{
  right:3.25rem;top:31.25rem;
  background:var(--marfim);--giro:4deg;--ritmo:9.6s;
}
.cartao-nota .gravado{color:var(--oliva-claro);font-weight:700}
.cartao-nota b{color:var(--tinta)}
.cartao-nota span:last-child{color:var(--tinta-marfim)}

.flutua{animation:flutuar var(--ritmo,7s) ease-in-out infinite}

/* ---------- as quatro leituras ---------- */

.numeros{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  max-width:var(--max);margin:1.75rem auto 0;padding:0 var(--gut);
}
.numero{display:flex;flex-direction:column;gap:.375rem;border-radius:var(--r-medio);padding:1.625rem 1.625rem 1.5rem}
.numero b{font:800 1.875rem/1.1 var(--display);letter-spacing:-.03em}
.numero span:last-child{font-size:.875rem;line-height:1.45}
.numero-ouro{background:var(--ouro)}
.numero-ouro .gravado{color:var(--oliva);font-weight:700}
.numero-ouro b{color:var(--tinta)}
.numero-ouro span:last-child{color:var(--tinta-ouro)}
.numero-creme{background:var(--creme)}
.numero-creme .gravado{color:var(--oliva);font-weight:700}
.numero-creme b{color:var(--tinta)}
.numero-creme span:last-child{color:var(--tinta-creme)}
.numero-marfim{background:var(--marfim)}
.numero-marfim .gravado{color:var(--oliva-claro);font-weight:700}
.numero-marfim b{color:var(--tinta)}
.numero-marfim span:last-child{color:var(--tinta-marfim)}
.numero-chassi{background:var(--chassi-alto);border:1px solid var(--linha-forte)}
.numero-chassi .gravado{color:var(--ouro)}
.numero-chassi b{color:var(--texto-forte)}
.numero-chassi span:last-child{color:var(--texto-3)}

/* ---------- seção e cabeça ---------- */

.secao{max-width:var(--max);margin-inline:auto;padding:var(--respiro) var(--gut) 0}
.cabeca{display:flex;flex-direction:column;align-items:center;gap:1.125rem;text-align:center}
.cabeca h2{font-size:clamp(2rem,4.4vw,3.375rem);max-width:22ch}
.cabeca p{max-width:46ch;font-size:1.125rem;color:var(--texto-2);text-wrap:pretty}

/* ---------- formatos de arquivo ---------- */

.formatos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding-top:2.75rem}
.fmt{
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--chassi-alto);border:1px solid var(--linha-forte);
  border-radius:var(--r-medio);padding:1.75rem;
}
.fmt b{font:700 1.375rem/1 var(--display);color:var(--ouro)}
.fmt span{font-size:.9375rem;color:var(--texto-2)}
.fmt-ouro{background:var(--ouro);border-color:var(--ouro)}
.fmt-ouro b{color:var(--tinta)}
.fmt-ouro span{color:var(--tinta-ouro)}

/* ---------- par: cena e blocos ---------- */

.par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:1rem}
.par-lado{display:flex;flex-direction:column;gap:1rem}
.bloco{display:flex;flex-direction:column;gap:.875rem;border-radius:2.5rem;padding:2.5rem}
.bloco h3{font-size:1.625rem;font-weight:700}
.bloco p{font-size:1rem;text-wrap:pretty}
.bloco-creme{background:var(--creme)}
.bloco-creme h3{color:var(--tinta)}
.bloco-creme p{color:var(--tinta-creme)}
.bloco-chassi{flex-grow:1;background:var(--chassi);border:1px solid var(--linha)}
.bloco-chassi .ic-lg{color:var(--ouro)}
.bloco-chassi p{color:var(--texto-2)}

/* ---------- cena com foto ---------- */

.cena{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  margin:0;border-radius:2.5rem;padding:2.75rem;overflow:hidden;min-height:26.25rem;
}
.cena>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cena::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.94) 6%,rgba(10,10,10,.55) 44%,rgba(10,10,10,.05) 78%);
}
.cena>.carimbo{position:absolute;top:2.125rem;right:2.125rem;z-index:2}
.cena>.carimbo-esquerda{right:auto;left:2.125rem}
.cena figcaption{position:relative;z-index:2;display:flex;flex-direction:column;gap:.75rem}
.cena h3{font-size:1.6875rem;font-weight:700}
.cena figcaption p{color:#D6D9DB;text-wrap:pretty}

.cena-larga{
  max-width:var(--max);margin:1.125rem auto 0;
  border-radius:3rem;padding:3.5rem;min-height:25rem;
  justify-content:flex-end;
}
.cena-larga figcaption{max-width:35rem;gap:.875rem}
.cena-larga figcaption p{font-size:1.375rem;line-height:1.45;color:var(--texto-forte)}
.cena-esquerda::after{background:linear-gradient(to right,rgba(10,10,10,.92) 14%,rgba(10,10,10,.55) 52%,rgba(10,10,10,.08) 88%)}
.cena-direita{align-items:flex-end;text-align:right}
.cena-direita::after{background:linear-gradient(to left,rgba(10,10,10,.92) 14%,rgba(10,10,10,.5) 54%,rgba(10,10,10,.06) 90%)}
@media (min-width:64em){
  .cena-larga{padding-inline:3.5rem}
}

/* ---------- os quatro instrumentos ---------- */

.instrumentos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem;padding-top:3rem}
.modulo{display:flex;flex-direction:column;gap:1.125rem;border-radius:var(--r-card);padding:2.5rem}
.modulo header{display:flex;align-items:center;gap:.875rem}
.modulo h3{font-size:1.75rem;font-weight:700;flex-grow:1}
.modulo-icone{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:var(--pilula);
}
.modulo-n{font:400 .65625rem/1 var(--rotulo);letter-spacing:.18em}
.modulo>p{font-size:1rem;text-wrap:pretty}
.ressalva{font:400 .75rem/1.6 var(--rotulo)}

.visor{display:flex;flex-direction:column;gap:.75rem;flex-grow:1;border-radius:var(--r-visor);padding:1.5rem}
.linhas{display:flex;flex-direction:column;gap:.5625rem}
.linhas>div{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.linhas dt{font-size:.90625rem}
.linhas dd{margin:0;font:400 .875rem/1.4 var(--rotulo)}
.linha-total{margin-top:.5rem;padding-top:.625rem;border-top:1px solid currentColor}
.linha-total dt{font-weight:600}
.linha-total dd{font-weight:700}

.barras{display:flex;flex-direction:column;gap:.75rem}
.barras li{display:flex;align-items:center;gap:.875rem}
.barras li>span:first-child{width:5.75rem;flex:none;font-size:.875rem}
.barra{flex-grow:1;display:block;height:8px;border-radius:var(--pilula);overflow:hidden}
.barra i{display:block;height:100%;border-radius:var(--pilula);width:var(--pct);animation:encher 5.4s ease-in-out infinite}
.barras li:nth-child(2) .barra i{animation-delay:.16s}
.barras li:nth-child(3) .barra i{animation-delay:.32s}
.barras li:nth-child(4) .barra i{animation-delay:.48s}
.barras b{width:2.625rem;flex:none;text-align:right;font:400 .8125rem/1 var(--rotulo)}

/* módulo em marfim */
.modulo-marfim{background:var(--marfim)}
.modulo-marfim h3{color:var(--tinta)}
.modulo-marfim .modulo-icone{background:var(--tinta)}
.modulo-marfim .modulo-icone .ic-lg{color:var(--ouro)}
.modulo-marfim .modulo-n{color:#76705F}
.modulo-marfim>p{color:var(--tinta-marfim)}
.modulo-marfim .visor{background:var(--areia)}
.modulo-marfim .visor .gravado{color:var(--oliva-claro);font-weight:700}
.modulo-marfim .barras li>span:first-child,
.modulo-marfim .barras b{color:var(--tinta)}
.modulo-marfim .barra{background:#DED9CD}
.modulo-marfim .barra i{background:var(--tinta)}
.modulo-marfim .barra i.barra-ouro{background:var(--ouro)}

/* módulo em chassi */
.modulo-chassi{background:var(--chassi);border:1px solid var(--linha)}
.modulo-chassi .modulo-icone{background:var(--ouro)}
.modulo-chassi .modulo-icone .ic-lg{color:var(--tinta)}
.modulo-chassi .modulo-n{color:#8C9298}
.modulo-chassi>p{color:var(--texto-2)}
.modulo-chassi .visor{background:var(--fundo);border:1px solid var(--linha)}
.modulo-chassi .linhas dt{color:var(--texto)}
.modulo-chassi .linhas dd{color:var(--texto-forte)}
.modulo-chassi .linha-total{border-top-color:var(--linha)}
.modulo-chassi .linha-total dt{color:var(--texto-forte)}
.modulo-chassi .linha-total dd{color:var(--ouro)}
.modulo-chassi .ressalva{color:var(--texto-3)}

/* módulo em ouro, o que ninguém mais tem */
.modulo-ouro{background:var(--ouro)}
.modulo-ouro h3{color:var(--tinta)}
.modulo-ouro .modulo-icone{background:var(--tinta)}
.modulo-ouro .modulo-icone .ic-lg{color:var(--ouro)}
.modulo-ouro .modulo-n{color:#584B18}
.modulo-ouro>p{color:var(--tinta-ouro)}
.modulo-ouro .visor{background:rgba(22,22,22,.09)}
.modulo-ouro .visor .gravado{color:var(--oliva);font-weight:700}
.modulo-ouro .linhas dt{color:var(--tinta-ouro)}
.modulo-ouro .linhas dd{color:var(--tinta)}
.modulo-ouro .linha-total{border-top-color:rgba(22,22,22,.18)}
.modulo-ouro .linha-total dt,.modulo-ouro .linha-total dd{color:var(--tinta)}
.modulo-ouro .ressalva{color:var(--oliva)}

/* módulo em creme */
.modulo-creme{background:var(--creme)}
.modulo-creme h3{color:var(--tinta)}
.modulo-creme .modulo-icone{background:var(--tinta)}
.modulo-creme .modulo-icone .ic-lg{color:var(--ouro)}
.modulo-creme .modulo-n{color:#6E6142}
.modulo-creme>p{color:var(--tinta-creme)}
.modulo-creme .visor{background:rgba(22,22,22,.07)}
.modulo-creme .visor .gravado{color:var(--oliva);font-weight:700}
.modulo-creme .linhas dt{color:var(--tinta-creme)}
.modulo-creme .linhas dd{color:var(--tinta)}
.modulo-creme .linha-total{border-top-color:rgba(22,22,22,.18)}
.modulo-creme .linha-total dt,.modulo-creme .linha-total dd{color:var(--tinta)}
.modulo-creme .ressalva{color:var(--oliva)}

/* ---------- as telas do produto ---------- */

.telas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem;padding-top:3rem}
.quadro{
  margin:0;display:flex;flex-direction:column;gap:1.25rem;
  border-radius:var(--r-card);padding:2.125rem 2.125rem 0;overflow:hidden;
}
.quadro figcaption{display:flex;flex-direction:column;gap:.5rem}
.quadro h3{font-size:1.5rem;font-weight:700}
.quadro figcaption p{font-size:.96875rem;text-wrap:pretty}
.quadro img{width:100%;height:auto;border-radius:16px 16px 0 0;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.quadro-creme{background:var(--creme)}
.quadro-creme h3{color:var(--tinta)}
.quadro-creme figcaption p{color:var(--tinta-creme)}
.quadro-chassi{background:var(--chassi-alto);border:1px solid var(--linha-forte)}
.quadro-chassi figcaption p{color:var(--texto-2)}

/* ---------- especificação de segurança ---------- */

.especificacao{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-top:3rem}
.spec{display:flex;flex-direction:column;gap:.625rem;border-radius:var(--r-medio);padding:1.875rem}
.spec dt{font:500 .65625rem/1.4 var(--rotulo);letter-spacing:.16em;text-transform:uppercase}
.spec dd{margin:0;font-size:1rem}
.spec-chassi{background:var(--chassi-alto);border:1px solid var(--linha-forte)}
.spec-chassi dt{color:var(--ouro)}
.spec-chassi dd{color:var(--texto)}
.spec-marfim{background:var(--marfim)}
.spec-marfim dt{color:var(--oliva-claro);font-weight:700}
.spec-marfim dd{color:var(--tinta)}
.spec-creme{background:var(--creme)}
.spec-creme dt{color:var(--oliva);font-weight:700}
.spec-creme dd{color:var(--tinta)}
.spec-ouro{background:var(--ouro)}
.spec-ouro dt{color:var(--oliva);font-weight:700}
.spec-ouro dd{color:var(--tinta)}

/* ---------- os quatro passos ---------- */

.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding-top:3rem}
.passos li{
  display:flex;flex-direction:column;gap:.875rem;
  background:var(--chassi-alto);border:1px solid var(--linha-forte);
  border-radius:1.875rem;padding:2rem;
}
.passos h3{font-size:1.25rem;font-weight:700}
.passos p{font-size:.96875rem;color:var(--texto-2);text-wrap:pretty}
.passo-n{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:var(--pilula);
  background:var(--fundo);border:1px solid var(--linha-forte);
  color:var(--texto-forte);font:800 1.0625rem/1 var(--display);
}
.passos li.passo-ouro{background:var(--ouro);border-color:var(--ouro)}
.passos li.passo-ouro h3{color:var(--tinta)}
.passos li.passo-ouro p{color:var(--tinta-ouro)}
.passos li.passo-ouro .passo-n{background:var(--tinta);border-color:var(--tinta);color:var(--ouro)}
.passos li.passo-marfim{background:var(--marfim);border-color:var(--marfim)}
.passos li.passo-marfim h3{color:var(--tinta)}
.passos li.passo-marfim p{color:var(--tinta-marfim)}
.passos li.passo-marfim .passo-n{background:var(--tinta);border-color:var(--tinta);color:var(--ouro)}

/* ---------- perguntas ---------- */

.perguntas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:3rem}
.q{
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--chassi);border:1px solid var(--linha);
  border-radius:1.75rem;padding:2.125rem;
}
.q h3{font-size:1.25rem;font-weight:700}
.q p{font-size:1rem;color:var(--texto-2);text-wrap:pretty}
.q-alta{background:var(--chassi-alto);border-color:var(--linha-forte)}
.q-creme{background:var(--creme);border-color:var(--creme)}
.q-creme h3{color:var(--tinta)}
.q-creme p{color:var(--tinta-creme)}

/* ---------- a lista de espera ---------- */

.lista{
  position:relative;
  max-width:var(--max);margin:var(--respiro) auto 0;
  background:var(--ouro);border-radius:var(--r-bloco);
  padding:4.5rem;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5rem;align-items:center;
  overflow:hidden;
}
.carimbo-canto{position:absolute;top:2.875rem;right:3.625rem;z-index:2}
.lista-txt{display:flex;flex-direction:column;gap:1.375rem}
.lista-txt h2{font-size:clamp(2rem,4.2vw,3.25rem);color:var(--tinta);line-height:1.02}
.lista-txt>p{font-size:1.09375rem;color:var(--tinta-ouro);text-wrap:pretty}
.lista-itens{display:flex;flex-direction:column;gap:.6875rem}
.lista-itens li{display:flex;align-items:center;gap:.6875rem;font-size:1rem;color:var(--tinta)}

.form{
  display:flex;flex-direction:column;gap:1.125rem;
  background:var(--tinta);border-radius:2.25rem;padding:2.5rem;
}
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo input{
  width:100%;
  background:var(--chassi);border:1px solid var(--linha-forte);
  border-radius:var(--r-campo);padding:1rem 1.25rem;
  font:400 1rem var(--corpo);color:var(--texto-forte);
  transition:border-color .16s ease;
}
.campo input::placeholder{color:var(--apagado)}
.campo input:focus{border-color:var(--ouro);outline:none}
.campo input[aria-invalid="true"]{border-color:#C9564A}
.erro{font-size:.8125rem;line-height:1.5;color:#E8897E}
.form .chave{margin-top:.375rem}
.form-nota{font-size:.8125rem;line-height:1.55;color:var(--texto-3)}
.form-ok{display:flex;flex-direction:column;gap:.625rem}
.form-ok p{font-size:1rem;color:var(--texto)}

/* ---------- rodapé ---------- */

.rodape{max-width:var(--max);margin:6.25rem auto 0;padding:0 var(--gut) 3.75rem}
.rodape-grade{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2.5rem;
  border-top:1px solid var(--linha);padding-top:3.5rem;
}
.rodape-marca{display:flex;flex-direction:column;gap:1.125rem;align-items:flex-start}
.rodape-tagline{font-size:.9375rem;color:var(--texto-3)}

.rodape-redes{display:flex;gap:.625rem}
.rodape-redes a{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--pilula);
  background:var(--chassi);border:1px solid var(--linha);color:var(--texto-2);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.rodape-redes a:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}
.rodape-redes .ic{stroke-width:1.7}

.rodape-coluna h2{font:600 1rem/1.3 var(--corpo);letter-spacing:0;color:var(--texto-forte)}
.rodape-coluna ul{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.rodape-coluna a{font-size:.9375rem;color:var(--texto-2);transition:color .16s ease}
.rodape-coluna a:hover{color:var(--ouro)}

.rodape-contato li{display:flex;align-items:flex-start;gap:.6875rem;font-size:.9375rem;color:var(--texto-2)}
.rodape-contato .ic{margin-top:.125rem;stroke-width:1.6;color:var(--ouro)}

.rodape-fecho{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;
  border-top:1px solid var(--linha);margin-top:3.5rem;padding-top:2rem;
}
.rodape-nota{font-size:.84375rem;color:var(--texto-3)}

.placa-legal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.5rem}
.placa-legal dt{font:500 .65625rem/1.4 var(--rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)}
.placa-legal dd{margin:.5rem 0 0;font-size:.9375rem;color:var(--texto-2)}

/* ==========================================================================
   A TELA AMPLIADA
   O botão só vira botão quando o js-lupa entra no <html>. Sem JS a captura
   continua sendo uma imagem comum, e nada promete um clique que não acontece.
   ========================================================================== */

.ampliar{
  display:block;width:100%;
  background:none;border:0;padding:0;margin:0;
  cursor:default;position:relative;
  border-radius:16px 16px 0 0;overflow:hidden;
}
.ampliar img{width:100%;height:auto;border-radius:inherit}
.ampliar-vitrine{border-radius:20px 20px 0 0;max-width:1030px}
.ampliar-vitrine img{box-shadow:var(--sombra-tela)}

.ampliar-dica{
  position:absolute;top:1rem;right:1rem;
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--pilula);
  background:rgba(22,22,22,.82);color:var(--ouro);
  opacity:0;transition:opacity .2s ease,background .2s ease;
  pointer-events:none;
}
.ampliar-dica .ic{width:20px;height:20px;stroke-width:1.8}

.js-lupa .ampliar{cursor:zoom-in}
.js-lupa .ampliar-dica{display:flex}
.js-lupa .ampliar:hover .ampliar-dica,
.js-lupa .ampliar:focus-visible .ampliar-dica{opacity:1}
.js-lupa .ampliar:hover img{filter:brightness(1.04)}
.js-lupa .ampliar:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* a rolagem de fundo trava enquanto a janela está aberta */
html.lupa-aberta,html.lupa-aberta body{overflow:hidden}

/* a caixa se molda à imagem, não o contrário: um teto fixo em px deixava 860px de tela
   sobrando num monitor de 2560. Medido em 27/08/2026. Quem manda agora é a ALTURA
   disponível, que é o que faz o número da captura ficar grande o bastante para ler. */
.lupa{
  width:auto;max-width:96vw;
  max-height:96vh;
  margin:auto;padding:0;border:0;
  background:none;color:var(--texto);
  overflow:visible;
}
.lupa::backdrop{background:rgba(8,8,8,.92)}
.lupa[open]{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  animation:lupa-entra .26s cubic-bezier(.2,.7,.2,1);
}
.lupa img{
  width:auto;height:auto;
  max-width:96vw;max-height:86vh;
  border-radius:var(--r-visor);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.lupa-legenda{
  font:500 .8125rem/1.5 var(--rotulo);
  letter-spacing:.06em;color:var(--texto-2);
  text-align:center;max-width:60ch;
}
.lupa-fecha{
  align-self:flex-end;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--chassi);border:1px solid var(--linha-forte);
  border-radius:var(--pilula);color:var(--texto-forte);
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.lupa-fecha:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta)}
.lupa-fecha .ic{width:20px;height:20px}

@keyframes lupa-entra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

@media (max-width:40em){
  .lupa{max-width:100vw;max-height:100vh}
  .lupa img{max-width:96vw;max-height:74vh;border-radius:12px}
  .lupa-legenda{padding-inline:1rem}
}

/* ==========================================================================
   MOVIMENTO
   O que roda sozinho é por tempo. O que revela ao descer é o painel.js quem
   liga, aplicando .revela no bloco e .viva quando ele entra em cena. Sem JS,
   nada fica escondido: .revela nunca chega a ser aplicada.
   ========================================================================== */

@keyframes deslizar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes flutuar{
  0%,100%{transform:translateY(0) rotate(var(--giro,0deg))}
  50%{transform:translateY(-16px) rotate(var(--giro,0deg))}
}
@keyframes subir{from{opacity:0;transform:translateY(90px) scale(.97)}to{opacity:1;transform:none}}
@keyframes acender{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes brilho{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes encher{0%{width:0}45%,100%{width:var(--pct)}}
@keyframes balancar{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-4deg)}}
@keyframes revelar-palavra{from{opacity:0;transform:translateY(46px) rotate(3deg)}to{opacity:1;transform:none}}

.revela{opacity:0;transform:translateY(30px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)}
.revela-2{transition-delay:.09s}
.revela-3{transition-delay:.18s}
.revela.viva{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .esteira-trilho,.flutua,.carimbo,.ponto,.chave::after,.barra i,.palavra,.vitrine-tela,.lupa[open]{animation:none}
  .carimbo{transform:rotate(-9deg)}
  .revela{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   TELAS MENORES
   ========================================================================== */

@media (max-width:75em){
  .numeros,.formatos,.passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .especificacao{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartao-nota{display:none}
  .lista{padding:3rem}
  .carimbo-canto{top:1.75rem;right:2rem}
}

@media (max-width:60em){
  .rodape-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
  .pilula-links{display:none}
  .pilula{padding-left:1.125rem}
  .instrumentos,.telas,.perguntas,.par,.lista{grid-template-columns:minmax(0,1fr)}
  .lista{gap:2rem}
  .vitrine{padding:2rem 2rem 0;border-radius:2rem}
  .vitrine-caixa{margin-top:-1.625rem}
  .cartao-fatura{display:none}
  .cartao-extrato{left:1.125rem;top:auto;bottom:2.625rem;padding:.9375rem 1.125rem}
  .cartao-extrato b{font-size:1.25rem}
  .cena-larga{padding:2rem;min-height:22rem}
  .cena-larga figcaption p{font-size:1.125rem}
  .cena-direita{align-items:flex-start;text-align:left}
  .cena-direita::after{background:linear-gradient(to top,rgba(10,10,10,.94) 8%,rgba(10,10,10,.5) 48%,rgba(10,10,10,.05) 82%)}
  .esteira{padding-top:2.75rem}
}

@media (max-width:40em){
  .numeros,.formatos,.passos,.especificacao{grid-template-columns:minmax(0,1fr)}
  .abre{padding-top:2.5rem;gap:1.25rem}
  .acoes{flex-direction:column;align-self:stretch}
  .acoes .chave{justify-content:center}
  .modulo,.bloco,.q,.form{padding:1.75rem}
  .quadro{padding:1.5rem 1.5rem 0}
  .lista{padding:2.125rem;border-radius:2.125rem}
  .rodape-grade{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .placa-legal{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .vitrine-placa span+span{border-left:0;padding-left:0}
  .carimbo-canto{display:none}
}