/* ==========================================================================
   ETHEREAL SPA - HOJA DE ESTILO PREMIUM
   Paleta: Negro Profundo, Morado Amatista y Acentos de Gris Seda.
   ========================================================================== */

/* 1. VARIABLES DE DISEÑO (Fácil personalización) */
:root {
    /* Colores Principales */
    --black: #0a0a0a;
    --white: #ffffff;
    --off-white: #f8f8f8;
    
    /* Identidad: Morado */
    --purple-main: #6b21a8;    /* Morado Amatista */
    --purple-light: #a855f7;   /* Morado vibrante para interacción */
    --purple-dark: #2e1065;    /* Morado noche para fondos */
    
    /* Acentos */
    --gold-subtle: #c5a059;    /* Dorado envejecido (solo detalles) */
    --text-muted: #888888;     /* Gris para descripciones largas */
    --text-dark: #1a1a1a;      /* Negro suave para secciones blancas */
    --whatsapp-green: #25d366;
    
    /* Tipografía */
    --font-main: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
}

/* 2. RESET Y ESTILOS BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--black);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Contenedor centralizado para mantener el orden */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* ==========================================================================
            --HEADER & LOGO INTEGRATION--
   ========================================================================== */


/* 3. NAVEGACIÓN (HEADER) - LOGO INTEGRATION */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 30px 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estilo cuando el usuario baja (activado por JS) */
header.scrolled {
    padding: 15px 0; /* Se compacta elegantemente */
    background: rgba(8, 8, 8, 0.6); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CONTENEDOR DE LOGO OPTIMIZADO */
.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: block;
    line-height: 0; /* Elimina espacios extraños debajo de la imagen */
}

.logo img {
    height: 70px; /* Tamaño inicial elegante */
    width: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* El logo se reduce ligeramente al hacer scroll para un efecto premium */
header.scrolled .logo img {
    height: 50px;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    margin-left: 35px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--purple-light);
}

/* Ajuste específico para el menú móvil */
@media (max-width: 768px) {
    header {
        padding: 20px 0;
    }
    
    .logo img {
        height: 55px; /* Tamaño balanceado para móvil */
    }

    header.scrolled .logo img {
        height: 45px;
    }
}

/* ==========================================================================
                    1--SECCION DE HERO--
   ========================================================================== */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at top right, #1a0b2e, #0a0a0a); /* Gradiente místico */
    position: relative;
    padding-top: 80px;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr; /* Asimetría moderna */
    align-items: center;
    gap: 50px;
}

.tagline {
    color: var(--purple-light);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
}

#hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 4.5rem); /* Texto responsivo */
    line-height: 1.1;
    margin: 20px 0;
}

.accent-italic {
    font-style: italic;
    color: var(--purple-main);
    font-weight: 400;
}

#hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 480px;
    margin-bottom: 40px;
}

/* Botones Hero */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-primary {
    background: var(--purple-main);
    color: white;
    padding: 18px 45px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--purple-light);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

.btn-link {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--purple-main);
    padding-bottom: 4px;
}

/* Visual del Hero - OPTIMIZADO: Se eliminó duplicidad y error de carga */
.hero-visual {
    position: relative;
    height: 500px;
    background-color: transparent; /* Eliminamos el fondo negro de respaldo */
    border-radius: 4px;
    overflow: hidden;
    /* Mantenemos la sombra para dar estructura al espacio incluso antes del video */
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Empieza invisible */
    filter: brightness(0.7);
    will-change: opacity;
    /* Transición suave para evitar el salto visual cuando cargue */
    transition: opacity 1.2s ease-in-out;
}

.hero-video.is-visible {
    opacity: 1;
}

/* Un velo púrpura degradado sobre la imagen para que no sea tan brillante */
.hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Este gradiente ayuda a dar profundidad mientras el video termina de conectar */
    background: linear-gradient(45deg, rgba(42, 10, 109, 0.2), rgba(10, 10, 10, 0.3));
    z-index: 1;
    pointer-events: none;
}

/* Efecto de borde dorado muy fino para la tarjeta flotante */
.floating-card {
    border: 1px solid var(--gold-subtle);
    background: rgba(10, 10, 10, 0.9); /* Casi negro traslúcido */
    color: var(--white);
    backdrop-filter: blur(10px); /* Efecto de vidrio esmerilado */
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Ajuste de variable corregido */
    border: 1px solid var(--purple-main);
}

