:root {
    --naranja: #FF6600; /* Color aproximado del logo */
    --negro: #1a1a1a;
    --blanco: #ffffff;
    --gris-oscuro: #333333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--blanco);
    color: var(--negro);
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: var(--negro);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
}

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

.nav-links li a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-weight: bold;
    font-size: 0.9rem;
}

.nav-logo-img {
    height: 75px;       /* Subimos de 50px a 75px para ganar nitidez */
    width: auto;        /* Mantiene la proporción perfecta */
    display: block;
    padding: 5px 0;    /* Le damos un poco de aire para que no toque los bordes */
    transition: transform 0.3s ease;
}

.nav-logo-img:hover {
    transform: scale(1.05); /* Un pequeño efecto cuando pasan el mouse */
}

/* Ajuste para el contenedor del logo en el nav */
.logo-nav {
    display: flex;
    align-items: center;
}

/* Estilos base para el botón hamburguesa */
.hamburger {
    display: none; /* Oculto en PC */
    cursor: pointer;
    font-size: 1.5rem;
    color: white; /* O el color que prefieras */
}

/* Hero Section */
.hero {
    padding: 4rem 5%;
    text-align: center;
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('../assets/img/pattern.png');
}
/* 1. Reducir el aire general de las secciones */
section {
    padding: 40px 0 !important; /* Bajamos de 60/80px a 40px */
}
.main-logo {
    display: block;
    margin: 0 auto 1.5rem auto; /* Centrado y con el margen inferior que tenías antes */
    
    /* El truco para que sea responsivo */
    width: 80%;            /* En móviles ocupará casi todo el ancho disponible */
    max-width: 280px;      /* Pero en la compu no pasará de este tamaño (ajustalo a gusto) */
    
    height: auto;          /* Mantiene la proporción siempre */
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-desc {
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}
/* Slogan estilo Fénix */
.slogan-secundario {
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 300; /* Fino como el de la imagen */
    color: var(--gris-oscuro);
    margin-top: -10px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
/* Iconos de detalles */
.quick-details {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.detail-item i {
    font-size: 2rem;
    color: var(--naranja);
    margin-bottom: 0.5rem;
    display: block;
}

/* Botón con brillo (Shimmer) */
/* --- Botón Inscribirme con luz automática (Loop) --- */
.btn-register {
    display: inline-block;
    padding: 1.2rem 3rem;
    background-color: var(--naranja);
    color: white !important;
    font-weight: bold;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shine 3s infinite; /* Animación automática cada 3 segundos */
}

.shimmer:hover::before {
    left: 150%;
}

.btn-register:hover {
    transform: scale(1.05);
}
/* Limitamos el ancho de la tira para que no toque los bordes de la pantalla */
.gallery-wrapper {
    max-width: 900px; 
    margin: 0 auto 30px auto; /* Centrado y con espacio abajo antes del texto */
    padding: 0 20px; /* Margen interno de seguridad para móviles */
}


/* 5. Ajuste para que las 3 cards no floten raro */
/* Contenedor principal */
.cards-container {
    margin-top: 0 !important; /* Quitamos el margen superior que las separa del h2 */
    display: grid;
    /* Crea 3 columnas iguales exactamente */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
    width: 100%;
    max-width: 1000px; /* Ajustalo según tu gusto */
    margin: 30px auto 0 auto;
    /* --- EL ESTILO COHERENTE CON LOS MAPAS --- */
    background:#eeeaea;        /* Gris muy oscuro/negro (igual al de Strava) */
    /*border: 2px solid #ff4500;   /* Borde naranja Yaguarundí */
    border-radius: 15px;         /* Bordes redondeados */
    padding: 30px;               /* Espacio interno para que las cards no toquen el borde */
    
    margin: 20px auto 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
/* --- SECCIÓN DE CARDS (SERVICIOS) --- */
.cards-section {
    padding: 40px 5%;
    background: #fdfdfd;
}
/* Quitamos el aire excesivo de las secciones */
.cards-section, .map-section {
    padding-top: 10px !important;    /* Casi pegado a la sección anterior */
    padding-bottom: 20px !important; /* Un poco de aire abajo */
}
.cards-section h2 {
    margin-bottom: 25px !important;
}
/* Ajustamos los títulos H2 para que no empujen hacia arriba */
.map-wrapper h2 {
    display: inline-block;    /* ¡CLAVE! Hace que el h2 solo mida lo que mide el texto */
    position: relative;
    padding-bottom: 10px;     /* Espacio para que la raya no pegue a las letras */
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    padding-top: 0 !important;
}
/* Opcional: Una rayita naranja debajo del título de la sección */
.map-wrapper h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--naranja);
    margin: 5px auto 0 auto;  /* La centra respecto al texto */
    border-radius: 2px;
}   

/* La card individual */
.card {
    border-top: 4px solid var(--naranja); /* Una "ceja" naranja arriba de cada card */
    width: 100%; /* Ahora el ancho lo maneja el Grid, no la card */
    background: #ffffff;
    border: none; /* Quitamos bordes extras si los había */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    
}

.card:hover { 
    transform: translateY(-10px); 
}

.card-img-container img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body { 
    padding: 25px; 
    text-align: center; 
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Empuja el botón hacia abajo para que todos queden alineados */
}

/* Títulos internos de las Cards (CIRCUITO, PARQUE CERRADO, etc) */
.card-body h3 {
    color: var(--naranja);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;

}
.card-body p { margin-bottom: 1.5rem; font-size: 0.9rem; flex-grow: 1; }

/* Contenedor del mapa con borde delicado */
.map-image-container {
    max-width: 220px; /* Un toque más angosto */
    margin: 10px auto;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a; /* Fondo oscuro para que no sea todo gris */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.map-image-container:hover {
    transform: scale(1.03); /* Un efectito de zoom cuando pasás el mouse */
}

.map-static-img {
    width: 100%;
    height: 160px; /* FORZAMOS altura menor para que sea más armónico */
    object-fit: cover; /* Recorta los bordes de la imagen para que encaje perfecto */
    display: block;
}

/* Botón Ver en Strava (Naranja) */
.view-on-strava {
    display: block;
    background: #FC4C02;
    color: white;
    font-size: 11px;
    padding: 8px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}

/* --- Botones de Cards (Colores Invertidos) --- */
.btn-detail {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--naranja); /* Fondo naranja */
    color: white !important; /* Letra blanca */
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background 0.3s;
}
.btn-detail:hover {
    background-color: var(--negro); /* Cambia a negro al pasar el mouse */
}

/* --- EFECTO SHIMMER (BRILLO) --- */
.shimmer-flotante {
    position: relative;
    overflow: hidden; /* Importante para que el brillo no se salga */
}

.shimmer-flotante::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    animation: shimmer-effect 2.5s infinite; /* Velocidad y repetición */
}

@keyframes shimmer-effect {
    0% { transform: translateX(-150%) rotate(45deg); }
    80% { transform: translateX(-150%) rotate(45deg); } /* Pausa antes de repetir */
    100% { transform: translateX(150%) rotate(45deg); }
}

/* WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    z-index: 1000;
}
/* WhatsApp Estilo "Escribinos" */
.wsp-final {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
}

.wsp-final i { font-size: 1.5rem; }

/* Quitar subrayado molesto de enlaces globales si existe */
a { text-decoration: none !important; }
/* Footer */
footer {
    background: var(--negro);
    color: white;
    text-align: center;
    padding: 2rem;
}

.social-icons {
    margin: 1rem 0;
}

.social-icons a {
    color: white;
    font-size: 1.5rem;
    margin: 0 10px;
}
.map-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: 800px !important; /* En lugar de %, usamos un ancho fijo menor para controlar el tamaño máximo */
    margin: 0 auto !important;/* Centramos el bloque */
    padding: 0 20px;
    text-align: center;
}
/* El contenedor del mapa: Recobramos el tamaño */
.map-card {
    width: 280px; /* Volvemos a un tamaño más generoso */
    border: 1px solid #ddd; /* Borde delicado */
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto 15px auto; /* Centrado y con aire abajo para los botones */
    line-height: 0; /* Quita espacios fantasma debajo de la imagen */
}
.map-img-only {
    width: 100%;
    height: auto;
    display: block;
    /* EFECTO DE OSCURIDAD LEVE */
    filter: brightness(0.85); /* 1 es original, 0.85 le saca un 15% de luz */
    transition: filter 0.3s ease; /* Para que si pasás el mouse, el cambio sea suave */
}
/* OPCIONAL: Que se aclare cuando el usuario pasa el mouse */
.map-img-only:hover {
    filter: brightness(1); 
}

