/* --- LÓGICA DE ANIMACIÓN --- */

/* Revelar desde abajo (para logos centrales) */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); /* Transición más fluida */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-down {
    opacity: 0;
    transform: translateY(-40px);
    /* Agregamos 'forwards' implícito asegurando que el estado final sea sólido */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    pointer-events: none; /* Evita clics mientras aparece */
}

/* Cuando está activo, forzamos que se mantenga visible y con interacción */
.reveal-down.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Evita que el logo desaparezca si el contenedor padre ya tiene la animación */
.logo img {
    display: block;
    opacity: 1 !important;
}


/* 1. Carga de Fuente Personalizada */
@font-face {
    font-family: 'VogieExpanded';
    src: url('fonts/VogieExpanded.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1100; /* 👈 AÑADE ESTO: Para que siempre puedas clickearlo */
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Curva suave */
    display: block;
}

#mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0; /* Desaparece la barra del medio */
}

#mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Baja y gira */
}

#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Sube y gira */
}


/* 2. Configuración General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: #000;
    color: white;
    scroll-behavior: smooth;
    overflow-x: hidden; 
}

/* 3. Navegación (Header) */
header {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 20px 50px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;       
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px; /* Asegúrate de que este valor coincida con el de Inicio */
    margin: 0 auto;
    width: 100%;
}

.logo img {
    height: 70px !important;
}

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

.nav-links li a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    opacity: 0.8;
    transition: 0.3s;
}

.nav-links li a:hover, .nav-links li a.active {
    opacity: 1;
    border-bottom: 2px solid white;
    padding-bottom: 5px;
}

/* Botón Registro Estilo Píldora */
.btn-registro {
    background-color: white;
    color: black;
    padding: 10px 30px;
    border-radius: 30px; /* Redondeado total como en la imagen */
    text-decoration: none;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-registro:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

/* 4. Sección Hero (Inicio) */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.hero-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Ocultas por defecto */
    transition: opacity 1.5s ease-in-out; /* Transición suave de 1.5s */
}

.slide.active {
    opacity: 1; /* Solo la activa se ve */
}

/* Sombra oscura sutil sobre el fondo principal */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.6)); /* Sombra sutil */
    z-index: 2;
}

/* Áreas de clic invisibles en los costados */
.hero-click-area {
    position: absolute;
    top: 0;
    width: 25%; /* Área de interacción */
    height: 100%;
    z-index: 10; /* Sobre las fotos, bajo el contenido */
    cursor: pointer;
}
.hero-click-area.left { left: 0; }
.hero-click-area.right { right: 0; }

/* Líneas indicadoras en el fondo */
.hero-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 20;
}
.hero-line {
    width: 50px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3); /* Línea desvanecida visible */
    cursor: pointer;
    transition: 0.4s ease;
    border-radius: 2px;
}

.hero-line.active {
    background-color: #fff; /* Blanca sólida cuando está activa */
    width: 70px; /* Un poco más larga para resaltar */
}

.hero-container {
    position: relative;
    z-index: 3; /* Asegura que los logos estén sobre el carrusel */
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.img-tour-logo {
    max-width: 440px;
    height: auto;
    margin-bottom: 10px;
}

.img-tour-logo1 {
    max-width: 400px;
    height: auto;
    margin-bottom: 10px;
}

.presenta-text {
    font-family: 'VogieExpanded', sans-serif;
    color: white;
    font-size: 2.2rem;
    letter-spacing: 18px; /* Espaciado amplio para el estilo expanded */
    margin: 20px 0;
}

.img-uci-banner {
    max-width: 440px;
    height: auto;
    margin-top: 10px;
}

/* Estilo para secciones de contenido */
.content-section {
    padding: 100px 50px;
    height: 600px;
}

/* Estilos Sección Detalles Evento */
.event-section {
    background-color: #000;
    padding: 100px 0px;
    display: flex;
}

.event-container {
    display: flex;
    align-items: center;
    max-width: 1700px;
    position: relative; /* Permite que los elementos se superpongan */
}

/* Tarjeta de texto (la que está atrás a la izquierda) */
.event-text-card {
    padding: 60px 100px 60px 60px;
    border-radius: 40px;
    width: 60%;
    z-index: 1;
}

.event-text-card h2 {
    font-family: 'VogieExpanded', sans-serif;
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #fff;
    margin-left: 160px;
}

.event-text-card .description-bg{
        background-color: #1a1a1a; /* Gris muy oscuro según la referencia */
        width: 1800px;
        left: 0px;
        padding: 60px 100px 60px 60px;
        border-radius: 40px;
}

.event-text-card .description {
    margin-left: 100px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Botón Conocer Más */
.btn-conocer {
    margin-left: 100px;
    display: inline-block;
    padding: 10px 40px;
    border: 1px solid #fff;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    transition: 0.3s;
}

.btn-conocer:hover {
    background-color: #fff;
    color: #000;
}




.event-image-card {
    width: 50%;
    margin-left: -10%; /* Efecto de superposición */
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 40px;
    cursor: pointer;
}

.main-event-img {
    width: 100%;
    height: auto;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease; /* Suavidad para el zoom */
}

.event-image-card:hover .main-event-img {
    transform: scale(1.05); /* Efecto zoom solicitado */
}


/* --- ESTILO DE LA MINIATURA (Diseño Original) --- */
.event-image-card {
    width: 50%;
    margin-left: -10%; /* Efecto de superposición */
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 40px;
    cursor: pointer;
    background-color: #000; /* Fondo negro mientras carga el video */
}

.main-event-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Efecto Hover solicitado */
.event-image-card:hover .main-event-img {
    transform: scale(1.05);
    box-shadow: 0 30px 60px rgba(0,0,0,0.7);
}

/* --- ESTILO DEL MODAL (Video Centrado) --- */
.video-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: 90%;
    max-width: 1100px;
}

.modal-content video {
    width: 100%;
    border-radius: 20px;
    outline: none;
}

.close-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}


/* Estilos Sección Ubicación */
.location-section {
    background-color: #000;
    padding: 80px 50px;
    display: flex;
    justify-content: center;
}

.location-container {
    max-width: 1200px;
    width: 100%;
}

