/* ==========================================================================
   Alsuper Grill Choice Fest 2026 — Estilos de escritorio
   Todas las medidas provienen del artboard de 1440 px de GRC_LandingPage_2026.pdf
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-dark);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.2;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
p  { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
b, strong { font-weight: 700; }
a { color: inherit; text-decoration: none; }

/* ---------- Utilidades ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--color-yellow); color: var(--color-dark);
  font-weight: 700; padding: 12px 20px; border-radius: 8px;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Decoraciones: siempre bajo el contenido, nunca interactivas */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  z-index: 0;
}

/* Marcadores de estrella (asset ESTRELLA.png en sus variantes de color) */
.star { flex: none; width: 20px; height: 20px; }

/* ---------- Botón CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  text-align: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Altura y aire lateral fijos: el botón deja de crecer en escritorio amplio,
   igual que la guía exterior de la página. */
.btn--ticket {
  background: var(--color-turquoise);
  color: var(--color-cream);
  min-height: 52px;
  padding: 0 26px;
  font-size: var(--fs-nav);
  line-height: 1;
}
.btn--ticket:hover { background: var(--turquoise-hover); }
.btn--ticket:active { transform: translateY(1px); }

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 60;
  padding: 55px 0 0;
}
/* El encabezado comparte EXACTAMENTE la guía exterior de la página: sin
   padding interno propio, el logo cae sobre el borde izquierdo del contenedor
   y el CTA sobre el derecho, alineados con el hero y el resto de secciones. */
.site-header__inner {
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: clamp(78px, calc(21.333px + 4.4271vw), 85.083px);
  min-height: clamp(79px, calc(50.667px + 2.2135vw), 82.541px);
}
.site-header__logo { flex: none; display: block; line-height: 0; }
.site-header__logo img {
  width: clamp(132px, calc(102px + 2.34375vw), 135.75px);
  height: auto;
}

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(46px, calc(16px + 2.34375vw), 49.75px);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(46px, calc(16px + 2.34375vw), 49.75px);
}
.site-nav__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--color-cream);
  padding-bottom: 6px;
  margin-top: 20px;                /* la navegación monta más baja que el logo (PDF) */
  border-bottom: 2px solid var(--color-cream);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-nav__link:hover { color: var(--color-yellow); border-color: var(--color-yellow); }

.site-nav__cta { margin-left: auto; margin-top: 7px; }

/* Botón de menú (solo móvil, ver responsive.css) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  margin-left: auto;
  background: transparent;
  border: 2px solid var(--color-cream);
  border-radius: var(--radius-pill);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
}
.nav-scrim[hidden] { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-top: 65px; }

/* El arte plano del hero (una sola imagen con la composición ya montada) sólo
   se usa en escritorio; la maqueta por capas de abajo sigue siendo la que se
   ve en móvil. Oculto por defecto para que el móvil no lo descargue ni lo
   pinte: la regla que lo activa vive en el @media de 769px del final del
   bloque HERO. */
.hero__desktop-art {
  display: none;
}

/* Su equivalente para móvil: el arte plano vertical (BANNER-PRINCIPAL-MOVIL).
   También oculto por defecto, para que nunca aparezca en escritorio; la regla
   que lo activa vive en el @media de 768px de responsive.css. */
.hero__mobile-art {
  display: none;
}

.hero__frame {
  position: relative;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  aspect-ratio: 1378.4 / 775.3;
  border-radius: var(--radius-hero);
  background: var(--surface-hero);
  isolation: isolate;
  overflow: hidden;                /* el radio recorta foto, base y cactus */
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}

/* Viñeta: asienta las esquinas del fondo sin tocar el asset ni el centro de la
   composición (logo y claim quedan en z-index 3, muy por encima). */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.015) 30%,
      rgba(0, 0, 0, 0.08) 58%,
      rgba(0, 0, 0, 0.42) 100%
    );
}

/* Logotipo principal: 588 px de ancho sobre el marco del artboard (1378.4),
   centrado en el eje del hero. Al ser porcentajes del marco, escala solo. */
.hero__logo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 10.7%;                      /* 83 / 775.3 */
  transform: translateX(-50%);
  width: 43.2%;                    /* 588 / 1378.4 */
  height: auto;
}

/* "PORQUE SOMOS DEL NORTE": centrado y a mayor escala que el artboard. */
.hero__claim {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 56.6%;                      /* 439 / 775.3 */
  transform: translateX(-50%);
  width: 90%;
  height: auto;
}

/* Base redondeada del color de página que remata el hero (detalle del PDF).
   Va POR ENCIMA de los cactus (z-index 5) y hace de "suelo": es lo que los
   deja plantados. Antes iba por debajo (z-index 1) y los cactus se cortaban
   contra el borde del marco; como esa base y el fondo de página comparten
   color (--color-dark), ese corte era invisible y los dejaba flotando.
   En móvil la composición es otra y la base vuelve a z-index 1 (responsive). */
.hero__base {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 91.7%;                      /* 711 / 775.3 */
  bottom: 0;
  background: var(--color-dark);
  border-radius: var(--radius-hero) var(--radius-hero) 0 0;
}

