/* ============================================================
   pantalla-grande.css · LA CARTA EN COMPUTADOR
   ------------------------------------------------------------
   Se carga al final de todo y manda sobre lo anterior.

   El problema que resuelve: la carta nació pensada para el
   celular, y en un monitor de 1920 quedaba una columna angosta al
   centro con medio escritorio en negro a los lados. No es que
   faltara contenido — es que el contenido no estaba ocupando el
   espacio que tenía.

   La idea: en pantalla grande la carta deja de ser una lista
   vertical y pasa a comportarse como un afiche. Más ancho útil,
   la foto del producto grande de verdad, y el menú en varias
   columnas para que se vea la oferta completa sin scrollear.
   ============================================================ */

/* ============================================================
   1 · EL BOTÓN "INGRESAR", CASI INVISIBLE
   ------------------------------------------------------------
   Es para el equipo, no para el cliente. Se queda como un texto
   tenue bajo el botón de ubicación y solo se enciende cuando
   alguien lo busca. Ocupa su lugar sin pedir atención.
   ============================================================ */

.btn-ingresar {
  margin-top: 10px !important;
  padding: 4px 8px !important;
  background: none !important;
  border: none !important;
  border-radius: 4px !important;
  color: rgba(255, 255, 255, .18) !important;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease;
}

.btn-ingresar:hover,
.btn-ingresar:focus-visible {
  color: rgba(245, 197, 24, .75) !important;
  background: none !important;
}

/* En modo edición sí se muestra, porque ahí es el botón de salida. */
body.modo-edicion .btn-ingresar {
  color: #080808 !important;
  background: var(--y, #F5C518) !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}


/* ============================================================
   2 · EL AVISO DE AGENDAR
   ------------------------------------------------------------
   El titular pasó a ser la invitación ("Agenda tu pedido") y el
   cierre quedó como dato secundario. El horario va en tercer
   nivel, en gris, como información y no como excusa.
   ============================================================ */

.aviso-texto b {
  color: #fff;
  font-weight: 700;
}

.aviso-texto em {
  font-style: normal;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--y, #F5C518);
  margin-top: 4px;
}


/* ============================================================
   3 · PANTALLA GRANDE
   ============================================================ */

@media (min-width: 1000px) {

  /* --- El hero ocupa el ancho real del monitor --- */
  #hero {
    max-width: none !important;
    width: 100%;
    min-height: calc(100vh - 40px);
    padding: 0 clamp(40px, 5vw, 90px) clamp(30px, 4vh, 56px) !important;
    grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 0 clamp(40px, 5vw, 90px) !important;
    align-content: center;
  }

  /* La foto deja de tener techo: llena su mitad de la pantalla. */
  .hero-img-wrap {
    max-height: none !important;
    aspect-ratio: 1 / 1;
    height: min(72vh, 660px);
    margin-left: auto !important;
  }

  /* El logo crece con la pantalla, sin pasarse. */
  .hero-logo img {
    width: clamp(340px, 26vw, 480px) !important;
  }

  .manifiesto__titular { font-size: clamp(44px, 4.4vw, 72px) !important; }
  .manifiesto__frase   { font-size: clamp(26px, 2.4vw, 40px) !important; }
  .hero-claim          { font-size: clamp(17px, 1.5vw, 23px) !important; }

  /* --- El menú usa el ancho completo --- */
  #menu,
  .cat-section,
  .section-header {
    max-width: none !important;
  }

  .product-grid {
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding-inline: clamp(40px, 5vw, 90px) !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(18px, 2vw, 28px) !important;
  }

  /* La destacada ocupa dos columnas y manda en la grilla. */
  .product-card.featured {
    grid-column: span 2;
  }
  .product-card.featured .card-img-wrap { aspect-ratio: 16 / 10 !important; }

  .fries-grid,
  .drinks-grid {
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding-inline: clamp(40px, 5vw, 90px) !important;
  }

  .fries-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(18px, 2vw, 26px) !important;
  }

  .drinks-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .section-header {
    padding-inline: clamp(40px, 5vw, 90px) !important;
  }

  .tabs-wrap { padding-inline: clamp(40px, 5vw, 90px) !important; }

  /* El bloque de cierre y el pie también dejan de ser una columna. */
  #cta-final > *,
  .cta-box {
    max-width: 1100px !important;
    margin-inline: auto !important;
  }

  .aviso-horario { max-width: 1100px !important; }
}


/* ============================================================
   4 · MONITORES ANCHOS
   ------------------------------------------------------------
   Pasado cierto punto no se sigue estirando: se agrega una cuarta
   columna de producto, que es aprovechar el espacio de verdad en
   vez de dejar tarjetas gigantes con aire adentro.
   ============================================================ */

@media (min-width: 1600px) {
  .product-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .product-card.featured { grid-column: span 2; }
  .fries-grid   { grid-template-columns: repeat(3, 1fr) !important; }
  #hero { min-height: min(880px, calc(100vh - 40px)); }
}


