/* ============================================================
   RESPONSIVE — de mayor a menor
   El catálogo se usa desde el celular: ese es el caso real,
   no el escritorio.
   ============================================================ */

/* ── ≤ 1180px · tablet horizontal ────────────────────────── */
@media (max-width: 1180px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }

  .hero__content { max-width: none; }
  .hero__visual { width: min(100%, 340px); }

  .float-card--tl { left: calc(var(--s-6) * -1); }
  .float-card--br { right: calc(var(--s-6) * -1); }

  .contact { grid-template-columns: minmax(0, 1fr); }
}

/* ── ≤ 1024px · tablet ───────────────────────────────────── */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }

  .products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ── ≤ 860px · tablet vertical ───────────────────────────── */
@media (max-width: 860px) {
  :root {
    --section-y: clamp(3rem, 7vw, 4.5rem);
  }

  .hero { padding-top: calc(var(--h-announce) + var(--h-nav) + var(--s-10)); }
  .hero__stats { gap: var(--s-6); }

  .trust__inner { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .trust__item { padding: var(--s-4); }

  /* En modo lista el precio y las acciones van abajo: la fila
     no entra en un ancho de tablet. */
  .pcard--list {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      'media body'
      'media foot';
    align-items: start;
  }
  .pcard--list .pcard__media { grid-area: media; }
  .pcard--list .pcard__body { grid-area: body; }
  .pcard--list .pcard__foot {
    grid-area: foot;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s-2);
  }
}

/* ── ≤ 720px · celular ───────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --h-nav: 60px;
    --h-announce: 32px;
  }

  /* Sin la barra de WhatsApp flotante: hay barra inferior. */
  body { padding-bottom: 0; }

  .mobile-bar:not([hidden]) { display: flex; }

  .nav__status { display: none; }

  /* En un celular de 390 px el texto no entra: queda el ícono y
     el contador, que es lo único que hace falta ver. */
  .cart-btn__label { display: none; }
  .cart-btn { padding-inline: var(--s-4); gap: 0; }
  .cart-btn__badge { margin-left: var(--s-2); }

  /* Los chips de marca son los filtros que más se tocan en el
     celular: se les da el alto táctil mínimo. */
  .chip { min-height: 44px; padding-inline: var(--s-5); }

  .drawer { width: 100%; }

  .hero__title { font-size: clamp(2.5rem, 12vw, 3.75rem); }
  .hero__lede { font-size: var(--fs-base); }

  .hero__visual { width: min(100%, 300px); }

  /* Las tarjetas flotantes se van: sobre un video chico tapan
     el contenido en vez de informar. */
  .float-card { display: none; }

  .hero__stats {
    gap: var(--s-5);
    margin-top: var(--s-8);
  }

  .stat__value { font-size: var(--fs-2xl); }

  /* Toolbar compacta y siempre a mano */
  .toolbar {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .toolbar__row--controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    align-items: stretch;
  }

  .toolbar__row--controls .toolbar__search { grid-column: 1 / -1; }
  .toolbar__row--controls .select,
  .toolbar__row--controls .view-toggle,
  .toolbar__row--controls .active-filters { margin-left: 0; }

  .toolbar__row--controls .select { width: 100%; }
  .toolbar__row--controls .view-toggle { justify-content: center; }
  .toolbar__row--controls .active-filters { grid-column: 1 / -1; }

  /* El toggle de grilla/lista no necesita media fila. */
  .toolbar__row--controls > .view-toggle:first-child { justify-self: start; }

  /* La grilla del catálogo en 2 columnas: entrar 1 sola tarjeta
     por pantalla obliga a scrollear demasiado. */
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

  .pcard__body { padding: var(--s-3); gap: var(--s-2); }
  .pcard__media { aspect-ratio: 1; }
  .pcard__img { padding: var(--s-2); }
  .pcard__name { font-size: var(--fs-lg); }
  .price__value { font-size: var(--fs-xl); }
  .pcard__code, .pcard__detail { display: none; }

  .pcard__actions { width: 100%; }
  .pcard__actions .btn { width: 100%; padding-inline: var(--s-3); }

  /* En una tarjeta de dos columnas el control de cantidad queda
     apretado: se le da más área táctil, no menos. */
  .pcard .qty { width: 100%; justify-content: space-between; padding: 4px; }
  .pcard .qty button { width: 40px; height: 40px; }

  .pcard__foot { flex-direction: column; align-items: stretch; gap: var(--s-2); }

  /* Modo lista en celular: vuelve a ser una tarjeta normal. */
  .pcard--list { grid-template-columns: 64px minmax(0, 1fr); }

  .seller-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contact__title { font-size: clamp(2rem, 10vw, 2.75rem); }

  .footer { padding-bottom: calc(var(--s-8) + 72px); }
}

/* ── ≤ 480px · celular chico ─────────────────────────────── */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.25rem, 11.5vw, 3rem); }
  .hero__search-hint { display: none; }

  .brand-tabs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  .hours__row { grid-template-columns: 1fr auto; }
  .hours__badge { display: none; }

  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .toast { max-width: calc(100vw - var(--s-8)); }
}

/* ── Pantallas grandes ───────────────────────────────────── */
@media (min-width: 1600px) {
  :root {
    --gutter: 4rem;
  }

  .products { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Alto reducido: el hero no debe ocupar más que la ventana ── */
@media (max-height: 760px) and (min-width: 1025px) {
  .hero { padding-top: calc(var(--h-announce) + var(--h-nav) + var(--s-10)); }
  .hero__visual { width: min(100%, 320px); }
}

/* ── Impresión ───────────────────────────────────────────── */
@media print {
  .announce, .nav, .mobile-menu, .wa-float, .mobile-bar,
  .drawer, .overlay, .toast, .toolbar, .hero__visual { display: none !important; }

  body { background: #fff; color: #000; }
  .pcard { break-inside: avoid; border-color: #ccc; }
}