/* ── ARKANO LP v16 — energia cósmica, tarot, dor do cliente ── */
/* Paleta: azul #0077b6, ciano #00c4e8/#00d4ff, fundo #020408, texto #ececec */
/* ATENÇÃO: este arquivo é baked na imagem Docker.                            */
/* Qualquer edição exige: docker compose build web + docker compose up -d --force-recreate web */

/* ── TOKENS DE DESIGN (CSS custom properties) ──────────────────────────────
   Ponto único de controle da paleta — alterar aqui propaga para todo o CSS.
   Não reinventar cores fora destas variáveis: a paleta é fixa e documentada.
── */
:root {
  --bg:            #020408;                    /* fundo da página */
  --bg-card:       rgba(0, 196, 232, 0.018);   /* fundo dos cards/steps (quase transparente) */
  --cyan:          #00c4e8;                    /* cor principal de destaque */
  --cyan-bright:   #00d4ff;                    /* variante mais brilhante (hover/ativo) */
  --blue:          #0077b6;                    /* azul para gradientes e botões */
  --white:         #ececec;                    /* texto principal */
  --text-body:     #a0a0b0;                    /* texto secundário */
  --text-muted:    #52525b;                    /* texto fraco / metadados */
  --border:        rgba(0, 196, 232, 0.1);     /* borda padrão dos cards */
  --border-bright: rgba(0, 196, 232, 0.26);    /* borda hover/ativa dos cards */
}

/* ── RESET MÍNIMO ── */
/* box-sizing: border-box — padding/border incluídos na largura declarada */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll suave para âncoras internas (#cta-final, etc.) */
html { scroll-behavior: smooth; }

/* ── BODY — fundo e textura ─────────────────────────────────────────────────
   background-image com 3 camadas (empilhadas de cima para baixo):
   1. SVG de ruído fractal (grain): textura orgânica, opacity 0.025 — quase imperceptível
      Inline data URI para evitar request HTTP extra.
   2. radial-gradient topo: halo cyan suave no centro-superior da página
   3. radial-gradient canto inferior-esquerdo: reflexo azul tênue
   Juntos formam o "cosmos" visual sem usar imagens pesadas.
── */
body {
  font-family: 'Raleway', sans-serif;
  background-color: var(--bg);
  background-image:
    /* camada 1: grain SVG fractal — textura de "cosmos" */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"),
    /* camada 2: halo cyan no topo (hero area) */
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(0, 196, 232, 0.065) 0%, transparent 65%),
    /* camada 3: acento azul no canto inferior-esquerdo */
    radial-gradient(ellipse 55% 45% at 15% 88%, rgba(0, 119, 182, 0.04) 0%, transparent 60%);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;  /* impede scroll horizontal em mobile */
}

/* ── ORBE PULSANTE (body::before) ───────────────────────────────────────────
   Pseudo-elemento fixo: círculo de luz suave que pulsa atrás de todo o conteúdo.
   position:fixed = não move com scroll — efeito de "profundidade".
   top:-15% + transform:translateX(-50%) = centralizado e levemente acima da tela.
   pointer-events:none = não interfere com cliques.
   z-index:0 = abaixo do .lp-wrapper (z-index:1).
── */
body::before {
  content: '';
  position: fixed;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 196, 232, 0.038) 0%, transparent 70%);
  border-radius: 50%;
  animation: bgPulse 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* pulsação lenta do orbe: opacity 0.5→1 + scale 1→1.1 */
@keyframes bgPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