/* ============================================================
   5 · QUE EL HERO QUEPA EN LA PANTALLA
   ------------------------------------------------------------
   No basta con medir el ancho: un monitor de 1600x900 es ancho
   pero bajo, y el hero armado solo por ancho se pasaba 111px,
   dejando los botones de pedido debajo del borde. Acá todo se
   ata también al alto de la ventana, así lo primero que se ve
   incluye siempre el producto y el botón de pedir.
   ============================================================ */

@media (min-width: 1000px) {

  /* El logo se mide contra el alto además del ancho. */
  .hero-logo img {
    width: min(clamp(320px, 25vw, 470px), 40vh) !important;
  }

  #hero {
    min-height: 0 !important;
    height: calc(100vh - 8px);
    max-height: 1000px;
    padding-top: clamp(8px, 1.5vh, 22px) !important;
    padding-bottom: clamp(14px, 3vh, 40px) !important;
    align-content: center;
  }

  .hero-img-wrap { height: min(64vh, 620px) !important; }

  .hero-claim {
    font-size: clamp(15px, 1.7vh, 21px) !important;
    margin-bottom: clamp(6px, 1.2vh, 16px) !important;
  }

  .manifiesto {
    gap: clamp(8px, 1.4vh, 18px) !important;
    margin: clamp(8px, 1.5vh, 20px) 0 clamp(10px, 1.8vh, 22px) !important;
  }

  .manifiesto__titular { font-size: min(clamp(40px, 4.2vw, 68px), 7.6vh) !important; }
  .manifiesto__frase   { font-size: min(clamp(24px, 2.3vw, 38px), 4.6vh) !important; }

  .hero-ctas { margin-top: clamp(8px, 1.6vh, 22px) !important; }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-wapp {
    min-height: clamp(48px, 6.2vh, 62px);
    padding-block: 0 !important;
  }

  /* La banda a cuadros de abajo no aporta nada en escritorio y se
     comía la altura que necesitaban los botones. */
  .hero-checker-bottom { display: none !important; }
}

/* Pantallas anchas pero bajas (portátiles de 1366x768, 1600x900):
   se aprieta un poco más para que el botón de pedir siempre entre. */
@media (min-width: 1000px) and (max-height: 940px) {
  .hero-logo img       { width: min(clamp(280px, 22vw, 400px), 36vh) !important; }
  .manifiesto__titular { font-size: min(6.8vh, 52px) !important; }
  .manifiesto__frase   { font-size: min(4.2vh, 30px) !important; }
  .hero-img-wrap       { height: min(60vh, 540px) !important; }
  .smash-ticker        { margin-bottom: clamp(10px, 2vh, 24px) !important; }
  .smash-ticker__grupo span { padding-block: 7px; }
}


/* ============================================================
   6 · EL PRODUCTO MANDA EN PANTALLA GRANDE
   ------------------------------------------------------------
   El recuadro era grande pero la hamburguesa adentro se veía
   chica: las fotos vienen con aire alrededor del producto, y con
   `contain` ese aire se respeta y la burger queda flotando en el
   medio de una caja oscura.

   Acá la foto se agranda por sobre su caja y el recuadro pierde
   el fondo: deja de haber "una foto dentro de un marco" y pasa a
   haber una hamburguesa enorme sobre el negro. Es la pieza que
   vende, y en un monitor tiene que verse así.

   Además se quitó el claim "Sabor que golpea fuerte": el titular
   ya dice lo que hay que decir, y esa línea solo restaba altura
   al producto.
   ============================================================ */

@media (min-width: 1000px) {

  .hero-img-wrap {
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: min(80vh, 780px) !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    display: grid;
    place-items: center;
  }

  /* La foto crece por sobre su contenedor. El producto viene con
     margen transparente propio, así que este 1.32 es lo que hace
     que la hamburguesa se lea grande de verdad. */
  .hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .75));
  }

  /* El resplandor de la marca se queda, pero detrás del producto
     y sin caja: da profundidad sin encerrarlo. */
  .hero-img-wrap::before {
    content: '' !important;
    position: absolute;
    inset: 12% 8% 8%;
    z-index: -1;
    background: radial-gradient(ellipse at center,
      rgba(245, 197, 24, .17) 0%,
      rgba(245, 197, 24, .06) 45%,
      transparent 72%);
    filter: blur(26px);
    width: auto !important;
    height: auto !important;
    transform: none !important;
    bottom: auto;
    left: auto;
  }

  /* Sin el claim, la columna izquierda respira y el titular sube. */
  .hero-logo { margin-bottom: clamp(10px, 2vh, 20px) !important; }
}

/* En monitores grandes el producto se va aún más arriba de escala. */
@media (min-width: 1500px) {
  .hero-img { transform: scale(1.4); }
  .hero-img-wrap { height: min(82vh, 860px) !important; }
}


/* ============================================================
   7 · LA HAMBURGUESA SIN CAJA, EN TODAS LAS PANTALLAS
   ------------------------------------------------------------
   En computador ya se había sacado el marco y funcionó: la foto
   deja de verse como "una imagen dentro de un recuadro" y pasa a
   ser el producto sobre el negro. Acá se aplica lo mismo en el
   celular, que era donde seguía la caja.

   Sobre la escala: las fotos traen margen transparente propio
   alrededor del producto. Sin agrandarlas, la hamburguesa ocupa
   como la mitad del espacio que tiene asignado. Por eso el scale
   pasado de 1: no es deformar, es recuperar ese margen.
   ============================================================ */

