/* ==========================================================================
   MIGO RESPONSIVE — breakpoints móvil-first
   Cargar DESPUÉS de tokens.css y components.css
   ========================================================================== */

/* ── Tablet (≤1024px) ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 var(--s-5); }

  /* Header: oculta search en línea, muestra como botón */
  .header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
  }

  /* Nav: scroll horizontal */
  .nav__inner { padding: 0 var(--s-5); gap: 0; }

  /* Hero: stacked */
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero__visual { aspect-ratio: 16 / 11; }
  .hero__floating-card { display: none; }
  .hero__sticker { right: var(--s-4); top: var(--s-4); } /* dentro del marco en apilado */

  /* Grids */
  .grid-cats-12 { grid-template-columns: repeat(3, 1fr); }
  .vp-strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .promo-banner { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }

  /* Stats bar */
  .stat-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
  .stat-bar__num { font-size: 2.5rem; }

  /* About */
  .two-col { grid-template-columns: 1fr; gap: var(--s-8); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .coverage__states { grid-template-columns: repeat(3, 1fr); }

  /* Contact */
  .channels { grid-template-columns: 1fr; }
  .stores-grid { grid-template-columns: repeat(2, 1fr); }

  /* Shop */
  .shop { grid-template-columns: 1fr; }
  .filters { position: static; }

  /* Cart */
  .cart-grid { grid-template-columns: 1fr; }
  .summary { position: static; }

  /* Account */
  .account-grid { grid-template-columns: 1fr; }
  .account-side { position: static; }

  /* PDP */
  .pdp-grid { grid-template-columns: 1fr; gap: var(--s-8); }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

/* ── Móvil (≤640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 0 var(--s-4); }

  /* TopBar muy comprimido */
  .topbar__inner {
    padding: var(--s-2) var(--s-4);
    flex-wrap: wrap;
    font-size: 11px;
  }
  .topbar__inner > div:last-child { display: none !important; }
  .topbar__rate span:nth-child(5),
  .topbar__rate .sep + span:nth-of-type(2) { display: none; }

  /* Header */
  .header__inner { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .header__logo img { height: 36px; }
  .header__action span:not(.count) { display: none; }
  .header__action { padding: 0 var(--s-2); }

  /* Hamburguesa visible en móvil; nav colapsable con .nav--open (toggle JS) */
  .header__burger { display: inline-flex; }
  .nav { display: none; }
  .nav.nav--open {
    display: block;
    border-top: 1px solid var(--border);
  }
  .nav--open .nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) var(--s-4);
    overflow-x: visible;
  }
  .nav--open .nav__link {
    height: auto;
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--border);
  }
  .nav--open .nav__link:last-child { border-bottom: 0; }
  .nav--open .nav__link--accent { margin-left: 0 !important; }
  /* Buscador + selector de tienda dentro del drawer (reemplazo del header inline en movil) */
  .header__search { display: none; }
  .header__actions .store-picker { display: none; }
  .nav--open .nav__mobile-tools { display: block; padding: var(--s-3) var(--s-4) var(--s-4); border-bottom: 1px solid var(--border); }
  /* Hero */
  .hero { padding: var(--s-8) 0 var(--s-10); }
  .hero h1 { font-size: clamp(2rem, 8vw + 0.5rem, 2.75rem) !important; }
  .hero__pill { font-size: 10px; }
  .hero__stats { gap: var(--s-5); flex-wrap: wrap; }
  .hero__stat-num { font-size: var(--fs-xl); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__sticker { top: 16%; right: var(--s-3); padding: 6px 12px; font-size: 11px; }

  /* Cats */
  .grid-cats-12 { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .cat-tile { min-height: 120px; padding: var(--s-4); }
  .cat-tile__title { font-size: var(--fs-sm); }

  /* Products */
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .product-card__body { padding: var(--s-3); gap: var(--s-2); }
  .product-card__title { font-size: var(--fs-xs); -webkit-line-clamp: 2; }
  .product-card__price { font-size: var(--fs-md); }
  .product-card__category { font-size: 10px; }
  .product-card__actions { flex-direction: column; gap: var(--s-2); }
  .product-card__actions .btn { width: 100%; }
  .product-card__fav { width: 32px; height: 32px; }

  /* VP strip */
  .vp-strip { padding: var(--s-5) 0; }
  .vp-strip__grid { grid-template-columns: 1fr; gap: var(--s-3); }

  /* Sections */
  .section { padding: var(--s-10) 0; }
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--s-5); }

  /* Promo banner */
  .promo-banner__card { padding: var(--s-6); min-height: 180px; }
  .promo-banner__card h3 { font-size: var(--fs-xl); }

  /* Stats */
  .stat-bar { padding: var(--s-8) 0; }
  .stat-bar__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .stat-bar__item { padding-left: var(--s-4); }
  .stat-bar__num { font-size: 2rem; }

  /* About */
  .about-hero { padding: var(--s-8) 0 var(--s-10); }
  .process-grid { grid-template-columns: 1fr; }
  .coverage { padding: var(--s-8); }
  .coverage h2 { font-size: var(--fs-2xl); }
  .coverage__states { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .coverage__state { padding: var(--s-3); }

  /* Contact */
  .stores-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: var(--fs-2xl) !important; }

  /* PDP */
  .pdp-info h1 { font-size: var(--fs-2xl); }
  .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction: row; overflow-x: auto; }
  .gallery__thumb { width: 64px; height: 64px; flex-shrink: 0; }
  .price-block { padding: var(--s-4); }
  .price-block__usd { font-size: 2rem; }
  .cta-row { flex-direction: column; }
  .guarantees { grid-template-columns: 1fr; padding: var(--s-3); }
  .stock-table { font-size: var(--fs-xs); }
  .stock-table th:nth-child(2), .stock-table td:nth-child(2) { display: none; }

  /* Tabs */
  .tabs__nav { overflow-x: auto; padding: 0 var(--s-3); }
  .tabs__nav button { padding: var(--s-3) var(--s-4); white-space: nowrap; flex-shrink: 0; }
  .tabs__content { padding: var(--s-4); }
  .spec-list { grid-template-columns: 1fr; }

  /* Cart */
  .cart-item { grid-template-columns: 72px 1fr; gap: var(--s-3); padding: var(--s-4); }
  .cart-item__media { width: 72px; height: 72px; }
  .cart-item__price { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
  .cart-item__title { font-size: var(--fs-sm); }
  .summary { padding: var(--s-5); }

  /* Account */
  .account-main { padding: var(--s-5); }
  .order__head { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .order__body { grid-template-columns: 1fr; gap: var(--s-3); }
  .order__total { text-align: left; }
  .order__actions { flex-wrap: wrap; }

  /* Legal */
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-content { padding: var(--s-5); }
  .company-info { grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-4); }

  /* Footer */
  .footer { padding: var(--s-10) 0 var(--s-5); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-5); }

  /* WhatsApp FAB */
  .wa-fab { bottom: var(--s-4); right: var(--s-4); width: 52px; height: 52px; }
}

/* ── XS Móvil (≤380px) — pequeños ajustes ────────────────────────────────── */
@media (max-width: 380px) {
  .topbar__rate { font-size: 10px; }
  .product-card__title { font-size: 11px; }
  .product-card__price { font-size: var(--fs-base); }
  .product-card__category { display: none; }
}