/* ===== TOKENS ===== */
/**
 * VIDENS — Design System Tokens
 *
 * Sistema HÍBRIDO de temas: oscuro + claro, con acento ORO cálido.
 * Cada sección declara su tema con la clase .theme-dark o .theme-light;
 * los tokens de color se resuelven según el tema activo.
 *
 * Tokens canónicos del brief (cambian por tema):
 *   --bg --surface --text --muted --soft --accent --line --up --down
 * Más derivados: --dot (patrón de puntos) · --scrim (overlay del hero)
 * Y alias de compatibilidad (--color-*, --bg-base, etc.) hacia los anteriores.
 */

/* ──────────────────────────────────────────────────────────────────────
   TEMA CLARO (por defecto) — manifiesto, servicios, estudios, rankings, cobertura
   :root lo hereda como base para que html/body siempre tengan tokens.
   ────────────────────────────────────────────────────────────────────── */

:root,
.theme-light {
  --bg: #faf8f2;
  --surface: #ffffff;
  --text: #14110c;
  --muted: #6f695d;
  --soft: #4a463d;
  --accent: #8c611f; /* oro bronce oscuro → contraste ≥4.5:1 sobre claro (5.5:1) */
  --accent-hover: #6f4c17;
  --line: rgba(20, 17, 12, 0.1);
  --line-hover: rgba(20, 17, 12, 0.18);
  --up: #2e9e63;
  --down: #c9453f;

  --accent-dim: rgba(140, 97, 31, 0.13);
  --accent-soft: rgba(140, 97, 31, 0.09);
  --dot: rgba(20, 17, 12, 0.05); /* puntos tinta sobre claro */
  --scrim: rgba(11, 11, 13, 0.7);
  --on-accent: #14110c;

  /* Alias de compatibilidad (resueltos contra los tokens de ESTE tema) */
  --color-bg-base: var(--bg);
  --color-bg-surface: var(--surface);
  --color-bg-elev: var(--surface);
  --color-bg-overlay: var(--scrim);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-dim: var(--accent-dim);
  --color-accent-light: var(--accent-soft);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-text-dim: var(--muted);
  --color-line: var(--line);
  --color-line-hover: var(--line-hover);
  --color-up: var(--up);
  --color-down: var(--down);
  --color-success: var(--up);
  --color-error: var(--down);
  --color-warning: #d4a23c;
  --color-info: var(--accent);
  --bg-base: var(--bg);
  --bg-surface: var(--surface);
  --bg-elev: var(--surface);
  --text-muted: var(--muted);
}

/* ──────────────────────────────────────────────────────────────────────
   TEMA OSCURO — hero, CTA final, footer
   ────────────────────────────────────────────────────────────────────── */

.theme-dark {
  --bg: #0b0b0d;
  --surface: #161719;
  --text: #f7f6f2;
  --muted: #8a8782;
  --soft: #c7c4bd;
  --accent: #d4a23c;
  --accent-hover: #e2b454;
  --line: rgba(247, 246, 242, 0.08);
  --line-hover: rgba(247, 246, 242, 0.14);
  --up: #3fb67a;
  --down: #e0534e;

  --accent-dim: rgba(212, 162, 60, 0.16);
  --accent-soft: rgba(212, 162, 60, 0.1);
  --dot: rgba(212, 162, 60, 0.08); /* puntos oro sobre oscuro */
  --scrim: rgba(11, 11, 13, 0.7);
  --on-accent: #0b0b0d;

  /* Alias de compatibilidad (resueltos contra los tokens OSCUROS) */
  --color-bg-base: var(--bg);
  --color-bg-surface: var(--surface);
  --color-bg-elev: var(--surface);
  --color-bg-overlay: var(--scrim);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-dim: var(--accent-dim);
  --color-accent-light: var(--accent-soft);
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-text-dim: var(--muted);
  --color-line: var(--line);
  --color-line-hover: var(--line-hover);
  --color-up: var(--up);
  --color-down: var(--down);
  --color-success: var(--up);
  --color-error: var(--down);
  --color-warning: #d4a23c;
  --color-info: var(--accent);
  --bg-base: var(--bg);
  --bg-surface: var(--surface);
  --bg-elev: var(--surface);
  --text-muted: var(--muted);
}

/* Aplicar un tema pinta fondo y texto del contenedor */
.theme-dark,
.theme-light {
  background-color: var(--bg);
  color: var(--text);
}

/* ──────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Familias de fuentes */
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Pesos de fuentes */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-display: 0.98;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --lh-mono: 1.5;
}

/* Escala de tipografía con clamp() para fluidez */
:root {
  /* Display (h1, hero titles) */
  --fs-display-xl: clamp(48px, 12vw, 72px);
  --fs-display-lg: clamp(40px, 10vw, 60px);
  --fs-display-md: clamp(32px, 8vw, 48px);

  /* Headings */
  --fs-h1: clamp(40px, 8vw, 72px);
  --fs-h2: clamp(28px, 6vw, 40px);
  --fs-h3: clamp(20px, 4vw, 24px);
  --fs-h4: clamp(18px, 3vw, 22px);

  /* Body */
  --fs-body-lg: clamp(18px, 2.5vw, 20px);
  --fs-body: clamp(16px, 2vw, 18px);
  --fs-body-sm: clamp(14px, 1.8vw, 16px);

  /* Small & UI */
  --fs-ui: 0.875rem;           /* 14px */
  --fs-caption: clamp(12px, 1.5vw, 13px);
  --fs-mono: 0.8125rem;        /* 13px */
}

