/* ==========================================================
   02 · BLOCOS
   Estilo de cada bloco do site, na mesma ordem do index.html.
   ========================================================== */

/* ---------- nav ---------- */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  width:calc(100% - 32px);max-width:var(--maxw);
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 11px 11px 22px;border-radius:100px;
  transition:top .3s cubic-bezier(.2,.7,.3,1),padding .3s cubic-bezier(.2,.7,.3,1),
             background .3s ease,box-shadow .3s ease}
/* Depois da primeira rolagem: sobe, encolhe e escurece para não brigar
   com o conteúdo que passa por baixo. A classe vem do config.js. */
.nav.compacta{top:8px;padding:7px 7px 7px 18px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.94),rgba(var(--ink-rgb),.80));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 16px 40px -18px rgba(0,0,0,.9)}
.nav.compacta .btn{padding:9px 17px;font-size:13.5px}
.brand{display:flex;align-items:center;color:var(--text);text-decoration:none}

/* ---------- logotipo ----------
   O acento do "Ó" virou o pódio: 2º à esquerda, 1º no meio (mais alto,
   na cor da marca), 3º à direita. Por isso o texto no HTML é "PODIO" sem
   acento — o desenho ocupa o lugar dele. O aria-label do link garante
   que leitor de tela continue lendo "Pódio". */
.marca{display:inline-block;font-family:'Anton',sans-serif;font-weight:400;
  font-size:30px;line-height:1;letter-spacing:.045em;text-transform:uppercase;
  padding-top:.54em;
  transition:font-size .3s cubic-bezier(.2,.7,.3,1)}
.marca-o{display:inline-block;position:relative}
/* Mais largo que o próprio O, de propósito: o pódio passa por cima das letras
   vizinhas e vira uma coroa sobre a palavra. As alturas são 100% / 62% / 38%
   para os degraus se lerem à distância. */
.marca-o::before{content:'';position:absolute;left:50%;top:-.46em;
  transform:translateX(-50%);width:1em;height:.46em;
  background:
    linear-gradient(var(--muted),var(--muted))  0   100%/.26em .285em no-repeat,
    linear-gradient(var(--lamp),var(--lamp))    50% 100%/.30em .46em  no-repeat,
    linear-gradient(var(--muted),var(--muted)) 100% 100%/.26em .175em no-repeat;
  transition:filter .25s ease}
/* Passar o cursor acende o holofote sobre o primeiro lugar */
.brand:hover .marca-o::before{filter:drop-shadow(0 0 7px var(--lamp))}
.nav.compacta .marca{font-size:25px}
.foot-brand .marca{font-size:34px}

/* Marca quadrada — hoje fora da página, guardada para favicon e avatar
   de rede social, onde o logotipo por extenso não cabe. */
.mark{width:26px;height:26px;border-radius:9px;flex:none;overflow:hidden;
  background:linear-gradient(160deg,var(--sea),var(--ink));
  box-shadow:0 0 22px rgba(var(--lamp-rgb),.55),inset 0 1px 0 rgba(255,255,255,.45);
  position:relative;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.mark::before{content:'';position:absolute;inset:auto 3px 3px 3px;height:12px;
  background:
    linear-gradient(180deg,#F4F8FB,#B9C9D8) 0 100%/6px 8px no-repeat,
    var(--grad) 50% 100%/7px 12px no-repeat,
    linear-gradient(180deg,#F4F8FB,#B9C9D8) 100% 100%/6px 5px no-repeat}
.mark::after{content:'';position:absolute;top:3px;left:50%;width:7px;height:7px;
  transform:translateX(-50%);border-radius:50%;
  background:var(--lamp);box-shadow:0 0 10px 2px var(--lamp);
  transition:box-shadow .25s ease}
/* Passar o cursor na marca acende o holofote */
.brand:hover .mark{transform:scale(1.12);
  box-shadow:0 0 30px rgba(var(--lamp-rgb),.90),inset 0 1px 0 rgba(255,255,255,.55)}
.brand:hover .mark::after{box-shadow:0 0 16px 4px var(--lamp)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .16s}
.nav-links a:hover{color:var(--text)}
.nav .btn{padding:11px 20px;font-size:14px}
/* Faixa de notebook (900–1250px): logo, menu e botão têm tamanho fixo e
   não acompanhavam a largura, então o topo ficava apertado de ponta a ponta. */
@media(max-width:1250px){
  .marca{font-size:25px}
  .foot-brand .marca{font-size:29px}
  .nav-links{gap:20px}
  .nav-links a{font-size:13.5px}
  .nav .btn{padding:10px 17px;font-size:13.5px}
  .hero{padding:150px 0 78px}
  .hero .lead{font-size:17.5px}
}
/* ---------- menu do celular ----------
   O botão e o painel nascem fora da tela e SÓ passam a existir abaixo de
   900px, na mesma faixa em que os .nav-links somem. Acima disso nada aqui
   se aplica e a barra do computador fica idêntica. */
.menu-btn{display:none;width:44px;height:44px;flex:none;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--glass-line);
  cursor:pointer;position:relative;padding:0;
  transition:background .2s ease,border-color .2s ease}
.menu-btn:hover{background:rgba(255,255,255,.11)}
/* As três barras: a do meio é o próprio span, as outras são pseudo-elementos.
   Ao abrir, a do meio some e as outras giram e viram um X. */
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:'';position:absolute;left:50%;width:19px;height:2px;border-radius:2px;
  background:var(--text);transform:translateX(-50%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .18s ease}
.menu-btn span{top:50%;margin-top:-1px}
.menu-btn span::before{top:-6px;left:0;transform:none}
.menu-btn span::after{top:6px;left:0;transform:none}
.menu-btn[aria-expanded="true"] span{opacity:0}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* O painel fica FORA da .nav de propósito. A barra usa backdrop-filter, que
   cria contexto de empilhamento próprio: um painel filho dela ficaria preso
   atrás do conteúdo, que foi o mesmo problema da tarja "Mais escolhido". */
/* O painel ocupa a altura toda com propósito: marca em cima, navegação no
   meio, ação embaixo. Antes tudo ficava centralizado e sobrava preto morto
   nas duas pontas. */
.menu-painel{position:fixed;inset:0;z-index:150;display:none;
  flex-direction:column;padding:18px 24px calc(28px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(700px 480px at 78% 8%,rgba(var(--lamp-rgb),.10),transparent 60%),
    radial-gradient(600px 520px at 6% 92%,rgba(var(--warm-deep-rgb),.09),transparent 62%),
    linear-gradient(165deg,rgba(var(--ink-rgb),.985),rgba(var(--sea-rgb),.985));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  overflow-y:auto;overscroll-behavior:contain}
.menu-painel[hidden]{display:none}
.menu-painel.aberto{display:flex}

.menu-topo{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.09);flex:none}
.menu-topo .marca{font-size:26px}
.menu-fechar{width:44px;height:44px;flex:none;border-radius:14px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--glass-line);position:relative;
  transition:background .2s ease,border-color .2s ease}
.menu-fechar:hover{background:rgba(255,255,255,.12);border-color:rgba(var(--lamp-rgb),.5)}
.menu-fechar span::before,.menu-fechar span::after{
  content:'';position:absolute;top:50%;left:50%;width:18px;height:2px;border-radius:2px;
  background:var(--text)}
.menu-fechar span::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-fechar span::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* A navegação toma o espaço que sobra, em vez de flutuar no meio do vazio */
.menu-painel nav{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:8px 0;min-height:0}
.menu-painel nav a{
  display:flex;align-items:baseline;gap:16px;
  font:var(--t-h2);letter-spacing:var(--t-h2-ls);color:var(--text);
  text-decoration:none;padding:15px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .18s ease,gap .22s cubic-bezier(.2,.7,.3,1);
  /* entrada escalonada: cada item chega um pouco depois do anterior */
  opacity:0;transform:translateY(10px);
  animation:menuEntra .42s cubic-bezier(.2,.7,.3,1) forwards}
.menu-painel nav a:nth-child(1){animation-delay:.04s}
.menu-painel nav a:nth-child(2){animation-delay:.09s}
.menu-painel nav a:nth-child(3){animation-delay:.14s}
.menu-painel nav a:nth-child(4){animation-delay:.19s}
.menu-painel nav a:nth-child(5){animation-delay:.24s}
@keyframes menuEntra{to{opacity:1;transform:none}}
.menu-painel nav a i{font:var(--t-label-sm);letter-spacing:.1em;color:var(--lamp);
  font-style:normal;flex:none;opacity:.75}
.menu-painel nav a:hover,.menu-painel nav a:focus-visible{color:var(--lamp);gap:24px}
.menu-painel nav a:hover i{opacity:1}

.menu-pe{flex:none;padding-top:20px;border-top:1px solid rgba(255,255,255,.09)}
.menu-pe .btn{width:100%}
.menu-nota{font-size:13.5px;color:var(--muted);margin:14px 0 0;text-align:center;max-width:none}
.menu-local{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);opacity:.7;margin:10px 0 0;text-align:center;max-width:none}

/* Tela baixa em paisagem: a navegação encolhe em vez de estourar */
@media(max-height:560px){
  .menu-painel nav a{padding:9px 2px;font-size:18px}
  .menu-nota{display:none}
}

@media(max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:block}
  /* No celular o botão do WhatsApp da barra sai: ele já está no painel e
     dentro dele cabe por extenso, sem espremer o logotipo. */
  .nav>.btn{display:none}
}
/* Quem pediu menos animação não recebe o giro das barras nem transição. */
@media(prefers-reduced-motion:reduce){
  .menu-btn span,.menu-btn span::before,.menu-btn span::after,
  .menu-painel nav a{transition:none;animation:none;opacity:1;transform:none}
}

