/* ============================================================
   GABRIEL FLORES — Tokens de design (guia do Vision)
   Conceito: "a luz como matéria de design". Base neutra terrosa
   (areia/grafite/madeira) + acento âmbar = a luz acesa (CTA).
   ============================================================ */
:root{
  /* — Base neutra (estrutura) — paleta ID visual Gabriel Flores (navy/off-white) */
  --bg:            #EEF1F5;  /* fundo geral: off-white frio */
  --surface:       #FFFFFF;  /* cards/seções: branco */
  --surface-alt:   #E2E7EE;  /* faixa alternada: cinza-azulado claro */

  /* — Texto — */
  --text:          #1E2A42;  /* primário: azul-marinho (quase preto) */
  --text-soft:     #47566B;  /* secundário: azul-ardósia */
  --text-on-dark:  #EAEEF4;  /* texto sobre fundo escuro (navy) */

  /* — Marca — */
  --brand:         #1E2A42;  /* azul-marinho: títulos, header, footer, blocos escuros */
  --brand-soft:    #3F4E63;  /* azul-ardósia: detalhes, ícones, linhas */

  /* — Acento primário = TERRACOTA (CTA) — */
  --accent:        #B05C29;  /* terracota: CTA primário */
  --accent-strong: #91491F;  /* hover do CTA: terracota mais fechado */
  --accent-glow:   #D08A54;  /* brilho/realce, gradiente de halo */
  --brick:         #8A3F28;  /* tijolo: acento profundo pontual */

  /* — Acento secundário = AZUL-ARDÓSIA — */
  --navy:          #1E2A42;  /* azul-marinho: blocos de conversão/profundidade */
  --navy-soft:     #3F4E63;  /* azul-ardósia: detalhes sobre navy */

  /* — Estrutura fina — */
  --border:        #D3DAE3;  /* bordas/divisores sutis */
  --border-strong: #B9C3D0;  /* borda de card em hover */

  /* — Feedback — */
  --success:       #5E7A52;  /* verde-oliva (garantia, "grátis") */

  /* — Tipografia — */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* — Espaçamento — */
  --space-1:.5rem;  --space-2:1rem;   --space-3:1.5rem;
  --space-4:2rem;   --space-5:3rem;   --space-6:4rem;  --space-7:6rem;

  --container: 1100px;
  --container-narrow: 720px;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(30,42,66,.06);
  --shadow:    0 8px 24px rgba(30,42,66,.10);
  --shadow-lg: 0 20px 50px rgba(30,42,66,.14);
  --shadow-accent: 0 8px 24px rgba(176,92,41,.30);
}

/* ---------- Reset enxuto ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  overflow-wrap:break-word;
  font-family:var(--font-display);
  color:var(--brand);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 var(--space-3);
}
h1{ font-size:2.25rem; font-weight:700; line-height:1.1; }
h2{ font-size:1.75rem; font-weight:600; line-height:1.2; }
h3{ font-size:1.25rem; font-weight:600; line-height:1.3; }
p{ margin:0 0 var(--space-3); }
em{ font-style:italic; color:var(--accent-strong); }

@media (min-width:768px){
  h1{ font-size:3.25rem; }
  h2{ font-size:2.25rem; }
  h3{ font-size:1.5rem; }
}

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--space-3); }
.narrow{ max-width:var(--container-narrow); margin-inline:auto; }
section{ padding-block:var(--space-6); }

/* faixas alternadas */
.bg-alt{ background:var(--surface-alt); }
.bg-surface{ background:var(--surface); }
.bg-dark{ background:var(--navy); color:var(--text-on-dark); }
.bg-dark h1,.bg-dark h2,.bg-dark h3{ color:#fff; }
.bg-dark .text-soft{ color:#C9D2E0; }
.bg-espresso{ background:var(--brand); color:var(--text-on-dark); }
.bg-espresso h1,.bg-espresso h2,.bg-espresso h3{ color:#fff; }

.text-soft{ color:var(--text-soft); }
.center{ text-align:center; }

/* halo de luz (sensação de lâmpada acesa, sem desenhar lâmpada) */
.halo{ position:relative; }
.halo::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:60%;
  background:radial-gradient(ellipse at top, rgba(208,138,84,.22), transparent 60%);
  pointer-events:none; z-index:0;
}
.halo > *{ position:relative; z-index:1; }

/* divisor "amanhecer" */
.dawn{ height:2px; border:0;
  background:linear-gradient(90deg, transparent, var(--accent-glow), transparent); margin:0; }