/* ──────────────────────────────────────────────────────────────────────
   ESPACIADO

   Escala de 8px: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Unidades base */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 0.75rem;    /* 12px */
  --space-lg: 1rem;       /* 16px */
  --space-xl: 1.5rem;     /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 3rem;      /* 48px */
  --space-4xl: 4rem;      /* 64px */
  --space-5xl: 6rem;      /* 96px */
  --space-6xl: 8rem;      /* 128px */

  /* Padding comunes */
  --pad-section: clamp(64px, 12vw, 128px);
  --pad-section-sm: clamp(48px, 8vw, 96px);
  --pad-card: var(--space-2xl);
  --pad-button: var(--space-lg) var(--space-2xl);

  /* Gaps para grillas */
  --gap-sm: var(--space-lg);
  --gap-md: var(--space-2xl);
  --gap-lg: var(--space-3xl);
}

/* ──────────────────────────────────────────────────────────────────────
   BORDES Y RADIOS
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Border width */
  --border-thin: 1px;
  --border-thick: 2px;

  /* Borders comunes */
  --border-line: var(--border-thin) solid var(--color-line);
  --border-line-hover: var(--border-thin) solid var(--color-line-hover);
  --border-accent: var(--border-thin) solid var(--color-accent);
}

/* ──────────────────────────────────────────────────────────────────────
   SOMBRAS Y ELEVACIÓN

   Swiss Modernism: restraint. No grandes sombras difusas.
   En lugar de shadows → elevación por color de fondo + borde sutil
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Elevation: backgrounds progresivos */
  --elev-1: var(--color-bg-surface);
  --elev-2: var(--color-bg-elev);
  --elev-3: #222a3a;

  /* Backdrop blur para componentes flotantes */
  --blur-backdrop: blur(8px);

  /* Sombras sutiles SOLO para elementos que lo necesitan */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);

  /* Focus ring (accesibilidad) */
  --focus-ring: 0 0 0 3px var(--accent-soft);
}

/* ──────────────────────────────────────────────────────────────────────
   ANIMACIONES Y TRANSICIONES

   Velocidades:
   - Fast: 150ms (hover, focus)
   - Normal: 300ms (modal, drawer)
   - Slow: 500ms (page transitions)
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Duraciones */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Easing */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Transiciones comunes */
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  --transition-color: color var(--duration-fast) var(--ease-out),
                      background-color var(--duration-fast) var(--ease-out),
                      border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
}

/* ──────────────────────────────────────────────────────────────────────
   Z-INDEX SCALE
   ────────────────────────────────────────────────────────────────────── */

:root {
  --z-auto: auto;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 110;
  --z-fixed: 120;
  --z-modal-backdrop: 130;
  --z-modal: 140;
  --z-popover: 150;
  --z-tooltip: 160;
}

/* ──────────────────────────────────────────────────────────────────────
   BREAKPOINTS MEDIA QUERIES
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Tamaños de pantalla para usar en media queries */
  --breakpoint-mobile: 375px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  --breakpoint-2xl: 1920px;
}

/* ──────────────────────────────────────────────────────────────────────
   COMPONENTES PREDEFINIDOS

   Reutilizable en las páginas sin tener que escribir CSS
   ────────────────────────────────────────────────────────────────────── */

/* Botones */
:root {
  --btn-height: 2.75rem;  /* 44px — touch target minimum */
  --btn-height-sm: 2rem;  /* 32px */
  --btn-pad: var(--space-lg) var(--space-2xl);
}

/* Cards */
:root {
  --card-pad: var(--space-2xl);
  --card-gap: var(--space-lg);
  --card-border: var(--border-line);
  --card-radius: var(--radius-md);
}

/* Inputs */
:root {
  --input-height: 2.75rem;  /* 44px */
  --input-pad: 0.75rem 1rem;
  --input-radius: var(--radius-md);
  --input-border: var(--border-line);
}

/* ──────────────────────────────────────────────────────────────────────
   MOTIVOS GRÁFICOS
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Constelación de nodos (patrón de puntos sutil) */
  --motif-constellation: radial-gradient(
    circle,
    var(--accent-soft) 1px,
    transparent 1px
  );
  --motif-constellation-size: 40px;

  /* Gradiente del overlay del hero */
  --gradient-hero-overlay: linear-gradient(
    to top,
    rgba(10, 12, 18, 0.9),
    transparent
  );
}

/* ──────────────────────────────────────────────────────────────────────
   FUNCIONES Y UTILITIES
   ────────────────────────────────────────────────────────────────────── */

/* Contenedor máximo ancho */
:root {
  --max-width-container: 1200px;
  --max-width-article: 800px;
}

/* Visibilidad en reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms !important;
    --duration-normal: 0.01ms !important;
    --duration-slow: 0.01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   VARIANTES DE TEMA (futura expansión)
   ────────────────────────────────────────────────────────────────────── */

/* Light mode (opcional para futuro) */
@media (prefers-color-scheme: light) {
  :root {
    /* Descomentar si implementás tema claro
    --color-bg-base: #ffffff;
    --color-bg-surface: #f8f9fa;
    --color-text: #1a1a1a;
    */
  }
}