/* ── WRAPPER ─────────────────────────────────────────────────────────────────
   Container central com max-width para limitar largura de leitura.
   z-index:1 > body::before (0) — conteúdo visível acima do orbe.
── */
.lp-wrapper {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── PRIMEIRA TELA ───────────────────────────────────────────────────────────
   min-height:100svh — svh = "small viewport height" (iOS Safari: exclui a barra de URL).
   100vh em iOS inclui a barra do Safari, causando corte; svh é o valor real seguro.
   position:relative + overflow:hidden: necessários para conter o .hero-visual absoluto
   sem que ele sangre para fora da first-screen.
── */
.lp-first-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ── HERO VISUAL (imagem de cartas de tarot) ─────────────────────────────────
   Decorativo — posicionado absolutamente na metade inferior da first-screen.
   position:absolute (parent = .lp-first-screen com position:relative).
   bottom/left/right:0 — âncora nos cantos inferiores.

   height:40%: caixa reduzida — topo alinhado abaixo da última linha do bloco de texto.
     Valor anterior (52%) fazia a caixa começar acima do fim do texto em algumas telas.
     Com 40%, o topo da caixa fica a 60% da viewport (abaixo do texto em todos os temas).

   background-size: auto 52svh — mantém tamanho visual original da imagem (52% da viewport,
     igual ao tamanho efetivo anterior com contain+52%). A caixa tem apenas 40svh de altura:
     a diferença (12svh) sangra acima da borda do container e é clipada pelo
     overflow:hidden do .lp-first-screen — sem impacto visual no texto. | 2026-03-31

   background-position: center bottom — ancora a base da imagem na base da caixa
     (= base da tela), sangramento ocorre no topo (clipado, invisível). | 2026-03-31

   opacity:0.55 + filter blur/brightness: efeito "onírico" (dreamlike).
   pointer-events:none: garante que não bloqueia cliques no conteúdo acima.
   z-index:0: abaixo do .lp-logo e .hero (z-index:1 via seus próprios estilos).

   Imagens WebP em 4 tamanhos — CSS media query abaixo troca automaticamente.
   ATENÇÃO: imagens baked no Docker — trocar exige rebuild completo.
── */
.hero-visual {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%; /* caixa termina na última linha do texto — reduzido de 52% | 2026-03-31 */
  /* auto 52svh: imagem mantém tamanho original; center bottom ancora na base | 2026-03-31 */
  background: url('/static/img/hero-tarot-480.webp') center bottom / auto 52svh no-repeat;
  opacity: 0.55;
  filter: blur(0.8px) brightness(0.88);
  pointer-events: none;
  z-index: 0;
}

/* ── VIGNETTE DO HERO VISUAL (::after) ───────────────────────────────────────
   Pseudo-elemento sobre a imagem que funde as bordas com o fundo da página.
   inset:0 = cobre exatamente o mesmo espaço do .hero-visual.

   Usa radial-gradient em vez de linear-gradient em 4 direções porque:
   - 4 lineares criam um "retângulo escuro" visível no centro (efeito indesejado).
   - radial elipse cria fade suave que sai do centro transparente para as bordas sólidas.

   rgba(2,4,8,0) em vez de "transparent":
   - Navegadores antigos interpolam "transparent" como rgba(0,0,0,0) (preto transparente)
     causando um halo escuro na borda entre transparente e opaco.
   - rgba(2,4,8,0) = versão transparente da cor de fundo (#020408) → sem halo.

   at 50% 40%: centro ajustado para cima — com a imagem ancorada na base (center bottom)
     e caixa menor (40% vs 52% anterior), o centro visual das cartas fica no terço
     superior-central do container. Gradiente centrado aí maximiza a área visível. | 2026-03-31
   30% transparente → 72% sólido: zona de transição de 42% = fade gradual e suave.
── */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  /* centro em 50% 40%: ajustado para nova âncora center bottom | 2026-03-31 */
  background: radial-gradient(ellipse 78% 68% at 50% 40%, rgba(2,4,8,0) 30%, #020408 72%);
}

/* ── IMAGENS RESPONSIVAS DO HERO VISUAL ─────────────────────────────────────
   4 variantes WebP servidas conforme largura da viewport:
   480px: mobile pequeno (53KB)
   768px: mobile grande / tablet (147KB)
   1280px: desktop (391KB)
   1920px: desktop grande / Retina (688KB)
   Em tablets/desktop a posição muda para "center center" — mais espaço disponível.
── */
/* mantém auto 52svh + center bottom em todos os breakpoints — tamanho consistente | 2026-03-31 */
@media (min-width: 481px) {
  .hero-visual {
    background: url('/static/img/hero-tarot-768.webp') center bottom / auto 52svh no-repeat;
  }
}

@media (min-width: 769px) {
  .hero-visual {
    background: url('/static/img/hero-tarot-1280.webp') center bottom / auto 52svh no-repeat;
  }
}

@media (min-width: 1281px) {
  .hero-visual {
    background: url('/static/img/hero-tarot-1920.webp') center bottom / auto 52svh no-repeat;
  }
}

/* ── LOGO — horizontal compacto ─────────────────────────────────────────────
   position:relative z-index:1: fica acima do .hero-visual (z-index:0).
   Flex row: ícone SVG + wordmark lado a lado.
── */
.lp-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  padding: 1.5rem 0 0;
  position: relative;
  z-index: 1;
}