/* Diseño del Mapa y Texto */
.location-main {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 40px;
}

.map-card {
    flex: 1;
    border-radius: 30px; /* Bordes redondeados según referencia */
    overflow: hidden;
    height: 300px;
}

.map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-info {
    flex: 1;
}

.section-title {
    font-weight: 200; /* Estilo fino para "UBICACIÓN" */
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.location-subtitle {
    font-size: 1.5rem;
    color: #ccc;
    margin-bottom: 20px;
}

.location-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #888;
}

/* Galería de Imágenes Inferior */
.location-gallery {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.gallery-grid {
    display: flex;
    gap: 10px; /* Espacio entre fotos */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: max-content; /* IMPORTANTE: Permite que el grid crezca horizontalmente */
}

.gallery-item {
    /* 100% dividido para 4 fotos, restando el espacio del gap */
    flex: 0 0; 
    max-width: 320px; /* Tamaño máximo para pantallas muy grandes */
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */
    transition: transform 0.3s ease-in-out;
}

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

.gallery-item span {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    font-style: italic; /* Estilo caligráfico según referencia */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}

/* Botones y Flechas */
.arrow {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.5;
}

.btn-container {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 40px;
}

.btn-conocer-mas {
    display: inline-block;
    padding: 12px 50px;
    border: 1px solid #555;
    border-radius: 40px;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: 0.3s;
    margin-top: 60px;
}

.btn-conocer-mas:hover {
    border-color: #fff;
    background-color: rgba(255,255,255,0.1);
}

/* --- FUNCIONALIDAD EXTRA --- */
.gallery-grid {
    display: flex; /* Cambiamos a flex para que se pueda deslizar */
    transition: transform 0.5s ease-in-out;
    width: max-content;
}

/* 1. El contenedor general debe tener espacio a los lados para las flechas */
.location-container {
    max-width: 1250px; /* Un poco más ancho para dar aire */
    margin: 0 auto;
    position: relative; /* Clave para que las flechas se ubiquen respecto a esto */
    padding: 0 70px; /* Este espacio es donde vivirán las flechas */
    margin-bottom: 50px !important;
}

.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px; 
    margin-top: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* 2. El visor que corta las fotos (mantiene su ancho interno) */
.location-gallery {
    overflow: hidden; 
    width: 100%;
}

.gallery-grid {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 3. Estilo de las flechas fuera de las imágenes */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centra la flecha verticalmente */
    z-index: 100;
    background: none; /* Sin fondo para que sea más limpio como en la referencia */
    border: none;
    color: #ffffff;
    font-size: 2.5rem;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0.6;
}

.arrow:hover {
    opacity: 1;
    color: #cacaca; /* Color de acento al pasar el mouse */
}

/* 4. Posicionamiento fuera del carrusel */
.prev {
    left: 0px; /* Se mueve al borde izquierdo del container, fuera de las fotos */
}

.next {
    right: 0px; /* Se mueve al borde derecho del container, fuera de las fotos */
}

.gallery-grid {
    display: flex;
    gap: 20px; /* Espacio entre imágenes */
    transition: transform 0.5s ease-in-out;
}

/* 5. Asegurar que las imágenes tengan su tamaño fijo */
.gallery-item {
/* (100% / 4 imágenes) = 25%. Restamos parte del gap para que encajen perfecto */
    flex: 0 0 calc(25% - 15px); 
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 2.5rem;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.arrow:hover { opacity: 1; color: #cacaca; }
.prev { left: 0; }
.next { right: 0; }

@media (max-width: 1024px) {
    .gallery-item { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 600px) {
    .gallery-item { flex: 0 0 100%; }
}
@media (max-width: 480px) {
    .gallery-item { flex: 0 0 100%; /* 1 imagen en celulares */ } /* 1 foto */
    .gallery-wrapper { padding: 0 40px; }
}


.zoomable { cursor: pointer; }

/* Cuadro flotante */
/* Cuadro flotante (Lightbox) Estético */
.lightbox {
    display: none; /* Se cambia a 'flex' vía JavaScript al hacer clic */
    position: fixed;
    z-index: 3000; /* Asegura que esté sobre el menú */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Fondo más oscuro para resaltar la foto */
    
    /* Estas 3 líneas centran la imagen perfectamente */
    justify-content: center;
    align-items: center;
    
    cursor: zoom-out; /* Indica que al hacer clic se cierra */
    transition: opacity 0.3s ease;
}

.lightbox-content {
    max-width: 90%; /* Un pelín más ancho para aprovechar el celular */
    max-height: 80vh;
    height: auto;   /* 👈 AÑADE ESTO: Mantiene la proporción de la foto */
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    object-fit: contain;
}

/* Cuando el lightbox está activo, la imagen crece suavemente */
.lightbox.active .lightbox-content {
    transform: scale(1);
}

.close-lightbox {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #fff;
    font-size: 50px;
    font-weight: 200; /* Más fina y elegante */
    cursor: pointer;
    transition: 0.3s;
}

.close-lightbox:hover {
    color: #ffcc00; /* Color de acento al pasar el mouse */
}

/* Estilos Sección Patrocinadores */
.sponsors-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    margin-top: 50px;
    background: url('FOTOS/FOTO\ 18.jpg') no-repeat center center;
    background-size: cover;
    display: none;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* Redondeo de bordes generales de la sección para armonía visual */
    border-radius: 40px; 
    overflow: hidden;
}

/* Capa oscura semitransparente sobre la imagen de fondo */
.sponsors-overlay {
    background-color: rgba(0, 0, 0, 0.7); 
    width: 100%;
    height: 100%;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(5px); /* Efecto de desenfoque adicional por código */
}

.sponsors-title {
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 5px;
    color: #fff;
    margin-bottom: 50px;
    opacity: 0.8;
}

/* Cuadrícula de patrocinadores */
.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas principales */
    gap: 20px;
    max-width: 1000px;
    width: 90%;
}

/* Estilo estético de los cuadros vacíos */
.sponsor-box {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    padding: 15px;           /* Espacio para que el logo no toque los bordes */
    height: 100px;           /* Ajustamos un poco la altura para logos */
    background-color: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* La imagen del logo */
.sponsor-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Mantiene la proporción original */
    filter: grayscale(100%) brightness(1.5); /* Opcional: hace que todos los logos sean blancos/grises para estética minimalista */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.sponsor-box:hover .sponsor-logo {
    filter: grayscale(0%) brightness(1); /* Recupera su color original al pasar el mouse */
    opacity: 1;
    transform: scale(1.1);
}

.sponsor-box:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Cuadros más anchos para patrocinadores principales abajo */
.sponsor-box.wide {
    grid-column: span 1.5; /* Ocupa más espacio horizontal */
    height: 100px;
}


/* --- Título de Sección --- */

#carrera-uci-2025{
    padding: 200px 0;
}

#carrera-uci-2025 .section-title {
    text-align: center;
    margin: 80px 0;
}

.race-gallery-section {
    padding: 100px 5%;
    background-color: #000;
}

.race-gallery-section .ubicacion {
    padding: 0px 5%;
    background-color: #000;
}

/* --- Contenedor del Video de Carrera --- */
.race-video-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 40px auto;
    border-radius: 40px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}