/* High contrast mode (accesibilidad) */
@media (prefers-contrast: more) {
  .theme-dark {
    --accent: #e8b955;
    --line: rgba(247, 246, 242, 0.22);
  }
  .theme-light {
    --accent: #8a611f;
    --line: rgba(20, 17, 12, 0.28);
  }
}


/* ===== GLOBAL ===== */
/**
 * VIDENS — Global Styles
 *
 * Imports design tokens y define reset + utilidades base
 */



/* ──────────────────────────────────────────────────────────────────────
   RESET CSS MODERNO
   ────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-body);
  background-color: var(--color-bg-base);
  color: var(--color-text);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--color-bg-base);
  color: var(--color-text);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ──────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA BASE
   ────────────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  /* El uppercase total se reserva para el hero; el resto va en Title Case
     (suaviza la tensión tipográfica y mejora la legibilidad). */
  letter-spacing: -0.01em;
  line-height: var(--lh-display);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

p,
li,
dt,
dd {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

small,
.caption,
.text-sm {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
}

/* Tipografía mono con números tabulares (para rankings, tablas) */
.number,
.number-display,
[data-number] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   LINKS
   ────────────────────────────────────────────────────────────────────── */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Links sin decoração (nav, etc) */
a.plain {
  color: inherit;
}

a.plain:hover {
  color: var(--color-accent);
}

/* ──────────────────────────────────────────────────────────────────────
   BOTONES BASE
   ────────────────────────────────────────────────────────────────────── */

button {
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  padding: var(--pad-button);
  min-height: var(--btn-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

button:hover {
  transform: translateY(-2px);
}

button:active {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

button:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Button primary (celeste) */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

/* Button secondary (outline) */
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-bg-base);
}

/* Button text (solo texto) */
.btn-text {
  background: transparent;
  color: var(--color-accent);
  padding: var(--space-md) 0;
}

.btn-text:hover {
  color: var(--color-accent-hover);
}

/* ──────────────────────────────────────────────────────────────────────
   INPUTS Y FORMULARIOS
   ────────────────────────────────────────────────────────────────────── */

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--color-bg-surface);
  border: var(--border-line);
  color: var(--color-text);
  padding: var(--input-pad);
  border-radius: var(--input-radius);
  transition: var(--transition-fast);
  min-height: var(--input-height);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

input::placeholder {
  color: var(--color-text-dim);
}

label {
  display: block;
  font-size: var(--fs-ui);
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-weight-medium);
}

/* ──────────────────────────────────────────────────────────────────────
   UTILIDADES COMUNES
   ────────────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
}

.container-article {
  max-width: var(--max-width-article);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
}

/* Grid layout helpers */
.grid {
  display: grid;
  gap: var(--gap-md);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Flex helpers */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

/* Spacing utilities */
.mt-sm {
  margin-top: var(--space-lg);
}

.mt-md {
  margin-top: var(--space-2xl);
}

.mt-lg {
  margin-top: var(--space-3xl);
}

.mb-sm {
  margin-bottom: var(--space-lg);
}

.mb-md {
  margin-bottom: var(--space-2xl);
}

.mb-lg {
  margin-bottom: var(--space-3xl);
}

.gap-sm {
  gap: var(--gap-sm);
}

.gap-md {
  gap: var(--gap-md);
}

.gap-lg {
  gap: var(--gap-lg);
}

/* Text utilities */
.text-muted {
  color: var(--color-text-muted);
}

.text-accent {
  color: var(--color-accent);
}

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

.uppercase {
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-black {
  font-weight: var(--font-weight-black);
}

/* Display utilities */
.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/* Scroll behavior */
.no-scroll {
  overflow: hidden;
}

/* Skip link: oculto hasta recibir foco con teclado */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  transform: translateY(-120%);
  background: var(--color-accent);
  color: var(--color-bg-base);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  border-radius: 0 0 var(--radius-md) 0;
  transition: transform 150ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-bg-base);
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* main recibe foco vía skip-link sin mostrar outline persistente */
main:focus {
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────
   MOTIVO DE MARCA — textura dot-grid celeste para fondos destacados

   Aplicar a secciones oscuras que quieran la textura de la "constelación".
   La grilla de puntos va detrás del contenido (z-index) sin interferir.
   ────────────────────────────────────────────────────────────────────── */

.dot-grid-bg {
  position: relative;
  isolation: isolate;
}

.dot-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    circle,
    var(--dot, rgba(20, 17, 12, 0.05)) 1px,
    transparent 1px
  );
  background-size: 40px 40px;
  pointer-events: none;
  /* Difumina los bordes para que la textura no corte de golpe */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}

/* ──────────────────────────────────────────────────────────────────────
   REVEAL ON SCROLL

   El script inline en <head> agrega .anim a <html> ANTES del primer paint
   (sólo si el usuario no pidió reduced-motion), por lo que estos elementos
   arrancan ocultos sin parpadeo. El IntersectionObserver agrega .is-visible.
   ────────────────────────────────────────────────────────────────────── */

