/* ==========================================================================
   PARTE 1: CONFIGURACIÓN GENERAL, NAVBAR Y HERO SECTION
   ========================================================================== */

:root {
    --bg-dark: #0a0a0a;
    --bg-card: #121212;
    --accent: #ffffff;
    --text-primary: #ffffff;
    --text-muted: #8a8a8a;
    --border-color: #222222;
    --font-heading: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* --- MENÚ DE NAVEGACIÓN --- */
/* --- MENÚ DE NAVEGACIÓN (CON EFECTO SCROLL) --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0) 100%);
    border-bottom: 0px solid transparent;
    backdrop-filter: blur(0px);
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}

.navbar.navbar-scrolled {
    background-color: #0a0a0a;
    backdrop-filter: none;
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- CONFIGURACIÓN DEL LOGO CONTROLADO (REPARADO) --- */
.logo-wrapper {
    --logo-height: 32px; 
    display: flex;
    align-items: center;
    height: var(--logo-height);
}

/* Solo afecta al enlace del logo de la barra principal */
.logo-wrapper .logo-link {
    display: block;
    height: 100%;
}

/* Solo afecta a la imagen del logo de la barra principal */
.logo-wrapper .logo-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    transition: var(--transition);
}

/* Efecto hover exclusivo de PC */
.logo-wrapper .logo-link:hover .logo-img {
    opacity: 0.85;
    transform: scale(1.02);
}

/* OCULTAR EL LOGO MÓVIL EN LA VISTA DE COMPUTADORA */
.logo-mobile-box {
    display: none !important;
}


/* --- ENLACES GENERALES DEL MENÚ (ESTILOS COMPARTIDOS) --- */
.nav-link-premium {
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    height: 20px;
    line-height: 20px;
    transition: color 0.3s ease;
}

.nav-link-premium span {
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link-premium::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 100%;
    color: var(--text-primary);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link-premium:hover {
    color: var(--text-primary);
}

.nav-link-premium:hover span {
    transform: translateY(-100%);
}

.nav-link-premium:hover::after {
    transform: translateY(-100%);
}

/* ADAPTACIÓN DEL BOTÓN DE LLAMADO A LA ACCIÓN (CTA) */
.nav-menu .cta-nav {
    background-color: var(--accent);
    color: var(--bg-dark);
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    border-radius: 40px;
    font-weight: 600;
    overflow: hidden;
}

.nav-menu .cta-nav::after {
    color: var(--bg-dark);
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
}

.nav-menu .cta-nav:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* --- COMPORTAMIENTO EXCLUSIVO EN COMPUTADORA (PANTALLAS GRANDES) --- */
@media (min-width: 769px) {
    .nav-toggle {
        display: none; /* Oculta botón de 3 líneas en PC */
    }
    .nav-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 30px; /* Separación horizontal de menús */
    }
}