/* ---------- hero ---------- */
.hero{padding:186px 0 96px;text-align:center}
/* O coeficiente vw é menor que o original (era 5.7) para o título continuar
   encolhendo em telas médias. Com 5.7 ele travava no teto de 64px já aos
   1120px de largura e ficava desproporcional em notebook. */
.hero h1{font:var(--t-display);letter-spacing:var(--t-display-ls);
  max-width:19ch;margin:0 auto 26px;text-wrap:balance}
.hero h1 em{font-style:italic;display:block;white-space:nowrap;color:var(--lamp)}
.hero .lead{margin:0 auto;font-size:19px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:38px 0 20px}
.hero-note{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:30px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--lamp);box-shadow:0 0 11px 1px var(--lamp);animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- grids ---------- */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
/* O opacity mantém os .75s da animação de entrada; o resto responde ao cursor.
   Aqui o .rv está no mesmo elemento, então as duas transições convivem. */
.card{padding:34px;position:relative;
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),
             transform .3s cubic-bezier(.2,.7,.3,1),
             box-shadow .3s ease,border-color .3s ease}
/* Levanta, cresce e acende na cor da paleta. O OURO é reservado: só o plano
   mais alto (BLOCO 08) e os cards de cliente (BLOCO 05) podem usá-lo, porque
   ali ele significa primeiro lugar. Em qualquer outro card ele perderia o
   sentido. Os de resultado sobrescrevem esta regra mais abaixo. */
.card:hover{z-index:3;transform:translateY(-8px) scale(1.035);
  border-color:rgba(var(--lamp-rgb),.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),
             0 30px 70px -26px rgba(var(--lamp-rgb),.55)}
.card h3{margin-bottom:12px}
.card p{font-size:15.5px}
/* O ícone fica parado de propósito: com o card inteiro crescendo, mais um
   movimento por dentro dele deixa a peça agitada. */
.card-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:rgba(var(--lamp-rgb),.10);
  border:1px solid rgba(var(--lamp-rgb),.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.card-icon svg{width:21px;height:21px;stroke:var(--glow);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.card ul{list-style:none;margin-top:18px;display:grid;gap:9px}
.card ul li{font-size:14.5px;color:var(--muted);padding-left:20px;position:relative}
.card ul li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;
  background:rgba(var(--lamp-rgb),.55);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s ease}
.card ul li:hover::before{transform:scale(1.45)}

/* Segunda linha do título em degradê, mesmo tratamento do hero.
   Fica em bloco próprio para o degradê correr por uma linha inteira —
   em linha, ele se parte na quebra e o efeito some. */
#transformacao h2 em{font-style:italic;display:block;color:var(--lamp)}

/* ---------- antes / depois ----------
   O destaque vem de ACENDER a coluna escolhida, não de apagar a outra:
   apagar demais derrubaria o contraste do texto abaixo do mínimo legível.
   A inativa fica em .78 de opacidade: medido, dá 4,8:1 de contraste no texto
   apagado. Em .72, que era o valor anterior, caía para 4,3:1 e reprovava. */
.ad{display:grid;grid-template-columns:1fr 1fr;padding:0;overflow:hidden}
.ad-col{padding:28px 32px 36px;opacity:.78;position:relative;
  transition:opacity .35s ease,background .35s ease}
.ad-col+.ad-col{border-left:1px solid var(--glass-line)}
.ad-col.ativa{opacity:1}
/* faixa de cor no topo, acende junto com a coluna */
.ad-col::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  opacity:0;transition:opacity .35s ease}
.ad-antes::before{background:linear-gradient(90deg,transparent,var(--red),transparent)}
.ad-depois::before{background:linear-gradient(90deg,transparent,var(--lamp) 32%,var(--red) 76%,transparent)}
.ad-col.ativa::before{opacity:1}
/* Antes em vermelho de alerta. Depois recebe o degradê quente da marca,
   âmbar escorrendo para o vermelho — é o lado que precisa chamar atenção. */
