/* ==========================================================================
   tokens.css — El sistema de diseño.
   Todos los colores salen del escudo real del canal y de la fotografía
   del banner (atardecer sobre la costa). No inventar colores fuera de aquí.
   ========================================================================== */

:root {
  /* --- Colores base: la cinta negra del escudo ------------------------- */
  --negro-asfalto: #12100E;
  --negro-cinta: #1A1613;
  --carbon: #241E19;
  --carbon-claro: #322A22;

  /* --- Los tres colores de la marca ------------------------------------ */
  --oro: #F2B705;          /* "SIN RUMBO FIJO" */
  --oro-claro: #FFD35C;
  --oro-oscuro: #B88603;
  --rojo-sello: #C62A21;   /* "EN AUTOCARAVANA" */
  --crema: #F4EDE2;        /* la pastilla blanca del logo */

  /* --- El atardecer del banner ----------------------------------------- */
  --naranja: #E2762B;
  --ambar: #F09A3E;
  --azul-sierra: #2C4A52;
  --azul-noche: #16262B;

  /* --- Texto ------------------------------------------------------------ */
  --texto: #F4EDE2;
  --texto-suave: #C3B7A6;
  --texto-tenue: #8C8072;

  /* --- Superficies ------------------------------------------------------ */
  --fondo: var(--negro-asfalto);
  --superficie: #1C1814;
  --superficie-alta: #262019;
  --borde: rgba(244, 237, 226, 0.10);
  --borde-fuerte: rgba(242, 183, 5, 0.35);

  /* --- Tipografía ------------------------------------------------------- */
  --f-display: 'Anton', 'Arial Narrow', system-ui, sans-serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala fluida: se estira sola entre móvil y escritorio */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --t-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --t-2xl: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --t-hero: clamp(3.25rem, 1.2rem + 9vw, 9.5rem);

  /* --- Ritmo vertical y anchuras ---------------------------------------- */
  --ancho: 1240px;
  --ancho-texto: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --seccion-y: clamp(4.5rem, 9vw, 9rem);

  /* --- Radios, sombras, transiciones ------------------------------------ */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --sombra: 0 18px 50px -12px rgba(0, 0, 0, 0.75);
  --sombra-oro: 0 10px 40px -10px rgba(242, 183, 5, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}