/* ==========================================================================
   HOJA DE ESTILOS MAESTRA - CLUB VOLEIBOL
   ========================================================================== 
   ÍNDICE: 
   1.  VARIABLES (Colores, Temas, Medidas)
   2.  RESET Y ESTILOS BASE (Tipografía)
   3.  LAYOUT GENERAL (Header, Main, Sidebars)
   4.  HERO SECTION (Diseño Híbrido: Window/Track)
   5.  COMPONENTES UI (Botones, Buscador, Títulos)
   6.  SECCIONES DE CONTENIDO (Equipos, Eventos, Competición)
   7.  SISTEMA DE SPONSORS (Sidebar PC, Barra Móvil, Acordeón)
   8.  SIDEBAR IZQUIERDO (Índice TOC)
   9.  SECCIÓN RESEÑAS (Google Reviews)
   10. REDES SOCIALES (Botones Grandes)
   11. FOOTER (Nuevo diseño estético)
   12. ANIMACIONES
   13. MEDIA QUERIES (Responsive)
   14. SISTEMA DE COOKIES Y PRIVACIDAD (NUEVO)
   ========================================================================== */

/* =========================================
   1. VARIABLES Y TEMA
   ========================================= */
:root {
    /* Identidad Corporativa */
    --color-rojo-club: #c8102e;
    --color-azul-club: #1d3557;
    --color-azul-oscuro: #14243b; /* Para footer y contrastes */
    
    /* Layout */
    --ancho-sidebar: 140px;
    
    /* Fondos y Textos (Modo Claro) */
    --bg-body: #eee;
    --bg-container: #ffffff;
    --bg-alt: #f8f9fa; /* Fondo alternativo para secciones */
    --bg-card: #ffffff;
    --bg-input: #f4f4f4;
    
    --text-main: #333333;
    --text-muted: #555555;
    --text-inverse: #ffffff;
    
    /* UI */
    --border-color: #ddd;
    --nav-bg: #1d3557;
    
    /* Sombras */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    --bg-body: #121212;
    --bg-container: #1e1e1e;
    --bg-alt: #252525;
    --bg-card: #252525;
    --bg-input: #333;
    
    --text-main: #f4f4f4;
    --text-muted: #bbbbbb;
    --text-inverse: #ffffff;
    
    --border-color: #444;
    --nav-bg: #0f1c2e;
    --color-azul-oscuro: #0a111a;
    
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* =========================================
   2. RESET Y ESTILOS BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-bottom: 0; 
}

/*
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-bottom: 0; /* Padding gestionado en media queries 
}
*/

h1, h2, h3, h4 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Estilos Generales de Sección */
section { padding: 70px 20px; text-align: center; }
section:nth-child(even) { background-color: var(--bg-alt); }
section:nth-child(odd) { background-color: var(--bg-container); }

.section-title { 
    margin-bottom: 40px; 
    font-size: 2.2rem; 
    color: var(--color-azul-club); 
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: ''; display: block; width: 60px; height: 4px;
    background: var(--color-rojo-club); margin: 10px auto 0;
    border-radius: 2px;
}
[data-theme="dark"] .section-title { color: var(--text-main); }

/* =========================================
   3. LAYOUT GENERAL
   ========================================= */
/* HEADER 
header {
    background: var(--nav-bg);
    padding: 1rem 0;
    color: var(--text-inverse);
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}*/
header {
    background: var(--nav-bg);
    padding: 15px 0;
    color: var(--text-inverse);
    position: fixed; /* <-- Cambiado de sticky a fixed */
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    height: 70px;
}

.nav-container {
    width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 40px;
}

.logo { font-weight: bold; font-size: 1.5rem; font-family: 'Oswald', sans-serif; letter-spacing: 1px; }

.nav-menu { display: flex; gap: 25px; align-items: center; }
.nav-menu a { color: var(--text-inverse); font-weight: 500; font-size: 0.95rem; text-transform: uppercase; opacity: 0.9; }
.nav-menu a:hover { color: var(--color-rojo-club); opacity: 1; }
.nav-menu a.active {
    color: var(--color-rojo-club);
    border-bottom: 2px solid var(--color-rojo-club);
    padding-bottom: 2px;
}

/* CONTROLES (Menu, Theme, Search) */
.menu-toggle, .theme-toggle, .search-trigger {
    cursor: pointer; color: var(--text-inverse);
    transition: transform 0.3s, color 0.3s; padding: 5px;
}
.menu-toggle { display: none; font-size: 1.8rem; }
.theme-toggle { font-size: 1.2rem; }
.search-trigger { font-size: 1.2rem; }

