/* ============================================================
   Tema BRASA — brasa / ascua · luz batida sobre carbón hasta
   que el color prende. Negro + claro + dos chispas vivas.
   Mismo HTML/estructura/tipografía; solo cambia la paleta.
   Se carga DESPUÉS de styles.css y sections.css (gana por orden).
   ============================================================ */

:root {
  /* Fondos — ceniza clara (luz) */
  --cream:        oklch(0.968 0.006 85);
  --cream-2:      oklch(0.944 0.008 85);
  --paper:        oklch(0.993 0.003 85);
  --sand:         oklch(0.882 0.010 85);
  --sand-deep:    oklch(0.778 0.014 84);

  /* Texto — carbón (negro) */
  --ink:          oklch(0.185 0.006 60);
  --ink-soft:     oklch(0.360 0.010 58);
  --ink-faint:    oklch(0.522 0.012 56);

  /* Acento — brasa / bermellón encendido */
  --terra:        oklch(0.635 0.205 28);
  --terra-deep:   oklch(0.555 0.208 27);

  /* Compra — llama azul (segunda chispa) */
  --buy:          oklch(0.560 0.170 255);
  --buy-deep:     oklch(0.485 0.168 257);
  --buy-glow:     oklch(0.560 0.170 255 / 0.32);

  --radius: 2px;
  --shadow-sm: 0 1px 3px oklch(0.18 0.01 60 / 0.10), 0 6px 18px oklch(0.18 0.01 60 / 0.08);
  --shadow-md: 0 8px 26px oklch(0.18 0.01 60 / 0.16), 0 24px 56px oklch(0.18 0.01 60 / 0.12);
  --shadow-lg: 0 34px 80px oklch(0.18 0.01 60 / 0.26);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;
}

body { background: var(--cream); }

/* Navegación — clara, con marca al carbón y chispa */
.nav--solid { background: oklch(0.968 0.006 85 / 0.90); box-shadow: 0 1px 0 var(--sand); }
.nav__brand { color: var(--ink); }
.nav__brand span { color: var(--terra); }
.nav__link.active { color: var(--terra); }

/* Hero — el pie del hero arde en carbón (negro sobre la imagen) */
.hero__scrim {
  background: linear-gradient(to top,
    oklch(0.150 0.006 60 / 0.94) 0%,
    oklch(0.170 0.010 50 / 0.55) 38%,
    oklch(0.190 0.012 50 / 0.16) 70%,
    oklch(0.190 0.012 50 / 0.30) 100%);
}
.hero__eyebrow { color: oklch(0.760 0.180 35); }
.hero__tagline { color: oklch(0.96 0.02 80); }
.hero__scroll { color: oklch(0.92 0.03 70); }

/* Botones — versalitas firmes, filo recto */
.btn { letter-spacing: 0.10em; text-transform: uppercase; font-size: 0.80rem; font-weight: 600; }
.btn--buy { letter-spacing: 0.07em; font-size: 0.84rem; }
.btn--ghost { border-color: var(--ink); }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra); background: oklch(0.635 0.205 28 / 0.07); }

/* Filo brasa sobre las tarjetas de blog */
.blog-card { background: var(--paper); border-color: var(--sand); border-top: 3px solid var(--terra); }
.blog-card:hover { border-color: var(--terra); box-shadow: var(--shadow-md); }

/* Portada placeholder — carbón con corte de brasa */
.cover-art { background: linear-gradient(160deg, oklch(0.255 0.010 55) 0%, oklch(0.165 0.008 58) 100%); color: oklch(0.95 0.01 85); }
.cover-art__rule { background: var(--terra); }
.cover-art__deco { border-color: oklch(0.635 0.205 28 / 0.40); }
.cover-art__deco2 { border-color: oklch(0.560 0.170 255 / 0.30); }

/* Newsletter — banda de carbón total con chispas roja y azul */
.newsletter { background: oklch(0.165 0.008 58); color: oklch(0.93 0.01 85); }
.newsletter__deco { border-color: oklch(0.635 0.205 28 / 0.28); }
.newsletter__deco2 { border-color: oklch(0.560 0.170 255 / 0.30); }
.newsletter__eyebrow { color: oklch(0.760 0.180 35); }
.newsletter__title { color: oklch(0.97 0.01 85); }
.newsletter__lead { color: oklch(0.84 0.02 80); }
.nl-form input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px oklch(0.635 0.205 28 / 0.28); }

/* Modal — velo al carbón, neutro */
.modal-overlay { background: oklch(0.165 0.008 58 / 0.66); }
.modal__close { background: oklch(0.993 0.003 85 / 0.92); border-color: var(--sand); color: var(--ink); }
.modal__close:hover { background: var(--ink); color: oklch(0.97 0.01 85); }

/* Botón social — hover brasa */
.social-btn { border-color: var(--sand-deep); }
.social-btn:hover { border-color: var(--terra); color: var(--terra); }

/* Selector de diseño flotante */
.design-switch:hover { color: var(--terra); border-color: var(--terra); }