/* ============================================================
   Tema TINTO — vino a contraluz · lino teñido y noche de bodega,
   con cereza encendida y oro de vela. Claro + vino-negro + color.
   Mismo HTML/estructura/tipografía; solo cambia la paleta.
   Se carga DESPUÉS de styles.css y sections.css (gana por orden).
   ============================================================ */

:root {
  /* Fondos — lino teñido (luz) */
  --cream:        oklch(0.965 0.012 350);
  --cream-2:      oklch(0.940 0.016 350);
  --paper:        oklch(0.992 0.005 350);
  --sand:         oklch(0.880 0.018 352);
  --sand-deep:    oklch(0.778 0.026 354);

  /* Texto — vino-negro (oscuro) */
  --ink:          oklch(0.205 0.048 350);
  --ink-soft:     oklch(0.385 0.046 352);
  --ink-faint:    oklch(0.535 0.040 354);

  /* Acento — cereza / frambuesa encendida */
  --terra:        oklch(0.545 0.210 2);
  --terra-deep:   oklch(0.470 0.212 3);

  /* Compra — oro de vela / caléndula (segunda chispa) */
  --buy:          oklch(0.745 0.160 72);
  --buy-deep:     oklch(0.665 0.162 70);
  --buy-glow:     oklch(0.745 0.160 72 / 0.34);

  --radius: 3px;
  --shadow-sm: 0 1px 3px oklch(0.20 0.05 350 / 0.10), 0 6px 18px oklch(0.20 0.05 350 / 0.08);
  --shadow-md: 0 8px 26px oklch(0.20 0.05 350 / 0.16), 0 24px 56px oklch(0.20 0.05 350 / 0.12);
  --shadow-lg: 0 34px 80px oklch(0.20 0.05 350 / 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, marca al vino con chispa cereza */
.nav--solid { background: oklch(0.965 0.012 350 / 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 arde en vino-negro sobre la imagen */
.hero__scrim {
  background: linear-gradient(to top,
    oklch(0.160 0.050 350 / 0.94) 0%,
    oklch(0.185 0.050 352 / 0.55) 38%,
    oklch(0.205 0.048 352 / 0.16) 70%,
    oklch(0.205 0.048 352 / 0.30) 100%);
}
.hero__eyebrow { color: oklch(0.720 0.180 6); }
.hero__tagline { color: oklch(0.96 0.02 30); }
.hero__scroll { color: oklch(0.92 0.03 20); }

/* Botones — versalitas firmes */
.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; color: oklch(0.195 0.048 350); }
.btn--ghost { border-color: var(--ink); }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra); background: oklch(0.545 0.210 2 / 0.07); }

/* Filo cereza 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 — bodega oscura con corte cereza */
.cover-art { background: linear-gradient(160deg, oklch(0.270 0.060 352) 0%, oklch(0.170 0.050 350) 100%); color: oklch(0.95 0.02 350); }
.cover-art__rule { background: var(--terra); }
.cover-art__deco { border-color: oklch(0.545 0.210 2 / 0.40); }
.cover-art__deco2 { border-color: oklch(0.745 0.160 72 / 0.34); }

/* Newsletter — banda de bodega total con chispas cereza y oro */
.newsletter { background: oklch(0.180 0.052 350); color: oklch(0.93 0.02 350); }
.newsletter__deco { border-color: oklch(0.545 0.210 2 / 0.30); }
.newsletter__deco2 { border-color: oklch(0.745 0.160 72 / 0.32); }
.newsletter__eyebrow { color: oklch(0.760 0.170 8); }
.newsletter__title { color: oklch(0.97 0.015 350); }
.newsletter__lead { color: oklch(0.85 0.02 350); }
.nl-success__check { color: oklch(0.195 0.048 350); }
.nl-form input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px oklch(0.545 0.210 2 / 0.28); }

/* Modal — velo al vino, neutro */
.modal-overlay { background: oklch(0.180 0.052 350 / 0.66); }
.modal__close { background: oklch(0.992 0.005 350 / 0.92); border-color: var(--sand); color: var(--ink); }
.modal__close:hover { background: var(--ink); color: oklch(0.96 0.02 350); }

/* Botón social — hover cereza */
.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); }