/* --- COMPORTAMIENTO EXCLUSIVO EN CELULARES (RESPONSIVO) --- */
/* --- COMPORTAMIENTO EXCLUSIVO EN CELULARES (RESPONSIVO) --- */
/* --- COMPORTAMIENTO EXCLUSIVO EN CELULARES (RESPONSIVO) --- */
@media (max-width: 768px) {
    /* Muestra e implementa el botón de 3 líneas */
    .nav-toggle {
        display: flex !important;
        background: none;
        border: none;
        cursor: pointer;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        padding: 0;
        z-index: 101;
    }

    .nav-toggle span {
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }

    /* Transforma el menú horizontal en un panel lateral deslizante */
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Escondido por defecto */
        width: 290px !important;
        height: 100vh !important;
        background-color: #0a0a0a !important; /* Fondo oscuro sólido */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* Alinea los elementos desde arriba */
        align-items: center !important;
        gap: 0 !important; 
        padding-top: 60px !important; /* Espacio superior para el logo interno */
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7) !important;
        z-index: 100 !important;
    }

    /* CLASE ACTIVA DE JAVASCRIPT: Despliega el menú lateral al hacer clic */
    .nav-menu.nav-menu_visible {
        right: 0 !important;
    }

    /* CONTROL DEL LOGO ADENTRO DEL DESPLEGABLE */
    .nav-menu .logo-mobile-box {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 30px !important; 
        margin-bottom: 40px !important; 
    }

    .nav-menu .logo-mobile-link {
        display: block !important;
        height: 100% !important;
        width: auto !important;
    }

    .nav-menu .img-desplegable {
        display: block !important;
        height: 100% !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* RESETEO TOTAL DEL EFECTO MULTILADO EN MÓVIL */
    .nav-menu .nav-link-premium {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        height: auto !important; 
        line-height: normal !important; 
        padding: 15px 0 !important; 
        font-size: 1.2rem !important; 
        color: #ffffff !important; 
        overflow: visible !important;
    }

    .nav-menu .nav-link-premium::after {
        display: none !important; 
    }

    .nav-menu .nav-link-premium span {
        transform: none !important;
        display: inline-block !important;
    }
    
    .nav-menu .nav-link-premium:hover span {
        transform: none !important;
    }

    /* DISEÑO SEGURO PARA EL BOTÓN DE WHATSAPP (CTA) */
    .nav-menu .cta-nav {
        margin-top: 25px !important;
        background-color: var(--accent) !important;
        color: var(--bg-dark) !important;
        width: 80% !important;
        height: 48px !important;
        line-height: 48px !important;
        border-radius: 40px !important;
        padding: 0 !important;
        font-weight: 600 !important;
        overflow: hidden !important;
    }

    .nav-menu .cta-nav span {
        color: var(--bg-dark) !important;
    }
    
    .nav-menu .cta-nav::after {
        display: none !important;
    }

    /* Animación del botón hamburguesa a "X" */
    .nav-toggle.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }
    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}



/* --- HERO SECTION --- */
/* --- HERO SECTION CON VIDEO FULLSCREEN --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px 80px 20px;
    overflow: hidden; /* Evita que el video se desborde */
}

/* Control total del video de fondo */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    object-fit: cover; /* Hace que el video se comporte como background-size: cover */
    pointer-events: none;
}

/* Capa de contraste para oscurecer el video y que resalte el texto blanco */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.5) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-container {
    max-width: 900px;
    z-index: 3; /* Por encima del video y de la capa oscura */
}

.badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: var(--text-primary);
    backdrop-filter: blur(4px);
}

/* --- TÍTULO PRINCIPAL (FUENTES Y ESPACIADOS PREMIUM DE FRAMER) --- */
/* --- TÍTULO PRINCIPAL (RÉPLICA EXACTA DE LA FUENTE INTER EN MAYÚSCULAS) --- */
/* --- TÍTULO PRINCIPAL FINA PREMIUM (RÉPLICA FIEL DE TU IMAGEN) --- */
/* --- TÍTULO PRINCIPAL: ESTILO PREMIUM FINO Y SEPARADO (RÉPLICA FIEL) --- */
/* --- TÍTULO PRINCIPAL: ESTILO PREMIUM FINO Y SEPARADO REAL --- */
/* --- TÍTULO PRINCIPAL: ESTILO LIBRE (RESPETA EL TEXTO EXACTO DEL HTML) --- */
.hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 200 !important; 
    font-style: normal;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* ----------------------------------------------------------------------
       REGLA ELIMINADA: Ya no hay 'text-transform'. El navegador mostrará
       las mayúsculas y minúsculas exactamente como las escribas en el HTML.
       ---------------------------------------------------------------------- */
    
    /* Ajuste de espaciado equilibrado para lectura mixta */
    letter-spacing: 1px !important; 
    line-height: 1.15; 
    
    font-size: clamp(2.5rem, 5.8vw, 5.8rem);
    color: #ffffff;
    margin-bottom: 32px;
    text-shadow: none; 
}

/* Ajuste fino de respuesta para teléfonos celulares */
@media (max-width: 768px) {
    .hero-title {
        font-weight: 300 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2;
    }
}





/* Ajuste responsive para celulares: disminuye la compresión de las letras para mejorar lectura */
@media (max-width: 768px) {
    .hero-title {
        letter-spacing: -1.5px;
        line-height: 1.1;
    }
}


.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #e0e0e0; /* Un tono más claro para competir mejor con el movimiento del video */
    max-width: 600px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    z-index: 3;
}

.btn {
    display: inline-block;
    padding: 16px 36px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 40px;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--bg-dark);
    border: none;
}

.btn-primary:hover {
    transform: scale(1.03);
}

