/* =========================================
   1. HEADER TRANSPARENTE OSCURO
   ========================================= */

.site-header {
    background-color: rgba(58, 125, 241, 0.824); 
    position: absolute; 
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    /* 🔥 AQUÍ ESTÁ EL CAMBIO: Borde azul fino en la parte de abajo 🔥 */
    border-bottom: 1px solid #007bff; 
    transition: background-color 0.3s ease;
}

/* =========================================
   2. LOGO
   ========================================= */

.site-branding .custom-logo-link img {
    max-width: 120px; 
    height: auto;
    display: block;
}

/* =========================================
   3. MENÚ DE NAVEGACIÓN (Escritorio - ALINEACIÓN FINA)
   ========================================= */

.main-navigation ul li a {
    color: var(--color-white) !important;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.9rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s ease;
    
    /* AQUÍ ESTÁ EL TRUCO: */
    position: relative;
    top: 2px;
    
    padding: 5px 0;
}

.main-navigation ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s;
    margin-top: 5px;
}

.main-navigation ul li a:hover::after {
    width: 100%;
}

.main-navigation ul li a:hover {
    color: var(--color-tertiary) !important;
}

/* =========================================
   4. BOTÓN 'MENU' (CUADRADO Y ELEGANTE)
   ========================================= */

.btn-gift-card {
    background-color: transparent; 
    color: var(--color-white) !important;
    font-family: var(--font-main);
    font-weight: 600; 
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    
    /* Altura y Relleno */
    padding: 11px 25px; 
    line-height: 1;     
    
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    
    border: 1px solid var(--color-primary); 
    border-radius: 0px; /* Cuadrado */
    transition: all 0.3s ease;
}

.btn-gift-card:hover {
    background-color: var(--color-primary); 
    border-color: var(--color-primary);
    color: var(--color-white) !important;
}

/* =========================================
   5. BOTÓN HAMBURGUESA
   ========================================= */
.menu-toggle {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 12px;
    border-radius: 4px; 
}

/* =========================================
   6. AJUSTE DE LOGO EN MÓVIL
   ========================================= */

@media screen and (max-width: 768px) {
    .site-branding .custom-logo-link img {
        max-width: 100px; 
    }
    .site-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* =========================================
   7. MENÚ MÓVIL DESPLEGABLE
   ========================================= */

.mobile-menu-active, 
.mobile-menu-closing {
    background-color: rgba(11, 17, 13, 0.98); 
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    height: 100vh; 
    padding: 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    z-index: 999;
    overflow: hidden; 

    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding-top: 60px; 
    gap: 40px; 
}

.mobile-menu-active { animation: slideDownMenu 0.4s ease-out forwards; }
.mobile-menu-closing { animation: slideUpMenu 0.4s ease-in forwards; }

@keyframes slideDownMenu { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUpMenu { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }

.mobile-menu-active ul,
.mobile-menu-closing ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mobile-menu-active ul li a,
.mobile-menu-closing ul li a {
    font-size: 1.2rem; 
    display: block;
    width: 100%;
    text-align: center;
}

.mobile-menu-active .btn-gift-card,
.mobile-menu-closing .btn-gift-card {
    width: 200px;
    text-align: center;
    padding: 12px;
}



/* =========================================
   1. HERO VIDEO - FIX PANTALLA COMPLETA MÓVIL
   ========================================= */

#hero-video {
    --logo-width: 400px;
    --title-size: 3.8rem;
    --desc-size: 1.3rem;
    
    position: relative;
    width: 100%;
    
    /* 🔥 FIX DEFINITIVO PARA MÓVIL (Le gana al vh-100 de Bootstrap) 🔥 */
    height: 100dvh !important; 
    min-height: 100dvh !important; 
    
    background-color: #000;
}

.hero-bg-video, 
.hero-overlay {
    height: 100% !important;
    min-height: 100dvh !important;
    object-fit: cover;
}

/* --- LOGO Y TEXTOS DEL HERO --- */
.hero-logo {
    width: var(--logo-width);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); 
}

#hero-video .hero-title {
    font-size: var(--title-size);
    color: #ffffff;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

