/* ==========================================================================
   Adaptación responsive (320 px → escritorio grande).
   No existe mockup movil: la adaptación se deriva del diseño de escritorio
   conservando contenido, jerarquía y elementos gráficos.
   Puntos de ajuste: 1280 / 1024 / 920 / 768 / 560 / 480 / 380
   ========================================================================== */

/* ==========================================================================
   ≤ 1280 px — se comprimen los aires generosos del artboard de 1440
   ========================================================================== */
@media (max-width: 1280px) {
  :root { --radius-footer: 120px; }

  .site-header__inner { gap: 30px; }
  .site-nav, .site-nav__list { gap: 30px; }

  .comeback { padding-top: 62px; }
  .comeback__inner { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 0 56px; }
  .comeback__heading img { width: 100%; max-width: 498px; }

  .countdown { margin-top: 70px; }
  .countdown__row { grid-template-columns: repeat(3, minmax(0, 18.9vw)); }

  .ticket { padding-top: 90px; }
  .ticket__inner { grid-template-columns: minmax(0, 43%) minmax(0, 1fr); gap: 0 40px; }

  .fireshow { padding-top: 96px; }
  .fireshow__heading { margin-bottom: -13vw; }
  .fireshow__heading img { margin-left: 0; width: 76%; }
  .fireshow__content { padding: clamp(120px, 15.5vw, 196px) 9% 54px; }

  .chef__card { grid-template-columns: 42% minmax(0, 1fr); }
  .chef__card--bare { grid-template-columns: minmax(0, 1fr) 42%; }
  .chef__content { padding: 60px 40px 40px 24px; }
  .chef__dishes,
  .chef--2 .chef__dishes,
  .chef--3 .chef__dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 18px; }
  .chef--1 .chef__dishes { padding-left: 12vw; }
  .chef--2 .chef__content { padding: 13vw 0 0 40px; }
  .chef--2 .chef__dishes { padding-left: 16vw; }
  .chef--3 .chef__dishes { padding-left: 18vw; }
  .chef__brand { width: 15vw; max-width: 190px; }
  .chef__brand--angus { width: 21vw; max-width: 268px; }

  .cashless { padding-top: 180px; }
  .cashless__faq { padding-top: 96px; }

  .lineup { padding-top: 160px; }
  .lineup__inner { gap: 0 40px; grid-template-columns: 24% 40px 1fr; }
  .lineup__brand img { width: 100%; max-width: 298px; }
  .lineup__title { width: 100%; max-width: 611px; }

  .site-footer { margin-top: 96px; padding-top: 76px; }
  .site-footer__inner { grid-template-columns: 32% 1fr; gap: 0 48px; }
  .site-footer__brand img { width: 100%; max-width: 329px; }
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

/* ==========================================================================
   ≤ 1024 px — la foto de los chefs y el contenido se estrechan
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --radius-hero: 36px; --radius-card: 36px; --radius-banner: 30px; }

  .site-header { padding-top: 34px; }
  .site-header__inner { gap: 22px; min-height: 120px; }
  .site-header__logo img { width: 108px; }
  .site-nav, .site-nav__list { gap: 22px; }

  .comeback__inner { gap: 0 36px; }
  .comeback__text { gap: 26px; }

  /* Foto del chef: escala proporcional manteniendo el arco */
  .chef__card { min-height: 0; }
  .chef__photo { width: 100%; height: auto; aspect-ratio: 462 / 577; }
  .chef__arch {
    left: 3%; top: 14.5%;
    width: 95.2%; height: 85.6%;
    border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  }
  .chef--1 .chef__cutout,
  .chef--2 .chef__cutout,
  .chef--3 .chef__cutout { width: 100%; height: auto; }
  .chef--1 .chef__photo, .chef--3 .chef__photo { margin-left: 3%; }
  .chef--2 .chef__photo { aspect-ratio: 440 / 596; height: auto; }
  .chef--2 .chef__arch { left: 0; top: 17.2%; width: 100%; height: 82.8%; }
  .chef--2 .chef__cutout { left: 3.3%; width: 94%; }
  .chef--3 .chef__photo { aspect-ratio: 468 / 572; height: auto; }
  .chef--3 .chef__arch { top: 13.7%; height: 86.3%; }

  .cashless__banner-content { padding: 0 4%; }
  .cashless__salvo { width: 20.5%; }
}