/* ícone olho místico SVG: glow pulsante em cyan */
.lp-eye {
  width: 48px;
  height: 32px;
  color: var(--cyan);
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 5px rgba(0, 196, 232, 0.85))
    drop-shadow(0 0 16px rgba(0, 196, 232, 0.42));
  animation: eyePulse 5s ease-in-out infinite;
}

/* pulsação do glow do olho: intensifica o drop-shadow a cada 2.5s */
@keyframes eyePulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(0,196,232,0.85)) drop-shadow(0 0 16px rgba(0,196,232,0.42));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(0,196,232,1)) drop-shadow(0 0 28px rgba(0,196,232,0.62));
  }
}

/* wordmark em uppercase espaçado — estilo místico/ritual */
.lp-wordmark {
  font-family: 'Philosopher', serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 196, 232, 0.38);
}

/* ── HERO ────────────────────────────────────────────────────────────────────
   flex:1 — ocupa o espaço restante da first-screen depois do logo.
   align-items:center + text-align:center: conteúdo centralizado.
   clamp(1.2rem, 8svh, 6rem): padding-top responsivo — adapta a diferentes alturas de tela.
   fadeUp: animação de entrada — conteúdo sobe e aparece após 0.05s de delay.
   position:relative z-index:1: acima do .hero-visual (z-index:0).
── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.2rem, 8svh, 6rem) 0 0;
  text-align: center;
  animation: fadeUp 0.8s 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  position: relative;
  z-index: 1;
}

.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1.1rem;
}

/* badge de categoria: pill arredondado com borda cyan tênue */
.hero-badge {
  display: inline-block;
  padding: 0.28rem 0.95rem;
  background: rgba(0, 196, 232, 0.065);
  border: 1px solid rgba(0, 196, 232, 0.18);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* headline: Philosopher serif, clamp para fluidez entre breakpoints */
.headline {
  font-family: 'Philosopher', serif;
  font-size: clamp(1.87rem, 6.05vw, 2.97rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;  /* distribui texto igualmente nas linhas — evita linha final muito curta */
  width: 100%;
}

/* <em> no headline: parte destacada em cyan, 12% maior, com glow */
/* display:block = quebra de linha automática entre as duas partes do título */
.headline em {
  display: block;
  font-style: normal;
  font-size: 112%;
  color: var(--cyan);
  text-shadow: 0 0 28px rgba(0, 196, 232, 0.48);
  text-wrap: balance;
  margin-top: 0.08em;
}

/* subheadline: alinhado à esquerda — mais legível em blocos de texto corrido */
.subheadline {
  font-size: 0.97rem;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.78;
  text-align: left;
  width: 100%;
}

/* ── CONTADOR DE LEITURAS ───────────────────────────────────────────────────
   Social proof numérico — exibido apenas se total_leituras > threshold (Jinja2).
   Baseline alignment: número grande + label pequeno alinhados pela base.
── */
.hero-counter {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: center;
}

.hero-counter-num {
  font-family: 'Philosopher', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cyan);
  opacity: 0.82;
  letter-spacing: 0.04em;
}

.hero-counter-label {
  font-size: 0.73rem;
  font-weight: 400;
  color: var(--white); /* branco para contraste; sombra preta garante legibilidade sobre imagem | 2026-03-31 */
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── CTA PRÉ-HERO (badge gratuita + botão principal) ────────────────────────
   margin-top:auto: empurra o bloco para baixo — CTA sempre na parte inferior da hero.
   margin-bottom:4rem: espaço entre CTA e o início da .lp-first-screen (onde a imagem começa).
── */
.cta-pre {
  margin-top: auto;
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* badge "gratuito" acima do botão — reduz ansiedade antes do clique */
.cta-pre-badge {
  display: inline-block;
  padding: 0.28rem 0.9rem;
  background: rgba(0, 196, 232, 0.07);
  border: 1px solid rgba(0, 196, 232, 0.2);
  border-radius: 100px;
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cyan);
  text-transform: uppercase;
}

/* ── BOTÃO CTA ───────────────────────────────────────────────────────────────
   Gradiente azul→cyan (135°).
   Cor do texto: fundo escuro (#020408) para contraste máximo no gradiente claro.
   ctaPulse: box-shadow pulsa suavemente — botão "respira" para atrair atenção.
   Hover: inverte para outline (fundo transparente + borda cyan) — feedback visual limpo.
   animation:none no hover — evita conflito entre pulse e hover.
── */
.cta-btn {
  display: inline-block;
  padding: 1rem 3rem;
  background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
  color: #020408;  /* texto escuro sobre gradiente claro */
  border: 1px solid transparent;
  font-family: 'Philosopher', serif;
  font-size: 0.90rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(0, 196, 232, 0.28), 0 4px 18px rgba(0, 0, 0, 0.35);
  animation: ctaPulse 3.5s ease-in-out infinite;
  transition: background 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, border-color 0.3s ease;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 26px rgba(0, 196, 232, 0.28), 0 4px 18px rgba(0,0,0,0.35); }
  50%       { box-shadow: 0 0 44px rgba(0, 196, 232, 0.48), 0 4px 22px rgba(0,0,0,0.4); }
}

/* hover: inverte para outline, cancela animação de pulso */
.cta-btn:hover {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 50px rgba(0, 196, 232, 0.5), 0 4px 20px rgba(0,0,0,0.4);
  animation: none;
}

/* ── SEPARADOR COM SÍMBOLO ───────────────────────────────────────────────────
   Flex row: linhas horizontais laterais (::before/::after com flex:1) + símbolo central.
   Linhas: linear-gradient transparente→cyan→transparente — fade nas pontas.
── */
.sep {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 auto 3rem;
  width: 100%;
  font-size: 0.77rem;
  color: rgba(0, 196, 232, 0.32);
  letter-spacing: 0.12em;
}

.sep::before,
.sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,196,232,0.18), transparent);
}