/* ==========================================================================
          2--SECCIÓN DE ACERCA DE NOSOTROS (VERSION FINAL PREMIUM)
   ========================================================================== */

#about {
    /* Espaciado generoso para que la sección respire (Eliminada restricción 100vh) */
    padding: 160px 0;
    background-color: var(--black);
    position: relative;
    overflow: visible;
}

.about-mosaic-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px; /* Espacio amplio entre texto e imagen */
    align-items: center;
}

/* --- BLOQUE DE TEXTO Y TÍTULOS --- */

.about-text-box {
    max-width: 500px;
}

.tagline {
    color: var(--purple-main);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
}

#about .section-title {
    font-family: var(--font-serif);
    font-size: 3.2rem;
    line-height: 1.1;
    color: var(--white); /* Color principal: Blanco */
    margin-bottom: 30px;
}

/* Variedad de color en el título */
.accent-purple {
    color: var(--purple-light);
    font-style: italic;
    font-weight: 400;
}

.about-p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 45px;
}

/* --- CONTADORES (RESTAURADOS AL DISEÑO ORIGINAL) --- */

.about-stats-row {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat span {
    display: block;
    font-size: 2.8rem;
    font-family: var(--font-serif);
    color: var(--purple-light);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.4); /* Brillo original */
    transition: transform 0.3s ease;
}

.stat:hover span {
    transform: scale(1.1); /* Animación original */
}

.stat small {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.2;
}

/* --- BLOQUE VISUAL (MOSAICO ORIGINAL REFINADO) --- */

.about-mosaic-visual {
    position: relative;
    height: 520px;
    width: 100%;
}

.img-large {
    width: 85%;
    height: 90%;
    margin-left: auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.img-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: transform 1s ease;
}

.img-large:hover img {
    transform: scale(1.05);
}

.img-overlap {
    position: absolute;
    bottom: -25px; /* Sobresale hacia abajo */
    left: 0;       /* Sobresale hacia la izquierda */
    width: 190px;
    height: 190px;
    background: linear-gradient(135deg, var(--purple-main), var(--purple-dark));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.overlap-content {
    text-align: center;
    color: var(--white);
    padding: 20px;
}

.overlap-content i {
    font-size: 2.2rem;
    margin-bottom: 12px;
    display: block;
    color: var(--white);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.overlap-content span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    line-height: 1.4;
}

/* --- MEDIA QUERIES (RESPONSIVIDAD TOTAL) --- */

@media (max-width: 992px) {
    #about {
        padding: 100px 0;
    }

    .about-mosaic-container {
        grid-template-columns: 1fr;
        gap: 70px;
        text-align: center;
    }

    .about-text-box {
        max-width: 100%;
        order: 1;
    }

    .about-stats-row {
        justify-content: center;
    }

    .about-mosaic-visual {
        order: 2;
        height: 450px;
        max-width: 500px;
        margin: 0 auto;
    }

    .img-large {
        width: 100%;
        margin-left: 0;
    }

    .img-overlap {
        left: 50%;
        transform: translateX(-50%);
        bottom: -35px;
    }
}

@media (max-width: 480px) {
    #about .section-title {
        font-size: 2.5rem;
    }
    
    .about-stats-row {
        gap: 25px;
    }

    .stat span {
        font-size: 2.2rem;
    }
}

.bg-black { background-color: var(--black); }

/* ==========================================================================
                    3--SECCION DE EXCLUSIVIDAD--
   ========================================================================== */

.bg-white { 
    background-color: var(--white); 
    color: var(--text-dark);
    padding: 100px 0;
    width: 100%;
    position: relative; 
}

.section-title {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: var(--purple-main);
    margin-bottom: 40px;
}

.section-title.dark { color: var(--black); }

.header-minimal {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 70px auto;
    text-align: center;
}

