/* 1. FUENTES LOCALES */
@font-face {
    font-family: 'Helvetica-Thin';
    src: url('../assets/fonts/Helvetica/HelveticaNowDisplay-Thin.woff2') format('woff2');
    font-weight: 100;
}
@font-face {
    font-family: 'Helvetica-Medium';
    src: url('../assets/fonts/Helvetica/HelveticaNowDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
}
@font-face {
    font-family: 'P22-Freely';
    src: url('../assets/fonts/P22FreelyRegular.ttf') format('truetype');
}
/* 2. IMPORTACIONES EXTERNAS */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap&subset=latin-ext');

/* 4. RESETEO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100%;
    background-color: #101010;
    overflow-x: hidden;
}

/* main.css */
/* main.css */
.line1, .line2 {
    display: inline-block; /* Permite que el clip-path y las transformaciones funcionen[cite: 9] */
    clip-path: inset(0 0 0 0);
    white-space: nowrap;
}

/* --- CUSTOM SCROLLBAR --- */
.snap-container::-webkit-scrollbar {
    width: 12px; 
}

.snap-container::-webkit-scrollbar-track {
    background: #1A1A1A; 
    border-radius: 10px;
}

.snap-container::-webkit-scrollbar-thumb {
    background: #FF6300; 
    border-radius: 10px;
    border: 3px solid #1A1A1A; 
}

.snap-container {
    scrollbar-width: auto; 
    scrollbar-color: #FF6300 #1A1A1A;
}

/* --- 3. ESTRUCTURA GLOBAL Y SNAP --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* MOBILE */
@media (max-width: 1023px) {
    .snap-section {
        min-height: 100vh;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .main-header {
        width: 100% !important; 
        left: 0 !important;
        transform: none !important;
        padding: 20px 0; 
    }

    .main-header .container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }
}

/* DESKTOP */
@media (min-width: 1024px) {
    body {
        height: 100vh;
        overflow: hidden;
    }

    .snap-container {
            height: 100vh;
            overflow-y: auto; 
            scroll-snap-type: none; 
            scroll-behavior: auto !important; 
            
    }

    .snap-section {
        height: 100vh;
        width: 100%;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }   
}

/* botón home */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #FF6300;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center; 
    z-index: 2000;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.back-to-top svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: #101010; 
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Ajuste Mobile */
@media (max-width: 1023px) {
    .back-to-top {
        bottom: 25px;
        right: 25px;
        width: 48px;
        height: 48px;
    }
    
    .back-to-top svg {
        width: 22px;
        height: 22px;
    }
}

/* --- 4. HEADER Y NAVEGACIÓN --- */
/* --- 4. HEADER Y NAVEGACIÓN --- */
.main-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Fondo completo para el blur */
    padding: 40px 0;
    z-index: 1000;
    background: transparent;
    transition: all 0.4s ease; /* Transición suave para padding y background */
    pointer-events: none; /* Deja pasar clicks al contenido de fondo */
}

.main-header .container {
    flex-direction: row; 
    justify-content: center; /* Centra los links al inicio */
    pointer-events: auto; /* Reactiva clicks para los elementos del menú */
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;    /* ESTO centra verticalmente todo el contenido */
    height: 100%;
}