/* Cactus decorativos. Ambos PNG traen el dibujo a ras del borde inferior del
   lienzo (0% de aire abajo), así que se anclan con `bottom` y NO con `top`:
   el pie del dibujo cae por debajo del marco y es el overflow del hero —
   junto con la base oscura— quien lo remata. Anclarlos desde arriba los
   dejaba suspendidos, porque su corte caía en mitad de la base inferior.
   Todas sus medidas son % del marco del hero, así que acompañan a la guía
   exterior sin recalcularse: la base inferior (z-index 5) remata su pie. */
.deco--hero-cactus-largo {
  z-index: 2;
  right: -5%;                      /* dibujo útil: 79% – 97.5% */
  bottom: -3%;                     /* el pie del PNG queda fuera del marco */
  width: 33%;
}
/* El nopal izquierdo se hundía demasiado: la base se comía su franja más ancha
   y el corte se leía plano. Crece y sale más por la izquierda, de modo que una
   penca baja asome por fuera de la curva del `border-radius` de la base y el
   solape se lea con profundidad en vez de plano. El `bottom` lo fija el claim:
   con menos hundimiento la penca alta invade la sombra turquesa de "PORQUE". */
.deco--hero-cactus {
  z-index: 4;
  left: -10%;                      /* dibujo útil: -6.0% – 25.1% */
  bottom: -10%;                    /* el pie del PNG queda fuera del marco */
  width: 42%;
}

/* La penca que asoma por delante de la base es un asset aparte: el cactus es
   una sola imagen y el z-index no se puede repartir por zonas, así que la
   única forma de adelantar un trozo sin adelantar el resto es dibujarlo con su
   propio PNG. Va después de la base (z-index 6) y se coloca donde el cuerpo
   del cactus se hunde tras la curva, de modo que se lea como continuación de
   la misma planta. Todas sus medidas son % del marco, como el resto de la
   composición del hero. */
.deco--hero-penca {
  z-index: 6;
  /* `penca-hero.png` es el recorte ajustado de la penca (167x156, con 8 px de
     aire por lado sólo para no comerse el antialiasing), así que ya no hace
     falta ningún translateY que compense lienzo vacío: el encuadre lo da el
     propio archivo y estas tres medidas colocan el dibujo directamente.
     El arranque no es arbitrario: `penca.png` viene del mismo lienzo de
     registro 960x540 que `cactus.png`, y en él la penca ocupa x 55.31–71.04%.
     Proyectado sobre el cactus principal (left: -10%, width: 42%) ese trozo
     cae en el 13.23% del marco, que es donde se ancla el borde izquierdo del
     dibujo para que se lea como la misma planta y no como un parche pegado.
     Desde ahí crece hacia la derecha hasta el 28.7%, cruza el borde superior
     de la base (91.7%) y se prolonga sobre la zona oscura. */
  left: 12.4%;                     /* dibujo útil: 13.2% – 28.7% */
  bottom: -1.5%;                   /* el pie del dibujo apoya en el borde */
  width: 17.1%;
  height: auto;
  transform: none;
}

/* De 769px en adelante el hero deja de componerse por capas y pasa a ser el
   arte plano. No se toca `.hero__frame`: la imagen se adapta al marco (mismo
   ancho, misma proporción, mismo radio y mismo recorte), no al revés. La
   maqueta por capas se apaga entera —incluida la viñeta `::before`, que si no
   oscurecería el arte— pero sigue en el DOM porque es la que se usa en móvil. */
@media (min-width: 769px) {
  .hero__desktop-art {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
  }

  .hero__layered-bg,
  .hero__logo,
  .hero__claim,
  .deco--hero-cactus-largo,
  .deco--hero-cactus,
  .deco--hero-penca,
  .hero__base {
    display: none;
  }

  .hero__frame::before {
    display: none;
  }
}

/* ==========================================================================
   ESTAMOS DE REGRESO
   ========================================================================== */
.comeback { padding-top: 79px; }

/* El marco exterior comparte la guía general de la página. La columna gráfica
   conserva su proporción histórica (42.5%) y el resto queda para el texto. */
.comeback__inner {
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 42.5%) minmax(0, 1fr);
  gap: 0 clamp(41px, 4vw, 60px);
  align-items: start;
}
.comeback__heading img {
  width: 100%;                     /* llena su columna, como antes */
  max-width: 728px;
  height: auto;
}

.comeback__text {
  display: grid;
  gap: clamp(36px, calc(12.667px + 1.8229vw), 38.917px);
  font-size: var(--fs-intro);
  line-height: 1.2;
  text-align: justify;
  text-justify: inter-word;
  padding-top: 3px;
}
.comeback__text p:last-child { text-align: left; }
.comeback__text b { font-weight: 700; }

/* ==========================================================================
   CONTADOR
   ========================================================================== */