.theme-toggle:hover { transform: rotate(20deg); color: #f1c40f; }
.search-trigger:hover { color: var(--color-rojo-club); transform: scale(1.1); }

/* MAIN CONTENT (Contenedor Central) */
.main-content {
    margin-left: var(--ancho-sidebar);
    margin-right: var(--ancho-sidebar);
    width: auto;
    background: var(--bg-container);
    position: relative; z-index: 2;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    min-height: 100vh;
    transition: background-color 0.3s ease, margin 0.3s ease;
}

/* =========================================
   4. HERO SECTION (HÍBRIDO)
   ========================================= */
.hero {
    margin-top:70px;
    position: relative;
    height: 90vh; /* Altura original */
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: row; 
    background-color: #000; 
    overflow: hidden;
}

/* Ventana Izquierda (Carrusel) */
.hero-carousel-window {
    width: 65%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #000;
}
.hero-track {
    display: flex;
    height: 100%;
    width: 100%;
    will-change: transform;
}
.hero-slide {
    height: 100%;
    min-width: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    padding: 0;
    flex-shrink: 0;
}

/* Contenido Derecha (Texto) */
.hero-content {
    width: 35%;
    height: 100%;
    background-color: var(--nav-bg);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 50px;
    border-left: 5px solid var(--color-rojo-club);
    z-index: 5;
}
.hero-content h1 { font-size: 3.5rem; margin-bottom: 15px; color: white; line-height: 1; }
.hero-subtitle { font-size: 1.5rem; color: #ddd; margin-bottom: 20px; font-weight: 400; font-family: 'Oswald', sans-serif; }
.hero-content p { font-size: 1rem; color: #aaa; margin-bottom: 30px; }

/* =========================================
   5. COMPONENTES UI
   ========================================= */
/* Botones */
.btn-cta {
    background: var(--color-rojo-club); color: white;
    padding: 12px 30px; font-weight: bold; font-family: 'Oswald', sans-serif;
    border-radius: 4px; display: inline-block; letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(200, 16, 46, 0.3);
    transition: background 0.3s, transform 0.2s;
}
.btn-cta:hover { background: #a00d25; transform: translateY(-2px); }

.btn-white { background: white; color: var(--color-azul-club); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.btn-mini {
    display: inline-flex; align-items: center; gap: 8px;
    background-color: var(--nav-bg); color: white;
    padding: 8px 12px; border-radius: 4px;
    font-size: 0.8rem; font-weight: bold; text-transform: uppercase;
    transition: background 0.3s, transform 0.2s;
}
.btn-mini:hover { background-color: var(--color-rojo-club); transform: translateY(-2px); color: white; }

.link-text { color: var(--color-rojo-club); font-weight: bold; border-bottom: 2px solid transparent; }
.link-text:hover { color: var(--color-azul-club); border-bottom: 2px solid var(--color-azul-club); }

/* Buscador (Overlay) */
.search-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(29, 53, 87, 0.95); z-index: 10000;
    align-items: flex-start; justify-content: center;
    padding-top: 100px; backdrop-filter: blur(5px);
}
.search-overlay.active { display: flex; animation: fadeIn 0.3s ease-out; }
.search-content { width: 90%; max-width: 600px; text-align: center; position: relative; color: white; }
.close-search { position: absolute; top: -40px; right: 0; font-size: 3rem; cursor: pointer; color: white; transition: color 0.3s; }
.close-search:hover { color: var(--color-rojo-club); }
#search-input {
    width: 100%; padding: 15px; font-size: 1.5rem; border: none;
    border-bottom: 3px solid var(--color-rojo-club); background: transparent;
    color: white; outline: none; font-family: 'Oswald', sans-serif; text-align: center;
}
#search-input::placeholder { color: rgba(255,255,255,0.5); font-family: 'Roboto', sans-serif; font-size: 1.2rem; }
.search-results-container { margin-top: 30px; max-height: 60vh; overflow-y: auto; text-align: left; }
.result-item {
    background: white; padding: 15px; margin-bottom: 10px; border-radius: 5px;
    cursor: pointer; transition: transform 0.2s; border-left: 5px solid var(--color-rojo-club);
}
.result-item:hover { transform: translateX(10px); background: #f9f9f9; }
.result-item h4 { color: var(--color-azul-club); margin-bottom: 5px; }
.result-item p { color: #555; font-size: 0.9rem; margin: 0; }
[data-theme="dark"] .result-item { background: var(--bg-card); }
[data-theme="dark"] .result-item h4 { color: var(--text-main); }
[data-theme="dark"] .result-item p { color: var(--text-muted); }

/* Widgets Visibilidad */
.widget-dark { display: none !important; }
.widget-light { display: block !important; }
[data-theme="dark"] .widget-dark { display: block !important; }
[data-theme="dark"] .widget-light { display: none !important; }

/* =========================================
   6. SECCIONES ESPECÍFICAS
   ========================================= */
/* Tarjetas Base (Eventos y Equipos) */
.event-card, .team-card {
    background: var(--bg-card); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-soft); transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05); text-align: left;
}
.event-card:hover, .team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }

/* Eventos */
.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; }
.card-image { position: relative; height: 200px; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.event-card:hover .card-image img { transform: scale(1.1); }
.event-date { position: absolute; top: 10px; right: 10px; background-color: var(--color-rojo-club); color: white; padding: 5px 10px; font-size: 0.8rem; font-weight: bold; border-radius: 4px; }
.card-content { padding: 20px; }
.card-content h3 { color: var(--color-azul-club); margin-bottom: 10px; font-size: 1.5rem; }
[data-theme="dark"] .card-content h3 { color: #5dade2; }
.card-actions { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; flex-wrap: wrap; }

/* Equipos (Flexbox) */
.teams-section { padding-bottom: 60px; }
.teams-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 30px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.team-card {
    flex: 1 1 280px; max-width: 350px; min-width: 300px;
    padding: 30px; border-bottom: 5px solid var(--color-rojo-club);
}
.team-icon { font-size: 2.5rem; color: var(--color-azul-club); margin-bottom: 20px; }
.team-card h3 { color: var(--color-rojo-club); margin-bottom: 10px; }
.category-tag { background: var(--nav-bg); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; display: inline-block; margin-top: 10px; }

/* Competición (Banner) */
.competition-section { padding: 40px 20px; background-color: var(--bg-body); }
.competition-banner {
    background: linear-gradient(135deg, var(--color-azul-club) 0%, #14243b 100%);
    border-radius: 15px; padding: 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    max-width: 1200px; margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-left: 6px solid var(--color-rojo-club); color: white;
}
.comp-icon { font-size: 3.5rem; color: var(--color-azul-oscuro); background: var(--color-rojo-club); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.comp-info { flex: 1; text-align: left; }
.comp-action { flex-shrink: 0; }

/* =========================================
   7. SISTEMA DE SPONSORS
   ========================================= */

/* A. SIDEBAR DERECHO (Solo PC) */
.sidebar-sponsor {
    position: fixed; top: 0; right: 0; width: var(--ancho-sidebar); height: 100vh;
    background-color: var(--color-azul-club); z-index: 90;
    overflow: hidden; display: flex; justify-content: center;
    border-left: 3px solid var(--color-rojo-club);
}
.sponsor-track {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; gap: 40px; padding-top: 20px;
    animation: scrollVertical 20s linear infinite;
}
.sidebar-sponsor img {
    width: 80%; max-width: 100px; object-fit: contain;
    background: white; padding: 5px; border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.3s;
    display: block; margin: 0 auto;
}
.sidebar-sponsor img:hover { transform: scale(1.1); }
.your-brand-here {
    background: var(--color-rojo-club); width: 90%; padding: 15px 5px;
    text-align: center; border-radius: 5px; border: 2px dashed white;
    animation: pulse 2s infinite; display: flex; justify-content: center; align-items: center;
}
.your-brand-here a { color: white; font-weight: bold; font-family: 'Oswald', sans-serif; font-size: 0.9rem; width: 100%; }

/* B. BARRA INFERIOR (Móvil/Tablet) */
.mobile-sponsor-bar {
    display: none; /* PC: Oculto */
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--color-azul-club); color: white;
    padding: 8px 0; z-index: 2000;
    overflow: hidden; white-space: nowrap;
    border-top: 3px solid var(--color-rojo-club);
    height: 60px; line-height: 44px;
}
.mobile-track {
    display: inline-flex; align-items: center;
    width: max-content; padding-left: 0;
    animation: scrollHorizontal 20s linear infinite;
}
.mobile-track a, .mobile-track span, .mobile-track .your-brand-here {
    display: inline-flex; align-items: center; vertical-align: middle; margin-right: 15px;
}
.mobile-track img {
    height: 40px; width: auto; vertical-align: middle;
    margin: 0 10px; background: white; padding: 2px; border-radius: 4px;
}

/* C. ACORDEÓN PATROCINADORES (Contenido Principal) */
.sponsors-grid-details {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 30px; margin: 40px auto; max-width: 1200px;
}
.sponsor-detail-card {
    background: var(--bg-card); border-radius: 15px;
    box-shadow: var(--shadow-soft); width: 300px; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column;
}
.sponsor-detail-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.sponsor-logo-link {
    display: block; padding: 30px; background-color: #fff;
    border-bottom: 1px solid #eee; text-align: center;
    height: 150px; display: flex; align-items: center; justify-content: center;
}
.sponsor-logo-link img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s; }
.sponsor-logo-link:hover img { transform: scale(1.1); }

.sponsor-body { padding: 20px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; align-items: center; }
.sponsor-body h3 { color: var(--color-azul-club); margin-bottom: 15px; font-size: 1.2rem; }

.btn-toggle-services {
    background: transparent; border: 2px solid var(--color-rojo-club);
    color: var(--color-rojo-club); padding: 8px 15px; border-radius: 20px;
    cursor: pointer; font-weight: bold; font-family: 'Roboto', sans-serif;
    transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;
}
.btn-toggle-services:hover { background: var(--color-rojo-club); color: white; }
.btn-toggle-services i { transition: transform 0.3s ease; }
.btn-toggle-services.active i { transform: rotate(180deg); }

.sponsor-description {
    max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out;
    text-align: left; width: 100%;
}
.sponsor-description p {
    font-size: 0.9rem; color: var(--text-muted); padding-top: 15px;
    line-height: 1.5; border-top: 1px dashed #ddd; margin-top: 15px;
}
.join-cta-container { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1); width: 100%; }

[data-theme="dark"] .sponsor-logo-link { background-color: #fff; } /* Logos siempre blanco */
[data-theme="dark"] .sponsor-description p { color: #ccc; }

/* =========================================
   8. SIDEBAR IZQUIERDO (TOC / ÍNDICE)
   ========================================= */
.sidebar-left.toc-container {
    position: fixed; top: 0; left: 0; width: var(--ancho-sidebar); height: 100vh;
    background-color: #ffffff; border-right: 1px solid #e0e0e0; z-index: 100;
    display: flex; flex-direction: column; justify-content: space-between; 
    padding: 30px 15px; overflow-y: auto; scrollbar-width: none;
}
.sidebar-left.toc-container::-webkit-scrollbar { display: none; }

.toc-sponsor { width: 100%; display: flex; justify-content: center; padding: 10px 0; }
.toc-sponsor.bottom-group { display: flex; flex-direction: column; gap: 15px; align-items: center; }
.toc-sponsor img { max-width: 90px; height: auto; object-fit: contain; transition: transform 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.toc-sponsor img:hover { transform: scale(1.1); }

.toc-title { display: block; font-family: 'Oswald', sans-serif; font-size: 0.8rem; color: #999; margin-bottom: 15px; letter-spacing: 1px; text-transform: uppercase; padding-left: 10px; }
.toc-nav { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.toc-nav ul { list-style: none; padding: 0; margin: 0; }
.toc-nav li { margin-bottom: 8px; }
.toc-link {
    display: block; font-family: 'Roboto', sans-serif; font-size: 0.85rem;
    color: var(--text-muted); text-decoration: none; padding: 5px 10px;
    border-left: 3px solid transparent; transition: all 0.3s ease;
}
.toc-link:hover { color: var(--color-azul-club); background-color: rgba(0,0,0,0.03); border-radius: 0 5px 5px 0; }
.toc-link.active {
    color: var(--color-rojo-club); font-weight: bold;
    border-left: 3px solid var(--color-rojo-club);
    background-color: rgba(200, 16, 46, 0.05); border-radius: 0 5px 5px 0;
}

[data-theme="dark"] .sidebar-left.toc-container { background-color: #1a1a1a; border-right: 1px solid #333; }
[data-theme="dark"] .toc-link { color: #888; }
[data-theme="dark"] .toc-link:hover { color: white; background-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .toc-link.active { color: var(--color-rojo-club); background-color: rgba(200, 16, 46, 0.1); }

/* =========================================
   9. SECCIÓN RESEÑAS
   ========================================= */
.reviews-section { background-color: var(--bg-body); padding-bottom: 80px; }
.reviews-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; margin: 40px auto; }

.review-card {
    background: var(--bg-card); border-radius: 15px; padding: 30px;
    box-shadow: 0 5px 20px var(--shadow-color);
    flex: 1 1 300px; max-width: 350px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform 0.3s ease; border-top: 5px solid #f1c40f;
}
.review-card:hover { transform: translateY(-5px); }

.stars { color: #f1c40f; margin-bottom: 15px; font-size: 1.1rem; }
.review-text { font-style: italic; color: var(--text-muted); margin-bottom: 25px; line-height: 1.6; }
.review-text strong { color: var(--color-azul-club); font-weight: bold; }

.review-author { display: flex; align-items: center; gap: 15px; border-top: 1px solid var(--border-color); padding-top: 15px; }
.review-author img { width: 50px; height: 50px; border-radius: 50%; background-color: #ddd; }
.review-author h4 { margin: 0; font-size: 1rem; color: var(--text-main); }
.review-author span { font-size: 0.85rem; color: #888; }

.google-review-cta { margin-top: 40px; }
.btn-google { background: white; color: #4285F4; border: 2px solid #4285F4; transition: all 0.3s ease; }
.btn-google:hover { background: #4285F4; color: white; }

[data-theme="dark"] .review-author img { opacity: 0.8; }
[data-theme="dark"] .review-text strong { color: #5dade2; }

/* =========================================
   10. REDES SOCIALES (Ajuste Final)
   ========================================= */
.social-highlight { padding: 80px 20px; text-align: center; background-color: var(--bg-container); }
.social-icons-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; }

.social-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 15px; padding: 18px 40px; min-width: 240px;
    font-size: 1.2rem; white-space: nowrap;
    border-radius: 50px; font-weight: bold; font-family: 'Oswald', sans-serif;
    color: var(--color-azul-club); background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;
    border: 2px solid transparent;
}
.social-btn i { font-size: 1.5rem; }

.social-btn:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-btn.twitter:hover { color: #000000; border-color: #000000; }
.social-btn.twitch:hover { color: #9146FF; border-color: #9146FF; }
.social-btn.tiktok:hover { color: #EE1D52; border-color: #69c9d0; }
.social-btn.facebook:hover { color: #3b5998; border-color: #4800ff; }


/* =========================================
   11. FOOTER (Nuevo diseño)
   ========================================= */
.main-footer {
    background-color: var(--color-azul-oscuro);
    color: #cfcfcf; padding-top: 70px;
    border-top: 6px solid var(--color-rojo-club);
    position: relative; margin-top: 0;
}

.footer-content {
    max-width: 1200px; margin: 0 auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px; padding: 0 30px 60px;
}

.footer-logo {
    font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white;
    margin-bottom: 20px; display: inline-block;
    border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 10px;
}

.footer-col h3 {
    color: white; font-size: 1.3rem; margin-bottom: 25px;
    border-left: 4px solid var(--color-rojo-club);
    padding-left: 15px; line-height: 1;
}

.contact-list li { margin-bottom: 15px; }
.map-link { display: flex; align-items: flex-start; gap: 15px; color: #bbb; transition: 0.3s; }
.map-link i { color: var(--color-rojo-club); margin-top: 5px; }
.map-link:hover { color: white; transform: translateX(5px); }
.map-link:hover i.fa-linkedin { color: #0077b5; }

.social-btn-mini {
    width: 35px; height: 35px; background: rgba(255,255,255,0.1);
    color: white; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: 0.3s;
}
.social-btn-mini:hover { transform: translateY(-3px); }
.social-btn-mini:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.social-btn-mini.instagram:hover { background: #E1306C; }
.social-btn-mini.twitter:hover {background: #000000; }
.social-btn-mini.twitch:hover {background: #9146FF; }
.social-btn-mini.tiktok:hover {color:#000000; background: linear-gradient(to right, #fe2c55 50%, #69c9d0 50%); }
.social-btn-mini.facebook:hover {background: #4800ff; }

.footer-bottom {
    background-color: #0b1421;
    padding: 20px; text-align: center; font-size: 0.85rem; color: #777;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.designer-credit { font-size: 0.8rem; opacity: 0.5; margin-top: 5px; }

/* =========================================
   12. ANIMACIONES
   ========================================= */
@keyframes scrollVertical { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes scrollHorizontal { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   13. MEDIA QUERIES (RESPONSIVE)
   ========================================= */

/* --- TABLETS Y PANTALLAS MENORES DE 1300PX --- */
@media (max-width: 1300px) {
    /* 1. Ocultar Sidebars laterales (PC) */
    .sidebar-sponsor { display: none; }
    .sidebar-left.toc-container { display: none; } 
    
    /* 2. Mostrar Barra Inferior Móvil */
    .mobile-sponsor-bar { display: block; }
    
    /* 3. Eliminar márgenes del layout */
    .main-content { margin-left: 0; margin-right: 0; width: 100%; }
    
    /* 4. Padding para que la barra inferior no tape el footer */
    body { padding-bottom: 70px; }
}

/* --- TABLETS MEDIANAS (1024PX) --- */
@media (max-width: 1024px) {
    .hero { height: 70vh; min-height: 500px; }
    .team-card { flex: 0 1 calc(50% - 30px); }
}

/* --- MÓVILES (900PX) --- */
@media (max-width: 900px) {
    /* Hero pasa a columna */
    .hero { flex-direction: column; height: auto; }
    .hero-carousel-window { width: 100%; height: 300px; }
    .hero-content { 
        width: 100%; height: auto; 
        border-left: none; border-top: 5px solid var(--color-rojo-club); 
        padding: 30px; 
    }
    .hero-content h1 { font-size: 2.2rem; }
    
    /* Menú Móvil */
    .menu-toggle { display: block; }
    .nav-menu { 
        display: none; position: absolute; top: 100%; left: 0; 
        width: 100%; background: var(--nav-bg); 
        flex-direction: column; padding: 20px 0; 
        border-top: 1px solid rgba(255,255,255,0.1); 
        text-align: center; box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    }
    .nav-menu li { margin: 15px 0; }
    .nav-menu.active { display: flex; }
    
    /* Competición y otros */
    .competition-banner { flex-direction: column; text-align: center; gap: 20px; }
    .comp-info { text-align: center; }
    .btn-cta { width: 100%; text-align: center; }
}

/* --- MÓVILES PEQUEÑOS (768PX) --- */
@media (max-width: 768px) {
    .nav-container { padding: 0 20px; }
    .team-card { flex: 0 1 100%; }
    
    /* Ajuste Botones Sociales en móvil */
    .social-btn {
        width: 100%; min-width: auto; padding: 15px 20px;
        justify-content: center;
    }
}

/* =========================================
   AJUSTES FINALES MODO OSCURO
   ========================================= */

[data-theme="dark"] {
    .section-title { color: var(--text-main); }
    
    /* Títulos luminosos */
    .team-card h3, 
    .card-content h3, 
    .sponsor-body h3,
    .result-item h4 { 
        color: #ff334b !important; 
    }

    .hero-subtitle, .category-desc, .sponsor-description, .review-text { color: #cccccc; }
    #search-input { color: white; border-bottom-color: #ff334b; }

    /* Sidebars */
    .sidebar-left { background-color: var(--bg-container); border-right: 1px solid var(--border-color); }
    .toc-link { color: #aaa; }
    .toc-link:hover { color: white; background: rgba(255,255,255,0.05); }

    .nav-menu { background-color: var(--nav-bg); border-top: 1px solid rgba(255,255,255,0.1); }
    
    /* Logos y variables */
    .sponsor-logo-link, .sponsor-track img, .mobile-track img, .toc-sponsor img { background-color: #ffffff; filter: none; }
    .team-card, .event-card, .review-card { box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 1px solid #333; }
    
    /* Variables redefinidas para dark mode */
    --color-azul-club: #c8102e; 
    --nav-bg: #1a0205; 
    --color-azul-oscuro: #0f0102;

    .section-title { color: #ffffff; }
    .section-title::after { background: #c8102e; }

    .social-btn { color: #c8102e; }
    .social-btn:hover { background: #c8102e; color: white; }

    .sidebar-sponsor { background-color: #0a0a0a; border-left: 2px solid #c8102e; border-right: 2px solid #c8102e; }
    
    .toc-link:hover, .toc-link.active {
        color: #ff334b;
        border-left-color: #ff334b;
        background: linear-gradient(90deg, rgba(200, 16, 46, 0.1) 0%, transparent 100%);
    }
}
/* =========================================
   14. SISTEMA DE COOKIES Y PRIVACIDAD (FINAL)
   ========================================= */

/* --- A. DISEÑO DEL BANNER INFERIOR --- */
.cookie-banner {
    position: fixed;
    bottom: -100%; /* Oculto fuera de pantalla */
    left: 0;
    width: 100%;
    background-color: var(--color-azul-oscuro);
    color: white;
    padding: 20px;
    z-index: 99999;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    border-top: 4px solid var(--color-rojo-club);
    transition: bottom 0.5s ease-in-out;
    display: flex;
    justify-content: center;
}

.cookie-banner.show {
    bottom: 0; /* Aparece deslizando */
}

.cookie-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
}

.cookie-text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #e0e0e0;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
}

.btn-cookie {
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-cookie.accept {
    background: var(--color-rojo-club);
    color: white;
}
.btn-cookie.accept:hover {
    background: white;
    color: var(--color-rojo-club);
}

.btn-cookie.reject {
    background: transparent;
    border: 1px solid #777;
    color: #ccc;
}
.btn-cookie.reject:hover {
    border-color: white;
    color: white;
}

/* --- B. VISUALIZACIÓN DEL WIDGET (BLOQUEO) --- */

/* 1. Estado Inicial (Usuario NO ha aceptado) */
#instagram-container.widget-placeholder {
    position: relative;
    min-height: 400px; /* Altura para que se vea el mensaje */
    background: #f4f4f4; /* Fondo gris placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 30px;
}

.cookie-overlay-msg {
    text-align: center;
    z-index: 10;
    padding: 20px;
    animation: fadeIn 0.5s ease;
}

.cookie-overlay-msg i {
    font-size: 3.5rem;
    margin-bottom: 15px;
    /* Gradiente tipo Instagram */
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    /*-webkit-text-fill-color: transparent;*/
    
    display: block;
}

.cookie-overlay-msg p {
    font-size: 1.2rem;
    color: #555;
    font-weight: bold;
}

/* 2. Estado ACEPTADO (Clase añadida por JS) */
body.cookies-accepted #instagram-container.widget-placeholder {
    background: transparent; /* Quitamos fondo gris */
    display: block; /* Dejamos que el script de Elfsight maneje el layout */
    min-height: auto;
}

body.cookies-accepted .cookie-overlay-msg {
    display: none !important; /* Ocultamos el mensaje de bloqueo */
}

/* Ajuste Dark Mode para el mensaje */
[data-theme="dark"] #instagram-container.widget-placeholder {
    background: #1e1e1e;
}
[data-theme="dark"] .cookie-overlay-msg p {
    color: #ccc;
}
/* --- ENLACES DE INTERÉS FOOTER --- */
.interest-links {
    font-size: 0.85rem;
    line-height: 1.8;
    list-style: none;
    padding: 0;
}

.interest-links li {
    margin-bottom: 5px;
}

.interest-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.interest-links a i {
    margin-right: 8px;
    color: var(--color-rojo-club);
    width: 20px; /* Alinea los iconos verticalmente */
    text-align: center;
}

.interest-links a:hover {
    color: white;
    transform: translateX(5px); /* Pequeño efecto de desplazamiento */
}
/* --- NUEVAS SECCIONES (Logros, Staff, FAQ, Rivales, Dossier) --- */

/* 1. Logros */
.achievements-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    margin-top: 30px;
}
.trophy-card {
    background: var(--bg-card); padding: 20px; border-radius: 10px;
    display: flex; align-items: center; gap: 15px; width: 300px;
    box-shadow: var(--shadow-soft); border-left: 4px solid #d4af37; /* Dorado */
}
.trophy-icon { font-size: 2.5rem; color: #d4af37; }
.year { background: var(--color-rojo-club); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;}
.trophy-info h4 { margin: 5px 0 0; font-size: 1rem; color: var(--color-azul-club); }
[data-theme="dark"] .trophy-info h4 { color: white; }

/* 2. Cuerpo Técnico */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; }
.staff-card { background: var(--bg-card); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.3s; }
.staff-card:hover { transform: translateY(-5px); }
.staff-img { height: 250px; overflow: hidden; }
.staff-img img { width: 100%; height: 100%; object-fit: cover; }
.staff-content { padding: 20px; text-align: center; }
.staff-content h3 { color: var(--color-rojo-club); margin-bottom: 5px; }
.staff-content .role { display: block; font-weight: bold; color: var(--text-muted); margin-bottom: 10px; font-size: 0.9rem; }
.staff-content p { font-style: italic; font-size: 0.9rem; }

/* 5. Rivales (Tabla) */
.table-container { overflow-x: auto; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: var(--shadow-soft); }
.rivals-table { width: 100%; border-collapse: collapse; background: var(--bg-card); min-width: 500px; }
.rivals-table th { background: var(--color-azul-club); color: white; padding: 15px; text-align: left; }
.rivals-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); text-align: left; }
.btn-map { color: var(--color-rojo-club); font-weight: bold; }
.btn-map:hover { text-decoration: underline; }

/* 6. Dossier Patrocinio */
.sponsorship-cta { background: linear-gradient(135deg, var(--color-rojo-club), #a00d25); color: white; padding: 60px 20px; border-radius: 0; }
.cta-box { max-width: 800px; margin: 0 auto; }
.cta-features { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
.cta-features span { display: flex; align-items: center; gap: 8px; font-weight: 500; }

/* --- BANNER DE COOKIES --- */
.cookie-banner {
    position: fixed;
    bottom: -100%; /* Oculto inicialmente */
    left: 0;
    width: 100%;
    background-color: #14243b; /* Tu azul oscuro */
    color: white;
    padding: 20px;
    z-index: 99999; /* Por encima de todo */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    border-top: 4px solid var(--color-rojo-club);
    transition: bottom 0.5s ease-in-out;
}

.cookie-banner.show {
    bottom: 0; /* Aparece deslizando */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.cookie-content p { margin: 0; font-size: 0.9rem; flex: 1; min-width: 250px; }

.cookie-buttons { display: flex; gap: 10px; }

.btn-cookie {
    padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.3s;
}

.btn-cookie.accept { background: var(--color-rojo-club); color: white; }
.btn-cookie.accept:hover { background: white; color: var(--color-rojo-club); }

.btn-cookie.reject { background: transparent; border: 1px solid #777; color: #ccc; }
.btn-cookie.reject:hover { border-color: white; color: white; }

/* --- VISUALIZACIÓN DEL WIDGET --- */
/* Estado inicial (Bloqueado) */
.widget-placeholder {
    position: relative;
    min-height: 500px; /* IMPORTANTE: Altura mínima para que no colapse */
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.cookie-overlay-msg {
    text-align: center; color: #555; z-index: 10;
}
.cookie-overlay-msg i { font-size: 3rem; margin-bottom: 10px; color: #ccc; }

/* Estado Aceptado (El script de Insta tomará el control) */
body.cookies-accepted .widget-placeholder {
    background: transparent;
    display: block; /* Deja que el widget se expanda */
}

body.cookies-accepted .cookie-overlay-msg {
    display: none; /* Ocultamos el mensaje de bloqueo */
}

/* =========================================
   REEMPLAZO DEL HEADER (ESTILO HAMBURGUESA GLOBAL)
   ========================================= */
/*
header {
    background: var(--nav-bg);
    padding: 15px 0;
    color: var(--text-inverse);
    position: sticky;
    top: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    height: 70px; 
}
*/


.nav-container {
    width: 100%; 
    max-width: 100%; /* Ocupar todo el ancho */
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 30px;
    height: 100%;
}

/* Agrupación de controles a la derecha */
.header-controls {
    display: flex;
    align-items: center;
    gap: 25px;
}

.icon-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Toggle del menú SIEMPRE visible */
.menu-toggle {
    display: block !important; /* Forzamos que se vea en PC */
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--text-inverse);
    transition: color 0.3s;
}
.menu-toggle:hover {
    color: var(--color-rojo-club);
}

/* MENÚ DE NAVEGACIÓN (ESTILO DRAWER / OVERLAY) */
.nav-menu {
    position: fixed;
    top: 70px; /* Justo debajo del header */
    left: 0;
    width: 100%;
    height: calc(100vh - 70px); /* Resto de la pantalla */
    background: rgba(29, 53, 87, 0.98); /* Fondo semitransparente */
    backdrop-filter: blur(10px); /* Efecto cristal */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: center;     /* Centrado horizontal */
    gap: 20px;
    
    /* Animación de entrada */
    transform: translateX(100%); /* Oculto a la derecha */
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto; /* Scroll si la pantalla es pequeña */
    padding-bottom: 50px;
}

/* ESTADO ACTIVO (CUANDO SE ABRE) */
.nav-menu.active {
    transform: translateX(0); /* Entra en pantalla */
    opacity: 1;
    visibility: visible;
}

/* ESTILO DE LOS ENLACES DENTRO DEL MENÚ */
.nav-menu li {
    width: 100%;
    text-align: center;
    opacity: 0; /* Para animar entrada secuencial */
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.nav-menu.active li {
    opacity: 1;
    transform: translateY(0);
}

.nav-menu a {
    color: white;
    font-size: 1.5rem; /* Letra grande para impacto visual */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    padding: 10px 0;
    position: relative;
}

/* Efecto Hover en los enlaces */
.nav-menu a::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: var(--color-rojo-club);
    transition: width 0.3s;
    margin: 5px auto 0;
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

/* Ajustes para Modo Oscuro en el menú desplegado */
[data-theme="dark"] .nav-menu {
    background: rgba(10, 10, 10, 0.98);
}
/* Botón dentro del widget bloqueado */
.btn-cookie-overlay {
    margin-top: 15px;
    background-color: var(--color-rojo-club); /* Usa el rojo corporativo */
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    border-radius: 50px; /* Redondeado */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(200, 16, 46, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-cookie-overlay:hover {
    background-color: white;
    color: var(--color-rojo-club);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    outline: 2px solid var(--color-rojo-club); /* Borde rojo al pasar ratón */
}
/* =========================================
   ACTUALIZACIÓN SECCIÓN LOGROS (CON FOTOS)
   ========================================= */

.achievements-grid {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 25px;
    margin-top: 30px;
}

.trophy-card {
    background: var(--bg-card); 
    padding: 20px; 
    border-radius: 12px;
    /* CAMBIO PRINCIPAL: Flex column para apilar cabecera e imagen */
    display: flex; 
    flex-direction: column; 
    width: 320px; /* Un poco más ancho para que luzca la foto */
    box-shadow: var(--shadow-soft); 
    border-left: 4px solid #d4af37; /* Dorado */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Para que la imagen respete bordes si es necesario */
}

.trophy-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* Nueva clase para mantener Icono y Texto juntos arriba */
.trophy-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px; /* Espacio entre texto e imagen */
    width: 100%;
}

.trophy-icon { 
    font-size: 2.5rem; 
    color: #d4af37; 
    flex-shrink: 0; /* Evita que el icono se aplaste */
}

.trophy-info {
    text-align: left; /* Asegura alineación izquierda */
}

.trophy-info h4 { 
    margin: 5px 0 2px; 
    font-size: 1.1rem; 
    color: var(--color-azul-club); 
    line-height: 1.2;
}

.trophy-info p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.year { 
    background: var(--color-rojo-club); 
    color: white; 
    padding: 2px 8px; 
    border-radius: 4px; 
    font-size: 0.75rem; 
    font-weight: bold;
    display: inline-block;
}

/* Estilos de la Caja de Imagen */
.trophy-img-box {
    width: 100%;
    height: 160px; /* Altura fija para que todas las tarjetas sean iguales */
    border-radius: 8px;
    overflow: hidden;
    margin-top: auto; /* Empuja la imagen al fondo si hay diferencias de texto */
    border: 1px solid rgba(0,0,0,0.05);
}

.trophy-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el hueco sin deformar */
    transition: transform 0.5s ease;
}

/* Efecto Zoom en la foto al pasar el mouse por la tarjeta */
.trophy-card:hover .trophy-img-box img {
    transform: scale(1.1);
}

/* Ajustes Dark Mode */
[data-theme="dark"] .trophy-info h4 { color: white; }
[data-theme="dark"] .trophy-img-box { border-color: rgba(255,255,255,0.1); }

/* --- 2. BANNER DE COMPETICIÓN (CLASIFICACIÓN) --- */
.competition-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
    align-items: center;
    justify-content: center; /* Centra los botones en el medio */
    padding: 20px;
    text-align: center; /* Centra el texto del título también */
}

/* Icono */
.comp-icon {
    font-size: 2.5rem;
    color: #ffd700;
    /* No le damos margen derecho fijo para que quede bien centrado con el texto arriba */
}

/* Información: Fuerza a los botones a bajar, pero se mantiene centrada */
.comp-info {
    flex: 1 1 100%;      /* Ocupa todo el ancho, forzando a los botones a ir debajo */
    margin-bottom: 25px; /* Espacio antes de los botones */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el título y el párrafo */
}

.comp-info h2, .comp-info p {
    text-align: center;  /* Asegura que el texto interno esté centrado */
    max-width: 800px;    /* Evita que las líneas de texto sean eternas en pantallas grandes */
}

/* Contenedores de los botones */
.comp-action {
    /* 1. Base: Queremos 2 por fila (50%) */
    flex: 1 1 calc(50% - 20px); 
    
    /* 2. LÍMITE (La clave): No dejes que pasen de 400px de ancho en PC */
    max-width: 400px; 
    
    /* 3. Mínimo: Para que no se rompan si la pantalla se encoge */
    min-width: 280px;   
    
    display: flex;
}

/* Estilo de los Botones */
.btn-cta.btn-white {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 15px; /* Un poco más de padding */
    font-size: 0.9rem;
    line-height: 1.3;
    min-height: 60px;
    white-space: normal;
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave para que destaquen */
}

/* --- RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
    .competition-banner {
        flex-direction: column; /* Apila todo verticalmente */
    }

    .comp-action {
        /* En móvil quitamos el límite para que aprovechen todo el espacio */
        max-width: 100%; 
        flex: 1 1 100%;
        width: 100%;
    }
}
/* =========================================
   ESTILOS CONTENIDO ALTERNATIVO (FALLBACK)
   ========================================= */
.news-fallback-container {
    padding: 10px 0;
    animation: fadeIn 0.5s ease-out;
    width: 100%;
}

.fallback-msg {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 1rem;
}

.fallback-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 10px;
}

.fallback-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    width: 300px;
    box-shadow: var(--shadow-soft);
    text-align: left;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.fallback-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.fb-img {
    height: 160px;
    width: 100%;
    overflow: hidden;
}

.fb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.fallback-card:hover .fb-img img {
    transform: scale(1.05);
}

.fb-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fb-content h4 {
    color: var(--color-azul-club);
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-family: 'Oswald', sans-serif;
}

.fb-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Estilo especial para la tarjeta de Instagram */
.fallback-card.instagram-direct {
    background: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    color: white;
    border: none;
}

.fb-content.centered {
    align-items: center;
    text-align: center;
    justify-content: center;
}

.fallback-card.instagram-direct h4,
.fallback-card.instagram-direct p {
    color: white;
}

.fallback-card.instagram-direct .big-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.fallback-card.instagram-direct .btn-cta {
    color: #c13584; /* Color texto botón */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Ajustes Dark Mode */
[data-theme="dark"] .fallback-card {
    background: #1e1e1e;
    border-color: #333;
}
[data-theme="dark"] .fb-content h4 {
    color: white; /* Título blanco en modo oscuro */
}

/* =========================================
   15. PLANTILLA DE NOTICIAS (BLOG)
   ========================================= */

.news-article-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 40px;
    background-color: var(--bg-card);
    border-radius: 15px;
    box-shadow: var(--shadow-soft);
    text-align: left; /* Sobrescribe el center de los section por defecto */
    border-top: 5px solid var(--color-rojo-club);
}

.news-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.news-header .section-title {
    margin-bottom: 15px;
    font-size: 2.5rem;
    line-height: 1.2;
}

.news-date {
    display: inline-block;
    background: rgba(200, 16, 46, 0.1);
    color: var(--color-rojo-club);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
}

.news-media {
    margin: 30px 0;
    text-align: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.news-media img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

/* Contenedor para los videos/embeds de Instagram */
.news-media .video-container {
    position: relative;
    width: 100%;
    max-width: 500px; /* Ancho máximo para el post de Insta */
    margin: 0 auto;
    background: #f9f9f9;
}

.news-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-main);
}

.news-body p {
    margin-bottom: 20px;
}

.news-body strong {
    color: var(--color-azul-club);
}

.news-footer-actions {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Ajustes Modo Oscuro para la noticia */
[data-theme="dark"] .news-article-section {
    border-top: 5px solid #ff334b;
}
[data-theme="dark"] .news-body strong {
    color: #5dade2;
}
[data-theme="dark"] .news-media .video-container {
    background: transparent;
}

/* ==========================================================================
   GALERÍA DE FOTOS EN LAS NOTICIAS (ESTILO COLLAGE)
   ========================================================================== */
.news-gallery {
    column-count: 2; /* En móviles mostramos 2 columnas de fotos */
    column-gap: 15px;
    margin: 30px 0;
}

/* En pantallas grandes (PC/Tablets), mostramos 3 columnas para aprovechar el espacio */
@media (min-width: 768px) {
    .news-gallery {
        column-count: 3;
        column-gap: 20px;
    }
}

.news-gallery-img {
    width: 100%;
    height: auto;
    margin-bottom: 15px; /* Separación vertical entre fotos */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    break-inside: avoid; /* Evita que el navegador parta una foto por la mitad */
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Un pequeño efecto chulo al pasar el ratón por las fotos del collage */
.news-gallery-img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
/* ==========================================================================
   AJUSTE PARA PANTALLAS MUY PEQUEÑAS (MÓVILES)
   ========================================================================== */
@media (max-width: 576px) {
    .news-gallery {
        column-count: 2; /* Fuerza las 2 columnas en móviles */
        column-gap: 10px; /* Reduce un poco el espacio entre columnas */
        margin: 20px 0;
    }

    .news-gallery-img {
        max-height: 180px; /* Limita la altura para que ocupen la mitad de espacio */
        object-fit: cover; /* Recorta la imagen sin deformarla para ajustarse a la altura */
        margin-bottom: 10px; /* Reduce la separación vertical */
    }
}

/* --- ESTILOS SOLO PARA TARJETAS DE NOTICIAS --- */

/* 1. Limitar ancho y centrar si hay pocas */
#ultimas-noticias-grid .event-card, 
#todas-noticias-grid .event-card {
    max-width: 400px;
    width: 100%;
    margin: 0 auto; /* Centra la tarjeta en su columna */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Hacer que toda la tarjeta parezca un link */
#ultimas-noticias-grid .event-card:hover, 
#todas-noticias-grid .event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    background-color: var(--bg-alt); /* Un ligero cambio de fondo al pasar el ratón */
}

/* 3. Ajuste del texto para que no herede subrayados de link */
#ultimas-noticias-grid .event-card, 
#todas-noticias-grid .event-card {
    text-decoration: none !important;
    color: inherit !important;
}

/* ==========================================================================
   BOTÓN FLOTANTE "VOLVER AL INICIO" (STICKY)
   ========================================================================== */
.floating-home-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: #ffffff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Asegura que esté por encima de las fotos y el texto */
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    color: var(--color-rojo-club);

}

/* Efecto al pasar el ratón por encima */
.floating-home-btn:hover {
    transform: scale(1.1); /* Se hace un 10% más grande */
    background-color: var(--accent-color); /* Cambia al color rojo del club */
    color: var(--color-azul-club);
}

/* Ajuste más pequeño para la pantalla del móvil */
@media (max-width: 768px) {
    .floating-home-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   16. MEDIA QUERIES ESPECÍFICAS (NOTICIAS, LOGROS Y FALLBACKS)
   ========================================================================== */

/* --- TABLETS (768px a 1024px) --- */
@media (max-width: 1024px) {
    /* Ajuste para que el artículo no quede pegado a los bordes */
    .news-article-section {
        margin: 30px 20px;
        padding: 30px;
    }
}

/* --- MÓVILES (Max 768px) --- */
@media (max-width: 768px) {
    
    /* 1. PLANTILLA DE NOTICIA (BLOG) */
    .news-article-section {
        margin: 20px 10px; /* Reducimos mucho el margen exterior */
        padding: 20px;     /* Reducimos el relleno interior para ganar espacio de lectura */
        border-top-width: 3px;
    }

    .news-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .news-header .section-title {
        font-size: 1.8rem; /* Título más pequeño para evitar saltos de línea extremos */
        margin-bottom: 10px;
    }

    .news-date {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    .news-media {
        margin: 20px 0;
    }

    .news-media img {
        max-height: 300px; /* Evita que una foto vertical ocupe toda la pantalla del móvil */
    }

    .news-body {
        font-size: 1rem; /* Texto un pelín más pequeño para lectura cómoda en móvil */
        line-height: 1.6;
    }

    /* 2. TARJETAS DE LOGROS / TROFEOS */
    .achievements-grid {
        gap: 15px; /* Menos espacio entre tarjetas */
    }

    .trophy-card {
        width: 100%;       /* Ocupa todo el ancho en móvil */
        max-width: 350px;  /* Límite para que no se estire demasiado si rotan el móvil */
    }

    .trophy-img-box {
        height: 200px; /* Le damos un poco más de altura en móvil al ocupar el 100% de ancho */
    }

    /* 3. TARJETAS DE FALLBACK (Noticias alternativas) */
    .fallback-card {
        width: 100%; 
        max-width: 350px;
    }

    .fb-img {
        height: 180px; 
    }

    /* 4. GALERÍA DE FOTOS (COLLAGE) */
    .news-gallery {
        /* En pantallas pequeñas, 2 columnas agolpan mucho las fotos. Mejor 1 columna. */
        column-count: 1; 
        column-gap: 0;
    }

    .news-gallery-img {
        margin-bottom: 15px;
    }
}

/* --- MÓVILES MUY PEQUEÑOS (Max 480px) --- */
@media (max-width: 480px) {
    .news-header .section-title {
        font-size: 1.5rem; /* Ajuste final para pantallas minúsculas */
    }

    .trophy-header {
        flex-direction: column; /* Apila el icono y el texto del trofeo */
        text-align: center;
        gap: 10px;
    }
    
    .trophy-info {
        text-align: center; /* Centramos el texto de logros */
    }
}