/* Estado del Header con Scroll (activado por JS) */
.main-header.scrolled {
    padding: 20px 0; /* Header más compacto */
    background: rgba(16, 16, 16, 0.4); /* Fondo oscuro semitransparente */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Navegación Desktop (Lista de links) */
.nav-desktop {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.nav-desktop ul {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-desktop a {
    display: inline-block;
    font-family: 'Helvetica-Medium', sans-serif;
    color: #FFF4CC;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    transition: all 0.4s ease;
}

.nav-desktop a:hover, 
.nav-desktop a.active {
    color: #FF6300;
    border-bottom: 2px solid #FF6300;
}

/* --- NAVEGACIÓN DESKTOP DESPLEGADA (MODO PRO) --- */
@media (min-width: 1024px) {
    /* Fondo del menú abierto */
    .main-header.scrolled .nav-desktop.is-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(16, 16, 16, 0.98); 
        backdrop-filter: blur(20px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        z-index: 1050;
    }

    /* Lista de links en modo Pro */
    .main-header.scrolled .nav-desktop.is-active ul {
        flex-direction: column;
        align-items: flex-start; /* Alineación izquierda para estilo editorial */
        gap: 25px;
    }

    /* Estilo de los links individuales */
    .main-header.scrolled .nav-desktop.is-active a {
        font-family: 'Anton', sans-serif;
        font-size: 5rem; /* Tamaño grande de impacto */
        color: #FFF4CC;
        text-transform: uppercase;
        border: none;
        line-height: 1;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        padding-bottom: 0;
    }

    /* Contador numérico (01, 02, etc) */
    .main-header.scrolled .nav-desktop.is-active li {
        counter-increment: nav-counter-desktop;
        position: relative;
    }

    .main-header.scrolled .nav-desktop.is-active li::before {
        content: "0" counter(nav-counter-desktop);
        position: absolute;
        left: -60px;
        top: 25px;
        font-family: 'Helvetica-Medium', sans-serif;
        font-size: 1rem;
        color: #FF6300;
    }

    /* Efecto Hover */
    .main-header.scrolled .nav-desktop.is-active a:hover {
        color: #FF6300;
        transform: translateX(30px); /* Desplazamiento elegante */
    }
}




/* --- NAVEGACIÓN MOBILE PROFESIONAL --- */
@media (max-width: 1023px) {
    .nav-desktop {
        background-color: rgba(16, 16, 16, 0.98); /* Más opaco para elegancia */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alineado a la izquierda para look editorial */
        padding-left: 10%;
    }

    /* Logo sutil de fondo para reforzar marca */
    .nav-desktop::before {
        position: absolute;
        bottom: 5%;
        right: -5%;
        font-family: 'Anton', sans-serif;
        font-size: 12rem;
        color: rgba(255, 255, 204, 0.03); /* Muy sutil */
        z-index: -1;
        pointer-events: none;
    }

    .nav-desktop ul {
        align-items: flex-start; /* Alineación izquierda */
        gap: 20px;
    }

    .nav-desktop a {
        font-family: 'Anton', sans-serif; /* Usamos la fuente principal */
        font-size: 3.5rem; /* Tamaño grande tipo editorial */
        color: #FFF4CC;
        text-transform: uppercase;
        border: none; /* Quitamos el borde inferior */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    /* Efecto de número al lado del link */
    .nav-desktop li {
        counter-increment: nav-counter;
        position: relative;
    }

    .nav-desktop li::before {
        content: "0" counter(nav-counter);
        position: absolute;
        left: -40px;
        top: 15px;
        font-family: 'Helvetica-Medium', sans-serif;
        font-size: 0.8rem;
        color: #FF6300;
    }

    /* Hover/Active: Cambio de color y desplazamiento */
    .nav-desktop a:hover, 
    .nav-desktop a.active {
        color: #FF6300;
        transform: translateX(15px);
    }
}

@media (max-width: 1023px) {
    .nav-overlay {
        display: block; /* Lo activamos solo para mobile */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Overlay negro con opacidad */
        backdrop-filter: blur(4px); 
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
        z-index: 998;
    }

    /* Solo se muestra cuando el menú está abierto */
    .nav-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    .nav-desktop {
        /* Tu menú ahora ocupa solo una parte */
        width: 70%; 
        right: -100%; /* Escondido */
        background-color: #101010;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    .nav-desktop.is-active {
        right: 0; /* Entra desde la derecha */
    }
}

/* --- BOTÓN HAMBURGUESA (Configuración base) --- */
.menu-toggle {
    display: none; /* Oculto por defecto en la primera sección */
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 10px;
    position: absolute;
    /* transition: all 0.3s ease; No transicionamos posición aquí */
}

.menu-toggle .bar {
    width: 30px;
    height: 3px;
    background-color: #FFF4CC;
    transition: all 0.3s ease;
}

/* Animación de Hamburguesa a X */
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* --- COMPORTAMIENTO DESKTOP CON SCROLL (min-width: 1024px) --- */
@media (min-width: 1024px) {
    
    /* 1. Al hacer scroll, ocultamos la lista centrada SI el menú no está abierto */
    /* Añadimos !important para sobreescribir cualquier estilo inline de GSAP */
    .main-header.scrolled .nav-desktop:not(.is-active) {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px);
        pointer-events: none; /* Evita que los links sean clickeables mientras están ocultos */
        transition: all 0.4s ease;
    }

    /* 2. Mostramos la hamburguesa a la DERECHA, alineada con el botón Home */
    .main-header.scrolled .menu-toggle {
        display: flex !important; /* Forzamos que aparezca al hacer scroll */
        right: 30px; 
        position: absolute;
    }

    /* 3. Estilos del menú desplegado (is-active) en Desktop con scroll */
    /* Usamos especificidad alta para asegurar que se muestre al activarse */
    .main-header.scrolled .nav-desktop.is-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(16, 16, 16, 0.98); 
        display: flex !important; /* Sobreescribe el ocultamiento anterior */
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
        pointer-events: auto; /* Reactivamos los clicks */
        z-index: 1050;
    }

    .main-header.scrolled .nav-desktop.is-active ul {
        display: flex !important; /* Asegura que la lista sea visible */
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .main-header.scrolled .nav-desktop.is-active a {
        font-size: 2rem; 
        border: none;
    }
}

/* --- RESPONSIVE MOBILE (max-width: 1023px) --- */
@media (max-width: 1023px) {
    .main-header {
        
        padding: 20px 0;
        width: 100% !important;
        height: 60px;
        left: 0 !important;
        transform: none !important;
            background: rgba(16, 16, 16, 0.4); /* Fondo oscuro semitransparente */
    backdrop-filter: blur(15px);
    }

    .menu-toggle {
        display: flex; /* Siempre visible en mobile */
        right: 20px; /* Posición estándar mobile */
    }

    .nav-desktop {
        position: fixed;
        top: 0;
        right: -100%; /* Oculto a la derecha */
        width: 100%;
        height: 100vh;
        background-color: rgba(16, 16, 16, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-desktop.is-active {
        right: 0; /* Desliza hacia adentro */
    }

    .nav-desktop ul {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .nav-desktop a {
        font-size: 1.5rem;
    }
}

/* --- 5. SECCIÓN HERO Y TIPOGRAFÍA --- */
/* Reemplaza o modifica tu estilo de #hero */
#hero {
    position: relative;
    overflow: hidden;
    background-color: #101010; /* Color de respaldo */
}

/* Contenedor principal del slider */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Por debajo de los textos */
}

/* 1. Contenedor y Velo Oscuro */
#hero {
    position: relative;
    overflow: hidden;
    background-color: #101010;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.5); /* Oscurecimiento permanente */
    z-index: 2; /* Por encima de las fotos, debajo del texto */
    pointer-events: none;
}

/* 2. Slider y Slides */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    /* 12s total: 4s por cada una de las 3 imágenes */
    animation: crossfade-kenburns 12s infinite; 
}

/* 3. Delays para 3 imágenes */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

/* 4. Animación Combinada: Opacidad + Zoom */
@keyframes crossfade-kenburns {
    0% { 
        opacity: 0; 
        transform: scale(1); 
    }
    5% { 
        opacity: 1; 
    }
    33% { 
        opacity: 1; 
        /* El zoom continúa mientras la imagen es visible */
    }
    40% { 
        opacity: 0; 
        transform: scale(1.1); /* Termina un poco más grande para el efecto premium */
    }
    100% { 
        opacity: 0; 
    }
}

/* 5. Asegurar que el texto resalte */
#hero .container {
    position: relative;
    z-index: 3;
}

/* Asegurar que el container de textos esté por encima */
#hero .container {
    position: relative;
    z-index: 2; /* Importante para que el texto sea legible */
}

