/* ============================================================
   SCALE STACK™ — LP CRM | Agência Rei
   Design System: Dark + Futuristic (herdado do site institucional)
   ------------------------------------------------------------
   Ordem: tokens → reset → fundo → primitivos → header → seções
          → formulário → footer → utilitários → responsivo
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* TEMA ESCURO — preto chapado, branco e o amarelo da Agência Rei.
     Só três famílias: fundo preto, texto branco e #FFAA17 nos realces. O
     amarelo é o ÚNICO ponto de cor da página; é isso que faz cada aparição
     dele valer como destaque em vez de virar mais uma cor no meio de várias. */
  --tinta: 255, 255, 255;          /* base RGB dos véus — branco sobre preto */

  /* Backgrounds */
  --bg-base: #000000;              /* preto chapado, sem matiz */
  --bg-elevated: #0B0B0B;
  --bg-card: rgba(var(--tinta), 0.04);
  --bg-card-hover: rgba(var(--tinta), 0.07);
  --bg-glass: rgba(0, 0, 0, 0.72);

  /* Borders */
  --border-subtle: rgba(var(--tinta), 0.10);
  --border-mid: rgba(var(--tinta), 0.18);
  /* Esta não é borda decorativa: marca hover/aberto em cards e acordeões.
     No amarelo, o estado fica evidente sem precisar de mais nenhuma cor. */
  --border-glow: rgba(255, 170, 23, 0.55);

  /* Text */
  --text-primary: #FFFFFF;         /* 21:1 sobre preto */
  --text-secondary: #B5B5B5;       /* corpo de texto — 10,4:1 */
  --text-muted: #8A8A8A;           /* apoio — 5,9:1 */
  --text-faded: #5A5A5A;           /* só decorativo */

  /* Brand — o amarelo da Agência Rei, amostrado do logo oficial (#FFAA17).
     Nomes agnósticos de cor de propósito: um token chamado "gold" guardando
     outro tom é armadilha na próxima troca. */
  --accent: #FFAA17;               /* 11,0:1 sobre preto */
  --accent-light: #FFC24D;
  --accent-dark: #E0900A;
  --accent-deep: #B87407;
  /* Sobre preto o amarelo vibrante JÁ se lê como letra (11:1), então o token
     de texto e o de borda são o mesmo tom. No tema claro eles precisavam
     divergir; aqui, forçar um tom escurecido só apagaria o realce. */
  --accent-ink: #FFAA17;

  /* CTA — o mesmo amarelo. É o único elemento colorido de peso na página,
     e é isso que o torna o ponto de maior atração sem precisar de tamanho
     nem de preenchimento. A rampa vai do tom cheio ao mais claro: sobre
     preto, quem avança é o tom CLARO. */
  --cta: #FFAA17;
  --cta-light: #FFC24D;
  --cta-deep: #FFC24D;

  /* O ciano da coroa. Não é uma cor nova na página: é a mesma família do
     gradiente do .logo-mark no cabeçalho (#67E8F9 → #06B6D4), e #30CCE4 cai
     justamente entre os dois stops. A coroa 3D da seção 7 é ornamento
     translúcido, não informação — em amarelo ela brigaria de igual para
     igual com o CTA ao lado; no ciano ela recua para o fundo e o botão
     continua sendo o ponto mais quente da tela. */
  --coroa-azul: 48, 204, 228;      /* #30CCE4 em RGB, para modular o alfa */

  /* Semantic — de volta aos tons claros, que são os que brilham no preto. */
  --success: #34D399;              /* 10,1:1 */
  --danger: #FF6B6B;               /* 7,3:1 */
  --danger-soft: #FF8A8A;          /* 8,9:1 */

  /* Gradients */
  /* Faixa/pílula que leva rótulo PRETO por cima (`color: var(--bg-base)`):
     por isso os dois stops são claros. */
  --gradient-accent: linear-gradient(135deg, #FFC24D 0%, #FFAA17 100%);
  --gradient-futuristic: linear-gradient(135deg, #FFC24D 0%, #E0900A 100%);
  /* A manchete é branca e só termina no amarelo. Título inteiro em amarelo
     seria uma mancha de cor, não um realce. */
  --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 54%, #FFAA17 100%);
  --gradient-card: linear-gradient(180deg, rgba(var(--tinta), 0.055) 0%, rgba(var(--tinta), 0.018) 100%);
  --gradient-border: linear-gradient(135deg, rgba(255,170,23,0.55), rgba(255,255,255,0.16), rgba(255,170,23,0.32));

  /* Shadows / Glow.
     A sombra volta a ser preta: sobre preto, sombra clara viraria halo.
     Note que ela NÃO usa `--tinta` — se usasse, herdaria o branco e todo
     card ganharia um brilho em volta. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 40px rgba(255, 170, 23, 0.28), 0 0 80px rgba(255, 170, 23, 0.12);
  --glow-violet: 0 0 60px rgba(255, 170, 23, 0.16);
  --glow-cyan: 0 0 60px rgba(255, 170, 23, 0.16);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Container — o miolo útil é este menos 2rem de cada lado, ou seja 1036px.
     Vários comentários adiante fazem contas a partir desse número (a janela
     das duas tarjas, a grade dos depoimentos). Mexeu aqui? Confira lá. */
  --container-max: 1100px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* Curvas de aceleração — arranque rápido, assentamento longo.
     É o que dá a sensação de resposta física em vez de "slide de PowerPoint". */
  --e-out:      cubic-bezier(0, 0, 0, 1);        /* saída dominante: instantânea, assenta devagar */
  --e-out-soft: cubic-bezier(0.33, 1, 0.68, 1);  /* easeOutCubic — revelações */
  --e-emphasis: cubic-bezier(0.2, 0, 0, 1);      /* ênfase — troca de estado */
  --e-inout:    cubic-bezier(0.65, 0, 0.35, 1);  /* ida e volta simétrica */
  --e-in:       cubic-bezier(0.32, 0, 0.67, 0);  /* entradas que saem de cena */

  /* Transitions */
  --t-fast: 0.18s var(--e-emphasis);
  --t-base: 0.32s var(--e-out);
  --t-slow: 0.6s var(--e-out);

  /* Altura do header, usada pelos palcos fixados */
  --header-h: 72px;

  /* Altura reservada pela barra de cookies (JS atualiza) */
  --cookie-h: 0px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  /* O padrão do corpo é a tinta de leitura, não o azul. No tema escuro dava
     no mesmo herdar o branco; aqui não: parágrafo inteiro em azul saturado
     cansa a vista. O azul continua sendo ênfase, e os títulos o reivindicam
     logo abaixo — inclusive os h3/h4 sem classe, que antes eram brancos só
     por herança e perderiam o destaque se ficassem na cor do corpo. */
  color: var(--text-secondary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}

/* Diretriz 5 — bloqueio de overflow horizontal.
   `clip` em vez de `hidden` de propósito: `hidden` cria um contexto de
   rolagem e MATA todo `position: sticky` descendente (palcos e colunas
   fixadas param de funcionar). `clip` recorta igual, sem esse efeito. */
html, body { max-width: 100%; overscroll-behavior-x: none; }
html, body { overflow-x: clip; }

/* Safari < 16 não conhece `clip`: cai no antigo e perde só o sticky.
   O layout já não transborda por conta própria — isto é rede de segurança. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
img, svg, video, canvas, table { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; max-width: 100%; }
/* `--bg-base` virou branco: branco sobre ciano claro não se lê. */
/* Amarelo cheio pede letra preta, não branca. */
::selection { background: var(--accent); color: #0A0A0A; }

/* Diretriz 4 — equilíbrio de linha e prevenção de palavras órfãs */
h1, h2, h3, h4, .section-title, .hero-title { text-wrap: balance; }
h1, h2, h3, h4 { color: var(--text-primary); }
p, li, .section-subtitle { text-wrap: pretty; }

/* O amarelo dá 11:1 contra o preto — indicador de foco precisa de 3:1, então
   sobra margem e ele fica visível em qualquer seção da página. */
:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* O fundo é liso: sem grade, orbs ou grão. As seções pintam a própria cor.
   Nada de camada decorativa fixa por trás do conteúdo. */

/* ---------- PRIMITIVOS DE LAYOUT ---------- */
/* Recortes do aparelho (notch / indicador de home). Como o documento declara
   viewport-fit=cover, o conteúdo ocupa a tela inteira e precisamos devolver
   essa margem à mão — senão texto e botões ficam sob o hardware. */
:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: calc(var(--container-pad) + var(--safe-l));
  padding-right: calc(var(--container-pad) + var(--safe-r));
  position: relative;
  z-index: 1;
}

/* Itens de grid/flex têm min-width:auto por padrão — um filho largo estoura
   a trilha e cria scroll lateral. Zerar isso é o que trava o overflow (diretriz 5). */
.hero-inner > *, .setup-grid > *, .cta-final-grid > *,
.autoridade-grid > *, .compare-row > *, .form-grid > *,
.footer-grid > *, .pillars > *, .frank-grid > * { min-width: 0; }

.section { position: relative; padding: clamp(4rem, 9vw, var(--space-3xl)) 0; z-index: 1; }
.section-alt { background: linear-gradient(180deg, transparent, rgba(var(--tinta), 0.022), transparent); }

.section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2.5rem, 6vw, 5rem);
}
.section-cta { text-align: center; margin-top: clamp(2rem, 5vw, 4rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  text-transform: lowercase;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 170, 23, 0.08);
  border: 1px solid rgba(255, 170, 23, 0.18);
  border-radius: var(--radius-pill);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-primary);
  font-size: clamp(1.68rem, 3.6vw, 2.65rem);
  margin-bottom: 1.25rem;
}

