/* ============================================================
   Tema SERENO — minimal luminoso · neutros fríos + aire
   Se carga DESPUÉS de styles.css y sections.css (gana por orden).
   ============================================================ */

:root {
  /* Fondos — blancos fríos */
  --cream:        oklch(0.986 0.004 240);
  --cream-2:      oklch(0.966 0.006 240);
  --paper:        oklch(0.997 0.002 240);
  --sand:         oklch(0.902 0.008 242);
  --sand-deep:    oklch(0.820 0.010 242);

  /* Texto — pizarra fría */
  --ink:          oklch(0.280 0.016 252);
  --ink-soft:     oklch(0.450 0.016 252);
  --ink-faint:    oklch(0.600 0.014 252);

  /* Acento — eucalipto apagado */
  --terra:        oklch(0.555 0.046 182);
  --terra-deep:   oklch(0.470 0.046 182);

  /* Compra — teal sereno */
  --buy:          oklch(0.520 0.052 196);
  --buy-deep:     oklch(0.440 0.050 197);
  --buy-glow:     oklch(0.520 0.052 196 / 0.22);

  --radius: 10px;
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 250 / 0.05), 0 4px 14px oklch(0.4 0.02 250 / 0.05);
  --shadow-md: 0 8px 24px oklch(0.4 0.02 250 / 0.09), 0 20px 44px oklch(0.4 0.02 250 / 0.07);
  --shadow-lg: 0 30px 70px oklch(0.4 0.02 250 / 0.16);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

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

/* Más aire en general */
.section { padding: clamp(90px, 13vw, 168px) 0; }
.section__head { margin-bottom: 72px; }
.eyebrow { letter-spacing: 0.30em; font-weight: 600; font-size: 0.68rem; }

/* Navegación clara y fría */
.nav--solid { background: oklch(0.986 0.004 240 / 0.85); 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; padding: 0.95em 1.9em; }
.btn--buy { padding: 1em 1.7em; }
.btn--ghost:hover { border-color: var(--ink); }

/* Hero — velo más frío y aireado */
.hero__scrim {
  background: linear-gradient(to top,
    oklch(0.22 0.02 250 / 0.84) 0%,
    oklch(0.25 0.02 250 / 0.42) 40%,
    oklch(0.30 0.02 250 / 0.10) 74%,
    oklch(0.30 0.02 250 / 0.24) 100%);
}
.hero__eyebrow { color: oklch(0.87 0.04 200); }
.hero__tagline { color: oklch(0.95 0.01 220); }
.hero__scroll { color: oklch(0.90 0.02 220); }

/* Tarjetas de blog planas, que respiren */
.blog-card { box-shadow: none; border-color: var(--sand); border-radius: 14px; }
.blog-card:hover { box-shadow: var(--shadow-md); border-color: var(--sand-deep); }

/* Newsletter — degradado pizarra frío */
.newsletter { background: linear-gradient(155deg, oklch(0.345 0.030 240) 0%, oklch(0.260 0.025 245) 100%); }
.newsletter__deco, .newsletter__deco2 { border-color: oklch(0.72 0.04 200 / 0.16); }
.newsletter__eyebrow { color: oklch(0.84 0.05 198); }
.newsletter__lead { color: oklch(0.86 0.02 230); }
.nl-form input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px oklch(0.555 0.046 182 / 0.25); }

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