#hero-video .hero-description {
    font-size: var(--desc-size);
    max-width: 850px;
    color: #f0f0f0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* --- BOTONES DEL HERO --- */
.btn-hero {
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 220px;
    text-align: center;
}

#hero-video .btn-hero-primary { background-color: var(--color-primary, #4c8fff); border: 1px solid var(--color-primary, #4c8fff); color: #ffffff; }
#hero-video .btn-hero-outline { background-color: transparent; border: 2px solid #ffffff; color: #ffffff; }

/* --- RESPONSIVE HERO --- */
@media (max-width: 768px) {
    #hero-video {
        --logo-width: 280px;   
        --title-size: 2.2rem;
        --desc-size: 1rem;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
    .btn-hero { width: 100%; max-width: 280px; margin: 0 auto; padding: 12px 20px; }
    #hero-video .container { padding-top: 60px; padding-bottom: 60px; }
}

/* Animaciones del Hero */
.animate-up { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s ease forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }


/* =========================================
   2. SECCIÓN INTRO BLUE + 2 CARDS CENTRADAS
   ========================================= */

#intro-blue {
    background-color: #0a1a3c; 
    color: #ffffff;
    min-height: auto; 
    display: block;
    position: relative;
    padding-bottom: 100px;
}

.intro-bg { background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0; }
.intro-overlay { z-index: 1; background: rgba(0, 0, 0, 0.3); }

.section-tagline { font-size: clamp(1.2rem, 3vw, 1.6rem); letter-spacing: 3px; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); line-height: 1.4; }
.section-desc { font-size: 1.15rem; font-weight: 300; line-height: 1.8; max-width: 750px; color: rgba(255, 255, 255, 0.9); }

/* --- ESTILOS DE LAS CARDS --- */
.featured-item {
    position: relative;
    height: 450px;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 12px !important; 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-item:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important; }

.featured-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

.featured-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%);
    transition: background 0.5s ease;
    z-index: 1;
}

.featured-content { position: relative; z-index: 2; text-align: center; width: 100%; padding: 0 20px; }

.featured-title {
    color: #ffffff;
    font-size: 2.2rem; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7);
    transition: all 0.4s ease;
}

.btn-featured {
    display: inline-block;
    background-color: #4c8fff; 
    color: #ffffff;
    padding: 14px 35px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1.5px;
    border-radius: 4px;
    opacity: 0; 
    transform: translateY(20px);
    transition: all 0.4s ease;
    font-size: 0.85rem;
}

.featured-item:hover .featured-bg { transform: scale(1.15); }
.featured-item:hover .featured-overlay { background: rgba(0, 0, 0, 0.6); }
.featured-item:hover .featured-title { transform: translateY(-10px); }
.featured-item:hover .btn-featured { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE CARDS --- */
@media (max-width: 768px) {
    .featured-item { height: 350px; margin-bottom: 10px; }
    .featured-title { font-size: 1.8rem; }
}



/* =========================================
   9. SECCIÓN INTRO BLUE + SLIDER BANNERS
   ========================================= */

#intro-blue {
    background-color: #0a1a3c; 
    color: #ffffff;
    min-height: auto; 
    display: block;
    position: relative;
    padding-bottom: 100px;
}

.intro-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.intro-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, 0.3); 
}

.section-tagline {
    font-size: clamp(1.2rem, 3vw, 1.6rem); 
    letter-spacing: 3px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    line-height: 1.4;
}

.section-desc {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.8;
    max-width: 750px;
    color: rgba(255, 255, 255, 0.9);
}

/* --- ESTILOS DEL SLIDER BANNERS --- */
.featured-item {
    position: relative;
    height: 500px; 
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px; 
}

.featured-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.featured-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0) !important; 
    z-index: 1;
}

/* 🔥 CANDADO ANTI-HOVER: Forzamos a que NADA pase cuando pones el puntero 🔥 */
.featured-item:hover,
.featured-item:focus,
.featured-item:active {
    transform: none !important;
    box-shadow: none !important; 
}

.featured-item:hover .featured-bg,
.featured-item:focus .featured-bg,
.featured-item:active .featured-bg { 
    transform: none !important; 
}