.countdown {
  position: relative;
  margin-top: 117px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rope {
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  height: auto;
  object-fit: fill;
  position: relative;
  z-index: 4;
}
/* Jerarquía de capas del contador (todas comparten el contexto raíz, porque ni
   .countdown ni .countdown__stage crean uno propio):
   soga superior 3 · cactus 4 · soga inferior 4 · bloque 3 · sotol 2 · CTA 6. */
/* El desplazamiento es solo visual (transform, no margen): sube la soga sin
   alterar el flujo, las distancias ni la altura del escenario. */
.rope--top {
  margin-bottom: -6px;
  z-index: 3;
  transform: translateY(clamp(-16px, -1.1vw, -8px));
}

/* La soga inferior vive dentro de .countdown__stage: se ancla al escenario para
   que las bases del cactus y del sotol apoyen sobre ella sin depender del flujo
   ni de márgenes negativos. */
.rope--bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  z-index: 4;
}

/* El escenario comparte la guía general: es el marco de referencia de las
   decoraciones (posicionadas en %), que así crecen con la sección sin
   recalcular sus porcentajes. */
.countdown__stage {
  position: relative;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  display: flex;
  justify-content: center;
  /* 71px = los 63px originales + la altura de la soga (≈13.9px a 1440) − los
     6px que antes la solapaban en el flujo. Así la soga inferior, ahora
     absoluta dentro del escenario, cae en su posición de siempre y ni el CTA
     ni la sección siguiente se mueven. */
  padding: 52px 0 71px;
}

/* Bloque interior deliberadamente más angosto (1106px): queda por dentro de
   la cuerda, conservando el inset que muestra la referencia. */
.countdown__block {
  position: relative;
  z-index: 3;
  width: min(var(--countdown-w), 100%);
  min-height: clamp(202px, calc(28.977px + 13.5174vw), 223.628px);
  /* Mismo tono que --surface-deep (#222) al 70 % de opacidad, para que el sotol
     se distinga con claridad por detrás. Se usa rgba y no opacity: opacity
     afectaría también a números y labels. */
  background: rgba(34, 34, 34, 0.70);
  border-radius: var(--radius-countdown);
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, clamp(272px, calc(39.287px + 18.1807vw), 301.089px));
  justify-content: center;
  padding: clamp(20px, calc(2.946px + 1.3324vw), 22.133px) 0 clamp(22px, calc(2.465px + 1.5262vw), 24.442px);
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.countdown__value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-count);
  line-height: 0.86;
  letter-spacing: 0.01em;
  color: var(--color-cream);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-family: var(--font-display);
  font-size: var(--fs-count-label);
  line-height: 1;
  color: var(--color-cream);
  margin-top: clamp(12px, calc(0.992px + 0.86vw), 13.376px);
}
.countdown__sep {
  position: absolute;
  left: 66.667%;
  top: 20px;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-count);
  line-height: 0.86;
  color: var(--color-cream);
}

/* Cactus y sotol miden un % de .countdown__stage, así que acompañan a la guía
   exterior. El pequeño desplazamiento adicional (máx. ≈14px) vale 0 hasta
   1280px y queda congelado desde 1440px: la posición histórica se mantiene
   intacta por debajo de ese ancho y no crece en monitores grandes.
   En vertical ya no dependen de top: se anclan con bottom al escenario, que es
   donde vive la soga inferior, así sus bases apoyan sobre ella a cualquier
   ancho. Ambos PNG traen su base a ras del lienzo (sin aire transparente
   inferior), de modo que bottom: 0 es exacto y no hace falta compensarlo. */
.deco--count-cactus {
  z-index: 4;                      /* por delante del bloque */
  left: calc(1.15% - clamp(0px, calc(-115.116px + 8.9935vw), 14.39px));   /* 16.5 / 1440 */
  top: auto;
  bottom: 0;
  width: 32.5%;                    /* escala uniforme: solo width, sin deformar */
}
.deco--count-sotol {
  z-index: 2;                      /* por detrás del bloque */
  left: calc(75.4% + clamp(0px, calc(-116.473px + 9.0994vw), 14.558px));  /* 1085.8 / 1440 */
  top: auto;
  bottom: 0;
  width: 19.1%;                    /* 275.4 / 1440 */
}

.countdown__cta {
  position: relative;
  z-index: 6;                      /* por delante de la soga inferior */
  margin-top: clamp(-37.575px, calc(-5.395px - 2.2347vw), -34px);
  min-width: clamp(293px, calc(103.039px + 14.8407vw), 316.745px);
  min-height: clamp(64px, calc(23.38px + 3.1734vw), 69.077px);
  font-size: clamp(1.062rem, 0.7676rem + 1.258vw, 1.9rem);
}
/* Sólo en escritorio ancho: la curva original se prolonga de 30.4 a 36.5px.
   Se aísla en media query porque, a diferencia de las medidas en px, esta
   curva sigue decreciendo por debajo de 1280 px (móvil). */
@media (min-width: 1281px) {
  .countdown__cta { font-size: clamp(1.7738rem, calc(0.3115rem + 1.8278vw), 1.9565rem); }
}

/* ==========================================================================
   BOLETO
   ========================================================================== */