/* Capa extra de contraste (opcional pero recomendada para legibilidad) */
#hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.562); /* Oscurece un poco las fotos */
    z-index: 1;
}

/* Creamos el overlay oscuro */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ajusta el 0.6 (60%) para más o menos oscuridad */
    background-color: rgba(16, 16, 16, 0.452); 
    z-index: 2; /* Por encima de los slides, por debajo del texto */
    pointer-events: none; /* Para que no interfiera con clicks */
}

/* Ajustamos los Z-INDEX para que todo encaje */
.hero-slider {
    z-index: 1; /* El nivel más bajo (las fotos) */
}

#hero .container {
    position: relative;
    z-index: 3; /* El nivel más alto (los textos) */
}

.container h1, 
.font-anton {
    font-family: 'Anton', sans-serif;
    color: #FF6300;
    line-height: 0.8;
    margin: 0;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container h1 {
    font-size: 150px;
    letter-spacing: -2px;
    font-stretch: condensed;
}

.font-anton {
    font-size: clamp(5rem, 18vw, 12rem);
}

.container p, 
.font-accent {
    font-family: 'P22-Freely', cursive;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container p {
    font-size: 55px;
    color: #FFF4CC;
    line-height: 0.7;
    margin-top: -13px; 
    position: relative;
    z-index: 2;
}

.font-accent {
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    color: #ffffff;
    margin-top: -20px;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .container h1 {
        font-size: 80px; 
        text-align: center;
    }

    .container p {
        font-size: 32px; 
        text-align: center;
        margin-top: -5px;
        line-height: 0.7;
    }

    #hero {
        background-attachment: scroll; 
        background-position: 70% center; 
    }
}

/* ------- SECCION COUNTDOWN ------- */

/* --- SECCIÓN COUNTDOWN --- */
#countdown {
    background-color: #101010;
    overflow: hidden;
}

.countdown-wrapper {
    display: flex;
    width: 100%;
    height: 100vh; 
}

/* Bloque de Imagen (Derecha) */
.countdown-image {
    flex: 1.3;
    height: 100vh; 
    overflow: hidden; 
}

.countdown-image img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    object-position: left center; 
    display: block; 
}

/* Bloque de contenido (Izquierda) */
.countdown-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 150px;
    background-color: #101010;
}

.countdown-content h2 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(2.5rem, 5vw, 55px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-stretch: condensed;
    font-weight: 400;
    color: #FFF4CC;
    line-height: 1.1;
    margin-bottom: 40px;
    max-width: 800px;
    text-align:left;
}

.countdown-content h2 .accent-color {
    color: #FF6300;
}

/* --- TIMER REFINADO --- */
/* Alineación exacta con el título */
.time-block:first-child {
    padding-left: 0;
}

.countdown-content {
    align-items: flex-start; 
}

.timer {
    justify-content: flex-start; 
}

.timer {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 25px; 
    position: relative;
}

.time-block:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: -5%;
    height: 80%;
    width: 1px;
    background: linear-gradient(
        to bottom, 
        transparent, 
        #FF6300 20%, 
        #FF6300 80%, 
        transparent
    );
}

.time-block .number {
    font-family: 'Anton', sans-serif;
    font-size: clamp(4rem, 8vw, 6rem);
    color: #FFF4CC;
    line-height: 0.9;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}


.time-block .number::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; 
    height: 1px; 
    
    background: linear-gradient(
        to right, 
        transparent, 
        #FF6300 20%, 
        #FF6300 80%, 
        transparent
    );
    
    border-radius: 0; 
}

.time-block .label {
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 11px;
    color: #FFF4CC;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 10px;
    opacity: 0.9;
}

.time-block .number {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-out;
}

/* --- AJUSTE PARA PANTALLAS CHICAS --- */

@media (max-width: 1023px) {
    #countdown.snap-section {
        padding: 0; 
        display: block; 
        height: 100vh;
    }

    .countdown-wrapper {
        flex-direction: column;
        height: 100%;
        width: 100%;
        display: flex;
    }

    .countdown-content {
        width: 100%;
        padding: 20px 20px 20px 20px;
        align-items: center; 
        text-align: center;
        flex: 1; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .countdown-content h2 {
        font-size: 2.3rem; 
        text-align: center;
        line-height: 1.1; 
        margin-bottom: 30px;
    }

    .countdown-image {
        width: 100%;
        height: 50vh; 
        flex: none;
        margin: 0; 
    }

    .countdown-image img {
        content: url('../assets/img/contador-mobile.webp'); 
        width: 100vw; 
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }

    /* --- TIMER: IGUAL A DESKTOP PERO MINI --- */
    .timer {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 85%;
        gap: 0; 
        padding: 0;
    }

    .time-block {
        flex: 1; 
        padding-left: 0; 
        padding-right: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .time-block:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0%;
        top: -10%; 
        height: 80%; 
        width: 1px;
        background: linear-gradient(
            to bottom, 
            transparent, 
            #FF6300 20%, 
            #FF6300 80%, 
            transparent
        );
    }

    .time-block .number {
        font-size: clamp(2.2rem, 11vw, 3rem); 
        padding-bottom: 15px; 
        line-height: 0.9; 
        position: relative;
        display: inline-block;
    }

    .time-block .number::after {
        content: '';
        position: absolute;
        bottom: 2;
        left: 50%;
        transform: translateX(-50%);
        width: 50px; 
        height: 1px;
        background: linear-gradient(
            to right, 
            transparent, 
            #FF6300 20%, 
            #FF6300 80%, 
            transparent
        );
    }

    .time-block .label {
        font-size: 8px; 
        letter-spacing: 2px;
        margin-top: 12px;
        white-space: nowrap;
        opacity: 0.9;
    }
}