.featured-item:hover .featured-overlay,
.featured-item:focus .featured-overlay,
.featured-item:active .featured-overlay { 
    background: rgba(0, 0, 0, 0) !important; 
}

/* MEJORA DE LAS FLECHAS DEL CARRUSEL */
#servicesCarousel .carousel-control-prev,
#servicesCarousel .carousel-control-next {
    opacity: 0.9; 
    width: 10%; 
}

#servicesCarousel .carousel-control-prev-icon,
#servicesCarousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 50%; 
    width: 45px; 
    height: 45px; 
    background-size: 20px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); 
    transition: all 0.2s ease;
}

#servicesCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#servicesCarousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.8); 
    transform: scale(1.1); 
}

/* --- RESPONSIVE FIX --- */

/* 🔥 1. AJUSTE PARA TABLETS Y MÓVILES (Hasta 991px) 🔥 */
@media (max-width: 991px) {
    .featured-item {
        height: auto;
        /* Al aplicar esto, el banner respeta su forma original sin cortarse */
        aspect-ratio: 16 / 9; 
    }
}

/* 🔥 2. AJUSTE DE FLECHAS SOLO PARA CELULARES (Hasta 767px) 🔥 */
@media (max-width: 767px) {
    #servicesCarousel .carousel-control-prev-icon,
    #servicesCarousel .carousel-control-next-icon {
        width: 30px; 
        height: 30px;
        background-size: 14px; 
        background-color: rgba(0, 0, 0, 0.3); 
    }
    
    #servicesCarousel .carousel-control-prev { left: 0; }
    #servicesCarousel .carousel-control-next { right: 0; }
    
    #servicesCarousel .carousel-control-prev,
    #servicesCarousel .carousel-control-next {
        opacity: 0.6;
    }
}








/* =========================================
   ABOUT & HOURS SECTION: MODERN ARCHITECT (Fondo Claro + Acento Amarillo)
   ========================================= */

#lolas-about-hours-architect {
    background-color: var(--bg-light); /* Gris muy suave (#f8f9fa) para una transición perfecta */
    color: var(--text-main); /* Gris oscuro para el texto base */
    padding: 100px 0;
}

/* --- LADO IZQUIERDO: ABOUT US --- */
#lolas-about-hours-architect .cta-pretitle {
    color: var(--color-primary) !important; /* 🔥 CAMBIO: Amarillo para conectar con la sección de arriba */
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 15px;
    display: block;
}

#lolas-about-hours-architect .cta-title {
    color: var(--color-secondary) !important; /* Negro Profundo / Azul Oscuro para el título */
    font-size: clamp(2.5rem, 4vw, 3rem) !important;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
}

#lolas-about-hours-architect .about-text {
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 300;
    color: var(--text-light); /* Gris medio para el párrafo, facilita la lectura */
}

/* Botón Elegante para About Us */
.btn-lolas-outline {
    display: inline-block;
    padding: 12px 35px;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    border-radius: var(--border-radius-sm); /* Usamos tu variable de borde de 4px */
    transition: all 0.4s ease;
}

.btn-lolas-outline:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(59, 133, 255, 0.2); /* Sombra azul sutil */
}

/* --- LADO DERECHO: ESTILO DE LAS CAJAS DE HORARIOS (PC) --- */
#lolas-about-hours-architect .hour-block {
    background: #ffffff; /* Tarjetas blancas sólidas */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Borde casi invisible */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Sombra muy suave de lujo */
    padding: 15px 10px; 
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: var(--border-radius-sm);
    text-align: center;
}

/* La línea superior que aparece al pasar el ratón */
.block-accent {
    position: absolute;
    top: 0; left: 0; width: 0; height: 4px;
    background-color: var(--color-warning); /* 🔥 CAMBIO: Línea amarilla animada al hacer hover */
    transition: width 0.4s ease;
}

.hour-block:hover {
    background: #ffffff;
    transform: translateY(-10px);
    border-color: rgba(250, 204, 21, 0.3); /* 🔥 CAMBIO: Borde amarillento muy sutil al flotar */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* La sombra se hace más fuerte al flotar */
}