.race-main-video {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease-out;
}

.race-video-container:hover .race-main-video {
    transform: scale(1.05); /* Efecto zoom */
}

/* --- Grid de Acción 3x2 --- */
.race-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas desktop */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.race-item {
    border-radius: 20px;
    overflow: hidden;
    height: 250px;
    background: #111;
}

.race-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.race-item:hover img {
    transform: scale(1.1);
}

/* --- Estilos del Modal --- */
.video-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.97);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.modal-content { width: 90%; max-width: 1000px; }
.modal-content video { width: 100%; border-radius: 20px; }
.close-btn {
    position: absolute; top: 30px; right: 40px;
    color: #fff; font-size: 60px; cursor: pointer;
}

/* --- Responsive para Carrera --- */
@media (max-width: 992px) {
    .race-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .race-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 1.8rem; }
    .race-item { height: 200px; }
}




/* Ajuste para pantallas pequeñas */


@media (max-width: 992px) {
    /* La tarjeta ahora ocupa todo el ancho */
    .event-text-card {
        width: 100%;
        padding: 20px;
        margin: 0;
    }

    /* Quitamos los márgenes laterales excesivos */
    .event-text-card h2,
    .event-text-card .description,
    .btn-conocer {
        margin-left: 0;
        text-align: center; /* Opcional: Centrar texto en móviles */
    }

    .event-text-card h2 {
        font-size: 1.8rem;
        margin-top: 20px;
    }

    /* Ajustamos el fondo oscuro para que no se desborde */
    .event-text-card .description-bg {
        width: 100%;
        padding: 30px 20px;
        left: 0;
        margin-bottom: 20px;
    }

    .event-text-card .description {
        max-width: 100%;
        font-size: 0.85rem;
    }

    /* Centrar el botón en pantallas pequeñas */
    .btn-conocer {
        display: block;
        width: fit-content;
        margin: 0 auto 20px auto;
    }
}

/* Ajustes extra para móviles muy pequeños */
@media (max-width: 480px) {
    .event-text-card h2 {
        font-size: 1.5rem;
    }
    
    .event-text-card .description-bg {
        border-radius: 20px; /* Bordes menos agresivos en pantallas pequeñas */
    }
}


