:root {
            --bg-color: #141416;       /* Tu fondo oscuro */
            --card-bg: #1e1e24;        /* El fondo "elevado" para tarjetas */
            --accent: #ff7f00;         /* Naranja similar al de tu imagen */
            --text-main: #ffffff;
            --text-muted: #aaaaaa;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
        }

        .main-header {
            display: flex;
            justify-content: space-between; /* Logo a un lado, iconos al otro */
            align-items: center;
            padding: 15px 30px; /* Espacio interno */
            background-color: #141416; /* Mismo fondo que la web para que se integre */
           /* Opcional: Si quieres que se distinga un poco del fondo, usa tu color "elevado":
               background-color: #1e1e24; 
           */  
        }
        .header-content {
             display: flex;
             justify-content: space-between; /* Logo a un extremo, iconos al otro */
             align-items: center;
    /* Usamos el padding vertical aquí para dar aire arriba y abajo */
             padding-top: 15px;
             padding-bottom: 15px;
             width: 100%;
             max-width: 14000px;
             margin: 0 auto;
    
    /* IMPORTANTE: Como este div también tiene la clase "container", 
       automáticamente medirá 1200px y se centrará igual que tus noticias */
}

.header-right-column {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: flex-end;  /* Alinea todo a la derecha */
    justify-content: center;
    gap: 5px; /* <--- ESTA ES LA CLAVE: Solo 5px de distancia entre iconos y texto */
}

/* Estilo para la frase (sin márgenes raros) */
.header-phrase {
    color: #ffffff;
    font-style: italic;
    font-size: 0.95rem; /* Un poco más chica para que acompañe bien */
    margin: 0;          /* Quitamos todos los márgenes por defecto */
    opacity: 0.8;
    text-align: right;
    font-weight: 400;
}

/* --- SECCIÓN HERO (VIDEO Y BOTONES) --- */
.hero-section {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 0px;
}

.hero-media {
    /* ESTA ES LA CLAVE: Limitamos el ancho máximo de la caja del video */
    max-width: 800px; 
    margin: 0 auto 30px auto; /* Centramos la caja */
    display: block;
}

.hero-video {
    width: 100%;         /* Que ocupe el 100% de su caja (700px) */
    height: auto;        /* Que mantenga su proporción */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra para darle profundidad */
    mix-blend-mode: screen;
}

/* Grupo de botones */
.cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;      /* Espacio entre botones */
    flex-wrap: wrap; /* Para que en celular bajen uno debajo del otro */
}

/* Estilos base de Botones */
.btn {
    padding: 12px 30px;
    border-radius: 50px; /* Bordes tipo pastilla (Pill shape) */
    text-decoration: none;
    font-weight: normal;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Truco para que el borde no cambie el tamaño */
    display: inline-block;
}

/* Botones Transparentes con Borde (Los dos primeros) */
.btn-outline {
    color: white;
    border-color: #ff7f00;
    background-color: transparent;
}

.btn-outline:hover {
    /*background-color: white;
    /*color: #141416; */ /*Texto oscuro al pasar el mouse*/
    transform: scale(1.05);*/
    
    transform: translateY(-2px);    /* Levitar al pasar el mouse */
    border-color: var(--accent);    /* El borde se pone naranja */

}

/* Botón Sólido Naranja (Ingreso Socios) */
.btn-solid {
    background-color: var(--accent); /* Tu naranja #ff7f00 */
    color: white;
}

.btn-solid:hover {
    transform: translateY(-2px);
    background-color: #e67300; /* Naranja un poco más oscuro */
    transform: scale(1.05);    /* Efecto de agrandarse un poco */
    box-shadow: 0 0 15px rgba(255, 127, 0, 0.4); /* Resplandor naranja */
    color: black;
}


/* --- SECCIÓN GRID (CAJAS NEGRAS) --- */
.icons-strip {
    background-color: transparent; /* Un fondo negro apenas distinto para separar secciones */
    padding-top: 10px;
    padding-bottom: 30px;
    margin-bottom: 20px;       /* Espacio antes de llegar al Blog */
}

.grid-wrapper {
    display: flex;
    justify-content: center;
    gap: 60px;        /* Espacio entre cajas */
    flex-wrap: wrap;  /* Vital para celulares */
}

