/* =====================================================
   RESPONSIVE - Milintegral
   Mobile-first breakpoints
   ===================================================== */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content { max-width: 100%; }
  .hero-buttons { justify-content: center; }
  .hero-visual { display: flex; }
  .hero-actions-grid { grid-template-columns: 1fr 1fr; }
  .hero-image-wrapper { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .store-layout { grid-template-columns: 220px 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .story-image { order: -1; }
  .story-image img { height: 280px; }
  .location-grid { grid-template-columns: 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Mobile grande (≤ 768px) */
@media (max-width: 768px) {
  :root { --space-3xl: 2.5rem; }

  /* Nav */
  .nav-menu { display: none; }
  .menu-toggle { display: flex; }
  .header-actions .cart-btn span { display: none; }
  /* Logo slightly smaller on mobile */
  .header-logo-img, .header-logo img { height: 48px; }
  /* Ocultar label y flecha del user-menu en mobile, dejar solo el ícono */
  .user-menu-label, .user-menu-arrow { display: none; }
  .user-menu-btn { padding: 7px 10px; border-radius: 50%; }
  /* El dropdown del user-menu en mobile va a la izquierda */
  .user-dropdown { right: auto; left: 0; min-width: 200px; }

  /* Hero */
  .hero { min-height: 80vh; padding: 2rem 0; }
  .hero-title { font-size: 2rem; }
  .hero-logo-banner { padding: 2rem 0.5rem 1rem; }
  .hero-logo-banner img { height: 170px; width: auto; max-width: 92vw; }

  /* Store */
  .store-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }

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

  /* News */
  .news-grid { grid-template-columns: 1fr; }

  /* Sales points */
  .sales-points-grid { grid-template-columns: 1fr; }

  /* Cart */
  .cart-item { grid-template-columns: 60px 1fr; }
  .cart-item-price { grid-column: 2; }
  .order-summary { position: static; }

  /* Checkout */
  .checkout-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* Mobile pequeño (≤ 480px) */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }

  .hero-title { font-size: 1.7rem; }
  .hero-logo-banner { padding: 1.5rem 0.5rem 0.75rem; }
  .hero-logo-banner img { height: 150px; width: auto; max-width: 96vw; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-actions-grid { grid-template-columns: 1fr; }
  .hero-action-card.hero-action-primary { padding: 14px; }

  .section-title { font-size: 1.5rem; }

  .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .product-card-body { padding: 0.75rem; }
  .product-card-name { font-size: 0.88rem; }

  .btn-lg { padding: 14px 24px; }

  .modal-box { margin: 1rem; border-radius: 12px; }

  .add-to-cart-block { flex-direction: column; }
  .add-to-cart-block .btn { width: 100%; }

  .page-header h1 { font-size: 1.7rem; }

  .timeline { padding-left: 28px; }

  .toast { min-width: 240px; max-width: 94vw; }
  .toast-container { right: 10px; left: 10px; }
}

/* =====================================================
   PRINT
   ===================================================== */
@media print {
  .site-header, .site-footer, .whatsapp-float,
  .toast-container, .modal-overlay, .btn,
  .filter-panel, .order-summary { display: none !important; }
  body { padding-top: 0; }
}