/* ============================================================
   SISTEMA DE DISEÑO CITI — escalas + puente con el template
   ------------------------------------------------------------
   citi-tokens.css SÓLO tiene color y lo regenera scripts/gen-palette.py,
   así que no se puede escribir a mano. Este archivo es la otra mitad del
   sistema (espaciado, tipografía, radio, sombra, movimiento, layout) y el
   puente que hace que las variables del template (--pxn-*) beban de los
   tokens CITI en vez de tener sus propios hex hardcodeados.

   Orden de carga (ver src/app/(site)/layout.tsx):
     main.citi.css  →  citi-tokens.css  →  citi-system.css  →  citi.css
                          (color)          (ESTE: escalas)     (componentes)

   Regla: un valor nuevo de color, espacio, radio o sombra se declara AQUÍ
   (o en citi-tokens.css si es color de marca), nunca suelto en un componente.
   ============================================================ */

:root {
  /* ---- Espaciado — base 4px --------------------------------------------
     Cubre lo que el sitio ya usaba (16/24/30/60/80/120) sin inventar pasos. */
  --citi-space-0: 0;
  --citi-space-1: 0.25rem; /*  4px */
  --citi-space-2: 0.5rem; /*  8px */
  --citi-space-3: 0.75rem; /* 12px */
  --citi-space-4: 1rem; /* 16px */
  --citi-space-5: 1.25rem; /* 20px */
  --citi-space-6: 1.5rem; /* 24px */
  --citi-space-8: 2rem; /* 32px */
  --citi-space-10: 2.5rem; /* 40px */
  --citi-space-12: 3rem; /* 48px */
  --citi-space-16: 4rem; /* 64px */
  --citi-space-20: 5rem; /* 80px */
  --citi-space-24: 6rem; /* 96px */
  --citi-space-30: 7.5rem; /* 120px */

  /* ---- Tipografía ------------------------------------------------------
     Urbanist la carga next/font (auto-alojada, con swap). El fallback deja
     el sitio legible si la variable no llegara. */
  --citi-font-sans: var(--font-urbanist), "Urbanist", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* Escala fluida 390px → 1440px: los títulos ya no saltan de 90px en
     escritorio a 90px en un móvil de 390px. */
  --citi-text-xs: 0.8125rem; /* 13px */
  --citi-text-sm: 0.875rem; /* 14px */
  --citi-text-base: 1rem; /* 16px */
  --citi-text-md: 1.125rem; /* 18px */
  --citi-text-lg: 1.25rem; /* 20px */
  --citi-text-xl: clamp(1.25rem, 18.51px + 0.381vw, 1.5rem); /* 20 → 24 */
  --citi-text-2xl: clamp(1.375rem, 19.03px + 0.762vw, 1.875rem); /* 22 → 30 */
  --citi-text-3xl: clamp(1.625rem, 20.8px + 1.333vw, 2.5rem); /* 26 → 40 */
  --citi-text-4xl: clamp(2rem, 25.31px + 1.714vw, 3.125rem); /* 32 → 50 */
  --citi-text-5xl: clamp(2.5rem, 21.43px + 4.762vw, 5.625rem); /* 40 → 90 */
  --citi-text-display: clamp(4rem, 13vw, 12.5rem); /* marquee / cifras decorativas */

  --citi-leading-tight: 1.15;
  --citi-leading-snug: 1.3;
  --citi-leading-normal: 1.6;
  --citi-leading-relaxed: 1.75;

  --citi-tracking-tight: -0.02em;
  --citi-tracking-normal: 0;
  --citi-tracking-wide: 0.04em;

  --citi-weight-regular: 400;
  --citi-weight-medium: 500;
  --citi-weight-semibold: 600;
  --citi-weight-bold: 700;

  /* ---- Radios ----------------------------------------------------------
     El sitio traía 12 valores distintos (5, 8, 10, 12, 14, 16, 18, 50, 100,
     500, 999px y 50%) — cuatro de ellos sólo para decir "píldora". Son 5. */
  --citi-radius-xs: 4px;
  --citi-radius-sm: 8px;
  --citi-radius-md: 10px; /* el radio dominante del template */
  --citi-radius-lg: 16px;
  --citi-radius-xl: 24px;
  --citi-radius-pill: 999px;
  --citi-radius-circle: 50%;

  /* ---- Sombras — tintadas con el navy de marca, no negro puro ---------- */
  --citi-shadow-xs: 0 1px 2px rgba(13, 30, 85, 0.06);
  --citi-shadow-sm: 0 2px 8px rgba(13, 30, 85, 0.08);
  --citi-shadow-md: 0 8px 24px rgba(13, 30, 85, 0.1);
  --citi-shadow-lg: 0 16px 48px rgba(13, 30, 85, 0.14);
  --citi-shadow-focus: 0 0 0 3px rgba(13, 30, 85, 0.35);

  /* ---- Movimiento ------------------------------------------------------ */
  --citi-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --citi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --citi-duration-fast: 150ms;
  --citi-duration: 250ms;
  --citi-duration-slow: 400ms;

  /* ---- Layout ---------------------------------------------------------- */
  --citi-container-max: 1320px;
  --citi-gutter: var(--citi-space-6);
  --citi-section-y: clamp(3rem, 7vw, 7.5rem);
}
/* Los colores NO se declaran aquí: viven en citi-tokens.css, que genera
   scripts/gen-palette.py con el contraste de cada par ya medido. */