.ticket {
  padding-top: 116px;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

/* La sección comparte la guía exterior, pero la cuadrícula conserva su inset
   interior (--content-w, 1200px): el contenido nunca toca los bordes. */
.ticket__inner {
  width: min(var(--content-w), 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: clamp(380px, calc(85.039px + 23.0438vw), 416.87px) minmax(0, 1fr);
  gap: 0 clamp(135px, calc(73.178px + 4.8298vw), 142.727px);
  align-items: start;
}

.ticket__name {
  font-family: var(--font-display);
  font-size: var(--fs-ticket);
  line-height: 0.85;
  color: var(--color-cream);
}
.ticket__amount {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  line-height: 0.86;
  color: var(--color-yellow);
  margin-top: 0.08em;
}

.ticket__includes-title {
  font-family: var(--font-display);
  font-size: var(--fs-includes);
  line-height: 1;
  color: var(--color-turquoise);
  margin-bottom: clamp(22px, calc(8.279px + 1.0719vw), 23.714px);
}

/* Listas con marcador de estrella */
.starlist {
  display: grid;
  gap: clamp(15.5px, calc(5.287px + 0.7979vw), 16.777px);
  font-size: var(--fs-body);
  line-height: 1.2;
}
.starlist li {
  display: grid;
  grid-template-columns: clamp(20px, calc(6.822px + 1.0296vw), 21.648px) minmax(0, 1fr);
  gap: 0 clamp(12px, calc(4.868px + 0.5572vw), 12.892px);
  align-items: start;
}
.starlist li::before {
  content: "";
  width: clamp(20px, calc(6.822px + 1.0296vw), 21.648px);
  height: clamp(20px, calc(6.822px + 1.0296vw), 21.648px);
  margin-top: 0.16em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.starlist--red    li::before { background-image: url("../images/decorations/estrella.png"); }
.starlist--yellow li::before { background-image: url("../images/decorations/estrella-yellow.png"); }
.starlist--orange li::before { background-image: url("../images/decorations/estrella-orange.png"); }

/* max-width crece en la misma proporción que --fs-body (×1.20), de modo que
   los saltos de línea de la lista se conservan exactamente. */
.ticket__includes .starlist { padding-left: clamp(19px, calc(6.093px + 1.0084vw), 20.614px); }
.ticket__includes .starlist li {
  gap: 0 clamp(7px, calc(2.388px + 0.3603vw), 7.576px);
  max-width: clamp(372px, calc(125.721px + 19.2406vw), 402.786px);
}

/* ==========================================================================
   FIRE SHOW — INTRODUCCION
   ========================================================================== */
.fireshow { padding-top: 102px; }

/* El escenario aplica la guía exterior una sola vez: encabezado y panel se
   miden ya al 100% de él y alcanzan exactamente los límites del hero. Las
   decoraciones viven dentro de .fireshow__panel, no aquí, de modo que sus
   porcentajes siguen siendo válidos. */
.fireshow__stage {
  position: relative;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

.fireshow__heading {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-inline: auto;
  /* el encabezado monta sobre el panel; el solape crece con el gráfico */
  margin-bottom: clamp(-111.45px, calc(-17.395px - 6.5316vw), -101px);
  line-height: 0;
}
.fireshow__heading img {
  width: 71.2%;                     /* 950 / 1334 */
  min-width: 260px;
  height: auto;
  margin-left: 14.8%;               /* 197 / 1334 */
}

.fireshow__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: clamp(600px, calc(100px + 39.0625vw), 662.5px);
  margin-inline: auto;
  background: var(--surface-panel);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Los laterales siguen en % del panel, de modo que la longitud de línea se
   mantiene legible mientras el panel crece con la guía exterior (máx 1440px).
   El padding superior sí escala en px para no quedar bajo el encabezado. */
.fireshow__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(171px, calc(29.643px + 11.0435vw), 188.669px) 13.43%
           clamp(40px, calc(5.891px + 2.6647vw), 44.263px) 12.43%;
  text-align: center;
}
.fireshow__lead {
  font-size: var(--fs-fire-intro);
  line-height: 1.2;
  text-align: justify;
  text-align-last: center;
  color: var(--color-cream);
}
.fireshow__shout {
  font-family: var(--font-display);
  font-size: var(--fs-shout);
  line-height: 1;
  color: var(--color-cream);
  margin-top: clamp(46px, calc(8.326px + 2.9433vw), 50.71px);
}
.fireshow__shout-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62em;
  font-family: var(--font-display);
  font-size: var(--fs-shout-2);
  line-height: 1;
  color: var(--color-cream);
  margin-top: clamp(8px, calc(1.953px + 0.4724vw), 8.756px);
}
.fireshow__shout-2 .star { width: 0.55em; height: 0.55em; }

.deco--fs-cactus-largo {
  z-index: 1;
  left: 74.5%;                      /* (1053.5-59.6)/1334 */
  top: 22.7%;                       /* (2560.4-2423.5)/600 */
  width: 34.95%;                    /* 466.3/1334 */
}
.deco--fs-cactus {
  z-index: 1;
  left: -2.7%;                      /* (-23.6-59.6)/1334 */
  top: 59.4%;                       /* (2779.9-2423.5)/600 */
  width: 32.6%;                     /* 435.6/1334 */
}
.deco--fs-sotol {
  z-index: 1;
  left: 76.8%;                      /* (1084.8-59.6)/1334 */
  top: 63.3%;                       /* (2803.1-2423.5)/600 */
  width: 25.2%;                     /* 335.8/1334 */
}

/* ==========================================================================
   CHEFS
   ========================================================================== */
/* El artículo es el contenedor exterior de la tarjeta: aplica la guía general
   una sola vez y la tarjeta se mide al 100% de él. */
.chef {
  position: relative;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
.chef--1 { padding-top: 71px; }
.chef--2 { margin-top: -5px; }
.chef--3 { padding-top: 93px; }

/* La tarjeta llena su artículo (que ya lleva la guía exterior). La columna de
   la fotografía mantiene su proporción histórica ≈36% y la de contenido se
   queda con el resto; toda la geometría interna (foto, arco, recorte,
   paddings) escala con el mismo factor para no deformar la composición. */
.chef__card {
  position: relative;
  width: 100%;
  min-height: clamp(600px, calc(100px + 39.0625vw), 662.5px);
  margin-inline: auto;
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: clamp(480px, calc(86.202px + 30.7655vw), 529.225px) minmax(0, 1fr);
  align-items: start;
}
.chef--1 .chef__card { background: var(--surface-card-1); }
.chef--3 .chef__card { background: var(--surface-card-3); }
.chef__card--bare {
  background: transparent;
  grid-template-columns: minmax(0, 1fr) clamp(474px, calc(79.891px + 30.7897vw), 523.263px);
}

/* --- Foto: arco + recorte transparente --- */
.chef__photo {
  position: relative;
  width: clamp(462px, calc(76.961px + 30.0812vw), 510.13px);
  max-width: 100%;
  height: clamp(577px, calc(96.806px + 37.5151vw), 637.023px);
  overflow: hidden;
  z-index: 1;
}
.chef__arch {
  position: absolute;
  left: clamp(13.9px, calc(2.377px + 0.9003vw), 15.341px);
  top: clamp(83.7px, calc(13.898px + 5.4533vw), 92.426px);
  width: clamp(440px, calc(74.496px + 28.555vw), 485.688px);
  height: clamp(494px, calc(82.837px + 32.1221vw), 545.395px);
  border-radius: var(--arch-radius) var(--arch-radius) 0 0;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(243, 223, 197, 0.10), rgba(243, 223, 197, 0) 62%),
    linear-gradient(180deg, #454142 0%, #2F2C2D 100%);
}
.chef__cutout {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(462px, calc(76.961px + 30.0812vw), 510.13px);
  max-width: none;
  height: clamp(631px, calc(105.147px + 41.0822vw), 696.731px);
  object-fit: contain;
  object-position: top center;
  z-index: 2;
}

.chef--1 .chef__photo {                                  /* 3083.1 - 3095.3 ; 89 - 59.6 + 13.9 */
  margin: clamp(-13.134px, calc(-2.93px - 0.7086vw), -12px) 0 0
          clamp(43px, calc(8.078px + 2.7283vw), 47.366px);
}
.chef--1 .chef__cutout {
  width: clamp(462px, calc(76.961px + 30.0812vw), 510.13px);
  height: clamp(631px, calc(105.147px + 41.0822vw), 696.731px);
}

.chef--2 .chef__photo {
  width: clamp(440px, calc(74.496px + 28.555vw), 485.688px);
  height: clamp(596px, calc(99.023px + 38.8263vw), 658.122px);
  margin-top: 0;
  justify-self: start;
}
.chef--2 .chef__arch  { left: 0; top: clamp(102.7px, calc(18.053px + 6.6131vw), 113.282px); }
.chef--2 .chef__cutout {
  left: clamp(14.7px, calc(2.378px + 0.9626vw), 16.239px);
  width: clamp(405px, calc(68.372px + 26.2991vw), 447.079px);
  height: clamp(669px, calc(111.519px + 43.5532vw), 738.685px);
}

.chef--3 .chef__photo {
  width: clamp(468px, calc(79.395px + 30.3597vw), 516.575px);
  height: clamp(572px, calc(95.101px + 37.2578vw), 631.613px);
  margin: clamp(-15.445px, calc(-2.45px - 0.9024vw), -14px) 0 0
          clamp(29px, calc(5.628px + 1.8259vw), 31.921px);
}
.chef--3 .chef__arch  {
  left: clamp(13.9px, calc(2.377px + 0.9003vw), 15.341px);
  top: clamp(78.3px, calc(13.064px + 5.0966vw), 86.455px);
}
.chef--3 .chef__cutout {
  width: clamp(468px, calc(79.395px + 30.3597vw), 516.575px);
  height: clamp(783px, calc(130.636px + 50.966vw), 864.546px);
}

/* --- Contenido --- */
.chef__content {
  position: relative;
  z-index: 3;
  padding: clamp(86px, calc(14.217px + 5.608vw), 94.972px)
           clamp(58px, calc(9.318px + 3.8033vw), 64.086px)
           clamp(30px, calc(4.419px + 1.9985vw), 33.197px)
           clamp(34px, calc(5.395px + 2.2347vw), 37.575px);
}
.chef__title {
  display: flex;
  align-items: center;
  gap: 0.2em;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--fs-chef-title);
  line-height: 1;
  color: var(--color-cream);
}
.chef__plus { font-size: 0.8em; }
.chef__brand {
  width: clamp(190px, calc(64.806px + 9.7808vw), 205.65px);
  height: auto;
  margin-left: 0.1em;
}
.chef__brand--angus { width: clamp(268px, calc(90.636px + 13.8566vw), 290.171px); }

.chef__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-chef-name);
  line-height: 1.1;
  margin-top: clamp(8px, calc(1.953px + 0.4724vw), 8.756px);
}
.chef--1 .chef__name { color: var(--color-red); }
.chef--2 .chef__name { color: var(--color-yellow); }
.chef--3 .chef__name { color: var(--color-orange); }

