/* ============================================================================
   SIMOB · landing — CENAS, PALCO E COREOGRAFIA
   Terceira e ÚLTIMA folha da cascata (ver cabeçalho de estilo.css):
     1. tokens-ponte.css → paleta      2. estilo.css → vidro      3. AQUI

   Onda 3 / A12: este arquivo é a fusão dos TRÊS blocos <style> que viviam
   dentro do index.html e brigavam por especificidade entre si e com o
   estilo.css (havia comentário admitindo a briga: "especificidade (0,3,2):
   vence..."). A fusão foi feita mantendo o valor EFETIVO de cada propriedade —
   as declarações que já perdiam a cascata foram removidas, não reescritas.

   Cor: nunca literal quando existir token. Os `rgba(...)` que sobraram são
   VÉUS e BRILHOS (alfa sobre vidro) — mantidos literais de propósito nesta
   passada; virar token exigiria varrer ~60 declarações sem ganho para o
   visitante. Registrado em docs/17 como dívida consciente.
   ========================================================================== */

/* ── NAV-ILHA ────────────────────────────────────────────────────────────────
   Uma definição só. A jornada é cinematográfica e ESCURA por natureza: a nav
   se compromete com o vidro escuro nos DOIS temas (ilha escura sobre página
   clara é elegante; ilha branca sobre o filme escuro destoava — feedback do
   Guilherme). Cores fixas aqui DE PROPÓSITO: dentro da nav, o tema não manda. */
nav.topo{position:fixed;z-index:50;display:flex;align-items:center;justify-content:space-between;
  top:14px;left:50%;right:auto;transform:translateX(-50%);
  width:min(1100px,calc(100% - 32px));padding:12px 22px;border-radius:22px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(10,14,26,.62);backdrop-filter:blur(16px) saturate(1.2);
  transition:width .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1),
    border-radius .45s, padding .45s, background .45s, box-shadow .45s, border-color .45s}
/* ao rolar: vira ilha compacta e arredondada — a logo permanece */
nav.topo.compacta{top:12px;width:min(660px,calc(100% - 28px));border-radius:99px;
  box-shadow:0 14px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1)}

nav.topo .marca{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:#F4F6FB; /* currentColor dos traços </> do logo */
  font-family:var(--f-display);font-size:1.25rem;font-weight:200;letter-spacing:.18em}
