/* =====================================================================
   Pro Racing Park · tokens de diseño
   Única fuente de verdad. Ningún valor de color, tipografía, espaciado
   o duración se escribe a mano en otro archivo.
   Dirección: A · Telemetría (aprobada 2026-08-11)
   ===================================================================== */

:root{
  /* ---------- color ---------- */
  /* Carpeta de marca 2025: Negro Pista #0D0D0D (fondo principal), Negro Gris
     #2A2A2A (fondos secundarios), Amarillo Racing #F5C800, Amarillo Oscuro
     #C9A200 (hover, énfasis), Blanco #FFFFFF. */
  --negro:        #0D0D0D;   /* fondo del sitio: Negro Pista */
  --carbon:       #171717;   /* superficies elevadas */
  --carbon-alto:  #2A2A2A;   /* hover de superficies: Negro Gris */
  --linea:        #262626;   /* bordes y rejilla */
  --linea-clara:  #3A3A3A;
  --humo:         #8A8A8E;   /* texto secundario */
  --humo-tenue:   #7E7E83;   /* tercer nivel. El minimo que pasa AA sobre negro */
  --texto:        #CFCFD2;   /* texto de párrafo */
  --blanco:       #F2F2F2;   /* títulos */

  --amarillo:     #F5C800;   /* Amarillo Racing. Solo CTA y momentos clave */
  --amarillo-alto:#FFD633;
  --amarillo-oscuro:#C9A200; /* hover de CTA y énfasis */
  --amarillo-08:  rgba(245,200,0,.08);
  --amarillo-55:  rgba(245,200,0,.55);

  --rojo:         #E23A2E;   /* mundo Acción */
  --violeta:      #7B61FF;   /* mundo Para quedarse */
  --verde:        #2FBF71;   /* confirmaciones */
  /* Fin de semana largo y feriado (migración 47). Va en la escala del
     amarillo de la marca y no en un color propio: el naranja que se probó
     primero se leía como rojo, y en la agenda el rojo es "cerrado", así
     que el día más fuerte del mes parecía el día cerrado (Juan,
     2026-09-27). Lo que separa un uso del otro no es el color sino el
     tono y la forma: el finde largo va en amarillo pleno y en una barra
     ancha, el feriado suelto en el amarillo oscuro, y el fondo es apenas
     un tinte. */
  --amarillo-05:  rgba(245,200,0,.05);
  --amarillo-14:  rgba(245,200,0,.14);
  --amarillo-30:  rgba(245,200,0,.30);

  /* ---------- tipografía ----------
     Sistema de la carpeta de marca: Evogria (titulares), Chromia Bold Italic
     (subtítulos y destacados), Poppins (cuerpo, precios y datos).
     Evogria y Chromia no están en Google Fonts: van por @font-face desde
     /fonts/ (ver abajo). Mientras no estén los archivos, cae en Barlow
     Condensed, que es la fuente del prototipo aprobado en agosto. */
  --display: "Evogria", "Barlow Condensed", Impact, sans-serif;
  --sub:     "Chromia", "Barlow Condensed", Impact, sans-serif;
  --cuerpo:  "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:    var(--sub);      /* botones, precios, nombres de producto */
  --mono:    var(--cuerpo);   /* etiquetas chicas en mayúsculas con tracking */

  --t-hero:    clamp(46px, 11.4vw, 168px);   /* Evogria es más ancha que Barlow: con 13,2vw "ES UN PARQUE." se partía en dos líneas en un celular */
  --t-h2:      clamp(30px, 5.6vw, 60px);
  --t-h3:      clamp(22px, 3.6vw, 40px);
  --t-h4:      23px;
  --t-lead:    clamp(15px, 1.9vw, 19px);
  --t-cuerpo:  16px;
  --t-dato:    clamp(22px, 2.9vw, 30px);
  --t-micro:   11px;   /* etiquetas en mayúsculas, con tracking. Menos de 11 no se lee en un celular */

  --tr-ancho:  .16em;  /* etiquetas de 10-11px en mayúsculas. Único valor: antes había seis (.06 a .18em) para el mismo rol */
  --tr-medio:  .1em;   /* menú, códigos y etiquetas de 12px o más: a ese cuerpo .16em ya se abre demasiado */

  /* Tracking negativo de la display. Evogria en mayúsculas a 60px o más deja
     huecos entre letras que leen como plantilla; el ojo lee "caro" cuando las
     palabras se compactan. Escalonado porque el negativo que sirve a 168px
     rompe la legibilidad a 20px. */
  --tr-hero:   -.028em;
  --tr-titulo: -.018em;
  --tr-sub:    -.01em;

  /* ---------- espaciado, escala de 4 ---------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 88px;  --e-10:130px;

  --borde-pagina: 20px;
  --ancho-max: 1440px;

  /* ---------- radios ----------
     La dirección Telemetría es de esquinas rectas: el radio se reserva
     para elementos que tienen que leerse como control, no como panel. */
  --r-0: 0;
  --r-1: 3px;
  --r-pill: 999px;

  /* ---------- movimiento ---------- */
  --ease:      cubic-bezier(.16,.84,.32,1);
  --ease-out:  cubic-bezier(.2,.7,.3,1);
  --d-presion: .13s;   /* respuesta al toque: tiene que ser casi instantanea */
  --d-hover:   .2s;    /* hover y foco. Nada de interaccion pasa de 300ms */
  --d-rapida:  .18s;
  --d-media:   .35s;
  --d-lenta:   .8s;
  --d-entrada: 1.05s;

  /* ---------- capas ---------- */
  --z-fondo: 0;  --z-contenido: 2;  --z-mini: 40;
  --z-header: 60;  --z-progreso: 70;  --z-modal: 90;
}

@media (min-width: 900px){
  :root{ --borde-pagina: 40px; }
}

/* ---------- tipografías de marca, archivos propios ----------
   Evogria (Situjuh Nazara) y Chromia (Pixel Sagas) no están en Google Fonts.
   Van desde sitio/fonts/ en OTF: pesan entre 25 y 72 KB, no justifica
   convertirlas. Solo se cargan los cortes que se usan. Licencias: las dos
   son gratis para uso personal y cobran el uso comercial, ver estado.md. */
@font-face{font-family:"Evogria";src:url("/fonts/evogria.otf") format("opentype");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Evogria";src:url("/fonts/evogria-italic.otf") format("opentype");
  font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Chromia";src:url("/fonts/chromia-bold.otf") format("opentype");
  font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Chromia";src:url("/fonts/chromia-bold-italic.otf") format("opentype");
  font-weight:600 900;font-style:italic;font-display:swap}