.btn-secondary {
    background-color: rgba(10, 10, 10, 0.4);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

/* ==========================================================================
   PARTE 2: TARJETAS, GALERÍA DE CLASES, MARQUESINA, FORMULARIO Y FOOTER
   ========================================================================== */

/* --- ESTILOS COMPARTIDOS DE SECCIÓN --- */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}

.section-header {
    margin-bottom: 60px;
}

.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 500px;
}

/* --- SECCIÓN BENEFICIOS (TARJETAS) --- */
/* --- SECCIÓN BENEFICIOS (TARJETAS FILO RECTO) --- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 24px; /* Relleno limpio y equilibrado para albergar fotos anchas */
    border-radius: 0px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}


.card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}

/* Contenedor de la foto tipo perfil cuadrada */
/* Contenedor inteligente de la foto tipo perfil adaptable */
.card-profile-box {
    /* ----------------------------------------------------------------------
       MÁRGENES CONFIGURABLES:
       Ajusta estos valores para cambiar las separaciones a tu gusto.
       ---------------------------------------------------------------------- */
    --margin-bottom: 24px;    /* Separación entre la foto y el título inferior */
    --margin-lateral: 0px;     /* Separación a los lados de la foto (0px = ancho completo) */
    --aspect-ratio-height: 240px; /* Altura de visualización de la foto cuadrada/rectangular */

    width: calc(100% - (var(--margin-lateral) * 2));
    height: var(--aspect-ratio-height);
    margin: 0 var(--margin-lateral) var(--margin-bottom) var(--margin-lateral);
    overflow: hidden;
    background-color: #1a1a1a; /* Color de respaldo local */
}

.card-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta y encuadra la foto automáticamente sin deformarla */
    border-radius: 0px; /* Filo 100% recto */
    display: block;
    transition: var(--transition);
}

/* Efecto hover opcional: micro-zoom en la foto al pasar el cursor sobre la tarjeta */
.card:hover .card-profile-img {
    transform: scale(1.03);
}


.card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.card-text {
    color: var(--text-muted);
    line-height: 1.6;
}


/* --- SECCIÓN CLASES (GALERÍA VIRTUAL) --- */
/* --- SECCIÓN CLASES (TIPO SLIDER) --- */
.classes {
    background-color: var(--bg-dark);
    width: 100%;
    overflow: hidden;
}

/* Encabezado en línea con los controles */
.classes-header-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 20px;
}

.classes-header-block .section-header {
    margin-bottom: 0;
}

/* Botones de control */
.classes-slider-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.classes-slider-btn {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.classes-slider-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.classes-slider-btn:hover {
    background-color: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
}

.class-prev-btn:hover svg { transform: translateX(-2px); }
.class-next-btn:hover svg { transform: translateX(2px); }

/* Envoltura y Máscara de Scroll */
.classes-slider-wrapper {
    width: 100%;
    overflow-x: auto;
    cursor: grab;
    padding-bottom: 20px;
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.classes-slider-wrapper::-webkit-scrollbar {
    display: none; /* Oculta scroll en Chrome/Safari */
}

.classes-slider-wrapper:active {
    cursor: grabbing;
}

/* Tira horizontal de tarjetas */
.grid-classes-slider {
    display: flex;
    gap: 32px;
    width: max-content;
    padding-right: 20px;
}

/* Ajuste individual de la tarjeta del estilo de clase */
.class-item {
    background-color: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    width: 360px; /* Ancho fijo óptimo para las tarjetas de clase */
    max-width: 85vw;
    transition: var(--transition);
    flex-shrink: 0; /* Evita que el contenedor aplaste las tarjetas */
}

.class-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- ENCUADRE DE IMÁGENES REALES EN EL SLIDER DE CLASES --- */
.class-img-container {
    /* ALTURA PERSONALIZABLE: Cambia este valor para controlar el alto del cuadro de la foto */
    --class-img-height: 380px; 
    
    width: 100%;
    height: var(--class-img-height);
    overflow: hidden;
    background-color: #1a1a1a; 
    border-bottom: 1px solid var(--border-color);
}

.class-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centra y encaja la foto sin deformarla */
    object-position: center; 
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.class-item:hover .class-real-img {
    transform: scale(1.04); /* Micro-zoom suave al pasar el mouse */
}


.class-info {
    padding: 24px;
}

.class-category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.class-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 8px 0 16px 0;
}

.class-link {
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
}

.class-item:hover .class-link {
    padding-left: 6px;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .classes-header-block {
        flex-direction: column;
        align-items: flex-start;
    }
    .classes-slider-controls {
        display: none; /* En teléfonos se usa el deslizamiento táctil directo */
    }
}

/* --- EFECTO TEXTO GIGANTE ANIMADO (MARQUESINA) --- */
/* --- EFECTO MARQUESINA SECUENCIAL CON IMAGEN DE FONDO REALISTA --- */
.cta-section {
    position: relative;
    max-width: 100%;
    margin: 0 auto 100px auto;
    
    /* CONFIGURACIÓN DEL ALTO: Ajusta los paddings (arriba y abajo) para darle más o menos altura a la sección */
    padding: 80px 20px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;     /* Centra todo horizontalmente */
    justify-content: center; /* Centra todo verticalmente */
    gap: 32px;               /* Separación uniforme entre Marquesina -> Descripción -> Botón */
    overflow: hidden;
    
    /* Configuración de la Imagen de Fondo limpia (Sin velos oscuros) */
    background-image: url('images/fondo2.avif'); /* Archivo local */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Contenedor de la pista de animación */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    user-select: none;
    padding: 10px 0;
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    animation: scroll-marquee 20s linear infinite;
}

.marquee-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
}

