/* ==========================================================================
   CUATRO PAREDES - MEDIA QUERIES Y ADAPTABILIDAD RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  /* En desktop hero-section es flex-row solo para centrar verticalmente
     el grid (la imagen va aparte, en absolute). En mobile la imagen vuelve
     a fluir (position:relative) como hermana del grid, así que sin
     flex-direction:column ambas compiten por ancho en una fila y se
     encogen (el texto del título terminaba comprimido y desbordado). */
  .hero-section {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-media {
    min-height: 0;
  }

  /* El sello se queda anclado (absolute, misma esquina que en desktop) a
     la esquina inferior derecha real de la sección; el tamaño que ya
     tiene (clamp) queda bien en mobile, solo hacía falta la posición. */
  .hero-stamp-badge {
    bottom: 18px;
    right: 20px;
  }

  /* La hamburguesa sigue siendo una capa (position:absolute, fuera del
     flujo) igual que en desktop: NO debe empujar ni separar el texto de
     hero-content, solo flotar detrás de él (z-index 1 < hero-grid 2) a
     una profundidad distinta, como el resto del efecto parallax. Se
     redimensiona por ancho (no por alto de la sección, que en un
     viewport angosto la dejaría gigantesca) y se ancla abajo/derecha,
     cerca de donde cae el sello. En mobile además se oscurece: sus tonos
     cálidos (pan, queso) compiten con el texto blanco encima (el ícono y
     "BUCARAMANGA" quedaban casi ilegibles), algo que en desktop no pasa
     porque el texto cae sobre la zona ya oscurecida por el overlay. */
  .hero-burger-cutout {
    top: auto;
    right: -6%;
    bottom: 0;
    width: 128%;
    max-width: 480px;
    filter: drop-shadow(0 35px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4)) brightness(0.55) saturate(0.85);
  }

  /* Refuerzo de legibilidad para el tag de ubicación, que en mobile cae
     justo sobre el borde superior de la hamburguesa. */
  .hero-location-tag {
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9);
  }

  .hero-content {
    align-items: center;
  }

  .hero-scene-overlay {
    background:
      linear-gradient(180deg, rgba(17, 17, 17, 0.55) 0%, rgba(17, 17, 17, 0.75) 55%, rgba(17, 17, 17, 0.95) 100%);
  }

  .el-antojo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-layout {
    /* minmax(0, 1fr) en vez de 1fr: si no, la pista del grid crece para
       encajar el ancho mínimo del carrusel de categorías (ver abajo) y
       toda la sección de menú se desborda horizontalmente en mobile. */
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .menu-sidebar {
    position: static;
  }

  .menu-categories-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .temporada-hero-box {
    grid-template-columns: 1fr;
  }

  .pedir-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pedir-media-col {
    order: -1;
  }

  .casas-grid {
    grid-template-columns: 1fr;
  }

  .colab-featured-card {
    grid-template-columns: 1fr;
  }

  .cp-club-grid {
    grid-template-columns: 1fr;
  }

  .regala-grid {
    grid-template-columns: 1fr;
  }

  .eventos-grid {
    grid-template-columns: 1fr;
  }

  .archivo-layout {
    /* Mismo caso que .menu-layout: minmax(0, 1fr) evita que la pista del
       grid crezca para encajar el carrusel horizontal de años. */
    grid-template-columns: minmax(0, 1fr);
  }

  .archivo-years-col {
    flex-direction: row;
    overflow-x: auto;
  }

  .footer-main-row {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
  }

  /* El botón quedaba pegado al borde izquierdo del bloque, no centrado
     bajo "¿HAMBRE?" como el resto del bloque en mobile. */
  .footer-hambre-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links-block {
    align-items: flex-start;
  }

  .footer-cities {
    text-align: left;
  }

  .footer-social-links {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .header-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .header-container {
    height: 58px;
  }

  .header-logo .logo-cuatro,
  .header-logo .logo-paredes {
    font-size: 1.3rem;
  }

  .btn-pedir-header {
    font-size: 1rem;
    padding: 6px 16px;
  }

  .section-header-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cp-world-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .colabs-past-grid {
    grid-template-columns: 1fr;
  }

  .season-thumbs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .banner-parchado-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .banner-parchado-text {
    text-align: center;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .el-antojo-grid {
    grid-template-columns: 1fr;
  }

  .cp-world-grid {
    grid-template-columns: 1fr;
  }

  .season-thumbs-grid {
    grid-template-columns: 1fr;
  }

  .archive-gallery-grid {
    grid-template-columns: 1fr;
  }

  .menu-item-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .menu-item-media {
    max-width: 220px;
    margin: 0 auto;
  }

  .pedir-btn-group {
    grid-template-columns: 1fr;
  }

  /* Los modales del sistema (mapas, lookbooks, club, arcade) usan mucho
     padding fijo pensado para escritorio; en celulares angostos eso deja
     muy poco espacio de lectura, así que lo reducimos aquí. */
  .cp-modal {
    padding: 12px;
  }

  .cp-modal-content {
    padding: 24px 20px;
  }

  .cp-modal-content h3 {
    font-size: 1.5rem !important;
  }

  /* El botón "PEDIR AHORA" del header es redundante con el CTA del Hero
     y compite por espacio con el carrito y el menú hamburguesa. Se limita
     al header porque la misma clase se reutiliza en botones de modales. */
  .header-actions .btn-pedir-header {
    display: none;
  }
}