/* ================================================================================================================== */
/* --- 6. SUPER GALERIA --- */
/* ================================================================================================================== */


/* Contenedor general de la sección */
.gallery-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden; 
    box-sizing: border-box;
}

/* =============================================== */
/* Contenedor del título y descripción (izquierda) */
/* =============================================== */

.gallery-description-wrapper {
    flex: 0 0 35%; 
    box-sizing: border-box;
    padding-left: 150px;
    padding-right: 8%;
}


/* textos izquierda */
.gallery-description-wrapper h3 {
    font-size: 55px;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 55px;
    color: #FFF4CC;
}

.font-accent {
    color: #FF6300;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 0.5;
    width: 300px;
}

.gallery-description {
    font-family: 'Helvetica-Medium', sans-serif;
    color: #FFF4CC !important;
    font-size: 16px;
    line-height: 1.6;
    max-width: 450px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.gallery-description-wrapper a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border: 1px solid #FF6300;
    border-radius: 50px;
    text-decoration: none;
    color: #FF6300;
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    width: fit-content;
    transition: all 0.3s ease;
}

.gallery-description-wrapper a {
    background-color: transparent;
    color: #FF6300;
}

.gallery-description-wrapper a:hover {
    background: #ff6200be;
    color: #101010;
}


/* =============================================== */
/* Contenedor de la galería (derecha) */
/* =============================================== */

/* =============================================== */
/* Contenedor de la galería (derecha) */
/* =============================================== */

.gallery-grid-wrapper {
    width: 100%;
    margin: auto;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px; /* Aumentado de 180px para dar más altura a los elementos[cite: 1] */
    padding-right: 150px;
    gap: 15px;
}

/* BASE */
.gallery-item {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #fff4cc4b;
}

.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta según la foto: top, bottom, left, right o porcentajes */
    object-position: center 20%; 
    display: block;
    transition: transform 0.4s ease;
    pointer-events: none;
}

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

/* 1 - arriba izquierda (horizontal) */
.gallery-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* 2 - centro grande (vertical) */
.gallery-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* 3 - arriba derecha */
.gallery-item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* 4 - abajo izquierda (vertical grande) */
.gallery-item:nth-child(4) {
    grid-column: 1;
    grid-row: 2 / span 2;
}

/* 5 - abajo centro */
.gallery-item:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
}

/* 6 - derecha grande (vertical) */
.gallery-item:nth-child(6) {
    grid-column: 3;
    grid-row: 2 / span 2;
}

/* =============================================== */
/* LIGHTBOX */
/* =============================================== */

/* Fondo */
.sl-overlay {
    background: #0a0a0a !important; 
    opacity: 1 !important;
}

.sl-overlay {
    z-index: 99999 !important;
}
.sl-wrapper {
    z-index: 100000 !important;
}

/* Botones */
.sl-wrapper .sl-close, 
.sl-wrapper .sl-navigation button {
    color: #FF6300 !important;
    font-weight: 300;
}

/* Cerrar */
.sl-wrapper .sl-close {
    font-size: 3rem;
    right: 30px;
    top: 20px;
}

/* Contador */
.sl-wrapper .sl-counter {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 1rem;
}

/* Flechas */
.sl-wrapper .sl-navigation button {
    width: 60px !important; 
    height: 60px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #FFF4CC !important;
    backdrop-filter: blur(8px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0 !important;
    color: transparent !important;

    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;

    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Flecha icono */
.sl-wrapper .sl-navigation button:after {
    content: ''; 
    display: block;
    width: 12px; 
    height: 12px; 
    border-top: 2.5px solid #FFFFFF;
    border-right: 2.5px solid #FFFFFF;
    position: absolute;
}

/* Izquierda */
.sl-wrapper .sl-navigation button.sl-prev {
    left: 30px;
}
.sl-wrapper .sl-navigation button.sl-prev:after {
    transform: rotate(-135deg);
    margin-left: 4px;
}

/* Derecha */
.sl-wrapper .sl-navigation button.sl-next {
    right: 30px;
}
.sl-wrapper .sl-navigation button.sl-next:after {
    transform: rotate(45deg);
    margin-right: 4px;
}


/* =============================================== */
/* AJUSTE PARA NOTEBOOKS / PANTALLAS PEQUEÑAS */
/* =============================================== */

@media (max-height: 800px) {
    .gallery {
        grid-auto-rows: 160px; /* Achicamos un poco las filas para que no desborde */
        gap: 12px;
    }
    
    .gallery-description-wrapper h3 {
        font-size: 45px; /* Reducimos un poco el título también */
    }

    .gallery-description {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 14px;
    }
}

/* Hover */
.sl-wrapper .sl-navigation button:hover {
    background: #101010 !important;
    border-color: #FF6300 !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.sl-wrapper .sl-navigation button:hover:after {
    border-color: #FFFFFF;
}

.sl-counter {
    display: inline-block !important;
}

/* --- ADAPTACIÓN GALERÍA MOBILE --- */
@media (max-width: 1023px) {
    /* 1. Cambiamos la sección a flujo vertical */
    .gallery-section {
        flex-direction: column;
        height: auto; /* Permitimos que crezca con el contenido */
        overflow: visible;
        padding: 50px 20px; /* Espaciado superior para el header */
    }

    /* 2. Ajustamos el bloque de texto */
    .gallery-description-wrapper {
        flex: none;
        width: 100%;
        padding: 0;
        text-align: center;
        margin-bottom: 50px;
    }

    .gallery-description-wrapper h3 {
        font-size: 45px;
    }

     .gallery-description-wrapper .font-accent {
        font-size: 38px;
        line-height: 0.6;
        width: 100%;
    }

    .gallery-description {
        margin: 20px auto;
        max-width: 300px;
        font-size:14px;
    }

    /* 3. Reconfiguramos el Grid de imágenes */
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en mobile */
        grid-auto-rows: 200px; /* Altura más cómoda para pulgares */
        padding-right: 0; /* Quitamos el padding de desktop */
        gap: 10px;
    }

    /* 4. Reseteamos los posicionamientos específicos de Desktop */
    /* Forzamos a que todas las imágenes ocupen 1 celda para que fluyan solas */
    .gallery-item:nth-child(n) {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Opcional: Si quieres que algunas sigan siendo grandes en mobile */
    .gallery-item:nth-child(2), 
    .gallery-item:nth-child(4) {
        grid-row: span 2; /* Las hacemos más altas para mantener dinamismo */
    }
}



/* =============================================== */
/* MOBILE LIGHTBOX */
/* =============================================== */

@media (max-width: 1023px) {

    .sl-wrapper .sl-navigation button {
        top: auto !important;
        bottom: 30px !important;
        transform: none !important;
        width: 50px !important;
        height: 50px !important;
    }

    .sl-wrapper .sl-navigation button.sl-prev {
        left: 50% !important;
        transform: translateX(-70px) !important;
    }

    .sl-wrapper .sl-navigation button.sl-next {
        right: 50% !important;
        transform: translateX(70px) !important;
    }

    .sl-wrapper .sl-close {
        font-size: 2.5rem !important;
        right: 20px !important;
        top: 20px !important;
    }

    .sl-wrapper .sl-counter {
        top: 20px !important;
        left: 20px !important;
        font-size: 0.9rem !important;
    }

    .sl-wrapper .sl-navigation button:after {
        width: 10px !important;
        height: 10px !important;
        border-width: 2px !important;
    }
}

/* --- CONFIGURACIÓN DE LA SECCIÓN TICKETS --- */
#tickets.snap-section {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ticket-bg-container {
    width: 100%;
    height: 100%;
    /* Reemplaza con el nombre exacto de tu archivo de imagen que incluye el rasgado */
    background-image: url('../assets/img/prueba-papel.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* Mantiene el centrado vertical */
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
}

/* Sobreescribimos el comportamiento del container solo para esta sección */
#tickets .container {
    width: 50%;
    height: 100%;
    margin: 0 auto; /* Quita el centrado automático */
    padding: 0 80px;
    align-items: flex-start; /* Alinea los elementos internos a la izquierda */
    text-align: left; /* Asegura que el texto no esté centrado */
}

#tickets .container-2 {
    width: 50%;
    height: 100%;
    background-color: transparent;
}

