/* ═══════════════════════════════════════════════════════════════
   base.css — Reset, variables CSS y tipografía global (warm neutral)
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Space+Mono:wght@400;700&display=swap");

/* ── Variables globales ── */
:root {
  /* Fondos — warm neutral */
  --bg:          #FAF8F3;
  --surface:     #FFFFFF;
  --surface-2:   #F5F0E8;
  --surface-3:   #EDE7DA;

  /* Texto */
  --text:        #1C1917;
  --text-muted:  #57524A;
  --text-subtle: #9C9188;

  /* Bordes */
  --border:        rgba(28, 25, 23, 0.10);
  --border-strong: rgba(28, 25, 23, 0.18);

  /* Colores mensuales — sobrescritos por palette.js */
  --clr-primary:     #0D1B2A;
  --clr-primary-rgb: 13, 27, 42;
  --clr-accent:      #4A90D9;
  --clr-accent-rgb:  74, 144, 217;
  --clr-bg:          #FAF8F3;
  --clr-highlight:   #C9963E;
  --allow-gradient:  1;

  /* Gold fijo */
  --gold:        #B8832A;
  --gold-light:  #D4A455;
  --gold-dim:    rgba(184, 131, 42, 0.14);

  /* Tipografía */
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "Cascadia Code", monospace;

  /* Escala fluida */
  --text-xs:   clamp(0.65rem, 0.62rem + 0.15vw, 0.75rem);
  --text-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem  + 0.25vw, 1.05rem);
  --text-md:   clamp(1.05rem, 1rem    + 0.25vw, 1.2rem);
  --text-lg:   clamp(1.2rem,  1.1rem  + 0.5vw,  1.5rem);
  --text-xl:   clamp(1.5rem,  1.3rem  + 1vw,    2rem);
  --text-2xl:  clamp(2rem,    1.6rem  + 2vw,    3rem);
  --text-3xl:  clamp(2.4rem,  1.8rem  + 3vw,    4.2rem);

  /* Espaciado */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Bordes-radio */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Sombras cálidas */
  --shadow-sm:  0 1px 4px rgba(28,25,23,0.08),  0 1px 2px rgba(28,25,23,0.05);
  --shadow-md:  0 4px 16px rgba(28,25,23,0.10),  0 2px 6px rgba(28,25,23,0.06);
  --shadow-lg:  0 12px 40px rgba(28,25,23,0.12), 0 4px 12px rgba(28,25,23,0.06);
  --shadow-xl:  0 24px 60px rgba(28,25,23,0.14), 0 8px 20px rgba(28,25,23,0.07);

  /* Transiciones */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast:    180ms;
  --dur-base:    350ms;
  --dur-slow:    650ms;

  /* Layout */
  --container-max: 1200px;
  --nav-h:         72px;
}

/* ── Reset moderno ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  line-height:  1.65;
  color:        var(--text);
  background:   var(--bg);
  overflow-x:   clip;   /* clip preserves sticky; hidden breaks it */
  -webkit-font-smoothing: antialiased;
}

/* Cursor nativo oculto cuando JS cursor está activo */
body:has(.c-dot) { cursor: none; }
body:has(.c-dot) a,
body:has(.c-dot) button,
body:has(.c-dot) [role="button"],
body:has(.c-dot) label,
body:has(.c-dot) input,
body:has(.c-dot) select,
body:has(.c-dot) textarea { cursor: none; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
input, textarea, select { font: inherit; }

/* ── Contenedor ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
}

/* ── Tipografía base ── */
h1, h2, h3, h4 {
  font-family:    var(--font-display);
  line-height:    1.1;
  letter-spacing: -0.03em;
  color:          var(--text);
}

h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl);  font-weight: 600; }
h4 { font-size: var(--text-lg);  font-weight: 500; letter-spacing: -0.02em; }

/* em en titulares = acento mensual */
h1 em, h2 em, h3 em {
  font-style:  normal;
  font-weight: 300;
  color:       var(--clr-highlight);
}

p { color: var(--text-muted); line-height: 1.7; }

/* ── Kicker monoespaciado ── */
.kicker {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color:          var(--clr-accent);
  display:        block;
  margin-bottom:  var(--space-4);
}

/* ── Sección base ── */
.section { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); }

.section__header { max-width: 680px; margin-bottom: var(--space-16); }
.section__header--center { text-align: center; margin-inline: auto; }
.section__title { margin-top: var(--space-3); margin-bottom: var(--space-5); }
.section__subtitle { font-size: var(--text-md); color: var(--text-muted); max-width: 560px; }
.section__header--center .section__subtitle { margin-inline: auto; }

/* ── Utilidades ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}