.hour-block:hover .block-accent {
    width: 100%;
}

.block-icon {
    font-size: 1.2rem; 
    color: var(--color-primary); /* Icono azul brillante por defecto */
    margin-bottom: 15px;
    display: block;
}

.block-day {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--color-secondary); /* Día oscuro */
}

.block-time {
    font-size: 0.9rem;
    font-weight: 400; /* Un poco más de peso para que se lea mejor en fondo blanco */
    line-height: 1.2;
    color: var(--text-light); /* Hora en gris */
    margin-bottom: 0;
}


.block-featured .block-icon {
    color: var(--color-primary) !important; /* 🔥 CAMBIO: El icono destacado se vuelve amarillo */
}

/* =========================================
   🔥 RESPONSIVE FIX (MÓVIL Y TABLET) 🔥
   ========================================= */
@media (max-width: 991px) {
    #lolas-about-hours-architect {
        padding: 70px 0;
    }
    
    #lolas-about-hours-architect .cta-pretitle,
    #lolas-about-hours-architect .cta-title,
    #lolas-about-hours-architect .about-text {
        text-align: center !important;
    }

    .hour-block {
        padding: 30px 20px !important; 
    }

    .block-icon {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }

    .block-day {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
    }

    .block-time {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }
}




/* =========================================
   NEWSLETTER SECTION (CENTERED - Fondo Negro Azabache)
   ========================================= */

#lolas-impact-section {
    background-color: #020c1b; /* Negro casi absoluto, con un levísimo toque azul */
    color: var(--text-inverse); /* Blanco */
    border-top: 1px solid rgba(255, 255, 255, 0.02); /* Borde divisor súper sutil */
    padding: 100px 0; /* Espaciado premium */
    position: relative;
}

/* --- TÍTULOS Y TEXTO --- */
#lolas-impact-section .cta-title {
    color: var(--text-inverse) !important;
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

#lolas-impact-section .cta-text {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1rem;
    line-height: 1.8;
}

/* --- ESTILOS DEL FORMULARIO (ANCHO Y MINIMALISTA) --- */
#lolas-impact-section .newsletter-wrapper-wide .newsletter-flex {
    display: flex;
    justify-content: center;
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
}

#lolas-impact-section .newsletter-input {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 60px;
    padding: 0 25px;
    color: var(--text-inverse) !important;
    /* Bordes rectos a la derecha para pegar el botón, usando tu variable */
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important; 
    width: 100%;
    outline: none;
    transition: all 0.3s ease;
}

#lolas-impact-section .newsletter-input:focus {
    border-color: var(--color-primary) !important;
    background-color: rgba(59, 133, 255, 0.05) !important; /* RGB de tu --color-primary para transparencia */
}

#lolas-impact-section .newsletter-submit {
    height: 60px;
    background-color: var(--color-primary) !important;
    color: var(--text-inverse) !important;
    border: none;
    padding: 0 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* Bordes rectos a la izquierda para pegar al input, usando tu variable */
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important; 
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#lolas-impact-section .newsletter-submit:hover {
    background-color: var(--color-white) !important;
    color: var(--color-secondary) !important; /* Letra oscura al hacer hover para contraste */
}

#lolas-impact-section .privacy-note {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.85rem;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 768px) {
    #lolas-impact-section {
        padding: 60px 0;
    }

    #lolas-impact-section .newsletter-wrapper-wide .newsletter-flex {
        flex-direction: column;
        gap: 12px;
    }
    
    #lolas-impact-section .newsletter-input {
        border-radius: var(--border-radius-sm) !important; /* Bordes completos en móvil */
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    #lolas-impact-section .newsletter-submit {
        width: 100%;
        border-radius: var(--border-radius-sm) !important; /* Bordes completos en móvil */
    }

    #lolas-impact-section .cta-title {
        font-size: 2rem !important;
    }
}





/* =========================================
   CATERING SECTION: ARCHITECT PREMIUM (Fondo Azul Marino)
   ========================================= */