/* Letras gigantes al frente de la imagen */
.marquee-content span {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8); /* Borde blanco muy nítido para resaltar sobre la foto */
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -2px;
    transition: var(--transition);
}

/* Efecto al pasar el cursor: el texto se rellena por completo */
.marquee-wrapper:hover .marquee-content span {
    color: var(--accent);
    -webkit-text-stroke: 1.5px var(--accent);
}

@keyframes scroll-marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

/* Texto descriptivo estático ubicado exactamente DEBAJO */
.marquee-static-desc {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 650px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); /* Mantiene la lectura impecable sobre fondos claros o detallados */
}

/* Botón estático ubicado exactamente DEBAJO de la descripción */
.marquee-static-btn {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* --- CONTENEDOR DEL FORMULARIO Y FOOTER --- */
.cta-container {
    max-width: 1200px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 80px 40px;
    border-radius: 32px;
    text-align: center;
    margin: 0 auto;
}

.cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.cta-desc {
    color: var(--text-muted);
    margin-bottom: 40px;
}

.cta-form {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.form-input {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 16px 24px;
    border-radius: 40px;
    color: var(--text-primary);
    font-family: var(--font-body);
    outline: none;
    transition: var(--transition);
}

.form-input:focus {
    border-color: var(--text-muted);
}

/* ==========================================================================
   PIE DE PÁGINA PREMIUM (IDENTICO A FRAMER MATRIZ)
   ========================================================================== */
.footer-premium {
    background-color: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    padding: 100px 0 0 0; /* Mayor espacio superior para dar aire al diseño */
    width: 100%;
}

/* Rejilla principal asimétrica */
.footer-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
    display: grid;
    /* Distribución premium: la 1ª y 4ª columna toman más espacio */
    grid-template-columns: 2fr 1fr 1fr 2fr; 
    gap: 48px;
}

/* --- COLUMNA 1: LOGO Y REDES --- */
/* --- CONTROL DE TAMAÑO DEL LOGO EN EL FOOTER --- */
.footer-logo-wrapper {
    /* ALTURA PERSONALIZABLE: Cambia este número (ej. 30px, 45px, 50px) para ajustar el tamaño a tu gusto */
    --footer-logo-height: 40px; 
    
    display: flex;
    align-items: center;
    height: var(--footer-logo-height);
    margin-bottom: 8px; /* Pequeña separación respecto al texto descriptivo de abajo */
}

.footer-logo-link {
    display: block;
    height: 100%;
}

.footer-logo-img {
    height: 100%;       /* Fuerza a la imagen a respetar estrictamente el alto de la variable */
    width: auto;        /* Mantiene la proporción original para que nunca se deforme o aplaste */
    object-fit: contain;
    display: block;
    transition: var(--transition);
}

.footer-logo-link:hover .footer-logo-img {
    opacity: 0.85;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-logo {
    display: inline-block;
    font-size: 1.6rem;
}

.brand-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 320px;
}

.footer-social-icons {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.footer-social-icons a {
    color: var(--text-muted);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.footer-social-icons a svg {
    width: 18px;
    height: 18px;
}

.footer-social-icons a:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.02);
    transform: translateY(-2px);
}

/* --- COLUMNAS 2 Y 3: LISTAS DE ENLACES --- */
.footer-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-list a {
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: var(--transition);
}

.footer-list a:hover {
    color: var(--text-primary);
    padding-left: 4px; /* Microinteracción premium al deslizar */
}

/* --- COLUMNA 4: FORMULARIO NEWSLETTER --- */
.footer-newsletter-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.newsletter-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 340px;
}