html.anim :is(
  .manifesto-item,
  .servicio-card,
  .estudio-card,
  .ranking-card-wrap,
  .value-item,
  .step,
  .cobertura-text,
  .cobertura-provinces,
  [data-reveal]
) {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.anim :is(
  .manifesto-item,
  .servicio-card,
  .estudio-card,
  .ranking-card-wrap,
  .value-item,
  .step,
  .cobertura-text,
  .cobertura-provinces,
  [data-reveal]
).is-visible {
  opacity: 1;
  transform: none;
}

/* Count-up: evita reflow al animar cifras */
[data-countup] {
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   ANIMACIONES GLOBALES
   ────────────────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Animation utilities */
.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-normal) var(--ease-out);
}

.animate-pulse {
  animation: pulse 3.5s var(--ease-inout) infinite;
}

.animate-bounce {
  animation: bounce 2s var(--ease-inout) infinite;
}

/* ──────────────────────────────────────────────────────────────────────
   RESPONSIVE TYPOGRAPHY
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body {
    font-size: 16px; /* Previene zoom en iOS */
  }

  h1 {
    font-size: var(--fs-display-md);
  }

  h2 {
    font-size: var(--fs-h2);
  }

  .container {
    padding: 0 var(--space-xl);
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-lg);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  button {
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   ACCESIBILIDAD
   ────────────────────────────────────────────────────────────────────── */

/* Respeto a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  a {
    text-decoration: underline;
  }

  button {
    border: 2px solid currentColor;
  }
}

/* Dark mode preferences */
@media (prefers-color-scheme: dark) {
  /* Ya estamos en dark mode por defecto */
}

/* ──────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ────────────────────────────────────────────────────────────────────── */

@media print {
  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  button {
    display: none;
  }
}


/* ===== LAYOUT (header/footer/nav) ===== */

      .header {
        position: sticky;
        top: 0;
        z-index: var(--z-fixed);
        background: var(--bg);
        border-bottom: 1px solid transparent;
        transition:
          border-color 300ms var(--ease-out),
          box-shadow 300ms var(--ease-out);
      }

      /* Al scrollear, el header gana una línea + sombra sutil */
      .header.scrolled {
        border-bottom-color: var(--line);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
      }

      .nav-container {
        max-width: var(--max-width-container);
        margin: 0 auto;
        padding: var(--space-xl) var(--space-2xl);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--gap-md);
      }

      .logo {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        font-family: var(--font-display);
        font-weight: var(--font-weight-black);
        font-size: 1.25rem;
        color: var(--color-text);
        text-transform: uppercase;
      }

      .logo svg {
        color: var(--color-accent);
        width: 24px;
        height: 24px;
      }

      .nav-links {
        display: flex;
        gap: var(--gap-md);
        flex: 1;
      }

      .nav-links a {
        font-size: var(--fs-ui);
        text-transform: uppercase;
        font-family: var(--font-mono);
        color: var(--color-text-muted);
        transition: var(--transition-color);
      }

      .nav-links a:hover {
        color: var(--color-accent);
      }

      /* Página activa: color de acento + subrayado celeste */
      .nav-links a[aria-current='page'] {
        color: var(--color-text);
      }

      .nav-links a[aria-current='page']::after {
        content: '';
        display: block;
        height: 2px;
        margin-top: 4px;
        background: var(--color-accent);
      }

      .lang-selector {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-family: var(--font-mono);
        font-size: var(--fs-ui);
        color: var(--color-text-muted);
      }

      .lang-btn {
        background: none;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: var(--fs-ui);
        padding: var(--space-xs) var(--space-sm);
        transition: var(--transition-color);
      }

      .lang-btn.active {
        color: var(--color-accent);
      }

      .lang-btn:hover:not([aria-disabled='true']) {
        color: var(--color-accent);
      }

      .lang-btn[aria-disabled='true'] {
        opacity: 0.45;
        cursor: not-allowed;
      }

      /* Contenedor de navegación (desktop): nav-links + idioma */
      .nav-menu {
        display: flex;
        flex: 1;
        align-items: center;
        gap: var(--gap-md);
      }

      /* Botón hamburguesa: oculto en desktop, visible en móvil */
      .nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: var(--color-text);
      }
      .nav-toggle-bar {
        display: block;
        width: 24px;
        height: 2px;
        margin: 3px auto;
        background: currentColor;
        transition: transform 250ms var(--ease-out), opacity 200ms var(--ease-out);
      }
      .header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
      .header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
      .header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

      /* Selector de idioma de Polylang (cuando el plugin está activo, sale como <ul>) */
      .lang-selector ul {
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin: 0;
        padding: 0;
      }
      .lang-selector ul li { margin: 0; }
      .lang-selector a,
      .lang-selector ul li a {
        font-family: var(--font-mono);
        font-size: var(--fs-ui);
        text-transform: uppercase;
        color: var(--color-text-muted);
        padding: var(--space-xs) var(--space-sm);
        transition: var(--transition-color);
      }
      .lang-selector a:hover,
      .lang-selector ul li a:hover { color: var(--color-accent); }
      .lang-selector .current-lang a,
      .lang-selector ul li.current-lang a,
      .lang-selector .lang-btn.active { color: var(--color-accent); }

      /* ===== Navegación móvil (drawer con hamburguesa) ===== */
      @media (max-width: 860px) {
        .nav-toggle { display: flex; }

        .nav-menu {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          background: var(--bg);
          border-bottom: 1px solid var(--color-line);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
          padding: var(--space-md) var(--space-2xl) var(--space-2xl);
          max-height: calc(100vh - 100%);
          overflow-y: auto;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-8px);
          transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms;
        }
        .nav-menu.is-open {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
        }

        .nav-links {
          flex-direction: column;
          gap: 0;
          width: 100%;
        }
        .nav-links a {
          display: block;
          padding: var(--space-lg) 0;
          font-size: 1rem;
          border-bottom: 1px solid var(--color-line);
        }
        .nav-links a[aria-current='page']::after { display: none; }

        .lang-selector { margin-top: var(--space-lg); justify-content: flex-start; }
      }

      main {
        flex: 1;
      }

      .footer {
        position: relative;
        overflow: hidden;
        background: var(--color-bg-surface);
        border-top: var(--border-line);
        padding: var(--space-4xl) var(--space-2xl) var(--space-2xl);
      }

      /* Constelación de fondo del footer: arriba, detrás del contenido */
      .footer .footer-constellation {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
      }

      .footer-content,
      .footer-bottom {
        position: relative;
        z-index: 1;
      }

      .footer-content {
        max-width: var(--max-width-container);
        margin: 0 auto var(--space-3xl);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-3xl);
      }

      /* Divisor sutil entre columnas (desde la 2ª en adelante) */
      .footer-col + .footer-col {
        padding-left: var(--space-2xl);
        border-left: 1px solid var(--color-line);
      }

      .footer-col h4 {
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-family: var(--font-mono);
        color: var(--color-accent);
        margin-bottom: var(--space-xl);
      }

      .footer-col p,
      .footer-col ul li {
        font-size: 0.95rem;
        color: var(--color-text-muted);
        line-height: 2;
      }

      .footer-col ul {
        list-style: none;
      }

      .footer-col a {
        color: var(--color-text-muted);
      }

      .footer-col a:hover {
        color: var(--color-accent);
      }

      .footer-bottom {
        max-width: var(--max-width-container);
        margin: 0 auto;
        padding-top: var(--space-2xl);
        border-top: var(--border-line);
        text-align: center;
        font-size: 0.8125rem;
        color: var(--color-text-muted);
      }

      @media (max-width: 768px) {
        .nav-container {
          padding: 1rem var(--space-xl);
        }

        .footer-content {
          grid-template-columns: 1fr 1fr;
          gap: var(--space-2xl);
        }

        /* Sin divisores verticales cuando las columnas se apilan */
        .footer-col + .footer-col {
          padding-left: 0;
          border-left: none;
        }
      }
    