.chef__bio {
  font-size: var(--fs-body);
  line-height: 1.2;
  margin-top: clamp(14px, calc(2.45px + 0.9024vw), 15.445px);
  text-align: justify;
  text-justify: inter-word;
}
.chef__bio b { font-weight: 600; }

.chef__dishes {
  margin-top: clamp(18px, calc(3.426px + 1.1386vw), 19.822px);
  grid-template-columns: clamp(340px, calc(55.891px + 22.196vw), 375.513px) minmax(0, 1fr);
  gap: clamp(13px, calc(1.721px + 0.8812vw), 14.41px) 0;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
}
.chef--2 .chef__dishes { grid-template-rows: repeat(2, auto); }
.chef--3 .chef__dishes { grid-template-rows: repeat(3, auto); }

/* --- Chef 1: alineación de contenido --- */
.chef--1 .chef__content { padding-left: clamp(34px, calc(5.395px + 2.2347vw), 37.575px); }
.chef--1 .chef__dishes { padding-left: clamp(205px, calc(35.039px + 13.2782vw), 226.245px); }

/* --- Chef 2: contenido alineado a la derecha --- */
.chef--2 .chef__card { min-height: 0; }
.chef--2 .chef__content {
  padding: clamp(168px, calc(27.457px + 10.9799vw), 185.568px)
           clamp(30px, calc(4.419px + 1.9985vw), 33.197px)
           0
           clamp(75px, calc(12.016px + 4.9207vw), 82.874px);
  text-align: right;
}
.chef--2 .chef__title { justify-content: flex-end; }
.chef--2 .chef__bio { text-align: justify; text-align-last: right; }
.chef--2 .chef__dishes {
  grid-template-columns: clamp(312px, calc(52.93px + 20.2398vw), 344.383px) minmax(0, 1fr);
  padding-left: clamp(273px, calc(45.829px + 17.7477vw), 301.396px);
  text-align: left;
  gap: clamp(13px, calc(1.721px + 0.8812vw), 14.41px) 0;
}