/* O topo do clamp desceu junto com os títulos, mas o PISO fica em 1rem: no
   celular esse texto já rodava no mínimo, e encolhê-lo levaria corpo de
   leitura para baixo de 16px sem resolver nada — o exagero era no desktop. */
.section-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  color: var(--text-secondary);
  max-width: 660px;
  margin-inline: auto;
  line-height: 1.6;
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.highlight { color: var(--accent-ink); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem;
  background: rgba(var(--tinta), 0.055);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255, 170, 23, 0.55);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 170, 23, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 170, 23, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 170, 23, 0); }
}

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-border);
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- BOTÕES (diretriz 8 — maior contraste da página) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  padding: 0.875rem 1.5rem;
  min-height: 44px;             /* diretriz 6 — área de toque */
  /* Retângulo padrão. O raio vive aqui, na base, para que TODOS os botões
     tenham a mesma forma — primário, ghost, outline e os da barra de
     cookies. Formas diferentes entre botões da mesma página leem como erro. */
  border-radius: var(--radius-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.btn-lg { font-size: 1rem; padding: 1.05rem 1.85rem; min-height: 52px; }
.btn-sm { font-size: 0.85rem; padding: 0.6rem 1.15rem; }
.btn-block { width: 100%; }

/* CTAs com rótulo longo precisam quebrar linha em vez de estourar a viewport.
   O `nowrap` herdado do design system serve a botões curtos, não a estes. */
.btn-lg, .btn-block {
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
}
.hero-actions .btn, .section-cta .btn { max-width: 100%; }
@media (max-width: 560px) {
  .hero-actions .btn-lg, .section-cta .btn-lg { width: 100%; }
}

/* CTA — retângulo padrão, vazado. Sem chanfro, sem contorno animado:
   a borda é o próprio `border` do botão. */
.btn-primary {
  background: transparent;
  border: 1.5px solid var(--cta);
  /* O rótulo é sempre o extremo oposto ao fundo: sobre claro, o tom mais
     escuro da rampa. */
  color: var(--cta-deep);
}
/* 6% de amarelo sobre preto some; 12% já dá o preenchimento que confirma o
   hover sem tirar o botão do estado vazado. */
.btn-primary:hover { transform: translateY(-2px); border-color: var(--cta-deep); background: rgba(255, 170, 23, 0.12); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ============================================================
   PALCO FIXADO (scroll stage)
   Um pai alto segura um filho `sticky`. Enquanto o pai passa pela
   viewport, o filho fica travado e o CONTEÚDO dele evolui.
   O JS publica o progresso 0→1 em --p para o CSS reagir.
   ============================================================ */
.stage { position: relative; }
.stage-pin {
  position: sticky;
  top: calc(var(--header-h) + 12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sem JS ou com movimento reduzido, o palco vira conteúdo normal:
   nada fica preso, nada depende de --p para ser legível. */
.no-js .stage, .no-js .stage-pin { height: auto !important; position: static; }

/* Trilho de progresso do palco */
.stage-rail {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.stage-rail-track {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}
.stage-rail-fill {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--gradient-accent);
  border-radius: 2px;
  transform-origin: left;
}
.stage-rail-count { color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* ---------- BARRA DE PROGRESSO DA PÁGINA ---------- */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gradient-accent);
  transform: scaleX(var(--scroll-p, 0));
  transform-origin: left center;
  box-shadow: 0 0 12px rgba(255, 170, 23, 0.5);
}

/* ---------- MENU SUSPENSO DO HEADER ---------- */
.nav-item { position: relative; display: inline-flex; }
.nav-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-trigger svg { transition: transform var(--t-fast); }
.nav-item.open .nav-trigger svg { transform: rotate(180deg); }
.nav-item.open > .nav-link { color: var(--text-primary); background: rgba(var(--tinta), 0.07); }

.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(560px, calc(100vw - 2rem));
  padding: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--tinta), 0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.98);
  transition: opacity 0.22s var(--e-out), transform 0.28s var(--e-out), visibility 0.28s;
  z-index: 120;
}
.nav-item.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }

.mega::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;   /* ponte para o mouse não perder o hover */
}
.mega-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-md);
  transition: background var(--t-fast), transform var(--t-fast);
  min-height: 44px;
}
.mega-item:hover { background: rgba(var(--tinta), 0.07); transform: translateX(2px); }
.mega-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(255, 170, 23, 0.10);
  border: 1px solid rgba(255, 170, 23, 0.2);
  color: var(--accent-ink);
}
.mega-title { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1px; }
.mega-desc { display: block; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }

/* ---------- REVEAL / COREOGRAFIA (diretriz 12) ---------- */
/* Só aplica opacidade zero se o JS estiver ativo — diretriz 16 (degradação elegante) */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.62s var(--e-out), transform 0.72s var(--e-out);
  will-change: opacity, transform;
}
/* Solta o will-change depois da entrada: manter camada de GPU viva custa memória */
.js .reveal.in-view { will-change: auto; }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
.js .reveal--left  { transform: translateX(-28px); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal--left.in-view, .js .reveal--right.in-view { transform: translateX(0); }
.js .reveal--scale { transform: scale(0.96); }
.js .reveal--scale.in-view { transform: scale(1); }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--t-base), backdrop-filter var(--t-base), border-color var(--t-base), padding var(--t-base);
  padding: 1rem 0;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: var(--border-subtle);
  padding: 0.65rem 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;          /* diretriz 6 — área de toque */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.logo sup { font-size: 0.5em; margin-left: 1px; vertical-align: super; color: var(--accent-ink); }
.logo-mark { width: 28px; height: 28px; display: grid; place-items: center; filter: drop-shadow(0 0 8px rgba(255, 170, 23, 0.45)); }
.logo:hover .logo-mark { animation: spin 0.6s ease-out; }
@keyframes spin { to { transform: rotate(360deg); } }

.nav-desktop {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: rgba(var(--tinta), 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--text-primary); background: rgba(var(--tinta), 0.07); }
.nav-link.active { color: var(--text-primary); background: rgba(255, 170, 23, 0.12); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: rgba(var(--tinta), 0.045);
  position: relative;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text-primary);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all var(--t-base);
}
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 27px; }
.menu-toggle.open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

.nav-mobile {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem var(--container-pad) 1.5rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile .nav-link { padding: 0.85rem 1rem; font-size: 0.95rem; min-height: 44px; }
.nav-mobile .btn { margin-top: 0.75rem; }

/* ============================================================
   SEÇÃO 1 — HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(7.5rem, 16vw, 11rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
.hero-content { max-width: 640px; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.95rem, 4.7vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  /* Curto: quem carrega o respiro até o CTA é a linha fina logo abaixo. */
  margin-bottom: 0.8rem;
}

/* Linha fina sob o H1 — a premissa que o título responde.
   Fica em branco cheio de propósito: o título é gradiente, então a diferença
   de TAMANHO é que estabelece a hierarquia, e cor é o que separa os dois. */
.hero-deck {
  font-size: clamp(1rem, 1.95vw, 1.28rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 0 0 1.75rem;
  max-width: 32ch;
}
/* Vive na coluna da direita, sob a imagem (ver placement no bloco ≥900px).
   No mobile, coluna única, cai naturalmente como último item do hero. */
.hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.08rem);   /* piso em 1rem: ver .section-subtitle */
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 560px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.hero-cta-note {
  margin-top: 1.15rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 480px;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.hero-cta-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent-ink); }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}
