/* =========================================================
   Responsive helpers (mobile-first)
   ========================================================= */

/*
Breakpoints de referencia:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
*/

/* =========================================================
   Mobile adjustments (<= 640px)
   ========================================================= */
@media (max-width: 640px){

  .container{
    padding-inline: var(--space-3);
  }

  /* Cards / components compactos */
  .card{
    padding: var(--space-3);
  }

  /* Modal spacing */
  .modal__header,
  .modal__body,
  .modal__footer{
    padding: var(--space-3);
  }

  /* Footer stack */
  .footer__inner{
    flex-direction: column;
    gap: var(--space-4);
  }
    .footer__contacto-redes{
    gap: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }
  .footer__contacto-redes a{
    width: 100%;
    max-width: 350px;
    gap: var(--space-4);
  }
  .footer__bottom{
    flex-direction: column;
}
}
/* =========================================================
   Tablet & up (>= 768px)
   ========================================================= */
@media (min-width: 768px){

  /* Grid helpers */
  .grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .grid-3{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* Flex column helpers: force multi-column */
  .cols-2 > *{
    flex-basis: calc(50% - var(--gap, var(--space-4)));
  }

  .cols-3 > *{
    flex-basis: calc(33.333% - var(--gap, var(--space-4)));
  }

  .cols-4 > *{
    flex-basis: calc(25% - var(--gap, var(--space-4)));
  }

}

/* =========================================================
   Desktop (>= 1024px)
   ========================================================= */
@media (min-width: 1024px){

  .container{
    max-width: 1100px;
  }

  .grid-4{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* =========================================================
   Large screens (>= 1280px)
   ========================================================= */
@media (min-width: 1280px){

  .container{
    max-width: 1200px;
  }
}

/* =========================================================
   Force single column (mobile collapse)
   ========================================================= */
@media (max-width: 768px){

  /* Flex columns helpers */
  .cols-2 > *,
  .cols-3 > *,
  .cols-4 > *{
    flex-basis: 100%;
  }

  /* Leading column layouts (contenido interno) */
  .cols-leading > *{
    flex-basis: 100%;
  }

  /* Sidebar / narrow-first patterns (si se usan) */
  .cols-sidebar > *,
  .cols-sidebar-right > *{
    flex-basis: 100%;
  }

  /* Nav */
  .nav__links{
    display: none;
  }
}

/* =========================================================
   Motion preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Responsive: ajusta per-view sin tocar JS */
@media (max-width: 1024px){
  .gallery{ --per-view: 2; }
}
@media (max-width: 640px){
  .gallery{ --per-view: 1; }
  .gallery__item img{ height: 200px; }
}

/* =========================================================
   Nav — hamburguesa (solo mobile)
   ========================================================= */

.nav__burger {
  display: none; /* oculto en desktop */
}

@media (max-width: 768px) {
  .nav__burger {
    display: inline-flex;
  }
}

/* En móvil: padding más compacto */
@media (max-width: 600px){
  #messages{
    padding: 8px 10px;
  }
  #messages .toast{
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.92rem;
  }
}