/* ============================================================================
   Design System — flash-class landing
   Decisões TRAVADAS (17/07/2026): serifada editorial + azul-petróleo.
   Restrições em .claude/rules/design-system.md (paleta mínima, 1 cor de destaque,
   fontes locais, espaço em branco generoso, < 1s no celular).

   A e B compartilham este arquivo (ver landing/BRIEF.md): nunca duplicar CSS.
   ============================================================================ */

:root {
  /* --- Paleta (mínima: fundo cru + tinta quase-preta + UMA cor de destaque) --- */
  --bg:          #F7F4EE;  /* off-white quente / cru (não branco puro) */
  --surface:     #FFFFFF;  /* cartões/realces sutis, se necessário */
  --ink:         #1A1815;  /* texto principal, quase-preto quente */
  --muted:       #6B655C;  /* texto secundário */
  --hairline:    #E3DED4;  /* linhas/divisórias discretas */

  --accent:      #14505C;  /* AZUL-PETRÓLEO — reservado EXCLUSIVAMENTE ao CTA */
  --accent-ink:  #FFFFFF;  /* texto sobre o CTA */
  --accent-hover:#0E3E48;  /* estado hover do CTA */

  /* --- Tipografia (serifada editorial; fontes SERVIDAS LOCALMENTE de assets/) --- */
  --font-head:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:   "Newsreader", Georgia, "Times New Roman", serif;

  /* --- Escala e ritmo --- */
  --measure:     62ch;      /* largura de leitura confortável */
  --step--1:     clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --step-0:      clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --step-1:      clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem);
  --step-2:      clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --step-3:      clamp(2.2rem, 1.7rem + 2.6vw, 3.6rem);  /* headline */

  --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.75rem;
  --space-4: 3rem;    --space-5: 5rem;

  --radius: 10px;
}

/* @font-face — arquivos estáticos em landing/assets/. url() resolve relativo a ESTE arquivo
   (shared/styles.css), não à página HTML que o importa — por isso "../assets/..." vale para A e B. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fraunces-v38-latin-regular.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fraunces-v38-latin-700.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/newsreader-v26-latin-regular.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}

/* Reset leve + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; font-weight: 600; }
main { max-width: var(--measure); margin: 0 auto; padding: var(--space-5) var(--space-3); }

/* Hero — headline + subheadline */
.hero__headline { font-size: var(--step-3); margin: 0 0 var(--space-2); }
.hero__subheadline { font-size: var(--step-1); color: var(--muted); margin: 0; }

/* Bullets — "o que você recebe" */
.bullets {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bullets__item {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.bullets__item:last-child { border-bottom: none; padding-bottom: 0; }
.bullets__item::before {
  content: "—";
  color: var(--muted);
  flex-shrink: 0;
}

/* CTA — o ÚNICO elemento colorido da página */
.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: 0.9em 1.4em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 120ms ease;
}
.cta:hover { background: var(--accent-hover); }

.cta-wrap { margin: var(--space-4) 0 var(--space-2); }

/* Micro-prova / incentivo */
.proof { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* Movimento contido: no máximo um fade-in sutil ao carregar (respeita prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fade 500ms ease both; }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}