@media (max-width: 768px) {

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Empieza fuera de la pantalla */
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); /* Movimiento fluido */
        z-index: 100;
    }

    .nav-links.active {
        right: 0; /* Entra a la pantalla */
    }

    .nav-links li {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
        /* Retraso escalonado para cada link */
        transition-delay: calc(0.1s * var(--i)); 
    }

    .ubicacion-overlay {
        /* Creamos un degradado más pesado: casi negro arriba y abajo, semi-transparente en el medio */
        background: linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0.7) 0%, 
            rgba(0, 0, 0, 0.4) 50%, 
            rgba(0, 0, 0, 0.8) 100%
        ) !important;
    }

    .ubicacion-hero {
        height: 80vh; /* Un poco más corto que en PC para que se vea el contenido de abajo */
        background-color: #000;
        min-height: 500px;
    }

    .ubicacion-hero img {
        opacity: 0.6; /* Baja la intensidad de la foto misma */
    }

    .hero-text-container {
        width: 100% !important;
        padding: 0 25px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }



    .salinas-title {
        font-size: 3.5rem !important; /* Grande pero sin salirse de la pantalla */
        margin-bottom: 15px;
        letter-spacing: 2px;
    }

    /* Descripción con mejor lectura */
    .hero-description p {
        font-size: 0.95rem !important;
        line-height: 1.6;
        max-width: 100%;
        margin: 0 auto 30px auto;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Botón de ubicación en móvil */
    .btn-location-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-location {
        width: 100%;
        max-width: 300px; /* Para que no sea un botón gigante en pantallas anchas */
        padding: 18px 20px;
        font-size: 0.8rem;
        letter-spacing: 1px;
        text-align: center;
    }

    .historia-header {
        margin-bottom: 30px;
    }
    
    .historia-header span {
        font-size: 0.8rem;
        letter-spacing: 3px;
    }

    /* 2. Ajuste del Contenedor del Carrusel */
    .carousel-container {
        height: 250px; /* Reducimos la altura para que no ocupe toda la pantalla */
        gap: 10px;
        perspective: 1000px; /* Añade profundidad al efecto */
    }

    /* 3. Comportamiento de las imágenes */
    .carousel-item {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* La imagen central debe resaltar */
    .carousel-item.center {
        width: 70% !important; /* Ocupa la mayor parte del ancho */
        z-index: 5;
        transform: scale(1.1);
    }

    /* Las imágenes laterales se vuelven pequeñas y se oscurecen */
    .carousel-item.side {
        width: 15% !important;
        opacity: 0.4;
        filter: grayscale(100%); /* Las desaturamos para enfocar el centro */
        transform: scale(0.8);
    }

    /* 4. Contenido de Texto */
    .historia-content {
        padding: 0 20px;
        text-align: center;
    }

    .historia-content h2 {
        font-size: 1.5rem !important;
        margin-top: 20px;
    }

    .historia-content p {
        font-size: 0.9rem !important;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
    }

    .destinos-main-title {
        font-size: 1.5rem !important;
        margin-bottom: 30px;
        text-align: center;
    }

    /* 2. Convertimos el Grid en una sola columna */
    .destinos-grid {
        display: flex;
        flex-direction: column;
        gap: 25px; /* Espacio entre tarjetas */
        padding: 0 10px;
    }

    /* 3. Ajuste de las tarjetas */
    .destino-card {
        width: 100%;
        height: 300px; /* Altura fija para que todas sean iguales */
        border-radius: 20px;
        overflow: hidden;
        position: relative;
    }

    /* 4. Forzamos que la info sea visible en móviles */
    .destino-overlay {
        opacity: 1 !important; /* Siempre visible */
        background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, transparent 80%) !important;
        display: flex;
        align-items: flex-end; /* Texto en la parte inferior */
        padding: 20px;
    }

    .destino-info {
        transform: translateY(0) !important; /* Sin animación de subida, ya está ahí */
        text-align: left;
    }

    .destino-info h3 {
        font-size: 1.4rem;
        margin-bottom: 5px;
    }

    .destino-info p {
        font-size: 0.9rem;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.8);
    }

    /* 5. Botón de ubicación más grande para el dedo */
    .link-ubicacion {
        display: inline-block;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 30px;
        font-size: 0.75rem;
        text-decoration: none;
        color: #fff;
    }

    .reglamento-title {
        font-size: 1.8rem !important; 
        line-height: 1.2;
        word-wrap: break-word;
        text-align: center;
        width: 100%;
    }

    .reglamento-table thead {
        display: none;
    }
    
    .reglamento-table-wrapper {
        overflow-x: visible; /* Cambiamos de auto a visible */
        background: none;
        padding: 0;
    }

    /* 2. Convertimos todo en bloques (uno debajo de otro) */
    .reglamento-table, 
    .reglamento-table tbody, 
    .reglamento-table tr, 
    .reglamento-table td {
        display: block;
        width: 100%;
    }

    /* 3. Cada fila ahora es una tarjeta negra con borde */
    .reglamento-table tr {
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.03);
    }

    /* 4. Estilo de las celdas con el título a la izquierda */
    .reglamento-table td {
        display: flex;
        justify-content: space-between; /* Separa el título del dato */
        align-items: center;
        text-align: right;
        padding: 15px 10px !important; /* Más aire interno */
        min-height: 50px;
    }

    .reglamento-table td:last-child {
        border-bottom: none;
    }

    /* 5. Este es el "título" que aparece a la izquierda (AÑO, FECHA, etc) */
    .reglamento-table td::before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        width: 40%; /* Limita el ancho de la etiqueta izquierda */
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.7rem;
    }

    /* Contenedor principal de categorías */
    .categorias-section {
        padding: 40px 20px;
    }

    .categorias-main-title {
        font-size: 2.2rem !important; /* Título más manejable */
        line-height: 1.1;
    }

    /* Cambiamos el Grid por Flexbox vertical */
    .categorias-grid {
        display: flex !important;
        flex-direction: column !important; /* Apilado vertical */
        gap: 20px;
        margin-bottom: 40px;
    }

    /* Forzamos que en el segundo bloque (Medio Fondo) la imagen salga ARRIBA del texto */
    .medio-fondo-grid {
        flex-direction: column-reverse !important; 
    }

    /* Tarjetas de información */
    .info-card {
        padding: 30px 20px !important;
        border-radius: 25px !important;
    }

    .fondo-type {
        text-align: center !important;
        width: 100%;
    }

    .lista-edades {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los items horizontalmente */
        padding: 0;
        text-align: center; /* Centra el texto interno */
    }

    .lista-edades li {
        display: flex;
        flex-direction: column; /* Apila el rango de edad sobre el género */
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 15px;
    }

    .nota-footer {
        text-align: center !important;
        margin-top: 20px;
        padding: 0 10px;
    }

    /* Ajuste de las imágenes para que no sean gigantes */
    .image-card {
        height: 250px; /* Altura fija para mantener uniformidad */
        border-radius: 25px !important;
    }

    /* Ajuste para que el botón no se vea pegado */
    .btn-download {
        justify-content: flex-end;
        padding: 5px 0;
    }

    /* Ajuste del botón de descarga en móvil */
    .btn-download {
        font-size: 0.7rem;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        white-space: nowrap;
    }

    .icon-doc {
        width: 14px;
    }
    .podium-section {
        padding: 0 15px; /* Reducimos el espacio a los lados */
        margin: 40px auto;
    }

    .podium-main-title {
        font-size: 1.6rem;
        text-align: center;
    }

    .podium-card {
        padding: 30px 20px; /* Mucho más compacto */
        border-radius: 30px;
    }

    /* Convertimos el Podio Top (Ganadores 1, 2 y 3) en una columna vertical */
    .podium-top {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    /* El ganador (Nº1) siempre arriba y centrado */
    .podium-winner {
        justify-content: center;
        width: 100%;
    }

    /* Los finalistas (2 y 3) ahora uno debajo del otro */
    .podium-runners {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        align-items: center;
    }

    /* Los puestos 4 y 5 también en vertical */
    .podium-bottom {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    /* Ajuste de los items individuales del podio */
    .podium-item {
        width: 100%;
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 10px;
    }

    .rank {
        font-size: 1.3rem;
        min-width: 30px;
    }

    .item-data p {
        font-size: 0.9rem;
    }

    /* La lista corta (6-10) también se adapta */
    .top-list-short {
        width: 100%;
        padding: 0 10px;
    }

    .list-row p {
        margin: 0 15px;
        font-size: 0.85rem;
    }

    /* 1. Pill Selector: Permitir scroll horizontal si hay muchas categorías */
    .pill-selector {
        display: flex;
        overflow-x: auto;
        justify-content: flex-start; /* Alinea al inicio para el scroll */
        gap: 10px;
        padding: 10px;
        white-space: nowrap; /* Evita que los botones salten de línea */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
        scrollbar-width: none; /* Oculta scrollbar en Firefox */
    }
    
    .pill-selector::-webkit-scrollbar {
        display: none; /* Oculta scrollbar en Chrome/Safari */
    }

    .pill {
        flex: 0 0 auto; /* Evita que los botones se encojan */
        min-width: 140px;
        font-size: 0.65rem;
    }


    .masc-fem{
        display: flex;
    }
    
    /* 2. Tabla: Pasar de 2 columnas a 1 columna */
    .minimal-table {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        border-bottom: none;
    }

    .col {
        border-right: none; /* Quitamos la línea divisoria vertical */
    }

    .row {
        font-size: 0.75rem;
        padding: 12px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Línea más visible */
    }

    /* 3. Contenedor de scroll de la tabla */
    .table-scroll-container {
        max-height: 400px; /* Un poco más alto en móvil para ver más filas */
    }

    /* 4. Ajuste del encabezado de la sección */
    .results-intro {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }


    .results-label span{
        font-size: 2rem;
        margin-top: 10px;
    }

    .nota-discapacidad {
        font-size: 0.6rem !important;
        padding: 0 10px;
        margin-bottom: 30px !important;
    }

    .btn-registrate-final {
        width: 100%; /* Botón de ancho completo para facilitar el clic */
        text-align: center;
        padding: 15px 0;
    }
}



/* Ajuste extra para celulares muy pequeños */
@media (max-width: 480px) {
    .img-year-2026 {
        height: 60px !important;
    }
    
    .btn-ver-todo {
        width: 100%;
        padding: 12px 20px;
    }
}

/* ==========================================================
   3. NAVEGACIÓN (HEADER) - CORRECCIONES BASE
   ========================================================== */
header {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 20px 50px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo img {
    height: 40px;
    transition: 0.3s;
}

/* Clases para el botón de Registro */
.mobile-only { display: none; }
.desktop-only { display: block; }





/* 📱 TABLET Y MÓVIL (Hasta 1024px) */
@media (max-width: 1024px) {
    
    /* Navbar: Separar Logo y Menú */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        width: 100%;
    }

    .logo img {
        height: 30px; /* Logo más pequeño en tablets/móvil */
    }

    .menu-toggle {
        display: flex; /* Asegura que se vea el icono de hamburguesa */
        z-index: 1100;
    }

    /* Menú Desplegable (Cubre toda la pantalla) */
    .nav-links {
        display: none; /* Quitamos el !important para que el JS pueda cambiarlo */
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.98);
        justify-content: center;
        align-items: center;
        gap: 30px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .nav-links.active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Aseguramos que no se mueva de su sitio */
        transform: translateY(0) !important; 
    }

    /* Intercambio de botón Registro */
    .desktop-only { display: none; }
    .mobile-only { display: block; }

    /* Ajustes Secciones */
    .event-container { flex-direction: column; text-align: center; }
    .event-text-card { width: 100%; padding: 40px; margin-bottom: -30px; }
    .event-image-card { width: 90%; margin-left: 0; }
    
    .location-main { flex-direction: column; }

    /* Footer Responsive */
    .footer-card { padding: 40px 20px; border-radius: 40px 40px 0 0; }
    .footer-logos { flex-direction: column; gap: 20px; align-items: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 20px; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}

/* 📱 AJUSTES ESPECÍFICOS PARA MÓVIL (Menos de 480px) */
@media (max-width: 480px) {    
    .logo img { height: 25px; }

    .hero-content {
        width: 100% !important;
        padding: 0 20px !important; /* Espacio de seguridad a los lados */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 10px !important;
    }

    /* Logo principal "Tour al Ecuador" */
    .img-tour-logo {
        max-width: 85% !important; /* No permite que supere el 85% del ancho del cel */
        height: auto !important;
        margin-bottom: 15px !important;
    }

    /* Logo "Presenta" */
    .img-tour-logo1 {
        max-width: 50% !important; /* Más pequeño que el principal */
        height: auto !important;
        margin-bottom: 15px !important;
    }

    /* Banner "UCI Gran Fondo" */
    .img-uci-banner {
        max-width: 90% !important;
        height: auto !important;
    }

    /* Asegurar que el contenedor no tenga desbordamiento */
    .hero-container {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* 1. Quitamos espacios del contenedor padre que podrían estar achicando todo */
    .location-container {
        padding: 0 10px !important; /* Margen mínimo a los lados del título y mapa */
        width: 100% !important;
    }
    
    /* 2. El Wrapper debe ser lo más ancho posible */
    .gallery-wrapper {
        position: relative !important;
        width: 100% !important; /* Ahora ocupa el 100% del espacio disponible */
        margin: 20px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .location-gallery {
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 15px; /* Bordes redondeados más suaves */
    }

    .gallery-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* 3. La imagen (Aquí está el truco para que se vea GRANDE) */
    .gallery-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        /* Quitamos cualquier restricción de altura */
        height: auto !important; 
    }

    .gallery-item img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        /* Cambiamos a 'cover' si quieres que llene todo el ancho de lado a lado */
        object-fit: cover !important; 
        min-height: 200px; /* Asegura un tamaño mínimo visual */
    }

    /* 4. Flechas (Las hacemos un poco más pequeñas para que no "coman" espacio visual) */
    .arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        background-color: rgba(0, 0, 0, 0.4) !important;
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 1.5rem !important;
    }

    .arrow.prev { left: 5px !important; }
    .arrow.next { right: 5px !important; }

    /* Otros ajustes */
    .vogie-text { font-size: 1.8rem !important; }
    .sponsors-grid { grid-template-columns: repeat(2, 1fr); }
}


