/* ============================================================================
   📱 AJUSTES RESPONSIVE — MAIN
   ============================================================================ */

/* =======================
   GALERÍA RESPONSIVE
   ======================= */

/* ≤ 960px */
@media (max-width: 960px) {
  .gallery-container img {
    min-height: 50vh;
    object-fit: cover;
    width: 100%;
  }
}

/* ≤ 600px */
@media (max-width: 600px) {
  .gallery-container img {
    min-height: 45vh;
  }
}

/* ≤ 390px */
@media (max-width: 390px) {
  .gallery-container img {
    min-height: 40vh;
  }

  .gallery-btn {
    display: none;
  }
}

/* ============================================================================
   📏 CORRECCIÓN FINAL PARA ≤ 430px
   (Galería + Catálogo + Ajustes duplicados corregidos)
   ============================================================================ */
@media (max-width: 430px) {

  /* -------------------------------
     Galería
  --------------------------------*/
  .gallery-container img {
    min-height: 40vh !important; /* valor real coherente con 390px */
    object-fit: cover;
    width: 100%;
  }

  .gallery-btn {
    display: none !important;
  }

  /* -------------------------------
     Header fix (venía duplicado)
  --------------------------------*/
  .right-controls {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .menu {
    margin-left: 0 !important;
  }

  /* -------------------------------
     CATÁLOGO – MOSTRAR 1 CARD POR FILA
  --------------------------------*/
  .section .grid {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  .section .grid .card {
    grid-column: span 12 !important;
    width: 100% !important;
    max-width: 380px !important;
  }
}


/* ================================
   📱 GALERÍA PRINCIPAL → GRID 2x2 EN MÓVIL
================================ */
@media (max-width: 430px) {

  .gallery--horizontal {
    overflow: visible !important;
    height: auto !important;
  }

  .gallery__viewport {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    transform: none !important;
  }

  .slide {
    width: 100% !important;
    margin: 0 !important;
  }

  .slide .frame {
    width: 100% !important;
    height: auto !important;
  }

  .slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px;
  }

  .gallery-btn {
    display: none !important;
  }
}