.hero-trust-item { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-trust-value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.hero-trust-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Saída do hero ligada à rolagem: o JS publica --hero-p (0→1) e o
   conteúdo recua em profundidade em vez de simplesmente sumir da tela.
   O alvo é .hero-visual-media, NÃO .hero-visual: este último carrega
   .reveal--scale, cuja regra .in-view (3 classes) venceria por
   especificidade e zeraria o transform. */
.js .hero-content, .js .hero-visual-media {
  will-change: transform, opacity;
}
.js .hero-content {
  transform: translate3d(0, calc(var(--hero-p, 0) * -40px), 0);
  opacity: calc(1 - var(--hero-p, 0) * 0.75);
}
.js .hero-visual-media {
  transform: translate3d(0, calc(var(--hero-p, 0) * -72px), 0) scale(calc(1 - var(--hero-p, 0) * 0.06));
  opacity: calc(1 - var(--hero-p, 0) * 0.6);
}

/* Mockup do painel — arquivo de gavetas 3D.
   Sem moldura: a pilha encosta direto no fundo da página, e quem dá o
   ambiente é só o halo de .hero-glow por trás. */
.hero-visual { min-width: 0; }
.hero-visual-media { position: relative; }
.hero-visual-frame { position: relative; }

.hero-glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 60% 40%, rgba(255, 170, 23, 0.22), transparent 62%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   ARQUIVO DE GAVETAS — o mockup do hero
   Uma pilha de placas de vidro empilhadas em PROFUNDIDADE, não em
   coluna: todas ocupam a mesma posição 2D e só diferem no Z (`--i`).
   O que as separa na tela é a projeção da perspectiva — é por isso que
   elas escalonam sozinhas na diagonal, sem nenhum deslocamento em X/Y.

   O palco segura a PERSPECTIVA e o corpo segura a ROTAÇÃO. Separados
   porque perspectiva num pai que gira faz o ponto de fuga girar junto
   e a pilha desmonta.

   Ao abrir, a placa é PUXADA PARA FORA da fila: sobe e vem até a frente
   de todas as outras (Z fixo, à frente da placa 0). Como a viagem é
   proporcional à profundidade dela, a de trás percorre o caminho todo —
   é isso que faz o gesto ler como tirar a pasta da gaveta.
   ============================================================ */
.cabinet {
  /* Escala do conjunto. TODO comprimento da gaveta — placa, passo em Z,
     respiro do palco, perspectiva, tipo e ícone do rótulo — é multiplicado
     por este número, então a pilha cresce ou encolhe inteira e proporcional
     mexendo só aqui. Os valores ao lado são os originais de projeto; não os
     reescreva ao redimensionar, mude `--k`.

     ⚠️ A perspectiva escala junto de propósito: mantida fixa, aumentar a
     placa aumentaria também a força do ponto de fuga e a pilha mudaria de
     forma em vez de só mudar de tamanho. */
  --k: 1.1;

  /* Geometria em um lugar só: mexer aqui reajusta a pilha inteira. */
  --plate-w: calc(288px * var(--k));
  --plate-h: calc(190px * var(--k));
  --plate-gap: calc(-50px * var(--k));   /* passo em Z entre uma placa e a próxima */
  --plate-thick: calc(10px * var(--k));  /* espessura do vidro */
  --plate-out: calc(50px * var(--k));    /* Z da placa aberta: à frente de todas */
  --plate-lift: calc(-62px * var(--k));

  /* Tempo em um lugar só, como a geometria. As três transições da gaveta
     (placa, rótulo e aceso da face) derivam desta base mantendo a proporção
     original entre elas — mexer aqui desacelera o gesto inteiro junto.

     A curva NÃO é a `--e-out` do resto do site. Aquela é cubic-bezier(0,0,0,1):
     parte na velocidade máxima e só desacelera, que é o que fazia a gaveta
     parecer disparada mesmo com meio segundo de duração. `--e-out-soft` é
     easeOutCubic — tem arranque, e é o arranque que dá peso à placa. */
  --drawer-t: 0.85s;
  --drawer-e: var(--e-out-soft);

  position: relative;
  padding: 0.2rem 0 0.35rem;
}

.cabinet-stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: calc(1300px * var(--k));
  perspective-origin: 50% 45%;
  /* Assimétrico porque a pilha É assimétrica: ela foge para cima e para a
     direita, então o respiro tem de acompanhar em vez de sobrar em baixo
     e à esquerda. O de cima ainda abriga a placa aberta, que sobe 44px. */
  padding: calc(96px * var(--k)) calc(150px * var(--k)) calc(44px * var(--k)) calc(16px * var(--k));
}

.cabinet-body {
  position: relative;
  width: var(--plate-w);
  height: var(--plate-h);
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(-32deg);
}

/* Não há aro nem chassi em volta da pilha, e é de propósito: com a placa
   aberta saindo para a frente, qualquer contorno atrás dela volta a ler
   como caixa. Quem dá ambiente é só o halo do piso e o .hero-glow. */

/* Luz derramada no piso: 2D de propósito, fora da cadeia preserve-3d —
   é brilho de ambiente, não uma face da pilha. */
.cabinet-floor {
  position: absolute;
  left: 16%; right: 16%; bottom: calc(18px * var(--k));
  height: calc(30px * var(--k));
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 170, 23, 0.20) 0%, rgba(0, 0, 0, 0) 68%);
  filter: blur(calc(16px * var(--k)));
  pointer-events: none;
}

/* ---------- A placa ---------- */
.drawer {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  text-align: left;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, calc(var(--i) * var(--plate-gap)));
  transition: transform var(--drawer-t) var(--drawer-e);
  -webkit-tap-highlight-color: transparent;
}

/* As duas espessuras do vidro. Direita e topo, e não as outras duas,
   porque é esse par que fica virado para a câmera com a pilha girada
   -32° em Y e -10° em X — as faces opostas apontam para o lado de lá. */
.drawer::before, .drawer::after { content: ''; position: absolute; pointer-events: none; }
.drawer::before {
  top: 0; left: 100%;
  width: var(--plate-thick); height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(var(--tinta), 0.22) 0%, rgba(var(--tinta), 0.05) 100%);
}
.drawer::after {
  top: 0; left: 0;
  width: 100%; height: var(--plate-thick);
  transform-origin: center top;
  transform: rotateX(-90deg);
  background: linear-gradient(180deg, rgba(var(--tinta), 0.18) 0%, rgba(var(--tinta), 0.04) 100%);
}

/* Translúcida de propósito: é o vidro empilhado que se enxerga através
   das placas da frente que dá volume à fila. O conteúdo de cada placa
   mora nela mesma, então nada vaza de uma para a outra.

   ⚠️ O miolo é quase transparente e a BORDA é que carrega a placa. Oito
   véus translúcidos somados viram uma névoa branca onde não se distingue
   mais placa nenhuma — o desenho vive do contorno, não do preenchimento. */
.drawer-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(13px * var(--k));
  border: 1px solid rgba(var(--tinta), 0.26);
  background: linear-gradient(152deg, rgba(var(--tinta), 0.05) 0%, rgba(var(--tinta), 0.012) 55%, rgba(var(--tinta), 0.032) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--tinta), 0.14),
              0 calc(20px * var(--k)) calc(44px * var(--k)) calc(-26px * var(--k)) rgba(0, 0, 0, 0.9);
  /* 0,58 da base — a mesma proporção que estes 0,32s tinham para os 0,55s
     da placa. O aceso chega antes do fim do movimento, não junto. */
  transition: border-color calc(var(--drawer-t) * 0.58) var(--drawer-e),
              background   calc(var(--drawer-t) * 0.58) var(--drawer-e),
              box-shadow   calc(var(--drawer-t) * 0.58) var(--drawer-e);
}
.drawer-index {
  position: absolute;
  top: calc(13px * var(--k)); left: calc(15px * var(--k));
  font-family: var(--font-mono);
  font-size: calc(0.64rem * var(--k));
  letter-spacing: 0.08em;
  color: var(--text-faded);
  transition: color var(--t-base);
}
.drawer-lines {
  position: absolute;
  top: calc(42px * var(--k)); left: calc(15px * var(--k)); right: calc(15px * var(--k));
  display: flex; flex-direction: column; gap: calc(8px * var(--k));
}
.drawer-lines i { display: block; height: calc(6px * var(--k)); border-radius: calc(3px * var(--k)); background: rgba(var(--tinta), 0.075); }

/* ---------- O rótulo da funcionalidade ---------- */
/* Fica na própria placa, na faixa de baixo. Fechado ele não existe; é a
   placa que sai da fila e o traz junto. */
.drawer-doc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(0.6rem * var(--k));
  padding: calc(0.7rem * var(--k)) calc(0.85rem * var(--k)) calc(0.8rem * var(--k)) calc(0.9rem * var(--k));
  border-radius: 0 0 calc(13px * var(--k)) calc(13px * var(--k));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.82) 100%);
  transform: translate3d(0, calc(10px * var(--k)), 1px);
  opacity: 0;
  /* 0,62 e 0,82 da base — as proporções que 0,34s e 0,45s tinham para os
     0,55s da placa. O rótulo continua chegando depois dela, como antes. */
  transition: opacity   calc(var(--drawer-t) * 0.62) var(--drawer-e),
              transform calc(var(--drawer-t) * 0.82) var(--drawer-e);
}
/* A aba amarela é o que faz a faixa ler como PASTA de arquivo e não
   como uma legenda qualquer colada na placa. */
.drawer-doc::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: calc(3px * var(--k));
  border-radius: 0 calc(3px * var(--k)) calc(3px * var(--k)) 0;
  background: var(--gradient-accent);
}