/* --- Chef 3 --- */
.chef--3 .chef__title--two-lines { display: block; }
.chef--3 .chef__content {
  padding-top: clamp(70px, calc(12.248px + 4.5119vw), 77.219px);
  padding-bottom: clamp(22px, calc(4.403px + 1.3748vw), 24.2px);
}
.chef--3 .chef__dishes { margin-top: clamp(14px, calc(2.45px + 0.9024vw), 15.445px); }
.chef--3 .chef__dishes {
  padding-left: clamp(311px, calc(52.202px + 20.2186vw), 343.35px);
  grid-template-columns: clamp(239px, calc(40.434px + 15.513vw), 263.821px) minmax(0, 1fr);
}

/* --- Decoraciones de chefs ---
   Están en % de .chef__card, así que escalan y se recolocan solas con la
   tarjeta. Las dos que sangraban fuera de la tarjeta (cactus de Raúl por la
   derecha, tejana de Peter por la izquierda) quedarían ahora cortadas por el
   borde del viewport, porque la tarjeta llega hasta el margen del hero: se
   recogen lo justo para que sigan completas. El clamp vale 0 hasta 1280px. */
.deco--c1-sotol        { z-index: 4; left: -4.5%;  top: 57.0%; width: 29.1%; }
.deco--c1-herradura    { z-index: 5; left: 0.75%;  top: 60.9%; width: 15.7%; }
.deco--c2-cactus-largo { z-index: 4; left: calc(83.2% - clamp(0px, calc(-106.589px + 8.3273vw), 13.324px));  top: 41.6%; width: 25.2%; }
.deco--c2-botas        { z-index: 5; left: 78.7%;  top: 66.8%; width: 24.6%; }
/* La tejana se reduce un 10% con transform y no con width: así no se recalcula
   su caja ni el clamp de left, y la proporción del PNG queda intacta. El origen
   inferior izquierdo fija esa esquina al escalar, de modo que la reducción
   también respeta el anclaje bottom/left de los overrides de responsive.css. */