.ticket-content-overlay {
    width: 100%;
    max-width: 500px; /* Mantiene el límite para no tapar al muchacho de la foto */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ticket-title {
    font-family: 'Anton', sans-serif;
    font-size: 55px;
    color: #101010;
    line-height: 1;
    margin: 0;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin-bottom: 35px
}

.ticket-title .accent {
    color: #FF6300;
}

.ticket-description {
    font-family: 'Helvetica-Medium', sans-serif !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 35px !important;
}

/* Botón estilo píldora negra */
.btn-tickets-black {
    background-color: #101010;
    color: #FFF4CC;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

.btn-tickets-black:hover {
    background-color: #333;
    transform: translateY(-2px);
}

/* Caja de Beneficios (Contenedor con borde) */
.benefits-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(16, 16, 16, 0.5);
    background-color: #fff4cc56;
    border-radius: 15px;
    padding: 25px;
    width: 100%;
    max-width: 550px;
}

/* --- CONFIGURACIÓN DE ICONOS GOOGLE --- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.benefit-icon {
    color: #FF6300 !important;
    font-size: 40px !important;
    margin-bottom: 12px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400, 
        'GRAD' 0,
        'opsz' 48;
}

.benefit-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.benefit-col strong {
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 14px;
    color: #101010;
    line-height: 1.1;
    margin-bottom: 6px;
}

.benefit-col span {
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 14px;
    color: #000000;
    line-height: 1.1;
}

.benefit-sep {
    width: 1px;
    height: 110px;
    background-color: rgba(16, 16, 16, 0.2);
    margin: 0 10px;
}

/* --- AJUSTE PARA PANTALLAS TIPO MACBOOK / LAPTOPS --- */
/* --- ENFOQUE: DESPLAZAMIENTO AGRESIVO DE FONDO --- */
/* --- CONFIGURACIÓN UNIVERSAL PARA MACBOOKS Y LAPTOPS RETINA --- */
/* Abarca desde la MacBook Neo 13" hasta la MacBook Pro 16" */
@media screen and (min-width: 1024px) and (max-width: 1800px),
       screen and (-webkit-min-device-pixel-ratio: 2) {

    #tickets .ticket-bg-container {
        position: relative;
        background-image: none !important; /* Quitamos el fondo original */
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    /* Creamos una capa nueva para la imagen */
    #tickets .ticket-bg-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../assets/img/prueba-papel.png') !important;
        background-size: cover;
        background-position: center;
        
        /* ESTO ES LO QUE MUEVE LA IMAGEN: */
        /* 'translateX' empuja la imagen a la derecha. 
           'scale' la agranda un poco para que no quede un borde vacío al moverla */
        transform: scale(1.2) translateX(7%); 
        
        z-index: 0;
        pointer-events: none;
    }

    #tickets .container {
        position: relative;
        z-index: 1; /* Aseguramos que el texto esté por encima de la imagen móvil */
    }

    #tickets .ticket-content-overlay {
        max-width: 480px !important;
    }
}