.ad-antes.ativa{background:linear-gradient(180deg,rgba(var(--red-rgb),.22),rgba(var(--red-rgb),.05) 52%,transparent 80%)}
.ad-depois.ativa{background:linear-gradient(165deg,rgba(var(--lamp-rgb),.30),rgba(var(--warm-rgb),.20) 42%,rgba(var(--red-rgb),.16) 68%,transparent 88%)}

/* o interruptor */
.ad-tab{width:100%;display:flex;align-items:center;justify-content:center;
  font:var(--t-label);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;cursor:pointer;
  padding:12px 20px;border-radius:100px;margin-bottom:28px;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-line);color:var(--muted);
  background-origin:border-box;background-repeat:no-repeat;
  transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.ad-tab:hover{background:rgba(255,255,255,.10)}
/* Antes aceso: pílula vermelha, a cor de alerta do site */
.ad-antes.ativa .ad-tab{color:#fff;border-color:transparent;
  background:linear-gradient(140deg,var(--red),var(--red-deep));
  box-shadow:0 10px 26px -8px rgba(var(--red-rgb),.75)}
/* Depois aceso: degradê creme > âmbar > laranja > vermelho.
   Para no vermelho-alaranjado, e não no --red cheio, para o texto escuro
   continuar legível na ponta mais escura da faixa. */
.ad-depois.ativa .ad-tab{color:var(--ink);border-color:transparent;
  background:var(--grad);
  box-shadow:0 12px 30px -8px rgba(var(--warm-rgb),.85)}

/* as listas */
.ad ul{list-style:none;display:grid;gap:14px}
.ad ul li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted);
  transition:color .35s ease}
.ad-col.ativa ul li{color:var(--text)}
.ad ul li svg{width:17px;height:17px;flex:none;margin-top:4px;fill:none;
  stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s ease,filter .35s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
/* Antes: vermelho mais claro que o --red de propósito — a 72% de opacidade
   o vermelho cheio cai para 2,6:1, abaixo do mínimo de contraste de ícone. */
.ad-antes ul li svg{stroke:var(--alert)}
.ad-antes.ativa ul li svg{filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.55))}
/* Depois: a lista desce em degradê, do creme ao vermelho. Stroke de SVG não
   aceita degradê vindo do CSS, então a rampa é feita item a item. */
.ad-depois ul li:nth-child(1) svg{stroke:var(--glow)}
.ad-depois ul li:nth-child(2) svg{stroke:var(--lamp)}
.ad-depois ul li:nth-child(3) svg{stroke:var(--warm-mid)}
.ad-depois ul li:nth-child(4) svg{stroke:var(--warm)}
.ad-depois ul li:nth-child(5) svg{stroke:var(--warm-deep)}
.ad-depois.ativa ul li svg{filter:drop-shadow(0 0 7px rgba(var(--warm-rgb),.65))}
.ad ul li:hover svg{transform:scale(1.25)}

@media(max-width:760px){
  .ad{grid-template-columns:1fr}
  .ad-col+.ad-col{border-left:none;border-top:1px solid var(--glass-line)}
}

/* ---------- resultados ---------- */
/* Ouro em toda a seção pela regra do pódio: dourado é do primeiro degrau e
   dos clientes. Cada caso é um <details>, então abrir/fechar é nativo:
   funciona com teclado, com leitor de tela e sem JS. */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}

.caso{padding:0;overflow:hidden;position:relative;
  border-color:rgba(var(--ouro-rgb),.34);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease}
/* Aberto, sobe para o topo da grade e ocupa a linha inteira. O order:-1 é o
   que tira ele do meio da fila: sem isso, abrir o segundo card deixava ele
   embaixo do primeiro, e o card em destaque ficava escondido no rodapé. */
.caso[open]{order:-1;grid-column:1/-1;border-color:rgba(var(--ouro-rgb),.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 70px -26px rgba(var(--ouro-rgb),.50)}
.caso:hover{transform:translateY(-6px);border-color:rgba(var(--ouro-rgb),.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),
             0 30px 70px -26px rgba(var(--ouro-rgb),.60)}
.caso[open]:hover{transform:none}
/* ---- foto do cliente ao fundo ----
   São quatro camadas empilhadas, e a ordem é o que faz o texto continuar
   legível: foto (0), véu escuro (1), brilho quente (2), conteúdo (3).
   Sem z-index explícito, o ::after do véu pintaria por cima do texto, porque
   pseudo-elemento posicionado ganha de conteúdo em fluxo normal. */
.caso-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;user-select:none;
  /* a foto entra rebaixada: ela é ambientação, não informação */
  opacity:.55;filter:grayscale(.25) brightness(.95);
  transition:opacity .35s ease,filter .35s ease}
.caso:hover .caso-foto,.caso[open] .caso-foto{opacity:.68;filter:grayscale(.12) brightness(1)}

/* O véu. Mais ddenso embaixo, onde o texto se acumula, e mais leve em cima,
   onde só existe o logotipo. É o que permite ler número sobre imagem. */
.caso::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Densidade medida, não estimada: com este degradê o texto de apoio, que é
     o mais fraco da página, fica em 5,3:1 sobre a área mais clara da foto.
     O mínimo aceitável é 4,5:1. Clarear mais reprova. */
  /* Denso onde o texto mora, leve onde a foto aparece. O texto ocupa da
     metade para baixo, então é ali que o véu fecha. */
  background:linear-gradient(to top,
    rgba(var(--ink-rgb),.93) 0%,
    rgba(var(--ink-rgb),.90) 38%,
    rgba(var(--ink-rgb),.72) 68%,
    rgba(var(--ink-rgb),.42) 100%)}