.tagline-purple {
    display: block;
    color: var(--purple-main);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.title-dark {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #000000;
    margin: 0;
    line-height: 1.1;
}

/* Grid de Cartas */
.privilegios-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

/* Estilo Base de Cartas */
.benefit-card {
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 320px;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

/* Carta Negra Central Destacada */
.benefit-card.featured-dark {
    background: #080808;
    color: #ffffff;
    border: none;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    z-index: 2;
    transform: scale(1.03); /* Ligeramente más grande para jerarquía */
}

/* Iconos y Efecto Glow (Brillo) */
.benefit-icon {
    font-size: 3rem;
    color: var(--purple-main);
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Forzar brillo morado en el icono de la carta negra */
.featured-dark .benefit-icon i {
    color: #a855f7 !important;
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.6));
    transition: filter 0.4s ease; /* Solo animamos la intensidad del brillo */
}

/* Tipografía de Cartas */
.benefit-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: #111111;
}

.featured-dark h3 { color: #ffffff; }

.benefit-card p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666666;
    max-width: 300px;
}

.featured-dark p { color: #999999; }

/* --- INTERACCIONES (Hover) --- */

.benefit-card:hover {
    transform: translateY(-10px);
    border-color: var(--purple-light);
    box-shadow: 0 20px 40px rgba(107, 33, 168, 0.1);
}

.benefit-card.featured-dark:hover {
    /* Mantiene el scale y añade la elevación */
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

/* Aumentar el brillo del icono al pasar el mouse (Sin movimiento) */
.benefit-card.featured-dark:hover .benefit-icon i {
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.9));
}

/* ==========================================================================
            3--SECCIÓN DE SERVICIOS SIGNATURE (OPTIMIZADA MÓVIL)
   ========================================================================== */

.services-premium-bg {
    position: relative;
    padding: 160px 0;
    background-color: var(--black);
    background-image: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), 
                      url('https://www.transparenttextures.com/patterns/dark-matter.png'); 
    background-attachment: fixed;
    background-size: auto;
}

.relative-z { position: relative; z-index: 5; }

/* ENCABEZADO CENTRADO */
.services-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.services-header .section-title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    color: var(--white);
}

.services-header .accent-purple {
    color: var(--purple-main);
}

/* GRID Y TARJETA CON ACELERACIÓN GPU */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card-luxury {
    position: relative;
    height: 600px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    will-change: transform;
}

/* IMAGEN DE FONDO: Blindada para cubrir todo sin divisiones */
.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) grayscale(0.2);
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.8s ease;
    z-index: 1;
    backface-visibility: hidden;
}

.card-overlay {
    position: relative; /* Cambiado a relativo para que estire la carta en móvil */
    height: 100%;
    width: 100%;
    z-index: 2;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 0.6) 50%, 
        transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.6s ease;
    box-sizing: border-box;
}

/* CONTENEDOR DE TEXTO */
.card-content {
    width: 100%;
    position: relative;
    z-index: 3;
}

.card-content h3 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    color: var(--white);
    margin-bottom: 20px;
}

/* PÁRRAFO CON BLINDAJE DE LÍNEAS AMPLIADO */
.card-content p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.2s;
    font-size: 0.95rem;
    color: var(--white);
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 20px;

    /* Blindaje para editor y para textos largos */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8; 
    line-clamp: 8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.1s;
}

.service-meta span {
    font-size: 0.75rem;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-meta i { 
    color: var(--purple-light);
}

.price-tag {
    margin-left: auto;
    background: rgba(168, 85, 247, 0.15);
    color: var(--white) !important;
    padding: 4px 10px;
    border: 1px solid var(--purple-main);
    border-radius: 3px;
    font-family: var(--font-serif);
    font-size: 0.85rem !important; 
    font-weight: 600;
    letter-spacing: 1px;
}

.btn-minimal { 
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--purple-main);
    transition: all 0.3s ease;
    width: fit-content;
}