/* ===== HOME (hero/manifiesto/servicios/cobertura/cta) ===== */

  /* HERO */
  .hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .hero {
    background: #000;
  }

  /* Poster de respaldo (debajo del video; visible sin video / reduced-motion / mobile) */
  .hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* Video de fondo */
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transform-origin: center;
    display: block;
    z-index: 1;
  }

  /* Sin movimiento o en mobile: ocultar el video y mostrar sólo el poster */
  @media (prefers-reduced-motion: reduce) {
    .hero-video {
      display: none;
    }
  }


  .hero-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }

  .scrim-center {
    background: radial-gradient(56% 44% at 50% 36%, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 70%);
  }
  .scrim-top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 24%);
  }
  .vignette {
    background: radial-gradient(125% 100% at 50% 38%, transparent 30%, rgba(0, 0, 0, 0.5) 76%, rgba(0, 0, 0, 0.95) 100%);
  }
  .grain {
    inset: -150%;
    opacity: 0.045;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.1s steps(4) infinite;
  }

  @keyframes grain {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-4%, 3%); }
    50% { transform: translate(3%, -2%); }
    75% { transform: translate(-2%, -3%); }
    100% { transform: translate(2%, 2%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .grain { animation: none; }
  }

  .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 920px;
    padding: 2rem;
    animation: fadeInUp 0.8s ease-out;
  }

  .hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--accent);
    margin-bottom: 1.75rem;
    letter-spacing: 0.1em;
  }

  .hero-title {
    font-family: 'Oswald', 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(56px, 11vw, 132px);
    line-height: 0.92;
    letter-spacing: 0.006em;
    margin-bottom: 2.5rem;
    text-shadow: 0 3px 34px rgba(0, 0, 0, 0.6);
  }

  .hero-title .light {
    font-weight: 200;
  }

  .hero-accent {
    color: var(--accent);
  }

  .hero-subtitle {
    font-size: clamp(16px, 3vw, 20px);
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
  }

  .hero-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .cta-primary,
  .cta-secondary {
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 12px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  .cta-primary {
    background: var(--accent);
    color: var(--on-accent);
    border: 1.5px solid var(--accent);
  }

  .cta-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
  }

  .cta-secondary {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
  }

  .cta-secondary:hover {
    background: var(--accent-soft);
    transform: translateY(-2px);
  }

  .hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: bounce 2s infinite;
    color: var(--accent);
  }

  /* MANIFESTO */
  .manifesto {
    position: relative;
    padding: 8rem 2rem;
    background: var(--bg);
  }

  /* Hairline dorada que separa el hero del manifiesto (ambos oscuros) */
  .manifesto::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
  }

  .manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .manifesto-item h2 {
    font-size: clamp(32px, 8vw, 48px);
    margin-bottom: 1rem;
    color: var(--text);
  }

  /* Punto final en oro (mismo recurso que el hero) */
  .accent-dot {
    color: var(--accent);
  }

  .manifesto-item p {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--soft);
    line-height: 1.8;
  }

  /* SERVICIOS */
  .servicios {
    padding: 8rem 2rem;
  }

  .servicios h2 {
    text-align: center;
    margin-bottom: 4rem;
  }

  .servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 920px;
    margin: 0 auto;
  }

  .servicio-card {
    padding: 2.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20, 17, 12, 0.04);
    transition: all 0.25s ease;
  }

  .servicio-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(20, 17, 12, 0.08);
  }

  .servicio-icon {
    color: var(--accent);
    margin-bottom: 1.25rem;
    display: inline-flex;
    transition: transform 0.3s ease;
  }

  .servicio-card:hover .servicio-icon {
    transform: translateY(-2px) scale(1.05);
  }

  .servicio-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }

  .servicio-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  /* COBERTURA */
  .cobertura {
    padding: 8rem 2rem;
    background: var(--bg);
  }

  .cobertura-split {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .cobertura-text h2 {
    font-size: clamp(32px, 8vw, 48px);
    margin-bottom: 0.25rem;
    color: var(--text);
  }

  .cobertura-text h2:last-of-type {
    margin-bottom: 1.5rem;
  }

  .cobertura-text p {
    color: var(--soft);
    line-height: 1.8;
  }

  .cobertura-provinces ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  /* Chips con punto/pin a la izquierda */
  .cobertura-provinces li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.95rem;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--soft);
    transition: all 0.2s ease;
  }

  .cobertura-provinces li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }

  .cobertura-provinces li:hover {
    border-color: var(--accent);
    color: var(--text);
  }

  /* CTA FINAL */
  .cta-final {
    padding: 11rem 2rem;
    background: var(--bg);
    text-align: center;
  }

  .cta-final h2 {
    margin-bottom: 1rem;
    font-size: clamp(28px, 5vw, 44px);
  }

  .cta-sub {
    color: var(--soft);
    font-size: clamp(15px, 2vw, 18px);
    margin-bottom: 2.25rem;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ANIMACIONES */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(-10px);
    }
  }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .manifesto,
    .servicios,
    .cobertura,
    .cta-final {
      padding: 4rem 1.5rem;
    }

    .manifesto-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .servicios-grid {
      grid-template-columns: 1fr;
    }

    .cobertura-split {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .cta-final {
      padding: 6rem 1.5rem;
    }

    .hero-ctas {
      gap: 0.75rem;
    }

    .cta-primary,
    .cta-secondary {
      padding: 0.85rem 1.5rem;
      font-size: 0.95rem;
    }
  }