/* ── COMO FUNCIONA ───────────────────────────────────────────────────────────
   margin-top:-2rem: sobrepõe levemente a first-screen — suaviza a transição visual.
   fadeUp: animação de entrada com 0.2s de delay (após o hero).
── */
.como-funciona {
  padding: 0 0 4rem;
  margin-top: -2rem;
  animation: fadeUp 0.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* label de seção: uppercase espaçado — estilo "ritual" | ajustado 2026-04-04 */
.section-label {
  text-align: center;
  font-family: 'Philosopher', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.82;
  margin-top: 3.5rem;
  margin-bottom: 2rem;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ── STEP (accordion) ────────────────────────────────────────────────────────
   Card de step: borda esquerda cyan (2px) como indicador visual de seleção.
   position:relative + overflow:hidden: para o watermark (::before) não sangrar.
   transition: borda e fundo mudam suavemente ao abrir/fechar.
── */
.step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}

/* watermark numérico decorativo (::before usando attr(data-num)) */
/* opacity muito baixa (0.03) — presente mas não distrai do conteúdo */
.step::before {
  content: attr(data-num);  /* lê o atributo data-num="01" do HTML */
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Philosopher', serif;
  font-size: 4.95rem;
  font-weight: 700;
  color: var(--cyan);
  opacity: 0.03;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s;
}

/* .is-open: step expandido — fundo e bordas mais brilhantes */
.step.is-open {
  background: rgba(0, 196, 232, 0.026);
  border-color: var(--border-bright);
  border-left-color: var(--cyan-bright);
}

/* watermark mais visível quando expandido */
.step.is-open::before { opacity: 0.055; }

/* cabeçalho clicável do accordion */
.step-summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  user-select: none;  /* evita seleção de texto ao clicar rápido */
}

/* número do step com glow */
.step-num {
  font-family: 'Philosopher', serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 196, 232, 0.55);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2rem;
  text-align: center;
}

.step-label {
  font-size: 0.97rem;
  font-weight: 500;
  color: #d4d4d8;
  line-height: 1.4;
  flex: 1;
}

/* seta: rota 90° quando .is-open (CSS transition) */
.step-arrow {
  color: var(--cyan);
  opacity: 0.5;
  font-size: 1.21rem;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s;
  line-height: 1;
}
.step.is-open .step-arrow { transform: rotate(90deg); opacity: 0.8; }