/* HOVER EFFECTS (Desktop) */
@media (min-width: 993px) {
    .service-card-luxury:hover .card-img {
        filter: brightness(0.7) grayscale(0);
        transform: scale(1.1);
    }

    .service-card-luxury:hover .service-meta,
    .service-card-luxury:hover .card-content p {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-minimal:hover {
    color: var(--purple-light);
    border-bottom-color: var(--white);
}

/* RESPONSIVO OPTIMIZADO (SIN IMAGEN DIVIDIDA) */
@media (max-width: 992px) {
    .services-premium-bg {
        background-attachment: scroll; 
        padding: 80px 0;
    }

    .services-grid { grid-template-columns: 1fr; gap: 20px; }
    
    .service-card-luxury { 
        height: auto; /* Crece con el contenido */
        min-height: 550px; 
    }

    .card-img {
        height: 100%; /* La imagen se estira junto con la carta */
        min-height: 100%;
    }

    .card-overlay {
        padding: 80px 30px 40px; /* Padding superior extra para el fade */
        background: linear-gradient(to top, 
            rgba(0,0,0,1) 0%, 
            rgba(0,0,0,0.8) 50%, 
            rgba(0,0,0,0.3) 100%);
    }

    .card-content h3 {
        font-size: 1.8rem;
    }
    
    .service-meta, .card-content p { 
        opacity: 1; 
        transform: translateY(0); 
    }

    .card-content p {
        -webkit-line-clamp: 12; /* Permitimos mucho más texto en móvil */
        line-clamp: 12;
    }
}

/* ==========================================================================
            4--SECCIÓN STAFF (EQUIPO ÉLITE) - OPTIMIZADA
   ========================================================================== */

.staff-bg {
    padding: 120px 0;
    background-color: var(--black);
    /* Aseguramos que el fondo negro sea sólido para evitar saltos de renderizado */
    position: relative;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* LA TARJETA DE STAFF CON ACELERACIÓN GPU */
.staff-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ACTIVAR GPU: Evita el lag al hacer scroll en móviles */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, border-color;
}

.staff-img-container {
    position: relative;
    height: 450px;
    background: #111; /* Reserva de espacio visual mientras carga */
    overflow: hidden;
    /* Evita que el overflow:hidden falle durante la animación */
    border-radius: 8px 8px 0 0;
}

.staff-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.3);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
    /* Forzamos al navegador a priorizar la decodificación de la imagen */
    content-visibility: auto;
}

.staff-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--purple-main);
    color: var(--white);
    padding: 5px 15px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 2px;
    z-index: 10;
}

/* INFO DEL STAFF - Usando variable white */
.staff-info {
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.staff-specialty {
    color: var(--purple-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.staff-info h3 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--white); /* Consistencia con tus instrucciones */
    margin-bottom: 15px;
}

.staff-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.staff-stats span {
    color: var(--white);
    font-size: 0.8rem;
    opacity: 0.8;
}

.staff-stats i {
    color: var(--purple-main);
    margin-right: 5px;
}

/* BOTÓN DE STAFF */
.btn-staff {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--purple-main);
    color: var(--white);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: block; /* Asegura el comportamiento de bloque */
}

/* HOVER EFFECTS (Desactivados en móviles para evitar parpadeos) */
@media (min-width: 993px) {
    .staff-card:hover {
        border-color: var(--purple-main);
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    }

    .staff-card:hover .staff-img {
        filter: grayscale(0);
        transform: scale(1.05);
    }

    .btn-staff:hover {
        background: var(--purple-main);
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    }
}

/* Responsivo Optimizado */
@media (max-width: 992px) {
    .staff-bg { padding: 80px 0; }
    
    .staff-grid { 
        grid-template-columns: 1fr; 
        max-width: 400px; 
        margin: 0 auto; 
        gap: 30px;
    }

    .staff-img-container {
        height: 380px; /* Reducido para mejor scroll en móviles */
    }

    /* En móvil mostramos el staff con color directo para evitar el costo de procesamiento del filtro */
    .staff-img {
        filter: none; /* Eliminamos el filtro totalmente en móvil para fluidez */
        transition: none; /* Quitamos transiciones pesadas en móvil */
    }

    .staff-card {
        /* Desactivamos will-change en móvil para liberar memoria RAM */
        will-change: auto;
    }
}

/* ==========================================================================
            5--GALERÍA DE INSTALACIONES (DISEÑO CLEAN & PREMIUM)
   ========================================================================== */

/* Usamos la clase que definimos para fondos claros */
.bg-white {
    background-color: var(--white);
    padding: 120px 0;
    position: relative;
}

section.bg-white .section-title {
    color: var(--black);
    text-align: center;
}

