/* ─────────────────────────────────────────────────────────────────────────────
   FerroMax — Responsive Stylesheet
   Breakpoints: tablet ≤ 1024px | mobile ≤ 768px | small ≤ 480px
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --text-4xl: 2.6rem;
    --text-3xl: 2rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    text-align: center;
  }

  .hero__subtitle { margin-inline: auto; }
  .hero__actions  { justify-content: center; }
  .hero__stats    { justify-content: center; }

  .hero__visual { display: none; }

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

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

  .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }

  /* Hide the connector line on tablet */
  .steps-grid::before { display: none; }

  .location-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .map-placeholder { height: 240px; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  /* Hide nav links, show toggle */
  .menu-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-primary-light);
    padding: var(--sp-4) var(--container-pad) var(--sp-6);
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
  }

  .main-nav.nav--open {
    max-height: 400px;
    padding-top: var(--sp-4);
  }

  .main-nav a {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: var(--text-base);
  }

  .main-nav a:last-child { border-bottom: none; }

  .header__cta .btn--outline { display: none; }
}

/* ── Mobile (≤ 768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-4xl:    2rem;
    --text-3xl:    1.75rem;
    --text-2xl:    1.5rem;
    --container-pad: var(--sp-4);
  }

  /* Hero */
  #hero { padding: var(--sp-16) 0 var(--sp-12); }

  .hero__badge { font-size: 0.65rem; }

  .hero__stats {
    gap: var(--sp-6);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Categories */
  #categorias { padding: var(--sp-12) 0; }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .category-card { padding: var(--sp-4) var(--sp-3); }
  .category-card__icon { width: 48px; height: 48px; font-size: 1.3rem; }

  /* Catalog */
  #catalogo { padding: var(--sp-12) 0; }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .product-card__icon { height: 100px; font-size: 2.8rem; }

  /* Benefits */
  #beneficios { padding: var(--sp-12) 0; }

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

  /* How to buy */
  #como-comprar { padding: var(--sp-12) 0; }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .step-card {
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: var(--sp-4);
  }

  .step-card__number {
    margin: 0;
    flex-shrink: 0;
  }

  .step-card__content { flex: 1; }

  /* Location */
  #ubicacion { padding: var(--sp-12) 0; }

  /* CTA */
  #cta { padding: var(--sp-16) 0; }
  .cta__actions { flex-direction: column; align-items: center; }
  .cta__actions .btn { width: 100%; max-width: 300px; }

  /* Footer */
  #site-footer { padding: var(--sp-10) 0 var(--sp-6); }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Section titles */
  .section-header { margin-bottom: var(--sp-8); }

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

/* ── Small Mobile (≤ 480px) ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }

  /* Categories: single column on very small screens */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Products: single column */
  .products-grid {
    grid-template-columns: 1fr;
  }

  /* Benefits: single column */
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  /* Filter buttons: scrollable row */
  .catalog-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .catalog-filters::-webkit-scrollbar { display: none; }

  .filter-btn { flex-shrink: 0; }

  /* Hero actions stacked */
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Location items */
  .location-item { gap: var(--sp-3); }
  .location-item__icon { width: 38px; height: 38px; font-size: 1.1rem; }

  /* Card footer wrap */
  .product-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .product-card__footer .btn {
    width: 100%;
    justify-content: center;
  }
}