#lolas-catering-architect {
    background-color: #0a192f; /* Azul marino profundo, muy elegante y corporativo */
    color: var(--text-inverse); /* Blanco */
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* --- TÍTULOS --- */
#lolas-catering-architect .cta-pretitle {
    color: var(--color-primary) !important; /* Azul brillante de tu marca */
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 15px;
    display: block;
}

#lolas-catering-architect .cta-title {
    color: var(--text-inverse) !important;
    font-size: clamp(2.2rem, 4vw, 3rem) !important;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
}

#lolas-catering-architect .menu-desc {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 300;
}

/* --- IMAGEN Y MARCO ARQUITECTÓNICO --- */
.catering-img-wrapper {
    position: relative;
    z-index: 1;
    padding: 20px 0 0 20px; /* Espacio para que el marco respire */
}

.catering-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-primary); /* Borde azul de tu marca (un poco más grueso para destacar) */
    z-index: -1;
    border-radius: var(--border-radius-sm);
    opacity: 1; 
}

.catering-img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); /* Sombra suave para dar profundidad sobre el azul oscuro */
}

/* --- TARJETA DE TEXTO --- */
.catering-text-card {
    position: relative;
}

.catering-text-card .block-accent {
    position: absolute;
    top: -30px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: var(--color-primary);
}

/* --- LISTA DE CARACTERÍSTICAS (BARRAS ELEGANTES) --- */
.catering-features-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03); /* Un toque de luz translúcida */
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px 25px;
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
    transform: translateX(10px); /* Se desliza a la derecha */
}

.feature-icon {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-right: 20px;
}

.feature-item span {
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--text-inverse);
}

/* --- BOTÓN --- */
.btn-lolas-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-lolas-primary:hover {
    background-color: var(--color-white);
    color: var(--color-secondary) !important; /* Al pasar el mouse, texto oscuro */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(59, 133, 255, 0.3); /* Resplandor azul */
}

/* --- RESPONSIVE FIX --- */
@media (max-width: 991px) {
    #lolas-catering-architect {
        padding: 70px 0;
    }

    .catering-img-wrapper {
        padding: 15px 15px 0 0;
        margin-bottom: 2rem;
    }

    .catering-img {
        height: 400px;
    }

    .catering-text-card {
        text-align: center;
        padding-left: 0 !important;
    }

    .feature-item {
        justify-content: center;
    }
    
    .feature-item:hover {
        transform: translateY(-5px); /* En móvil sube en lugar de ir a la derecha */
    }
}




/* =========================================
   MENU SECTION: ARCHITECT MOSAIC DESIGN (Fondo Azul Pizarra)
   ========================================= */

#lolas-menu-architect {
    background-color: #112240; /* Azul Pizarra: separa sutilmente la sección del azul marino anterior */
    color: var(--text-inverse); /* Blanco */
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* --- TÍTULOS Y TEXTOS --- */
#lolas-menu-architect .cta-pretitle {
    color: var(--color-primary) !important; /* Usamos la variable de tu azul principal */
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 15px;
    display: block;
}

#lolas-menu-architect .cta-title {
    color: var(--text-inverse) !important;
    font-size: clamp(2.2rem, 4vw, 2.5rem) !important;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
}

#lolas-menu-architect .menu-desc {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 300;
}

/* --- MOSAICO DE IMÁGENES --- */
.menu-showcase-grid {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 500px; 
}

.showcase-item {
    position: absolute;
    border-radius: var(--border-radius-sm); /* Bordes redondeados consistentes (4px) */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); /* Sombra suavizada para encajar en el nuevo fondo */
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255,255,255,0.05);
}

.showcase-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 1s ease;
}

.showcase-item:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(59, 133, 255, 0.2); /* Resplandor usando el RGB de tu primary */
}

.showcase-item:hover .showcase-img {
    transform: scale(1.08);
}

.showcase-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
    opacity: 0.7;
}

.item-main { width: 65%; left: 0; top: 10%; z-index: 2; }
.item-secondary-top { width: 35%; right: 5%; top: 0; z-index: 1; }