nav.topo .logo-nav{height:30px;width:auto;display:block;transition:height .45s}
nav.topo.compacta .logo-nav{height:24px}
nav.topo .marca-txt{font-family:'Montserrat',var(--f-body);font-weight:200;font-size:1.15rem;
  letter-spacing:.3em;color:#F4F6FB;transition:font-size .45s}
nav.topo.compacta .marca-txt{font-size:.95rem}

nav.topo .links{display:flex;gap:26px;align-items:center;font-size:.88rem;color:#B8C0D4}
/* nowrap: com QUATRO alvos na ilha (marca + 3 links) o celular não pode quebrar
   "Peça seu acesso" em duas linhas. No desktop não muda nada — já não quebrava.
   O piso de toque mora na media query de mobile, e vem do token: subir o piso
   para cá deixaria a nav-ilha 10px mais alta no desktop (medido), e a ilha é
   identidade, não sobra de layout — evoluir ≠ trocar. */
nav.topo .links a{color:inherit;text-decoration:none;transition:color .2s;
  white-space:nowrap}
nav.topo .links a:hover{color:#F4F6FB}
nav.topo .links a.cta-mini{padding:8px 18px;border-radius:99px;
  background:#F4F6FB;color:#0B0F1A;font-weight:600;text-decoration:none;font-size:.85rem;
  transition:transform .2s}
nav.topo .links a.cta-mini:hover{transform:scale(1.04)}
nav.topo .links a:focus-visible,nav.topo .marca:focus-visible{
  outline:2px solid var(--ceu);outline-offset:4px;border-radius:6px}

/* indicador de rolagem */
#progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--acento),var(--ia));transform-origin:0 50%;
  transform:scaleX(0)}

/* ── CENAS DO SCROLL-TELLING ─────────────────────────────────────────────── */
.cena{position:relative;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.cena video,.cena .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.veu{position:absolute;inset:0;z-index:1;background:
  radial-gradient(130% 85% at 50% 100%, rgba(7,9,15,.88), rgba(7,9,15,.28) 55%, rgba(7,9,15,.15))}
.conteudo{position:relative;z-index:2;text-align:center;max-width:980px;padding:0 24px}
.linha-txt{display:block}
.texto-scrub{opacity:0;transform:translateY(34px)}
.texto-scrub.inicio{opacity:1;transform:none}
/* card de vidro em volta dos textos das cenas */
.cena .texto-scrub{
  display:inline-block;padding:24px 38px;border-radius:22px;
  background:rgba(9,13,25,.36);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  will-change:transform,opacity;
}
.cena h1.texto-scrub{padding:30px 48px;border-radius:26px}
.cena .texto-scrub .sub{margin-top:10px}
.cena .conteudo .texto-scrub + .texto-scrub{margin-top:14px}

.badge{display:inline-flex;gap:8px;align-items:center;margin-top:18px;padding:8px 16px;border-radius:999px;
  background:rgba(139,123,216,.12);border:1px solid rgba(139,123,216,.4);color:var(--ia-claro);font-size:.85rem}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ia);box-shadow:0 0 12px var(--ia)}

/* ── ANIMAÇÃO-ASSINATURA DO HERO (estilo lottie, transparente) ──────────── */
.anima-match{display:block;width:min(260px,52vw);margin:0 auto 16px;
  filter:drop-shadow(0 4px 22px rgba(98,168,220,.25))}
.anima-match .am-trilha{animation:am-viaja 3.2s linear infinite}
@keyframes am-viaja{to{stroke-dashoffset:-44}}
/* o cometa percorre a MESMA trilha (offset-path) com rastro de brilho */
.anima-match .am-cometa{
  offset-path:path('M88 36 C 118 20, 146 52, 176 36 S 222 28, 232 34');
  offset-rotate:0deg;
  filter:drop-shadow(0 0 6px rgba(207,198,242,.9));
  animation:am-percorre 3.2s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes am-percorre{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  82%{offset-distance:100%;opacity:1}
  92%,100%{offset-distance:100%;opacity:0}}
.anima-match .am-casa{animation:am-respira 3.2s ease-in-out infinite}
.anima-match .am-pessoa{animation:am-respira 3.2s ease-in-out 1.6s infinite}
@keyframes am-respira{50%{opacity:.8}}
.anima-match .am-pulso{opacity:0;transform-origin:272px 40px;
  animation:am-pulsa 3.2s ease-out infinite}
@keyframes am-pulsa{0%,78%{opacity:0;transform:scale(.5)}86%{opacity:.6}100%{opacity:0;transform:scale(1.4)}}

/* ── PINTURA EM DEGRADÊ DAS PALAVRAS-CHAVE (primeiros scrolls do hero) ──── */
.pinta{position:relative;display:inline-block}
.pinta .pinta-cor{position:absolute;inset:0;font-style:normal;pointer-events:none;
  background:var(--degrade-chave);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(-10% 100% -10% 0%)}
/* o hero precisa de respiro da nav flutuante — o card nunca nasce por baixo dela */
#hero .conteudo{padding-top:104px}
@media (max-width:640px){ #hero .conteudo{padding-top:84px} }

/* ── PONTOS DE INTERESSE (callouts do tour) ──────────────────────────────── */
.ponto{position:absolute;z-index:2;opacity:0;transform:translateY(14px);pointer-events:none}
.ponto .p-dot{width:12px;height:12px;border-radius:50%;background:var(--ceu);
  box-shadow:0 0 0 4px rgba(98,168,220,.25), 0 0 18px rgba(98,168,220,.8);
  animation:p-pulsa 2s ease-out infinite}
@keyframes p-pulsa{50%{box-shadow:0 0 0 9px rgba(98,168,220,.12), 0 0 22px rgba(98,168,220,.9)}}
.ponto .p-rotulo{margin-top:10px;padding:8px 14px;border-radius:12px;font-size:.82rem;
  color:#F4F6FB;background:rgba(9,13,25,.55);backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12)}
/* rótulo à ESQUERDA do dot (pontos perto da borda direita) */
.ponto.rotulo-esq .p-rotulo{transform:translateX(calc(-100% + 18px))}
/* variante QUADRADO (detecção AR do quintal) */
.ponto.quadro .p-dot{display:none}
.ponto.quadro .p-area{border:2px solid rgba(98,168,220,.85);border-radius:14px;
  box-shadow:0 0 0 1px rgba(9,13,25,.35), inset 0 0 30px rgba(98,168,220,.12);
  animation:q-varre 2.6s ease-in-out infinite}
@keyframes q-varre{50%{border-color:rgba(139,123,216,.85)}}
.ponto.quadro .p-rotulo{display:inline-block}

/* ── PALCO GIRATÓRIO DO PRODUTO (capítulos girando em cena) ──────────────── */
.palco{background:var(--fundo)}
.palco .palco-fundo{position:absolute;inset:0;z-index:0;background:
  radial-gradient(70% 55% at 30% 20%, rgba(79,125,240,.14), transparent 65%),
  radial-gradient(60% 50% at 75% 75%, rgba(139,123,216,.12), transparent 65%)}
.palco-conteudo{max-width:900px}
.palco-titulo{margin-bottom:34px}
.giro-palco{position:relative;height:min(400px,50svh);perspective:1300px}
/* frase de abertura do palco: um respiro antes do primeiro capítulo girar */
.palco-frase{position:absolute;inset:0 0 40px 0;display:flex;flex-direction:column;
  justify-content:center;gap:12px;text-align:center;padding:0 6%;
  opacity:0;transform:translateY(30px);will-change:transform,opacity}
.palco-frase p{font-family:var(--f-display);font-size:clamp(1.5rem,3.6vw,2.3rem);
  line-height:1.25;margin:0}
.palco-frase .pf-2{font-size:clamp(1.1rem,2.4vw,1.5rem);opacity:.85}
/* palavra-chave colorida: o MESMO degradê da pintura do hero, sempre aceso */
.grad-chave{font-style:normal;font-weight:inherit;
  background:var(--degrade-chave);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.giro-card p b{font-weight:700;background:var(--degrade-b);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* os 6 capítulos ficam ABSOLUTOS, uma face por vez no giro (o .vidro do
   estilo.css é position:relative — a exceção mora aqui, no fim da cascata) */
.giro-card{position:absolute;inset:0 0 40px 0;margin:auto;max-width:640px;
  display:flex;flex-direction:column;justify-content:center;text-align:left;
  padding:34px 42px;opacity:0;transform:rotateY(70deg);overflow:hidden;
  /* sem preserve-3d/backface: dentro de seção PINADA (transform) o Chromium
     às vezes não pinta o contexto 3D — e nenhum dos dois é necessário aqui */
  will-change:transform,opacity}
.giro-card > *{position:relative;z-index:1}
/* imagem temática do capítulo: ancorada no canto ESQUERDO, esmaecendo
   para o vidro — o texto respira à direita, sobre a área limpa.
   (0,2,0) para vencer o brilho .vidro::before do estilo.css) */
.giro-palco .giro-card::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--img) left center/cover no-repeat;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 30%,transparent 58%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.45) 30%,transparent 58%);
  pointer-events:none}
.giro-palco .giro-card{padding-left:clamp(160px,34%,240px)}
@media(max-width:640px){
  .giro-palco .giro-card{padding-left:22px}
  .giro-palco .giro-card::before{
    -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.4) 0%,transparent 55%);
    mask-image:linear-gradient(100deg,rgba(0,0,0,.4) 0%,transparent 55%)}
}
.giro-card .g-n{font-family:var(--f-mono);font-size:.8rem;color:var(--acento);
  letter-spacing:.2em;display:block;margin-bottom:10px}
