@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
:root {
    --bg-top: #b51c1c; /* Basado en el degradado de la imagen visual[cite: 4] */
    --bg-bottom: #3b0918;
    --card-light: #ffffff;
    --card-light-bg: #f4f6f9;
    --card-dark: #0f1024;
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --accent-red: #d90429;
    --accent-blue: #19294b;
    color-scheme: light;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
    font-size: 16px;
}
* {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom)); /*[cite: 4] */
    color: var(--text-light);
    display: flex;
    justify-content: center;
}
/* Fuente para los títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
}

section {
    background-color: var(--card-light-bg);
}

/* Contenedor principal que simula la vista móvil del diseño[cite: 4] */
.mobile-wrapper {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

/* --- Section - Compact Tournament Banner & Context --- */
.banner {
    /* margin-bottom: 20px; */
    height: 400px; 
    padding: 18px;
    display: flex; 
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%),
        linear-gradient(to bottom, rgb(170, 17, 43) 0%, rgb(7, 16, 51) 100%),
        url('images/fondo-2.jpg');

    /* Aplicamos el modo de fusión Multiply a los gradientes sobre la imagen */
    background-blend-mode: multiply;

    /* 3. Evitamos que corte las cabezas ajustando el enfoque más arriba */
    background-position: center 25%; 
    background-size: cover;
    
    position: relative; 
    overflow: hidden; 
}

/* Estilos de la imagen flotante */
.player-bg {
    position: absolute;
    right: -10%;
    bottom: -8%;
    height: 80%;
    z-index: 0;
    object-fit: contain;
    pointer-events: none;
    
    /* ESTAS DOS LÍNEAS SON LA MAGIA DEL SMOOTH */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); 
    will-change: transform; /* Optimiza el rendimiento para que no dé tirones */
}
.club-tag, 
.container, .nav-buttons {
    position: relative;
    z-index: 2; /* Mayor que el 0 de la imagen */
}
.banner .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.club-tag {
    background: var(--card-light);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .6rem;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--bg-top);
    display: flex;
    width: fit-content;
    gap: 8px;
    justify-content: start;
    align-items: center;
}
.club-tag span {
    background-color: var(--bg-top);
    display: inline-flex;
    width: 5px; 
    height: 5px;
    border-radius: 20px;
}

h1 {
    margin: 5px 0 0 0;
    font-size: 1.8rem;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
}

h1 .temporada {
    display: block;
    font-weight: 300;
    font-size: .7rem;
} /* Título extraído del texto[cite: 3] */

h1 .outline {
    font-family: sans-serif;
    font-weight: 800;
    
    /* 1. Color del texto y del trazo */
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    
}

.subtitle {
    font-size: .7rem;
    font-family: 'Plus Jakarta Sans';
    font-weight: 200;
    opacity: 1;
}

.stats-pills span {
    font-family: 'Plus Jakarta Sans';
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: .6rem;
    margin-right: 5px;
}

.stats-pills .highlight {
    background: var(--bg-top);
}

.nav-buttons {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex-direction: column;
}

.nav-buttons .other-btn {
    display: flex; gap: 15px;
}

.nav-buttons a {
    width: fit-content;
    border: none;
    background: #ffffff42;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: .8rem;
    cursor: pointer;
    font-weight: 500;
}

.nav-buttons .main-btn {
    color: var(--bg-top);
    font-weight: 700;
    background-color: #fff;
}

.transition {
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 -50%;
    height: 150px; 
    width: 100%; 
    background: linear-gradient(to bottom, transparent, rgba(8, 13, 31, 0.3), rgba(8, 13, 31, 0.6), rgb(8, 13, 31), rgb(8, 13, 31), rgba(8, 13, 31, 0.6), rgba(8, 13, 31, 0.3), transparent);
    /* background-color: red; */
}
main {
    position: relative;
}
main, footer {
    padding: 20px;
}
main .container {
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 36px;
}
#blq-posiciones, #blq-estadisticas {
    padding-left: 0.5px;
    padding-right: 0;
}

th, td {
    padding: 12px 8px; 
    text-align: center;
    border-bottom: none; /* Asegura que no haya bordes */
}
th {
    color: #888;
    font-weight: normal;
    font-size: .7rem;
    padding: 8px 4px;
    border: none;
    background-color: var(--card-light-bg);
}