.caso[open]::after{background:linear-gradient(to top,
    rgba(var(--ink-rgb),.94) 0%,
    rgba(var(--ink-rgb),.91) 55%,
    rgba(var(--ink-rgb),.74) 78%,
    rgba(var(--ink-rgb),.48) 100%)}

/* Brilho quente subindo do rodapé do card. É o que tira a peça do "chapado":
   dá profundidade sem pesar, e some quando o card não interessa. */
.caso::before{content:'';position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  z-index:2;
  background:linear-gradient(to top,rgba(var(--ouro-rgb),.13),transparent);
  opacity:.55;transition:opacity .3s ease}
.caso:hover::before,.caso[open]::before{opacity:1}

/* Conteúdo sempre por cima de tudo */
.caso > summary,.caso-mais{position:relative;z-index:3}

.caso > summary{list-style:none;cursor:pointer;display:block;padding:24px 24px 20px;position:relative}
.caso > summary::-webkit-details-marker{display:none}
.caso > summary:focus-visible{outline:2px solid var(--glow);outline-offset:-3px}

.caso-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
/* O logotipo do cliente costuma vir branco e sem fundo. O quadro escuro dá
   contorno a ele sem exigir uma versão colorida, e as medidas fixas reservam
   o espaço antes da imagem chegar, então o card não salta ao carregar. */
/* Altura fixa e largura livre: logotipo de cliente vem em proporção qualquer.
   A Nativa é quadrada, a do Inuit é o dobro de largura. Travar num quadrado
   faria a larga encolher até virar tarja ilegível. */
.caso-logo{height:76px;width:auto;max-width:180px;flex:none;object-fit:contain;
  border-radius:15px;padding:9px 13px;
  /* Escuro, não claro: o logotipo do cliente vem em branco, e sobre foto clara
     um quadro translúcido claro fazia branco sobre branco. */
  background:rgba(var(--ink-rgb),.62);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  /* Enquanto o arquivo nao existe, o alt aparece dentro do quadro em vez de
     virar icone de imagem quebrada. */
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);
  overflow:hidden;text-align:center}
.caso-logo-vazio{display:block;width:72px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 7px,transparent 7px 14px)}

/* O "+" que vira "×". Mesma gramática do FAQ, para o site ter um jeito só
   de dizer "isto abre". */
.caso-abrir{width:28px;height:28px;flex:none;border-radius:50%;position:relative;
  border:1px solid rgba(var(--ouro-rgb),.40);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),background .25s ease,border-color .25s ease}
.caso-abrir::before,.caso-abrir::after{content:'';position:absolute;top:50%;left:50%;
  background:var(--ouro);border-radius:1px;transform:translate(-50%,-50%)}
.caso-abrir::before{width:11px;height:1.5px}
.caso-abrir::after{width:1.5px;height:11px;transition:opacity .2s ease}
.caso:hover .caso-abrir{background:rgba(var(--ouro-rgb),.16);border-color:rgba(var(--ouro-rgb),.85)}
.caso[open] .caso-abrir{display:none}

/* O nome do cliente sai da tela: os três logotipos já são marcas nominativas
   e trazem o nome escrito. Repetir embaixo era duplicar a informação, e era
   esse título que não sobrevivia sobre a foto — Instrument Serif é de alto
   contraste e os traços finos somem sobre imagem.
   Ele continua no documento para leitor de tela e para a hierarquia de
   títulos, apenas fora do alcance da vista. */
.caso h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Sobre foto, o cinza de apoio some. Sobe para o tom de texto, com sombra
   para não depender do que estiver atrás. */
.caso-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text);
  letter-spacing:.04em;margin-top:0;line-height:1.5;opacity:.92;
  text-shadow:0 1px 8px rgba(var(--ink-rgb),.95)}

/* O número é o elemento gráfico do card. Grande, dourado, sem concorrência. */
.caso-numero{font:var(--t-num-xl);letter-spacing:var(--t-num-ls);margin:22px 0 0;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(var(--ink-rgb),1),0 2px 18px rgba(var(--ink-rgb),.92);
  color:var(--ouro)}
.caso-rot{font-size:13.5px;color:var(--text);opacity:.86;margin-top:8px;line-height:1.4;
  text-shadow:0 1px 8px rgba(var(--ink-rgb),.95)}

.caso-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.caso-canal{font:var(--t-label-sm);
  letter-spacing:var(--t-label-sm-ls);text-transform:uppercase;color:var(--ouro);
  text-shadow:0 1px 3px rgba(var(--ink-rgb),1),0 1px 10px rgba(var(--ink-rgb),.9)}
/* Os três degraus do logotipo, em miniatura. Ornamento da marca, não gráfico:
   não representa dado nenhum e por isso fica fora da árvore de acessibilidade. */
.caso-degraus{display:block;width:26px;height:14px;flex:none;
  background:
    linear-gradient(var(--muted),var(--muted))  0   100%/6px 7px  no-repeat,
    linear-gradient(var(--ouro),var(--ouro))    50% 100%/7px 14px no-repeat,
    linear-gradient(var(--muted),var(--muted)) 100% 100%/6px 4px  no-repeat;
  opacity:.5;transition:opacity .25s ease}
.caso:hover .caso-degraus{opacity:1}

/* ---- conteúdo que aparece ao abrir ---- */
/* ---- estado aberto ----
   O número grande do card fechado repetia o primeiro número do bloco Google
   Ads, e o rodapé "Google Ads + Meta" repetia os nomes dos dois blocos. Os
   dois somem ao abrir: era daí que vinha metade da altura ociosa. */
.caso[open] .caso-numero,
.caso[open] .caso-rot,
.caso[open] .caso-pe{display:none}
/* Aberto, o logotipo do parceiro vira a marca do card, não um selo no canto. */
/* Logotipo quadrado rende menos área que um deitado na mesma altura, e ao
   lado de um deitado parece pequeno. Ganha altura extra para os dois terem
   peso parecido no card. */
.caso[open] .caso-logo{height:112px;max-width:270px;border-radius:20px;padding:12px 18px}
.caso-logo.quadrada{height:92px}
.caso[open] .caso-logo.quadrada{height:140px;padding:14px}
.caso[open] > summary{padding-bottom:0}
.caso[open] .caso-cabeca{margin-bottom:12px}
.caso[open] h3{font-size:26px}

.caso-mais{padding:0 24px 24px;cursor:pointer}

