/* ==========================================================================
   Alsuper Grill Choice Fest 2026 — Variables globales
   Paleta oficial + escalas derivadas del artboard de 1440 px del PDF.
   ========================================================================== */

:root {
  /* ---------- Paleta oficial ---------- */
  --color-red: #A71928;
  --color-orange: #EE7731;
  --color-yellow: #F7BB3F;
  --color-turquoise: #00A9A5;
  --color-cream: #F3DFC5;
  --color-dark: #2D2D2E;

  /* ---------- Tonos auxiliares (derivados, misma identidad) ---------- */
  --surface-hero: #22201F;        /* fondo del contenedor del hero */
  --surface-panel: #3D3B3C;       /* panel Fire Show */
  --surface-card-1: #353535;      /* tarjeta chef 1 */
  --surface-card-3: #333333;      /* tarjeta chef 3 */
  --surface-deep: #222222;        /* contador y footer */
  --hairline: rgba(243, 223, 197, 0.38);
  --turquoise-hover: #00918E;
  --focus-ring: var(--color-yellow);

  /* ---------- Tipografías ---------- */
  --font-body: "Cottorway", Arial, Helvetica, sans-serif;
  --font-display: "Belano Dampod", "Cottorway", Arial, Helvetica, sans-serif;
  --font-ui: "Basis Grotesque Pro", Arial, Helvetica, sans-serif;

  /* ---------- Sistema global de contenedor ----------
     Una sola guía horizontal para TODA la página. Los contenedores
     exteriores (header, hero, paneles, tarjetas, banner, Line Up y footer)
     usan siempre la misma fórmula:

       width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
       margin-inline: auto;

     El ancho útil crece con el viewport y se detiene en 1440 px; a partir
     de ahí el contenido queda centrado con aire a ambos lados.
     ------------------------------------------------------------------- */
  --artboard: 1440px;

  /* Ancho exterior máximo de toda la página */
  --page-max: 1440px;

  /* Aire lateral fluido:
     16px en móvil estrecho y máximo 24px desde tablet */
  --page-gutter: clamp(16px, 4vw, 24px);

  /* Alias utilizados por la estructura existente */
  --shell-w: var(--page-max);
  --section-shell-w: var(--page-max);
  --gutter: var(--page-gutter);

  /* Marcos visuales exteriores */
  --card-w: var(--page-max);
  --rope-w: var(--page-max);

  /* Bloques interiores deliberadamente más angostos */
  --countdown-w: 1106px;
  --content-w: 1200px;

  /* ---------- Radios ---------- */
  --radius-hero: 56px;
  --radius-card: 48px;
  --radius-countdown: 32px;
  --radius-banner: 40px;
  --radius-pill: 999px;
  --radius-footer: 164px;
  /* El arco del retrato crece con la foto (rampa continua, ver --card-w) */
  --arch-radius: clamp(220px, calc(52.1311px + 13.1148vw), 284px);      /* era 220px fijo */

  /* ---------- Escalas tipográficas fluidas ---------- */
  --fs-nav: clamp(1.062rem, 0.8204rem + 1.033vw, 1.75rem);   /* 28px @1440 */
  --fs-intro: clamp(1.062rem, 0.7698rem + 1.249vw, 1.8938rem);   /* 30.3px @1440 */
  --fs-body: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);   /* 24px @1440 */
  --fs-fire-intro: clamp(1.062rem, 0.6884rem + 1.596vw, 2.125rem);   /* 34px @1440 */
  --fs-count: clamp(3.75rem, 2.221rem + 6.526vw, 8.0938rem);   /* 129.5px @1440 */
  --fs-count-label: clamp(1.05rem, 0.7265rem + 1.38vw, 1.9688rem);   /* 31.5px @1440 */
  --fs-ticket: clamp(3.5rem, 2.235rem + 5.399vw, 7.0938rem);   /* 113.5px @1440 */
  --fs-price: clamp(5.5rem, 2.837rem + 11.36vw, 13.062rem);   /* 209px @1440 */
  --fs-includes: clamp(2.4rem, 1.491rem + 3.878vw, 4.9813rem);   /* 79.7px @1440 */
  --fs-chef-title: clamp(2.1rem, 1.301rem + 3.408vw, 4.3688rem);   /* 69.9px @1440 */
  --fs-chef-name: clamp(1.6rem, 1.173rem + 1.822vw, 2.8125rem);   /* 45px @1440 */
  --fs-shout: clamp(1.9rem, 1.161rem + 3.155vw, 4rem);   /* 64px @1440 */
  --fs-shout-2: clamp(1.35rem, 0.835rem + 2.197vw, 2.8125rem);   /* 45px @1440 */
  --fs-banner-sub: clamp(1.05rem, 0.4712rem + 2.469vw, 2.6938rem);   /* 43.1px @1440 */
  --fs-banner-title: clamp(2.4rem, 0.9013rem + 6.394vw, 6.6562rem);   /* 106.5px @1440 */
  --fs-artist-lg: clamp(2.6rem, 1.2rem + 5.972vw, 6.575rem);   /* 105.2px @1440 */
  --fs-artist-sm: clamp(1.35rem, 0.813rem + 2.291vw, 2.875rem);   /* 46px @1440 */
  --fs-foot-head: 0.9863rem;                                  /* 15.8px */
  --fs-foot-link: 1.0406rem;                                  /* 16.7px */

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01ms; }
}