.drawer-doc-icon {
  flex: 0 0 auto;
  width: calc(28px * var(--k)); height: calc(28px * var(--k));
  border-radius: calc(8px * var(--k));
  display: grid; place-items: center;
  background: rgba(255, 170, 23, 0.12);
  border: 1px solid rgba(255, 170, 23, 0.28);
  color: var(--accent-ink);
}
.drawer-doc-icon svg { width: calc(15px * var(--k)); height: calc(15px * var(--k)); }
/* Verde só no WhatsApp, como no painel antigo: cor semântica de marca
   de terceiro, não uma segunda cor do tema. */
.drawer-doc-icon--wa { background: rgba(37, 211, 102, 0.12); border-color: rgba(37, 211, 102, 0.30); color: #25D366; }

.drawer-doc-text { min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--k)); }
.drawer-name {
  font-family: var(--font-display);
  font-size: calc(0.92rem * var(--k));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-meta {
  font-family: var(--font-mono);
  font-size: calc(0.6rem * var(--k));
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Aberta ----------
   O `.no-js` na lista é a degradação elegante: sem JS a placa ainda sai
   no mouse e no teclado, só perde o toque e o "uma de cada vez". */
/* Além de subir e vir à frente, a placa DESGIRA 9°: some parte do ângulo
   da pilha e ela se vira para a câmera. É o gesto de tirar a pasta e
   virá-la para ler — e de quebra endireita o rótulo. */
.drawer.is-open,
.no-js .drawer:hover,
.no-js .drawer:focus-visible {
  transform: translate3d(0, var(--plate-lift), var(--plate-out)) rotateY(9deg);
}
.drawer.is-open .drawer-face,
.no-js .drawer:hover .drawer-face,
.no-js .drawer:focus-visible .drawer-face {
  border-color: var(--border-glow);
  /* A aberta é a única OPACA da pilha. Enquanto está na fila ela é vidro
     e deixa ver as de trás; fora da fila isso viraria ruído por baixo do
     rótulo — os índices das outras apareciam através dele. Quem acende a
     placa é a borda e o halo, não um preenchimento amarelo forte. */
  background: linear-gradient(152deg, rgba(28, 22, 8, 0.93) 0%, rgba(11, 11, 11, 0.94) 55%, rgba(24, 19, 7, 0.93) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--tinta), 0.22), 0 30px 60px -26px rgba(0, 0, 0, 0.95), 0 0 46px -14px rgba(255, 170, 23, 0.5);
}
.drawer.is-open .drawer-index,
.no-js .drawer:hover .drawer-index { color: var(--accent-ink); }
.drawer.is-open .drawer-lines i,
.no-js .drawer:hover .drawer-lines i { background: rgba(255, 170, 23, 0.26); }
.drawer.is-open .drawer-doc,
.no-js .drawer:hover .drawer-doc,
.no-js .drawer:focus-visible .drawer-doc {
  opacity: 1;
  transform: translate3d(0, 0, 1px);
}

.drawer:focus-visible { outline: none; }
.drawer:focus-visible .drawer-face { outline: 2px solid var(--accent); outline-offset: 3px; }

.cabinet-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-faded);
}

/* Telas estreitas: placa menor, passo mais curto e menos giro. O mesmo
   ângulo do desktop, numa placa de 240px, joga a pilha para fora da tela. */
@media (max-width: 599px) {
  .cabinet {
    /* Escala neutra no celular: aqui a pilha não sobra, ela CABE raspando.
       Com --k 1.1 a placa iria a 251px e o palco a ~343px, contra 328px de
       miolo num aparelho de 360px — a pilha seria decepada pelo
       `overflow-x: clip` do body. Os valores abaixo já são os finais desta
       faixa; aumentar a gaveta é assunto do desktop. */
    --k: 1;

    /* A placa não encolhe mais que isto: abaixo de ~228px a linha mono do
       rótulo mais longo já não cabe e vira reticências. Quem cede espaço
       para a pilha caber na tela é o ÂNGULO e o passo em Z, não a placa. */
    --plate-w: 228px;
    --plate-h: 152px;
    --plate-gap: -28px;
    --plate-thick: 7px;
    --plate-out: 34px;
    --plate-lift: -34px;
  }
  .cabinet-stage { padding: 70px 76px 32px 8px; perspective: 950px; }
  .cabinet-body { transform: rotateX(-9deg) rotateY(-22deg); }
  .drawer-lines { top: 36px; }
  .drawer-doc { padding: 0.55rem 0.55rem 0.65rem 0.65rem; gap: 0.45rem; }
  .drawer-doc-icon { width: 24px; height: 24px; border-radius: 7px; }
  .drawer-doc-icon svg { width: 13px; height: 13px; }
  .drawer-name { font-size: 0.82rem; }
  /* Quebra em duas linhas em vez de cortar em reticências. O caminho mais
     curto seria encolher a fonte, mas 8px é pequeno demais para um texto
     que também é o nome acessível do botão. */
  .drawer-meta { font-size: 0.53rem; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
}

/* ⚠️ A faixa apertada: aos 900px o hero vira DUAS colunas e a da direita
   nasce com ~370px, mas a pilha projetada em 3D mede ~480px em escala
   cheia. Ela vaza para a direita e o `overflow-x: clip` do body deceps o
   que passa da janela — sem barra de rolagem para denunciar.

   Isto não nasceu com o aumento de 10%: em escala 1 a pilha já passava
   ~31px aos 900px. O aumento só alargou a faixa e aprofundou o corte, e
   como agora existe um número único de escala, dá para resolver os dois.

   A escala volta ao cheio aos 1100px, que é onde o container bate no teto
   (--container-max) e a coluna para de crescer. Mexeu no teto do container
   ou no ponto em que o hero abre em duas colunas? Refaça esta ponte. */
@media (min-width: 900px)  and (max-width: 999px)  { .cabinet { --k: 0.82; } }
@media (min-width: 1000px) and (max-width: 1099px) { .cabinet { --k: 0.95; } }

/* Cards flutuantes sobre o mockup */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-md);
  animation: float 6s ease-in-out infinite;
}
.float-card--1 { top: 12%; right: -6%; }
.float-card--2 { bottom: 10%; left: -6%; animation-delay: -3s; }
.float-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: rgba(255, 170, 23, 0.12);
  border: 1px solid rgba(255, 170, 23, 0.25);
  color: var(--accent-ink);
}
.float-card--2 .float-card-icon { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.28); color: var(--success); }
.float-card-label { font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.float-card-value { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================================
   TARJA — INTEGRAÇÕES
   Mini seção entre o hero e a seção 2: título parado à esquerda,
   logos correndo à direita. Não é uma seção da copy, então usa
   padding de tarja (~2rem), não o das seções (clamp até 9rem).

   O laço é só CSS. A trilha tem DUAS cópias da mesma fileira e anda
   até -50%: no fim do ciclo o quadro é pixel a pixel igual ao do
   começo, então o salto de volta é invisível. Sem JS, sem listener
   de rolagem, sem entrar no motor do main.js.
   ============================================================ */
.integra {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(var(--tinta), 0.045) 0%, rgba(var(--tinta), 0.012) 100%);
  z-index: 1;
}

.integra-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
}

.integra-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
}

.integra-marquee {
  /* Sem caixa, é só o vão que separa uma marca da outra — por isso ele é
     bem maior do que era com as plaquinhas. */
  --chip-gap: 2.1rem;
  /* Comprimento do esmaecido em PIXELS, não em porcentagem: em % a mesma
     regra derreteria meia tela no celular e mal tocaria a borda no desktop. */
  --fade: 56px;
  position: relative;
  overflow: hidden;
  /* Desvanece as duas pontas: os chips entram e saem de cena em vez de
     serem decepados na borda — é o que faz a fileira parecer sem fim. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}

/* A duração é consequência da largura da fileira, não um número redondo: são
   dezesseis marcas, ~2170px por fileira, e 75s mantêm os ~29px/s que a tarja
   sempre teve. Entrou ou saiu marca? Refaça a divisão. */
.integra-track {
  display: flex;
  width: max-content;
  animation: integra-run 75s linear infinite;
}
@keyframes integra-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.integra-row {
  display: flex;
  align-items: center;
  gap: var(--chip-gap);
  margin: 0;
  padding: 0 var(--chip-gap) 0 0;   /* o respiro à direita mantém o passo constante na emenda */
}

/* Só onde existe cursor de verdade: no toque, `:hover` gruda e a fileira
   ficaria parada até o próximo toque em outro lugar. */
@media (hover: hover) {
  .integra-marquee:hover .integra-track { animation-play-state: paused; }
}

/* Sem plaquinha: o logo pousa direto no preto. Isso só funciona porque os
   `int-*.png` já são as versões REVERSAS das marcas (ver README) — com o
   arquivo original, de letra escura, metade da fileira sumiria no fundo. */
.integra-chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0 clamp(0.4rem, 1.2vw, 0.8rem);
  min-height: 46px;
  /* Levemente recuados no repouso: dez marcas alheias em brilho cheio
     roubam a cena do título e do amarelo, que são o assunto da tarja. */
  opacity: 0.84;
  transition: opacity var(--t-base), transform var(--t-base);
}
.integra-chip:hover { opacity: 1; transform: translateY(-2px); }