/* Google Ads e Meta medem coisas diferentes e os números não se somam, então
   cada canal ganha seu bloco com nome em cima. Juntar os dois numa fileira só
   faria parecer que 566 e 168 são a mesma unidade. */
.canal{padding-top:16px;margin-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.canal:first-child{margin-top:0}
.canal-nome{font:var(--t-label-sm);
  letter-spacing:var(--t-label-sm-ls);text-transform:uppercase;color:var(--ouro);
  display:flex;align-items:center;gap:10px;margin-bottom:14px}
.canal-nome::after{content:'';flex:1;height:1px;background:rgba(var(--ouro-rgb),.22)}
.canal-camp{font-size:13.5px;color:var(--muted);margin:-6px 0 14px}

/* Quatro colunas fixas, iguais em todos os cards. Com auto-fit, um bloco de
   2 números esticava cada um para 50% da largura e abria um vão enorme entre
   eles. Fixo, os dois se agrupam à esquerda e as colunas dos vários cards
   ficam alinhadas entre si. */
.caso-numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 20px}
.num-valor{font:var(--t-num-lg);letter-spacing:var(--t-num-ls);color:var(--text);
  font-variant-numeric:tabular-nums}
.num-rot{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.35}
/* O número de destaque é o mesmo nos dois estados: fechado ele é o
   .caso-numero, aberto ele é o primeiro do bloco. Antes trocava de cor ao
   abrir, e o herói do card virava um número igual aos outros. */
.num-destaque .num-valor{font-size:38px;color:var(--ouro)}
/* A frase traduz o painel: número de plataforma não vende sozinho. */
.caso-frase{margin-top:24px;font-size:16.5px;color:var(--muted);max-width:60ch}
.caso-frase strong{color:var(--text);font-weight:700}
.caso-periodo{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  letter-spacing:.05em;margin-top:20px;padding-top:14px;opacity:.8;
  border-top:1px solid rgba(255,255,255,.07)}

/* O card de espera não se disfarça de cliente: sem ouro, sem brilho, sem clique. */
.caso-vaga{border-color:rgba(255,255,255,.10);pointer-events:none}
.caso-vaga::before{display:none}
.caso-vaga h3,.caso-vaga .caso-numero{color:var(--muted);-webkit-text-fill-color:var(--muted)}
.caso-vaga .caso-numero{background:none;font-size:34px}
.caso-vaga .caso-canal{color:var(--muted)}
.caso-vaga > summary{cursor:default}

/* Estava com 110 caracteres por linha, quase o dobro do confortável. Como é
   centralizada, a margem automática mantém o eixo. */
.disclaimer{margin:26px auto 0;font-size:13.5px;color:var(--muted);text-align:center;
  max-width:var(--medida-curta)}