#blq-posiciones .card-header, 
#blq-estadisticas .card-header, 
#blq-posiciones .note,
#blq-estadisticas .note,
#tabla-posiciones-01 td:first-child {
    padding-left: 16px;
}
#tabla-posiciones-01 td:last-child,
#tabla-posiciones-01 th:last-child,
#tabla-estadisticas-04-completa td:last-child,
#tabla-estadisticas-04-completa th:last-child {
    padding-right: 16px;
} 
/* Estilos generales de las tarjetas (Bloques)[cite: 4] */
.card {
    background: var(--card-light);
    color: var(--text-dark);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.card.dark {
    background: var(--card-dark);
    color: var(--text-light);
}

.card-header {
    font-weight: bold;
    font-family: 'Outfit';
    font-size: 1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.card.dark .card-header { border-bottom-color: rgba(255,255,255,0.1); }

span.red-text {
    font-weight: bold;
    color: var(--bg-top);
}
/* --- Tablas (Posiciones y Estadísticas)[cite: 3] --- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    font-family: 'Outfit';
}

tr:nth-child(odd) {
    background-color: #ffffff;
}

tr:nth-child(even) {
    background-color: #f4f7fc; 
}
#tabla-posiciones-01 tr.active td:first-child {
    position: relative;
}

#tabla-posiciones-01 tr.active td:first-child::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 4px;
    background-color: #d90429; /* Rojo */
    border-radius: 0 4px 4px 0; /* Bordes derechos redondeados */
}

th:nth-child(1),
td:nth-child(1) {
    padding-left: 16px;
    text-align: left;
}
th:nth-child(2),
td:nth-child(2) {
    text-align: left;
}

td {
    padding: 10px 4px;
    text-align: right;
}

.note {
    font-size: .7rem;
    color: #666;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Outfit';
}
.note span {
    color: var(--bg-top);
}

/* --- Cuadro Partidos --- */
#seccion-partidos {
    background-color: var(--card-light-bg);
}

/* --- Partidos[cite: 3, 4] --- */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    font-size: .7rem;
    font-weight: bold;
    user-select: none;
}
.tabs span {
    padding: 5px 10px;
    border-radius: 15px;
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease; /* Hace que el cambio de color sea suave al tocarlo */
}
.tabs span.active {
    background: var(--accent-blue);
    color: white;
}
#contenedor-partidos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Tarjeta principal del partido */
.match-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* margin-bottom: 16px; */
}

/* Cabecera (Fase del torneo y Estado) */
.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.match-phase {
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
    color: #8c98a4;
    letter-spacing: 0.5px;
}