.integra-chip img { display: block; width: auto; }

/* Altura ÓPTICA, não geométrica. Nas assinaturas deitadas a letra ocupa a
   caixa inteira; nas que carregam um ícone alto ao lado (ChatGPT, Drive) a
   letra fica menor dentro da mesma altura; e a marca em bloco, na altura das
   outras, vira um selo minúsculo perdido entre os letreiros. Daí três degraus. */
.int-w { height: 20px; }   /* slack · Meta · Trello · Zapier · Gemini */
.int-m { height: 27px; }   /* ChatGPT · Drive — ícone alto encolhe a palavra */
.int-s { height: 33px; }   /* Teams · Zoom · Asana — marca em bloco */

/* ---------- Variante: selos de validação ----------
   Mesmo componente, duas diferenças que vêm do conteúdo: o selo é quase
   quadrado e tem TEXTO impresso dentro, então precisa de mais altura que
   uma assinatura deitada; e o título é uma frase, não um rótulo curto,
   então não pode ficar numa linha só. */
.integra--selos .integra-chip { min-height: 88px; }
.int-selo { height: 76px; }

/* ⚠️ A regra do carrossel infinito é que UMA fileira precise ser mais larga
   que a janela; senão, no fim do ciclo o rabo da última ainda não cobre a
   direita e abre um vazio. Aqui a janela é o miolo do container (1036px)
   menos a coluna do título — ~690px no desktop, medido.

   Os NOVE selos de hoje dão ~1150px e passam com folga, então o laço é o
   mesmo da tarja de integrações: duas fileiras andando -1/2, sem keyframe
   próprio. (Enquanto foram seis, davam ~830px, não cobriam a janela, e esta
   tarja precisava de uma TERCEIRA cópia e de um laço de -1/3.)

   Mexeu na quantidade de selos? Refaça essa conta — largura da fileira =
   soma das larguras renderizadas + 25,6px de respiro por selo + 33,6px de
   vão entre eles — antes de confiar no resultado. */
.integra--selos .integra-track {
  animation-duration: 40s;   /* ~1150px/40s ≈ 29px/s, o ritmo da outra tarja */
}

@media (min-width: 900px) {
  .integra-inner { grid-template-columns: auto minmax(0, 1fr); gap: 2.2rem; }
  .integra-title { text-align: left; white-space: nowrap; }
  .integra-marquee { --fade: 104px; }

  /* O `nowrap` da tarja de integrações serve a um rótulo de três palavras.
     Aqui ele empurraria uma frase de 50 caracteres para dentro da coluna
     do carrossel — daí a quebra e o teto de largura. */
  .integra--selos .integra-title { white-space: normal; max-width: 20ch; }
}

@media (max-width: 599px) {
  .integra-marquee { --chip-gap: 1.35rem; --fade: 34px; }
  .integra-chip { min-height: 40px; padding: 0 0.2rem; }
  .int-w { height: 17px; }
  .int-m { height: 23px; }
  .int-s { height: 28px; }
  .integra--selos .integra-chip { min-height: 74px; }
  .int-selo { height: 62px; }

  /* Tudo encolhe no celular, então a fileira encurta e a mesma duração
     aceleraria a tarja. As duas voltam a ~27px/s: ~1490px/55s nas
     integrações, ~760px/28s nos selos.
     A linha dos selos NÃO é redundante: `.integra--selos .integra-track` lá
     em cima tem dois seletores de classe e ganharia de um `.integra-track`
     solto aqui, por mais tarde que ele venha. */
  .integra-track { animation-duration: 55s; }
  .integra--selos .integra-track { animation-duration: 28s; }
}

/* Movimento reduzido: nada corre sozinho. A fileira dobrada só existe para
   fechar o laço, então sai de cena, e a única que fica vira um carrossel
   arrastável — os logos continuam todos alcançáveis. */
@media (prefers-reduced-motion: reduce) {
  .integra-track { animation: none; width: 100%; }
  .integra-track > .integra-row[aria-hidden="true"] { display: none; }
  .integra-row { flex: 1 1 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; }
  .integra-chip { scroll-snap-align: center; }
}

/* ============================================================
   SEÇÃO 2 — O FRANKENSTEIN DAS FERRAMENTAS
   ============================================================ */
.frank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  counter-reset: frank;
}
.frank-card {
  position: relative;
  padding: 1.75rem 1.6rem 1.75rem 4.4rem;
  background: var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
  min-width: 0;
}
.frank-card::before {
  counter-increment: frank;
  content: counter(frank);
  position: absolute;
  top: 1.6rem;
  left: 1.5rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.25);
}
.frank-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-mid);
  background: var(--bg-card-hover);
}

/* Microinteração reativa: um brilho segue o cursor dentro do card.
   O JS publica --mx/--my; sem JS o pseudo-elemento simplesmente não acende. */
.frank-card, .pillar, .stat-card { isolation: isolate; }
.frank-card::after, .pillar::after, .stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 170, 23, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.35s var(--e-out);
  pointer-events: none;
  z-index: -1;
}
.frank-card:hover::after, .pillar:hover::after, .stat-card:hover::after { opacity: 1; }

/* Carrossel com encaixe no mobile — troca a pilha de 4 cards
   por uma faixa deslizante, encurtando muito a rolagem. */
@media (max-width: 699px) {
  .frank-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    padding-bottom: 0.85rem;
    /* sangra até as bordas da tela sem criar scroll na página */
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scrollbar-width: none;
  }
  .frank-grid::-webkit-scrollbar { display: none; }
  .frank-card { scroll-snap-align: start; }
}

.carousel-hint {
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
@media (max-width: 699px) { .carousel-hint { display: flex; } }
.carousel-dots { display: flex; gap: 0.3rem; margin-left: auto; }
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-mid);
  transition: background var(--t-fast), width var(--t-fast);
}
.carousel-dot.is-live { background: var(--accent); width: 16px; border-radius: 3px; }
.frank-card p { color: var(--text-secondary); line-height: 1.65; font-size: 0.98rem; }
.frank-card strong { color: var(--text-primary); font-weight: 600; }

.frank-verdict {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-glow);
  background:
    radial-gradient(ellipse at top left, rgba(255, 170, 23, 0.08), transparent 55%),
    var(--gradient-card);
  text-align: center;
}
.frank-verdict p {
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 720px;
  margin-inline: auto;
}
.frank-verdict strong { color: var(--text-primary); font-weight: 600; }
.frank-quote {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ============================================================
   SEÇÃO 3 — COMPARATIVO
   ============================================================ */
.compare {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--gradient-card);
  overflow: hidden;
}