/* ============================================================
   PUENTE: las variables del template beben de los tokens CITI
   ------------------------------------------------------------
   main.citi.css declara sus propios --pxn-* con hex hardcodeados
   (líneas 104-112). Al redefinirlos aquí, cambiar un token CITI cambia
   el template entero: se acabaron las dos fuentes de verdad.
   ============================================================ */
:root {
  --pxn-ff-body: var(--citi-font-sans);
  --pxn-ff-heading: var(--citi-font-sans);
  --pxn-ff-heading-primary: var(--citi-font-sans);
  /* El template tiene una errata: --pxn-ff-heding (sin la 'a'), usada en dos
     reglas. Se define para que esas dos no caigan al serif del navegador. */
  --pxn-ff-heding: var(--citi-font-sans);

  --pxn-fs-body: var(--citi-text-base);

  --pxn-fw-regular: var(--citi-weight-regular);
  --pxn-fw-medium: var(--citi-weight-medium);
  --pxn-fw-sbold: var(--citi-weight-semibold);
  --pxn-fw-bold: var(--citi-weight-bold);

  /* Texto */
  --pxn-color-heading-primary: var(--citi-text-strong);
  --pxn-color-text-body: var(--citi-text-body);
  --pxn-color-text-placeholder: var(--citi-text-muted);
  /* grey-1 sólo colorea enlaces y etiquetas del pie, o sea texto secundario
     sobre navy. Valía #9AA6C7, fuera de paleta (6,49:1); ahora 9,46:1. */
  --pxn-color-grey-1: var(--citi-text-on-dark-muted);

  /* Marca */
  --pxn-color-theme-primary: var(--citi-brand);
  --pxn-color-theme-secondary: var(--citi-brand);

  /* Superficies */
  --pxn-color-theme-bg-primary: var(--citi-surface-dark);
  --pxn-color-theme-bg-light: var(--citi-surface-alt);
  --pxn-color-theme-bg-light-2: var(--citi-surface-brand);
  --pxn-color-common-white: var(--citi-surface);

  /* Bordes. border-4 era #181034, un morado oscuro que no está en ninguna
     escala de la marca: el único color de todo el sitio que no era ni azul,
     ni navy, ni rojo, ni neutro. */
  --pxn-color-border-1: var(--citi-border-strong);
  --pxn-color-border-2: var(--citi-border-on-dark);
  --pxn-color-border-4: var(--citi-navy-950);
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------
   No había ni una regla prefers-reduced-motion en todo el CSS. Esto cubre
   transiciones y animaciones CSS; las de GSAP (que escribe estilos inline)
   no las puede parar el CSS, así que se cortan en el propio
   assets/js/main.js — ver la constante pxnReducedMotion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* El marquee y el cursor mágico son puro adorno en movimiento: el primero
     además recorta el correo a media palabra, así que sin animación no aporta
     nada. (Los nombres son los reales del template, comprobados en los
     partials: pxn-h1_marquee_wrap en el home y pxn_footer_marquee en el pie.) */
  .pxn-h1_marquee_wrap,
  .pxn-h1-marquee-section,
  .pxn_footer_marquee,
  .mouse-cursor {
    display: none !important;
  }
}