/* Grupo de botones: Uno sobre otro */
.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Espacio mínimo entre botones */
}
.btn-strava, .btn-gpx {
    width: 200px;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
.btn-strava {
    background-color: #FC4C02;
    color: white !important;
}

.btn-gpx {
    background-color: #f4f4f4;
    color: #333 !important;
    border: 1px solid #ccc;
}

.map-container {
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 25px #dcd9d9;/* rgba(0,0,0,0.15);*/
}

.map-container iframe {
    filter: grayscale(100%) invert(90%); /* El toque oscuro que querías */
}
@keyframes shine {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}
/* --- Sección Noticia: Tira de Fotos + Texto --- */
/* Contenedor principal de la sección */
.news-section {
    padding: 30px 0 !important; /* Bajamos el espacio de 60px a 30px */
    width: 100%;
    background-color: #ffffff;
}
/* Este contenedor ahora centraliza TODO el bloque de noticias */
/* La "caja" que centra todo y limita el ancho */
.news-container {
    max-width: 900px;  /* Ancho máximo igual al mapa */
    margin: 0 auto;    /* Centra la caja en la pantalla */
    padding: 0 20px;   /* Margen para que no toque los bordes en celulares */
    box-sizing: border-box;
    /* APLICAMOS EL MISMO ESTILO QUE EN SERVICIOS */
    background: #eeeaea;      /* El mismo gris que usaste en servicios */
    /*border: 2px solid #ff4500;   /* El mismo borde naranja */
    border-radius: 15px;         /* Los mismos bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
}
/* Título alineado a la izquierda dentro de los 900px */
.news-container h2 {
    display: inline-block;    /* ¡CLAVE! Hace que el h2 solo mida lo que mide el texto */
    position: relative;
    padding-bottom: 10px;     /* Espacio para que la raya no pegue a las letras */
    text-align: center;
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--negro);
    /*width: 100%; /* Asegura que ocupe todo el ancho para poder centrarse */
}
.news-container h2::after {
    content: '';
    display: block;
    width: 100%;             /* Ahora el 100% es exactamente el ancho del texto */
    height: 3px;
    background: var(--naranja);
    margin: 5px auto 0 auto;  /* La centra respecto al texto */
    border-radius: 2px;
}
/* Título de la sección alineado a la izquierda para que parezca noticia */
.news-section h2 {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 30px auto;
    font-size: 2rem;
}

/* Quitamos el margen superior de los títulos si están empujando mucho */
/* 2. Pegar los títulos a su contenido */
h2 {
    margin-bottom: 15px !important;
    margin-top: 0;
}
/* La tira de fotos: ahora forzamos que sea un bloque independiente */
/* El contenedor de la galería */
.news-gallery {
    display: GRID;
    grid-template-columns: repeat(3, 1fr);
    /*flex-direction: column;  Por defecto para celular: una abajo de otra */
    gap: 20px;
    padding: 10px;
}

.news-gallery img {
    width: 100%;       /* Ocupa todo el ancho disponible */
    height: auto;      /* ¡CLAVE! Mantiene la proporción original, no estira */
    display: block;
  
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* El bloque de texto: también como bloque independiente debajo */
.news-text-block {
    width: 100%;
    border-left: 4px solid #FF6600; /* Color naranja Yaguarundi */;
    padding-left: 20px;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
}
.news-text-block p {
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--gris-oscuro);
    margin: 0;
    text-align: left;
}
.social-icons a:hover {
    color: #FF6600; /* El naranja de Yaguarundi */
    transition: 0.3s;
}
/* Contenedor general para dar margen */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* Video Responsivo */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Relación 16:9 */
    height: 0;
    overflow: hidden;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Grilla de Distancias */
.distancias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.distancia-card {
    background: #f4f4f4;
    padding: 30px;
    border-radius: 8px;
    transition: transform 0.3s;
}

.distancia-card:hover {
    transform: translateY(-10px);
    background: #e0e0e0;
}

.distancia-card i {
    font-size: 2.5rem;
    color: #2ecc71; /* Un verde deportivo o el color de tu marca */
    margin-bottom: 15px;
}

/* Lista de Reglas */
.reglas-lista {
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-left: 5px solid var(--naranja); /* Color de atención */
}

.reglas-lista ul {
    list-style: none;
    padding: 0;
}

.reglas-lista li {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.reglas-lista i {
    color: var(--naranja);
    margin-right: 10px;
}

.vueltas-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.v-card {
    background: #1a1a1a;
    color: white;
    padding: 25px;
    border-radius: 10px;
    width: 250px;
    border-bottom: 4px solid #333;
}

.v-card.highlight {
    border-bottom: 4px solid var(--naranja); /* Color distintivo para la Ultra */
}

.v-card .km {
    display: block;
    font-size: 1.2rem;
    color: var(--naranja);
    font-weight: bold;
    margin: 10px 0;
}

.rules-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 15px;
    text-align: left;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.rules-box ul li {
    list-style: none;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.rules-box i {
    color: #e67e22;
    margin-right: 10px;
}

.note {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Contenedor de reglas */
/* --- SECCIÓN REGLAS (Limpieza total) --- */
.reglas-grid {
    display: grid;
    /* En PC: Una columna debajo de otra ocupando todo el ancho */
    grid-template-columns: 1fr; 
    gap: 15px;
    width: 100%;
    max-width: 800px; /* Limitamos el ancho para que no se estire infinito en PC */
    margin: 0 auto;   /* Centramos el bloque */
    padding: 10px;
}

/* Item individual */
.regla-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid var(--naranja);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: 100%; /* Asegura que ocupe toda su columna */
}

.regla-icon {
    font-size: 1.5rem;
    color: #333;
    margin-right: 20px;
    min-width: 40px;
    text-align: center;
}

.regla-texto p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #444;
}

/* Aviso inferior */
.reglamento-privado {
    margin-top: 30px;
    padding: 15px;
    background: #fdf6e3;
    border-radius: 8px;
    display: inline-block;
    font-style: italic;
    color: #856404;
}

.video-container-fixed {
    position: relative;
    width: 100%;
    max-width: 800px; /* Ancho máximo para que no ocupe toda la pantalla en PC */
    margin: 0 auto;
    aspect-ratio: 16 / 9; /* Esto obliga a mantener la proporción del video */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-top: 40px; /* Esto empuja el video hacia abajo, separándolo del texto */
    margin-bottom: 40px; /* También le da aire respecto a lo que sigue abajo */
}

.video-container-fixed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.info-intro h1 {
    margin-bottom: 20px; /* Separa el título del subtítulo */
}

.info-intro p {
    margin-bottom: 30px; /* Separa el subtítulo del video */
}
/* Esto solo afecta a los párrafos que estén dentro de info-text */
.info-text p {
    margin-top: 20px;   /* Para separarlo del H2 */
    line-height: 1.8;   /* Para que el texto sea más fácil de leer */
    color: #444;        /* Un gris oscuro para que sea elegante */
}
/* Estilo específico para la página de reglas */
.reglas-page {
    background-color: #fcfcfc;
    padding: 60px 0;
}

.regla-item h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #333;
    text-transform: uppercase;
}

.reglamento-full-box {
    margin-top: 50px;
    padding: 40px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 15px;
    text-align: center;
}

.reglamento-full-box h3 {
    color: var(--naranja);
    margin-bottom: 15px;
}

.obligatorios-section {
    background-color: #fff3cd; /* Un tono amarillo suave de advertencia */
    padding: 50px 0;
    margin-top: 40px;
    border-radius: 20px;
}

.obligatorios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.obs-item {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

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

.obs-item i {
    font-size: 2rem;
    color: #333;
    margin-bottom: 15px;
}

.obs-item h4 {
    margin-bottom: 10px;
    color: #856404;
    text-transform: uppercase;
}

.obs-item p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
}

/* Contenedor del acordeón */
.accordion-container {
    max-width: 800px;
    margin: 40px auto;
}

.faq-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* El botón de la pregunta */
.accordion {
    background-color: #f8f9fa;
    color: #333;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: var(--naranja); /* El color de Yaguarundi */
}

/* El panel de la respuesta (oculto por defecto) */
.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel p {
    padding: 20px 0;
    margin: 0;
    color: #666;
    line-height: 1.6;
}

/* Rotación del icono cuando está activo */
.active i {
    transform: rotate(180deg);
}

/* Estilos para Resultados */
.results-section {
    padding: 60px 0;
    background-color: #f4f4f4;
}

.winner-podium {
    background: #1a1a1a;
    color: var(--naranja);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 40px;
    text-align: center;
    border: 2px solid var(--naranja);
}

.winner-podium i {
    font-size: 3rem;
    margin-bottom: 10px;
}


/* Esta es la nueva fila que envuelve SOLO a los mapas */
.maps-flex-row {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 20px;/* Espacio entre los dos mapas */
    width: 100%;
    flex-wrap: wrap; /* Para que en el celu se pongan uno abajo del otro */
}
.route-column {
    display: flex;          /* Esto seguro ya lo tenías */  
    flex-direction: column; /* Esto alinea el Sol -> Mapa -> Botón uno abajo del otro */
    align-items: center;    /* Esto centra todo el contenido horizontalmente */
    gap: 0px; /* Evita espacios extra entre título, mapa y botón */

    flex: 1;                /* Esta es la que agregamos recién para que las columnas midan lo mismo */    
    min-width: 300px;       /* Evita que se aplasten mucho en tablets */
    max-height: 450px; /* Ajustá este valor a ojo para "apretar" la columna */
    
}
/* mapas de recorridos diurno y nocturno*/
.route-label {
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    font-size: 0.9rem; /* Un toque más chico */
    color: #ff4500; 
    text-align: center;
    margin-bottom: 20px;
    font-weight: 800;
}
/* Espaciado general para todas las secciones de mapas */
.map-section, .routes-section {
    padding: 30px 0; /* Espacio arriba y abajo dentro de la sección */
}


.download-container {
    text-align: center;
    margin-top: 15px;
}

/* Botón GPX (Gris/Transparente) */
.btn-download {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-download:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ff4500;
    color: #ff4500;
    transform: translateY(-2px);
}

.btn-download span {
    margin-right: 8px;
}

/* Texto de instrucciones más chico y limpio */
/* Texto de Recomendaciones Compacto */
/* 2. Ajustamos el contenedor para que no se pegue a la izquierda */
.instructions-box {
    margin-top: 30px;
    max-width: 550px; /* Un ancho razonable para que no se desparrame */
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px; /* Aire a los costados para mobile */
}

.instructions-box i {
    color: #ff4500 !important;
}

/* 1. Centramos el título de las instrucciones */
.instructions-box h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
    text-align: center; /* Título centrado sobre todo el bloque */
    width: 100%;
}