/* --- AJUSTE TICKETS SOLO MOBILE (RESTAURADO SEGÚN REFERENCIA) --- */
/* --- AJUSTE TICKETS SOLO MOBILE --- */
/* --- AJUSTE TICKETS SOLO MOBILE --- */
@media (max-width: 1023px) {
    /* 1. Forzamos a que la sección sea un bloque vertical */
    #tickets.snap-section {
        display: block !important; 
        height: auto !important;
        min-height: 100vh;
        background-color: #101010; 
    }

    /* 2. Reconfiguramos el contenedor de la imagen */
    #tickets .ticket-bg-container {
        position: relative; 
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        background-image: none !important;
    }

    /* 3. Inyectamos la foto mediante el pseudo-elemento */
    #tickets .ticket-bg-container::before {
        content: "";
        display: block;
        width: 100%;
        height: 55vh; 
        background-image: url('../assets/img/entradas-mobile.png') !important; 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        /* Z-index alto para que el rasgado pise el bloque beige */
        z-index: 10 !important; 
    }

    /* 4. AJUSTE DE POSICIÓN: Contenedor Beige */
 /* --- AJUSTE TICKETS SOLO MOBILE --- */
    #tickets .container {
        /* 1. Usamos tu imagen de textura como fondo principal */
        background-image: url('../assets/img/textura-papel-mobile.png') !important; 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        
        position: relative;
        z-index: 5 !important; 
        
        /* 2. Mantenemos tus márgenes y paddings originales */
        margin-top: -30px !important; 
        padding: 100px 20px 60px 20px !important; 
        
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        
        /* 3. Limpiamos cualquier pseudo-elemento anterior para que no interfiera */
        overflow: hidden;
    }

   

    #tickets .ticket-content-overlay {
        position: relative;
        z-index: 1; 
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
    }

    

    #tickets .ticket-content-overlay {
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* 5. Títulos y Textos con el tamaño corregido */
#tickets .ticket-content-overlay .ticket-title {
    font-family: 'Anton', sans-serif !important;
    
    /* Forzamos el tamaño fijo */
    font-size: 33px !important; 
    
    /* Evitamos que el navegador lo agrande por su cuenta */
    -webkit-text-size-adjust: 100%; 
    
    text-align: center !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    color: #101010 !important;
    text-transform: uppercase !important;
    
    /* Reseteamos posibles herencias de escritorio */
    letter-spacing: normal !important;
    transform: none !important;
}

    .ticket-description {
        font-family: "Helvetica-Medium", sans-serif !important;
        font-weight: 300 !important;
        font-size: 0.98rem !important;
        text-align: center !important;
        max-width: 280px !important;
        margin: 0 auto 30px auto !important;
        color: #3a3a3a !important;
    }

    /* 6. Botón Estilo Píldora Naranja */
    .btn-tickets-black {
        background-color: #fff4cc73;
        color: #FF6300 !important;
        border: 1px solid #FF6300 !important;
        padding: 12px 30px !important;
        margin: 0 auto !important;
        justify-content: center !important;
        width: fit-content !important;
        display: flex !important;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        border-radius: 50px;
    }

    .btn-tickets-black .arrow-icon {
        stroke: #FF6300 !important;
    }

    /* 7. Ocultamos los beneficios */
    #tickets .benefits-card {
        display: none !important;
    }
}
/* =========================================
   BLOQUE 2: UBICACIÓN (LOCATION)
   ========================================= */
/* --- CONFIGURACIÓN SECCIÓN UBICACIÓN --- */

#location.snap-section {
    background-color: #101010;
    width: 100%;
    height: 100vh;
    display: flex; /* Añadido para asegurar comportamiento de sección */
    align-items: flex-start; /* Centrado vertical general */
    justify-content: center;
    overflow: hidden;
}

#location .container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding-left: 150px; /* Alineación coherente con entradas */
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.location-split-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Modificado: reparte el espacio entre texto y mapa */
    width: 100%; /* Cambiado de 100vw para evitar scroll horizontal */
    gap: 15%; /* Ajustado para dar más aire */
    flex-shrink: 0; /* Evita que el contenedor se comprima demasiado */
    
}

.location-text-side {
    max-width: 450px;
    flex-shrink: 0; /* Evita que el texto se comprima demasiado */
}

.location-text-side h3 {
    font-family: "Anton", sans-serif;
    font-size: 55px;
    color: #FFF4CC;
    line-height: 0.8;
    margin: 0 0 5px 0; /* Simplificado */
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.location-split-content p.location-accent { /* Especificado para el párrafo naranja */
    color: #FF6300;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 0.7;
    font-family: 'P22-Freely', cursive; /* Asegura la fuente accent */
}

.location-text-side .description {
    font-family: 'Helvetica-Medium', sans-serif;
    color: #FFF4CC;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 30px;
    margin-bottom: 50px;
}

/* Iconos inferiores de la sección */
#location .benefits-card {
    background-color: rgba(255, 244, 204, 0.05);
    border: 1px solid rgba(255, 244, 204, 0.2);
    width:500px;
    max-width: 600px;
    display: flex; /* Asegura el layout interno */
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    border-radius: 15px;
    flex-shrink: 0; /* Evita que se comprima en pantallas pequeñas */
}

#location .benefit-col strong {
    font-family: 'Helvetica-Medium', sans-serif !important;
    color: #f87727 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.8px;
}

#location .benefit-col span {
        font-family: 'Helvetica-Medium', sans-serif;
    font-size: 14px;
    color: #ffffffcb;
    line-height: 1.1;
}

#location .benefit-sep {
    background-color: rgba(255, 244, 204, 0.1);
    height: 110px;
    width: 1px;
    margin: 0 10px;
}

#location .benefit-icon {
    color: #f87727;
}

/* --- TARJETA DE MAPA DERECHA --- */
.location-map-side {
    flex-grow: 2;
    display: flex;
    justify-content: flex-end; /* Empuja la tarjeta a la derecha[cite: 1] */
}

.map-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 244, 204, 0.2);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1.8fr 1.3fr;
    width: 800px; /* Cambiado de fijo a flexible[cite: 1] */
    max-width: 900px; /* Límite para no desbordar[cite: 1] */
    overflow: hidden;
    padding: 10px;
}

