/* ═══════════════════════════════════════════════════════
   La Pikadera.COM — Responsive Configurations
   Clean Architecture (v2.0 — Sin !important)
   ═══════════════════════════════════════════════════════ */

/* ── TABLETS & SMALL LAPTOPS (Max 1100px) ── */
@media (max-width: 1100px) {
  :root { --nav-height: 72px; }

  .topbar__inner { padding: 0 1.2rem; gap: 0.5rem; justify-content: space-between; }
  .topbar__nav { display: none; }
  #nav-whatsapp-cta { display: none; }
  .hamburger { display: flex; }

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ── PHONES & TABLETS (Max 768px) ── */
@media (max-width: 768px) {
  /* ─── Hero ─── */
  .hero { min-height: 75vh; padding-top: 90px; text-align: center; }
  .hero__content { padding: 0 1.2rem; }
  .hero__headline { font-size: 2.6rem; letter-spacing: -1px; margin-bottom: 1.2rem; }
  .hero__sub { font-size: 0.85rem; letter-spacing: 0.12em; }
  .hero__desc { font-size: 1rem; margin: 0 auto 2rem; max-width: 90%; }
  .hero__actions { flex-direction: column; align-items: center; gap: 0.8rem; }
  .hero__actions .btn { width: 100%; max-width: 320px; }
  .hero__stats { justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
  .hero__stat { align-items: center; }
  .stat-number { font-size: 1.5rem; }

  /* ─── Trust Bar ─── */
  .trustbar { padding: 2rem 0; }
  .trustbar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    padding: 0 1.2rem;
  }
  .trust-item { flex-direction: column; text-align: center; gap: 0.6rem; }
  .trust-icon-box { width: 38px; height: 38px; margin: 0 auto; }
  .trust-item svg { width: 18px; height: 18px; }
  .trust-title { font-size: 0.8rem; }
  .trust-sub { font-size: 0.7rem; }

  /* ─── Section Headers ─── */
  .section-header { margin-bottom: 2.5rem; }
  .section-title { font-size: 2rem; }

  /* ─── Catalog Section Padding ─── */
  .catalog { padding: 4rem 0 3rem; }
  .catalog .section-header { padding: 0 1.2rem; }

  /* ─── Catalog Grid ─── */
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    padding: 0 0.8rem;
    width: 100%;
    margin: 0;
  }

  /* ─── Product Card ─── */
  .product-card {
    min-width: 0;
    width: 100%;
    border-radius: 10px;
  }
  .card__body { padding: 0.9rem; gap: 0.35rem; }
  .card__category {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }
  .card__title { font-size: 0.9rem; line-height: 1.4; }
  .card__desc { display: none; }

  /* ─── Card Footer (Botones apilados en móvil) ─── */
  .card__footer { margin-top: 0.8rem; padding-top: 0.8rem; gap: 0.5rem; }
  .card__footer .card__price { font-size: 1.1rem; }
  .card__footer .card__btns { flex-direction: column; gap: 0.4rem; }
  .card__footer .btn--card {
    width: 100%;
    font-size: 0.72rem;
    padding: 0.6rem 0.5rem;
    justify-content: center;
  }

  /* ─── Carrusel (index.html) ─── */
  .catalog-grid--carousel {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1.2rem 1.5rem;
    scrollbar-width: none;
  }
  .catalog-grid--carousel::-webkit-scrollbar { display: none; }
  .catalog-grid--carousel .product-card { flex: 0 0 240px; scroll-snap-align: start; }
  .catalog-grid--carousel .card__footer .card__btns { flex-direction: row; }

  /* ─── Steps (Cómo funciona) ─── */
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .step { padding: 1.5rem; }
  .step__icon { margin: 0 auto 1.2rem; }
  .step__title { font-size: 1rem; }

  /* ─── Footer ─── */
  .footer { padding: 4rem 1.2rem 2rem; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; }
  .footer__social { justify-content: center; }
  .footer__contact-item { justify-content: center; display: flex; gap: 0.5rem; }
  .footer__bottom { flex-direction: column; gap: 0.8rem; text-align: center; }

  /* ─── FAB WhatsApp ─── */
  .fab-whatsapp { bottom: 1.2rem; right: 1.2rem; width: 52px; height: 52px; }
  .fab-whatsapp svg { width: 26px; height: 26px; }
}

/* ── SMALL PHONES (Max 480px) ── */
@media (max-width: 480px) {
  .hero { min-height: 70vh; }
  .hero__headline { font-size: 2rem; }

  .catalog-grid { gap: 0.6rem; padding: 0 0.6rem; }

  .steps-grid { grid-template-columns: 1fr; }
  .step { text-align: center; padding: 1.8rem; }
  .step__number { font-size: 2rem; }
}

/* ── LARGE SCREENS (Min 1400px) ── */
@media (min-width: 1400px) {
  .catalog-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── EXTRA LARGE SCREENS (Min 1600px) ── */
@media (min-width: 1600px) {
  .catalog-grid { grid-template-columns: repeat(5, 1fr); }
}