.deco--c3-tejana       { z-index: 4; left: calc(-6.65% + clamp(0px, calc(-38.372px + 2.9978vw), 4.796px)); top: 59.0%; width: 26.7%; transform: scale(0.90); transform-origin: left bottom; }
.deco--c3-cactus       { z-index: 5; left: -1.8%;  top: 59.9%; width: 32.3%; }

/* ==========================================================================
   SISTEMA MYCASHLESS
   ========================================================================== */
.cashless { padding-top: 241px; }

/* El banner comparte la guía general manteniendo EXACTAMENTE su aspect-ratio.
   Todo su interior (SISTEMA, wordmark, subtítulo, Salvo) está en % o em, así
   que escala solo y Salvo conserva su desbordamiento inferior derecho. */
.cashless__banner {
  position: relative;
  display: block;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  aspect-ratio: 1330 / 392;
  border-radius: var(--radius-banner);
  overflow: visible;
  isolation: isolate;
}
.cashless__banner-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  border-radius: inherit;
  z-index: 0;
}
.cashless__banner-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  padding: 0 6%;
}
.cashless__banner-title {
  display: flex;
  align-items: center;
  gap: 1.9%;                         /* 25 / 1330 */
  width: 100%;
  justify-content: center;
}
.cashless__sistema {
  font-family: var(--font-display);
  font-size: var(--fs-banner-title);
  line-height: 1;
  color: #FFFFFF;
}
.cashless__wordmark { width: 46.2%; min-width: 150px; height: auto; }
.cashless__banner-sub {
  display: flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-banner-sub);
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
}
.cashless__banner-sub .star { width: 0.55em; height: 0.55em; filter: brightness(0.72); }
.cashless__salvo {
  position: absolute;
  z-index: 3;
  right: -1.7%;                      /* el logo desborda el banner, como en el PDF */
  top: 52%;                          /* (5423.7 - 5220.3) / 392 */
  width: 18.65%;                     /* 248.1 / 1330 */
  height: auto;
}

/* Las preguntas comparten la guía general: es el marco de referencia de las
   decoraciones inferiores, que crecen y se reposicionan solas al estar en %. */
.cashless__faq {
  position: relative;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  padding-top: clamp(128px, calc(44.822px + 6.4983vw), 138.398px);
  /* Reserva el alto que la soga aportaba al flujo antes de volverse absoluta
     (su margen superior + su propia altura), para que Line Up no suba. */
  padding-bottom: clamp(24.32px, calc(2.48px + 1.7063vw), 27.054px);
}
/* Bloque interior más angosto: mantiene una medida central legible (~30em)
   y no ocupa todo el ancho de la sección. */
.cashless__list {
  position: relative;
  z-index: 2;
  width: min(880px, calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  display: grid;
  gap: 0;
}
.cashless__item {
  padding: clamp(29px, calc(9.504px + 1.5231vw), 31.437px) 0
           clamp(58px, calc(17.07px + 3.1977vw), 63.117px);
}
.cashless__item + .cashless__item {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(52px, calc(16.574px + 2.7677vw), 56.429px);
}
.cashless__item:last-child { padding-bottom: 0; }

.cashless__q {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, calc(4.388px + 0.751vw), 15.202px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--color-cream);
  padding-left: clamp(42px, calc(13.163px + 2.2529vw), 45.605px);
  margin-bottom: clamp(5px, calc(1.705px + 0.2574vw), 5.412px);
}
.cashless__q .star {
  width: clamp(20px, calc(6.822px + 1.0296vw), 21.648px);
  height: clamp(20px, calc(6.822px + 1.0296vw), 21.648px);
  align-self: center;
}
.cashless__item p {
  font-size: var(--fs-body);
  line-height: 1.2;
  text-align: justify;
  text-justify: inter-word;
}
.cashless__item p + p { margin-top: 1.2em; }

/* La soga es la BASE HORIZONTAL de la composición inferior: vive dentro de
   .cashless__faq y comparte marco de referencia con los cactus y las botas.
   Su borde inferior sigue la base de .deco--cash-cactus a cualquier ancho: el
   mismo clamp de posición del cactus + su altura proporcional (29.9% del ancho
   de la guía por 540/960 de aspecto), de donde salen los 15.819vw y el tope de
   220.2px que congela a partir de 1440px. Así la línea del suelo nunca se
   despega de la composición y no hace falta compensarla con márgenes. */
.rope--cashless {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  top: calc(clamp(793px, calc(279.395px + 40.1254vw), 857.201px)
            + min(calc(15.819vw - 7.593px), 220.2px));
  z-index: 2;                        /* delante de los cactus (1), detrás de las botas (3) */
}

/* Los % siguen referidos a .cashless__faq (guía exterior, máx 1440px), así que
   ancho y posición horizontal crecen solos; sólo el desplazamiento vertical
   escala, y queda congelado a partir de 1440px. */
