/* ============================================================
   MamiBaby - Responsive / Mobile-First
   Breakpoints: xs<576, sm>=576, md>=768, lg>=992, xl>=1200
   ============================================================ */

/* ---- Tablet Grande (max 1200px) ---- */
@media (max-width: 1200px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid-5 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet (max 992px) ---- */
@media (max-width: 992px) {
  .main-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .header-search input { width: 120px; }
  .hero-content { padding: 2rem 1.5rem; }
  .hero-title { font-size: 2rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar {
    position: static;
    display: none;
  }
  .catalog-sidebar.mobile-open { display: block; }
  .product-detail-layout { grid-template-columns: 1fr; gap: 2rem; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Mobile Grande (max 768px) ---- */
@media (max-width: 768px) {
  .top-bar { font-size: 0.75rem; }
  .header-inner { padding: 0.75rem 1rem; }
  .site-logo img { height: 40px; }
  .header-search { display: none; }
  .hero-section, .hero-slide { min-height: 60vh; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(253,250,247,0.6) 0%, rgba(253,250,247,0.92) 60%);
  }
  .hero-content {
    padding: 2rem 1rem;
    max-width: 100%;
    text-align: center;
  }
  .hero-desc { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .benefits-inner { gap: 1.25rem; }
  .benefit-item { font-size: 0.8rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .products-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; border-radius: var(--radius-md); }
  .newsletter-form input { border-radius: var(--radius-md); }
  .newsletter-form button { border-radius: var(--radius-md); }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .product-actions { flex-direction: column; }
  .values-grid { grid-template-columns: 1fr; }
  .countdown-timer { gap: 0.75rem; }
  .countdown-unit { min-width: 55px; padding: 0.5rem 0.75rem; }
  .countdown-number { font-size: 1.4rem; }
  .section-pad { padding: 2.5rem 0; }
  .container, .container-xl { padding: 0 1rem; }
}

/* ---- Mobile Pequeño (max 576px) ---- */
@media (max-width: 576px) {
  .hero-title { font-size: 1.6rem; }
  .hero-desc { font-size: 0.9rem; }
  .btn-lg { padding: 0.85rem 1.75rem; font-size: 0.95rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .category-card { aspect-ratio: 2/3; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .product-card-body { padding: 0.75rem; }
  .product-card-name { font-size: 0.85rem; }
  .price-current { font-size: 0.95rem; }
  .trust-grid { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .cart-item-img { width: 70px; height: 85px; }
  .benefits-inner { gap: 0.75rem; }
  .benefit-item { font-size: 0.75rem; }
  .benefit-item i { font-size: 1.1rem; }
  .section-title { font-size: 1.4rem; }
  .about-hero { padding: 3rem 0; }
}

/* ---- Sticky Mobile Footer CTA ---- */
@media (max-width: 768px) {
  .mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 0.75rem 1rem;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
    display: flex;
    gap: 0.5rem;
    z-index: 100;
  }
  .mobile-sticky-cta .btn { flex: 1; padding: 0.75rem; font-size: 0.88rem; }
  body.has-sticky-cta { padding-bottom: 80px; }
}

/* ---- Lazy Load ---- */
img[data-src] { opacity: 0; transition: opacity 0.3s ease; }
img.loaded { opacity: 1; }

/* ---- Animaciones de entrada ---- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Print ---- */
@media print {
  .site-header, .site-footer, .mobile-sticky-cta { display: none; }
  body { font-size: 12pt; }
}