/* ── CURTAIN ANIMATION ───────────────────────────────────────────────────────
   max-height:0 → 600px com transition: "cortina" que desce ao abrir.
   Por que max-height e não height?
   - height:auto não é animável em CSS puro.
   - max-height com valor maior que o conteúdo real permite a transição.
   - 600px é suficiente para o conteúdo mais longo — não causa delay perceptível.
   overflow:hidden: esconde o conteúdo quando max-height:0.
── */
.step-expanded-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.step.is-open .step-expanded-wrap { max-height: 600px; }

/* layout interno do conteúdo expandido: texto + carta lado a lado */
.step-expanded {
  display: flex;
  gap: 1.2rem;
  padding: 0 1.5rem 1.4rem;
  align-items: flex-start;
}

.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* título do step expandido: serif maior para hierarquia visual */
.step-title {
  font-family: 'Cormorant Garamond', 'Philosopher', serif;
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.45;
}

.step-text {
  font-size: 0.91rem;
  font-weight: 400;
  color: #9090a8;
  line-height: 1.78;
}

/* frase final: itálica e levemente mais clara que o text-body */
.step-final {
  font-size: 0.91rem;
  font-style: italic;
  color: #d0d0d8;
  line-height: 1.5;
}

/* nome do arcano associado ao step — copy místico, cyan tênue */
.step-arcana {
  font-size: 0.79rem;
  color: var(--cyan);
  opacity: 0.72;
  letter-spacing: 0.06em;
  margin-top: 0.1rem;
}

/* ── MICRO-CTA NOS STEPS ────────────────────────────────────────────────────
   Link âncora para #cta-final — permite converter sem rolar até o final da página.
   Estilo discreto (underline pontilhado) para não competir com o CTA principal.
── */
.step-micro-cta {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: 'Philosopher', serif;
  font-size: 0.81rem;
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 0.08em;
  opacity: 0.75;
  border-bottom: 1px dashed rgba(0, 196, 232, 0.28);
  padding-bottom: 0.05rem;
  transition: opacity 0.2s;
}
.step-micro-cta:hover { opacity: 1; }

/* ── CARTA DE TAROT NO STEP ─────────────────────────────────────────────────
   Imagem clicável que abre o modal com o significado do arcano.
   cardAura: animação de glow pulsante + leve scale — efeito "vivo".
   cursor:pointer sinaliza que a carta é clicável.
   object-fit:cover: preenche o container sem distorção.
── */
.step-card {
  width: 76px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  object-fit: cover;
  cursor: pointer;
  animation: cardAura 4.5s ease-in-out infinite;
}

@keyframes cardAura {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(0,196,232,0.5)) drop-shadow(0 0 14px rgba(0,196,232,0.22));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(0,196,232,0.85)) drop-shadow(0 0 24px rgba(0,196,232,0.38));
    transform: scale(1.04);
  }
}

/* ── MODAL DE CARTA ──────────────────────────────────────────────────────────
   Overlay fullscreen: opacity:0 + pointer-events:none por padrão (invisível e inerte).
   .active: opacity:1 + pointer-events:auto (JS adiciona a classe).
   backdrop: rgba muito escuro para isolar o card modal do fundo.
── */
.card-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.9);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.card-modal-overlay.active { opacity: 1; pointer-events: auto; }

/* box do modal: translateY(14px) → 0 ao abrir — efeito de "surgir" */
.card-modal-box {
  position: relative;
  background: rgba(4, 12, 18, 0.98);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 2rem 1.5rem 1.5rem;
  width: 100%;
  max-width: 580px;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  transform: translateY(14px);  /* começa levemente abaixo */
  transition: transform 0.3s ease;
  box-shadow: 0 0 50px rgba(0, 196, 232, 0.09);
}
.card-modal-overlay.active .card-modal-box { transform: translateY(0); }

/* botão fechar modal (×) */
.card-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  color: var(--text-muted);
  font-size: 1.65rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  transition: color 0.2s;
}
.card-modal-close:hover { color: var(--cyan); }

/* imagem da carta no modal: maior, com glow */
.card-modal-img {
  width: 110px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--border-bright);
  box-shadow: 0 0 24px rgba(0, 196, 232, 0.28);
}

.card-modal-info { flex: 1; }

.card-modal-title {
  font-family: 'Philosopher', serif;
  font-size: 1.21rem;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0, 196, 232, 0.42);
  margin-bottom: 0.7rem;
  line-height: 1.3;
}

