/* ============================================================
   responsive.css — Media queries completos
   Breakpoints: 1280 · 1024 · 768 · 480
   ============================================================ */

/* ══════════════════════════════════════════
   ≤ 1280px — Large tablets / small desktops
   ══════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Modal specs 2 cols */
  .modal-specs { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════
   ≤ 1024px — Tablets horizontales
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Nav: ocultar links desktop */
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }

  .nav__mobile-menu {
    display: flex; /* visible cuando .nav--open */
  }

  /* Fix crítico: el logo mezcal tiene translateX(-400px) en inline style del HTML.
     Sin este override queda fuera de pantalla en tablet. */
  .hero__logo-wrap img[alt="Mezcal"] {
    transform: translateX(0) !important;
    width: 180px !important;
  }

  /* Grid colección: responsive manejado en alebrijes.css (Mobile First) */

  /* Process: 2x2 */
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .process__steps::before { display: none; }

  /* Footer 2 cols */
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
  }

  /* Countdown */
  .countdown__display { gap: var(--space-4); }
  .countdown__number  { font-size: clamp(2.5rem, 6vw, 5rem); padding: var(--space-4) var(--space-5); }

  /* Modal */
  .modal-header { grid-template-columns: 110px 1fr; gap: var(--space-5); }
  .modal-specs  { grid-template-columns: repeat(2, 1fr); }
  .modal-proceso__steps { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   ≤ 768px — Tablets verticales / móvil grande
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero -> stack vertical */
  .hero { padding: var(--space-24) var(--gutter) var(--space-12); }
  .hero__logo { max-width: 280px; }

  /* Hero bottom stage: ocultar imágenes de agave laterales en móvil,
     el texto no cabe entre ellas a 375-768px */
  .hero__tagline-reveal img { display: none; }
  .hero__tagline-reveal { justify-content: center; }

  /* Stats: 3 en fila */
  .hero__stats { gap: var(--space-6); }
  .hero__stat-number { font-size: var(--text-xl); }

  /* Grid colección: 1 col en base, manejado en alebrijes.css (Mobile First) */

  /* Modal: padding reducido */
  .modal-overlay { padding: var(--space-3); }
  .modal-body    { padding: var(--space-6) var(--space-6) var(--space-6); }
  .modal-header  {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .modal-header__img-wrap { margin: 0 auto; }
  .modal-header__tags { justify-content: center; }
  .modal-specs { grid-template-columns: repeat(2, 1fr); }

  /* Process: columna única */
  .process__steps { grid-template-columns: 1fr; }

  /* Countdown: números pequeños */
  .countdown__number { font-size: clamp(2rem, 10vw, 4rem); padding: var(--space-3) var(--space-4); }
  .countdown__display { gap: var(--space-3); }
  .countdown__sep { font-size: clamp(2rem, 8vw, 4rem); }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__brand { flex-direction: column; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* Cart panel */
  #cart-panel { max-width: 100%; }
}

/* ══════════════════════════════════════════
   ≤ 480px — Móvil pequeño
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --gutter: 1.25rem; }

  .hero { padding-top: var(--space-20); }
  .hero__logo { max-width: 240px; }

  .section-title { font-size: var(--text-2xl); }

  /* Modal specs: 1 col */
  .modal-specs { grid-template-columns: 1fr; }

  /* Modal body: menos padding */
  .modal-body { padding: var(--space-5); }

  /* Countdown */
  .countdown__display { flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
  .countdown__sep:nth-child(4) { display: none; } /* ocultar último sep */
  .countdown__number { font-size: clamp(1.8rem, 12vw, 3.5rem); }

  /* Hero CTA */
  .hero__ctas { flex-direction: column; align-items: center; width: 100%; }
  .btn--primary, .btn--ghost { width: 100%; text-align: center; justify-content: center; }

  /* Footer legal */
  .footer__legal-links { flex-wrap: wrap; gap: var(--space-3); }
}

/* ══════════════════════════════════════════
   Reducción de movimiento
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__alebrije { animation: none !important; }
  .product-card:hover { transform: none; }
  .hero__scroll-line { animation: none; }
  .countdown__sep { animation: none; }
  .product-card__aura { display: none; }
}