/* ===== CONSTELACION (separador) ===== */

  .constellation {
    width: 100%;
    pointer-events: none;
    overflow: hidden;
    color: var(--accent, #a8762b);
  }

  .constellation svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Separador entre secciones */
  .constellation--separator {
    height: 120px;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  }

  /* Acento de footer (más sutil, ocupa el fondo) */
  .constellation--footer {
    height: 140px;
    opacity: 0.28;
  }

  .constellation-links line {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.35;
  }

  .constellation-nodes circle {
    fill: currentColor;
  }

  .constellation-nodes circle.is-pulse {
    animation: nodePulse 3.5s var(--ease-inout, ease-in-out) infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  @keyframes nodePulse {
    0%,
    100% {
      opacity: 0.45;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.6);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .constellation-nodes circle.is-pulse {
      animation: none;
    }
  }



/* ============ PÁGINAS INTERNAS ============ */

/* --- NOSOTROS --- */

  .sobre-page {
    min-height: 100vh;
  }

  .page-header {
    padding: 8rem 2rem 4rem;
    background: var(--color-bg-surface);
    border-bottom: var(--border-line);
    text-align: center;
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-ui);
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .page-header h1 {
    margin-bottom: 1.5rem;
  }

  .accent {
    color: var(--color-accent);
  }

  .lede {
    max-width: 620px;
    margin: 0 auto;
    color: var(--color-text-muted);
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 1.7;
  }

  .lede em {
    color: var(--color-text);
    font-style: italic;
  }

  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .block {
    padding: 4rem 0;
  }

  .block h2 {
    margin-bottom: 1.5rem;
  }

  .block p {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
  }

  .block p strong {
    color: var(--color-text);
  }

  /* Cifras con count-up */
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem 0 4rem;
  }

  .stat {
    border-left: 2px solid var(--color-accent);
    padding-left: 1.5rem;
  }

  .stat-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
  }

  .stat-label {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
  }

  /* Valores */
  .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
  }

  .value-item {
    padding: 2rem;
    background: var(--color-bg-surface);
    border: var(--border-line);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, transform 0.2s ease;
  }

  .value-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
  }

  .value-item h3 {
    color: var(--color-accent);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
  }

  .value-item p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
  }

  /* Método */
  .method-steps {
    display: grid;
    gap: 1.25rem;
    margin-top: 1rem;
  }

  .step {
    padding: 1.75rem 2rem;
    background: var(--color-bg-elev);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .step-number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-accent);
  }

  .step h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
  }

  .step p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.7;
  }

  /* CTA */
  .cta-block {
    text-align: center;
    padding: 4rem 0 6rem;
  }

  .cta-block h2 {
    margin-bottom: 2rem;
  }

  .cta-primary {
    display: inline-flex;
    padding: 1rem 2rem;
    background: var(--accent);
    color: var(--on-accent);
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.01em;
    transition: all 0.25s ease;
  }

  .cta-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
  }

  @media (max-width: 768px) {
    .page-header {
      padding: 4rem 1.5rem 3rem;
    }
    .container {
      padding: 0 1.5rem;
    }
    .block {
      padding: 3rem 0;
    }
    .stats {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .step {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
  }

/* --- CONTACTO --- */

  .contacto-page {
    min-height: 100vh;
  }

  .page-header {
    padding: 6rem 2rem 2rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--line);
    text-align: center;
  }

  .page-header h1 {
    margin-bottom: 1rem;
  }

  .page-header p {
    color: var(--text-muted);
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
  }

  .contacto-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
  }

  h2 {
    margin-bottom: 2rem;
  }

  /* FORM */
  .contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-group label {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.3s ease;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .form-group textarea {
    font-family: var(--font-body);
    resize: vertical;
  }

  .submit-btn {
    padding: 1rem 2rem;
    background: var(--accent);
    color: var(--on-accent);
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.01em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .submit-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
  }

  .form-message {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 1rem;
  }

  .form-message.success {
    background: rgba(63, 182, 122, 0.1);
    border: 1px solid var(--up);
    color: var(--up);
  }

  .form-message.error {
    background: rgba(224, 83, 78, 0.1);
    border: 1px solid var(--down);
    color: var(--down);
  }

  /* INFO */
  .contacto-info-section h2 {
    margin-bottom: 2rem;
  }

  .contact-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
  }

  .contact-item:last-child {
    border-bottom: none;
  }

  .contact-item h3 {
    font-size: 0.875rem;
    text-transform: uppercase;
    font-family: var(--font-mono);
    color: var(--accent);
    margin-bottom: 0.75rem;
  }

  .contact-item p,
  .contact-item a {
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  .contact-item a {
    color: var(--accent);
  }

  .social-links {
    display: flex;
    gap: 1rem;
  }

  .social-links a {
    padding: 0.5rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
  }

  .social-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  @media (max-width: 768px) {
    .page-header {
      padding: 3rem 1.5rem 1rem;
    }

    .container {
      padding: 2rem 1.5rem;
    }

    .contacto-content {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  }

/* --- ESTUDIOS --- */

  .estudios-page {
    min-height: 100vh;
  }

  .page-header {
    padding: 6rem 2rem 2rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--line);
    text-align: center;
  }

  .page-header h1 {
    margin-bottom: 1rem;
  }

  .page-header p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
  }

  .filtros {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .filtro-btn {
    padding: 0.75rem 1.5rem;
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .filtro-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .filtro-btn.active {
    background: var(--accent);
    color: var(--bg-base);
    border-color: var(--accent);
  }

  .estudios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .estudio-card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .estudio-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
  }

  .estudio-portada {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--bg-surface);
  }

  .estudio-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .estudio-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .estudio-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
  }

  .estudio-badge {
    background: var(--accent-dim);
    color: var(--accent);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }

  .estudio-fecha {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .estudio-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }

  .estudio-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex-grow: 1;
  }

  .estudio-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--accent);
  }

  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
  }

  @media (max-width: 768px) {
    .page-header {
      padding: 3rem 1.5rem 1rem;
    }

    .container {
      padding: 2rem 1.5rem;
    }

    .filtros {
      justify-content: flex-start;
    }
  }