/* Campo integrado minimalista */
.footer-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
}

.footer-input {
    width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 16px 60px 16px 20px; /* Espacio extra a la derecha para que no pise el botón */
    border-radius: 30px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.footer-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.02);
}

/* Botón flecha metido dentro del input */
.footer-submit-btn {
    position: absolute;
    right: 6px;
    background-color: var(--accent);
    color: var(--bg-dark);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.footer-submit-btn svg {
    width: 18px;
    height: 18px;
}

.footer-submit-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* --- FILA INFERIOR DE CRÉDITOS --- */
.footer-bottom-bar {
    border-top: 1px solid var(--border-color);
    padding: 32px 20px;
    width: 100%;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.copyright {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-legal-links {
    display: flex;
    gap: 24px;
}

.footer-legal-links a {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: var(--transition);
}

.footer-legal-links a:hover {
    color: var(--text-primary);
}

/* RESPONSIVE PARA DISPOSITIVOS MÓVILES */
@media (max-width: 968px) {
    .footer-grid-container {
        grid-template-columns: 1fr 1fr; /* Pasa a 2 columnas en tablets */
        gap: 40px;
    }
}

@media (max-width: 580px) {
    .footer-premium {
        padding-top: 60px;
    }
    .footer-grid-container {
        grid-template-columns: 1fr; /* 1 sola columna en pantallas móviles */
        gap: 36px;
        padding-bottom: 48px;
    }
    .footer-bottom-container {
        flex-direction: column-reverse; /* Mandar los legales arriba del copyright en celular */
        text-align: center;
        gap: 16px;
    }
    .footer-legal-links {
        justify-content: center;
    }
}


/* ==========================================================================
   SECCIÓN: CREATING CHOREOGRAPHY MAGIC
   ========================================================================== */
.pros-tips-section {
    position: relative;
    max-width: 100%;
    margin: 0 auto 100px auto;
    
    /* CONFIGURACIÓN DE ALTURA: Modifica estos valores para ampliar o reducir el alto de la sección */
    padding: 120px 20px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-dark); /* Color de respaldo mientras carga la imagen */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Manejo de la imagen de fondo local */
.pros-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* RUTA DE LA IMAGEN: Cambia 'coreografia-bg.jpg' por el nombre de tu archivo local */
    background-image: url('images/fondo2.avif'); 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Velo sutil opcional: asegura que las letras blancas no se pierdan si tu imagen es muy clara */
.pros-bg-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.4); /* Cambia a 0 si quieres la imagen 100% limpia */
}

/* Contenedor del contenido sobre el fondo */
.pros-container {
    position: relative;
    max-width: 850px;
    width: 100%;
    text-align: center;
    z-index: 2; /* Por encima de la imagen de fondo */
    display: flex;
    flex-direction: column;
    gap: 40px; /* Separación limpia entre el bloque de texto y los botones */
}

.pros-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pros-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    backdrop-filter: blur(4px);
}