/* ==========================================================================
   ≤ 920 px — menú móvil
   ========================================================================== */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }

  .site-header {
    position: sticky;
    top: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    background: var(--color-dark);
  }
  .site-header__inner { min-height: 48px; }

  .site-nav {
    position: fixed;
    z-index: 70;
    top: 0;
    right: 0;
    width: min(340px, 88vw);
    height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top)) 26px calc(28px + env(safe-area-inset-bottom));
    background: var(--surface-deep);
    border-left: 2px solid rgba(243, 223, 197, 0.16);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    transform: translateX(101%);
    visibility: hidden;
    /* La visibilidad cambia al instante al abrir (para que los enlaces sean
       enfocables de inmediato) y se retrasa al cerrar hasta terminar el
       deslizamiento. */
    transition: transform 220ms var(--ease), visibility 0s linear 220ms;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-open .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform 220ms var(--ease), visibility 0s linear 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 52px;
  }
  .site-nav__link {
    display: block;
    font-size: 1.375rem;
    padding: 16px 4px;
    border-bottom: 2px solid rgba(243, 223, 197, 0.28);
  }
  .site-nav__cta {
    margin: 26px 0 0;
    width: 100%;
    min-height: 56px;
    font-size: 1.125rem;
  }

  /* Compensa el encabezado fijo al saltar a una sección */
  :target { scroll-margin-top: 96px; }
  main [id] { scroll-margin-top: 96px; }
}

