/* ==========================================================================
   [ETIQUETA: ARCHIVO BASE CSS]
   Contiene las variables globales (Tokens), tipografía base y utilidades.
   ========================================================================== */

/* -----------------------------------------------------------
   [ETIQUETA: TOKENS - VARIABLES GLOBALES]
----------------------------------------------------------- */
:root {
  /* Colores Core */
  --off-black: #0f0f0f;
  --off-white: #f5f5f5;
  --grey: #888888;
  --white: #ffffff;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-light: rgba(0, 0, 0, 0.1);

  /* Variables de Tema Dinámico (Por defecto oscuro) */
  --bg-current: var(--off-black);
  --text-current: var(--off-white);
  --border-current: var(--border-subtle);

  /* Escala Tipográfica Fluida */
  --fs-h1: clamp(30px, 5vw, 40px);
  --fs-h2: clamp(24px, 4vw, 30px);
  --fs-body: clamp(14px, 2vw, 16px);
  --fs-label: 12px;
  --fs-nav: 12px;
  --fs-micro: 11px; /* Nuevo: para botones pequeños */
  --fs-token: 10px;
  --fs-icon: 24px;  /* Nuevo: para iconos como el acordeón */

  /* Pesos y Espaciado Tipográfico */
  --fw-bold: 800;
  --fw-medium: 600;
  --fw-light: 300;
  --ls-caps: 0.15em;
  --ls-action: 0.2em;
  --lh-tight: 1.1;
  --lh-base: 1.6;

  /* Viewport Heights */
  --vh-100: 100vh;
  --vh-75: 75vh;
  --vh-50: 50vh;

  /* Escala de Espaciado (Layout) */
  --space-s: 1.5rem;   /* 24px */
  --space-m: 3rem;     /* 48px */
  --space-l: 5rem;     /* 80px */
  --space-xl: 7.5rem;  /* 120px */

  /* [ETIQUETA: TOKENS DE GRILLA] */
  --grid-columns: 12;
  --grid-gap: 24px;
  --page-margin: 64px;
  
  /* [ETIQUETA: TOKENS DE Z-INDEX] */
  --z-base: 1;
  --z-nav: 100;
  --z-cursor: 9999;

  /* [ETIQUETA: TOKENS DE ANIMACIÓN] */
  --ease-ui: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-editorial: cubic-bezier(0.45, 0, 0.15, 1);
  --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1);
  
  --time-fast: 0.3s;
  --time-base: 0.4s;
  --time-slow: 0.8s;
  --time-carousel-move: 3s; /* Controla la velocidad del carrusel */
}

/* -----------------------------------------------------------
   [ETIQUETA: SISTEMA DE TEMAS]
   Inversión automática de variables para secciones claras.
----------------------------------------------------------- */
.theme-light {
    --bg-current: var(--white);
    --text-current: var(--off-black);
    --border-current: var(--border-light);
    
    background-color: var(--bg-current);
    color: var(--text-current);
}

/* -----------------------------------------------------------
   [ETIQUETA: RESET & ESTILOS BASE]
----------------------------------------------------------- */
*,
*::before,
*::after {
  cursor: none !important;
  box-sizing: border-box; /* Añadido para mejor control del modelo de caja global */
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: var(--bg-current);
  color: var(--text-current);
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0; 
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------
   [ETIQUETA: TIPOGRAFÍA EDITORIAL]
----------------------------------------------------------- */
.display-h1 { font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: var(--lh-tight); margin: 0 0 16px 0; }
.display-h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: var(--lh-tight); margin: 0 0 16px 0; }
.body-text { font-size: var(--fs-body); font-weight: var(--fw-light); max-width: 650px; }

.label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.meta-desc { font-size: var(--fs-label); color: var(--grey); margin: 0; }
.meta-text { font-size: var(--fs-token); color: var(--grey); margin-bottom: 20px; letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* -----------------------------------------------------------
   [ETIQUETA: COMPONENTES UI (BOTONES Y ENLACES)]
----------------------------------------------------------- */
.nav-soft-move {
  display: inline-block;
  color: inherit; 
  text-decoration: none;
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  transition: transform var(--time-base) var(--ease-ui), opacity var(--time-base) ease;
}
.nav-soft-move:hover { transform: translateY(-3px); opacity: 0.5; }

.pill-btn {
  background: none; 
  border: 1px solid var(--border-current); 
  color: var(--text-current);
  padding: 8px 20px; 
  border-radius: 30px; 
  font-size: var(--fs-micro); 
  text-transform: uppercase; 
  transition: all var(--time-fast);
}
.pill-btn.active, .pill-btn:hover { background: var(--text-current); color: var(--bg-current); }

.btn-editorial {
  display: inline-flex; 
  align-items: center; 
  text-decoration: none; 
  color: inherit; /* Hereda del tema actual */
  font-size: var(--fs-label); 
  font-weight: var(--fw-bold); 
  letter-spacing: var(--ls-action); 
  text-transform: uppercase;
}

.arrow-formatted {
  display: inline-block; 
  margin-left: 15px; 
  font-weight: var(--fw-bold);
  transition: transform var(--time-fast) var(--ease-ui);
}
.btn-editorial:hover .arrow-formatted { transform: translateX(8px); }

/* -----------------------------------------------------------
   [ETIQUETA: UTILIDADES DE ESPACIADO & CURSOR]
----------------------------------------------------------- */
.py-s  { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m  { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l  { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.custom-cursor {
  width: 14px;
  height: 14px;
  background-color: var(--white); /* El cursor siempre es blanco invertido */
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: difference;
  transition: transform var(--time-fast) var(--ease-ui);
  transform: translate(-50%, -50%);
}
.custom-cursor.is-hovering { transform: translate(-50%, -50%) scale(2); }