/* 3. La lista con indentación (sangría) hacia adentro */
.instructions-box ol {
    margin: 0 auto;
    padding-left: 40px; /* Esto empuja la lista hacia la derecha (la sangría que pediste) */
    display: inline-block; /* Para que el bloque de lista se comporte bien en el centro */
    text-align: left; /* Pero el texto adentro sigue alineado a la izquierda para leer bien */
}
.instructions-box li {
    font-size: 13px;
    line-height: 1.3;
    color: #666;
    margin-bottom: 8px; /* Un poquito de aire entre puntos para que no sea un bloque macizo */
}
/* 4. La advertencia también alineada con la lista */
.disclaimer {
    font-size: 12px;
    color: #888;
    margin-top: 15px;
    padding-left: 20px; /* Un toque de sangría para que siga la línea de arriba */
    font-style: italic;
    text-align: center; /* Opcional: podés probarla centrada también */
}


.instructions-box strong {
    color: #000 !important;
}




.info-icon {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Opcional: Una línea decorativa sutil para separar */
/* 4. Achicar el espacio del divisor naranja */
.section-divider {
    width: 30px;
    height: 3px;
    background-color: #ff4500;
    margin: 10px auto !important;   
    border-radius: 2px;
}
/* Línea divisoria solo para PC */
.divider-line {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.routes-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    padding: 20px 0;
}

.route-box {
    flex: 1;
    min-width: 320px; /* Para que no se rompa en pantallas chicas */
    max-width: 500px;
    background: rgba(255, 255, 255, 0.05); /* Un toque sutil de fondo */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #333; /* Coherencia con tu mapa de epicentro */
}

.route-subtitle {
    text-align: center;
    font-family: inherit;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.routes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre los dos mapas */
    justify-content: center;
}
.route-icon {
    display: block;      /* Para que el icono quede arriba del texto */
    font-size: 2rem;     /* Bien grande para que se vea */
    margin-bottom: 5px;
    filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.4)); /* Un resplandor sutil */
}
/* Efecto opcional: Que el sol brille un poquito más */
.route-label:hover .route-icon {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}
.route-item {
    flex: 1;
    min-width: 300px; /* Evita que se achiquen demasiado en tablets */
    max-width: 100%;
}