/* ⚠ ACHADO DA CONSOLIDAÇÃO (Onda 3 · docs/17): esta regra vinha PERDENDO para
   o `.vidro h3` do estilo.css — mesma especificidade (0,1,1), folha carregada
   depois. Ou seja: os títulos dos 6 capítulos NUNCA renderizaram no
   clamp(1.5rem…2.2rem) que o autor escreveu; o que está no ar é 1.05rem/600 do
   vidro genérico (só font-family e letter-spacing daqui passavam).
   Com a cascata arrumada, esta folha vence — então os valores efetivos foram
   FIXADOS aqui de propósito, para a consolidação não mudar pixel nenhum.
   DECISÃO PARA O GUILHERME: subir os títulos para o display serifado de 2,2rem
   custa +190 px de pin no palco (~0,24 tela) e é uma mudança de desenho —
   trocar o `1.05rem/600` abaixo pelo `clamp(1.5rem,3.4vw,2.2rem)/560` e o
   `margin-bottom` por 14px reativa a intenção original. */
.giro-card h3{font-family:var(--f-display);font-size:1.05rem;
  font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.giro-card .g-desc{color:var(--tinta-2);line-height:1.6;font-size:1rem;
  opacity:0;transform:translateY(16px)}
.giro-card .g-desc-2{margin-top:8px}
/* ── PONTOS DE CAPÍTULO ──────────────────────────────────────────────────────
   Medido em produção (2026-08-30): o alvo era 26px — um `::after{inset:-9px}`
   sobre um ponto de 8px — nos DOIS tamanhos, desktop e celular. O piso da casa
   é --toque-minimo. Passou meses invisível porque o token não chegava aqui.

   POR QUE O ALVO VIROU O PRÓPRIO BOTÃO, e não um ::after maior:
   6 alvos de 44px lado a lado só NÃO se sobrepõem se o passo entre centros for
   44px — é aritmética, não gosto. Com o ::after ainda havia um segundo
   problema: o capítulo ativo recebe `scale(1.35)` (tween do GSAP), e um ::after
   escalado junto viraria um alvo de 59px invadindo ~8px do vizinho de cada
   lado — tocar ao lado do ponto ativo reabriria o capítulo ativo. Por isso o
   botão passou a ser a CAIXA de 44px e o ponto visível virou um <i> interno:
   o GSAP escala o <i>, o alvo fica firme. O ponto continua com 8px — o desenho
   não engordou, só o alvo. `gap:0` porque a caixa JÁ é o passo de 44px.
   margin-top cai de 26 para 8 porque o ponto agora flutua no meio de 44px:
   o espaço VISÍVEL até o palco continua o mesmo. */
.giro-dots{--giro-ponto:8px;display:flex;gap:0;justify-content:center;margin-top:8px}
.giro-dots button{width:var(--toque-minimo);height:var(--toque-minimo);
  display:grid;place-items:center;border-radius:50%;
  background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
/* o ponto visível — é ELE que o GSAP acende, apaga e escala */
.giro-dots button > i{display:block;
  width:var(--giro-ponto);height:var(--giro-ponto);border-radius:50%;
  background:var(--linha);transition:background .3s, transform .3s}
/* o anel de foco abraça o PONTO, não a caixa invisível de 44px — mesmo
   desenho de antes, agora desenhado no filho */
.giro-dots button:focus-visible{outline:none}
.giro-dots button:focus-visible > i{outline:2px solid var(--acento);outline-offset:5px}
.giro-dots button.ativo > i{background:var(--acento);transform:scale(1.35);
  box-shadow:0 0 12px rgba(79,125,240,.7)}
@media(max-width:640px){.giro-card{padding:24px 22px}.giro-palco{height:min(380px,52svh)}}

/* ── CENA DO MATCH (pessoa digitando → casas com características) ────────── */
.compose{display:inline-block;text-align:left;min-width:min(520px,86vw);padding:18px 22px;border-radius:18px;
  background:rgba(9,13,25,.6);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 70px rgba(0,0,0,.45)}
.compose .c-tag{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;color:#8B94AB;
  text-transform:uppercase;display:block;margin-bottom:8px}
.compose .c-txt{font-size:1.05rem;line-height:1.55;color:#F4F6FB;min-height:3.2em}
.compose .c-txt::after{content:"▌";color:var(--ceu);animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.matches{display:grid;gap:12px;margin-top:18px;grid-template-columns:1fr;max-width:min(520px,86vw);
  perspective:900px}
.match-card{display:flex;gap:14px;align-items:center;text-align:left;padding:12px 16px;border-radius:16px;
  background:rgba(9,13,25,.55);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(26px) scale(.96);
  box-shadow:0 16px 44px rgba(0,0,0,.4);color:#F4F6FB;
  /* microinteração (Onda 3): o GSAP é dono do `transform` destes cards
     (entrada em 3D no scrub), então o hover NÃO pode usar transform — a
     resposta vem por brilho e borda, com curva de sobressinal (física) */
  transition:box-shadow .32s cubic-bezier(.34,1.4,.64,1),
             border-color .32s cubic-bezier(.34,1.4,.64,1), background .3s}
.match-card:hover{background:rgba(14,20,36,.66);border-color:rgba(98,168,220,.55);
  box-shadow:0 22px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(98,168,220,.28),
             0 0 40px rgba(98,168,220,.14)}
.match-card .foto{width:68px;height:68px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,#4F7DF0,#E8A05C 130%);
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.match-card .t{font-weight:600;font-size:.95rem;color:#F4F6FB}
.match-card .checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.match-card .ck{font-size:.7rem;padding:3px 9px;border-radius:99px;color:var(--ck);
  background:rgba(90,200,130,.12);border:1px solid rgba(90,200,130,.4)}
/* a linha-ponte fecha o match perto da borda — respiro pra dica
   "role para continuar" não nascer por cima dela */
#match .conteudo{padding-bottom:64px}

/* ── TINTA FIXA DAS CENAS DE FILME (vale nos DOIS temas) ─────────────────────
   Os cards/chips das cenas têm vidro escuro fixo, então a tinta é clara fixa:
   no tema claro, --tinta-2 escurecia e o texto sumia no vidro (feedback do
   Guilherme). O CTA dentro da cena segue o mesmo princípio (auditoria A4). */
.cena:not(.palco) .sub{color:#B8C0D4}
.cena:not(.palco) .cta{background:#F4F6FB;color:#0B0F1A}
.cena:not(.palco) .cta:hover{box-shadow:0 18px 50px rgba(244,246,251,.18)}

/* ── DICA QUE NASCE NO BREAK DO FIM DE CADA CENA COREOGRAFADA ────────────── */
.role-continua{position:absolute;bottom:26px;left:0;right:0;text-align:center;z-index:2;
  opacity:0;pointer-events:none;color:#8B94AB;font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
/* tinta clara FIXA nos dois temas: a seta vive sobre o filme escuro */
.seta{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:#8B94AB;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  animation:flutua 2.4s ease-in-out infinite}
@keyframes flutua{50%{transform:translate(-50%,8px)}}

/* ── MOCKUP DO APP (cena da abertura) ────────────────────────────────────── */
.app-mock{position:relative;z-index:2;width:min(350px,82vw);margin-top:26px;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#10162B,#0A0F1F);border:1px solid rgba(124,160,218,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.65);opacity:0;transform:scale(.82) translateY(60px)}
.app-mock .topo{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--linha)}
.app-mock .m{font-family:'Montserrat',sans-serif;font-weight:200;letter-spacing:.18em;font-size:1.05rem}
.app-mock .chip{font-size:.66rem;padding:4px 10px;border-radius:99px;background:rgba(139,123,216,.16);color:var(--ia-claro)}
.card-imovel{display:flex;gap:12px;padding:12px 14px;margin:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--linha);text-align:left}
.card-imovel:last-child{margin-bottom:16px}
.card-imovel .foto{width:70px;height:70px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--acento),var(--quente) 130%)}
.card-imovel .t{font-size:.88rem;font-weight:600}
.card-imovel .d{font-size:.74rem;color:var(--tinta-2);margin-top:3px;line-height:1.45}
.card-imovel .ia-tag{font-size:.64rem;color:var(--ia-claro);margin-top:5px}

/* ── SEÇÕES DE PRODUTO (pós-jornada) ─────────────────────────────────────── */
.produto{position:relative;background:var(--fundo);padding:120px 24px}
.produto .wrap{max-width:1080px;margin:0 auto}

/* cena FUNDIDA (abertura+IA): os dois beats ocupam a MESMA área — o que não
   está em cena fica invisível sem empurrar o layout (Onda 2/A7) */
.conteudo.troca{display:grid;justify-items:center;align-items:center}
.conteudo.troca>*{grid-area:1/1}

/* ── CONFIANÇA: três pactos + convite (Onda 2/A9) — seção ESTÁTICA de
   propósito: depois do palco, a página respira antes do pedido.
   Só verdades do produto, na língua de negócio da própria página. ──────── */
.confianca{text-align:center}
.confianca .conf-titulo{font-size:clamp(1.7rem,4vw,2.6rem)}
.conf-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;margin-top:44px;text-align:left;perspective:1100px}
/* ⚠ MESMO ACHADO: `.conf-card .corpo{padding:28px 26px}` também perdia para o
   `.vidro>.corpo{padding:34px 30px}` do estilo.css — o cartão de confiança
   sempre respirou 34/30. A regra morta foi REMOVIDA (em vez de "consertada")
   para a consolidação não mexer no que está no ar. Se o padding menor for o
   desejado, ele precisa nascer com especificidade maior e revisão de layout. */
/* microinteração (Onda 3): os três cartões são ESTÁTICOS (nenhum GSAP toca o
   transform deles), então aqui a física pode ser de verdade — inclinação
   sutil seguindo o ponteiro, escrita pelo JS em --incl-x/--incl-y. A classe
   .ima só entra quando há movimento permitido; sem ela vale o .vidro:hover. */
/* curva CURTA aqui: o cartão acompanha o ponteiro, não quica atrás dele —
   o sobressinal do `.vidro` continua valendo para sombra e fundo */
.conf-card.ima{transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s}
/* A inclinação só existe DENTRO do :hover, e não no estado de repouso, de
   propósito: `transform` permanente (mesmo identidade) promove o cartão a
   camada e troca a suavização do texto por escala de cinza — num cartão que é
   quase só texto isso se nota. Fora do hover, transform volta a `none`.
   Elevação e escala repetem as do `.vidro:hover`: a inclinação SOMA, não troca. */
.conf-card.ima:hover{transform:rotateX(var(--incl-x,0deg)) rotateY(var(--incl-y,0deg))
  translateY(-4px) scale(1.008)}
.conf-ctas{display:flex;gap:14px;justify-content:center;align-items:center;
  flex-wrap:wrap;margin-top:48px}
.conf-ctas .cta{margin-top:0}
.cta-calmo{padding:16px 32px;border-radius:99px;border:1px solid var(--linha);
  color:var(--tinta-2);text-decoration:none;font-weight:600;font-size:.98rem;
  transition:color .2s,border-color .2s,transform .2s}
.cta-calmo:hover{color:var(--tinta);border-color:var(--tinta-3);transform:translateY(-2px)}

/* magnetismo do CTA (Onda 3): o botão desloca-se na direção do ponteiro quando
   ele chega perto. Só o CTA marcado com .ima entra na brincadeira — sem JS,
   sem movimento permitido ou no toque, vale o `.cta:hover` do estilo.css.
   `.perto` é posta e tirada pelo JS: fora do raio o botão volta a
   `transform:none` (o mesmo cuidado com rasterização de texto do .conf-card). */
.cta.ima{transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s}
.cta.ima.perto{transform:translate3d(var(--ima-x,0px),calc(var(--ima-y,0px) + var(--ima-sobe,0px)),0)}
.cta.ima.perto:hover{--ima-sobe:-3px}

.fim{text-align:center;padding:140px 24px}
.fim h2{font-size:clamp(2rem,5.5vw,4rem)}

footer{border-top:1px solid var(--linha);padding:36px 28px;display:flex;justify-content:space-between;
  align-items:center;color:var(--tinta-3);font-size:.82rem;flex-wrap:wrap;gap:12px}
footer .marca{font-family:'Montserrat',sans-serif;font-weight:200;letter-spacing:.18em;
  color:var(--tinta-2);font-size:1rem}

/* ── SPLASH DE LOADING — a casa do logo se desenhando ────────────────────── */
#splash{position:fixed;inset:0;z-index:100;background:#07090F;display:grid;place-items:center;
  transition:opacity .7s ease, visibility .7s}
#splash.some{opacity:0;visibility:hidden}
#splash svg{width:min(340px,60vw)}
#splash .traco{stroke-dasharray:900;stroke-dashoffset:900;animation:desenha 2.2s ease forwards}
#splash .traco.t2{animation-delay:.3s}
#splash .traco.t3{animation-delay:.55s}
#splash .marca-splash{font-family:'Montserrat',sans-serif;font-weight:200;font-size:2rem;
  letter-spacing:.42em;color:#F4F6FB;text-align:center;margin-top:22px;opacity:0;
  animation:surge 1s ease 1.2s forwards}
#splash .tag-splash{font-family:'Montserrat',sans-serif;font-weight:300;font-size:.72rem;
  letter-spacing:.34em;color:var(--ceu);text-align:center;margin-top:10px;opacity:0;
  animation:surge 1s ease 1.6s forwards}
@keyframes desenha{to{stroke-dashoffset:0}}
@keyframes surge{to{opacity:1}}
/* barra de carregamento do vídeo dentro do splash */
#splash .carrega{width:min(280px,50vw);height:2px;margin:26px auto 0;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;opacity:0;animation:surge .8s ease 1.9s forwards}
#splash .carrega i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ceu),var(--ia));transition:width .3s ease}
#splash .pct{font-family:'Montserrat',sans-serif;font-weight:300;font-size:.68rem;
  letter-spacing:.28em;color:#8B94AB;text-align:center;margin-top:12px;opacity:0;
  animation:surge .8s ease 2.1s forwards}
/* depois de desenhada, a casa respira — nunca fica estática */
#splash svg{animation:respira 2.6s ease-in-out 2.4s infinite}
@keyframes respira{
  0%,100%{filter:drop-shadow(0 0 0px rgba(98,168,220,0))}
  50%{filter:drop-shadow(0 0 18px rgba(98,168,220,.55))}
}

/* ── MOBILE: jornada confortável em tela pequena ─────────────────────────── */
@media (max-width:640px){
  /* O TOPO INTEIRO SOBREVIVE AO CELULAR (correção do dono, 2026-08-30).
     A auditoria A4 tinha escondido "Entrar" no mobile e deixado só "Produto"
     + o CTA. O efeito no iPhone era grave: quem JÁ é cliente não tinha porta
     nenhuma no topo — só rolar o filme inteiro até o rodapé. Quem já é cliente
     não pode ter só o caminho de quem ainda não é. Os três destinos voltam:
     conhecer (Produto) · entrar (Entrar) · pedir acesso (CTA). */
  nav.topo{top:10px;width:calc(100% - 16px);padding:10px 16px;border-radius:18px}
  nav.topo.compacta{width:calc(100% - 34px);border-radius:99px}
  nav.topo .logo-nav{height:28px}
  nav.topo.compacta .logo-nav{height:24px}
  nav.topo .links{gap:10px;font-size:.8rem}
  nav.topo .marca-txt{font-size:1rem}
  /* ALVO DE TOQUE — vem do TOKEN (--toque-minimo, folha 0 da cascata), nunca de
     um `44px` escrito à mão. Era exatamente assim que a landing envelhecia
     sozinha: o piso vivia copiado aqui dentro, e quando o token da casa mudasse
     ninguém viria corrigir esta linha. Agora vale para os TRÊS links. */
  nav.topo .links a{display:inline-flex;align-items:center;min-height:var(--toque-minimo)}
  nav.topo .links a:not(.cta-mini){padding:0 6px}
  nav.topo .links a.cta-mini{padding:0 14px;font-size:.76rem}

  .conteudo{padding:72px 14px 56px;max-width:100%}
  .cena .texto-scrub{padding:16px 22px;border-radius:16px}
  .cena h1.texto-scrub{padding:20px 26px;border-radius:18px}
  h1{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  h2{font-size:clamp(1.25rem,6vw,1.7rem)}
  .sub{font-size:.92rem}
  .app-mock{width:min(300px,88vw);margin-top:18px}
  .produto{padding:80px 18px}
  .fim{padding:100px 18px}
  .seta{bottom:18px;font-size:.6rem}
  .badge{font-size:.72rem;padding:6px 12px}
}

/* ── TELA DE TELEFONE: o SÍMBOLO fica, o NOME cede ───────────────────────────
   Medido a 375px (2026-08-30): com o wordmark em cena sobram 6,5px de folga na
   ilha — não cabe um quarto alvo. Some o NOME, não a porta: o símbolo continua
   desenhando a casa com `</>`, o <a class="marca"> mantém aria-label="SIMOB"
   para quem navega por leitor de tela, e o splash acabou de queimar a marca na
   retina dois segundos antes. Acima de 440px o nome volta inteiro. */
@media (max-width:440px){
  nav.topo .marca-txt{display:none}
}
/* aperto extra só nos telefones mais estreitos (≤360px: Galaxy S8, iPhone SE) —
   sem isto o quarto alvo empurra a ilha para fora da tela */
@media (max-width:360px){
  nav.topo{padding:10px 12px}
  nav.topo .links{gap:6px}
  nav.topo .links a:not(.cta-mini){padding:0 4px}
  nav.topo .links a.cta-mini{padding:0 11px;font-size:.72rem}
}

/* ── TEMA CLARO ──────────────────────────────────────────────────────────────
   A paleta vem da ponte. Aqui só o que é EXCEÇÃO de cena: as cenas de FILME
   têm vidro escuro fixo, então a tinta continua clara nos dois temas (no
   claro, --tinta escurecia e o texto sumia no vidro — feedback do Guilherme). */
@media (prefers-color-scheme: light){
  .cena:not(.palco) .conteudo{color:#F4F6FB}
  .cena:not(.palco) h1,.cena:not(.palco) h2{color:#F4F6FB}
  /* (a cor do .seta saiu daqui em 2026-09-14: a pilula agora e um link com
     dois filhos, e cada um declara a propria cor) */
  .app-mock{background:linear-gradient(180deg,#10162B,#0A0F1F)} /* dark por identidade */
  .card-imovel .t{color:#F4F6FB}

  /* o .vidro genérico fica lavado demais no palco (feedback do Guilherme
     "muito branquinho") — o capítulo ganha vidro com tom, borda viva, sombra
     de verdade e a imagem temática com mais presença */
  .giro-palco .giro-card{
    background:linear-gradient(135deg,#FDFDFF 0%,#EEF1FA 52%,#E7E2F6 100%);
    border:1px solid rgba(79,125,240,.24);
    box-shadow:0 30px 70px rgba(23,32,64,.18),0 3px 10px rgba(23,32,64,.08),
      inset 0 1px 0 rgba(255,255,255,.9)}
  .giro-palco .giro-card::before{
    -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.55) 32%,transparent 62%);
    mask-image:linear-gradient(100deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.55) 32%,transparent 62%)}
  .palco .palco-fundo{background:
    radial-gradient(60% 50% at 22% 24%, rgba(79,125,240,.16), transparent 62%),
    radial-gradient(60% 50% at 75% 75%, rgba(139,123,216,.15), transparent 65%)}
  /* destaques em degradê precisam de stops ESCUROS sobre a foto esmaecida.
     O MESMO par no título e na frase do palco: o degradê claro sobre #F6F7FA
     reprovava AA (~2,4:1) — auditoria A6 */
  .giro-card p b,.palco .grad-chave{background:var(--degrade-sobre-claro);
    -webkit-background-clip:text;background-clip:text}
  .giro-card .g-n{color:var(--acento-sobre-claro)}
}

/* ============================================================================
   FALLBACK ÚNICO: narrativa DEGRADADA MAS COMPLETA (auditoria A2+A3)
   Serve dois públicos com as mesmas regras: quem pede movimento reduzido
   (media query, funciona sem JS) e quem ficou sem GSAP (classe sem-anim posta
   pelo JS quando a biblioteca vendorizada não carrega).
   Regra de ouro: NENHUM conteúdo pode depender de animação pra existir.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  #splash{display:none}
  .texto-scrub,.app-mock,.ponto,.match-card,.g-desc,.palco-frase{opacity:1;transform:none}
  .cena{height:auto;min-height:70vh;padding:100px 0}
  .pinta .pinta-cor{clip-path:none}
  .giro-palco{height:auto;perspective:none}
  .giro-palco .palco-frase{position:relative;inset:auto;margin-bottom:28px}
  .giro-palco .giro-card{position:relative;inset:auto;margin:0 auto 16px;
    opacity:1;transform:none}
  .giro-dots{display:none}
  /* cena fundida: sem animação os beats NÃO se sobrepõem — viram fluxo */
  .conteudo.troca{display:block}
  .conteudo.troca>*+*{margin-top:28px}
  .seta,.ponto .p-dot,.ponto.quadro .p-area,.anima-match .am-trilha,
  .anima-match .am-cometa,.anima-match .am-casa,.anima-match .am-pessoa,
  .anima-match .am-pulso{animation:none}
  .compose .c-txt::after{content:none}
  /* microinterações de Onda 3 também descansam */
  .conf-grade{perspective:none}
  .conf-card.ima,.cta.ima{transform:none;transition:none}
  .match-card:hover{box-shadow:0 16px 44px rgba(0,0,0,.4)}
}
html.sem-anim #splash{display:none}
html.sem-anim .texto-scrub,html.sem-anim .app-mock,html.sem-anim .ponto,
html.sem-anim .match-card,html.sem-anim .g-desc,html.sem-anim .palco-frase{opacity:1;transform:none}
html.sem-anim .cena{height:auto;min-height:70vh;padding:100px 0}
html.sem-anim .pinta .pinta-cor{clip-path:none}
html.sem-anim .giro-palco{height:auto;perspective:none}
html.sem-anim .giro-palco .palco-frase{position:relative;inset:auto;margin-bottom:28px}
html.sem-anim .giro-palco .giro-card{position:relative;inset:auto;margin:0 auto 16px;
  opacity:1;transform:none}
html.sem-anim .giro-dots{display:none}
html.sem-anim .conteudo.troca{display:block}
html.sem-anim .conteudo.troca>*+*{margin-top:28px}
html.sem-anim .compose .c-txt::after{content:none}
html.sem-anim .conf-grade{perspective:none}

/* ═══ CONVITE PARA ROLAR — visível sobre QUALQUER foto ══════════════════════
   Era `.7rem` em `#8B94AB` (literal que duplicava `--tinta-2`), maiúscula com
   .22em: sobre o hero claro, invisível. O dono pediu para CRIAR o que já
   existia — prova de que não alcançava.
   Fundo próprio porque texto sobre foto é imedível: a pílula devolve o
   contraste a um par de cor conhecido. Vira link de verdade, com destino: quem
   clica salta para a explicação em vez de só ser instruído a rolar. */
.seta{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px 18px 12px;border-radius:999px;text-decoration:none;
  /* o fundo segue o TEMA: a landing tem claro e escuro, e um literal escuro
     viraria mancha no claro. `--fundo` inverte junto com `--tinta`, entao o
     par pilula/texto continua em contraste nos dois. */
  background:color-mix(in oklab, var(--fundo) 74%, transparent);
  border:1px solid var(--linha);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:flutua 2.4s ease-in-out infinite}
.seta-texto{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta);font-weight:600}
/* o traço é a SETA: desce, some e volta — a direção dita sem desenhar flecha */
.seta-traco{display:block;width:1px;height:26px;border-radius:1px;
  background:linear-gradient(180deg,var(--tinta),transparent);
  animation:desce 2.4s ease-in-out infinite}
@keyframes desce{0%,100%{opacity:.35;transform:translateY(-4px)}50%{opacity:1;transform:translateY(4px)}}
.seta:hover .seta-texto,.seta:focus-visible .seta-texto{color:var(--quente)}
.seta:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .seta,.seta-traco{animation:none}
}

/* ═══ O RESUMO — a resposta antes da poesia ════════════════════════════════
   Entra ao rolar (GSAP), e sem GSAP aparece inteiro: a opacidade inicial mora
   numa classe que o script ADICIONA, nunca no CSS base. Sem isso, quem chega
   com o script bloqueado veria uma seção em branco — a armadilha clássica de
   animação de entrada. */
.resumo{padding:110px 0 96px}
.resumo-titulo{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--tinta);margin:10px 0 14px}
.resumo-sub{max-width:52ch;color:var(--tinta-2);font-size:1.05rem;line-height:1.6;margin:0 0 38px}
.resumo-grade{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.resumo-item{display:grid;gap:6px;padding-left:16px;border-left:2px solid var(--linha)}
.resumo-item b{color:var(--tinta);font-size:1.02rem;font-weight:600}
.resumo-item span{color:var(--tinta-2);font-size:.95rem;line-height:1.55}
.resumo-pe{margin:38px 0 0;color:var(--tinta-3);font-size:.9rem}
.resumo-oculto{opacity:0;transform:translateY(26px)}