@media(max-width:900px){
  .casos{grid-template-columns:repeat(2,1fr)}
  .caso-numeros{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:620px){
  .casos{grid-template-columns:1fr}
  .caso > summary{padding:20px 20px 18px}
  .caso-mais{padding:0 20px 22px}
  .caso-numero{font-size:36px}
  .caso-numeros{grid-template-columns:repeat(2,1fr);gap:16px 14px}
  .num-valor{font-size:26px}
  .num-destaque .num-valor{font-size:32px}
  .caso-frase{font-size:15px}
}

/* ---------- método ---------- */
.steps{display:grid;gap:18px}
.step{display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:start;
  padding:26px 30px;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease}

/* A linha que liga uma etapa à seguinte. Ela mora no vão entre os cards:
   atrás deles, o desfoque do vidro a engoliria. Some na última. */
.step::after{content:'';position:absolute;left:53px;top:100%;width:2px;height:18px;
  background:linear-gradient(rgba(var(--lamp-rgb),.55),rgba(var(--lamp-rgb),.08))}
.step:last-child::after{display:none}

/* O número virou medalha: contorno em repouso, acende sob o cursor */
.step-n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.04em;
  color:var(--lamp);background:rgba(255,255,255,.05);border:1px solid var(--glass-line);
  transition:background .3s ease,color .3s ease,border-color .3s ease,
             transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.step p{font-size:15.5px;margin-top:7px;max-width:var(--medida)}

/* Mesma linguagem de hover do resto do site, mais discreta porque a faixa
   é larga e um salto grande numa linha comprida fica desengonçado. */
.step:hover{transform:translateY(-4px);border-color:rgba(var(--lamp-rgb),.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),
             0 26px 60px -28px rgba(var(--lamp-rgb),.55)}
.step:hover .step-n{background:var(--grad);color:var(--ink);border-color:transparent;
  transform:scale(1.08);box-shadow:0 0 26px -6px rgba(var(--warm-rgb),.85)}

@media(max-width:640px){
  .step{grid-template-columns:1fr;gap:14px}
  .step::after{display:none}
}

/* ---------- brinde ---------- */
.gift{padding:52px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  position:relative;overflow:hidden}
.gift::before{content:'';position:absolute;top:-60%;right:-20%;width:70%;height:220%;
  background:radial-gradient(circle,rgba(var(--lamp-rgb),.26),transparent 66%)}
.gift>*{position:relative}
.gift-tag{display:inline-block;font:var(--t-label);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;padding:7px 15px;border-radius:100px;
  background:rgba(var(--ouro-rgb),.12);border:1px solid rgba(var(--ouro-rgb),.38);color:var(--ouro);margin-bottom:20px}
.gift h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:16px}
.gift ul{list-style:none;display:grid;gap:12px}
.gift ul li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted)}
.gift ul li svg{width:18px;height:18px;flex:none;margin-top:4px;stroke:var(--lamp);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.gift ul li:hover svg{transform:scale(1.28)}
@media(max-width:860px){.gift{grid-template-columns:1fr;padding:36px;gap:30px}}

/* ---------- planos ---------- */
/* position:relative para a tarja "Mais escolhido" se ancorar no card */
.plan{padding:34px;display:flex;flex-direction:column;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease}

/* ---------- o pódio ----------
   1º no meio e mais alto, 2º à esquerda, 3º à direita — igual à logo.
   As bases dos três ficam alinhadas, como um pódio apoiado no chão: o grid
   estica todos até a mesma linha de baixo, e é a margem do topo que encurta
   cada degrau. Por isso os tampos saem em alturas diferentes sozinhos. */
.lugar-2{order:1;margin-top:38px}   /* prata, à esquerda */
.lugar-1{order:2;margin-top:0}      /* ouro, no meio     */
.lugar-3{order:3;margin-top:68px}   /* bronze, à direita */

/* O degrau mais alto respira mais por dentro, senão sobra um vão vazio
   acima do botão só porque o card ficou maior. */
.lugar-1 .plan{padding:42px 34px}

/* Bordas de medalha: finas, muda só a cor */
/* Só a borda. Sem box-shadow aqui, o card herda a sombra neutra do .glass,
   igual aos outros dois — o halo dourado fica reservado para o hover. */
.plan.featured{border-color:rgba(var(--ouro-rgb),.60)}
.lugar-2 .plan{border-color:rgba(var(--prata-rgb),.42)}
.lugar-3 .plan{border-color:rgba(var(--bronze-rgb),.48)}

/* Passar o cursor levanta o card e acende o halo na cor da própria medalha.
   O z-index garante que o card que cresceu passe por cima dos vizinhos. */
.plan-wrap:hover{z-index:3}
.plan-wrap:hover .plan{transform:translateY(-8px) scale(1.035)}
.lugar-1:hover .plan{border-color:rgba(var(--ouro-rgb),.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),
             0 30px 70px -26px rgba(var(--ouro-rgb),.60)}
.lugar-2:hover .plan{border-color:rgba(var(--prata-rgb),.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),
             0 30px 70px -26px rgba(var(--prata-rgb),.45)}
.lugar-3:hover .plan{border-color:rgba(var(--bronze-rgb),.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.05),
             0 30px 70px -26px rgba(var(--bronze-rgb),.60)}

/* Cada plano tem o botão da sua medalha. O ouro fica com o botão principal
   do site; prata e bronze ganham corpo próprio para não parecerem
   desligados ao lado dele — a gente também quer vender esses dois. */
.lugar-2 .plan .btn{background:rgba(var(--prata-rgb),.15);
  border-color:rgba(var(--prata-rgb),.55);color:var(--text)}
.lugar-2 .plan .btn:hover{background:rgba(var(--prata-rgb),.27);
  border-color:rgba(var(--prata-rgb),.85)}
.lugar-3 .plan .btn{background:rgba(var(--bronze-rgb),.20);
  border-color:rgba(var(--bronze-rgb),.62);color:var(--text)}
.lugar-3 .plan .btn:hover{background:rgba(var(--bronze-rgb),.34);
  border-color:rgba(var(--bronze-rgb),.90)}

/* No celular a coluna é única: sem pódio, sem reordenar, e a lista volta a
   subir de preço na ordem natural do HTML. */
/* No celular a coluna é única, então não existe pódio. Mas a ordem importa
   mais aqui do que no computador: rolando com o dedo, muita gente não chega
   ao terceiro card. Por isso o Performance vem primeiro, e os outros descem
   na ordem das medalhas. */
@media(max-width:900px){
  .lugar-1{order:1;margin-top:0}   /* ouro   · Performance */
  .lugar-2{order:2;margin-top:0}   /* prata  · Crescimento */
  .lugar-3{order:3;margin-top:0}   /* bronze · Essencial   */
  .lugar-1 .plan{padding:34px}
}
/* z-index obrigatório: o backdrop-filter do .glass cria contexto de
   empilhamento e o card pintaria por cima da tarja. */
.plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 15px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(140deg,#FFE9A8,var(--ouro) 45%,#D19A1F);
  color:var(--ink);
  box-shadow:0 8px 20px -6px rgba(var(--ouro-rgb),.80)}
.plan-wrap{position:relative;display:flex}
/* O nome e o preço são <p>, e o 01-base pinta todo <p> de --muted. Sem a cor
   explícita aqui, o preço saía no mesmo cinza dos itens da lista e a ressalva
   sobre a verba, que é branca, ficava o elemento mais forte do card. */
.plan-name{font:var(--t-h3);letter-spacing:var(--t-h3-ls);margin-bottom:6px;
  color:var(--text)}
.plan-for{font-size:13.5px;color:var(--muted);min-height:42px}
.plan-de{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--muted);
  letter-spacing:.02em;margin:18px 0 -2px}
.plan-de s{font-size:19px;font-weight:500;color:var(--muted);
  text-decoration-thickness:2px;margin:0 3px}
/* Os três preços ficam em colunas: sem tabular-nums o 990, o 1.590 e o 2.090
   têm larguras de dígito diferentes e a leitura vertical desalinha. */
.plan-price{font-size:40px;font-weight:600;letter-spacing:-.03em;margin:18px 0 4px;
  font-variant-numeric:tabular-nums;color:var(--text)}
/* Ouro só no primeiro degrau, mesma regra do resto do pódio: o preço do
   Performance é o número que a página inteira existe para mostrar. */
.lugar-1 .plan-price{color:var(--ouro)}
/* Quando existe o "de ... por" em cima, o preço não repete o respiro */
.plan-de + .plan-price{margin-top:6px}
.plan-price small{font-family:'Inter',sans-serif;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
/* Aviso da verba em caixa própria, e não em letra miúda: é a informação que
   mais gera mal-entendido depois de fechado, então precisa ser lida. */
.plan-ads{font-size:12.5px;color:var(--muted);line-height:1.5;
  margin-top:16px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)}
.plan-ads strong{display:block;color:var(--text);font-weight:600;font-size:13px;
  margin-bottom:3px}
.plan ul{list-style:none;display:grid;gap:11px;margin:26px 0 30px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10)}
.plan ul li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);align-items:flex-start}
.plan ul li svg{width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--lamp);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
/* O que está incluso cresce; o que está de fora encolhe */
.plan ul li:hover svg{transform:scale(1.3)}
.plan ul li.off{opacity:.42}
.plan ul li.off svg{stroke:var(--muted)}
.plan ul li.off:hover svg{transform:scale(.8)}
.plan .btn{margin-top:auto;width:100%}