.route-item h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--naranja); /* Esto llama al color que definiste arriba */ /* Usá acá el mismo color de tus otros títulos */
}

/* Reutilizamos tu estilo de contenedor de mapa para mantener coherencia */
.map-container {
    border: 2px solid #333; /* O el color de borde que ya uses */
    border-radius: 8px;
    overflow: hidden;
}

/* Tabla Responsiva */
.table-container {
    overflow-x: auto; /* Permite scroll horizontal en móviles */
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    -webkit-overflow-scrolling: touch; /* Para que el scroll en iPhone sea suave */
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.results-table th, .results-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.results-table th {
    background-color: #333;
    color: white;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.winner-row {
    background-color: #fff9e6;
    font-weight: bold;
}

/* Etiquetas de Estado */
.status {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status.win {
    background: #2ecc71;
    color: white;
}

.status.dnf {
    background: #e74c3c;
    color: white;
}

.table-note {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #777;
    font-style: italic;
}

/* Sección de Fotos */
.fotos-section {
    padding: 60px 0;
    background-color: #fff;
}

.external-album-box {
    margin-bottom: 40px;
    text-align: center;
}

.btn-album {
    background-color: #1a1a1a;
    color: var(--naranja);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    border: 2px solid var(--naranja);
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-album:hover {
    background-color: var(--naranja);
    color: #1a1a1a;
    transform: translateY(-3px);
}

/* Grilla */
/* 1. El contenedor de la grilla */
.photo-grid {
    display: grid;
    /* 1 columna en móviles, 2 en tablets, 3 en desktop */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* 2. El envoltorio de cada foto (opcional, para dar estilo) */
/* --- ESTADO INICIAL (PC y General) --- */
.photo-item {
    position: relative;
    overflow: hidden; /* Corta lo que sobresalga si fijamos altura */
    
}
.share-icon {
    color: var(--naranja); /* Usamos tu naranja */
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.share-icon:hover {
    transform: scale(1.2);
    color: white;
}

/* La capa de texto */
.photo-overlay {
    display: flex;
    justify-content: space-between; /* Texto a la izquierda, icono a la derecha */
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    padding: 15px 20px; /* Un poco más de aire */
    text-align: center;
    
    /* Lo mandamos abajo y lo hacemos invisible por defecto */
    transform: translateY(100%); 
    opacity: 0;
    
    /* Animación suave */
    transition: all 0.4s ease-in-out;
    pointer-events: none;
}

/* 3. LA MAGIA: La imagen propiamente dicha */
.photo-item img {
    width: 100%;
    height: auto; /* Altura fija para que la grilla sea simétrica */
    object-fit: cover; /* Llena el espacio sin estirarse */
    
    /* CAMBIO CLAVE: Prioriza la parte superior para no cortar cabezas */
    object-position: top center; 
    
    display: block;
    transition: transform 0.5s ease; /* Preparado para el zoom */
}

.photo-item:hover img {
    transform: scale(1.05); /* Zoom sutil del 5% */
}   

.detalle-bloque {
    padding: 60px 0; /* Espacio interno */
    scroll-margin-top: 100px; /* IMPORTANTE: evita que el navbar tape el título al saltar */
}

.titulo-naranja {
    color: var(--naranja);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.divisor {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

/* Página de Detalles */
.detalles-page {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.detalle-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-left: 5px solid var(--naranja);
    scroll-margin-top: 100px; /* Para que el salto del ancla no quede tapado por el nav */
}

.detalle-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.detalle-header i {
    font-size: 2rem;
    color: var(--naranja);
}

.titulo-naranja {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

/* Listas y Grillas internas */
.lista-detalles {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.lista-detalles li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lista-detalles i {
    color: var(--naranja);
    width: 20px;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.servicio-tag {
    background: #fff5f0;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    color: #555;
    border: 1px solid #ffe0d0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.expo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}
.valores-yaguarundi {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Montserrat', sans-serif; /* O la que uses en Yaguarundí */
}

.valores-yaguarundi h2 {
    text-align: center;
    color: #2c3e50; /* Color principal de tu marca */
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.tabla-precios {
    display: grid;
    gap: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.fila {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* La columna de nombre es más ancha */
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.encabezado {
    background-color: #2c3e50; /* Color oscuro/selva */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.celda {
    padding: 15px;
    text-align: center;
}

.categoria {
    font-weight: bold;
    text-align: left;
    color: #e67e22; /* Un tono naranja/tierra para destacar la distancia */
}
.fa-crown {
    color: #ffd700;
}

/* --- CONTENEDOR DE RECORRIDOS (STRAVA) --- */
.routes-card-group {
    display: flex;
    flex-direction: column; 
    background: #eeeaea;
    /*border: 2px solid #ff4500;*/
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px; /* Aire con el mapa de abajo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- AJUSTES PARA CELULARES --- */
/* Ajuste para móviles: los mapas se apilan y la línea desaparece */
/* Ajuste para tablets/celulares */
/* --- RESPONSIVE: Pasamos de 3 columnas a 1 en tablets/celu --- */
@media (max-width: 900px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 992px) {
    .card {
        flex: 1 1 calc(50% - 20px); /* Quedan 2 arriba y 1 abajo (centrada) */
    }
}

@media (max-width: 600px) {
    .card {
        flex: 1 1 100%; /* Una sola por fila en el celu */
    }
}

@media (max-width: 850px) {
    
    /* En móviles, la fila de mapas se vuelve columna */
    .maps-flex-row {
        flex-direction: column;
    }
    .divider-line {
        height: 1px;
        width: 100%;
        margin: 10px 0;
        display: none; /* Opcional: ocultar la línea en móvil */
    }
}

/* Forzar que el widget de Strava no se pase de los bordes */
.strava-embed-placeholder {
    transform: scale(0.85); /* 0.85 es un 15% menos. Probá con 0.8 si querés más */
    transform-origin: center top; /* Para que el mapa se achique hacia arriba y no deje aire */
    overflow: hidden !important; /* Corta cualquier intento de scroll */
    display: flex;
    justify-content: center;
    height: 400px !important; /* Ajustá este valor (ej. 380px o 420px) hasta que no se corte lo importante */
    margin-bottom: -40px !important; /* Elimina el espacio sobrante por el escalado */

    max-width: 210px !important; /* Ajustá este número (ej. 250px) hasta que el tamaño te guste */
    /*width: 100% !important;*/
    margin: 0 auto !important;
    /*display: block;*/
}
/* 2. Atacamos directamente al iframe que inyecta Strava */
.strava-embed-placeholder iframe {
    border: none !important;
    overflow: hidden !important;
    height: 100% !important; 
}

@media (max-width: 480px) {
    .photo-grid {
        grid-template-columns: 1fr; /* Una sola foto gigante por fila */
    }
    
    .photo-item img {
        height: 280px; /* Un poco más bajitas en celu */
        /* En celu, a veces es mejor volver al centro */
        object-position: center; 
    }
}

@media (max-width: 768px) {
    .expo-grid { grid-template-columns: 1fr; }
    .route-box {
        min-width: 100%; /* En celu ocupan todo el ancho */
    }
}
@media (max-width: 600px) {
    .photo-grid {
        grid-template-columns: 1fr;
    }
    .cards-container {
        grid-template-columns: 1fr; /* 1 sola columna en celu */
    }

    .tabla-precios {
        display: block;
        width: 100%;
    }

    /* 1. Ocultamos cabecera */
    .fila.encabezado {
        display: none;
    }

    .fila {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #444;
        border-radius: 8px;
        padding: 10px;
        background: #1a1a1a; 
    }

    .celda {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 5px;
        border-bottom: 1px solid #333;
        text-align: right;
        /* --- ACÁ ESTÁ EL CAMBIO --- */
        color: #ffffff; /* Esto pone el precio en blanco */
    }

    .celda::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.8rem;
        color: #ff5500; /* Color naranja Yaguarundí para el rótulo */
        text-align: left;
    }

    /* Ajuste para la celda de título (ULTRA, 12V, etc) */
    .categoria {
        background: #333 !important; /* Fondo gris oscuro para resaltar */
        color: #ff5500 !important; /* Texto naranja */
        justify-content: center !important;
        font-weight: bold;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    /* Quitamos el rótulo naranja si la celda es la categoría */
    .categoria::before {
        content: "" !important;
    }

    .btn-inscripcion { 
        display: block;
        width: 100%; 
        margin-top: 10px;
        text-align: center;
    }
    /* Opción A: Scroll lateral para no perder el formato tabla */
    .table-container {
        overflow-x: auto; /* Permite deslizar a los costados si es muy ancha */
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }

    .results-table {
        min-width: 600px; /* Forzamos un ancho mínimo para que no se amontone el texto */
        font-size: 14px;
    }

    /* Ajuste de los estados (Winner/DNF) para que ocupen menos espacio */
    .status {
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 4px;
    }

    /* Resaltado para el ganador en la tabla */
    .winner-row {
        background: rgba(255, 85, 0, 0.15) !important;
        border: 1px solid #ff5500;
    }
}

.fecha-limite {
    font-size: 0.85em;
    color: #888;
    font-weight: normal;
    display: block;
    margin-top: 5px;
}

.btn-inscripcion {
    background-color: #27ae60; /* Verde éxito/naturaleza */
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.9em;
    transition: background 0.3s;
    display: inline-block;
}

.btn-inscripcion:hover {
    background-color: #1e8449;
}

/* Ajuste en el grid para 5 columnas ahora */
.fila {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
}

.mt-4 { margin-top: 40px !important; }  

/* Esto le da aire a todos los subtítulos del sitio */
.subtitulo-seccion {
    margin-bottom: 20px; /* Aquí le das la luz que necesitas */
    display: block;      /* Asegura que el margen se aplique correctamente */
    line-height: 1.6;    /* De paso, le damos un poco de espacio entre líneas al texto */
    margin-top: 10;
}
.nav-links a.active {
    color: var(--naranja) !important; /* Forzamos tu variable naranja */
    font-weight: bold;
    background: none !important;      /* Quitamos cualquier fondo amarillo */
    border-bottom: 3px solid var(--naranja); /* Rayita naranja un poco más gruesa */
    padding-bottom: 5px;               /* Espacio entre el texto y la rayita */
    transition: all 0.3s ease;
}
/* Responsive */
/* Estilos para móviles (Debajo de 768px) */
.btn-flotante-yagu {
        position: fixed !important;
        bottom: 85px;
        right: 30px; /* Por defecto, a la derecha (para la compu) */
        background-color: #e67e22;
        color: white;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        z-index: 9999;
        display: flex;
        align-items: center;
        white-space: nowrap;
        gap: 10px;
        transition: all 0.3s ease;
        border: 2px solid white;
    }

    /* Para que al pasar el mouse (o tocarlo) reaccione */
    .btn-flotante-yagu:active, .btn-flotante-yagu:hover {
        background-color: #d35400;
        transform: translateX(-50%) scale(1.05);
    }

    .btn-flotante-yagu i {
        font-size: 1.2em;
    }
@media (max-width: 480px) {
    .reglas-grid {
        grid-template-columns: 1fr; /* Una sola columna en celus chicos */
    }
    .news-gallery {
        /* Cambiamos de 2 columnas a 1 para que en el celu se vea grande */
        grid-template-columns: 1fr;}
    .news-gallery img {
        width: 100%;       /* Ocupa todo el ancho disponible */
        height: auto;
        object-position: top;
        /*height: 200px; /* Bajamos un poco la altura para que no ocupen toda la pantalla */
    }
}
/* --- ESTO ES LO QUE ARREGLA EL ESCRITORIO --- */
/* Solo se activa si la pantalla es mayor a 768px */
@media (min-width: 768px) {
    .photo-item img {
        height: 350px; /* En PC sí mantenemos altura fija para orden */
        object-position: top; /* Prioriza cabezas si la foto es muy alta */
    }
    .photo-overlay {
        /* Lo mandamos bien abajo para que no se vea */
        transform: translateY(105%); 
        opacity: 0;
    }
    /* Cuando pasamos el mouse por el CONTENEDOR, mostramos el overlay */
    .photo-item:hover .photo-overlay {
        transform: translateY(0);/* Sube a su posición original */
        opacity: 1;/* Se vuelve visible */
    }
    .photo-item:hover img {
        transform: scale(1.1); /* Efecto zoom que queda pro */
    }
    .news-gallery {
        display: grid;
        /* Creamos 2 columnas fijas */
        grid-template-columns: repeat(3, 1fr); 
        gap: 25px;
        /* Centramos la galería si la pantalla es muy ancha */
        max-width: 1000px; 
        margin: 0 auto; 
    }

    .news-gallery img {
        /* Le damos una altura fija pero con object-fit para que no se estire */
        height: 350px; 
        object-fit: cover; 
    }
}

/* --- ESTADO PARA CELULAR --- */
/* Forzamos que se vea siempre en pantallas chicas */
@media (max-width: 768px) {
    /*.news-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en PC
    }*/
    /* Para que en el celu no tape tanto espacio */
    .btn-flotante-yagu {
            right: auto; /* Quitamos la posición de la derecha */
            left: 50%; /* Lo mandamos al medio */
            transform: translateX(-50%); /* Lo centramos perfecto */
            width: 90%; /* Lo hacemos un poco más ancho para que sea un buen blanco de click */
            justify-content: center;
        }
        
        .btn-flotante-yagu:active {
            transform: translateX(-50%) scale(0.95); /* Efecto de "presión" al tocarlo */
        }
    .photo-overlay {
        transform: translateY(0) !important;
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.5); /* Un fondo más sólido para que se lea bien */
    }
    .photo-item img {
        /* Importante: en celu que fluya natural para no cortar cabezas */
        height: auto !important; 
    }
    .hamburger {
        display: block; /* Aparece el icono */
        font-size: 1.8rem;
        cursor: pointer;
        
    }

    .nav-links {
        display: none; 
        background-color: #1a1a1a !important;
        flex-direction: column;
        position: absolute;
        top: 85px; /* Ajustado al nuevo alto del logo */
        left: 0;
        width: 100%;
        padding: 20px 0;
        z-index: 100;
    }

    /* Estilo para el link de la página actual */

    /* Clase que activaremos con JavaScript */
    .nav-links.active {
        display: flex;
        /*animation: slideDown 0.3s ease-out;*/
    }

    .nav-links li {
        margin: 15px 0;
    }

    .nav-links li a {
        font-size: 1.2rem;
        margin-left: 0;
    }
    /* Quitamos el 1fr 1fr que tenías al final, eso rompía el celu */
    .reglas-grid {
        grid-template-columns: 1fr !important; 
        padding: 5px;
    }
}
/* Ajustes para Celulares (Pantallas de menos de 768px) */
@media (max-width: 768px) {
    .maps-flex-row {
        flex-direction: column !important; /* Los pone uno abajo del otro */
        align-items: center !important;
        gap: 40px; /* Más espacio entre el bloque diurno y el nocturno */
    }

    .map-card {
        width: 100% !important; /* Que use el ancho disponible */
        max-width: 320px; /* Pero que no se deforme en tablets */
    }

    .instructions-box {
        padding: 0 20px; /* Evita que el texto toque los bordes del celu */
    }
    
    .instructions-box ol {
        padding-left: 25px; /* Un poco menos de sangría en celu para ganar espacio */
    }

    .btn-strava, .btn-gpx {
        width: 100%; /* Botones grandes, fáciles de tocar con el dedo */
        max-width: 280px;
    }
}
/* ESTILOS PARA LA BITACORA */
/* --- ESTILOS BITÁCORA "MILLAS DE TIERRA" --- */

.bitacora-section {
    padding: 60px 20px;
    background-color: #000; /* Fondo negro puro para que resalte el naranja */
    min-height: 80vh;
}

.bitacora-container {
    max-width: 1000px;
    margin: 0 auto;
}

.titulo-programa {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    color:var(--naranja); /* Tu naranja */
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.bajada-legado {
    text-align: center;
    font-style: italic;
    color: #cccccc;
    max-width: 700px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
    border-left: 2px solid var(--naranja);
    border-right: 2px solid var(--naranja);
    padding: 0 20px;
}

.tabla-wrapper {
    overflow-x: auto;
    margin-bottom: 40px;
}

.tabla-yagu {
    width: 100%;
    border-collapse: collapse;
    background-color: #111;
}

.tabla-yagu thead {
    border-bottom: 3px solid var(--naranja);
}

.tabla-yagu th {
    padding: 15px;
    text-align: left;
    color: var(--naranja);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.tabla-yagu td {
    padding: 15px;
    border-bottom: 1px solid #222;
    color: #e0e0e0;
}

.nombre-corredor {
    font-weight: bold;
    color: #fff !important;
}

.resaltado-millas {
    background-color: var(--naranja);
    color: #000;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 800;
    margin-left: 10px; /* Esto crea el espacio que te falta */
    display: inline-block; /* Asegura que el margen se respete correctamente */
}

.footer-colaboracion {
    text-align: center;
    border-top: 1px dashed #333;
    padding-top: 30px;
    color: #888;
}

.btn-contacto-yagu {
    display: inline-block;
    margin-top: 15px;
    border: 2px solid var(--naranja);
    color: var(--naranja);
    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-contacto-yagu:hover {
    background-color: var(--naranja);
    color: #fff;
}

/* --- ESTILOS DE LA VENTANA MODAL (FICHA) --- */
.modal-yagu {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); /* Fondo oscuro detrás */
}

.modal-content {
    background-color: #1a1a1a;
    margin: 10% auto;
    padding: 25px;
    border: 2px solid #ff6600;
    width: 90%;
    max-width: 450px;
    border-radius: 8px;
    position: relative;
    color: #fff;
    text-align: center;
}

.cerrar-modal {
    position: absolute;
    top: 10px; right: 20px;
    color: #ff6600;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.ficha-header {
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.ficha-nombre {
    color: #ff6600;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 0;
}

.ficha-estado {
    display: inline-block;
    padding: 2px 10px;
    background-color: #333;
    color: #ff6600;
    font-size: 0.8rem;
    border-radius: 20px;
    margin-top: 5px;
}

.ficha-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    text-align: left;
}

.info-item label {
    display: block;
    color: #888;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.info-item span {
    font-size: 1.1rem;
    font-weight: bold;
}

.header-bitacora {
    text-align: center; /* Asegura que todo el bloque esté centrado */
    margin-bottom: 20px;
}

.slogan-bitacora {
    text-align: center;
    color: #ffffff;          /* Blanco puro como pediste */
    font-size: 1.1rem;       /* Tamaño más pequeño y elegante */
    font-weight: 300;        /* Una fuente más fina para que parezca eslogan */
    letter-spacing: 2px;     /* Un poco de aire entre letras */
    text-transform: uppercase;
    margin-top: -5px;        /* Lo acerca un poquito al título principal */
    opacity: 0.9;            /* Le da un toque de sutileza */
    /* --- EL ESPACIO PARA RESPIRAR --- */
    margin-bottom: 40px; 
    display: block; /* Asegura que el margen se aplique correctamente como bloque */
}
.col-sonadores {
    color: #ff6600 !important; /* El naranja Yagu para la palabra clave */
    letter-spacing: 2px;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Un toque de estilo para las filas cuando pasas el mouse (opcional) */
tbody tr:hover {
    background-color: rgba(255, 102, 0, 0.05);
    transition: 0.3s;
}

/* Contenedor de la celda de vueltas y km */
.celda-acumulado {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea al inicio de la celda */
    gap: 15px; /* Este es el "tab" exacto entre el número y el naranja */
}

/* Forzamos que el número de vueltas ocupe un ancho fijo */
.nro-vueltas {
    display: inline-block;
    min-width: 30px; /* Ajustalo según necesites para que el 79 y el 7 queden alineados */
    text-align: right; /* Opcional: alinea los números a la derecha para que las unidades coincidan */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .titulo-programa { font-size: 1.8rem; }
    .tabla-yagu th, .tabla-yagu td { padding: 10px; font-size: 0.8rem; }
}

/* Animación de entrada */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}