/* ============================================================
   EL JAIBO UNDERGROUND — Ajustes responsive
   Complementa los breakpoints nativos de Bootstrap 5.
   Breakpoints BS5: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
   ============================================================ */

/* ---------- MOVIL (< 576px) ---------- */
@media (max-width: 575.98px) {

  :root {
    --h-navbar: 66px;
    --section-y: 3rem;
  }

  .jaibo-navbar .navbar-brand img { height: 32px; }

  /* Hero: menos alto para no empujar el contenido fuera de vista */
  .hero { min-height: 78vh; align-items: flex-end; }
  .hero__content { padding-block: var(--space-lg) var(--space-md); }
  .hero__title   { line-height: .95; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn-jaibo,
  .hero__actions .btn-jaibo-outline { width: 100%; }
  .hero__badge   { width: 100%; justify-content: center; }
  .hero__scroll  { display: none; }

  /* Foto: en vertical el encuadre se recorre para no cortar las botas */
  .hero__media img { object-position: 68% center; }

  .cat-card { height: 240px; }

  /* Carrito: la imagen baja a 72px y el precio pasa a fila propia */
  .cart-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "img datos"
      "acciones acciones";
    gap: var(--space-xs) var(--space-sm);
  }
  .cart-item__img     { width: 72px; height: 72px; grid-area: img; }
  .cart-item__datos   { grid-area: datos; }
  .cart-item__acciones{ grid-area: acciones; display: flex;
                        justify-content: space-between; align-items: center;
                        width: 100%; padding-top: var(--space-xs); }

  .resumen { position: static; }

  /* Toast a todo el ancho en movil */
  .toast-zona {
    left: var(--space-sm);
    right: var(--space-sm);
    max-width: none;
  }

  /* WhatsApp flotante mas discreto */
  .wa-float { width: 52px; height: 52px; }
  .wa-float svg { width: 26px; height: 26px; }

  .opcion-btn { min-width: 52px; padding: 10px 12px; }

  .folio-box__num { letter-spacing: .04em; word-break: break-all; }
}

/* ---------- TABLET (576px – 991px) ---------- */
@media (min-width: 576px) and (max-width: 991.98px) {

  .hero { min-height: 72vh; }
  .hero__content { max-width: 90%; }

  .destacado__media { min-height: 340px; }

  /* El resumen del carrito deja de ser sticky: no hay altura suficiente */
  .resumen { position: static; margin-top: var(--space-md); }
}

/* ---------- MENU COLAPSADO (< 992px) ---------- */
@media (max-width: 991.98px) {

  /* El menu movil se despliega como panel completo */
  .jaibo-navbar .navbar-collapse {
    background: var(--jaibo-surface);
    border: 1px solid var(--jaibo-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    max-height: calc(100vh - var(--h-navbar) - 40px);
    overflow-y: auto;
  }

  .jaibo-navbar .nav-link {
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--jaibo-border);
  }
  .jaibo-navbar .nav-item:last-child .nav-link { border-bottom: none; }
  .jaibo-navbar .nav-link::after { display: none; }

  .jaibo-navbar .dropdown-menu {
    border: none;
    background: var(--jaibo-black);
    margin: 0 0 var(--space-xs) 0;
    border-radius: var(--radius-md);
  }

  .jaibo-footer { text-align: center; }
  .jaibo-footer .footer-autorizado,
  .jaibo-footer .footer-social-wrap { justify-content: center; }
}

/* ---------- ESCRITORIO GRANDE (>= 1400px) ---------- */
@media (min-width: 1400px) {
  .hero__content { max-width: 820px; }
  .container-jaibo { max-width: 1320px; }
}

/* ---------- ORIENTACION HORIZONTAL EN MOVIL ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero__content { padding-block: var(--space-md); }
  .hero__badge, .hero__scroll { display: none; }
}

/* ---------- PANTALLAS DE ALTA DENSIDAD ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .jaibo-navbar .navbar-brand img,
  .jaibo-footer__logo { image-rendering: -webkit-optimize-contrast; }
}

/* ---------- IMPRESION ----------
   Util para que el cliente imprima su folio de recoleccion. */
@media print {
  .jaibo-navbar, .anuncio-bar, .jaibo-footer,
  .wa-float, .toast-zona, .hero__scroll,
  .no-print { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
  }
  .folio-box {
    background: #fff !important;
    color: #000 !important;
    border: 3px solid #000;
  }
  a[href]::after { content: ""; }
}