/* ============================================================
   ModaUrbana — responsive.css
   Mobile First: ajustes progresivos hacia arriba y hacia abajo.
   ============================================================ */

@media (max-width: 1080px) {
  .products { grid-template-columns: repeat(3, 1fr); }
  .carousel__track > .product-card { flex-basis: calc((100% - 2 * var(--sp-5)) / 3); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .header__menu-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(300px, 82vw); height: 100dvh;
    background: var(--white); box-shadow: var(--shadow-lg);
    transform: translateX(-100%); transition: transform var(--transition);
    margin-left: 0; padding: calc(var(--header-h) + 20px) var(--sp-5) var(--sp-5);
    z-index: var(--z-header);
  }
  .header { position: sticky; }
  .nav.is-open { transform: none; }
  .nav__menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { padding: 14px 16px; font-size: 1.05rem; }
  .nav + .header__actions { margin-left: auto; }

  .categories { grid-template-columns: repeat(2, 1fr); }
  .category--wide { grid-column: span 2; }
  .promos, .benefits, .testimonials, .blog { grid-template-columns: repeat(2, 1fr); }
  .newsletter__inner { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .indicators__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
  .products { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .carousel__track > .product-card { flex-basis: calc((100% - var(--sp-5)) / 2); }
  .promos, .benefits, .testimonials, .blog { grid-template-columns: 1fr; }
  .section__head { align-items: flex-start; }
  .product-card__add { opacity: 1; transform: none; position: static; margin-top: 10px; }
  .toolbar { width: 100%; justify-content: space-between; }
}

@media (max-width: 460px) {
  .categories { grid-template-columns: 1fr; }
  .category--wide { grid-column: auto; }
  .hero__actions .btn { flex: 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}