/* ---------- nós ---------- */
.person{padding:32px;display:flex;gap:22px;align-items:flex-start}
.avatar{width:62px;height:62px;border-radius:20px;flex:none;
  background:rgba(var(--lamp-rgb),.10);
  border:1px solid rgba(var(--lamp-rgb),.22);display:grid;place-items:center;
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:20px;color:var(--glow);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.person:hover .avatar{transform:scale(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 28px -12px rgba(var(--lamp-rgb),.5)}
.avatar img{width:100%;height:100%;object-fit:cover}
.person-role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:4px 0 10px}
.person p{font-size:14.5px}
@media(max-width:520px){.person{flex-direction:column;gap:16px}}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.faq details{padding:4px 28px}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font:var(--t-h3);letter-spacing:var(--t-h3-ls);
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'JetBrains Mono',monospace;font-size:21px;color:var(--red);
  flex:none;transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
/* Cresce ao passar o cursor. Aberto, precisa repetir o giro para não perdê-lo. */
.faq summary:hover::after{transform:scale(1.28)}
.faq details[open] summary:hover::after{transform:rotate(45deg) scale(1.28)}
.faq details p{padding:0 0 24px;font-size:15px;max-width:66ch}

/* ---------- cta final ---------- */
.final{padding:64px 52px;text-align:center;position:relative;overflow:hidden}
.final::before{content:'';position:absolute;top:-140%;left:50%;transform:translateX(-50%);
  width:130%;height:280%;background:radial-gradient(circle,rgba(var(--lamp-rgb),.24),transparent 62%)}
.final>*{position:relative}
.final h2{max-width:26ch;margin:0 auto 18px}
.final h2 em{font-style:italic;display:block;color:var(--lamp)}
.final p{margin:0 auto 34px;max-width:52ch}
/* marca-d'água atrás do texto; primeiro filho, então pinta por baixo */
.final .final-mark{position:absolute;top:4px;left:50%;transform:translateX(-50%);
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.02em;line-height:1;
  font-size:clamp(76px,14vw,180px);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);
  pointer-events:none;user-select:none}

/* ---------- rodapé ---------- */
footer{padding:66px 0 44px;margin-top:40px;position:relative;
  border-top:1px solid rgba(255,255,255,.09)}
footer::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--lamp),transparent);opacity:.55}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:44px}

/* coluna da marca */
.foot-brand p{font-size:14px;max-width:36ch;margin-top:18px}
.foot-local{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
.foot-local svg{width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--lamp);
  fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot-social{display:flex;gap:10px;margin-top:24px}
.foot-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.05);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s ease,border-color .25s ease}
.foot-social a svg{width:17px;height:17px;fill:var(--muted);transition:fill .25s ease}
.foot-social a:hover{transform:translateY(-3px) scale(1.08);
  background:rgba(var(--lamp-rgb),.14);border-color:rgba(var(--lamp-rgb),.45)}
.foot-social a:hover svg{fill:var(--lamp)}

/* colunas de links */
.foot-tit{font:var(--t-label);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col a{color:var(--text);text-decoration:none;font-size:14.5px;
  width:fit-content;transition:color .18s}
.foot-col a:hover{color:var(--lamp)}
.foot-col p{font-size:13.5px}

/* chamada final do rodapé */
.foot-call{font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:600;
  letter-spacing:-.015em;color:var(--text);margin-bottom:10px}
.foot-cta p{font-size:14px;max-width:30ch}
.foot-cta .btn{margin-top:20px}

/* linha de baixo */
.foot-base{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:54px;padding-top:26px;border-top:1px solid rgba(255,255,255,.07)}
.foot-base p{font-size:13px}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:38px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- botão flutuante do WhatsApp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:120;
  display:flex;align-items:center;gap:0;overflow:hidden;
  height:58px;width:58px;padding:0 17px;border-radius:100px;
  text-decoration:none;color:var(--ink);
  background:linear-gradient(140deg,var(--lamp),var(--warm) 58%,var(--warm-deep));
  background-origin:border-box;background-repeat:no-repeat;
  border:1px solid transparent;
  box-shadow:0 14px 34px -10px rgba(var(--warm-rgb),.90);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.9);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),
             visibility .3s,width .28s cubic-bezier(.2,.7,.3,1)}
.wa-float.show{opacity:1;visibility:visible;transform:none}
.wa-float svg{width:26px;height:26px;flex:none;fill:var(--ink);margin-left:-1px}
.wa-float span{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14.5px;
  white-space:nowrap;opacity:0;transition:opacity .2s ease .05s;padding-left:11px}
.wa-float:hover{width:225px}
.wa-float:hover span{opacity:1}
.wa-float::after{content:'';position:absolute;inset:-1px;border-radius:100px;
  border:1px solid rgba(var(--lamp-rgb),.55);animation:pulsoPodio 2.8s ease-out infinite}
@keyframes pulsoPodio{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.35);opacity:0}}
@media(max-width:620px){
  .wa-float{right:16px;bottom:16px}
  .wa-float:hover{width:58px}
  .wa-float:hover span{opacity:0}
}

/* ==========================================================
   TELAS MENORES — o que é de bloco mora aqui
   Estas regras estavam no 01-base.css e não funcionavam: media query
   não aumenta a força da regra, e este arquivo carrega depois dele.
   O pior efeito era o .g3 nunca virar uma coluna, deixando três cards
   lado a lado num celular.
   ========================================================== */
@media(max-width:900px){
  .g3,.g2{grid-template-columns:1fr}
  .hero{padding:150px 0 72px}
  .final{padding:48px 26px}
}

/* ==========================================================
   CELULAR — ajustes de bloco
   O recheio interno de cada card cai para ~22px. Com 34px, num
   aparelho de 375px sobravam 263px de texto; agora sobram 295px.
   ========================================================== */
@media(max-width:620px){
  /* Sem isto o título estoura a lateral: a linha em degradê tem
     white-space:nowrap por padrão e não cabe em 375px. */
  .hero h1 em{white-space:normal}
  .final{padding:40px 20px}
  /* A tarja do topo não cabia em uma linha e quebrava no meio */
  .pill{font-size:10.5px;letter-spacing:.08em;padding:7px 14px;margin-bottom:24px}
  /* topo */
  .nav{padding:9px 9px 9px 16px}
  .marca{font-size:23px}
  .nav .btn{padding:9px 15px;font-size:12.5px}

  /* abertura */
  .hero{padding:118px 0 56px}
  .hero .lead{font-size:16.5px}
  .hero-cta{flex-direction:column;gap:10px;margin:30px 0 18px}
  .hero-cta .btn{width:100%}

  /* cards e blocos */
  .card{padding:24px 22px}
  .proof-body{padding:22px 22px 26px}
  .ad-col{padding:22px 20px 28px}
  .step{padding:22px 20px}
  .gift{padding:26px 22px}
  .plan,.lugar-1 .plan{padding:26px 22px}
  .plan-price{font-size:34px}
  .person{padding:24px 22px}
  .faq details{padding:2px 20px}
  .faq summary{font-size:15.5px;padding:18px 0}

  /* a marca-d'água precisa caber na largura do celular */
  .final .final-mark{font-size:clamp(52px,17vw,76px)}
}