.deco--cash-cactus-largo { z-index: 1; left: 0.17%;  top: clamp(593px, calc(196.605px + 30.9684vw), 642.55px); width: 29.4%; }
.deco--cash-sotol        { z-index: 1; left: 3.77%;  top: clamp(761px, calc(258.093px + 39.2896vw), 823.863px); width: 26.9%; }
.deco--cash-cactus       { z-index: 1; left: 74.8%;  top: clamp(775px, calc(261.395px + 40.1254vw), 839.201px); width: 29.9%; }
/* Las botas son la única decoración de la sección que va POR DELANTE de las
   preguntas (z-index 3): se recorren a la derecha lo justo para no invadir el
   último párrafo de la columna de texto (máx 880px). */
.deco--cash-botas        { z-index: 3; left: calc(71.2% + clamp(0px, calc(-96.899px + 7.5703vw), 12.113px)); top: clamp(843px, calc(296.45px + 42.6992vw), 911.318px); width: 22.7%; }

/* ==========================================================================
   LINE UP 2026
   ========================================================================== */
.lineup { padding-top: 185px; }

/* Mismo sistema de ancho exterior; las tres columnas y la separación entre
   ellas crecen en la misma proporción, así que la composición (logo vertical
   | cuerda | gráfico + artistas) no se dispersa. */
.lineup__inner {
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    clamp(298px, calc(-81.302px + 29.633vw), 345.413px)
    clamp(16px, calc(1.969px + 1.0962vw), 17.754px)
    clamp(611px, calc(-165.24px + 60.6438vw), 708.031px);
  align-items: center;
  justify-content: space-between;
}
.lineup__brand img { width: clamp(298px, calc(-81.302px + 29.633vw), 345.413px); height: auto; }
.lineup__divider {
  width: clamp(16px, calc(1.969px + 1.0962vw), 17.754px);
  height: clamp(436px, calc(73.519px + 28.3188vw), 481.31px);
  object-fit: fill;
  justify-self: center;
  align-self: start;
  margin-top: clamp(46px, calc(8.326px + 2.9433vw), 50.71px);
}

.lineup__acts { text-align: center; }
.lineup__title {
  width: clamp(611px, calc(-165.24px + 60.6438vw), 708.031px);
  max-width: 100%;
  height: auto;
  margin: 0 auto clamp(-26.687px, calc(6.496px - 2.3044vw), -23px);
}

.artist {
  font-family: var(--font-display);
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
}
.artist--plastilina { font-size: var(--fs-artist-lg); color: var(--color-orange); }
.artist--jumbo      { font-size: var(--fs-artist-lg); color: var(--color-yellow); margin-top: -6px; }
.artist--row        { font-size: var(--fs-artist-sm); margin-top: -6px; gap: 0.5em; }
.artist--luk        { color: var(--color-yellow); }
.artist--memphis    { color: var(--color-turquoise); }
.artist .star { width: 0.34em; height: 0.34em; }
.artist--row .star { width: 0.6em; height: 0.6em; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* La caja visible del pie respeta el mismo margen exterior que el resto. */
.site-footer {
  margin-top: 118px;
  width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  background: var(--surface-deep);
  border-radius: var(--radius-footer) var(--radius-footer) 0 0;
  padding: 91px 0 max(96px, env(safe-area-inset-bottom));
}
/* El contenido interno del pie no supera --content-w (1200px). */
.site-footer__inner {
  width: min(var(--content-w), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: clamp(440px, calc(153.953px + 22.3474vw), 475.756px) 1fr;
  gap: 0;
  align-items: start;
}
.site-footer__brand img { width: clamp(329px, calc(115.705px + 16.6636vw), 355.661px); height: auto; }

.site-footer__cols {
  display: grid;
  grid-template-columns:
    clamp(176px, calc(62.357px + 8.8784vw), 190.206px)
    clamp(173px, calc(60.171px + 8.8148vw), 187.104px)
    clamp(246px, calc(86.233px + 12.4818vw), 265.971px)
    auto;
  gap: 0;
  padding: clamp(24px, calc(7.798px + 1.2657vw), 26.024px) 0 0 clamp(15px, calc(5.116px + 0.7722vw), 16.236px);
}
.site-footer__head {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--fs-foot-head);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin-bottom: clamp(28px, calc(10.713px + 1.3505vw), 30.16px);
}
.site-footer__col ul { display: grid; gap: clamp(21px, calc(7.55px + 1.0508vw), 22.682px); }
.site-footer__col a {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-foot-link);
  line-height: 1.15;
  color: #FFFFFF;
  transition: color var(--dur) var(--ease);
}
.site-footer__col a:hover { color: var(--color-yellow); }

.site-footer__col .site-footer__social { display: flex; gap: clamp(18px, calc(7.302px + 0.8358vw), 19.338px); }
.site-footer__col .site-footer__social a {
  display: grid;
  place-items: center;
  width: clamp(36px, calc(12.667px + 1.8229vw), 38.917px);
  height: clamp(36px, calc(12.667px + 1.8229vw), 38.917px);
  background: #000000;
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-footer__col .site-footer__social a:hover { background: var(--color-red); transform: translateY(-2px); }
.site-footer__col .site-footer__social img {
  width: clamp(20px, calc(6.822px + 1.0296vw), 21.648px);
  height: clamp(20px, calc(6.822px + 1.0296vw), 21.648px);
}