@font-face {
            font-family: 'Inter', sans-serif;
            src: url('AmsiPro-Regular.woff2') format('woff2'),
                url('AmsiPro-Regular.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        :root {
            --accent-green: #f13d00;
            --accent-red: #D90432;
            --text-dark: #0d1321;
            --text-light: #fff;
            --border-color: #eee;
            --dark-bg: #1a1d23;
            --card-bg: #252a33;
            --font-amsi: 'Amsi pro', sans-serif;
        }

        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background: #fff;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* --- NAVIGATION & HEADER --- */
        .top-bar { background-color: #f8f9fa; padding: 15px 5%; border-bottom: 1px solid var(--border-color); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; }
        .logo { font-family: 'Inter', sans-serif; font-size: 2.2rem; font-weight: 900; text-decoration: none; color: var(--text-dark); letter-spacing: -1px; }
        .logo span { color: var(--accent-green); }
        .top-nav { display: flex; gap: 20px; font-weight: 600; font-size: 0.85rem; }
        .top-nav a { text-decoration: none; color: var(--text-dark); }
        .social-and-search { display: flex; align-items: center; gap: 15px; }
        .social-icons { display: flex; gap: 10px; font-size: 1.1rem; }
        .social-icons a { color: var(--text-dark); text-decoration: none; }

        .categories-bar { background-color: var(--accent-green); padding: 0 5%; }
        .nav-categories { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; list-style: none; padding: 0; }
        .nav-categories a { display: block; padding: 15px 20px; text-decoration: none; color: var(--text-light); font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
        .nav-categories li.active a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: var(--text-light); }
        .nav-categories li { position: relative; }

        .ticker { border-bottom: 1px solid var(--border-color); padding: 10px 5%; font-size: 0.8rem; font-weight: 700; }

        /* --- SECCIÓN ELECTORAL --- */
        .electoral-section { color: #fff; padding: 40px 5%; }
        .electoral-container { max-width: 1200px; margin: 0 auto; }
        .electoral-header { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; }
        .candidates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; }
        .candidate-card { background-color: var(--card-bg); border-radius: 8px; padding: 20px 10px; text-align: center; position: relative; border: 1px solid #333; transition: border-color 0.3s ease; }
        .candidate-card:hover { border-color: var(--accent-green); }
        .rank { position: absolute; top: 10px; left: 10px; background: #444; width: 22px; height: 22px; border-radius: 50%; font-size: 0.65rem; display: flex; align-items: center; justify-content: center; font-weight: 900; }
        .photo-container { width: 90px; height: 90px; margin: 0 auto 15px; border-radius: 50%; overflow: hidden; border: 3px solid #494949; }
        .photo-container img { width: 100%; height: 100%; object-fit: cover; }
        .percentage { font-size: 2.1rem; font-weight: 900; margin: 5px 0; }
        .votes-count { font-size: 2rem; color: #777; margin-bottom: 10px; }
        .color-accent { position: absolute; right: 10px; top: 20%; width: 4px; height: 30px; border-radius: 2px; }
  
        /* Ajustes para Celulares (Pantallas menores a 768px) */
        @media (max-width: 768px) {
            .top-bar {
                grid-template-columns: 1fr auto; /* Ajusta la rejilla para móviles */
                padding: 10px 3%;
                gap: 10px;
            }

            .logo {
                font-size: 1.2rem; /* Reduce el tamaño del texto del logo */
                letter-spacing: -0.5px;
            }

            .logo img {
                max-width: auto; /* Si el logo es una imagen, esto limita su ancho */
                height: auto;
            }

            /* Opcional: Si quieres que el player de radio también se vea más pequeño en móvil */
            .btn-radio-live {
                padding: 4px 10px;
            }
            
            .station-name {
                display: none; /* Oculta "Escuchando ahora" para ganar espacio */
            }
        }

    






    /* Contenedor Principal */
    .top-bar {display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5%;
        background: #ffffff; /* O el color de tu fondo */
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .logo img {
        height: 50px; /* Ajusta según tu logo */
    }

    /* ESTILO DEL PLAYER */
    .btn-radio-live {
        display: flex;
        align-items: center;
        background: #0d1321;
        padding: 6px 15px;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .btn-radio-live:hover {
        background: #000;
        border-color: #f13d00;
        transform: scale(1.02);
    }

    .play-circle {
        background: #f13d00;
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        margin-right: 12px;
    }

    .text-container {
        display: flex;
        flex-direction: column;
        margin-right: 15px;
    }

    .live-label {
        color: #f13d00;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .station-name {
        color: white;
        font-size: 13px;
        font-weight: 400;
    }

    /* Animación de ondas de sonido */
    .signal-waves {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 15px;
    }

    .signal-waves span {
        width: 3px;
        background: #f13d00;
        border-radius: 3px;
        animation: bounce 1s infinite alternate;
    }

    .signal-waves span:nth-child(2) { animation-delay: 0.2s; height: 10px; }
    .signal-waves span:nth-child(1) { height: 15px; }
    .signal-waves span:nth-child(3) { animation-delay: 0.4s; height: 8px; }

    @keyframes bounce {
        from { height: 4px; }
        to { height: 15px; }
    }

    /* Iconos Sociales */
    .social-icons {
        display: flex;
        gap: 16px;
    }

    .social-icons a {
        color: #0d1321;
        font-size: 18px;
        transition: 0.3s;
    }

    .ico-fb:hover { color: #1877F2; }
    .ico-tw:hover { color: #000; }
    .ico-ig:hover { color: #E4405F; }
    .ico-yt:hover { color: #FF0000; }
    .ico-tk:hover { color: #00f2ea; }







    :root {
        --whinsho-green: #f13d00;
        --hover-dark: #0d1321;
        --white: #ffffff;
        --text-gray: #333;
    }

    /* NAVBAR */
    .whinsho-navbar {
        background-color: var(--whinsho-green);
        height:50px;
        display: flex;
        align-items: center;
        position: sticky;
        top: 15px;
        z-index: 1000;
        margin: 20px;
        border-radius: 50px;
    }

    .nav-container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 25px;
    }

    /* LINKS */
    .nav-links {
        display: flex;
        list-style: none;
        gap: 5px;
        margin: 0;
        padding: 0;
    }

    .nav-links li {
        position: relative;
    }

    .nav-links a {
        color: var(--white);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 15px;
        display: block;
        border-radius: 30px;
        transition: 0.3s;
        white-space: nowrap;
    }

    .nav-links > li > a:hover {
        background-color: var(--hover-dark);
    }

    /* SUBMENÚ */
    .submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 5px;
        background: var(--white);
        min-width: 200px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 9999;
        list-style: none;
    }


    /* Mostrar submenu */
    .has-submenu:hover > .submenu {
        opacity: 1;
        visibility: visible;
    }

    /* Items submenu */
    .submenu li a {
        color: #333;
        padding: 10px 20px;
        display: block;
        border-bottom: 1px solid #f0f0f0;
    }   

    .submenu li:last-child a {
        border-bottom: none;
    }

    .submenu li a:hover {
        background-color: var(--whinsho-green);
        color: var(--white);
    }

    /* --- HOVER PERSONALIZADO PARA CADA ELEMENTO DEL SUBMENÚ --- */

    /* 1. Primer elemento */
    .submenu li:nth-child(1) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }

    /* 2. Segundo elemento */
    .submenu li:nth-child(2) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }

    /* 3. Tercer elemento */
    .submenu li:nth-child(3) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }

    /* 4. Cuarto elemento */
    .submenu li:nth-child(4) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }

    /* 5. Quinto elemento */
    .submenu li:nth-child(5) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }

    /* 6. Sexto elemento */
    .submenu li:nth-child(6) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }

    /* 7. Septimo elemento */
    .submenu li:nth-child(7) a:hover {
        background-color: #f13d00;
        color: var(--white);        
    }
    
    /* Flechita */
    .has-submenu > a::after {
        content: "▾";
        font-size: 12px;
        margin-left: 6px;
        transition: 0.3s;
    }

    /* Ajuste en escritorio */
    .has-submenu > a {
        display: flex;
        align-items: center;
    }

    /* 🔥 Cuando se abre en móvil */
    .has-submenu.open > a::after {
        transform: translateY(-50%) rotate(-135deg);
    }

    /* BOTÓN HAMBURGUESA */
    .menu-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-toggle span {
        width: 28px;
        height: 3px;
        background: var(--white);
        transition: 0.3s;
    }

@media (max-width: 1150px) {


    .nav-container {
        justify-content: flex-end;
    }

    .menu-toggle {
        display: flex;        
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10001;
    }

    .nav-links {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 80%;
        height: calc(100vh - 70px);
        background: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
        transition: 0.4s;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        width: 100%;
        color: #0d1321;
        font-size: 0.8rem;
        padding: 15px 25px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    .nav-links a:hover {
    background-color: #0d1321;
    color: var(--white);
    }

    /* SUBMENÚ EN MÓVIL */
    .submenu {
        position: static;
        transform: none;
        background: var(--white);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        width: 100%;
        background: #ffffff;
    }

    .has-submenu.open .submenu {
        max-height: 500px;
    }
    
    .has-submenu > a {
        justify-content: space-between;
        width: 100%;
        display: block;
    }

    
    /* HOVER SUBMENÚ */
    .submenu li a:hover {
        background-color: #f13d00;
        color: var(--white);
    }

    /* 🔥 CUANDO ESTÁ ACTIVO → X */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
}




        :root {
    --texto: white;
    --futbol-loretano: #f13d00;
    --text-gray: white;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #f4f4f4;
}

/* --- PORTADA (HERO) --- */
.hero-section {
    width: 100%;
    height: 650px; /* MODIFICADO: Incrementado de 550px a 650px */
    background: url('/04deportes/01nacional/imagenes/depnacportada.webp') no-repeat center center;
    background-size: cover;
    position: relative;
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.9));
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 150px 40px; /* MODIFICADO: Subió a 150px para equilibrar la nueva altura */
    width: 100%;
    color: white;
}

.hero-content span {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-gray);
}

.hero-content h1 {
    font-size: 3rem;
    margin: 10px 0;
    font-weight: 900;
}

/* --- SECCIÓN PARTIDOS (OVERLAP) --- */
.matches-bar {
    background-color: var(--futbol-loretano);
    color: white;
    width: 100%;
    position: relative;
    z-index: 10;
    /* EL TRUCO: Margen negativo para subir la sección sobre el fondo */
    margin-top: -80px; 
    padding: 40px 0;
}

.matches-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 0 40px;
}

.match-box {
    display: flex;
    flex-direction: column;
}

.match-header {
    border-bottom: 1px solid #ffffff;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.match-header h2 {
    color: var(--ucl-gold);
    font-size: 1.1rem;
    text-transform: uppercase;
    margin: 0;
}

.match-header p {
    font-size: 0.75rem;
    color: var(--text-gray);
    margin: 5px 0 0 0;
    text-transform: uppercase;
}

/* Marcadores y Equipos */
.match-main {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

.team img { width: 60px; height: 70px; margin-bottom: 10px; }
.team span { font-size: 0.8rem; font-weight: bold; text-transform: uppercase; text-align: center; }

.score-vs { font-size: 2.5rem; font-weight: 900; }

/* Detalles (Fecha, Hora, Estadio) */
.match-details {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 10px;
}   
        
        
  






    :root {
        --loretano-green-text: #008148;
        --loretano-dark-text: #1a2a22;
        --loretano-gray-date: #999999;
        --loretano-orange: #f13d00;
    }

    .futbol-loretano-section { max-width: 1200px; margin: 40px auto; padding: 0 20px; font-family: 'Inter', sans-serif; }

    /* Headers */
    .loretano-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
    .loretano-title { font-size: 1.8rem; font-weight: 900; border-bottom: 4px solid var(--loretano-orange); padding-bottom: 5px; margin: 0; }
    .loretano-btn { background: var(--loretano-orange); color: white; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-weight: 700; font-size: 0.8rem; }

    /* Grid Layout */
    .loretano-container { display: grid; grid-template-columns: 1fr 320px; gap: 30px; }

    /* Team Label */
    .loretano-team-label { font-size: 1.1rem; padding-left: 10px; margin-bottom: 20px; font-weight: 800; border-left: 5px solid #ccc; }
    .label-comerciantes { border-left-color: #008148; }
    .label-cni { border-left-color: #008148; }

    /* Card Horizontal (Principal) */
    .loretano-card.horizontal {background: #fff; border-radius: 15px; overflow: hidden; display: flex; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transform: translateY(-5px);  }
    
    /* CAMBIO: Línea anaranjada al lado derecho de la imagen grande */
    .loretano-card.horizontal .loretano-img-box { 
        width: 45%; 
        border-right: 3px solid var(--loretano-orange); 
    }

    /* Animación suave */
    .loretano-card.horizontal,
    .loretano-card-v2{
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

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

    .loretano-card-v2:hover{
        transform: translateY(-5px);
        
    }


    .loretano-card.horizontal .loretano-img-box img { width: 100%; height: 100%; object-fit: cover; }
    
    .loretano-card.horizontal .loretano-body { width: 55%; padding: 25px; display: flex; flex-direction: column; }
    .loretano-tag-text { color: var(--loretano-green-text); font-weight: 700; font-size: 0.85rem; margin-bottom: 10px; }

    /* Título Principal con efecto Hover */
    .loretano-main-title { 
        font-size: 1.4rem; 
        font-weight: 800; 
        color: var(--loretano-dark-text); 
        margin: 0 0 10px 0; 
        transition: color 0.3s ease; 
        cursor: pointer;
    }
    .loretano-main-title:hover { color: var(--loretano-orange); }

    .loretano-footer-simple { margin-top: auto; color: var(--loretano-gray-date); font-size: 0.85rem; border-top: 1px solid #eee; padding-top: 15px; }

    /* Cards V2 (Noticias Pequeñas) */
    .loretano-grid-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

    .loretano-card-v2 { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); display: flex; flex-direction: column; }

    /* Grid noticias + banner vertical */
    .loretano-news-banner{
        display:grid;
        grid-template-columns: 1fr 260px;
        gap:20px;
        align-items:stretch;
    }

   /* Estilo para la imagen debajo del sidebar */
    .loretano-sidebar-banner {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        
        transition: transform 0.3s ease;
    }

    

    .loretano-sidebar-banner img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    /* Ajuste de separación en el contenedor del sidebar */
    .loretano-sidebar-wrap {
        display: flex;
        flex-direction: column;
        gap: 25px; /* Espacio entre la tabla y la imagen */
    }

    /* CAMBIO: Línea anaranjada abajo de cada imagen pequeña */
    .loretano-img-v2 { 
        width: 100%; 
        height: 160px; 
        border-bottom: 3px solid var(--loretano-orange); 
    }
    .loretano-img-v2 img { width: 100%; height: 100%; object-fit: cover; }

    .loretano-content-v2 { padding: 15px 10px 10px 10px; display: flex; flex-direction: column; flex-grow: 1; }
    .loretano-tag-v2 { color: var(--loretano-green-text); font-weight: 800; font-size: 0.75rem; margin-bottom: 12px; letter-spacing: 0.5px; }

    /* Título V2 con efecto Hover */
    .loretano-title-v2 { 
        font-size: 1rem; 
        font-weight: 900; 
        color: var(--loretano-dark-text); 
        line-height: 1.3; 
        margin: 0 0 15px 0; 
        flex-grow: 1; 
        text-transform: uppercase; 
        transition: color 0.3s ease; 
        cursor: pointer;
    }
    .loretano-title-v2:hover { color: var(--loretano-orange); }

    .loretano-date-v2 { font-size: 0.85rem; color: var(--loretano-gray-date); padding-top: 12px; border-top: 1px solid #f0f0f0; }

    /* Sidebar Table */
    .loretano-sidebar { background: #fff; border: 1px solid #eee; border-radius: 20px; height: fit-content; overflow: hidden; }
    .loretano-sidebar-wrap{
        display:flex;
        flex-direction:column;
        gap:20px;
    }
    .sidebar-header { background: #f13d00; color: white; padding: 15px; font-weight: 800; text-align: center; font-size: 0.85rem; }
    .loretano-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .loretano-table th { background: #fcfcfc; padding: 12px; text-align: left; border-bottom: 3px solid #eee; }
    .loretano-table td { padding: 12px; border-bottom: 1px solid #f5f5f5; }
    .rank-top { border-left: 4px solid var(--loretano-orange); }

    .loretano-separator { margin: 40px 0; border: 0; border-top: 1px solid #eee; }

    .rank-top{
        border-left: 4px solid var(--loretano-orange);
        font-weight: 800;
    }
   
    /* --- ESTILOS PARA TARJETAS DE NOTICIAS --- */

        /* 1. Contenedor de la noticia */
        .noticia, .news-card {
            overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
            transition: transform 0.3s ease;
        }

        /* 2. Bordes redondeados solo arriba y línea naranja debajo de la imagen */
        .noticia img, .news-card img {
            border-top-left-radius: 15px;  /* Ajusta el radio a tu gusto */
            border-top-right-radius: 15px;
            border-bottom: 4px solid #f13d00; /* Línea naranja anaranjada */
            display: block;
            width: 100%;
        }

        /* 3. Cambio de color del título al pasar el mouse por la noticia */
        /* Asumiendo que usas <h3> o una clase .titulo para el texto */
        .noticia:hover h3, 
        .noticia:hover .titulo,
        .news-card:hover h2 {
            color: #f13d00; /* Cambia a naranja al hacer hover */
            transition: 0.3s;
        }

        /* Si el título es un enlace <a> */
        .noticia:hover a {
            color: #f13d00 !important;
        }

        .btn-action:hover { opacity: 0.8; }

    /* Mobile */
    @media (max-width: 992px) {
        .loretano-container { grid-template-columns: 1fr; }
        .loretano-card.horizontal { flex-direction: column; }
        .loretano-card.horizontal .loretano-img-box { 
            width: 100%; 
            border-right: none; 
            border-bottom: 3px solid var(--loretano-orange); 
        }
        .loretano-card.horizontal .loretano-body { width: 100%; }
    }
    @media (max-width: 650px) {
        .loretano-grid-small { grid-template-columns: 1fr; }
    }  
          

    @media (max-width: 768px) {

        /* Título principal */
        .loretano-main-title {
            font-size: 1.1rem;
            line-height: 1.4;
        }

        /* Títulos pequeños */
        .loretano-title-v2 {
            font-size: 0.95rem;
            line-height: 1.4;
        }

        /* Padding más cómodo */
        .loretano-card.horizontal .loretano-body {
            padding: 18px;
        }

        .loretano-content-v2 {
            padding: 14px;
        }

        @media (max-width: 992px){
            .loretano-news-banner{
                grid-template-columns:1fr;
            }

            .loretano-vertical-banner{
                height:300px;
            }
        }
        
         /* Mobile */
        @media (max-width: 850px) {
            .matches-container { grid-template-columns: 1fr; }
            .matches-bar { margin-top: -50px; }
            .match-details { flex-wrap: wrap; text-align: center; }
        }
    }
    







    :root {
        --liga1-blue: #cf293f;
        --liga1-gold: #cf293f;
        --alianza-color: #00234a;
        --cristal-color: #00aae4;
        --u-color: #890c2e;
    }

    .liga1-section { max-width: 1200px; margin: 40px auto; padding: 0 20px; font-family: 'Inter', sans-serif; }
    .liga1-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .liga1-title-main {
    text-align: center;
    font-weight: 800;
    font-size: 28px;
    position: relative;
    margin-bottom: 10px;
}

/* línea roja debajo */
.liga1-title-main::after {
    content: "";
    display: block;
    width: 160px;        /* largo de la línea */
    height: 4px;         /* grosor */
    background: #ff3b00; /* color rojo/naranja */
    margin: 8px auto 0;  /* centrado */
    border-radius: 2px;  /* bordes suaves */
}

    /* PORTADA SUPERIOR */
    .liga1-hero { margin-bottom: 30px; }
    .liga1-hero-card { position: relative; border-radius: 20px; overflow: hidden; height: 450px; }
    .liga1-hero-card img { width: 100%; height: 100%; object-fit: cover; }
    .liga1-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: white; }
    .liga1-hero-content h3 { font-size: 2.2rem; margin: 10px 0; font-weight: 800; line-height: 1.1; }
    .tag-live { background: #cf293f; color: white; padding: 4px 10px; font-weight: 900; font-size: 0.7rem; border-radius: 3px; }

    /* GRID 3 COLUMNAS */
.liga1-layout-container{
    display:grid;
    grid-template-columns:250px 1fr 250px;
    gap:25px;
    margin-bottom:30px;
    align-items:start;
}

/* TABLA LIGA 1 */
.liga1-sidebar-left{
    background:#f4f4f4;
    border-radius:22px;
    overflow:hidden;
    width:100%;
    max-width:250px;
    align-self:start;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.tabla-header{
   background:#f45100;
    color:#fff;
    font-size:14px;
    font-weight:800;
    text-align:left;
    padding:16px 18px;
    line-height:1.2;
}

.liga1-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.liga1-table thead th{
    background:#ececec;
    color:#001233;
    font-weight:700;
    font-size:12px;
    padding:10px 6px;
    text-align:center;
}

.liga1-table thead th:nth-child(2){
    text-align:left;
}

.liga1-table tbody tr{
    border-top:1px solid #e5e5e5;
}

.liga1-table tbody td{
    padding:8px 6px;
    font-size:12px;
    color:#001233;
    text-align:center;
}

.liga1-table tbody td:nth-child(2){
    text-align:left;
}

.equipo-cell{
    display:flex;
    align-items:center;
    gap:6px;
}

.equipo-cell img{
    width:20px;
    height:20px;
    object-fit:contain;
    flex-shrink:0;
}

.destacado{
    border-left:4px solid #ff4d00;
}

.destacado td{
    font-weight:700;
}

.rank-alianza{
    border-left:4px solid var(--alianza-color);
    font-weight:700;
}

.rank-universitario{
    border-left:4px solid var(--u-color);
    font-weight:700;
}

.rank-cristal{
    border-left:4px solid var(--cristal-color);
    font-weight:700;
}

.liga1-table tbody tr:hover{
    background:#fafafa;
    transition:.3s;
}

   /* CENTRAL HORIZONTAL */
.h-card-link{
    text-decoration:none;
    color:inherit;
}

.liga1-card-h{
    display:flex;
    gap:15px;
    background:white;
    border-radius:15px;
    overflow:hidden;
    margin-bottom:15px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:0.3s;
}

.liga1-card-h:hover{
    transform:translateY(-5px);
}

/* Imagen más angosta */
.h-img{
    width:180px;
    height:120px;
    flex-shrink:0;
    border-right:4px solid var(--liga1-gold);
}

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

/* Menos espacio interno */
.h-body{
    padding:12px;
}

.team-tag{
    font-size:0.65rem;
    font-weight:900;
    margin-bottom:5px;
}

.team-tag.alianza{ color:var(--alianza-color); }
.team-tag.cristal{ color:var(--cristal-color); }
.team-tag.u{ color:var(--u-color); }

.h-body h3{
    font-size:1rem;
    margin:5px 0;
    font-weight:800;
    line-height:1.25;
    transition:0.3s;
}

.liga1-card-h:hover h3{
    color:var(--liga1-blue);
}

.h-date{
    font-size:0.75rem;
    color:#999;
    margin-top:8px;
}

    /* SIDEBAR DERECHO + HOVER GRIS */
    .mini-title { font-size: 1rem; border-bottom: 3px solid #333; padding-bottom: 5px; margin-top: 0; }
    .mini-grid { display: flex; flex-direction: column; gap: 15px; }
    .mini-card { display: flex; gap: 10px; text-decoration: none; color: inherit; align-items: center; padding: 5px; border-radius: 8px; transition: 0.3s; }
    .mini-card img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
    .mini-card p { font-size: 0.85rem; font-weight: 600; margin: 0; line-height: 1.2; }
    .mini-card:hover { background-color: #cecece; color: #333; }

    /* SECCIÓN INFERIOR + ANIMACIÓN (IGUAL A LAS DE ARRIBA) */
    .liga1-bottom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
    .footer-card-link { text-decoration: none; color: inherit; }
    .image-style-card { 
        background: white; border-radius: 15px; overflow: hidden; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: flex; 
        flex-direction: column; transition: 0.3s ease; /* Transición suave */
    }
    
    /* Animación: Mover hacia arriba */
    .footer-card-link:hover .image-style-card { transform: translateY(-5px); }
    
    .card-img-top { height: 150px; border-bottom: 3px solid #cf293f; }
    .card-img-top img { width: 100%; height: 100%; object-fit: cover; }
    .card-info { padding: 15px; flex-grow: 1; }
    .info-tag { color: #cf293f; font-weight: 800; font-size: 0.75rem; display: block; margin-bottom: 10px; }
    
    .card-info h3 { 
        font-size: 0.95rem; font-weight: 900; color: #111; 
        margin: 0 0 10px 0; line-height: 1.3; transition: 0.3s; 
    }
    
    /* Animación: Cambiar color de título */
    .footer-card-link:hover h3 { color: var(--liga1-blue); }
    
    .info-date { font-size: 0.8rem; color: #999; border-top: 1px solid #eee; padding-top: 10px; margin-top: auto; }

    @media (max-width: 1024px) {
        .liga1-layout-container { grid-template-columns: 1fr 1fr; }
        .liga1-bottom-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        .liga1-layout-container { grid-template-columns: 1fr; }
        .liga1-bottom-grid { grid-template-columns: 1fr; }
    }







    .main-footer { background: #121418; color: #ececec; font-family: 'Inter', sans-serif; padding-top: 40px; }
    
    .footer-container { 
        max-width: 1140px; 
        margin: 0 auto; 
        display: grid; 
        grid-template-columns: 1.2fr 1fr 1fr; 
        gap: 40px; 
        padding: 0 20px 30px; 
    }

    /* 1. LOGO PRINCIPAL */
    .footer-logo { height: 50px; margin-bottom: 15px; } 
    .brand-text { font-size: 0.85rem; color: #999; line-height: 1.5; margin-bottom: 20px; }

    .col-title { 
        font-size: 0.95rem; 
        font-weight: 700; 
        color: #f13d00; 
        text-transform: uppercase; 
        margin-bottom: 20px; 
        letter-spacing: 0.5px;
    }

    .contact-list, .quick-links { list-style: none; padding: 0; margin: 0; }
    .contact-list li { font-size: 0.85rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; color: #bbb; }
    .contact-list i { color: #f13d00; font-size: 0.9rem; }
    
    .quick-links li { margin-bottom: 8px; }
    .quick-links a { color: #bbb; text-decoration: none; font-size: 0.85rem; transition: 0.3s; }
    .quick-links a:hover { color: #fff; padding-left: 5px; }

    .social-links { display: flex; gap: 8px; }


    .s-btn {
        width: 34px;
        height: 34px;
        background: rgba(255,255,255,0.05);        
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
        transition: 0.4s;
    }
    .s-btn i { color: #fff; font-size: 0.9rem; transition: 0.3s; }

    .s-btn:hover {transform: translateY(-3px); }

    /* FACEBOOK */
    .fb:hover { background: #1877f2;}
    .fb:hover i { color: #fff;}

    /* X / TWITTER */
    .tw:hover { background: #000000;}
    .tw:hover i { color: #fff;}

    /* INSTAGRAM */
    .ig:hover { background: #e4405f;}
    .ig:hover i { color: #fff;}

    /* YOUTUBE */
    .yt:hover { background: #ff0000;}
    .yt:hover i { color: #fff;}

    /* TIKTOK */
    .tk:hover { background: #000000;}
    .tk:hover i {color: #fff;}
    

    /* 2. CINTILLO AJUSTADO (MÁS RÁPIDO Y DESDE LA DERECHA) */
    .partners-strip { 
        background: #0b0d0f; 
        padding: 18px 0; 
        border-top: 1px solid #222; 
        overflow: hidden; 
        white-space: nowrap;
    }

    .partners-content { 
        display: flex; 
        align-items: center; 
        gap: 60px; 
        width: max-content;
        /* Reducido a 20s para mayor velocidad */
        animation: scroll-derecha 25s linear infinite; 
    }

    .partners-content span { font-size: 0.65rem; font-weight: 700; color: #555; margin-right: 20px; }

    

    /* Ajuste para que empiece desde afuera del borde derecho */
    @keyframes scroll-derecha {
        0% { transform: translateX(100vw); } 
        100% { transform: translateX(-100%); }
    }

    .footer-copyright { 
        background: #000; text-align: center; padding: 15px; 
        font-size: 0.75rem; color: #555; border-top: 1px solid #0d1321;
    }

    @media (max-width: 850px) {
        .footer-container { grid-template-columns: 1fr; text-align: center; gap: 30px; }
        .social-links, .contact-list li { justify-content: center; }
    }



    *{ font-family:'Inter',sans-serif; box-sizing:border-box; margin:0; padding:0;}

    body{ background:#f4f6f9; overflow-x:hidden;}



    
/* SECCION DE SEMIFINALES */
.mundial-container { 
    max-width: 1300px; 
    margin: auto; 
    padding: 40px 20px;
    font-family: system-ui, -apple-system, sans-serif;
}


/* NUEVA SECCIÓN: GRILLA PARA LAS SEMIFINALES */
.fixture-semifinales {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 20px 0;
    margin: 0 -20px;
}

/* TARJETA INDIVIDUAL DE PARTIDO */
.partido-card {
    display: table-cell;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f2f5;
    vertical-align: top;
    overflow: hidden;
    transition: transform 0.3s ease;
}

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

/* ENCABEZADO DE LA TARJETA */
.partido-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f2f5;
    text-align: center;
}

.fase-tag {
    display: inline-block;
    background: #f13d00;
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    margin-right: 8px;
}

.fecha-texto {
    font-size: 13px;
    color: #555;
    font-weight: 700;
}

/* CUERPO DEL PARTIDO (Enfrentamiento) */
.partido-body {
    display: table;
    width: 100%;
    padding: 30px 15px;
    text-align: center;
}

.equipo-bloque {
    display: table-cell;
    width: 40%;
    vertical-align: middle;
    text-align: center;
}

.vs-bloque {
    display: table-cell;
    width: 20%;
    vertical-align: middle;
    text-align: center;
}

/* BANDERAS Y NOMBRES */
.flag-grande {
    width: 55px;
    height: 55px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    margin: 0 auto 10px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.nombre-equipo {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    display: block;
}

/* BADGE DEL "VS" */
.vs-badge {
    background: #f0f2f5;
    color: #aaa;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 50%;
    display: inline-block;
}

/* PIE DE LA TARJETA (Estadio) */
.partido-footer {
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #f8f9fa;
    text-align: center;
    color: #666;
}

.td-estadio {
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}

.icon-estadio {
    vertical-align: middle;
    margin-right: 4px;
    color: #888;
}

/* ADAPTACIÓN PARA PANTALLAS MÓVILES */
@media (max-width: 768px) {
    .fixture-semifinales {
        display: block;
    }
    .partido-card {
        display: block;
        width: 100%;
        margin-bottom: 25px;
    }
}
    



/* HERO FULL - CORREGIDO PARA MOSTRAR LA SOMBRA ABAJO */
.hero-overlay { 
    position: absolute; 
    inset: 0; 
    /* Cambiado a 'to bottom' y ajustado para que la parte oscura quede abajo, cubriendo el título */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1; /* Asegura que la sombra se quede sobre la foto */
}

/* Asegura que el contenido se posicione por encima de la sombra */
.hero-content { 
    position: absolute; 
    bottom: 70px; 
    left: 6%; 
    max-width: 700px;
    z-index: 2; /* Importante: por encima de .hero-overlay para que el texto no se opaque */
}










/* HERO FULL */
.hero-mundial{
    height:650px;
    width:100%;
    position:relative;
    overflow:hidden;
    margin-bottom:40px;
}

.hero-mundial img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* SOMBRA SUAVE */
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.40),
        rgba(0,0,0,.03)
    );
}

/* CONTENIDO */
.hero-content{
    position:absolute;
    left:6%;
    bottom:30px;
    max-width:700px;
    z-index:10;

    /* MÁS ARRIBA QUE ANTES */
    transform:translateY(90px);
}

.hero-content span{
    display:inline-block;
    background:#f13d00;
    color:#fff;
    padding:9px 18px;
    border-radius:40px;
    font-size:12px;
    font-weight:800;
}

.hero-content h1{
    font-size:70px;
    line-height:.95;
    font-weight:900;
    margin:20px 0;
    color:#fff;
    text-transform:uppercase;
}

.hero-content p{
    font-size:16px;
    line-height:1.8;
    color:#f1f1f1;
    margin:0;
}

.hero-content a{
    display:inline-block;
    margin-top:25px;
    padding:16px 28px;
    background:#fff;
    border-radius:50px;
    font-weight:800;
    text-decoration:none;
    color:#000;
}

/* RESPONSIVE */
@media(max-width:900px){

    .hero-mundial{
        height:500px;
    }

    .hero-content{
        left:30px;
        right:30px;
        bottom:20px;
        transform:translateY(40px);
    }

    .hero-content h1{
        font-size:42px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.6;
    }

    .galeria-horizontal{
        grid-template-columns:1fr 1fr;
    }

    .noticias-grid{
        grid-template-columns:1fr;
    }
}








/* ==========================================
   SECCIÓN GALERÍA CON IMAGEN DE FONDO (Mantenida intacta)
   ========================================== */
.seccion-galeria-completa {
    background-image: url('/04deportes/02internacional/imagenes/fondomundial.webp'); 
    background-size: cover;         
    background-position: center;   
    background-repeat: no-repeat;  
    background-blend-mode: overlay;
    background-color: rgba(255, 111, 0, 0.4); 

    padding: 60px 0;    
    margin: 40px 0;     
    width: 100vw;       
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Contenedor interno para mantener la galería alineada (1300px) */
.galeria-interna {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Asegura que el título sea legible sobre la imagen de fondo */
.seccion-galeria-completa .titulo-seccion h2 {
    color: #ffffff !important; 
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); 
}

/* ==========================================
   GALERÍA PRINCIPAL - CONFIGURADA A 6 FOTOS (3 de 3)
   ========================================== */
.galeria-horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas horizontales */
    gap: 20px; 
}

.foto-item {
    width: 100%;
    aspect-ratio: 1 / 1; /* Cuadrado perfecto en la galería principal */
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 
    cursor: pointer;
}

.foto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

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

/* ==========================================
   ESTILOS DE PESTAÑAS (TABS)
   ========================================== */
.tabs-selecciones {
    display: flex;
    justify-content: center; 
    gap: 10px;
    margin-bottom: 25px;
    overflow-x: auto; 
    padding-bottom: 10px;
    width: 100%;
}

@media (max-width: 768px) {
    .tabs-selecciones {
        justify-content: flex-start; 
        padding-left: 5px;
    }
}

/* ==========================================
   VENTANA FLOTANTE (TAMAÑO REAL HORIZONTAL)
   ========================================== */
.modal-flotante {
    display: none; 
    position: fixed;
    z-index: 99999; 
    left: 0; top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.96); 
    backdrop-filter: blur(15px); 
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Contenedor flexible expandido al máximo */
.modal-contenido-unico {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40px; /* Espacio para que las flechas laterales no pisen la foto */
    box-sizing: border-box;
    animation: aparecer 0.2s ease-out;
}

/* La imagen adoptará su ancho horizontal nativo (hasta un 92% de la pantalla) */
.modal-contenido-unico img {
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;  /* Gran apertura horizontal */
    max-height: 90vh !important; /* Evita que choque arriba y abajo */
    object-fit: contain;         /* Respeta la proporción original exacta del archivo sin deformar */
    aspect-ratio: auto !important; /* Anula por completo cualquier corte cuadrado previo */
    border-radius: 8px;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.9);
}

/* Botón Cerrar (X) */
.btn-cerrar {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 55px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: 0.3s;
    line-height: 1;
    z-index: 100005;
}

.btn-cerrar:hover {
    color: #ff6f00; 
    transform: scale(1.1);
}

/* Botones laterales de navegación */
.btn-nav-modal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7); 
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 50px;
    padding: 30px 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
    z-index: 100006;
}

.btn-nav-modal:hover {
    background-color: #ff6f00;
    border-color: #ff6f00;
}

.btn-nav-modal.prev { left: 20px; }
.btn-nav-modal.next { right: 20px; }

@keyframes aparecer {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Optimización móvil */
@media (max-width: 768px) {
    .modal-contenido-unico {
        padding: 0 10px;
    }
    .modal-contenido-unico img {
        max-width: 100% !important;
        max-height: 80vh !important;
    }
    .btn-nav-modal {
        font-size: 35px;
        padding: 20px 12px;
    }
    .btn-nav-modal.prev { left: 5px; }
    .btn-nav-modal.next { right: 5px; }
    .btn-cerrar { top: 15px; right: 20px; font-size: 45px; }
}



/* TITULOS GENERALES DE SECCIÓN CENTRADOS */
.titulo-seccion {
    width: 100%; 
    text-align: center !important; 
    margin: 40px 0 35px 0;
}

.titulo-seccion h2 {
    font-size: 28px; 
    font-weight: 900; 
    color: #1a1a1a;
    letter-spacing: -0.5px;
}


/*==========================================
   ÚLTIMAS NOTICIAS DEPORTES INTERNACIONAL (PC / ESCRITORIO)
==========================================*/

.noticias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
    
    /* SOLUCIÓN AL FOOTER: Agrega separación abajo */
    margin-bottom: 50px;       
    
    max-width: 1200px;         
    margin-left: auto;         
    margin-right: auto;
    padding: 0 20px;           
    box-sizing: border-box;
}

.noticia-card {
    background: #fff;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
    transition: .3s;
}

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

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

.noticia-card span {
    display: block;
    padding: 18px 20px 5px;
    font-size: 12px;
    font-weight: 900;
    color: #f13d00;
}

.noticia-card h3 {
    padding: 0 20px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.noticia-subtitulo {
    padding: 12px 20px 25px;
    font-size: 14px;
    line-height: 1.7;
    color: #777;
}

/*==========================================
    RESPONSIVE - ÚLTIMAS NOTICIAS (CELULAR)
==========================================*/

@media (max-width: 768px) {

    .noticias-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        
        /* SOLUCIÓN AL FOOTER EN MÓVIL: Mantiene la separación abajo */
        margin-bottom: 40px;   
        
        padding: 0 20px; 
        max-width: 100%; 
    }

    .noticia-card {
        width: 100%;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
    }

    .noticia-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }

    .noticia-card span {
        display: block;
        padding: 18px 20px 8px;
        font-size: 13px;
        font-weight: 800;
        color: #0b8b4b; 
        text-transform: uppercase;
    }

    .noticia-card h3 {
        padding: 0 20px;
        margin: 0;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 800;
        color: #222;
    }

    .noticia-subtitulo {
        padding: 15px 20px;
        font-size: 16px;
        line-height: 1.5;
        color: #555;
    }

    .tarjeta-autovincular {
        display: block !important;
        text-decoration: none;
        color: inherit;
    }

}








    .main-footer { background: #121418; color: #ececec; font-family: 'Inter', sans-serif; padding-top: 40px; }
    
    .footer-container { 
        max-width: 1140px; 
        margin: 0 auto; 
        display: grid; 
        grid-template-columns: 1.2fr 1fr 1fr; 
        gap: 40px; 
        padding: 0 20px 30px; 
    }

    /* 1. LOGO PRINCIPAL */
    .footer-logo { height: 50px; margin-bottom: 15px; } 
    .brand-text { font-size: 0.85rem; color: #999; line-height: 1.5; margin-bottom: 20px; }

    .col-title { 
        font-size: 0.95rem; 
        font-weight: 700; 
        color: #f13d00; 
        text-transform: uppercase; 
        margin-bottom: 20px; 
        letter-spacing: 0.5px;
    }

    .contact-list, .quick-links { list-style: none; padding: 0; margin: 0; }
    .contact-list li { font-size: 0.85rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; color: #bbb; }
    .contact-list i { color: #f13d00; font-size: 0.9rem; }
    
    .quick-links li { margin-bottom: 8px; }
    .quick-links a { color: #bbb; text-decoration: none; font-size: 0.85rem; transition: 0.3s; }
    .quick-links a:hover { color: #fff; padding-left: 5px; }

    .social-links { display: flex; gap: 8px; }


    .s-btn {
        width: 34px;
        height: 34px;
        background: rgba(255,255,255,0.05);        
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
        transition: 0.4s;
    }
    .s-btn i { color: #fff; font-size: 0.9rem; transition: 0.3s; }

    .s-btn:hover {transform: translateY(-3px); }

    /* FACEBOOK */
    .fb:hover { background: #1877f2;}
    .fb:hover i { color: #fff;}

    /* X / TWITTER */
    .tw:hover { background: #000000;}
    .tw:hover i { color: #fff;}

    /* INSTAGRAM */
    .ig:hover { background: #e4405f;}
    .ig:hover i { color: #fff;}

    /* YOUTUBE */
    .yt:hover { background: #ff0000;}
    .yt:hover i { color: #fff;}

    /* TIKTOK */
    .tk:hover { background: #000000;}
    .tk:hover i {color: #fff;}
    

    /* 2. CINTILLO AJUSTADO (MÁS RÁPIDO Y DESDE LA DERECHA) */
    .partners-strip { 
        background: #0b0d0f; 
        padding: 18px 0; 
        border-top: 1px solid #222; 
        overflow: hidden; 
        white-space: nowrap;
    }

    .partners-content { 
        display: flex; 
        align-items: center; 
        gap: 60px; 
        width: max-content;
        /* Reducido a 20s para mayor velocidad */
        animation: scroll-derecha 25s linear infinite; 
    }

    .partners-content span { font-size: 0.65rem; font-weight: 700; color: #555; margin-right: 20px; }

    
    /* Ajuste para que empiece desde afuera del borde derecho */
    @keyframes scroll-derecha {
        0% { transform: translateX(100vw); } 
        100% { transform: translateX(-100%); }
    }

    .footer-copyright { 
        background: #000; text-align: center; padding: 15px; 
        font-size: 0.75rem; color: #555; border-top: 1px solid #0d1321;
    }

    @media (max-width: 850px) {
        .footer-container { grid-template-columns: 1fr; text-align: center; gap: 30px; }
        .social-links, .contact-list li { justify-content: center; }
    }



/* CUERPO DE NOTICIA DEPORTE */
:root {
    --deportes-rojo: #f13d00;
    --deportes-azul: #002d72;
    --fb-blue: #1877F2;
    --tk-black: #010101;
    --tt-red: #fe2c55; 
}

/* CONTENEDOR GENERAL */
.deportes-nacionales-container { 
    max-width: 1150px; 
    margin: auto; 
    font-family: 'Inter', sans-serif; 
    display: flex; 
    gap: 35px; 
    padding: 40px; 
    align-items: flex-start; 
}

/* BLOQUE PRINCIPAL DE LA NOTICIA */
.noticia-futbol-principal { flex: 2; width: 100%; }

.liga-tag { 
    color: var(--deportes-rojo); 
    font-size: 13px; 
    font-weight: 800; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.futbol-titular { 
    font-size: 38px; 
    font-weight: 900; 
    line-height: 1.1; 
    margin: 10px 0 20px 0;
    color: #111;
}

.futbol-imagen-portada {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    border-bottom: 4px solid #f13d00;
    display: block;
}

/* 📌 SECCIÓN DE INFOBAR OPTIMIZADA CON FLEXBOX */
.futbol-info-autor { 
    font-size: 13px; 
    color: #666; 
    margin: 15px 0; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* 📌 NUEVOS ESTILOS PARA LOS ICONOS REDONDOS */
.futbol-redes-inferiores {
    display: flex;
    gap: 6px;
}

.icono-social-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 50%;
    font-size: 11px;
    transition: transform 0.2s ease, filter 0.2s ease;
    
    /* Evita que flexbox aplaste los círculos */
    flex-shrink: 0; 
}

.icono-social-inline:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.icono-social-inline.fb { background-color: #1877F2; }
.icono-social-inline.tk { background-color: #010101; }
.icono-social-inline.yt { background-color: #FF0000; }
.icono-social-inline.x-tw { background-color: #0F1419; }
.icono-social-inline.ig { background-color: #E1306C; }

.futbol-cuerpo-noticia p {
    line-height: 1.6; 
    margin-bottom: 20px; 
    font-size: 18px;
    color: #333;
}

.futbol-frase-destacada {
    font-size: 20px;
    font-weight: 800;        
    padding-left: 20px;
    margin: 10px 0;
    color: var(--deportes-azul);
    font-style: italic;
}

.futbol-galeria-apoyo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 30px 0;
}

.futbol-card-galeria {
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
}

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

/* BARRA LATERAL STICKY ADAPTADA Y CENTRADA */
.deportes-sidebar { 
    flex: 1; 
    position: -webkit-sticky;
    position: sticky;
    top: 20px; 
    z-index: 10;
    width: 100%; 
    max-width: 360px; 
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.social-box-wrapper {
    width: 100%;
    max-width: 340px; 
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    border: 1px solid #eef0f2;
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
}

.social-header-title {
    color: #ffffff;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 12px;
    text-transform: uppercase;
}

.box-facebook .social-header-title { background-color: var(--fb-blue); }
.box-tiktok .social-header-title { background-color: var(--tt-red); }

.social-content-container {
    width: 100%;
    height: 500px; 
    overflow: hidden;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-tiktok .social-content-container {
    height: auto !important; 
    min-height: 500px;
    padding: 10px 0;
}

.fb-iframe-plugin {
    border: none; 
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ========================================================
   MÉDIAS QUERIES COMPLEMENTARIAS PARA FORMATO MÓVIL (MÁXIMO 768PX)
   ======================================================== */
@media (max-width: 900px) {
    .deportes-nacionales-container { 
        flex-direction: column; 
        padding: 20px;
        gap: 30px;
    }
    .deportes-sidebar { 
        position: relative; 
        top: 0; 
        width: 100%; 
        max-width: 100%; 
    }
    .social-box-wrapper {
        max-width: 340px; 
    }
}

@media (max-width: 768px) {
    .futbol-titular { 
        font-size: 26px; 
        margin-bottom: 15px;
    }
    .futbol-imagen-portada { 
        height: 240px; 
    }
    .futbol-galeria-apoyo { 
        grid-template-columns: 1fr; 
        gap: 10px;
    }
    .futbol-card-galeria { 
        height: 190px; 
    }
    .futbol-cuerpo-noticia p {
        font-size: 16px; 
    }
    /* En celulares apila el autor arriba y los iconos abajo de forma limpia */
    .futbol-info-autor {
        flex-direction: column;
        align-items: flex-start;
    }
}