.map-info-card.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 24px;
}

.location-empty-state {
    width: 100%;
    max-width: 420px;
    min-height: 340px;
    border: 1px dashed rgba(255, 244, 204, 0.25);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 32px;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.35), rgba(255, 99, 0, 0.08));
}

.empty-location-icon {
    color: #FF6300 !important;
    font-size: 56px !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
}

.location-empty-state strong {
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 22px;
    line-height: 1.2;
    color: #FFF4CC;
}

.location-empty-state p {
    margin: 0;
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.map-box {
    border-radius: 15px;
    overflow: hidden;
    height: 400px;
}

.map-box iframe {
    width: 100%;
    height: 100%;
}

.map-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-block {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
}

.icon-circle {
    background-color: #101010;
    color: #FF6300 !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px; /* Evita que el círculo se aplaste */
    border: 1px solid #FF6300 !important;
    border-radius: 50%;
    
    /* ESTO ES CLAVE PARA EL CENTRADO */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    
    /* ELIMINA ESTILOS POR DEFECTO DEL ICONO */
    line-height: 1 !important; 
    text-align: center;
    font-size: 32px !important; /* Ajusta el tamaño del icono aquí */
}

.detail-block strong {
    display: block;
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 18px;
    letter-spacing: 0.8px;
    color: #FFF4CC;
    margin-bottom: 5px;
}

.detail-block span {
    font-family: 'Helvetica-Medium', sans-serif;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

.card-hr {
    border: none;
    height: 1px;
    background: rgba(255, 244, 204, 0.1);
    margin: 15px 0;
}

.btn-maps-cta {
    margin-top: 20px;
    border: 1px solid #FF6300;
    color: #FF6300;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 13px;
    text-align: center;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-maps-cta:hover {
    background: #ff6200be;
    color: #101010;
}

/* --- AJUSTE INTEGRAL PARA MACBOOKS Y PANTALLAS RETINA (13" a 16") --- */
/* --- AJUSTE EQUILIBRADO PARA MACBOOKS Y PANTALLAS RETINA --- */
@media screen 
  and (min-width: 1024px) 
  and (max-width: 1800px),
  screen and (-webkit-min-device-pixel-ratio: 2), 
  screen and (min-resolution: 192dpi) {

    /* --- SECCIÓN TICKETS --- */
    #tickets .ticket-bg-container {
        background-position: 35% center !important; 
    }

    #tickets .ticket-content-overlay {
        max-width: 480px !important; /* Aumentado de 420px */
    }

    #tickets .ticket-title {
        font-size: 48px !important; /* Un poco más de impacto */
    }

    /* --- SECCIÓN LOCATION --- */
    #location .container {
        padding-left: 150px !important;
        padding-right: 60px !important;
    }

    .location-split-content {
        gap: 40px !important; /* Espacio fijo para evitar solapamiento */
        justify-content: flex-start !important;
    }

    .location-text-side {
        max-width: 420px !important; /* Texto más ancho y legible */
        flex-shrink: 0;
    }

    .location-text-side h3 {
        font-size: 50px !important; /* Título con más peso */
    }

    /* Caja de iconos inferior en Location (Música, Bebidas, etc) */
    #location .benefits-card {
        width: 100% !important;
        max-width: 450px !important; /* Caja más grande */
        padding: 20px !important;
    }

    /* Tarjeta del Mapa (Lado derecho) */
    .location-map-side {
        flex-grow: 1;
        display: flex;
        justify-content: flex-start;
    }

    .map-info-card {
        width: 100% !important;
        max-width: 780px !important; /* Más presencia visual */
        grid-template-columns: 1.6fr 1.2fr !important;
    }

    .map-box {
        height: 380px !important; /* Mapa más alto */
    }

    .map-details {
        padding: 25px !important;
    }

    /* Iconos circulares de dirección/estación */
    .icon-circle {
        width: 52px !important; /* Tamaño intermedio entre el gigante y el chico */
        height: 52px !important;
        min-width: 52px !important;
        font-size: 26px !important;
    }

    .detail-block strong {
        font-size: 16px !important;
    }

    .detail-block span {
        font-size: 14px !important;
    }
}






/* =========================================
   MEDIA QUERIES PARA ESCRITORIO
   ========================================= */

   @media (max-width: 1023px) {
    /* Seleccionamos directamente la clase del párrafo */
    .location-accent {
        font-size: 38px !important; /* El !important asegura que sobreescriba el estilo de desktop */
        line-height: 0.6 !important;
        margin-bottom: 20px !important;
    }
    
    /* O de forma más específica si el anterior no funciona: */
    .location-split-content p.location-accent {
        font-size: 38px !important;
        line-height: 0.6 !important;
    }

        .location-split-content .description {
        font-size: 14px !important;
        max-width: 300px !important;
        margin-top: 0 !important;
    }
}

/* --- AJUSTE LOCATION SOLO MOBILE --- */

