/* Diseño responsive compartido para todas las páginas públicas. */
html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; }

@media (max-width: 1100px) {
    .site-header .navbar { padding-left: 32px; padding-right: 32px; }
    .site-header .menu { gap: 12px; }
    .site-header .menu li { padding-left: 8px; padding-right: 8px; }

    .products { padding-left: 32px; padding-right: 32px; }
    .product-container { gap: 20px; }
    .card-img-container { height: 410px; }
    .insta-gallery { padding-left: 6%; padding-right: 6%; }
    .history-content { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 768px) {
    .site-header .navbar { height: 72px; padding: 0 20px; }
    .site-header .logo img { width: 112px; }
    .site-header .icons { display: none; }
    .site-header .hamburger { display: flex; }
    .site-header .menu {
        top: 72px;
        height: calc(100dvh - 72px);
        gap: 8px;
        padding-top: 34px;
    }
    .site-header .menu li { padding: 14px; }
    .site-header .menu a { font-size: 12px; letter-spacing: 3px; }

    .hero { min-height: 640px; height: 100svh; }
    .hero-content { width: min(92%, 460px); }
    .hero-content p { font-size: 10px; letter-spacing: 5px; line-height: 1.7; }
    .hero-content h1 { font-size: clamp(48px, 16vw, 78px); letter-spacing: 7px; }
    .hero-content .btn-primary { padding: 15px 28px; font-size: 10px; letter-spacing: 3px; }

    .products { padding: 76px 18px 60px; }
    .products h2 { font-size: 22px; letter-spacing: 5px; margin-bottom: 34px; }
    .product-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .card { width: auto; margin: 0; }
    .card-img-container { height: clamp(250px, 62vw, 380px); }
    .card h3 { font-size: 11px; letter-spacing: 2px; margin-top: 13px; }
    .card p { font-size: 11px; margin-top: 6px; }

    .insta-gallery, .instagram-section { padding: 65px 18px; }
    .insta-gallery h2, .ig-header h2 { font-size: 21px; letter-spacing: 5px; }
    .insta-subtitle, .ig-header p { font-size: 9px; letter-spacing: 2px; line-height: 1.7; margin-bottom: 32px; }
    .insta-grid, .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .product-detail-section { padding: 104px 18px 56px; gap: 32px; }
    .product-detail-info h1 { font-size: 25px; letter-spacing: 3px; }
    .product-detail-info .price { font-size: 20px; }
    .product-detail-info .description { font-size: 12px; line-height: 1.7; }
    .size-btn { min-width: 52px; padding: 12px 14px; }
    .add-cart-btn { padding: 17px 10px; letter-spacing: 2px; }

    .history-hero { min-height: 470px; height: 68svh; }
    .history-overlay h1 { letter-spacing: 7px; }
    .history-overlay p { letter-spacing: 3px; line-height: 1.8; }
    .history-content { margin: 65px auto; padding: 0 20px; gap: 34px; }
    .history-text h2 { font-size: 24px; letter-spacing: 5px; margin-bottom: 20px; }
    .history-text p { font-size: 14px; line-height: 1.75; }

    .site-footer { padding: 42px 20px 28px; }
    .site-footer .footer-content { gap: 28px; }
    .site-footer .footer-column { min-width: 0; width: 100%; }
    .site-footer .footer-logo img { width: 135px; }
    .site-footer .copyright { margin-top: 28px; font-size: 10px; }
}

@media (max-width: 420px) {
    .product-container { grid-template-columns: 1fr; gap: 26px; }
    .card-img-container { height: min(120vw, 460px); }
    .insta-grid, .ig-grid { grid-template-columns: 1fr; }
    .carousel-arrow { width: 38px; height: 38px; }
    .cart-drawer { max-width: 100vw; width: 100%; }
}