/* Cabeçalho do comparativo (desktop) */
.compare-head {
  display: none;
  grid-template-columns: 1.05fr 1fr 1.15fr;
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.compare-head > div {
  background: var(--bg-elevated);
  padding: 1.35rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.compare-head .compare-col-label { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.compare-head .compare-col-them  { color: var(--text-secondary); }
.compare-head .compare-col-us {
  color: var(--bg-base);
  background: var(--gradient-accent);
  display: flex; align-items: center; gap: 0.5rem;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.compare-row:last-child { border-bottom: 0; }
.compare-cell { background: var(--bg-base); padding: 1.35rem 1.5rem; min-width: 0; }

.compare-feature {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.compare-them, .compare-us { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.94rem; line-height: 1.6; }
.compare-them { color: var(--text-muted); }
.compare-us   { color: var(--text-secondary); background: rgba(255, 170, 23, 0.035); }
.compare-us strong { color: var(--text-primary); font-weight: 600; }

.compare-ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.compare-them .compare-ico { color: var(--danger); opacity: 0.8; }
.compare-us .compare-ico   { color: var(--accent-ink); }

/* --- Ativação linha a linha durante o palco fixado --- */
.js .compare-row {
  transition: opacity 0.5s var(--e-out), transform 0.5s var(--e-out), background 0.4s var(--e-out);
}
/* O esmaecimento só existe quando o palco está de fato governando a cena
   (`is-staged`). Sem isso, no mobile as linhas ficariam apagadas para sempre. */
.js .stage.is-staged .compare-row[data-row] { opacity: 0.28; }
.js .stage.is-staged .compare-row[data-row].is-live { opacity: 1; }
.js .stage.is-staged .compare-row[data-row].is-live .compare-us {
  background: rgba(255, 170, 23, 0.075);
  box-shadow: inset 3px 0 0 var(--accent);
}
.js .stage.is-staged .compare-row[data-row].is-live .compare-feature { color: var(--accent-ink); }
/* Já percorridas continuam legíveis, só perdem o destaque */
.js .stage.is-staged .compare-row[data-row].is-past { opacity: 0.62; }

/* O trilho só aparece quando há palco (ou rastreamento) para medir */
.stage-rail { display: none; }
.stage.is-staged .stage-rail,
.stage-rail.is-on { display: flex; }

/* Rótulos só visíveis no mobile (viram cards) */
.compare-tag {
  display: block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.compare-them .compare-tag { color: var(--danger); background: rgba(255, 107, 107, 0.09); }
.compare-us .compare-tag   { color: var(--accent-ink); background: rgba(255, 170, 23, 0.10); }

/* ============================================================
   ENTREDOBRA — A PLATAFORMA EM OPERAÇÃO
   Faixa entre o comparativo e a seção 4. Como a tarja de integrações,
   não é seção da copy: usa padding de faixa, não o das seções.

   O .webp tem canal alfa — as placas do painel vêm recortadas, sem
   fundo próprio. Por isso não há moldura nem raio de canto: quem
   descola a imagem do preto chapado é o brilho radial atrás dela.
   ============================================================ */
.entredobra {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  z-index: 1;
}

.entredobra-media {
  position: relative;
  margin: 0;
}

/* O halo fica no pseudo-elemento: não entra no fluxo, não captura
   ponteiro e não obriga a imagem a ganhar uma caixa só para carregá-lo.
   Vaza para fora do quadro (`inset` negativo) porque a arte tem folga
   transparente nas bordas — um halo colado no bounding box morreria
   dentro do próprio vazio. */
.entredobra-media::before {
  content: '';
  position: absolute;
  inset: -14% -8%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 58% at 50% 50%,
              rgba(255, 170, 23, 0.15) 0%,
              rgba(255, 170, 23, 0.045) 46%,
              transparent 72%);
}

.entredobra-media img {
  position: relative;   /* acima do halo sem inverter a ordem no DOM */
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.7));
}

/* Em 3208×1042 a faixa inteira cabe em ~110px de altura num celular:
   nada nela seria legível. Abaixo de 768px o corte assume, e os 28%
   caem na barra lateral com a coroa mais o relatório de Google Ads —
   a marca e o número, que é o que sobra quando só cabe um pedaço.
   Mexeu na arte? Confira aonde esses 28% foram parar. */
@media (max-width: 767px) {
  .entredobra-media img {
    height: clamp(230px, 62vw, 320px);
    object-fit: cover;
    object-position: 28% 50%;
  }
}

/* ============================================================
   SEÇÃO 4 — O SETUP É O DIVISOR DE ÁGUAS
   ============================================================ */
.setup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.setup-intro p {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.7;
  margin-bottom: 1.15rem;
}
.setup-intro strong { color: var(--text-primary); font-weight: 600; }
.setup-truth {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, rgba(255, 170, 23, 0.07), transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.setup-truth p { margin: 0; color: var(--text-secondary); font-size: 1rem; }
.setup-truth em {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--accent-ink);
}

.pillars { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.pillar {
  position: relative;
  padding: 1.65rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  min-width: 0;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: 0 18px 44px -22px rgba(255, 170, 23, 0.5);
}

/* O pilar que está sendo lido ganha foco; os outros recuam.
   Só no desktop, onde a coluna de texto fica fixada ao lado. */
@media (min-width: 900px) {
  .js .pillar { transition: opacity 0.45s var(--e-out), transform 0.45s var(--e-out), border-color 0.45s var(--e-out), box-shadow 0.45s var(--e-out); }
  .js .pillars[data-track].is-tracking .pillar { opacity: 0.4; }
  .js .pillars[data-track].is-tracking .pillar.is-live {
    opacity: 1;
    border-color: var(--border-glow);
    box-shadow: 0 18px 44px -22px rgba(255, 170, 23, 0.45);
  }
  .js .pillars[data-track].is-tracking .pillar.is-live .pillar-icon {
    background: rgba(255, 170, 23, 0.16);
    border-color: rgba(255, 170, 23, 0.4);
  }
  /* Passar o mouse sobrepõe o rastreamento: intenção do usuário vence */
  .js .pillars[data-track].is-tracking .pillar:hover { opacity: 1; }
}
.pillar-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  background: rgba(255, 170, 23, 0.10);
  border: 1px solid rgba(255, 170, 23, 0.22);
  color: var(--accent-ink);
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}
.pillar p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; }
.pillar strong { color: var(--accent-ink); font-weight: 600; }

/* ============================================================
   SEÇÃO 5 — OBJEÇÕES (acordeão)
   ============================================================ */
.objections { display: grid; gap: 0.85rem; max-width: 900px; margin-inline: auto; }
.objection {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
  overflow: hidden;
  transition: border-color var(--t-base), background var(--t-base);
}
.objection:hover { border-color: var(--border-mid); }
.objection.open { border-color: var(--border-glow); background: rgba(255, 170, 23, 0.05); }

.objection-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  min-height: 44px;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.9vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  transition: color var(--t-fast);
}
.objection-q:hover { color: var(--accent-ink); }
.objection-icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-mid);
  color: var(--accent-ink);
  transition: transform var(--t-base), background var(--t-base);
  margin-top: 1px;
}
.objection.open .objection-icon { transform: rotate(45deg); background: rgba(255, 170, 23, 0.12); }

.objection-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.objection.open .objection-a { grid-template-rows: 1fr; }
.objection-a-inner { overflow: hidden; }
.objection-a p {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}
.objection-a strong { color: var(--text-primary); font-weight: 600; }
.objection-a .nota {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   SEÇÃO 6 — PROVA SOCIAL
   ============================================================ */
.autoridade-wrap {
  background:
    radial-gradient(ellipse at top left, rgba(255, 170, 23, 0.07), transparent 52%),
    radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.07), transparent 52%),
    var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.autoridade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.autoridade-text p {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  line-height: 1.72;
  margin-bottom: 1.1rem;
}
.autoridade-text strong { color: var(--text-primary); font-weight: 600; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.stat-card {
  padding: 1.4rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  text-align: center;
  transition: transform var(--t-base), border-color var(--t-base);
  min-width: 0;
}
.stat-card:hover { transform: translateY(-4px); border-color: var(--border-glow); }
.stat-card--featured {
  grid-column: span 2;
  border-color: var(--border-glow);
  background: radial-gradient(ellipse at center, rgba(255, 170, 23, 0.09), transparent 70%), var(--bg-card);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ============================================================
   SEÇÃO 7 — CTA FINAL + FORMULÁRIO
   ============================================================ */
.cta-final-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: start;
}
.cta-final-content h2 { margin-bottom: 1.25rem; }
.cta-final-sub {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.6vw, 1.05rem);   /* piso em 1rem: ver .section-subtitle */
  line-height: 1.7;
  margin-bottom: 2rem;
}
.cta-final-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; counter-reset: benefit; }
.cta-final-list li {
  position: relative;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  /* Sem isto, o `min-width: auto` do item flex infla o mínimo automático da
     trilha do grid e o <li> fica mais largo que o contêiner (visível a 320px). */
  min-width: 0;
  overflow-wrap: break-word;
}
.cta-final-list li::before {
  counter-increment: benefit;
  content: counter(benefit);
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bg-base);
  background: var(--gradient-accent);
  box-shadow: 0 4px 14px -4px rgba(255, 170, 23, 0.6);
}
.cta-final-list strong { color: var(--text-primary); font-weight: 600; }

/* --- Coroa 3D da coluna esquerda ---------------------------------
   A coluna vira flex e ESTICA até a altura do formulário; `margin-top:auto`
   no texto empurra a copy para o rodapé da coluna. É isso que abre o vão
   no topo onde a coroa gira. No mobile a coluna não tem folga para esticar,
   então o `auto` não sobra nada e as duas peças ficam simplesmente
   empilhadas — mesma regra, sem media query.

   O volume é uma pilha: 14 cópias da mesma coroa afastadas no eixo Z. De
   frente elas coincidem e o alfa se acumula; girando, a pilha se abre e o
   que era desenho plano vira espessura. Cada lâmina é opaca demais para
   sumir e transparente demais para esconder a de trás — é daí que vem a
   profundidade.

   O alfa por lâmina é baixo (0,06) porque esta coroa é CHEIA, não vazada:
   uma silhueta sólida repetida 14 vezes vira mancha muito antes que um
   contorno. 0,06 × 14 assenta em ~58% de frente, que é translúcido o
   bastante para a copy ao lado continuar mandando na coluna. */
.cta-final-content { display: flex; flex-direction: column; align-self: stretch; }
.cta-final-text { margin-top: auto; }

.coroa3d {
  --n: 14;                              /* lâminas — precisa bater com o HTML */
  --passo: clamp(2px, 0.55vw, 5px);     /* distância entre lâminas no eixo Z */
  position: relative;
  flex: 0 0 auto;                       /* item flex não encolhe a coroa */
  width: min(100%, clamp(200px, 42vw, 400px));
  aspect-ratio: 19 / 16;   /* a viewBox recortada da coroa do cabeçalho */
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
  perspective: 1000px;
  pointer-events: none;
}

/* O sprite só carrega o <symbol>; não desenha nada. */
.coroa3d-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Brilho de fundo. Fica FORA da cadeia 3D de propósito: `filter` achata o
   contexto de preservação, e um halo aplicado no palco mataria o giro. */