/* Píldoras de estado en la esquina superior derecha */
.badge-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 600;
}
.bg-finalizado { background-color: #eef2f6; color: #4a5568; }
.bg-proximo { background-color: #e0f2fe; color: #0284c7; }
.bg-hoy { background-color: #d90429; color: #ffffff; }

/* Cuerpo (Nombres a la izquierda, Goles a la derecha) */
.match-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.match-teams {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Separación vertical entre los nombres de los equipos */
}

/* Contenedor vertical estilo "píldora" para los goles */
.match-scores {
    background-color: #f4f7fc; /* Fondo celeste muy clarito */
    padding: 10px 16px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.score-number {
    font-family: 'Outfit', sans-serif; /* Usa la fuente de los títulos para los números */
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

/* --- CLASES DINÁMICAS (Inyectadas por JS según quién gane) --- */
.team-name {
    font-size: .9rem;
}

.team-winner {
    color: #0d1b2a;
    font-weight: 700; /* Equipo ganador: oscuro y negrita */
}

.team-loser {
    color: #8c98a4;
    font-weight: 500; /* Equipo perdedor: gris */
}

.team-draw {
    color: #0d1b2a;
    font-weight: 600; /* Si empatan o no se jugó, ambos oscuros */
}
#btn-toggle-partidos {
    position: relative;
}
/* Botón de Mostrar más / Ocultar partidos */
.btn-mostrar-mas {
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    background-color: var(--accent-blue);
    color: var(--card-light); /* Tu color oscuro principal */
    border: none; /* Borde sutil gris claro */
    border-radius: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
    transition: all 0.3s ease;

    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    display: block;
    margin: 10px auto 0;

    /* Opcional: para que se destaque sobre las tarjetas */
    /* background: #ffffff; */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}
.btn-mostrar-mas:hover {
    background-color: #0f1a30; /* Fondo celeste clarito al pasar el mouse */
    border-color: none;
}
#contenedor-partidos {
    max-height: 410px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    overflow-y: auto;
}
/* #seccion-partidos.expandido {
    max-height: 700px;
} */

/* =========================================
   SECCIÓN 02 - PLAYOFFS (LLAVES)
   ========================================= */
#seccion-llaves {
    padding-right: 20px;
    overflow: hidden;
}
/* 1. Contenedor principal y Scroll */
.playoff-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 40px 0px;
}

.playoff-tree {
    display: flex;
    justify-content: flex-start;
    gap: 40px; /* Separación horizontal entre columnas */
    min-width: max-content;
}

/* 2. Columnas y Títulos */
.playoff-column {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Alineación vertical estricta al centro */
    position: relative; 
    padding-top: 40px; /* Espacio para que el título no estorbe */
}

.column-title {
    position: absolute;
    top: 0; 
    left: 10px;
    color: var(--text-light); 
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Diseño de las Tarjetas (Píldoras) */
.playoff-matchup {
    display: flex;
    flex-direction: column;
    gap: 12px; 
    position: relative;
    background-color: transparent;
    margin-bottom: 0; /* Aseguramos que no haya márgenes que rompan la matemática */
}

.playoff-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    border-radius: 30px; 
    font-weight: 500;
    font-size: .95rem;
    background-color: #ffffff;
    color: #0a192f; 
    min-width: 220px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    z-index: 2; /* Para que quede por encima de las líneas rojas */
}

/* 4. Efecto del Ganador (Gradiente animado) */
.playoff-team.winner {
    background: linear-gradient(90deg, #991b1b, #dc2626, #ef4444, #dc2626, #991b1b);
    background-size: 200% auto; 
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    animation: moverBurbuja 4s linear infinite; /* Animación más fluida */
}

.playoff-team.tbd {
    box-shadow: none;
    color: #ffffffa1;
    background-color: rgba(255, 255, 255, 0.2);
}

@keyframes moverBurbuja {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}


/* =========================================
   LÍNEAS CONECTORAS (MATEMÁTICA FLEXBOX)
   ========================================= */

/* A. Línea horizontal que ENTRA al partido desde la izquierda */
.playoff-column:not(:first-child) .playoff-matchup::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    height: 2px;
    background-color: #991b1b;
    z-index: 1;
}

/* --- DISTANCIAS EXACTAS POR COLUMNA --- */

/* B. COLUMNA 1 (Cuartos de Final) */
.playoff-column:nth-child(1) { gap: 20px; } /* Partidos más juntos */

.playoff-column:nth-child(1) .playoff-matchup:nth-child(even)::after {
    content: ''; position: absolute; right: -20px; top: 50%; width: 20px;
    border-top: 2px solid #991b1b; border-right: 2px solid #991b1b; border-radius: 0 6px 0 0;
    height: calc(50% + 10px); /* Baja la mitad de la tarjeta + mitad del gap (10px) */
    z-index: 1;
}
.playoff-column:nth-child(1) .playoff-matchup:nth-child(odd)::after {
    content: ''; position: absolute; right: -20px; bottom: 50%; width: 20px;
    border-bottom: 2px solid #991b1b; border-right: 2px solid #991b1b; border-radius: 0 0 6px 0;
    height: calc(50% + 10px); /* Sube la mitad de la tarjeta + mitad del gap (10px) */
    z-index: 1;
}


/* C. COLUMNA 2 (Semifinales) */
.playoff-column:nth-child(2) { gap: 160px; } /* Partidos más separados para abrazar los de cuartos */

.playoff-column:nth-child(2) .playoff-matchup:nth-child(even)::after {
    content: ''; position: absolute; right: -20px; top: 50%; width: 20px;
    border-top: 2px solid #991b1b; border-right: 2px solid #991b1b; border-radius: 0 6px 0 0;
    height: calc(50% + 80px); /* Mitad de la tarjeta + mitad del gap (80px) */
    z-index: 1;
}
.playoff-column:nth-child(2) .playoff-matchup:nth-child(odd)::after {
    content: ''; position: absolute; right: -20px; bottom: 50%; width: 20px;
    border-bottom: 2px solid #991b1b; border-right: 2px solid #991b1b; border-radius: 0 0 6px 0;
    height: calc(50% + 80px); 
    z-index: 1;
}

.playoff-column:last-child .playoff-matchup::after {
    content: none !important;
    display: none !important;
}
/* --- Instagram Photo Card --- */
.photo-card {
    position: relative;
    display: flex;
    align-items: flex-end;

    height: 180px;
    padding: 15px;

    border-radius: 20px;
    overflow: hidden;

    background: url('images/foto-insta.jpg') center / cover no-repeat;

    color: white;
    font-family: 'Outfit', sans-serif;

    cursor: pointer;

    /* Importante para que los pseudo-elementos queden contenidos */
    isolation: isolate;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* Degradado sobre la foto */
.photo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .6;
    background: linear-gradient(38deg,rgba(17, 23, 201, 0.8) 0%, rgba(209, 13, 13, .3) 50%, rgba(255, 0, 0, 0.7) 100%);
    transition: all 1s ease-in-out;
}

/* Brillo sutil */
.photo-card::after {
    content: '';
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.12),
        transparent 40%
    );

    opacity: 0;
    z-index: -1;

    transition: opacity 0.35s ease;
}

