/* ============================================================
   venta.css · LO QUE AYUDA A CERRAR EL PEDIDO
   ------------------------------------------------------------
   Se carga al final de todo. Tres piezas, todas con el mismo
   objetivo: que agregar algo cueste menos esfuerzo.

     1. El botón de agregar, siempre a la vista dentro de la ficha.
     2. Los extras que más dejan, destacados.
     3. El destello que hace mirar el aviso de agendar.
   ============================================================ */

/* ============================================================
   1 · AGREGAR SIN SCROLLEAR
   ------------------------------------------------------------
   La ficha de un producto mide casi 2.000px: el botón de agregar
   quedaba al final y había que recorrerla entera para pedir.
   Ahora el total y el botón viajan pegados al borde inferior de
   la ficha, visibles desde el primer segundo. Dos toques: abrir
   y agregar.
   ============================================================ */

.modal-pie {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px -20px -20px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg,
    rgba(14, 14, 14, 0) 0%,
    rgba(14, 14, 14, .94) 18%,
    #0e0e0e 42%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(245, 197, 24, .18);
}

.modal-pie .total-bar {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.modal-pie .btn-order {
  width: 100%;
  min-height: 54px;
  margin: 0 !important;
}

/* El cuerpo de la ficha deja aire para que el pie no tape nada. */
.modal-body { padding-bottom: 0 !important; }


/* ============================================================
   2 · LOS EXTRAS QUE MÁS DEJAN
   ------------------------------------------------------------
   El análisis de carta encontró que el Smash extra es el extra
   de mayor margen de todos y que casi nadie lo ve: está en una
   lista de once, todos iguales, ordenados sin criterio.

   Acá se le da el lugar que corresponde. Se destacan tres: el
   Smash extra (margen), el tocino y la cebolla crispy (los que
   mejor combinan con lo que ya pidieron). El resto queda igual:
   si se destaca todo, no se destaca nada.
   ============================================================ */

.extra-destacado {
  position: relative;
  background: rgba(245, 197, 24, .07) !important;
  border: 1px solid rgba(245, 197, 24, .34) !important;
  border-radius: 12px;
}

.extra-destacado::after {
  content: 'El favorito';
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 3px 9px;
  background: var(--y, #F5C518);
  color: #080808;
  border-radius: 999px;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.extra-destacado.extra-mejor::after { content: 'Súbele el nivel'; }


/* ============================================================
   3 · EL DESTELLO DEL AVISO
   ------------------------------------------------------------
   Una sola pasada de brillo cuando el aviso entra en pantalla.
   Una vez y nunca más: un brillo que se repite deja de llamar la
   atención y pasa a molestar.
   ============================================================ */

.aviso-horario { position: relative; overflow: hidden; }

.aviso-horario.destella::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .04) 30%,
    rgba(245, 197, 24, .22) 50%,
    rgba(255, 255, 255, .04) 70%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: pasar-destello 1.15s cubic-bezier(.25, .6, .3, 1) .25s 1 forwards;
}

@keyframes pasar-destello {
  from { left: -60%; }
  to   { left: 130%; }
}

/* El borde también responde, para que el destello no se sienta
   pegado encima sino parte de la pieza. */
.aviso-horario.destella {
  animation: latido-borde 1.4s ease-out .25s 1;
}

@keyframes latido-borde {
  0%   { border-color: rgba(245, 197, 24, .3); }
  35%  { border-color: rgba(245, 197, 24, .85); box-shadow: 0 0 26px rgba(245, 197, 24, .18); }
  100% { border-color: rgba(245, 197, 24, .3); box-shadow: none; }
}


/* ============================================================
   4 · LA SUGERENCIA AL CERRAR EL PEDIDO
   ------------------------------------------------------------
   Aparece una sola vez, justo antes de irse a WhatsApp, con lo
   que le falta al pedido. No bloquea: el botón de seguir sin
   agregar está siempre a la vista y del mismo tamaño. Si molesta,
   deja de servir.
   ============================================================ */

.sugerencia-overlay {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: end center;
  padding: 0;
  background: rgba(4, 4, 4, .8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: aparecer-sug .2s ease;
}

@keyframes aparecer-sug { from { opacity: 0; } to { opacity: 1; } }

.sugerencia-caja {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 20px calc(20px + env(safe-area-inset-bottom));
  background: #111;
  border: 1px solid rgba(245, 197, 24, .28);
  border-radius: 22px 22px 0 0;
  animation: subir-sug .32s cubic-bezier(.25, .9, .3, 1);
}

@keyframes subir-sug {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (min-width: 700px) {
  .sugerencia-overlay { place-items: center; padding: 20px; }
  .sugerencia-caja { border-radius: 22px; animation: aparecer-sug .25s ease; }
}

.sug-titulo {
  font-family: var(--f-display, 'Anton', Impact, sans-serif);
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.sug-titulo span { color: var(--y, #F5C518); }

.sug-sub {
  margin: 8px 0 20px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #B8B8B8;
  text-align: center;
}

.sug-items {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}

.sug-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 12px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}
.sug-item:hover { border-color: rgba(245, 197, 24, .45); background: #1f1d15; }
.sug-item.elegido {
  border-color: var(--y, #F5C518);
  background: rgba(245, 197, 24, .1);
}

.sug-item img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #0d0d0d;
  border-radius: 10px;
}

.sug-item-datos { min-width: 0; }
.sug-item-datos strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.sug-item-datos span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: #8A8A8A;
}

.sug-item-precio {
  font-family: var(--f-display, 'Anton', Impact, sans-serif);
  font-size: 19px;
  color: var(--y, #F5C518);
  font-variant-numeric: tabular-nums;
}

.sug-marca {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: transparent;
  font-size: 15px;
  font-weight: 900;
  transition: all .2s ease;
}
.sug-item.elegido .sug-marca {
  background: var(--y, #F5C518);
  border-color: var(--y, #F5C518);
  color: #080808;
}

.sug-botones { display: flex; flex-direction: column; gap: 9px; }

.sug-agregar {
  min-height: 54px;
  background: var(--y, #F5C518);
  color: #080808;
  border: none;
  border-radius: 14px;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
}
.sug-agregar:disabled { opacity: .35; cursor: default; }

.sug-seguir {
  min-height: 50px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: #B8B8B8;
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.sug-seguir:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
  .aviso-horario.destella::before,
  .aviso-horario.destella,
  .sugerencia-caja { animation: none !important; }
}


/* ============================================================
   5 · LA BANDA A CUADROS NO PISA LOS BOTONES
   ------------------------------------------------------------
   La banda inferior del hero está puesta con position:absolute
   pegada al borde, así que no ocupa espacio en el flujo. En una
   ventana cuadrada (por ejemplo 900x900) el contenido llega
   justo hasta ahí y los botones de pedir quedaban cruzados por
   los cuadros amarillos.

   Se le reserva el espacio con padding: la banda sigue pegada
   abajo, pero ya no hay nada que pueda ocuparlo.
   ============================================================ */

/* Reservar espacio con padding no alcanza: la banda está anclada
   al borde del hero y el contenido crece hacia ella igual. Como es
   un elemento decorativo —y en escritorio ya estaba oculta sin que
   se echara de menos— se retira en todo lo que no sea celular, que
   es la única pantalla donde cae bien y no estorba. */
@media (min-width: 620px) {
  .hero-checker-bottom { display: none !important; }
}

/* En celular sí se queda, pero con su espacio asegurado. */
@media (max-width: 619px) {
  #hero { padding-bottom: clamp(44px, 11vw, 64px) !important; }
}


/* ============================================================
   6 · EL PIE DE LA FICHA, LEGIBLE
   ------------------------------------------------------------
   Con el degradado, el total se leía sobre una zona semi
   transparente por la que pasaba el contenido de arriba: el
   precio quedaba encima de las letras de "quitar ingredientes" y
   no se entendía ninguno de los dos.

   Ahora el pie es una barra sólida con su propia línea de corte.
   Encima lleva un degradado corto que disimula el borde del
   scroll, pero el total y el botón van sobre fondo opaco.
   ============================================================ */

.modal-pie {
  background: #0e0e0e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
  padding-top: 13px !important;
  gap: 11px !important;
}

/* El degradado se separa a un pseudo-elemento, arriba del pie,
   para que no afecte la legibilidad de lo que hay dentro. */
.modal-pie::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0), #0e0e0e);
}

.modal-pie .total-bar {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.modal-pie .total-label {
  font-family: var(--f-cond, 'Barlow Condensed', sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A8A8A;
}

.modal-pie .total-amount {
  font-family: var(--f-display, 'Anton', Impact, sans-serif);
  font-size: clamp(28px, 7.5vw, 36px);
  line-height: 1;
  color: var(--y, #F5C518);
  font-variant-numeric: tabular-nums;
}