/* =========================================================
   930 AUTOGEST — Design tokens
   Fuente de verdad para color, tipografía y espaciado.
   No fijar colores/tamaños sueltos en otros archivos: usar
   siempre estas variables para que la marca sea consistente
   y editable desde un único sitio.
   ========================================================= */

:root {
  /* Color de marca */
  --color-zafiro: #34383E;      /* cabeceras, bloques premium */
  --color-grafito: #25282C;     /* texto principal */
  --color-carbon: #151719;      /* texto fuerte / fondos muy oscuros */
  --color-plata: #B8BDC2;       /* líneas, separadores, detalles */
  --color-blanco: #FAFAF9;      /* fondo general */
  --color-gris-claro: #F1F2F2;  /* fondo de secciones secundarias */
  --color-rojo: #D40000;        /* acción */
  --color-rojo-hover: #A90000;

  /* Superficie / texto semánticos (para no repetir hex en componentes) */
  --bg-page: var(--color-blanco);
  --bg-section-alt: var(--color-gris-claro);
  --bg-dark: var(--color-zafiro);
  --bg-darker: var(--color-carbon);
  --text-body: var(--color-grafito);
  --text-strong: var(--color-carbon);
  --text-on-dark: var(--color-blanco);
  --text-muted: #5A5F66;
  --border-subtle: #E3E5E6;
  --border-plata: var(--color-plata);
  --action: var(--color-rojo);
  --action-hover: var(--color-rojo-hover);
  /* Rojo de acción SOBRE FONDO OSCURO.
     El rojo de marca (#D40000) cumple de sobra sobre el fondo claro
     (5,29:1), pero sobre --bg-darker (#151719) se queda en 3,25:1,
     por debajo del 4,5:1 que exige WCAG AA. No se cambia la marca:
     se aclara solo para los fondos oscuros, donde da 5,85:1.
     Usar en: panel de eventos y cualquier bloque sobre --bg-darker. */
  --action-on-dark: #FF5A52;
  --account-color: var(--color-carbon);  /* neutro oscuro — botón "Área privada", nunca azul: fuera de la paleta de marca */
  --account-color-hover: var(--color-grafito);

  /* Tipografía
     — display: geométrica, deportiva, para titulares
     — body: sans neutra, para textos largos

     SOLO FUENTES DE SISTEMA, y no por comodidad: el tema no sirve
     ningún @font-face propio, así que cualquier nombre que se ponga
     aquí sin tenerlo alojado es una apuesta a que NADIE lo declare.

     Ya salió cara. Estas pilas empezaban por "Inter" y "Public Sans"
     como deseo para el día que se autoalojaran. WooCommerce declara en
     producción un @font-face de Inter para sus propias plantillas
     —local no lo hace, porque lleva otra versión—, así que en el sitio
     de verdad "Inter" SÍ resolvía: cada primera visita se bajaba
     319 KB de una fuente variable que nadie había elegido, y el
     cambio de fuente al llegar movía el texto de la página entera.
     Medido con Lighthouse contra producción el 2026-08-30: /precios/
     con CLS 0,15 (el umbral es 0,10), y el culpable que señala el
     propio informe es `Web font loaded: Inter-VariableFont`.

     Si algún día se quiere Inter de verdad, se autoaloja en
     assets/fonts/, se declara aquí su @font-face y se precarga. Lo que
     no puede volver a pasar es NOMBRAR una fuente que no servimos:
     basta con que un plugin la declare para que vuelva el problema.
     Lo mismo valía para "Poppins" en --font-display, que se quita por
     el mismo motivo; "Avenir Next" se queda porque es una fuente de
     sistema de macOS y no se descarga nunca. */
  --font-display: "Avenir Next", "Segoe UI Semibold", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.1;
  --lh-normal: 1.6;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(21, 23, 25, 0.06), 0 4px 12px rgba(21, 23, 25, 0.04);
  --header-height: 120px;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* La cabecera de 120px estaba dimensionada para el logo de 104px de alto
   del escritorio. En móvil ese logo pasa a ~45px (ver .site-branding img
   en main-v40.css), así que 120px dejaban la barra medio vacía; 72px la
   ajustan al contenido real —controles de 44px con aire suficiente— y
   devuelven ~48px de pantalla en una barra que es `position: sticky` y
   se come el 15% del alto visible de un móvil de 812px.
   El menú desplegable no necesita ningún ajuste: su altura máxima se
   calcula con esta misma variable (main-v40.css, `100dvh - --header-height`),
   así que gana ese espacio automáticamente. */
@media (max-width: 767px) {
  :root { --header-height: 72px; }
}

/* La línea divisoria, un poco más arriba. De 120px a 104px deja 22px de
   aire por encima y por debajo del logo (60px) en vez de 30, que es lo
   que hace juego con los 24px que ahora separan la línea del hero.
   SOLO a partir de 1200px, y esto no es un capricho: entre 768 y 1199px
   el logo mide 104px de alto (ver .site-branding img en main-v40.css), o
   sea que en una cabecera de 104px lo llenaría de borde a borde. A
   partir de 1200px el logo baja a 60px y ahí sí sobra sitio. */
@media (min-width: 1200px) {
  :root { --header-height: 104px; }
}

/* Reduce motion: respetado en todo el tema, no solo aquí */
@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;
  }
}