/* Estilos compartidos - Pastelería Flores */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-gradient {
    background: linear-gradient(to right, rgba(249, 249, 255, 0.95) 30%, rgba(249, 249, 255, 0.6) 100%);
}
.text-shadow-subtle {
    text-shadow: 0 2px 4px rgba(0, 136, 204, 0.05);
}

/* Evitar desbordamiento horizontal en móviles */
html {
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden;
}

/* Tipografía responsive */
@media (max-width: 768px) {
    .text-headline-xl {
        font-size: 2rem !important;
        line-height: 2.5rem !important;
        letter-spacing: -0.01em !important;
    }
    .text-headline-lg {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    .text-headline-md {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    .hero-gradient {
        background: linear-gradient(
            to bottom,
            rgba(249, 249, 255, 0.97) 0%,
            rgba(249, 249, 255, 0.82) 45%,
            rgba(249, 249, 255, 0.55) 100%
        );
    }
    section.py-24,
    section.py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .min-h-\[85vh\] {
        min-height: 70vh;
    }
    .h-\[500px\] {
        height: 22rem;
    }
    .rounded-\[3rem\] {
        border-radius: 1.5rem;
    }
    .aspect-video.rounded-\[3rem\] {
        border-radius: 1.25rem;
    }
    nav img.h-16 {
        height: 3rem;
    }
    footer img.h-24 {
        height: 4.5rem;
    }
}

/* Menú móvil */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(17, 28, 44, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 95;
    width: min(100%, 20rem);
    max-width: 100vw;
    height: 100%;
    height: 100dvh;
    background: #f9f9ff;
    box-shadow: -8px 0 32px rgba(0, 97, 147, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.mobile-nav-overlay.mobile-nav-open,
.mobile-nav-panel.mobile-nav-open {
    opacity: 1;
    visibility: visible;
}
.mobile-nav-panel.mobile-nav-open {
    transform: translateX(0);
}
.mobile-nav-body-lock {
    overflow: hidden;
    touch-action: none;
}

/* Carrito a pantalla completa en móviles muy pequeños */
@media (max-width: 480px) {
    #cartDrawer,
    #cart-sidebar,
    .cart-sidebar {
        max-width: 100% !important;
    }
}

/* Botón flotante WhatsApp en móvil */
.mobile-wa-fab {
    display: none;
}
@media (max-width: 767px) {
    .mobile-wa-fab {
        display: flex;
        position: fixed;
        bottom: 1.25rem;
        right: 1.25rem;
        z-index: 40;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 9999px;
        background: #006193;
        color: #fff;
        box-shadow: 0 4px 20px rgba(0, 97, 147, 0.35);
        transition: transform 0.2s ease;
    }
    .mobile-wa-fab:active {
        transform: scale(0.95);
    }
    body.mobile-nav-body-lock .mobile-wa-fab {
        display: none;
    }
}