.coroa3d-halo {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(var(--coroa-azul), 0.20) 0%,
              rgba(var(--coroa-azul), 0.06) 55%,
              transparent 78%);
  filter: blur(10px);
}

/* Inclinação fixa no mundo: a coroa gira, o ponto de vista não. Sem ela o
   giro seria simétrico demais e leria como um recorte virando, não volume. */
.coroa3d-tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(-11deg);
  transform-style: preserve-3d;
}

.coroa3d-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: coroa-gira 18s linear infinite;
  will-change: transform;
}

.coroa3d-lamina {
  position: absolute;
  inset: 0;
  color: rgb(var(--coroa-azul));
  opacity: 0.06;
  /* Centraliza a pilha na origem: sem o deslocamento a coroa giraria em
     torno da lâmina de trás em vez de em torno do próprio eixo. */
  transform: translateZ(calc((var(--i) - (var(--n) - 1) / 2) * var(--passo)));
}
.coroa3d-lamina svg { display: block; width: 100%; height: 100%; }

@keyframes coroa-gira {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Movimento reduzido: a coroa para, mas de três quartos — parada de frente
   as 14 lâminas coincidem e o volume desaparece junto com a animação. */
@media (prefers-reduced-motion: reduce) {
  .coroa3d-spin { animation: none; transform: rotateY(-28deg); }
}

/* --- Formulário (diretriz 10) --- */
.form-card {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-mid);
  background:
    radial-gradient(ellipse at top, rgba(255, 170, 23, 0.07), transparent 58%),
    var(--bg-elevated);
  box-shadow: var(--shadow-lg), 0 0 70px -35px rgba(255, 170, 23, 0.45);
  position: relative;
  scroll-margin-top: 110px;
}
.form-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}
.form-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.form-sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.6rem; line-height: 1.55; }

.form-grid { display: grid; gap: 0.95rem; }

/* Campo com label flutuante */
.field { position: relative; min-width: 0; }
.field input,
.field select {
  width: 100%;
  padding: 1.35rem 1rem 0.55rem;
  min-height: 56px;
  background: rgba(var(--tinta), 0.045);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  /* 16px é obrigatório: abaixo disso o Safari do iOS dá zoom ao focar o
     campo e o usuário fica preso num layout ampliado, sem conseguir voltar. */
  font-size: 16px;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.field select { cursor: pointer; padding-right: 2.4rem; }
.field select option { background: var(--bg-elevated); color: var(--text-primary); }
.field input::placeholder { color: transparent; }

.field label {
  position: absolute;
  left: 1rem;
  top: 1.02rem;
  font-size: 16px;   /* acompanha o campo, já que age como placeholder */
  color: var(--text-muted);
  pointer-events: none;
  transition: transform var(--t-fast), font-size var(--t-fast), color var(--t-fast);
  transform-origin: left top;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select[data-filled="1"] + label {
  transform: translateY(-0.62rem) scale(0.78);
  color: var(--accent-ink);
}
.field select + label { color: var(--text-muted); }

.field input:focus,
.field select:focus {
  border-color: rgba(255, 170, 23, 0.5);
  background: rgba(var(--tinta), 0.07);
  box-shadow: 0 0 0 3px rgba(255, 170, 23, 0.10);
}

/* Seta do select */
.field-select::after {
  content: '';
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Telefone com prefixo BR */
.field-phone { display: flex; align-items: stretch; gap: 0.5rem; }
.field-phone .phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.85rem;
  flex-shrink: 0;
  background: rgba(var(--tinta), 0.045);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.field-phone .field { flex: 1 1 auto; }

/* Estados de validação inline */
.field input.is-invalid,
.field select.is-invalid { border-color: rgba(255, 107, 107, 0.65); background: rgba(255, 107, 107, 0.05); }
.field input.is-invalid:focus { border-color: rgba(255, 107, 107, 0.85); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12); }
.field input.is-valid { border-color: rgba(52, 211, 153, 0.45); }

.field-check {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--success);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.field input.is-valid ~ .field-check { opacity: 1; }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--danger-soft);
}
.field-error[hidden] { display: none; }
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 107, 107, 0.16);
  font-size: 0.6rem;
  font-weight: 700;
}

/* Consentimento LGPD (diretriz 14) */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.35rem;
  cursor: pointer;
  padding: 0.35rem 0;
  min-height: 44px;
}
.form-consent input[type="checkbox"] {
  width: 18px; height: 18px;
  min-width: 18px;
  margin-top: 2px;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.form-consent span { font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); }
.form-consent a { color: var(--accent-ink); text-decoration: underline; }
.form-consent.is-error input[type="checkbox"] { outline: 2px solid var(--danger); outline-offset: 2px; }

.form-disclaimer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.form-disclaimer svg { flex: 0 0 auto; margin-top: 2px; }
.form-disclaimer span { flex: 0 1 auto; text-align: left; }

/* Feedback global do formulário (diretriz 16 — erro empático) */
.form-alert {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  line-height: 1.55;
  border: 1px solid;
}
.form-alert[hidden] { display: none; }
.form-alert--error   { color: var(--danger-soft); background: rgba(255, 107, 107, 0.07); border-color: rgba(255, 107, 107, 0.30); }
.form-alert--success { color: #6EE7B7; background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); }
.form-alert svg { flex: 0 0 auto; margin-top: 1px; }

/* Honeypot (diretriz 15) — invisível para humanos */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* Turnstile */
.turnstile-slot { margin-top: 0.25rem; min-height: 0; }
.turnstile-slot:empty { display: none; }

/* Estado de sucesso */
.form-success { text-align: center; padding: 1rem 0; }
.form-success-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.15rem;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--success);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.form-success h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.6rem; }
.form-success p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* ============================================================
   PROVA SOCIAL — CONVERSAS REAIS
   Oito depoimentos em grade de 4 por linha. As cores de conversa
   (verde do WhatsApp no ✓✓) são semânticas, não decorativas: é a
   mesma exceção do botão flutuante.
   ============================================================ */
.talks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.talk-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.4rem 1.35rem 1.5rem;
  background: var(--gradient-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.talk-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  background: var(--bg-card-hover);
}

.talk-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}
.talk-card-avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 170, 23, 0.10);
  border: 1px solid rgba(255, 170, 23, 0.24);
  color: var(--accent-ink);
}
.talk-card-avatar svg { width: 15px; height: 15px; }
.talk-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.talk-card-check { flex: 0 0 auto; font-size: 0.8rem; color: var(--success); letter-spacing: -0.12em; }

/* `blockquote` porque é citação de verdade, não um parágrafo decorativo.
   A margem zero é obrigatória: o padrão do agente de usuário recua 40px. */
.talk-card-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.talk-card-body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* O número é o que se lê primeiro numa varredura rápida da grade. */
.talk-card-body strong { color: var(--text-primary); font-weight: 600; }

.talk-card-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem !important;
  line-height: 1.5 !important;
  color: var(--text-faded) !important;
}
.talk-card-note svg { flex: 0 0 auto; margin-top: 2px; }

/* 4 → 2 → 1. Não existe passo de 3 colunas: com 8 cards, três por linha
   deixa a última fileira com dois órfãos e a grade fica torta. */