.results-label{
        font-size: 2.5rem;
        margin-top: 10px;
}

.results-label span{
        font-size: 1rem;
        margin-top: 10px;
}

/* Contenedor que ocupa todo el ancho de la ventana */
.footer-container {
    width: 100%;
    background-color: #000;
    padding-top: 50px;
}

/* La tarjeta gris del footer */
.footer-card {
    background-color: #1a1a1a;
    width: 100%; /* Cambiado de un ancho fijo a 100% */
    margin: 0 auto;
    padding: 60px 100px 30px 100px;
    
    /* Redondeo solo en las esquinas superiores */
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

/* Logos alineados a la izquierda */
.footer-logos {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.footer-logo-tour { height: 80px; }
.footer-logo-uci { height: 50px; }

/* Menú de navegación */
.footer-nav { margin-bottom: 30px; }
.footer-links {
    display: flex;
    list-style: none;
    gap: 40px;
}
.footer-links li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.6;
    transition: 0.3s;
}
.footer-links li a:hover { opacity: 1; }

/* Línea divisora blanca */
.footer-line {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

/* Fila inferior (Copyright y Redes) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copy {
    font-size: 0.75rem;
    color: #fff;
    opacity: 0.5;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}
















/* --- ANIMACIONES PARA SECCIÓN PODIO --- */

/* La tarjeta del podio aparece con un leve aumento de tamaño */
.podium-card.reveal {
    opacity: 0;
    transform: scale(0.95);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.podium-card.active {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Animación de los ganadores (Pop-in effect) */
.podium-winner, .podium-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote suave */
}

/* Retrasos escalonados para que aparezcan uno tras otro */
.podium-card.active .podium-winner { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.podium-card.active .podium-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.podium-card.active .podium-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }

/* Filas de la lista inferior (Entrada lateral) */
.list-row {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease-out;
}

.top-list-short.active .list-row {
    opacity: 1;
    transform: translateX(0);
}

/* Retrasos para las filas 6 a 10 */
.top-list-short.active .list-row:nth-child(1) { transition-delay: 0.1s; }
.top-list-short.active .list-row:nth-child(2) { transition-delay: 0.2s; }
.top-list-short.active .list-row:nth-child(3) { transition-delay: 0.3s; }
.top-list-short.active .list-row:nth-child(4) { transition-delay: 0.4s; }
.top-list-short.active .list-row:nth-child(5) { transition-delay: 0.5s; }

/* Añade esto a las etiquetas que contienen los nombres (res-1, res-2, etc) */
#res-1, #res-2, #res-3, #res-4, #res-5, .list-row p {
    transition: opacity 0.3s ease;
}

/* --- ANIMACIONES PARA SECCIÓN RESULTADOS --- */

/* Contenedor padre para agrupar la animación */
.results-section .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* El título aparece primero */
.results-intro.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Los botones (Pills) con un ligero retraso */
.pill-selector.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0.2s;
}

/* La tabla aparece al final */
.table-scroll-container.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0.4s;
}