.pros-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 4.5rem); /* Escalado fluido idéntico a Framer */
    line-height: 1.1;
    letter-spacing: -2px;
    color: var(--text-primary);
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.pros-desc {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    max-width: 680px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Contenedor de los dos botones */
.pros-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* Estilo del segundo botón adaptado para resaltar sobre imágenes */
.pros-btn-secondary {
    background-color: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.pros-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

/* Adaptación para pantallas móviles */
@media (max-width: 580px) {
    .pros-actions {
        flex-direction: column; /* Los botones se apilan verticalmente en móviles */
        width: 100%;
        gap: 12px;
    }
    .pros-actions .btn {
        width: 100%; /* Botones a lo ancho total de la pantalla móvil */
    }
}


/* ==========================================================================
   SECCIÓN DE TESTIMONIOS (TIPO SLIDER)
   ========================================================================== */
.testimonials-section {
    background-color: var(--bg-dark);
    width: 100%;
    overflow: hidden;
}

/* Alinea el encabezado y los botones en la misma línea */
.testimonials-header-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 20px;
}

.testimonials-header-block .section-header {
    margin-bottom: 0; /* Resetea el margen inferior por defecto */
}

/* Botones de control del Slider */
.slider-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

/* Botones de control del Slider Estilizados */
.slider-btn {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted); /* Color suave inicial */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

/* Control exacto del tamaño del icono SVG interno */
.slider-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efecto hover premium: fondo blanco, flecha negra y ligera micro-interacción */
.slider-btn:hover {
    background-color: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
}

.prev-btn:hover svg {
    transform: translateX(-2px); /* Empuja la flecha sutilmente a la izquierda */
}

.next-btn:hover svg {
    transform: translateX(2px);  /* Empuja la flecha sutilmente a la derecha */
}

/* Envoltura con máscara de recorte */
.slider-wrapper {
    width: 100%;
    overflow-x: auto;
    cursor: grab;
    padding-bottom: 20px;
    
    /* Ocultar barra de scroll en navegadores modernos */
    scrollbar-width: none; 
}

.slider-wrapper::-webkit-scrollbar {
    display: none; /* Ocultar barra de scroll en Chrome/Safari */
}

.slider-wrapper:active {
    cursor: grabbing;
}

/* Tira interna que contiene las tarjetas alineadas horizontalmente */
.testimonials-slider {
    display: flex;
    gap: 24px;
    width: max-content;
    padding-right: 20px;
}

/* Configuración de Tarjeta fija para el Slider */
.testimonial-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 36px;
    border-radius: 24px;
    width: 380px; /* Ancho fijo para cada tarjeta en el carrusel */
    max-width: 85vw; /* Previene desbordes toscos en pantallas pequeñas */
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testimonial-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.testimonial-stars {
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 2px;
}

.testimonial-quote {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-top: auto; 
}

.user-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.user-role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Adaptación responsive */
@media (max-width: 768px) {
    .testimonials-header-block {
        flex-direction: column;
        align-items: flex-start;
    }
    .slider-controls {
        display: none; /* En móviles se prefiere el deslizamiento táctil directo nativo */
    }
    .testimonial-card {
        padding: 24px;
    }
}

/* ==========================================================================
   SECCIÓN: LET THE RHYTHM MOVE YOU (DOS COLUMNAS + IMAGEN DE FONDO)
   ========================================================================== */
.rhythm-two-col-section {
    position: relative;
    width: 100%;
    margin: 0 auto 100px auto;
    
    /* CONFIGURACIÓN DE ALTURA: Ajusta los paddings (arriba y abajo) para definir el alto de la sección */
    padding: 120px 0; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-dark); /* Respaldo */
}

/* Control estricto de la imagen de fondo local sin velos oscuros */
.rhythm-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* RUTA LOCAL: Modifica 'rhythm-bg.jpg' por el nombre de tu archivo de imagen local */
    background-image: url('images/fondo2.avif'); 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Rejilla principal en dos columnas */
.rhythm-grid-container {
    position: relative;
    max-width: 1200px;
    width: 100%;
    padding: 0 40px;
    z-index: 2; /* Por encima de la imagen de fondo */
    
    display: grid;
    /* La columna del texto toma la gran mayoría del espacio (3 partes) y el botón el resto (1 parte) */
    grid-template-columns: 3fr 1fr; 
    align-items: center; /* Alinea verticalmente el texto y el botón al centro */
    gap: 40px;
}

/* Columna Izquierda */
.rhythm-text-side {
    text-align: left;
}

.rhythm-main-title {
    font-family: var(--font-heading);
    font-weight: 800;
    /* Escalado fluido idéntico a Framer */
    font-size: clamp(2.2rem, 4.5vw, 4.8rem); 
    line-height: 1.1;
    letter-spacing: -2px;
    color: var(--text-primary);
    text-transform: uppercase;
    /* Sombra sutil para despegar las letras de cualquier fondo texturizado o foto */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); 
}

