/* ============================================================
   YCS MÉXICO 2026 — SISTEMA DE DISEÑO
   Paleta tomada de la gráfica oficial del evento:
   negro de circuito · carmesí del dragón · oro de las estrellas
   · verde de la bandera mexicana.
   ============================================================ */
:root {
  /* ---- Superficies ---- */
  --neg-900:#050506;   /* fondo base                */
  --neg-800:#0B0B0E;   /* secciones alternas        */
  --neg-700:#121216;   /* tarjetas                  */
  --neg-600:#1B1B21;   /* tarjetas elevadas         */
  --neg-500:#26262E;   /* bordes fuertes            */

  /* ---- Marca ---- */
  --rojo-600:#8C0616;
  --rojo-500:#C8102E;  /* rojo principal            */
  --rojo-400:#F0203F;  /* rojo vivo / brillos       */
  --oro-500:#F2B705;   /* acento premium            */
  --oro-400:#FFC72C;
  --verde-600:#006847; /* verde bandera             */
  --verde-500:#0E9E5A;
  --verde-400:#22C97A; /* confirmaciones            */

  /* ---- Texto ---- */
  --tinta-100:#FFFFFF;
  --tinta-200:#E7E7EA;
  --tinta-300:#B4B4BE;
  --tinta-400:#83838F;
  --tinta-500:#5B5B66;

  /* ---- Degradados y luces ---- */
  --grad-marca:linear-gradient(115deg,var(--rojo-500) 0%,var(--rojo-400) 45%,var(--oro-500) 100%);
  --grad-bandera:linear-gradient(90deg,var(--verde-500) 0%,var(--tinta-100) 50%,var(--rojo-500) 100%);
  --grad-oscuro:linear-gradient(180deg,rgba(5,5,6,0) 0%,rgba(5,5,6,.72) 55%,var(--neg-900) 100%);
  --luz-roja:0 0 0 1px rgba(240,32,63,.28), 0 18px 48px -14px rgba(200,16,46,.55);
  --luz-oro:0 0 0 1px rgba(242,183,5,.30), 0 18px 48px -14px rgba(242,183,5,.35);

  /* ---- Tipografía ---- */
  --tipo-display:'Anton',"Arial Narrow",Impact,sans-serif;
  --tipo-texto:'Barlow',system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-xs:.75rem;  --t-sm:.875rem; --t-base:1rem;  --t-md:1.125rem;
  --t-lg:1.375rem;--t-xl:1.75rem; --t-2xl:2.25rem;--t-3xl:3rem;
  --t-4xl:4rem;   --t-5xl:5.5rem; --t-6xl:clamp(3.2rem,11vw,9.5rem);

  /* ---- Ritmo ---- */
  --e-1:.25rem; --e-2:.5rem;  --e-3:.75rem; --e-4:1rem;   --e-5:1.5rem;
  --e-6:2rem;   --e-7:3rem;   --e-8:4rem;   --e-9:6rem;   --e-10:8rem;

  --radio-sm:8px; --radio:14px; --radio-lg:22px; --radio-xl:32px; --radio-full:999px;

  --ancho:1240px;
  --ancho-angosto:820px;

  /* ---- Movimiento ---- */
  --curva:cubic-bezier(.22,1,.36,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);
  --vel-1:.18s; --vel-2:.32s; --vel-3:.6s; --vel-4:1s;

  --nav-alto:76px;
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}