/* ==========================================================================
   ≤ 768 px — apilado de las composiciones a dos columnas
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --radius-hero: 28px;
    --radius-card: 28px;
    --radius-countdown: 22px;
    --radius-banner: 22px;
    --radius-footer: 64px;
  }

  /* ---- Hero ---- */
  /* El aire entre el header y el marco baja de 65px a 16px y esos ~49px se le
     devuelven al banner por altura, no por desplazamiento: el borde inferior
     queda donde estaba y la sección siguiente no se mueve. */
  .hero { padding-top: 16px; }
  .hero__frame { aspect-ratio: 1 / 1.25; }
  .hero__logo { width: 74%; top: 12%; }
  .hero__claim { width: 92%; top: auto; bottom: 30%; transform: translateX(-50%); }
  /* z-index 1: en escritorio la base hace de suelo y recorta los cactus, pero
     la composición móvil es distinta y los suyos deben verse completos. */
  .hero__base { top: 85%; bottom: 0; border-radius: 26px 26px 0 0; z-index: 1; }
  .deco--hero-cactus-largo { width: 30%; left: 71%; top: 6%; }
  /* El nopal izquierdo se retira en móvil: con el marco mucho más vertical
     ocupaba la esquina donde caen el claim y la base, y el cactus largo de la
     derecha basta para sostener la composición. */
  .deco--hero-cactus { display: none; }
  /* La composición móvil es otra (base en z-index 1, cactus entero visible):
     la penca suelta no pinta nada útil y sobra. */
  .deco--hero-penca { display: none; }

  /* De 768px hacia abajo el hero deja de componerse por capas —igual que ya
     pasaba de 769px hacia arriba— y pasa a ser el arte plano vertical. El
     marco no se toca: la imagen se adapta a él (mismo ancho, misma proporción,
     mismo radio y mismo recorte), no al revés. Las reglas de arriba se quedan
     donde están porque la maqueta por capas sigue en el DOM. */
  .hero__mobile-art {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El arte es 1151x2048 (1:1.78) y el marco móvil es más achatado, así que
       `cover` recorta en vertical. Se ancla casi abajo porque todo el contenido
       útil —logo, claim y los dos cactus— vive en el 70% inferior y lo que
       sobra arriba es fondo de piel: recortando desde arriba no se pierde
       nada. Centrarlo se comería el pie de los cactus.
       El 96% en vez de un `bottom` seco es lo que salva la punta de la llama:
       a 768px el recorte vertical llega al 29.7% del arte y la llama arranca
       en el 29.5%, así que anclado del todo abajo se cortaba plana. Ese 4%
       devuelve ~12px de aire arriba y sólo cede ~15px de follaje al pie, que
       ya salía del marco. */
    object-position: center 96%;
    border-radius: inherit;
  }

  /* Se apaga la maqueta por capas entera —incluida la viñeta `::before`, que
     si no oscurecería el arte—, pero sigue en el DOM: es la que se usa entre
     769px y arriba en su versión de escritorio. No se tocan `.hero`,
     `.hero__frame` ni `.hero__mobile-art`. */
  .hero__layered-bg,
  .hero__desktop-art,
  .hero__logo,
  .hero__claim,
  .deco--hero-cactus,
  .deco--hero-cactus-largo,
  .deco--hero-penca,
  .hero__base {
    display: none;
  }

  .hero__frame::before {
    display: none;
  }

  /* ---- Estamos de regreso ---- */
  .comeback { padding-top: 48px; }
  .comeback__inner { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .comeback__heading { display: flex; justify-content: center; }
  .comeback__heading img { width: min(380px, 82%); }
  .comeback__text { text-align: left; }
  .comeback__text p:last-child { text-align: left; }

  /* ---- Contador ---- */
  .countdown { margin-top: 56px; }
  /* +1px: compensa la soga inferior, que ya no ocupa flujo bajo el escenario. */
  .countdown__stage { padding: 40px 0 39px; }
  .countdown__block { min-height: 0; padding: 22px 10px; }
  .countdown__row { padding: 6px 0; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .countdown__sep { top: 6px; }
  .countdown__label { margin-top: 8px; }
  .countdown__cta { margin-top: -32px; min-width: 0; width: min(300px, 82%); min-height: 56px; }
  /* Misma estrategia que en escritorio: bases ancladas con bottom a la soga
     inferior. El cactus se estrecha y se corre a la izquierda porque aquí queda
     por delante de un bloque que ocupa todo el ancho: así apoya en la soga sin
     tapar los números de DIAS. El sotol conserva su medida: al ir por detrás,
     el fondo semiopaco ya lo atenúa. */
  .deco--count-cactus { width: 25%; left: -6.5%; top: auto; bottom: 0; }
  .deco--count-sotol { width: 24%; left: 82%; top: auto; bottom: 0; }

  /* ---- Boleto ---- */
  .ticket { padding-top: 64px; }
  .ticket__inner { grid-template-columns: 1fr; gap: 34px; }
  /* En una sola columna el rótulo deja de hacer pareja con la columna de
     beneficios y pasa a encabezar el bloque: se centra sobre el ancho de la
     cuadrícula. El importe conserva su alineación porque es un hermano. */
  .ticket__name { text-align: center; }
  /* El importe comparte caja con el rótulo, así que centrarlo lo deja sobre el
     mismo eje sin tocar su tamaño, color ni interlínea. */
  .ticket__amount { text-align: center; }
  .ticket__includes .starlist li { max-width: none; }

  /* ---- Fire Show ---- */
  .fireshow { padding-top: 72px; }
  .fireshow__heading { margin-bottom: -9vw; }
  .fireshow__heading img { width: 90%; margin-left: 5%; }
  .fireshow__panel { min-height: 0; }
  .fireshow__content { padding: clamp(84px, 20vw, 150px) 22px 46px; }
  .fireshow__lead { text-align: left; text-align-last: left; }
  .fireshow__shout { margin-top: 30px; }
  .fireshow__shout-2 { flex-wrap: wrap; }
  /* El cactus largo deja el anclaje superior y baja a la esquina inferior
     derecha, al hueco que ocupaba el sotol —oculto aquí para no duplicar masa
     en la misma esquina—. El `bottom` va en vw y no en %: el panel pasa de
     720x391 a 328x350 entre 768 y 360px, de modo que un % de su altura movería
     el recorte en cada ancho; en vw el corte acompaña al ancho, que es lo que
     dimensiona la imagen, y el asomo se mantiene sobre la franja inferior. */
  .deco--fs-cactus-largo { width: 34%; left: 76%; top: auto; bottom: -18vw; }
  .deco--fs-cactus { width: 40%; left: -8%; top: auto; bottom: -3%; }
  .deco--fs-sotol { display: none; }

  /* ---- Chefs: foto, título, nombre, biografía, platillos ---- */
  .chef--1 { padding-top: 48px; }
  .chef--2 { margin-top: 48px; }
  .chef--3 { padding-top: 48px; }

  .chef__card,
  .chef__card--bare { grid-template-columns: 1fr; }
  .chef__photo,
  .chef--2 .chef__photo,
  .chef--3 .chef__photo {
    width: min(360px, 86%);
    height: auto;
    margin: 0 auto;
    aspect-ratio: 462 / 600;
  }
  .chef--1 .chef__photo, .chef--3 .chef__photo { margin: 0 auto; }
  .chef__arch { left: 2%; top: 12%; width: 96%; height: 88%; }
  .chef--2 .chef__arch, .chef--3 .chef__arch { left: 2%; top: 12%; width: 96%; height: 88%; }
  .chef--1 .chef__cutout,
  .chef--2 .chef__cutout,
  .chef--3 .chef__cutout { left: 0; width: 100%; height: auto; }
  .chef--2 .chef__cutout { left: 3%; width: 94%; }

  .chef__content,
  .chef--2 .chef__content,
  .chef--3 .chef__content {
    padding: 26px 22px 104px;      /* aire inferior para las decoraciones */
    text-align: left;
    order: 2;
  }
  .chef--2 .chef__card { display: flex; flex-direction: column; }
  .chef--2 .chef__photo { order: 1; }
  .chef--2 .chef__content { order: 2; }
  .chef__title, .chef--2 .chef__title { justify-content: flex-start; }
  .chef--2 .chef__bio { text-align: justify; text-align-last: left; }
  .chef__dishes,
  .chef--1 .chef__dishes,
  .chef--2 .chef__dishes,
  .chef--3 .chef__dishes {
    padding-left: 0;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 12px;
    text-align: left;
  }
  .chef__brand { width: 150px; }
  .chef__brand--angus { width: 210px; }

  /* En móvil las decoraciones quedan DEBAJO del texto (z-index 0) y en el
     aire inferior de cada tarjeta, para no taparlo nunca. */
  .chef .deco { z-index: 0; }
  /* Los cuatro grupos se anclan por `right` y no por `left`: en una sola
     columna el texto arranca pegado al borde izquierdo y las decoraciones le
     caían encima, mientras que el aire libre queda a la derecha —donde ya vive
     el grupo de botas del chef 2—. Los desplazamientos se conservan tal cual,
     medidos ahora desde el borde contrario, de modo que el recorte y el apoyo
     inferior de cada composición se mantienen. */
  .deco--c1-sotol        { width: 48%; left: auto; right: -6%; top: auto; bottom: -4px; }
  .deco--c1-herradura    { width: 27%; left: auto; right: 3%;  top: auto; bottom: 8px; }
  /* El cactus se retira en móvil: en una sola columna el único aire libre es la
     esquina inferior derecha, que ya ocupan las botas. Sale del flujo visual y
     las botas crecen para sostener solas esa esquina. */
  .deco--c2-cactus-largo { display: none; }
  .deco--c2-botas        { width: 38%; left: auto; right: -3%; top: auto; bottom: -6px; }
  /* La tejana llega escalada a 0.90 desde `styles.css`. Ese `transform` se
     mantiene intacto; solo se recoloca su origen a la esquina anclada, porque
     con `left bottom` la reducción del 10% la separaría del cactus al medir
     ahora desde la derecha. */
  .deco--c3-tejana       { width: 42%; left: auto; right: 2%; top: auto; bottom: 6px;
                           transform-origin: right bottom; }
  .deco--c3-cactus       { width: 48%; left: auto; right: -3%;  top: auto; bottom: -4px; }

  /* ---- Cashless ---- */
  .cashless { padding-top: 96px; }
  .cashless__banner { aspect-ratio: 1330 / 470; }
  .cashless__banner-content { align-items: flex-start; padding: 0 5%; gap: 0.3em; }
  .cashless__banner-title { flex-direction: column; align-items: flex-start; gap: 0.05em; }
  .cashless__wordmark { width: 62%; min-width: 140px; }
  .cashless__salvo { width: 26%; right: -1%; top: 58%; }
  .cashless__faq { padding-top: 56px; padding-bottom: 132px; }
  .cashless__faq .deco { z-index: 0; }
  /* Las botas vuelven a quedar por delante de la soga (y siguen por detrás del
     texto, que va en z-index 2), para conservar la profundidad de la escena. */
  .cashless__faq .deco--cash-botas { z-index: 1; }
  .cashless__item { padding: 22px 0 34px; }
  .cashless__item + .cashless__item { padding-top: 32px; }
  .cashless__q { padding-left: 0; }
  .cashless__item p { text-align: left; }
  /* Aquí las decoraciones se anclan por abajo, así que la soga hace lo mismo:
     su base coincide con la de .deco--cash-cactus (bottom: 20px). Sustituye al
     margen negativo que antes la superponía sobre las botas. */
  .rope--cashless { top: auto; bottom: 20px; z-index: 0; }
  .deco--cash-cactus-largo { width: 30%; left: -4%;  top: auto; bottom: 44px; }
  .deco--cash-sotol        { width: 28%; left: 2%;   top: auto; bottom: 14px; }
  .deco--cash-cactus       { width: 32%; left: auto; right: -4%; top: auto; bottom: 20px; }
  .deco--cash-botas        { width: 26%; left: auto; right: 2%;  top: auto; bottom: 12px; }

  /* ---- Line Up: la división vertical se vuelve cuerda horizontal ---- */
  .lineup { padding-top: 96px; }
  .lineup__inner { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  /* En una sola columna el logotipo vertical y la cuerda dejan de separar dos
     bloques y se vuelven relleno: salen de la cuadrícula —no solo se ocultan—
     para no dejar filas ni `gap` reservados. Las reglas de abajo se conservan
     porque siguen sirviendo al escritorio. */
  .lineup__brand,
  .lineup__divider { display: none; }
  .lineup__brand img { width: min(240px, 62%); }
  .lineup__divider {
    width: min(var(--rope-w), 92%);
    height: 12px;
    content: url("../images/decorations/soga-horizontal.png");
    justify-self: stretch;
    margin-inline: auto;
  }
  .lineup__title { width: min(520px, 96%); margin-bottom: 6px; }
  .artist--row { flex-wrap: wrap; }

  /* ---- Footer ---- */
  .site-footer { margin-top: 72px; padding: 56px 0 max(56px, env(safe-area-inset-bottom)); }
  .site-footer__inner { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  /* `justify-items` ya centra la caja del logotipo en su celda, pero la imagen
     se quedaba pegada al borde izquierdo de esa caja, que es más ancha. Basta
     con centrarla dentro: dar ancho al contenedor cambiaría la base del 66% y
     con ella el tamaño del logotipo. */
  .site-footer__brand img { width: min(260px, 66%); margin-inline: auto; }
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
    padding-top: 0;
    width: 100%;
    max-width: 460px;
  }
  .site-footer__head { margin-bottom: 18px; }
  .site-footer__col ul { gap: 14px; }
  .site-footer__col a { display: inline-block; padding: 4px 0; }
}

/* ==========================================================================
   ≤ 560 px
   ========================================================================== */
@media (max-width: 560px) {
  .hero__frame { aspect-ratio: 1 / 1.48; }
  .hero__logo { width: 82%; top: 10%; }
  .hero__claim { width: 96%; bottom: 32%; transform: translateX(-50%); }

  .countdown__value { letter-spacing: -0.01em; }
  .countdown__label { font-size: clamp(0.7rem, 2.6vw, 1.05rem); }

  .fireshow__shout-2 { font-size: clamp(1.05rem, 4.4vw, 1.4rem); }

  .cashless__banner { aspect-ratio: 1330 / 560; }
  .cashless__salvo { width: 30%; top: 62%; right: -1%; }

  .site-footer { --radius-footer: 44px; }
}

/* ==========================================================================
   ≤ 480 px
   ========================================================================== */
@media (max-width: 480px) {
  /* El aire lateral ya NO se redefine aquí: depende exclusivamente de
     --page-gutter: clamp(16px, 4vw, 24px) (19.2px a 480px, 16px a 320px). */
  .site-header__logo img { width: 92px; }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding: 8px 12px; }

  .comeback__text { font-size: max(1rem, var(--fs-intro)); }
  .starlist { font-size: max(1rem, var(--fs-body)); }
  .chef__bio, .cashless__item p { font-size: max(1rem, var(--fs-body)); }
  .fireshow__lead { font-size: max(1rem, var(--fs-fire-intro)); }

  .countdown__unit { min-width: 0; }

  .ticket__name { font-size: clamp(3rem, 13vw, 4rem); }
  .ticket__amount { font-size: clamp(4.6rem, 22vw, 7rem); }
  .ticket__includes-title { font-size: clamp(2.1rem, 10vw, 2.8rem); }

  .chef__photo,
  .chef--2 .chef__photo,
  .chef--3 .chef__photo { width: min(300px, 92%); }
  .chef__content,
  .chef--2 .chef__content,
  .chef--3 .chef__content { padding: 22px 16px 34px; }

  .cashless__banner { aspect-ratio: 1330 / 640; }
  .cashless__salvo { width: 34%; top: 64%; right: -1%; }

  .site-footer__cols { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .site-footer__social { justify-content: center; }
}

/* ==========================================================================
   ≤ 380 px — pantallas muy estrechas (320 px incluido)
   ========================================================================== */
@media (max-width: 380px) {
  .hero__frame { aspect-ratio: 1 / 1.52; }
  .hero__logo { width: 88%; }
  .countdown__label { font-size: 0.66rem; letter-spacing: 0.01em; }
  .countdown__value { font-size: clamp(2.5rem, 15vw, 3.4rem); }
  .fireshow__shout { font-size: clamp(1.5rem, 8vw, 1.9rem); }
  .artist--row { gap: 0.3em; }
  .cashless__banner { aspect-ratio: 1330 / 720; }
}