/* Efecto Hover extra para los Pills */
.pill {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.pill:hover {
    transform: translateY(-3px);
    background-color: #444;
}




/* --- FIX DE EMERGENCIA PARA IMAGEN 2026 --- */
.year-image-container {
    display: flex !important;
    justify-content: flex-start;
    margin-bottom: 20px;
    min-height: 100px; /* Le damos altura al contenedor para que no colapse */
    width: 100%;
}

.img-year-2026 {
    height: 110px !important; /* Forzamos tamaño */
    width: auto !important;
    display: block !important;
    
    /* Filtro para que sea blanca */
    filter: brightness(0) invert(1) !important;
    
    /* Forzamos que ignore la animación si esta fallando */
    opacity: 1 !important; 
    transform: none !important;
    visibility: visible !important;
}

@media (max-width: 480px) {
    .year-image-container { justify-content: center; }
    .img-year-2026 { height: 70px !important; }
}


/* Banner de Clasificados */
.clasificados-hero {
    height: 60vh;
    width: 100%;
    position: relative;
    background: url('FOTOS/FOTO 13.jpg') center/cover;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: flex-end;
    padding: 60px 80px;
}

.clasificados-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('FOTOS/FOTO 13.jpg') center/cover;
    z-index: 1; /* Capa fondo */
    transform: scale(1.1);
    opacity: 0;
    transition: transform 2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                opacity 1.5s ease-out;
}

.clasificados-hero.loaded::before {
    transform: scale(1);
    opacity: 1;
}

/* Animación del Texto (H1) */
.hero-content-bottom .vogie-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.5s, 
                transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s;
}

/* Clase que activará el movimiento del texto */
.hero-content-bottom.active .vogie-text {
    opacity: 1;
    transform: translateY(0);
}

.hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    z-index: 2; /* Capa media: encima de la foto, debajo del texto */
    pointer-events: none;
}

.hero-content-bottom {
    position: relative;
    z-index: 3; /* Capa superior */
}

.hero-content-bottom h1 {
    font-family: 'VogieExpanded', sans-serif;
    color: white;
    font-size: 3.5rem;
    line-height: 1.1;
}

/* Sección de Resultados */
.results-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 40px;
}

.year-outline {
    font-size: 5rem;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    font-weight: 900;
}

/* Tabla y Selector (Iguales a la referencia anterior) */
.pill-selector {
    background-color: #1a1a1a;
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    margin: 40px 0;
}

.pill {
    background: none; border: none; color: #888;
    cursor: pointer; padding: 10px 20px; border-radius: 30px;
    font-size: 0.7rem; text-align: center;
}

.pill.active { background-color: #333; color: white; }

.minimal-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #fff;
}

