/* SIMOB landing — LINGUAGEM DE VIDRO (a identidade).
   Estética: dark profundo, vidro (glass) com borda-gradiente e brilho especular
   fino que se move com o scroll, tipografia display serifada, um acento.

   ORDEM DA CASCATA (Onda 3 / A12 — antes eram 3 blocos brigando por
   especificidade dentro do index.html):
     1. assets/tokens-ponte.css  → botões de tom + paleta (os dois temas)
     2. assets/estilo.css        → ESTE arquivo: base tipográfica + vidro
     3. assets/landing.css       → cenas, palco, match, splash, fallback
   Quem vem depois vence. Nenhum arquivo precisa mais "vencer por
   especificidade" — se um seletor aqui precisa de exceção, ela mora no 3.

   A paleta NÃO mora mais aqui: `var(--fundo)`, `var(--tinta)`, `var(--acento)`,
   `var(--ia)` etc. vêm de tokens-ponte.css. Não redeclare cor neste arquivo. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fundo);color:var(--tinta);font-family:var(--f-body);
  /* clip, nao hidden: hidden cria container de rolagem e mataria um
     position:sticky futuro — a licao veio do portal do contador */
  overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:rgba(79,125,240,.35)}

h1,h2,h3.display{font-family:var(--f-display);font-weight:560;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.04}
h2{font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.12}
.sub{margin-top:20px;font-size:clamp(1rem,2vw,1.3rem);color:var(--tinta-2);
  max-width:56ch;margin-inline:auto;line-height:1.6}
.kicker{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:18px}

/* ── cartão de vidro (o coração do estilo) ──────────────────── */
.vidro{
  position:relative;border-radius:18px;background:var(--vidro);
  backdrop-filter:blur(12px);overflow:hidden;
  /* curva com leve sobressinal: o cartão "assenta" em vez de deslizar
     (Onda 3 · microinterações) — mesma duração, física melhor */
  transition:transform .38s cubic-bezier(.34,1.4,.64,1), box-shadow .35s, background .35s;
}
/* borda-gradiente 1px (efeito Apple) */
.vidro::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.35), rgba(255,255,255,.06) 30%,
             rgba(139,148,171,.08) 60%, rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* brilho especular fino — a faixa diagonal que atravessa o cartão com o scroll.
   posição controlada por --brilho (0..1), setada em JS pelo progresso na viewport */
.vidro::after{
  content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 49%,
             rgba(255,255,255,.22) 50%, rgba(255,255,255,.10) 51%, transparent 58%);
  transform:translateX(calc((var(--brilho, .5) - .5) * 160%));
  transition:transform .1s linear;
}
.vidro:hover{
  transform:translateY(-4px) scale(1.008);
  background:rgba(255,255,255,.065);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(79,125,240,.18),
             0 0 44px rgba(79,125,240,.10);
}
.vidro:hover::after{opacity:.75}
.vidro>.corpo{position:relative;padding:34px 30px;z-index:1}
.vidro h3{font-size:1.05rem;font-weight:600;margin-bottom:10px}
.vidro p{font-size:.9rem;color:var(--tinta-2);line-height:1.65}
.vidro .n{font-family:var(--f-mono);font-size:.68rem;color:var(--tinta-3);display:block;margin-bottom:14px}

/* ── layout ─────────────────────────────────────────────────── */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:48px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

.cta{display:inline-block;margin-top:34px;padding:17px 40px;border-radius:99px;background:var(--tinta);
  color:var(--fundo);text-decoration:none;font-weight:650;font-size:1.05rem;
  transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(244,246,251,.18)}

.revelar{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion: reduce){ .revelar{opacity:1;transform:none} .vidro::after{display:none} }

/* ── tema claro: o vidro genérico e o CTA (a paleta vem da ponte) ── */
@media (prefers-color-scheme: light){
  .cta{background:#0B0F1A;color:#FFFFFF}
  .cta:hover{box-shadow:0 18px 50px rgba(11,15,26,.25)}
  .vidro{backdrop-filter:blur(10px)}
  .vidro:hover{background:rgba(11,15,26,.055);
    box-shadow:0 24px 60px rgba(11,15,26,.14), 0 0 0 1px rgba(79,125,240,.2)}
  .vidro::before{background:linear-gradient(155deg, rgba(11,15,26,.22), rgba(11,15,26,.05) 30%,
    rgba(11,15,26,.06) 60%, rgba(11,15,26,.14))}
  .vidro::after{background:linear-gradient(115deg, transparent 42%, rgba(11,15,26,.05) 49%,
    rgba(11,15,26,.10) 50%, rgba(11,15,26,.05) 51%, transparent 58%)}
}