/* --- Celular y tablet --- */
.hero-img-wrap {
  background: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
}

/* Se agranda con ancho y no con `transform`: la animación de
   entrada de la carta ya usa transform para deslizar el bloque,
   y un scale acá se lo comía. Con width + margen negativo la foto
   crece y sigue centrada, sin pelear con la animación. */
.hero-img {
  width: 122% !important;
  max-width: none !important;
  margin-left: -11% !important;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7));
}

/* El resplandor de la marca queda detrás del producto, sin caja. */
.hero-img-wrap::before {
  content: '' !important;
  position: absolute;
  inset: 14% 6% 6%;
  z-index: -1;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  bottom: auto;
  left: auto;
  background: radial-gradient(ellipse at center,
    rgba(245, 197, 24, .15) 0%,
    rgba(245, 197, 24, .05) 46%,
    transparent 72%);
  filter: blur(22px);
}

/* --- Computador: la foto manda de verdad --- */
@media (min-width: 1000px) {
  .hero-img      { width: 152% !important; margin-left: -26% !important; }
  .hero-img-wrap { height: min(84vh, 820px) !important; }
}

@media (min-width: 1500px) {
  .hero-img      { width: 164% !important; margin-left: -32% !important; }
  .hero-img-wrap { height: min(86vh, 900px) !important; }
}

/* En pantallas anchas pero bajas se modera, para que la
   hamburguesa no se salga por arriba y por abajo. */
@media (min-width: 1000px) and (max-height: 940px) {
  /* -13% y no más: con -19% la foto invadía la columna del
     titular. Crece hacia la derecha, que es donde hay espacio. */
  .hero-img      { width: 133% !important; margin-left: -13% !important; }
  .hero-img-wrap { height: min(68vh, 620px) !important; }
}


/* ============================================================
   8 · QUE EL TEXTO NO SE META BAJO LA HAMBURGUESA
   ------------------------------------------------------------
   Al agrandar la foto, el titular llegaba 44px por debajo de ella.
   La salida no es achicar la hamburguesa —es lo que vende— sino
   dejar que el titular quiebre una palabra antes. Un titular en
   tres líneas cortas se lee igual de bien que en dos largas, y
   así el producto se queda con todo el lado derecho.
   ============================================================ */

@media (min-width: 1000px) {
  .manifiesto {
    max-width: min(480px, 100%) !important;
  }
  .manifiesto__titular,
  .manifiesto__frase {
    max-width: 100%;
    text-wrap: balance;
  }
}


/* ============================================================
   9 · EL PUDÚ DEL BLOQUE DE PEDIDO, ENTERO
   ------------------------------------------------------------
   Estaba puesto con right:-14% y bottom:-18% dentro de una caja
   con overflow:hidden, así que en pantalla ancha se le cortaban
   la cabeza y las patas: se leía como un error, no como una
   marca de agua. Ahora entra completo y con aire alrededor.
   ============================================================ */

.cta-box::after {
  right: 4% !important;
  bottom: 50% !important;
  transform: translateY(50%) rotate(-5deg) !important;
  width: clamp(150px, 22%, 260px) !important;
  opacity: .09 !important;
}

/* En celular la caja es angosta: el pudú estorbaría al texto. */
@media (max-width: 700px) {
  .cta-box::after {
    right: -6% !important;
    width: 45% !important;
    opacity: .06 !important;
  }
}


/* ============================================================
   10 · EL TITULAR, MÁS GRANDE
   ------------------------------------------------------------
   Había quedado chico al limitarlo para que no se metiera bajo la
   hamburguesa. Como ahora hay 250px de aire entre el texto y la
   foto, el titular puede crecer sin volver a chocar. En Anton,
   grande y en dos o tres líneas cortas, es lo que le da el tono
   de cartel de plancha.
   ============================================================ */

/* Celular: el titular llena el ancho de la pantalla. */
.manifiesto__titular {
  font-size: clamp(38px, 10.5vw, 60px) !important;
  line-height: .9 !important;
}
.manifiesto__frase {
  font-size: clamp(25px, 7vw, 38px) !important;
}

@media (min-width: 1000px) {
  .manifiesto { max-width: min(560px, 100%) !important; }

  .manifiesto__titular {
    font-size: min(clamp(54px, 5.4vw, 88px), 9.4vh) !important;
    line-height: .88 !important;
    letter-spacing: 0 !important;
  }

  .manifiesto__frase {
    font-size: min(clamp(30px, 2.9vw, 46px), 5.4vh) !important;
  }

  /* El trazo bajo la frase acompaña el tamaño nuevo. */
  .manifiesto__frase::after { width: 76px; height: 5px; }
}

/* En monitores anchos y bajos no se dispara hacia arriba. */
@media (min-width: 1000px) and (max-height: 940px) {
  .manifiesto__titular { font-size: min(8.6vh, 64px) !important; }
  .manifiesto__frase   { font-size: min(5vh, 36px) !important; }
}