/* --- RANKINGS --- */

  .rankings-page {
    min-height: 100vh;
  }

  .page-header {
    padding: 6rem 2rem 2rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--line);
    text-align: center;
  }

  .page-header h1 {
    margin-bottom: 1rem;
  }

  .page-header p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
  }

  .filtros {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .filtro-btn {
    padding: 0.75rem 1.5rem;
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .filtro-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .filtro-btn.active {
    background: var(--accent);
    color: var(--bg-base);
    border-color: var(--accent);
  }

  .rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .ranking-card-wrap {
    position: relative;
  }

  .ranking-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-end;
    cursor: zoom-in;
  }

  .ranking-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
  }

  .ranking-placa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .ranking-placa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ranking-overlay {
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(10, 12, 18, 0.9), transparent);
    width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ranking-categoria {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--accent);
  }

  .ranking-fecha {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .ranking-cobertura {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    background: var(--accent);
    color: var(--bg-base);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-mono);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .ranking-card-wrap:hover .ranking-cobertura,
  .ranking-cobertura:focus-visible {
    opacity: 1;
  }

  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
  }

  @media (max-width: 768px) {
    .page-header {
      padding: 3rem 1.5rem 1rem;
    }

    .container {
      padding: 2rem 1.5rem;
    }

    .filtros {
      justify-content: flex-start;
    }
  }