.card-modal-text {
  font-size: 0.92rem;
  color: #b8b8c4;
  line-height: 1.78;
}

/* ── DEPOIMENTOS ─────────────────────────────────────────────────────────────
   Grid 2 colunas em desktop — 1 coluna em mobile (via @media abaixo).
   Animação fadeUp com 0.35s delay (aparece depois do como-funciona).
── */
.depoimentos {
  padding: 0 0 3.5rem;
  animation: fadeUp 0.8s 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.dep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 colunas — collapsa para 1 em mobile */
  gap: 0.85rem;
}

.dep-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color 0.25s, background 0.25s;
}

.dep-card:hover {
  background: rgba(0, 196, 232, 0.026);
  border-color: var(--border-bright);
}

/* depoimento destaque: ocupa as 2 colunas, layout horizontal (row) */
/* grid-column:1/-1 = span completo independente do número de colunas */
.dep-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.4rem 1.2rem;
  border-left: 2px solid rgba(0, 196, 232, 0.3);  /* indicador visual de destaque */
}

/* avatar do featured: coluna vertical centralizada, maior */
.dep-card.featured .dep-header {
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 80px;
  gap: 0.45rem;
}

.dep-card.featured .dep-avatar {
  width: 60px;
  height: 60px;
}

.dep-card.featured .dep-meta { text-align: center; }

/* quote do featured: mais clara e levemente maior */
.dep-card.featured .dep-quote {
  flex: 1;
  font-size: 0.95rem;
  font-style: normal;
  color: #c0c0cc;
  line-height: 1.82;
  padding-left: 1.2rem;  /* espaço para a barra lateral (::before) */
}

/* cor da barra lateral do featured (sobreescreve o padrão) */
.dep-card.featured .dep-quote::before {
  background: rgba(0, 196, 232, 0.22);
}

/* header de avatar + meta para cards normais */
.dep-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* avatar circular com borda e glow */
.dep-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;  /* prioriza o rosto (parte superior da foto) */
  border: 1px solid var(--border-bright);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 196, 232, 0.14);
}

.dep-meta { flex: 1; min-width: 0; }

/* nome: branco, truncado com ellipsis se muito longo */
.dep-name {
  font-family: 'Philosopher', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-location {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: 0.1rem;
}

/* estrelas em cyan tênue */
.dep-stars {
  color: var(--cyan);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  opacity: 0.72;
  margin-top: 0.15rem;
}

/* quote: itálica, barra lateral cyan à esquerda (::before) */
.dep-quote {
  font-size: 0.87rem;
  font-weight: 400;
  color: #9898a8;
  line-height: 1.78;
  font-style: italic;
  position: relative;
  padding-left: 0.9rem;
}

/* barra lateral da quote: linha vertical cyan tênue */
.dep-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  background: rgba(0, 196, 232, 0.28);
  border-radius: 1px;
}

/* ── CTA INLINE após depoimentos ── */
/* aparece imediatamente após os depoimentos — reduz fricção para conversão */
.cta-inline {
  padding: 0.5rem 0 3.5rem;
  text-align: center;
}