.col { border-right: 1px solid #fff; }
.col:last-child { border-right: none; }

.row {
    padding: 15px;
    border-bottom: 1px solid #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.row:last-child { border-bottom: none; }

/* Contenedor de la lista con límite de altura */
.table-scroll-container {
    max-height: 350px; 
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Esta clase se añade con JavaScript */
.table-scroll-container.expanded {
    max-height: 2500px; /* Ajusta este valor si tu lista es muy larga */
}

/* Efecto de desvanecimiento inferior cuando está cerrado */
.table-scroll-container::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 80px;
    background: linear-gradient(to bottom, transparent, #000);
    pointer-events: none;
    transition: opacity 0.3s;
}

.table-scroll-container:not([style*="max-height: 350px"])::after { opacity: 0; }

/* Botón Ver Todo */
.btn-ver-todo-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.btn-ver-todo {
    background: none;
    border: 1.5px solid #fff;
    color: #fff;
    padding: 12px 60px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-ver-todo:hover {
    background-color: #fff;
    color: #000;
}

/* --- SECCIÓN: PODIO Y RESULTADOS (LIMPIO) --- */
.podium-section {
    max-width: 1100px;
    margin: 100px auto;
    padding: 0 40px;
}

.podium-main-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.podium-card {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(15px);
    border-radius: 45px;
    padding: 60px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}

.podium-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.podium-winner { display: flex; align-items: center; gap: 20px; }
.trophy-icon { 
    width: 45px; 
    filter: brightness(0) invert(1);
    opacity: 1;
}
.winner-data h4 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.winner-data small { opacity: 0.5; font-size: 0.8rem; }

.podium-runners { display: flex; gap: 60px; }
.podium-item { display: flex; align-items: baseline; gap: 15px; }
.rank { 
    font-size: 1.6rem; 
    font-weight: 900; 
    min-width: 35px; /* Espacio fijo para el número */
    display: inline-block;
}

.item-data p { font-size: 1rem; font-weight: 600; margin: 0; }
.item-data small { opacity: 0.4; font-size: 0.75rem; }

.podium-bottom { display: flex; justify-content: center; gap: 120px; }

/* Lista de resultados (6-10 y Extra) */
.top-list-short { 
    max-width: 500px; 
    margin: 10px auto; 
}

.extra-results-container {
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Movimiento fluido */
    opacity: 1 !important; /* Aseguramos visibilidad */
}

/* Animación interna para los nombres extra */
#inner-extra-results .list-row {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#results-extra-wrapper:not([style*="max-height: 0px"]) .list-row {
    opacity: 1;
    transform: translateY(0);
}

#inner-extra-results {
    padding-bottom: 25px; /* Margen de seguridad para el último nombre */
}

.list-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.list-row p { flex-grow: 1; margin: 0 30px; font-weight: 600; }
.list-row small { opacity: 0.3; font-size: 0.7rem; }










/* --- ANIMACIONES SECCIÓN REGLAMENTO --- */

/* El contenedor del título */
.reglamento-container .reglamento-title {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* La tabla/wrapper con un deslizamiento desde abajo */
.reglamento-table-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.3s; /* Aparece justo después del título */
}

/* Estado Activo (Cuando el IntersectionObserver detecta la sección) */
.reglamento-container.active .reglamento-title {
    opacity: 1;
    transform: translateY(0);
}

.reglamento-container.active .reglamento-table-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto sutil al pasar el mouse por la fila (PC) */
.reglamento-table tr {
    transition: background-color 0.4s ease, transform 0.4s ease;
}

.reglamento-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: scale(1.01); /* Un crecimiento casi imperceptible */
}

/* Animación del botón de descarga */
.btn-download {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-download:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

/* --- ANIMACIÓN SUTIL PARA CATEGORÍAS --- */

/* 1. Títulos: Aparecen subiendo suavemente */
.categorias-section .reveal h2, 
.categorias-section .reveal p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.categorias-section .reveal.active h2,
.categorias-section .reveal.active p {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Tarjetas: Deslizamiento lateral (Stagger Effect) */

/* Tarjeta de texto viene de la izquierda */
.categorias-grid.reveal .info-card {
    opacity: 0;
    transform: translateX(-30px); /* Movimiento corto para que sea sutil */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Tarjeta de imagen viene de la derecha */
.categorias-grid.reveal .image-card {
    opacity: 0;
    transform: translateX(30px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.2s; /* Un poquito después que el texto */
}

/* Cuando la sección entra en el visor (clase .active) */
.categorias-grid.reveal.active .info-card,
.categorias-grid.reveal.active .image-card {
    opacity: 1;
    transform: translateX(0);
}


/* --- SECCIÓN REGLAMENTO --- */
.reglamento-page {
    background-color: #000;
    padding-top: 150px; 
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.reglamento-container {
    width: 90%;
    max-width: 1000px;
    text-align: center;
    margin-bottom: 60px;
}

.reglamento-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 4rem;
    color: #fff;
    letter-spacing: 5px;
    margin-bottom: 40px; 
    text-transform: uppercase;
}

.reglamento-table-wrapper {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 20px;
}

.reglamento-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    /* Asegura que la tabla intente centrar su contenido */
    margin: 0 auto;
}

.reglamento-table th {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* CORRECCIÓN: Centrado de encabezados */
    text-align: center; 
}

.reglamento-table td {
    padding: 20px 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    /* CORRECCIÓN: Centrado de celdas */
    text-align: center;
}

/* Botón de Descarga alineado al centro */
.btn-download {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centra contenido del link */
    gap: 8px;
    transition: 0.3s;
}

.btn-download:hover {
    color: rgba(255, 255, 255, 1);
}

.icon-doc {
    width: 20px; /* Ajusta según necesites */
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
    
    /* Forzamos a que sea blanco si el navegador lo oscurece */
    filter: brightness(0) invert(1); 
    
    /* Animación suave */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}

/* Efecto al pasar el mouse por el botón completo */
.btn-download:hover .icon-doc {
    transform: scale(1.2) rotate(-10deg); /* Un pequeño salto y giro */
    filter: brightness(1.5) invert(1); /* Brilla un poco más */
}

/* Estilo del botón para que el texto también sea blanco */
.btn-download {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* --- SECCIÓN CATEGORÍAS --- */
.categorias-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 100px auto; 
    padding: 0 20px;
    text-align: center;
}

.categorias-main-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 3px;
    color: #fff;
}

.categorias-description {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto 10px auto;
}

.campeonato-year {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 40px;
}

.categorias-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 30px;
    align-items: stretch;
}

.info-card {
    background-color: #1a1a1a;
    border-radius: 40px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    color: #fff;
}

.fondo-type {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 40px;
    text-align: center;
}

.lista-edades {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.lista-edades li {
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

.lista-edades li span {
    font-weight: 700;
}

.nota-footer {
    font-size: 0.65rem;
    line-height: 1.4;
    opacity: 0.6;
    text-align: center;
}

.image-card {
    border-radius: 40px;
    overflow: hidden; 
}

.img-responsive {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Espaciado entre las filas de categorías */
.medio-fondo-grid {
    margin-top: 40px; /* Espacio entre el bloque de 128km y el de 80km */
}

/* Contenedor de notas dentro de la tarjeta */
.notas-container {
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.nota-small {
    font-size: 0.6rem;
    line-height: 1.4;
    opacity: 0.5;
    margin-bottom: 10px;
    text-align: center;
}

/* Texto legal de pie de página */
.legal-footer {
    margin-top: 60px;
    padding-bottom: 80px;
    text-align: center;
}

.nota-discapacidad {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    max-width: 600px;
    margin: 0 auto 40px auto;
    line-height: 1.5;
}

/* Botón Registrate Final */
.btn-final-container {
    display: flex;
    justify-content: center;
}

.btn-registrate-final {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 50px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: 0.3s ease;
}

.btn-registrate-final:hover {
    background-color: #fff;
    color: #000;
}












/* --- ANIMACIÓN HERO UBICACIÓN --- */

/* El título SALINAS con un efecto de revelado y expansión */
.salinas-title {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(5px);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* La descripción y el botón con un retraso suave */
.hero-description, 
.btn-location-container {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-description {
    transition-delay: 0.4s;
}

.btn-location-container {
    transition-delay: 0.6s;
}

/* Activación cuando la sección está visible (clase .active) */
.hero-text-container.active .salinas-title {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

.hero-text-container.active .hero-description,
.hero-text-container.active .btn-location-container {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto hover extra para el botón de ubicación */
.btn-location {
    transition: transform 0.3s ease, background-color 0.3s ease, letter-spacing 0.3s ease;
}

.btn-location:hover {
    transform: translateY(-3px);
    letter-spacing: 2px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* --- ANIMACIONES SECCIÓN HISTORIA --- */

/* 1. Líneas del Cabezal: Se expanden desde el centro */
.historia-header.reveal .line {
    width: 0;
    transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.historia-header.reveal span {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease-out 0.3s;
}

.historia-header.active .line {
    width: 100%; /* O el ancho original que tengan las líneas */
}

.historia-header.active span {
    opacity: 1;
    transform: scale(1);
}

/* 2. Carrusel: Aparece con un efecto de Zoom y Opacidad */
.carousel-container.reveal {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.carousel-container.active {
    opacity: 1;
    transform: scale(1);
}

/* 3. Ítems del Carrusel: Pequeño rebote al entrar */
.carousel-item {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

/* 4. Contenido de Texto: Deslizamiento hacia arriba */
.historia-content.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.2s;
}

.historia-content.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- ANIMACIÓN SECCIÓN DESTINOS --- */

/* 1. Título principal */
.destinos-main-title.reveal {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.8s ease-out;
}

.destinos-main-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Tarjetas de Destino: Estado inicial */
.destino-card.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 3. Efecto Cascada (Stagger) */
/* La primera tarjeta aparece normal */
.destino-card.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* La segunda tarjeta con un pequeño retraso */
.destino-card.reveal.active:nth-child(2) {
    transition-delay: 0.2s;
}

/* La tercera tarjeta con un poco más de retraso */
.destino-card.reveal.active:nth-child(3) {
    transition-delay: 0.4s;
}

/* 4. Micro-interacción al pasar el mouse (PC) */
.destino-card:hover .destino-img {
    transform: scale(1.1); /* Zoom suave a la foto */
    transition: transform 0.6s ease;
}


/* --- SECCIÓN UBICACIÓN --- */
.ubicacion-hero {
    width: 100%;
    height: 90vh;
    background: url('FOTOS/salinas2.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    overflow: hidden;
}

.ubicacion-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 40%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 80px;
}

.hero-text-container {
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.salinas-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 10rem; /* Tamaño gigante para impacto visual */
    color: #fff;
    letter-spacing: 5px;
    margin-bottom: 20px;
    line-height: 1;
}

.hero-description {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-weight: 400;
}

/* Botón Ovalado Minimalista */
.btn-location {
    display: inline-block;
    border: 1.5px solid #fff;
    color: #fff;
    padding: 12px 35px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: 0.3s ease;
    text-transform: uppercase;
}

.btn-location:hover {
    background-color: #fff;
    color: #000;
}

/* --- SECCIÓN HISTORIA Y CARRUSEL --- */
.historia-section {
    background-color: #000;
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.historia-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.line { width: 150px; border: 0.5px solid rgba(255,255,255,0.3); }

.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 450px;
    perspective: 1000px; /* Da profundidad al movimiento */
}

.carousel-item {
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 10px;
    overflow: hidden;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La clase .center hará que la imagen destaque */
.carousel-item.center {
    width: 480px;
    height: 400px;
    z-index: 5;
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05); /* Ligeramente más grande para resaltar */
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* La clase .side para las imágenes laterales */
.carousel-item.side {
    width: 320px;
    height: 320px;
    opacity: 0.4; /* Más opaca para que no distraiga */
    z-index: 1;
    filter: grayscale(80%); /* Efecto blanco y negro para los lados */
    transform: scale(0.9);
}

.carousel-item.side:hover { 
    opacity: 0.7; 
    filter: grayscale(30%); 
}

/* --- CONTENIDO DE TEXTO --- */
.historia-content {
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    /* Suaviza la aparición/desaparición del texto al rotar */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#dynamic-title { 
    font-size: 2.5rem; 
    margin-bottom: 20px; 
    text-transform: uppercase;
}

#dynamic-text { 
    font-size: 0.95rem; 
    line-height: 1.8; 
    opacity: 0.8; 
}

/* --- SECCIÓN DESTINOS --- */
.destinos-section {
    background-color: #000;
    padding: 100px 0;
    text-align: center;
}

.destinos-main-title {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 60px;
    letter-spacing: 2px;
}

.destinos-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.destino-card {
    position: relative;
    width: 320px;
    height: 480px; /* Formato vertical como en la referencia */
    overflow: hidden;
    cursor: pointer;
}

.destino-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Capa de degradado oscuro inferior */
.destino-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.9) 100%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    box-sizing: border-box;
}

.destino-info {
    text-align: center;
    width: 100%;
    color: #fff;
}

.destino-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.destino-info p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 20px;
}

/* Enlace "Ver Ubicación" subrayado */
.link-ubicacion {
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1.5px solid #fff;
    padding-bottom: 5px;
    transition: opacity 0.3s;
}

.link-ubicacion:hover {
    opacity: 0.7;
}

/* Efecto hover en la imagen */
.destino-card:hover .destino-img {
    transform: scale(1.05);
}