/* --- DETALLE ESTUDIO/RANKING --- */

  .estudio-detail {
    min-height: 100vh;
    padding: 4rem 2rem;
  }

  .container {
    max-width: 800px;
    margin: 0 auto;
  }

  .breadcrumb {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-muted);
  }

  .breadcrumb a {
    color: var(--accent);
  }

  .article-header {
    margin-bottom: 3rem;
  }

  .meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
  }

  .badge {
    background: var(--accent-dim);
    color: var(--accent);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }

  .meta time {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .article-header h1 {
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  .subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
  }

  .article-content {
    margin-bottom: 4rem;
  }

  .portada-figure {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .portada-figure img {
    width: 100%;
    height: auto;
    display: block;
  }

  .description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
  }

  .description p {
    margin-bottom: 1.5rem;
  }

  .pdf-cta {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
  }

  .pdf-cta h3 {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: var(--bg-base);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s ease;
  }

  .download-btn:hover {
    background: var(--text);
    color: var(--bg-base);
  }

  .back-link {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
  }

  .back-link a {
    font-family: var(--font-mono);
    font-size: 0.875rem;
  }

  @media (max-width: 768px) {
    .estudio-detail {
      padding: 2rem 1.5rem;
    }

    .article-header h1 {
      font-size: clamp(28px, 6vw, 40px);
    }
  }

  .ranking-detail {
    min-height: 100vh;
    padding: 4rem 2rem;
  }

  .container {
    max-width: 800px;
    margin: 0 auto;
  }

  .breadcrumb {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-muted);
  }

  .breadcrumb a {
    color: var(--accent);
  }

  .article-header {
    margin-bottom: 3rem;
  }

  .meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
  }

  .badge {
    background: var(--accent-dim);
    color: var(--accent);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }

  .meta time {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .article-header h1 {
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  .article-content {
    margin-bottom: 4rem;
  }

  .placa-figure {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
  }

  .placa-figure img {
    width: 100%;
    height: auto;
    display: block;
  }

  .description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
  }

  .description p {
    margin-bottom: 1.5rem;
  }

  .cobertura-cta {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
  }

  .cobertura-cta h3 {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .cobertura-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: var(--bg-base);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s ease;
  }

  .cobertura-btn:hover {
    background: var(--text);
    color: var(--bg-base);
  }

  .back-link {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
  }

  .back-link a {
    font-family: var(--font-mono);
    font-size: 0.875rem;
  }

  @media (max-width: 768px) {
    .ranking-detail {
      padding: 2rem 1.5rem;
    }

    .article-header h1 {
      font-size: clamp(28px, 6vw, 40px);
    }
  }


/* --- LIGHTBOX (rankings) --- */

  .lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 140);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl, 2rem);
  }

  .lightbox[hidden] {
    display: none;
  }

  .lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.82);
    backdrop-filter: blur(6px);
    animation: lbFade 200ms ease-out;
  }

  .lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--color-bg-elev, #1b2230);
    border: 1px solid var(--color-line, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 12px);
    animation: lbPop 240ms cubic-bezier(0, 0, 0.2, 1);
  }

  .lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 18, 0.6);
    color: var(--color-text, #f4f7fb);
    border: 1px solid var(--color-line, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }

  .lightbox-close:hover {
    background: var(--accent, #d4a23c);
    color: var(--color-bg-base, #0a0c12);
  }

  .lightbox-figure {
    margin: 0;
    background: var(--color-bg-surface, #141925);
    border-bottom: 1px solid var(--color-line, rgba(255, 255, 255, 0.08));
  }

  .lightbox-img {
    display: block;
    width: 100%;
    max-height: 64vh;
    object-fit: contain;
  }

  .lightbox-meta {
    padding: var(--space-2xl, 2rem);
  }

  .lightbox-eyebrow {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .lightbox-cat {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-bg-base, #0a0c12);
    background: var(--accent, #d4a23c);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
  }

  .lightbox-fecha {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--color-text-muted, #8a93a3);
  }

  .lightbox-heading {
    font-size: clamp(20px, 4vw, 28px);
    margin-bottom: 1.5rem;
  }

  .lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .lightbox-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
    text-transform: uppercase;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-md, 8px);
    transition: all 150ms ease;
  }

  .lightbox-detalle {
    background: var(--accent, #d4a23c);
    color: var(--color-bg-base, #0a0c12);
  }

  .lightbox-detalle:hover {
    background: var(--accent-hover, #e2b454);
    color: var(--color-bg-base, #0a0c12);
  }

  .lightbox-cobertura {
    border: 1px solid var(--accent, #d4a23c);
    color: var(--accent, #d4a23c);
  }

  .lightbox-cobertura:hover {
    background: var(--accent, #d4a23c);
    color: var(--color-bg-base, #0a0c12);
  }

  .lightbox-cobertura[hidden] {
    display: none;
  }

  @keyframes lbFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes lbPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lightbox-backdrop,
    .lightbox-dialog {
      animation: none;
    }
  }

  @media (max-width: 768px) {
    .lightbox {
      padding: 0;
    }
    .lightbox-dialog {
      max-height: 100vh;
      height: 100%;
      border-radius: 0;
    }
  }


/* ===== Fix nav override v1: hamburguesa solo en móvil + switcher Polylang ===== */
.header .nav-toggle { display: none; }
@media (max-width: 860px) {
  .header .nav-toggle { display: flex; }
}
.lang-selector ul { list-style: none; display: flex; gap: var(--space-sm); margin: 0; padding: 0; }
.lang-selector li { list-style: none; }
.lang-selector li::marker { content: ""; }
.lang-selector a { text-transform: uppercase; }