/* ============================================================
   Tema MAREA — océano claro · teal profundo + coral
   Mismo HTML/estructura que el resto; solo cambia la paleta.
   Se carga DESPUÉS de styles.css y sections.css (gana por orden).
   ============================================================ */

:root {
  /* Fondos — blancos con bruma marina */
  --cream:        oklch(0.976 0.012 200);
  --cream-2:      oklch(0.952 0.018 198);
  --paper:        oklch(0.992 0.006 200);
  --sand:         oklch(0.890 0.025 200);
  --sand-deep:    oklch(0.800 0.035 202);

  /* Texto — tinta marina */
  --ink:          oklch(0.300 0.042 220);
  --ink-soft:     oklch(0.450 0.042 218);
  --ink-faint:    oklch(0.585 0.038 212);

  /* Acento — teal profundo */
  --terra:        oklch(0.520 0.092 210);
  --terra-deep:   oklch(0.440 0.092 212);

  /* Compra — coral cálido (contraste) */
  --buy:          oklch(0.640 0.150 35);
  --buy-deep:     oklch(0.560 0.150 33);
  --buy-glow:     oklch(0.640 0.150 35 / 0.28);

  --radius: 8px;
  --shadow-sm: 0 1px 2px oklch(0.35 0.04 220 / 0.06), 0 4px 14px oklch(0.35 0.04 220 / 0.06);
  --shadow-md: 0 8px 24px oklch(0.35 0.04 220 / 0.10), 0 20px 44px oklch(0.35 0.04 220 / 0.08);
  --shadow-lg: 0 30px 70px oklch(0.35 0.04 220 / 0.18);

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

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

/* Navegación clara marina */
.nav--solid { background: oklch(0.976 0.012 200 / 0.88); box-shadow: 0 1px 0 var(--sand); }
.nav__brand span { color: var(--terra); }

/* Botones tipo píldora más livianos */
.btn { border-radius: 100px; font-weight: 600; letter-spacing: 0.01em; }
.btn--ghost:hover { border-color: var(--ink); }

/* Hero — velo y acentos fríos */
.hero__scrim {
  background: linear-gradient(to top,
    oklch(0.24 0.04 222 / 0.86) 0%,
    oklch(0.27 0.04 220 / 0.46) 40%,
    oklch(0.30 0.04 218 / 0.12) 74%,
    oklch(0.30 0.04 218 / 0.26) 100%);
}
.hero__eyebrow { color: oklch(0.88 0.06 200); }
.hero__tagline { color: oklch(0.95 0.02 210); }
.hero__scroll { color: oklch(0.90 0.03 205); }

/* Newsletter — degradado marino profundo */
.newsletter { background: linear-gradient(155deg, oklch(0.340 0.060 220) 0%, oklch(0.250 0.050 222) 100%); }
.newsletter__deco, .newsletter__deco2 { border-color: oklch(0.72 0.08 40 / 0.18); }
.newsletter__eyebrow { color: oklch(0.84 0.10 45); }
.newsletter__lead { color: oklch(0.86 0.03 210); }
.nl-form input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px oklch(0.520 0.092 210 / 0.25); }

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