/* ---------- cursor: ponto de ouro + anel ----------
   O ponto é INSTANTÂNEO e substitui a seta; o anel é que vem atrás.
   Antes existia um elemento só, e era ele que corria atrás do cursor —
   por isso a sensação de atraso. Agora o atraso é do anel, de propósito.
   Os dois são criados pelo config.js, e só no computador. */
.cursor-ponto,.cursor-anel{position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:300;opacity:0;will-change:transform;
  transition:opacity .3s ease,width .22s cubic-bezier(.2,.7,.3,1),
             height .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,background .22s ease}
/* O ponto tem tamanho fixo: ele é a seta, e seta não muda de tamanho.
   Quem reage ao conteúdo é só o anel de fora. */
.cursor-ponto{width:5px;height:5px;background:var(--ouro);
  box-shadow:0 0 10px 1px rgba(var(--ouro-rgb),.70)}
.cursor-anel{width:34px;height:34px;border:1.5px solid var(--lamp)}
.cursor-ponto.acesa,.cursor-anel.acesa{opacity:1}
/* Sobre algo clicável, só o anel abre e fica dourado */
.cursor-anel.perto{width:54px;height:54px;border-color:var(--ouro);
  background:rgba(var(--ouro-rgb),.10)}

/* A seta nativa só some DEPOIS que o cursor customizado existe. A classe vem
   do config.js — se o JS falhar, o visitante não fica sem cursor nenhum.
   Campos de texto mantêm o cursor do sistema, onde ele informa mais. */
html.cursor-proprio,html.cursor-proprio *{cursor:none}
html.cursor-proprio input,html.cursor-proprio textarea,html.cursor-proprio select{cursor:auto}

/* ==========================================================
   AJUSTES DE CELULAR
   Tudo aqui vive abaixo de 900px e não toca na versão de
   computador, que foi conferida pixel a pixel.
   ========================================================== */
@media(max-width:900px){

  /* 1. Card de caso abre onde está.
     O order:-1 joga o card aberto para o topo da grade. No computador isso
     faz sentido, porque a grade tem três colunas e o card em foco sobe para
     a linha inteira. No celular a grade é uma coluna só: o card que a pessoa
     tocou salta para longe do dedo e ela perde a referência. */
  .caso[open]{order:0}

  /* 2. Antes e Depois.
     Empilhados, o "Antes" vinha em cima, aceso e com a tarja vermelha
     brilhando, enquanto o "Depois" ficava rebaixado em .78 de opacidade.
     A leitura terminava no problema, não na solução. Agora os dois vêm
     inteiros e o destaque é do "Depois", que é o que a marca vende. */
  .ad-col{opacity:1}
  /* O .ativa vem do HTML no "Antes" e sua regra tem peso maior que um
     seletor simples, então aqui é preciso repetir a classe para vencer. */
  .ad-antes .ad-tab,.ad-antes.ativa .ad-tab{
    background:rgba(var(--red-rgb),.14);color:var(--alert);
    border:1px solid rgba(var(--red-rgb),.42);box-shadow:none}
  .ad-antes ul li,.ad-antes.ativa ul li{color:var(--muted)}
  .ad-depois .ad-tab,.ad-depois.ativa .ad-tab{
    background:var(--grad);color:var(--ink);border-color:transparent;
    box-shadow:0 10px 26px -8px rgba(var(--warm-rgb),.55)}
  .ad-depois ul li,.ad-depois.ativa ul li{color:var(--text)}

  /* 3. Cards das frentes: menos peso, mais ar entre eles. */
  .g3,.g2{gap:16px}
  .card{padding:26px 22px}
  .card ul{margin-top:14px;gap:7px}
  .card p{font-size:15px}

  /* 4. O brilho do bloco do site incluso.
     Ele é uma mancha à direita, pensada para duas colunas. Numa coluna só
     vira uma divisa vertical no meio do card, com metade escura e metade
     verde. Reposicionado para o alto, onde se lê como luz e não como corte. */
  .gift::before{top:-40%;right:-30%;width:150%;height:120%;
    background:radial-gradient(circle at 50% 40%,rgba(var(--lamp-rgb),.16),transparent 62%)}

  /* 5. Rodapé enxuto.
     No celular o rodapé virava uma segunda página inteira, e ninguém rola
     até o fim de um rodapé. Fica só o essencial: marca, onde fica, como
     falar e o copyright.

     O que sai, e por quê:
     · navegação — o hambúrguer já cobre, repetir cinco links só alonga
     · descrição da agência — a página inteira acabou de dizer isso
     · chamada "Pronto para aparecer primeiro?" — o BLOCO 11, logo acima,
       é exatamente essa chamada. Duas seguidas cansam em vez de converter
     · horário de atendimento — detalhe de suporte, não de decisão */
  .foot-grid{gap:26px}
  .foot-col.foot-nav{display:none}
  .foot-brand>p:not(.foot-local){display:none}
  .foot-cta{display:none}
  .foot-col>p:last-child{display:none}
  footer{padding-top:44px;margin-top:24px}
  .foot-brand{gap:14px}
  .foot-base{margin-top:26px;padding-top:20px}
  .foot-base p:last-child{display:none}

  /* 7. Botões empilhados do hero.
     O halo do botão verde é lançado 12px para baixo com 34px de raio, o que
     o faz avançar cerca de 24px. Com apenas 10px de vão entre os dois
     botões, ele caía dentro do segundo e desenhava ali a silhueta de um
     terceiro botão. Mais espaço, e halo mais curto e centrado. */
  .hero-cta{gap:20px}
  .hero-cta .btn-primary{box-shadow:0 6px 26px -12px rgba(var(--warm-rgb),.85)}

  /* 6. Botão flutuante mais presente, e acima da barra do sistema. */
  .wa-float{width:64px;height:64px;right:18px;
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
    box-shadow:0 16px 40px -8px rgba(var(--warm-rgb),.95)}
  .wa-float svg{width:30px;height:30px}

  /* Folga no fim da página para o botão flutuante.
     Ele é fixo: no fim da rolagem ficava por cima da última linha do rodapé,
     que terminava exatamente onde ele começa. Sem esta folga não existe
     lugar reservado para ele, e o copyright ficava escondido atrás. */
  footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}