/* ==========================================================================
   LOLA TORRENTE SPA - ULTRA PRO MOBILE FRAMEWORK
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL RESETS & SMOOTHING
   -------------------------------------------------------------------------- */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fluid Media Protection */
img, picture, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* Premium Tap Highlight Response */
button, input, select, textarea, a {
    -webkit-tap-highlight-color: rgba(216, 178, 106, 0.15);
}

/* --------------------------------------------------------------------------
   2. DESKTOP HIDING UTILITIES
   -------------------------------------------------------------------------- */
.hamburger-btn,
.mobile-nav,
.mobile-nav-overlay {
    display: none;
}

/* ==========================================================================
   CORE BREAKPOINT (MAX-WIDTH: 900px)
   ========================================================================== */
@media (max-width: 900px) {
    
    /* Layout Reset */
    body, main, section, article, header, footer, nav, div {
        min-width: 0;
    }

    /* Standardized Mobile Padding */
    body > header:not(.hero-masajes):not(.header-producto),
    .nav-detalle, .nav-simple, .nav-back, .breadcrumb,
    .about-section, .nuestros-centros, .cta-mimarte, .seccion-masajes,
    .intro-seccion, .contenedor-producto, .product-container, .container,
    .gift-section, .product-details, .contenedor-reserva, .contenedor-servicios,
    .contenedor-vip, .footer-negro, .main-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --------------------------------------------------------------------------
       3. PREMIUM MOBILE NAVIGATION & HEADER
       -------------------------------------------------------------------------- */
    body > header:not(.hero-masajes):not(.header-producto) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 70px;
        gap: 0 !important;
    }

    .nav-simple, .nav-detalle, .nav-back {
        min-height: 64px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-left {
        display: flex !important;
        align-items: center !important;
        flex: 1;
    }
    .nav-left > a { display: none !important; } /* Hide desktop links */

    .logo-center {
        flex: 0 1 auto;
        text-align: center !important;
        max-width: 100%;
        line-height: 1.25;
        white-space: normal;
    }

    .nav-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1;
    }

    /* Advanced Micro-animated Hamburger */
    .hamburger-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 99999;
    }

    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 1.5px;
        background: #d8b26a;
        border-radius: 4px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }

    .hamburger-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Luxury Off-Canvas Menu */
    .mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(85vw, 320px);
        height: 100dvh;
        background: rgba(10, 9, 8, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-left: 1px solid rgba(216, 178, 106, 0.12);
        z-index: 99990;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 40px 24px;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-nav.is-open { right: 0; }

    .mobile-nav a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 18px 0;
        font-family: 'Jost', sans-serif;
        font-size: 0.85rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        border-bottom: 1px solid rgba(216, 178, 106, 0.08);
        transition: color 0.3s ease;
    }
    .mobile-nav a:last-child { border-bottom: none; color: #d8b26a; }
    .mobile-nav a:hover { color: #d8b26a; }

    .mobile-nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99989;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; }

    /* --------------------------------------------------------------------------
       4. TYPOGRAPHY SYSTEM (FLUID & READABLE)
       -------------------------------------------------------------------------- */
    .main-title, .detalle-titulo, .titulo-principal, .titulo-producto, 
    .product-title, .product-info-short h1, .hero-overlay h1, 
    .hero-banner h1, .header-producto h1, .gift-title {
        font-size: clamp(1.9rem, 7.5vw, 2.5rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    .subtitle, .intro-seccion p, .description, .descripcion, .detalle-item p {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }

    .btn-contacto-top {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* --------------------------------------------------------------------------
       5. RESPONSIVE GRID SYSTEMS
       -------------------------------------------------------------------------- */
    .about-section, .detalle-grid, .footer-top, .footer-container, 
    .product-container, .product-hero, .seccion-hero, .header-producto, 
    .grid-info-tecnica, .contenedor-vip, .gift-content, .locations-grid,
    .contenedor-grid, .centros-grid, .contenedor-sub-grid, 
    .grid-fotos-galeria, .cards-grid, .treatments-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .contenedor-sub-grid { margin-bottom: 50px !important; }

    /* --------------------------------------------------------------------------
       6. PREMIUM LUXURY CARDS (MASAJES / CENTROS / VIP)
       -------------------------------------------------------------------------- */
    .centro-card, .tarjeta-masaje, .tarjeta-sub, .tarjeta-vip, 
    .treatment-card, .gift-card, .location-card, .tarjeta-categoria {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    /* Unified Perfect Aspect-Ratio (Golden Horizontal Display) */
    .tarjeta-categoria,
    .seccion-masajes .tarjeta-masaje,
    .tarjeta-vip,
    .centro-card {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
    }

    .tarjeta-categoria img,
    .seccion-masajes .tarjeta-masaje img,
    .tarjeta-vip img,
    .centro-card img,
    .grid-fotos-galeria img,
    .img-marco img,
    .galeria-img img,
    .main-img-wrapper img,
    .product-image img,
    .image-showcase img,
    .gift-card-img,
    .hero-producto img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* High-End Cinematic Text Overlays */
    .capa-texto,
    .tarjeta-masaje .info-overlay,
    .tarjeta-categoria .texto-overlay,
    .tarjeta-masaje .capa-texto {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        /* Dynamic gradient for crystal clear text readability */
        background: linear-gradient(to top, rgba(10, 9, 8, 0.85) 0%, rgba(10, 9, 8, 0.3) 60%, rgba(10, 9, 8, 0.1) 100%) !important;
        padding: 24px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .capa-texto h3, .tarjeta-masaje h3, .tarjeta-categoria h3, .capa-texto h2 {
        font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        color: #ffffff !important;
        margin: 0 !important;
        font-weight: 500 !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    /* --------------------------------------------------------------------------
       7. HERO & BANNER CORE REPAIRS
       -------------------------------------------------------------------------- */
    .hero {
        min-height: 620px !important;
        height: auto !important;
        padding: 140px 20px 60px !important;
        align-items: flex-end !important;
        background-position: center !important;
    }
    .hero-content { width: 100%; max-width: 620px; text-align: center; }

    /* iOS Fixed Background Crash Prevention */
    .hero-section, .hero-banner, .hero-masajes {
        background-attachment: scroll !important;
        height: auto !important;
        min-height: 240px !important;
        padding: 80px 20px !important;
    }

    /* Image Showcase Resets */
    .grid-fotos-galeria img, .img-marco, .galeria-img, .main-img-wrapper, .product-image {
        aspect-ratio: 16 / 10 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .image-showcase { position: relative !important; top: auto !important; }
    .image-stack {
        display: grid !important;
        gap: 16px !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }
    .img-top, .img-bottom {
        position: static !important;
        width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        border-radius: 14px !important;
        transform: none !important;
    }

    /* --------------------------------------------------------------------------
       8. BUTTONS & ACTIONS (ULTRA-RESPONSIVE)
       -------------------------------------------------------------------------- */
    .btn-comprar, .btn-purchase, .btn-buy, .btn-entrar, .btn-regresar, 
    .btn-back, .btn-volver, .footer-cta, .map-placeholder button, .open-settings {
        min-height: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    .btn-comprar, .btn-purchase, .btn-buy {
        padding: 14px 24px !important;
        border-radius: 40px !important;
        letter-spacing: 2px !important;
        font-size: 0.8rem !important;
        text-transform: uppercase;
    }

    .btn-entrar {
        max-width: 290px !important;
        margin: 0 auto !important;
    }

    /* Product Specs & Info */
    .product-subtitle, .duration, .duracion-texto, .estimated-time,
    .price, .price-tag, .precio-tag, .bloque-compra, .product-info, 
    .product-info-short, .info-cuerpo, .product-details, .info-section {
        text-align: center !important;
    }

    .meta-info {
        justify-content: center !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .price, .price-tag, .precio-tag {
        font-size: clamp(1.9rem, 7vw, 2.4rem) !important;
        margin: 8px auto !important;
    }

    .info-section h3::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .list-items li, .list-benefits li, .lista-pro li { text-align: left !important; }

    /* Map Elements */
    .detalle-mapa, .map-container {
        position: relative !important;
        top: auto !important;
        height: 300px !important;
        border-radius: 14px !important;
    }

    .social-icons, .social-icons-footer, .legal-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   MICRO-BREAKPOINT (MAX-WIDTH: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .titulo-principal { margin-bottom: 28px !important; letter-spacing: 2px !important; }

    .about-section, .nuestros-centros, .seccion-masajes {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .stats-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .instalaciones-section {
        min-height: 380px !important;
        padding: 60px 20px !important;
    }

    /* --------------------------------------------------------------------------
       9. ADVANCED COMPACT CHATBOT WIDGET
       -------------------------------------------------------------------------- */
    #chatbot-widget { right: 16px !important; bottom: 16px !important; z-index: 20000 !important; }
    #chatbot-toggle {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
    }

    #chatbot-window {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 84px !important;
        width: auto !important;
        max-width: none !important;
        height: min(70vh, 520px) !important;
        border-radius: 16px !important;
        transform: translateY(20px) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
    }
    #chatbot-window.open { transform: translateY(0) !important; }

    #chatbot-header { padding: 14px 16px !important; }
    .chatbot-title span { font-size: 14px !important; }
    #chatbot-messages { padding: 14px !important; gap: 10px !important; }

    .bot-message, .user-message {
        max-width: 90% !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        border-radius: 14px !important;
    }

    #chatbot-options { padding: 8px !important; gap: 6px !important; }
    .quick-btn { min-height: 36px !important; padding: 6px 12px !important; font-size: 12px !important; }
    #chatbot-input-area { padding: 10px !important; }
    #chatbot-input { padding: 10px 14px !important; font-size: 14px !important; }
    #chatbot-send { min-width: 65px !important; font-size: 13px !important; }
}

/* ==========================================================================
   ULTRA-COMPACT MOBILE BREAKPOINT (MAX-WIDTH: 420px)
   ========================================================================== */
@media (max-width: 420px) {
    body > header:not(.hero-masajes):not(.header-producto) { padding-top: 12px !important; }
    .logo-center { font-size: 0.75rem !important; letter-spacing: 0.5px !important; }
    
    .btn-contacto-top {
        width: 100%;
        max-width: 210px;
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
    }

    .tarjeta-categoria, .seccion-masajes .tarjeta-masaje, .tarjeta-vip, .centro-card {
        aspect-ratio: 16 / 10 !important; /* Lock consistency across micro displays */
    }
}

/* --------------------------------------------------------------------------
   10. TOUCH-ACCESSIBILITY OVERRIDES (PREVENTS STICKY HOVERS ON MOBILE)
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .tarjeta-masaje:hover img,
    .centro-card:hover img,
    .main-img-wrapper:hover img,
    .product-image img:hover,
    .img-marco:hover img,
    .galeria-img:hover img {
        transform: none !important;
        transition: none !important;
    }
}