/* ═══════════════════════════════════════════════════════════════════════════
   Road Room — el sistema.

   La paleta NO está inventada: está medida sobre el vinilo del remolque, que
   es la pieza física de la marca. Contando píxeles salieron tres cosas:

     · negro puro         #000000   el 76% de la caja
     · rojo               #E84048   idéntico al #E74249 que declara su CSS
     · pergamino          #E0C488   más dorado de lo que parece a simple vista

   Y el logotipo es rojo al 100%: ni un píxel amarillo. El #F9BF00 que aparece
   en su hoja de estilos actual es el dorado de Enigmatic colándose por la
   plantilla compartida, no un color de esta marca. Aquí no está.

   Todos los pares de color van medidos, no supuestos. Los que fallaban están
   anotados donde toca para que nadie los repita.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Fondos ──────────────────────────────────────────────────────────────
     Los grises tiran a cálido, hacia el pergamino, en vez de al azul pizarra
     de costumbre. Un gris neutro aquí se leería como prestado de otra web; con
     el sesgo cálido pertenecen a la misma familia que el resto. */
  --rr-void:      #000000;   /* el negro del remolque. Sólo para paneles-objeto */
  --rr-bg:        #0B0A0A;   /* el suelo de la página, un pelo levantado */
  --rr-surface:   #161413;
  --rr-surface-2: #201D1B;
  --rr-line:      #2E2A27;
  --rr-line-viva: #453E39;

  /* ── Rojo ────────────────────────────────────────────────────────────────
     OJO con el blanco encima: #FFF sobre #E74249 da 3,98:1 y NO pasa AA. Es la
     trampa clásica de los rojos coral. Por eso el texto de los botones es
     --rr-sobre-rojo (casi negro), que da 4,75:1.

     De paso, rojo con texto oscuro es exactamente cómo se lee una señal de
     tráfico. En una marca que se llama Road, viene de fábrica. */
  --rr-rojo:       #E74249;
  --rr-rojo-vivo:  #FF5A61;   /* hover y focos */
  --rr-rojo-hondo: #94040A;   /* el que sí funciona sobre pergamino: 5,45:1 */
  --rr-sobre-rojo: #14100F;

  /* ── Pergamino ───────────────────────────────────────────────────────────
     La mitad de abajo del vinilo. Aquí es una superficie grande y tranquila,
     nunca un acento: en cuanto se usa para texto pequeño sobre oscuro empieza
     a competir con el rojo y la jerarquía se deshace.

     Sobre pergamino, el rojo normal da 2,36:1 y es ilegible. Se usa
     --rr-rojo-hondo o directamente --rr-sobre-rojo. */
  --rr-pergamino:       #E0C488;
  --rr-pergamino-claro: #F2E4C2;
  --rr-pergamino-hondo: #C9A868;

  /* ── Texto ───────────────────────────────────────────────────────────────
     Blanco roto cálido, no blanco puro: el vinilo es cálido y un #FFF plano al
     lado se ve azulado. */
  --rr-texto:       #F0EBE3;   /* 16,66:1 sobre el fondo */
  --rr-texto-tenue: #A39A8E;   /*  7,13:1 · el gris de lectura */

  /* SOLO para lo que no se lee: separadores, barras de migas, líneas.
     Da 3,01:1 sobre una tarjeta y 3,78:1 sobre negro, así que en cuanto se usa
     para una palabra que alguien tiene que leer, falla. Ya pasó una vez. */
  --rr-texto-suave: #6F675E;

  /* Los dos tonos de texto DENTRO del panel de pergamino. Los de arriba son
     grises claros pensados para fondo oscuro: sobre pergamino dan 1,64:1. */
  --rr-sobre-pergamino:       #14100F;   /* 11,18:1 */
  --rr-sobre-pergamino-tenue: #4A3F33;   /*  6,06:1 */

  /* ── Tipografía ──────────────────────────────────────────────────────────
     Oswald ya es suya y encaja con el logotipo: condensada, angular, de rótulo.

     Barlow para el texto no es una elección neutra. Está dibujada a partir de
     la señalización de carretera y autopista, y esta marca va literalmente en
     un remolque de un sitio a otro. La familia dice lo mismo que el negocio.

     Barlow Condensed para etiquetas y datos: mantiene el aire de señal pero se
     distingue de los titulares. */
  --rr-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --rr-body:    "Barlow", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --rr-rotulo:  "Barlow Condensed", "Arial Narrow", sans-serif;

  /* Escala de tipos. Cada paso sale del anterior, no de una lista suelta. */
  --rr-t-xs:  .78rem;
  --rr-t-sm:  .92rem;
  --rr-t-md:  1.05rem;
  --rr-t-lg:  clamp(1.15rem, 1.05rem + .5vw,  1.35rem);
  --rr-t-h3:  clamp(1.35rem, 1.15rem + 1vw,   1.9rem);
  --rr-t-h2:  clamp(1.9rem,  1.5rem + 2vw,    3rem);
  --rr-t-h1:  clamp(2.6rem,  1.9rem + 3.4vw,  4.6rem);
  --rr-t-hero: clamp(3rem,   2rem + 5.2vw,    6.4rem);

  /* ── Ritmo ───────────────────────────────────────────────────────────────
     Una sola escala de espacios. Que las secciones respiren igual en toda la
     web es la mitad de que parezca hecha por una sola mano. */
  --rr-e1: .35rem;
  --rr-e2: .7rem;
  --rr-e3: 1.15rem;
  --rr-e4: 1.9rem;
  --rr-e5: 3rem;
  --rr-e6: 4.5rem;
  --rr-seccion: clamp(3.75rem, 2.5rem + 6vw, 7.5rem);
  --rr-ancho:   1200px;
  --rr-medida:  68ch;   /* ancho de lectura cómodo */

  /* ── Formas ──────────────────────────────────────────────────────────────
     Radios cortos. El logotipo son cintas plegadas con vértices marcados y el
     remolque es una caja: redondear mucho contradice las dos cosas. */
  --rr-r1: 3px;
  --rr-r2: 6px;
  --rr-r3: 10px;

  --rr-sombra:      0 14px 40px rgba(0, 0, 0, .55);
  --rr-sombra-roja: 0 12px 34px rgba(231, 66, 73, .28);

  /* ── Movimiento ──────────────────────────────────────────────────────────
     Una curva y dos duraciones para toda la web. */
  --rr-ease:  cubic-bezier(.22, .61, .36, 1);
  --rr-rapido: .18s;
  --rr-lento:  .55s;

  /* ── El rastro ───────────────────────────────────────────────────────────
     El elemento que la marca ya usa: el reguero de puntos de mapa que cruza el
     vinilo. Aquí no es un adorno, es estructura: marca el recorrido «nosotros
     vamos hasta ti» y une los pasos, que sí son una secuencia real.

     Va como variable para que el trazo sea el mismo en todos los sitios donde
     aparezca. */
  --rr-rastro-color: var(--rr-pergamino-hondo);
  --rr-rastro-trazo: 2px;
  --rr-rastro-patron: 3px 9px;
}