/* Columna Derecha */
.rhythm-btn-side {
    display: flex;
    justify-content: flex-end; /* Empuja el botón hacia el extremo derecho */
}

.rhythm-action-btn {
    padding: 18px 40px;
    font-size: 1rem;
    white-space: nowrap; /* Evita que el texto del botón se corte en dos líneas */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ADAPTACIÓN AUTOMÁTICA PARA MÓVILES (RESPONSIVE) */
@media (max-width: 968px) {
    .rhythm-grid-container {
        /* En pantallas medianas y pequeñas se transforma en una sola columna vertical */
        grid-template-columns: 1fr; 
        gap: 32px;
        padding: 0 24px;
    }
    
    .rhythm-text-side {
        text-align: center; /* Centramos el texto en móviles */
    }
    
    .rhythm-btn-side {
        justify-content: center; /* Centramos el botón en móviles */
        width: 100%;
    }
    
    .rhythm-action-btn {
        width: 100%; /* El botón ocupa todo el ancho disponible en celulares para facilitar el clic */
        text-align: center;
    }
    
    .rhythm-two-col-section {
        padding: 80px 0; /* Reducimos un poco la altura en celulares */
    }
}

/* ==========================================================================
   SECCIÓN: UNVEIL THE MAGIC (RÉPLICA ASIMÉTRICA ABOUT US)
   ========================================================================== */
.magic-unveil-section {
    background-color: var(--bg-dark);
    width: 100%;
    padding: 120px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Rejilla adaptativa en dos columnas balanceadas */
.magic-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    /* Divide el espacio: 1.2 partes para el texto y 1 parte para el video */
    grid-template-columns: 1.2fr 1fr; 
    align-items: center; /* Alineación vertical centralizada */
    gap: 64px; /* Separación amplia entre columnas estilo Framer */
}

/* --- COLUMNA DE TEXTOS --- */
.magic-text-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.magic-small-badge {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.magic-large-title {
    /* 1. Llama a la variable de la fuente original (Syne) */
    font-family: var(--font-heading); 
    
    /* 2. Aplica el peso extra grueso característico de la plantilla */
    font-weight: 800; 
    
    /* 3. Forzar mayúsculas para un look más imponente (Opcional, estilo Framer) */
    text-transform: uppercase; 
    
    /* 4. Junta un poco las letras para que se vea compacto y premium */
    letter-spacing: -2px; 
    line-height: 1.1;
    
    /* Ajuste de tamaño fluido responsivo */
    font-size: clamp(2.2rem, 4.5vw, 4.8rem); 
    color: var(--text-primary);
}

.magic-description {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 560px;
    margin-bottom: 40px;
}

/* Contenedor de botones paralelos */
.magic-action-buttons {
    display: flex;
    gap: 16px;
    width: 100%;
}

.magic-btn-main {
    padding: 16px 36px;
}

.magic-btn-alt {
    padding: 16px 36px;
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- COLUMNA DE VIDEO --- */
.magic-video-column {
    width: 100%;
}

/* Marco contenedor con proporciones idénticas a Framer */
.magic-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 110%; /* Relación de aspecto vertical estilizada (portrait/cuadrada) */
    border-radius: 28px; /* Bordes dramáticos curvos de la maqueta original */
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.magic-local-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta el video para rellenar todo el espacio del marco */
    pointer-events: none;
}

/* --- OPTIMIZACIÓN RESPONSIVA PARA DISPOSITIVOS MÓVILES --- */
@media (max-width: 968px) {
    .magic-grid-container {
        grid-template-columns: 1fr; /* Columna única en tablets y teléfonos */
        gap: 48px;
        padding: 0 24px;
    }

    .magic-text-column {
        align-items: center;
        text-align: center; /* Centrado de textos en móvil */
    }

    .magic-description {
        margin-bottom: 32px;
    }

    .magic-action-buttons {
        justify-content: center;
        flex-direction: column; /* Botones apilados verticalmente en celulares */
        gap: 12px;
    }

    .magic-action-buttons .btn {
        width: 100%; /* Botones expandidos al ancho total */
        text-align: center;
    }

    .magic-video-wrapper {
        padding-top: 70%; /* En móviles el marco de video se aplana a un formato más horizontal */
    }
}

/* ==========================================================================
   GALERÍA MATRIZ: SLIDER COMPLETO, CONTROL TÁCTIL Y FANCYBOX MODAL
   ========================================================================== */
.framer-gallery-section {
    background-color: var(--bg-dark);
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
}

.framer-gallery-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 56px;
}

/* --- 1. ESTILOS DEL SLIDER EN PÁGINA (CON FLECHAS Y TÁCTIL) --- */
.gallery-carousel-viewport {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.gallery-slider-wrapper {
    width: 100%;
    overflow-x: auto;
    cursor: grab;
    /* Movimiento fluido nativo y anclaje estricto para el dedo en móviles */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory; 
    scrollbar-width: none; /* Oculta la barra en Firefox */
    padding: 10px 0;
}
.gallery-slider-wrapper::-webkit-scrollbar { 
    display: none; /* Oculta la barra en Chrome, Safari y Edge */
}
.gallery-slider-wrapper:active { 
    cursor: grabbing; 
}

.gallery-slider-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 0 10px;
}

/* Tarjeta individual adaptada para frenar limpiamente al deslizar */
.gallery-item {
    position: relative;
    width: 360px;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    scroll-snap-align: start; /* Bloqueo de tarjeta táctil */
}

.gallery-img-box {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Velo negro superpuesto para el efecto Hover */
.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Icono de Ojo minimalista de Framer */
.eye-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.eye-icon svg { 
    width: 24px; 
    height: 24px; 
}

/* Microinteracciones Hover */
.gallery-item:hover .gallery-img-box { transform: scale(1.04); }
.gallery-item:hover .gallery-hover-overlay { opacity: 1; }
.gallery-item:hover .eye-icon { transform: scale(1); }

/* FLECHAS DE LOS EXTREMOS LATERALES */
.gallery-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.gallery-nav-arrow svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.gallery-nav-arrow:hover {
    background-color: var(--accent);
    color: var(--bg-dark);
    border-color: var(--accent);
}

/* Ubicación exacta desbordando sutilmente el contenedor */
.gall-prev-arrow { left: -20px; }
.gall-next-arrow { right: -20px; }

.gall-prev-arrow:hover svg { transform: translateX(-2px); }
.gall-next-arrow:hover svg { transform: translateX(2px); }


/* --- 2. ESTILOS DEL FANCYBOX MODAL EXPANSIÓN (PANTALLA COMPLETA) --- */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 6, 6, 0.98); /* Oscurece por completo la hoja trasera */
    z-index: 1000;
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Activación por JS */
.lightbox-modal.active {
    display: flex;
    opacity: 1;
}

/* Contenedor central de la foto gigante */
.lightbox-main-container {
    max-width: 80%;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

#lightbox-main-img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* Botón de Cierre Estético Superior */
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.lightbox-close svg { width: 28px; height: 28px; }
.lightbox-close:hover { color: var(--text-primary); transform: rotate(90deg); }

/* Flechas de Navegación internas del Modal */
.lightbox-nav {
    position: absolute;
    top: 45%;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-nav:hover { background-color: var(--accent); color: var(--bg-dark); }
.lightbox-prev { left: 40px; }
.lightbox-next { right: 40px; }

/* Carrusel de Miniaturas Inferiores */
.lightbox-thumb-container {
    width: auto;
    max-width: 90%;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}
.lightbox-thumb-container::-webkit-scrollbar { display: none; }

.lightbox-thumb-track {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.thumb-item {
    width: 70px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    border: 2px solid transparent;
    transition: var(--transition);
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* Indicador de Miniatura Seleccionada */
.thumb-item.active-thumb {
    opacity: 1;
    border-color: var(--accent);
}

/* RESPONSIVE: AJUSTES PARA SMARTPHONES Y TABLETS */
@media (max-width: 768px) {
    /* Ocultamos las flechas exteriores e interiores para dar prioridad al deslizamiento táctil nativo */
    .gallery-nav-arrow, 
    .lightbox-nav { 
        display: none; 
    }
    .lightbox-main-container { 
        max-width: 95%; 
    }
    .lightbox-close { 
        right: 20px; 
        top: 20px; 
    }
    .gallery-item { 
        width: 280px; 
        height: 380px; 
    }
}