@media (max-width: 1023px) {
    #location.snap-section {
        height: auto;
        min-height: 100vh;
        
        display: block;
    }

    #location .container {
        padding: 0 20px !important;
        align-items: center;
        text-align: center;
    }

    .location-split-content {
        flex-direction: column;
        gap: 40px;
    }


    .location-text-side {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        margin-top: 50px;
    }

    .location-accent {
        font-size: 38px;
        line-height: 0.6;
    }

    /* --- CAJA DE BENEFICIOS --- */
 @media (max-width: 1023px) {
    /* ... (tus otros estilos de location) ... */

    #location .benefits-card {
        order: -1; 
        width: 100%;
        max-width: 350px; /* Ajustamos para que no sea tan ancha en vertical */
        margin-bottom: 50px;
        padding: 30px 20px;
        background-color: rgba(255, 244, 204, 0.05);
        border: 1px solid rgba(255, 244, 204, 0.2);
        
        /* CAMBIO CLAVE: De horizontal a vertical */
        display: flex;
        flex-direction: column; 
        align-items: center;
        gap: 20px; /* Espaciado entre elementos y líneas */
        display:none;
    }

    #location .benefit-col {
        flex: none; /* Evitamos que intenten ocupar todo el alto */
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* LÍNEAS DE SEPARACIÓN HORIZONTALES */
    #location .benefit-sep { 
        height: 1px; /* Ahora es una línea horizontal */
        width: 80%;  /* No ocupa todo el ancho para un look más limpio */
        background: linear-gradient(
            to right, 
            transparent, 
            rgba(255, 244, 204, 0.2), 
            transparent
        );
        margin: 10px 0;
        flex-shrink: 0;
    }

    #location .benefit-col .benefit-icon { 
        font-size: 32px !important; /* Un poco más grandes para la vista vertical */
        margin-bottom: 10px;
    }

    #location .benefit-col strong { 
        font-size: 13px !important; 
        margin-bottom: 5px;
    }
    
    #location .benefit-col span { 
        font-size: 12px !important;
        opacity: 0.8;
    }
}

    /* --- RESTO DE ELEMENTOS (SIN CAMBIOS) --- */
.location-split-content {
    gap:0px;
}

    .location-title {
        font-size: 38px !important;
        margin-bottom: 12px !important;
    }

    .location-accent {
        font-size: 32px !important;
        margin-bottom: 25px !important;
    }

    .location-text-side .description {
        font-size: 1rem;
        margin: 10px auto 45px auto;
        max-width: 320px;
    }

    .location-map-side {
        width: 100%;
        justify-content: center;
    }

    .map-info-card {
        display: flex; 
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 244, 204, 0.2);
    
    }

    .map-box {
        height: 280px; 
    }

    .map-details {
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .detail-block {
        flex-direction: row !important;
        align-items: center;
        gap: 18px;
        width: 100%;
        margin: 0px;
    }

.icon-circle {
        /* Cambiamos el fondo a negro y el borde a naranja como en desktop */
        background-color: #101010 !important;
        color: #FF6300 !important;
        border: 1px solid #FF6300 !important;
        width: 55px !important;
        height: 55px !important;
        min-width: 55px;
        font-size: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50%;
    }

    .detail-block strong { 
        font-size: 17px; 
        color: #FFF4CC; /* Color crema para los títulos */
    }
    .detail-block span { 
        font-size: 15px; 
        color: rgba(255, 255, 255, 0.8); /* Blanco tenue para el contenido[cite: 17] */
    }

    .btn-maps-cta {
        width: 100%;
        max-width: 300px;
        margin: 15px auto 0 auto;
        background-color: transparent !important;
        border: 1px solid #FF6300 !important;
        color: #FF6300 !important;
        padding: 12px 25px;
        font-size: 13px;
    }
}







@media (min-width: 1024px) {
    #ticket-location.snap-section {
        flex-direction: column; 
    }

    /* Cada bloque ocupa la mitad de la altura de la sección */
    .ticket-wrapper,
    .location-wrapper {
        height: 50vh; 
    }

    .location-grid {
        flex-direction: row; 
        align-items: flex-start;
        justify-content: space-between;
        gap: 60px;
    }

}


/* --- MINI FOOTER PROFESIONAL --- */
.mini-footer {
    width: 100%;
    position: absolute;
    bottom: 30px; 
    left: 0;
    padding: 0 150px; 
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10;
}

.footer-line {
    width: 100%;
    height: 1px;
    /* Gradiente sin opacidad para que se vea nítido */
    background: linear-gradient(to right, #FF6300 0%, #FFF4CC 50%, #FF6300 100%);
}

.footer-content {
    display: grid;
    /* Creamos 3 columnas iguales para asegurar el centrado perfecto del medio */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

.footer-content p {
    font-family: 'Helvetica-Medium', sans-serif;
    font-size: 10px;
    color: #FFF4CC; /* Color crema sólido sin opacidad */
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

/* Alineación de los textos laterales */
.footer-content p:first-child {
    text-align: left;
}

.footer-content p:last-child {
    text-align: right;
}

/* Ajuste para que ambos nombres se vean en naranja nítido */
.designer-name {
    color: #FF6300;
    font-weight: 500;
    opacity: 1 !important; /* Asegura visibilidad total */
}

/* --- ESTILO PARA EL LOGO PNG CENTRADO --- */
.footer-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.footer-logo-img {
    width: 80px; /* Tamaño más chico y elegante */
    height: auto;
    filter: brightness(1.2); /* Resalta el logo sin opacidad */
    transition: transform 0.3s ease;
}

.footer-logo-img:hover {
    transform: scale(1.05); /* Efecto sutil al pasar el mouse */
}

/* Quita el subrayado y mantiene el color del link */
.designer-link {
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Efecto opcional para que se note que es clickeable */
.designer-link:hover {
    transform: translateY(-2px);
}

/* Asegura que el span interno mantenga el color naranja de Áurea */
.designer-link .designer-name {
    color: #FF6300;
    font-weight: 500;
}

/* --- AJUSTE FOOTER MOBILE --- */
@media (max-width: 1023px) {
    .mini-footer {
        position: relative;
        bottom: 0;
        padding: 60px 20px 40px 20px;
        text-align: center;
        align-items: center;
        background-color: #101010;
    }

    .footer-content {
        display: flex; /* Cambiamos grid a flex para apilar elementos */
        flex-direction: column;
        gap: 25px;
    }

    .footer-content p {
        text-align: center !important;
        font-size: 9px;
        line-height: 1.6; /* Un poco más de aire para los dos nombres */
    }

    .footer-logo-container {
        order: -1; /* Logo siempre arriba en mobile */
        margin-bottom: 5px;
    }

    .footer-logo-img {
        width: 70px;
    }
    
    .footer-line {
        background: linear-gradient(to right, transparent, #FF6300, transparent);
    }
}