section.bg-white .tagline {
    color: var(--purple-main);
    display: block;
    text-align: center;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

/* Contenedor Principal */
.gallery-focus {
    max-width: 1000px;
    margin: 60px auto 0;
    background: #050505;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.2), 
                0 0 30px rgba(168, 85, 247, 0.1);
}

.gallery-focus:hover {
    box-shadow: 0 30px 70px rgba(168, 85, 247, 0.4);
}

.gallery-main-image-wrapper {
    position: relative;
    width: 100%;
    height: auto; 
    min-height: 300px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    /* Preparado para el JS actual */
    overflow: hidden; 
}

.gallery-main-image {
    width: 100%;
    height: auto;
    max-height: 450px; /* Altura optimizada en PC */
    object-fit: contain; 
    filter: brightness(1.05) contrast(1.1);
    transition: opacity 0.4s ease;
    display: block;
    /* Evita que se encoja en el modo flex del swipe */
    flex-shrink: 0;
}

.gallery-main-caption {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white);
    padding: 12px 25px;
    border-left: 4px solid var(--purple-main);
    border-radius: 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 10;
    max-width: calc(100% - 60px);
    pointer-events: none; /* No interfiere con el swipe */
}

/* Navegación de Miniaturas */
.gallery-thumbnails {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 30px;
    background: #0a0a0a;
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    overflow-x: auto;
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.gallery-thumbnails::-webkit-scrollbar {
    display: none; /* Oculta scroll en Chrome/Safari */
}

.thumbnail-item {
    flex: 0 0 110px;
    width: 110px;
    height: 75px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    filter: grayscale(1) opacity(0.4);
    transition: all 0.3s ease;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumbnail-item.active, 
.thumbnail-item:hover {
    filter: grayscale(0) opacity(1);
    border-color: var(--purple-main);
}

/* Responsivo con SOPORTE SWIPE TÁCTIL */
@media (max-width: 768px) {
    .gallery-main-image-wrapper { 
        display: flex;
        overflow-x: auto;
        /* Scroll Snap: Hace que la imagen "salte" al centro al deslizar */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        height: auto;
        min-height: 300px;
    }

    /* Ocultar barra de scroll para el modo swipe */
    .gallery-main-image-wrapper::-webkit-scrollbar {
        display: none;
    }

    .gallery-main-image {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
        object-fit: contain;
        max-height: 60vh;
    }
    
    .gallery-main-caption {
        bottom: 15px;
        left: 15px;
        font-size: 0.7rem;
        padding: 8px 15px;
        /* Fijamos el caption para que no se mueva con el scroll si es necesario */
        position: absolute; 
    }

    .gallery-thumbnails {
        justify-content: flex-start;
        padding: 20px;
    }

    .thumbnail-item {
        flex: 0 0 90px;
        width: 90px;
        height: 65px;
    }
}
/* ==========================================================================
            6--PREGUNTAS FRECUENTES (NIGHT MODE ACCORDION)
   ========================================================================== */

.bg-black {
    background-color: #050505; /* Un negro profundo */
    padding: 120px 0;
}

.faq-container {
    max-width: 850px;
    margin: 60px auto 0;
}

.faq-item {
    border-bottom: 1px solid rgba(168, 85, 247, 0.15); /* Línea morada sutil */
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-question span {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--white); /* Uso de tu variable */
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.faq-question i {
    color: var(--purple-main);
    font-size: 0.8rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respuesta Oculta */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    padding: 0 10px 30px 10px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    font-size: 0.95rem;
    max-width: 90%
}

/* Estado Activo (Cuando el JS añade la clase .active) */
.faq-item.active {
    background: rgba(168, 85, 247, 0.03); /* Brillo de fondo muy tenue */
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Ajustar según largo del texto */
}

.faq-item.active .faq-question span {
    color: var(--purple-main);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

/* Efecto hover suave */
.faq-item:hover {
    border-bottom-color: var(--purple-main);
}

/* ==========================================================================
            7--UBICACIÓN Y MAPA (WHITE THEME - SINGLE ACTION)
   ========================================================================== */

.bg-white {
    background-color: var(--white);
    padding: 120px 0;
}

/* Títulos con especificidad limpia */
section.bg-white .section-title {
    color: var(--black);
    text-align: center;
}

section.bg-white .tagline {
    color: var(--purple-main);
    display: block;
    text-align: center;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

/* Layout de la ubicación */
.location-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin-top: 60px;
    align-items: stretch; /* Alinea altura de mapa e info */
}

/* Contenedor del Mapa */
.map-container {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 400px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(0.2) contrast(1.1);
}

/* ==========================================================================
            8--FOOTER MODERNO (BG-BLACK EDITION)
   ========================================================================== */

.modern-footer {
    padding: 100px 0 40px;
    border-top: 1px solid rgba(168, 85, 247, 0.2); /* Línea morada superior sutil */
    position: relative;
    overflow: hidden;
}

.footer-3col-balanced {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 60px;
    margin-bottom: 80px;
}

/* Columna de Logo y Mensaje - ACTUALIZADO PARA IMAGEN */
.footer-logo-img {
    height: 80px; /* Altura optimizada */
    width: auto;
    display: block;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}


.footer-message {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Columna Central: Redes */
.footer-column h4 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
}

.social-links-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.social-item i {
    width: 35px;
    height: 35px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-main);
    transition: all 0.3s ease;
}

.social-item:hover {
    color: var(--white);
    transform: translateX(5px);
}

.social-item:hover i {
    background: var(--purple-main);
    color: var(--white);
    box-shadow: 0 0 15px var(--purple-main);
}

/* Columna de Contacto - ENLACES FUNCIONALES */
.contact-info-list {
    list-style: none;
    padding: 0;
}

.contact-info-list li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    align-items: center;
}

/* Estilo para los nuevos enlaces <a> de contacto */
.footer-contact-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact-link:hover {
    color: var(--white);
    padding-left: 5px;
}

.contact-info-list i {
    color: var(--purple-main);
}

/* Copyright */
.footer-copyright {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-copyright p {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Estilo para el crédito del desarrollador */
.developer-credit {
    margin-top: 10px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

.developer-credit a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.developer-credit a:hover {
    color: var(--purple-light);
}

/* Opcional: una línea sutil debajo de tu nombre al hacer hover */
.developer-credit a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--purple-light);
    transition: width 0.3s ease;
}

.developer-credit a:hover::after {
    width: 100%;
}

/* Responsivo */
@media (max-width: 992px) {
    .footer-3col-balanced {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .footer-logo-img {
        margin: 0 auto 25px;
        height: 65px;
    }

    .social-item {
        justify-content: center;
    }

    .contact-info-list li {
        justify-content: center;
    }
}

/* Botón único de Waze */
.info-actions {
    margin-top: 20px;
}

.info-actions .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Responsivo */
@media (max-width: 992px) {
    .location-wrapper {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        order: 2;
        height: 350px;
        min-height: 350px;
    }
    
    .location-info {
        order: 1;
    }
    
    .location-info .info-card {
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .bg-white {
        padding: 80px 0;
    }
    
    .location-info h3 {
        font-size: 1.5rem;
    }
}

/* 8. BOTÓN WHATSAPP Y ANIMACIÓN */
.whatsapp-pulse-btn {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 65px;
    height: 65px;
    background-color: var(--whatsapp-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    z-index: 9999;
    animation: pulse-effect 2s infinite;
    text-decoration: none;
}

@keyframes pulse-effect {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* --- ESTILOS DEL MENÚ HAMBURGUESA --- */

/* --- NAVEGACIÓN RESPONSIVA PREMIUM --- */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100; /* Por encima de todo */
}

.bar {
    width: 100%;
    height: 2px;
    background-color: var(--white);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 992px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Totalmente fuera de pantalla */
        width: 100%;
        height: 100vh;
        background: rgba(10, 10, 10, 0.98); /* Negro casi opaco */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1050;
    }

    .nav-links.active {
        right: 0; /* Entra suavemente */
    }

    .nav-links a {
        font-size: 1.5rem;
        margin: 20px 0;
        letter-spacing: 4px;
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s ease;
    }

    .nav-links.active a {
        opacity: 1;
        transform: translateX(0);
        /* Animación en cascada para los links */
        transition-delay: 0.3s;
    }

    /* Animación de la Hamburguesa a X */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: var(--purple-light);
    }
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background-color: var(--purple-light);
    }
}

/* 9. MEDIA QUERIES (RESPONSIVO) */
@media (max-width: 992px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; }
    #hero p { margin: 0 auto 40px; }
    .hero-actions { justify-content: center; }
    .hero-visual { display: none; }
    .privilegios-modern-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        padding: 0 20px;
    }
    .benefit-card { min-height: auto; transform: none !important; }
}