/* ── QUEBRA DE OBJEÇÃO ───────────────────────────────────────────────────────
   Técnica de copy: "problema riscado → solução" — antecipa e neutraliza objeções.
   fadeUp com 0.5s delay — aparece por último na sequência de entrada.
── */
.objecao {
  padding: 0 0 4rem;
  text-align: center;
  animation: fadeUp 0.8s 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

/* texto dos problemas riscados: muted + <s> para o strikethrough */
.ob-problem {
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 2.4;
}

/* <s> dentro de .ob-problem: linha de risco com opacidade reduzida */
.ob-problem s {
  text-decoration: line-through;
  text-decoration-color: rgba(82, 82, 91, 0.55);
  opacity: 0.72;
}

/* solução: serif grande com glow — contraste máximo com os problemas acima */
.ob-solution {
  font-family: 'Cormorant Garamond', 'Philosopher', serif;
  font-size: clamp(1.43rem, 4.62vw, 2.04rem);
  font-weight: 600;
  color: var(--cyan);
  text-shadow: 0 0 28px rgba(0, 196, 232, 0.38);
  line-height: 1.5;
  text-wrap: balance;
}

/* detalhe técnico: especifica os diferenciais (carta natal, numerologia, etc.) */
.ob-detail {
  font-size: 0.92rem;
  color: #b0b0bc;
  line-height: 1.9;
}

/* <em> em ob-detail: ênfase branca sem itálico — destaque sutil */
.ob-detail em {
  font-style: normal;
  color: var(--white);
  font-weight: 600;
}

/* ── CTA FINAL ───────────────────────────────────────────────────────────────
   id="cta-final" no HTML: âncora dos micro-CTAs dos steps + alvo do IntersectionObserver.
   padding-bottom:7rem: espaço para não ficar escondido pelo sticky CTA.
── */
.cta-final {
  padding: 0 0 7rem;
  text-align: center;
  animation: fadeUp 0.8s 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* linha de encerramento: itálica, menor, emotiva — "você já sabe por que veio" */
.cta-closing-line {
  font-family: 'Cormorant Garamond', 'Philosopher', serif;
  font-size: clamp(1.1rem, 3.52vw, 1.32rem);
  font-weight: 400;
  font-style: italic;
  color: #b0b0bc;
  line-height: 1.5;
  text-wrap: balance;
}

/* tagline opcional abaixo do CTA — atualmente não usado no HTML */
.cta-tagline {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'Philosopher', serif;
}

/* ── STICKY CTA ──────────────────────────────────────────────────────────────
   Barra fixada no rodapé da viewport — aparece quando nenhum CTA principal está visível.
   Começa fora da tela (translateY(100%)) — JS adiciona .visible para deslizar pra cima.
   backdrop-filter:blur — efeito fosco no fundo (suportado em Safari/Chrome moderno).
   -webkit-backdrop-filter: prefixo necessário para Safari iOS.
   z-index:500 — abaixo do modal de carta (999) e do exit intent (1000).
── */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: rgba(2, 4, 8, 0.95);
  border-top: 1px solid rgba(0, 196, 232, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);  /* Safari iOS */
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(100%);  /* oculto abaixo da viewport por padrão */
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* .visible: JS adiciona quando ambos CTAs principais saem da viewport */
.sticky-cta.visible { transform: translateY(0); }

.sticky-cta-text {
  font-size: 0.81rem;
  color: var(--text-body);
  letter-spacing: 0.04em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* botão menor no sticky — menos padding que o CTA principal */
.sticky-cta-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #020408;
  border: none;
  font-family: 'Philosopher', serif;
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 196, 232, 0.2);
  transition: box-shadow 0.2s;
}
.sticky-cta-btn:hover { box-shadow: 0 0 28px rgba(0, 196, 232, 0.4); }

/* ── EXIT INTENT ─────────────────────────────────────────────────────────────
   Overlay fullscreen: opacity:0 + pointer-events:none por padrão.
   .active: JS adiciona quando detecta intenção de saída.
   z-index:1000 — o mais alto da página (acima do modal de carta: 999).
── */
.exit-intent {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 8, 0.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.exit-intent.active { opacity: 1; pointer-events: auto; }

/* box do exit intent: translateY(10px) → 0 ao abrir — efeito de surgir */
.exit-intent-box {
  position: relative;
  background: rgba(4, 10, 16, 0.98);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 2.5rem 2rem 2rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: translateY(10px);
  transition: transform 0.3s ease;
  box-shadow: 0 0 60px rgba(0, 196, 232, 0.1);
}
.exit-intent.active .exit-intent-box { transform: translateY(0); }

/* botão fechar (×) do exit intent */
.exit-intent-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  color: var(--text-muted);
  font-size: 1.54rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  transition: color 0.2s;
}
.exit-intent-close:hover { color: var(--cyan); }

.exit-intent-title {
  font-family: 'Philosopher', serif;
  font-size: 1.21rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

.exit-intent-body {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.65;
}

/* ── ANIMAÇÕES ───────────────────────────────────────────────────────────────
   fadeUp: elemento aparece subindo 20px — usado em hero, steps, depoimentos, etc.
   "both" no animation-fill-mode: aplica estado inicial antes de começar (evita flash).
── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ACESSIBILIDADE: REDUÇÃO DE MOVIMENTO ────────────────────────────────────
   prefers-reduced-motion: respeita configuração do SO (acessibilidade).
   Cancela todas as animações e transições para usuários sensíveis a movimento.
── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── DESKTOP (≥768px) ────────────────────────────────────────────────────────
   max-width maior e mais padding lateral.
   headline: tamanho fixo no teto do clamp.
   sticky-cta: centralizado com max-width igual ao wrapper, bordas laterais arredondadas.
   A dupla transform em .sticky-cta.visible (translate + translateY) necessária porque
   o translate(-50%) posiciona e translateY(0) desoculta — não podem ser separados.
── */
@media (min-width: 768px) {
  .lp-wrapper { max-width: 700px; padding: 0 2.5rem; }
  .headline   { font-size: 2.97rem; }
  /* sticky limitado à largura do conteúdo, centralizado */
  .sticky-cta {
    max-width: 700px;
    left: 50%;
    transform: translate(-50%, 100%);  /* oculto: deslocado 50% para esquerda + para baixo */
    border-radius: 4px 4px 0 0;
    border-left: 1px solid rgba(0,196,232,0.14);
    border-right: 1px solid rgba(0,196,232,0.14);
  }
  .sticky-cta.visible { transform: translate(-50%, 0); }  /* visível: mantém centrado, traz pra cima */
}

/* ── MOBILE — depoimentos coluna única (<768px) ──────────────────────────────
   Grid de depoimentos vai para 1 coluna.
   featured: layout vertical (column) em vez de horizontal (row).
── */
@media (max-width: 767px) {
  .dep-grid { grid-template-columns: 1fr; }
  .dep-card.featured {
    flex-direction: column;
    gap: 0.8rem;
    border-left-width: 1px;  /* reduz para 1px — menos destaque em coluna única */
  }
  /* header do featured: volta para row (avatar + meta lado a lado) em mobile */
  .dep-card.featured .dep-header {
    flex-direction: row;
    width: auto;
    align-items: center;
  }
  .dep-card.featured .dep-avatar { width: 48px; height: 48px; }
  .dep-card.featured .dep-meta { text-align: left; }
  .dep-card.featured .dep-quote { padding-left: 0.9rem; }
}

/* ── FOOTER ─────────────────────────────────────────────────────────────────
   Links mínimos: privacidade + termos (obrigatórios Meta Ads) + email de contato.
   flex-wrap: links quebram para próxima linha em telas muito estreitas.
── */
.lp-footer {
  padding: 1.5rem 0 2rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  border-top: 1px solid rgba(0, 196, 232, 0.07);
}

.lp-footer a {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.lp-footer a:hover { color: var(--cyan); }

/* separador "·" entre links do footer */
.lp-footer-sep {
  color: rgba(82, 82, 91, 0.4);
  font-size: 0.66rem;
}

/* ── MOBILE PEQUENO (≤480px) ─────────────────────────────────────────────────
   Ajustes finos para telas muito pequenas (iPhone SE, Android compacto).
   CTA: width:100% — botão ocupa toda a largura disponível.
   step-card: maior (88px) — mais fácil de tocar.
   sticky: texto oculto, botão ocupa toda a largura.
   dep-grid: já tratado pelo bloco ≤767px acima.
── */
@media (max-width: 480px) {
  .lp-logo       { padding-top: 1.2rem; }
  .lp-eye        { width: 42px; height: 28px; }
  .cta-pre       { margin-bottom: 3rem; }
  .cta-btn       { padding: 0.9rem 2rem; letter-spacing: 0.12em; width: 100%; text-align: center; }
  .step-summary  { gap: 1rem; padding: 1rem; }
  /* step expandido: coluna vertical em mobile — carta abaixo do texto */
  .step-expanded { flex-direction: column; align-items: center; padding: 0 1rem 1.2rem; }
  .step-num      { font-size: 1.43rem; min-width: 1.8rem; }
  .step-card     { width: 88px; margin-top: 0.5rem; }  /* maior para touch */
  .sep           { margin-bottom: 2rem; }
  /* modal de carta: coluna vertical em mobile — imagem acima do texto */
  .card-modal-box { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; padding: 2rem 1.2rem 1.5rem; }
  .card-modal-img { width: 100px; }
  /* sticky: esconde texto, botão ocupa tudo */
  .sticky-cta-text { display: none; }
  .sticky-cta    { justify-content: center; }
  .sticky-cta-btn { width: 100%; text-align: center; }
  /* padding extra no final para não sobrepor com sticky */
  .cta-final     { padding-bottom: 5rem; }
  .lp-footer     { padding-bottom: 5.5rem; }
}