@media (max-width: 1100px) {
  .talks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .talks-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .talk-card { padding: 1.2rem 1.15rem 1.3rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, transparent, rgba(var(--tinta),0.05));
  margin-top: 2rem;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-brand .logo { margin-bottom: 1.25rem; }
.footer-tag {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 340px;
  margin-bottom: 1.5rem;
}
.footer-tag strong { color: var(--text-primary); font-weight: 600; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col a {
  font-size: 0.94rem;
  color: var(--text-secondary);
  padding: 0.6rem 0;
  min-height: 44px;          /* diretriz 6 — área de toque */
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--accent-ink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer-mono { font-family: var(--font-mono); font-size: 0.78rem; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.footer-legal { color: var(--text-secondary); font-weight: 500; }
.footer-legal:hover { color: var(--accent-ink); }

/* ============================================================
   FLUTUANTES — CTA mobile (diretriz 6) + WhatsApp + cookies
   ============================================================ */
/* Ancorado entre as bordas, reservando a faixa direita do botão de WhatsApp,
   para os dois flutuantes nunca se sobreporem. */
.cta-floating {
  position: fixed;
  bottom: calc(1rem + var(--safe-b));
  left: calc(1rem + var(--safe-l));
  right: calc(4.9rem + var(--safe-r));
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.25rem;
  min-height: 48px;
  /* Este é `fixed` e a página rola atrás dele: miolo transparente deixaria o
     rótulo ilegível sobre o conteúdo passando. Véu branco com desfoque —
     sem clip-path, agora que não há contorno SVG para não recortar. */
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--cta);
  color: var(--cta-deep);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: center;
  border-radius: var(--radius-sm);
  transform: translateY(200%);
  transition: transform var(--t-base);
}
.cta-floating.visible { transform: translateY(0); }
.cta-floating:hover { transform: translateY(-4px); }
body.cookie-visible .cta-floating.visible { transform: translateY(calc(-1 * var(--cookie-h, 0px))); }

/* Diretriz 6 — o sticky CTA é ergonomia de polegar: existe só no mobile.
   No desktop o CTA do header já fica sempre visível, então ele só duplicaria. */
@media (min-width: 900px) { .cta-floating { display: none; } }

.wa-float {
  position: fixed;
  right: calc(1.15rem + var(--safe-r));
  bottom: calc(1.15rem + var(--safe-b));
  z-index: 96;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  /* Verde e glifo branco são a marca do WhatsApp e não seguem o tema da
     página — é o único elemento fora do preto/branco/amarelo, e é assim que
     tem de ser. Sobre preto o verde já salta sozinho, então o anel escuro que
     ele precisava no fundo branco sai e volta o halo verde de elevação. */
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.55);
  transition: transform var(--t-base), bottom 0.4s ease;
}
.wa-float:hover { transform: scale(1.08); }
body.cookie-visible .wa-float { bottom: calc(1.15rem + var(--safe-b) + var(--cookie-h, 0px)); }

.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -18px 50px -22px rgba(0, 0, 0, 0.75);
  transform: translateY(110%);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cookie-bar.show { transform: translateY(0); }
.cookie-bar-inner {
  /* Amarrado ao container: a barra é fixa e ocupa a tela toda, mas o miolo
     dela tem que morrer na mesma linha que o resto da página. Era 1180px
     fixo — com o container em 1100px ficaria mais larga que as seções. */
  max-width: var(--container-max); margin: 0 auto;
  padding: 0.9rem clamp(1rem, 4vw, 2rem);
  padding-bottom: calc(0.9rem + var(--safe-b));
  padding-left: calc(clamp(1rem, 4vw, 2rem) + var(--safe-l));
  padding-right: calc(clamp(1rem, 4vw, 2rem) + var(--safe-r));
  display: flex; align-items: center; gap: 0.85rem 1.25rem; flex-wrap: wrap;
}
.cookie-bar-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  background: rgba(255, 170, 23, 0.10); border: 1px solid rgba(255, 170, 23, 0.25);
}
.cookie-bar-text { flex: 1 1 320px; min-width: 200px; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }
.cookie-bar-text a { color: var(--accent-ink); text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: 0.55rem; flex-shrink: 0; margin-left: auto; }

/* Diretriz 14 — o aviso não pode enterrar conteúdo: enquanto visível,
   o corpo ganha o mesmo respiro da barra, então nada fica inalcançável. */
body.cookie-visible { padding-bottom: var(--cookie-h, 0px); }

/* Compacta no mobile para ocupar o mínimo de tela */
@media (max-width: 600px) {
  .cookie-bar-inner { padding: 0.7rem 1rem; gap: 0.6rem 0.8rem; }
  .cookie-bar-icon { width: 30px; height: 30px; font-size: 0.95rem; }
  .cookie-bar-text { font-size: 0.74rem; line-height: 1.45; flex-basis: 100%; }
  .cookie-bar-actions { width: 100%; margin-left: 0; }
  .cookie-bar-actions .btn { flex: 1 1 auto; }
}

/* ---------- UTILITÁRIOS ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #0A0A0A;
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   RESPONSIVO — mobile-first, breakpoints para cima (diretriz 6)
   ============================================================ */
@media (max-width: 899px) {
  .nav-desktop { display: none; }
  .btn-header-cta { display: none; }
  .menu-toggle { display: block; }
  .float-card { display: none; }   /* evita overflow lateral no mobile */

  /* Sem colunas, o subtítulo cairia depois do CTA — pediria a ação antes de
     explicar a oferta. `display: contents` promove os filhos do bloco de
     conteúdo a itens do grid, e aí a ordem pode ser intercalada.
     O row-gap vai a zero porque o espaçamento já vem das margens de cada peça. */
  .hero-inner { row-gap: 0; }
  .hero-content { display: contents; }

  /* Com `display: contents` no pai, TODO filho vira item do grid e precisa da
     sua posição aqui — sem `order`, o padrão 0 o jogaria para antes do badge. */
  .hero .badge      { order: 1; }
  .hero-title       { order: 2; }
  .hero-deck        { order: 3; }
  .hero-subtitle    { order: 4; margin-bottom: 2.25rem; }
  .hero-actions     { order: 5; }
  .hero-cta-note    { order: 6; }
  .hero-trust       { order: 7; }
  .hero-visual      { order: 8; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
}

@media (min-width: 700px) {
  .frank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .stats-grid { gap: 1rem; }
  .form-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .nav-mobile { display: none !important; }

  /* Coluna 1: o bloco de conteúdo, atravessando as duas linhas.
     Coluna 2: imagem em cima, subtítulo logo abaixo dela. */
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 1.6rem;
    align-items: center;
  }
  .hero-content  { grid-column: 1; grid-row: 1 / span 2; }
  .hero-visual   { grid-column: 2; grid-row: 1; align-self: end; }
  .hero-subtitle { grid-column: 2; grid-row: 2; max-width: none; align-self: start; }
  .setup-grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  /* A coluna de texto acompanha a rolagem dos pilares em vez de deixar um vazio */
  .setup-intro { position: sticky; top: 120px; }
  .autoridade-grid { grid-template-columns: 1.15fr 0.85fr; }
  .cta-final-grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }

  /* Comparativo vira tabela real de 3 colunas */
  .compare-head { display: grid; }
  .compare-row { grid-template-columns: 1.05fr 1fr 1.15fr; }
  .compare-tag { display: none; }
  .compare-cell { padding: 1.5rem 1.6rem; }
}

@media (min-width: 1100px) {
  .frank-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frank-card { padding: 1.75rem 1.4rem 1.75rem 1.4rem; }
  .frank-card::before { position: static; margin-bottom: 1.1rem; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* Ajustes finos de telas pequenas */
@media (max-width: 480px) {
  .hero { padding-top: clamp(6.5rem, 22vw, 8rem); }
  .hero-trust { gap: 1rem 1.5rem; }
  .cookie-bar-actions { width: 100%; margin-left: 0; }
  .cookie-bar-actions .btn { flex: 1 1 auto; }
  .field-phone { flex-wrap: nowrap; }
  .field-phone .phone-prefix { padding: 0 0.6rem; font-size: 0.85rem; }
  .compare-cell { padding: 1.15rem 1.15rem; }
}

/* ============================================================
   PÁGINAS LEGAIS (privacidade.html · termos.html)
   ============================================================ */
.legal-page { position: relative; z-index: 1; padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem clamp(3rem, 6vw, 5rem); }
.legal-top { max-width: 780px; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }
.legal-logo { display: inline-block; }
.legal-logo img { height: 40px; width: auto; }

.legal-head { max-width: 780px; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); }
.legal-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.75rem; }
.legal-title { font-family: var(--font-display); font-size: clamp(1.78rem, 4.3vw, 2.4rem); font-weight: 700; line-height: 1.1; margin-bottom: 0.85rem; }
.legal-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }

.legal-card {
  max-width: 780px; margin: 0 auto;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.7);
}
.legal-card > *:first-child { margin-top: 0; }
.legal-intro { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.25rem; }
.legal-callout {
  background: rgba(255, 170, 23, 0.07); border: 1px solid rgba(255, 170, 23, 0.25);
  border-radius: 14px; padding: 1rem 1.15rem; font-size: 0.92rem; line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 2rem;
}
.legal-card h2 {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  color: var(--text-primary); margin: 2.1rem 0 0.75rem; padding-top: 0.2rem;
  display: flex; align-items: baseline; gap: 0.55rem;
}
.legal-card h2 .n { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); font-weight: 500; }
.legal-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin: 0 0 0.85rem; }
.legal-card ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.legal-card li { position: relative; padding-left: 1.3rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }
.legal-card li::before { content: '›'; position: absolute; left: 0; top: -0.05rem; color: var(--accent-ink); font-weight: 700; }
.legal-card li strong, .legal-card p strong { color: var(--text-primary); font-weight: 600; }
.legal-card a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-card a:hover { color: var(--accent-ink); }
.legal-contact { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border-subtle); }
.legal-updated { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); margin-top: 2rem; }
.legal-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; min-height: 44px; }
.legal-back:hover { color: var(--accent-ink); }

/* Impressão — mantém a copy legível */
@media print {
  .site-header, .cta-floating, .wa-float, .cookie-bar, .form-card { display: none !important; }
  body { background: #fff; color: #000; }
  /* Sem isto o texto em gradiente imprime transparente sobre o branco — e o
     H1 do hero é inteiro gradiente, ou seja, a manchete sumiria da folha. */
  .text-gradient {
    background: none;
    color: #000;
    -webkit-text-fill-color: #000;
  }
  /* No papel o azul da borda perde força; currentColor garante o contorno. */
  .btn-primary { border-color: currentColor !important; }
}