/* 🔥 EL TRUCO VISUAL: El borde grueso debe ser del mismo color del fondo #112240 🔥 */
.item-secondary-bottom { width: 45%; right: 0; bottom: 0; z-index: 3; border: 4px solid #112240; }

/* LA DECORACIÓN DE LA LÍNEA */
.architect-line-deco {
    position: absolute;
    width: 100px;
    height: 100px;
    border-right: 2px solid rgba(59, 133, 255, 0.3); /* Color primary con opacidad */
    border-bottom: 2px solid rgba(59, 133, 255, 0.3);
    bottom: -30px;
    right: -30px; 
    z-index: 0;
}

/* --- TARJETA DE TEXTO CENTRALIZADA --- */
.menu-text-card {
    background-color: rgba(2, 12, 27, 0.4); /* Transparencia oscura y elegante */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 40px;
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px); /* Le da un toque premium estilo cristal */
    -webkit-backdrop-filter: blur(5px);
}

.menu-text-card .block-accent {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background-color: var(--color-primary);
}

/* --- BOTÓN TRANSPARENTE CON BORDE AZUL --- */
.btn-lolas-outline-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px; 
    color: var(--color-primary) !important;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 2px;
    border-radius: var(--border-radius-sm);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-lolas-outline-blue:hover {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(59, 133, 255, 0.2);
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    #lolas-menu-architect {
        padding: 70px 0;
    }

    .menu-showcase-grid {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .showcase-item {
        position: relative;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }

    .showcase-overlay {
        opacity: 0.4;
    }

    .architect-line-deco {
        display: none;
    }

    .menu-text-card {
        padding: 40px 20px;
    }
}




/* =========================================
   NUEVA SECCIÓN: FEATURED DISHES (FONDO BLANCO + BUCLE CENTRADO)
   ========================================= */

#lolas-featured-menu {
    background-color: var(--bg-body); /* Fondo Blanco Puro */
}

/* --- TÍTULOS ADAPTADOS A FONDO BLANCO --- */
#lolas-featured-menu .cta-pretitle {
    color: var(--color-primary) !important;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 15px;
    display: block;
}

#lolas-featured-menu .cta-title {
    color: var(--color-secondary) !important; 
    font-size: clamp(2.2rem, 4vw, 3rem) !important;
    letter-spacing: 1px;
}

/* --- ANIMACIÓN MARQUEE (EL BUCLE INFINITO) --- */
.marquee-wrapper {
    display: flex;
    width: max-content; 
    padding: 20px 0 30px 0; 
}

/* El slider se pausa al pasar el mouse */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused; 
}

.marquee-content {
    display: flex;
    gap: 30px; 
    padding-right: 30px; 
    animation: scrollLoop 40s linear infinite; 
}

@keyframes scrollLoop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); } 
}

/* --- TARJETAS (ESTILO LIMPIO SOBRE BLANCO) --- */
.dish-card {
    width: 280px; 
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius-lg, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04); 
}

.dish-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-warning); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
}

/* Imagen Cuadrada */
.dish-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; 
    overflow: hidden;
}

.dish-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.dish-card:hover .dish-img {
    transform: scale(1.08); 
}

/* Contenedor de Texto */
.dish-info {
    padding: 20px 15px;
    text-align: center;
    background: var(--bg-light); 
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 2px solid transparent;
    transition: border-color 0.4s ease;
}

.dish-card:hover .dish-info {
    border-top-color: var(--color-warning); 
}

.dish-name {
    color: var(--text-main); 
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.4;
}

/* --- BOTÓN DESCARGA (AJUSTE CUADRADO LIGERAMENTE REDONDEADO) --- */
#lolas-featured-menu .lolas-btn-primary {
    border-radius: var(--border-radius-sm, 4px) !important; /* Aplica tus 4px globales */
    padding: 14px 35px; /* Un poco más de altura para que se vea sólido */
}

/* --- RESPONSIVE FIX (MÓVILES) --- */
@media (max-width: 767px) {
    .dish-card {
        width: 240px; 
    }
    .marquee-content { 
        gap: 15px; 
        padding-right: 15px; 
    }
    #lolas-featured-menu .lolas-btn-primary {
        width: 100%;
        justify-content: center;
    }
}