.grid-box {
    /* Negro puro según tu imagen */
    width: 160px;     /* Ancho fijo cuadrado */
    height: 160px;    /* Alto fijo cuadrado */
    
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 12px; /* Redondeado igual que el video y el blog */
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.grid-custom-img {
    max-width: 80%;   /* El ancho no superará el de la caja padre */
    height: auto;      /* La altura se calcula sola para no estirar la imagen */
    
    /* Opcional: puedes forzar un tamaño fijo si prefieres */
    /* width: 40px; */
    /* height: 40px; */

    object-fit: contain; /* Asegura que toda la imagen se vea dentro del espacio */
   /* margin-bottom: 10px; Un poco de espacio entre la imagen y el texto */
    transition: transform 0.3s ease; /* Para la animación al pasar el mouse */
     
    /* ----------------------- */
    
    
}

/* Y mantenemos el efecto de "palpitar" al pasar el mouse sobre la caja */
.grid-box:hover {
    transform: translateY(-5px);
    /* Al pasar el mouse, pintamos el borde de Naranja */
    border-color: var(--accent); 
    /* Y agregamos la sombra elevada */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.grid-box:hover {
    transform: translateY(-5px);    /* Levitar al pasar el mouse */
    border-color: var(--accent);    /* El borde se pone naranja */
}

.grid-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    
}

.grid-text {
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
}

        .logo-area {
    display: flex;       /* Para ajustar el link al tamaño de la imagen */
    align-items: center;
    flex-shrink: 0;      /* Evita que el logo se aplaste si falta espacio */
}

        .logo-img {
            height: 120px; /* Ajusta esto según el tamaño de tu logo */
            width: auto; 
            display: block;
        }

        .nav-icons {
           display: flex;
           align-items: center;
           gap: 20px; /* Espacio entre grupos de iconos */
        }

        .nav-group {
           display: flex;
           gap: 15px; /* Espacio entre cada icono individual */
        }

        /* Estilos de los enlaces (los iconos) */
        .nav-icons a {
          color: #ffffff; /* Iconos blancos por defecto */
          font-size: 1.2rem; /* Tamaño del icono */
          transition: color 0.3s ease, transform 0.2s;
        }

       /* Efecto al pasar el mouse */
       .nav-icons a:hover {
          color: var(--accent); /* Se ponen Naranjas (#ff7f00) */
          transform: translateY(-2px); /* Saltito sutil */
        }

        /* El separador vertical (Barrita gris) */
       .separator {
           width: 1px;
           height: 25px;
           background-color: rgba(255, 255, 255, 0.497);
           margin: 0 10px;
        }


        /* --- ESTILOS GENERALES --- */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

 
        /* --- SECCIÓN LO ULTIMO (BLOG) --- */
        .section-title {
            font-size: 2rem;
            margin-bottom: 20px;
        }
        .section-title span {
            color: var(--accent); /* "Ultimo" en naranja */
        }

        /* Aquí aplicamos la estrategia de "Elevación" que hablamos */
        .blog-card {
            background-color: var(--card-bg); 
            border-radius: 12px;
            overflow: hidden; /* Para que la imagen respete el borde */
            display: flex;    /* Para poner imagen al lado del texto */
            
            /* LA SOMBRA MÁGICA */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 0.3s ease;
        }

        .blog-card:hover {
            transform: translateY(-5px); /* Efecto al pasar el mouse */
        }

        .blog-img {
            width: 40%;
            object-fit: cover; /* Recorta la imagen sin deformarla */
            min-height: 250px;
        }

        .blog-content {
            padding: 30px;
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .blog-date {
            color: var(--accent);
            font-weight: bold;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .blog-title {
            margin: 0 0 15px 0;
            font-size: 1.8rem;
        }
        
        .blog-excerpt {
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .btn-leer {
            color: white;
            text-decoration: none;
            font-weight: bold;
            display: inline-block;
        }
        .btn-leer:hover {
            text-decoration: underline;
        }

        /* Responsive: En celulares muy chicos, ajustamos */
          @media (max-width: 480px) {
          .main-header {
             padding: 10px 15px;
           }
          .separator { display: none; } /* Ocultamos separador si falta espacio */
           .nav-icons { gap: 10px; }
          .nav-icons a { font-size: 1rem; }
         .btn { width: 100%; text-align: center; }
         .grid-box { width: 45%; }
          }
   
.main-footer {
    background-color: #0e0e10; /* Un tono más oscuro que el fondo principal (#141416) */
    padding-top: 30px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Línea sutil arriba */
    margin-top: 80px; /* Separación del contenido anterior */
}

.footer-grid {
    display: grid;
    /* Creamos 4 columnas. La primera es un poco más ancha (1.5fr) */
    grid-template-columns: 1.5fr 1fr 1fr 1fr; 
    gap: 40px;
    margin-bottom: 40px;
}

/* Columna 1: Logo y texto */
.footer-logo {
    width: 80px;
    margin-bottom: 20px;
    filter: grayscale(100%); /* Logo en blanco y negro para que sea sutil */
    transition: filter 0.3s;
}
.footer-col:hover .footer-logo {
    filter: none; /* Al pasar el mouse recupera el color */
}

.footer-desc {
    color: #aaaaaa;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: 15px;
}
.footer-social a {
    color: white;
    font-size: 1.2rem;
    transition: color 0.3s;
}
.footer-social a:hover { color: var(--accent); }


/* Títulos de las columnas */
.footer-title {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hacer que el título del footer sea un enlace elegante */
.footer-title a {
    color: white; /* Hereda el color blanco */
    text-decoration: none; /* Sin subrayado */
    transition: color 0.3s ease;
}

.footer-title a:hover {
    color: var(--accent); /* Se pone naranja al pasar el mouse */
    cursor: pointer;
}
¡Con eso, tu pie de página será mucho m

/* Listas de enlaces (Preguntas Frecuentes y Navegación) */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #bbbbbb;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efecto hover: se pone naranja y se mueve a la derecha */
.footer-links a:hover {
    color: var(--accent);
    transform: translateX(5px); 
}

/* Lista de contacto */
.footer-contact {
    list-style: none;
    padding: 0;
}
.footer-contact li {
    color: #bbbbbb;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.footer-contact i {
    color: var(--accent); /* Iconos naranjas */
}

/* Barra inferior de Copyright */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    text-align: center;
}
.footer-bottom p {
    color: #555555;
    font-size: 0.85rem;
}

/* --- RESPONSIVE (CELULAR) --- */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tablets */
    }
}


/*--- Estilos pagina de contactenos ---*/

/* Usamos tus variables para que todo combine */
        .contact-info p {
            color: var(--text-muted);
            margin-bottom: 15px;
            font-size: 1rem;
        }
        
        .contact-link {
            color: var(--accent); /* Tu naranja */
            text-decoration: none;
            font-weight: bold;
        }

        /* Mapa responsive */
        .map-container {
            width: 100%;
            height: 350px;
            background-color: var(--card-bg);
            border-radius: 12px; /* Mismo redondeado que tus videos/blog */
            overflow: hidden;
            margin: 30px 0;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
            filter: grayscale(20%) contrast(1.2) invert(90%); /* Truco opcional: oscurece el mapa de Google */
        }

        /* Estilos del Formulario */
        .form-group {
            margin-bottom: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        label {
            display: block;
            color: var(--text-main);
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        label span { color: var(--accent); }

        /* Inputs usando tus colores de fondo de tarjeta */
        input, textarea {
            width: 100%;
            padding: 15px;
            background-color: var(--card-bg); 
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: white;
            font-family: inherit;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--accent); /* Borde naranja al escribir */
        }

        @media (max-width: 600px) {
            .form-row { grid-template-columns: 1fr; }
        }

/* --- MENSAJES DE FEEDBACK (Éxito / Error) --- */
.msg-box {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    display: none; /* Por defecto oculto */
}

/* Estilo Éxito (Verde moderno) */
.msg-success {
    background-color: rgba(46, 204, 113, 0.15); /* Verde transparente */
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

/* Estilo Error (Rojo suave) */
.msg-error {
    background-color: rgba(231, 76, 60, 0.15); /* Rojo transparente */
    border: 1px solid #e74c3c;
    color: #e74c3c;
}

/* --- ESTILOS PREGUNTAS FRECUENTES (Versión Divs + JS) --- */

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

.faq-item {
    background-color: var(--card-bg); /* Usa tu variable de fondo */
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden; /* Importante para que la animación funcione */
    transition: all 0.3s ease;
}

/* Cuando está activo (clic), le ponemos borde naranja */
.faq-item.active {
    border-color: var(--accent);
}

.faq-question {
    padding: 20px;
    display: flex; /* Alinea texto y flecha */
    justify-content: space-between; /* Texto a la izq, flecha a la der */
    align-items: center;
    cursor: pointer;
    background-color: transparent;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: bold;
}

/* La flechita (Icono) */
.faq-question i {
    color: var(--accent);
    transition: transform 0.3s ease;
    font-size: 1rem;
}

/* Rotar la flecha cuando la clase .active está presente */
.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* La Respuesta (Oculta por defecto) */
.faq-answer {
    max-height: 0; /* Altura 0 para ocultar */
    overflow: hidden;
    padding: 0 20px; /* Sin padding vertical cuando está cerrado */
    transition: all 0.3s ease;
    opacity: 0;
}

/* La Respuesta (Visible cuando .active) */
.faq-item.active .faq-answer {
    max-height: 500px; /* Altura máxima suficiente para el texto */
    padding-bottom: 20px;
    padding-top: 10px;
    opacity: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-answer p, .faq-answer ul {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}
.footer-action {
    text-align: center; /* Esto centra el botón */
    margin-top: 10px;   /* Un poco de aire arriba */
    margin-bottom: 40px; /* Aire abajo antes del footer */
}

/* --- ESTILOS PÁGINA "SUMATE" --- */

.intro-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Contenedor de las dos opciones (Grid) */
.sumate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 30px;
    margin-bottom: 50px;
}

/* Las tarjetas individuales */
.sumate-card {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.sumate-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.sumate-card h2 {
    color: var(--accent);
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sumate-subtitle {
    font-style: italic;
    color: white;
    font-weight: 500;
    margin-bottom: 20px;
    display: block;
}

/* Estilo de las listas con iconos */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    color: var(--text-muted);
    line-height: 1.5;
}

/* El icono personalizado (check naranja) */
.feature-list li::before {
    font-family: "Font Awesome 6 Free";
    content: "\f058"; /* Icono de Check Circle */
    font-weight: 900;
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 2px;
}

/* Sección final de contacto */
.final-cta {
    text-align: center;
    /*background-color: rgba(255, 127, 0, 0.1);*/ /* Fondo naranja muy suave */
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--accent);
    max-width: 700px;
    margin: 0 auto;
}

/* Responsive para celulares */
@media (max-width: 768px) {
    .sumate-grid {
        grid-template-columns: 1fr; /* Una sola columna */
    }
}

/* --- Estilos para la página de Actividades --- */

/* Fondo oscuro específico para esta sección/página */
body.pagina-actividades {
    background-color: #121212;
    color: #ffffff;
    /* Esto asegura que el cuerpo ocupe toda la altura y ayude a centrar */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.actividades-container {
    max-width: 900px;
    width: 100%;
    /* CAMBIO CLAVE 1: Centra el texto y el widget horizontalmente */
    text-align: center;
    padding: 40px 20px;
    /* CAMBIO CLAVE 2: Centra el contenedor en el medio de la pantalla */
    margin: 0 auto;
}

.actividades-container h1 {
    font-size: 3rem;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.actividades-subtitle {
    color: #a0a0a0;
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.5;
    /* Para que el subtítulo no sea más ancho que el widget */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor para el Widget de Instagram */
.widget-instagram {
    margin-bottom: 40px;
    min-height: 400px; /* Evita saltos de diseño mientras carga */
    /* Asegura que el widget (que es un bloque) se centre si es más chico que el contenedor */
    display: flex;
    justify-content: center;
}

/* Botón de volver específico */
.footer-action {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 40px; /* Un poco de espacio al final */
}

/* Al final de tu style_index.css */

.btn-volver {
    display: inline-block;
    /* AQUÍ ESTABA EL CAMBIO: Usamos tu variable accent (naranja) */
    border: 2px solid var(--accent); 
    color: var(--accent);
    
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold; /* Agregado para que se lea mejor */
    transition: all 0.3s ease;
}

.btn-volver:hover {
    /* Al pasar el mouse, fondo naranja y texto blanco (o negro, como prefieras) */
    background-color: var(--accent);
    color: #ffffff; 
}

/* --- ESTILOS PÁGINA LOGROS (Timeline) --- */

body.pagina-logros {
    background-color: #121212;
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    min-height: 100vh;
}

.container-logros {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.container-logros h1 {
    text-align: center;
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 10px;
}

.subtitle-logros {
    text-align: center;
    color: #a0a0a0;
    margin-bottom: 50px;
}

.container-logros h1 span {
    color: var(--accent); /* Esto pintará de naranja lo que esté entre <span> */
}

/* La línea vertical principal */
.timeline {
    position: relative;
    border-left: 3px solid #ff6600; /* Color Naranja del club */
    margin-left: 20px; /* Espacio desde la izquierda */
    padding-left: 30px; /* Espacio entre la línea y el contenido */
}

/* Cada bloque de logro */
.timeline-item {
    margin-bottom: 50px;
    position: relative;
}

/* El punto (burbuja) sobre la línea */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -39px; /* Ajuste para centrar el punto en la línea */
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #ff6600; /* Punto Naranja */
    border-radius: 50%;
    border: 3px solid #121212; /* Borde negro para separarlo visualmente */
}

.timeline-date {
    font-size: 0.9rem;
    color: #ff6600; /* Fecha en naranja */
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-content {
    background-color: #1e1e1e; /* Tarjeta gris oscuro */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    position: relative;
}

.timeline-content h3 {
    margin-top: 0;
    color: white;
}

.timeline-content p {
    color: #ccc;
    line-height: 1.6;
}

/* Icono flotante (trofeo, medalla) */
.icon-logro {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #ff6600;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Imágenes dentro de los logros */
.foto-logro {
    width: 100%;
    margin-top: 15px;
    border-radius: 5px;
    border: 1px solid #444;
}

/* Responsive: Ajuste para celulares muy chicos */
@media (max-width: 600px) {
    .container-logros h1 { font-size: 2rem; }
    .timeline { margin-left: 10px; padding-left: 20px; }
    .timeline-item::before { left: -29px; }
}

/* --- ESTILOS PÁGINA TORNEOS --- */

body.pagina-torneos {
    background-color: #121212;
    color: #ffffff;
    min-height: 100vh;
}

.container-torneos {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Color naranja para resaltar textos */
.text-orange { color: var(--accent); }

.subtitle-torneos {
    color: #a0a0a0;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* Separador visual entre secciones */
.separador-secciones {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,0.2), rgba(0,0,0,0));
    margin: 60px 0;
}

/* --- TARJETAS (Nuestros Torneos) --- */
.grid-torneos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hace que se pongan una al lado de la otra */
    gap: 20px;
}

.card-torneo {
    background-color: #1e1e1e; /* Fondo gris de la tarjeta */
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card-torneo:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

/* Estilo especial para torneos que organiza el club */
.card-torneo.destacado {
    background: linear-gradient(145deg, #1e1e1e, #2a1a10);
    border: 1px solid var(--accent);
}

.etiqueta-organiza {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--accent);
    color: white;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-bottom-left-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.torneo-fecha {
    background-color: #121212;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    min-width: 60px;
}

.torneo-fecha .dia {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}
.torneo-fecha .mes {
    display: block;
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    font-weight: bold;
}

.torneo-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.torneo-info p {
    margin: 3px 0;
    color: #ccc;
    font-size: 0.9rem;
}

.torneo-info i {
    color: var(--accent);
    width: 20px;
    text-align: center;
}

.btn-torneo {
    display: inline-block;
    margin-top: 10px;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
}
.btn-torneo:hover { color: var(--accent); }


/* --- TABLA (Calendario Zonal) --- */
.tabla-responsive {
    overflow-x: auto;
}

.tabla-torneos {
    width: 100%;
    border-collapse: collapse;
    background-color: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.tabla-torneos th {
    background-color: #252525;
    color: var(--accent);
    text-align: left;
    padding: 15px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.tabla-torneos td {
    padding: 15px;
    border-bottom: 1px solid #333;
    color: #ddd;
    font-size: 0.95rem;
}

.fecha-celda {
    font-weight: bold;
    color: white !important;
}

.tabla-torneos tr:nth-child(even) {
    background-color: #222;
}

.tabla-torneos tr:hover {
    background-color: #2a2a2a;
}

/* Botón FATARCO */
.link-externo { text-align: center; margin-top: 20px; }

.btn-fatarco {
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid #444;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}

.btn-fatarco:hover {
    color: white;
    border-color: white;
}