/* Contenido */
.photo-content {
    position: relative;
    z-index: 2;
}

.photo-content p {
    margin: 0 0 3px 0;

    font-size: .65rem;
    font-weight: 600;
    letter-spacing: 1px;

    color: rgba(255, 255, 255, 0.85);
}

.photo-content h3 {
    margin: 0;

    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Hover */
.photo-card:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); */
}

.photo-card:hover::before {
    opacity: 1;
}
.photo-card:hover::after {
    opacity: 1;
}

/* Click */
.photo-card:active {
    transform: translateY(-1px) scale(0.99);
}

/* --- Footer[cite: 2, 3] --- */
footer {
    text-align: center;
    padding: 30px 0;
    font-size: .8rem;
    opacity: 0.8;
}
.footer-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
.footer-buttons button {
    background: white;
    color: var(--text-dark);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
}



/* --- Fondo Estilo Aurora / Mesh Gradient --- */
.aurora-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    background-color: #1a0000; /* Fondo base oscuro */
    overflow: hidden;
}

.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px); /* Difuminado extremo para que parezcan luces */
    opacity: 0.8;
    animation: rotateBlob 5s infinite alternate linear;
}

/* Mancha Roja Central/Arriba */
.blob-1 {
    width: 400px; height: 400px;
    background: #d90429;
    top: -150px; left: -100px;
    animation-duration: 15s;
    transform-origin: center right; /* Gira desde un punto descentrado */
}

/* Mancha Azul/Carmesí Abajo a la derecha */
.blob-2 {
    width: 300px; height: 300px;
    background: #3b0918;
    bottom: -100px; right: -50px;
    animation-duration: 10s;
    transform-origin: center left;
}

/* Mancha Roja Oscura en el centro */
.blob-3 {
    width: 300px; height: 300px;
    background: #b51c1c;
    top: 30%; left: 30%;
    animation-duration: 10s;
    transform-origin: bottom right;
}

/* Animación: Solo giran suavemente y cambian de escala */
@keyframes rotateBlob {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1.2); }
}

/* Se aplica únicamente en pantallas con un ancho superior a 768px (por ejemplo, tablets y PCs) */
@media (min-width: 500px) {
    /* =========================================
    ESTÁNDAR (Firefox)
    ========================================= */
    .scroll-claro {
    scrollbar-width: 13px; /* Opciones: auto, thin, none */
    scrollbar-color: #c1c1c1 transparent; /* thumb track */
    }

    .scroll-oscuro {
    scrollbar-width: 13px;
    scrollbar-color: #3f4050 transparent; /* thumb track */
    }

    /* =========================================
    WEBKIT (Chrome, Edge, Safari) - CLARO
    ========================================= */
    /* Ancho de la barra vertical y alto de la horizontal */
    .scroll-claro::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    /* Fondo de la barra (track) */
    .scroll-claro::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
    }

    /* Manija del scroll (thumb) */
    .scroll-claro::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 8px;
    border: 2px solid #f1f1f1; /* Crea un margen interno visible */
    }

    /* Hover en la manija */
    .scroll-claro::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
    }

    /* =========================================
    WEBKIT (Chrome, Edge, Safari) - OSCURO
    ========================================= */
    .scroll-oscuro::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    .scroll-oscuro::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 8px;
    }

    .scroll-oscuro::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 8px;
    border: 2px solid #1e1e1e; /* Se funde con el fondo para afinar la manija */
    }
}
/* =========================================
                PRELOADER
   ========================================= */
#preloader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #271111, #a30808);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
body.preloader-activo {
    overflow: hidden;
}

#preloader.ocultar {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
    color: #fff;
}

.preloader-content {
    position: relative;
    display: inline-block;
}

.diablito-wrapper::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;

    /* Centrado */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    z-index: 0;
}

.diablito-img {
    position: relative;
    z-index: 1;
    width: 65px;
}

.texto-cargando {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    width: 150px;
    text-align: center;
    font-family: 'Outfit';
    color: #e5e7eb;
    text-transform: uppercase;
}

.dots::after {
    content: "";
    animation: dots 1s infinite;
}

@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}