/* ═══════════════════════════════════════════════════════════════════════════
   BASE: reset + tipografía + utilidades fundacionales
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modern reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Anclas: el título de la sección no queda bajo el header fijo (--header-h lo
   fija el JS; 96px es el respaldo si el JS aún no corrió). */
section[id], [id].section { scroll-margin-top: calc(var(--header-h, 96px) + 16px); }
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--pearl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* iOS-safe: a diferencia de 'hidden', 'clip' NO rompe position:sticky.
     Recorta el desborde lateral del drawer (transform) y de los blobs. Estándar Queens rule #11. */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
ul, ol { list-style: none; }

/* Tipografía display */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h5 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: var(--fw-semibold); }

p { line-height: var(--lh-normal); }

/* Selección */
::selection { background: var(--champagne); color: var(--ink); }

/* Scrollbar premium */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { background: var(--aubergine-light); border-radius: var(--radius-full); border: 2px solid var(--mist); }
::-webkit-scrollbar-thumb:hover { background: var(--aubergine); }

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ─── LAYOUT UTILITIES ─── */
.container { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--content-pad); }
.container--wide { max-width: var(--container-xl); }
.container--narrow { max-width: var(--container-md); }

.section { padding: var(--space-2xl) 0; position: relative; }
.section--lg { padding: var(--space-3xl) 0; }
.section--dark { background: var(--aubergine); color: var(--pearl); }
.section--cream { background: var(--cream); }
.section--mist { background: var(--mist); }
.section--gradient-night { background: var(--gradient-night); color: var(--pearl); }

/* ─── SECTION HEADER PATRÓN ─── */
.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-xl); }
.section-header .eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--rose-gold);
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(183, 110, 121, 0.1);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
}
.section-header .section-title { margin-bottom: var(--space-sm); }
.section-header .section-lead {
  font-size: var(--fs-lg);
  color: var(--gray-700);
  max-width: 56ch;
  margin: 0 auto;
}
.section--dark .section-header .eyebrow,
.theme-dark .section-header .eyebrow { color: var(--champagne); background: rgba(232,212,166,0.12); }
.section--dark .section-header .section-title,
.theme-dark .section-header .section-title { color: var(--pearl); }
.section--dark .section-header .section-lead,
.theme-dark .section-header .section-lead { color: rgba(255,255,255,0.75); }

/* ─── UTILIDADES DE TEXTO ─── */
.text-gradient {
  background: var(--gradient-luxe);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease infinite;
}
.text-gradient-static {
  background: var(--gradient-luxe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.text-accent { font-family: var(--font-accent); font-style: italic; }
.text-script { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-light); }
.text-uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* ─── GRID UTILS ─── */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.flex { display: flex; gap: var(--space-sm); align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap { flex-wrap: wrap; }