@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; }

        /* ==========================================
   ESTILOS PARA EL TICKER DINÁMICO
   ========================================== */
.ticker-container {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 15px;
    font-size: 14px;
    color: #333;
    overflow: hidden;
}

.ticker-title {
    font-weight: 700;
    color: #333;; /* Color destacado para la etiqueta */
    white-space: nowrap;
    margin-right: 15px;
}

.ticker-content {
    width: 100%;
    overflow: hidden;
}

.ticker-item a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ticker-item a:hover {
    color: #0073aa;
    text-decoration: underline;
}

        /* --- 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; padding: 10px 3%; gap: 10px;  }
            .logo { font-size: 1.2rem; letter-spacing: -0.5px;    }
            .logo img { max-width: auto; height: auto;  }
            .btn-radio-live {  padding: 4px 10px;   }            
            .station-name { display: none;  }
        }
    
    .top-bar {display: flex;  justify-content: space-between;  align-items: center;  padding: 10px 5%;  background: #ffffff;  box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .logo img {   height: 50px; }

    /* 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;  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; 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; 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 Principal */
.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); }
.loretano-card.horizontal .loretano-img-box { width: 45%; border-right: 3px solid var(--loretano-orange);}
.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; }

/* --- NOTICIAS SECUNDARIAS (HORIZONTALES EN 2 COLUMNAS) --- */
.loretano-grid-small { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.loretano-card-v2 { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: row; align-items: stretch;}
.loretano-img-v2 { width: 40%; height: auto; min-height: 130px; border-right: 3px solid var(--loretano-orange); flex-shrink: 0;}
.loretano-img-v2 img { width: 100%; height: 100%; object-fit: cover; }
.loretano-content-v2 { width: 60%; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }
.loretano-tag-v2 { color: var(--loretano-green-text); font-weight: 800; font-size: 0.75rem; margin-bottom: 8px; letter-spacing: 0.5px; }
.loretano-title-v2 { font-size: 0.95rem; font-weight: 900; color: var(--loretano-dark-text); line-height: 1.3; margin: 0 0 10px 0; text-transform: uppercase; transition: color 0.3s ease; cursor: pointer;}
.loretano-title-v2:hover { color: var(--loretano-orange); }
.loretano-date-v2 { font-size: 0.8rem; color: var(--loretano-gray-date); padding-top: 8px; border-top: 1px solid #f0f0f0; }

/* Animaciones suaves */
.loretano-card.horizontal,
.loretano-card-v2 { transition: transform 0.3s ease, box-shadow 0.3s ease;}

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

/* Grid noticias + banner vertical */
.loretano-news-banner { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: stretch;}
.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;}
.loretano-sidebar-wrap { display: flex;  flex-direction: column; gap: 25px;}

/* Sidebar Table */
.loretano-sidebar { background: #fff; border: 1px solid #eee; border-radius: 20px; height: fit-content; overflow: hidden; }
.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); font-weight: 800;}
.loretano-separator { margin: 40px 0; border: 0; border-top: 1px solid #eee;}

/* Tarjetas de Noticias Generales */
.noticia, .news-card { overflow: hidden; transition: transform 0.3s ease;}
.noticia img, .news-card img { border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom: 4px solid #f13d00; display: block; width: 100%;}
.noticia:hover h3,
.noticia:hover .titulo,
.news-card:hover h2,
.noticia:hover a { color: #f13d00 !important;  transition: 0.3s;}
.btn-action:hover { opacity: 0.8; }

/* --- MEDIA QUERIES (RESPONSIVE) --- */
@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%; }
    .loretano-news-banner { grid-template-columns: 1fr; }
    .loretano-vertical-banner {  height: 300px; }
}

@media (max-width: 850px) {
    .matches-container { grid-template-columns: 1fr;  }
    .matches-bar {  margin-top: -50px; }
    .match-details {  display: flex;  flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

@media (max-width: 768px) {
    .loretano-main-title { font-size: 1.1rem; line-height: 1.4; }
    .loretano-card.horizontal .loretano-body { padding: 18px; }
    .loretano-content-v2 { padding: 14px; }
}

@media (max-width: 650px) {    
    .loretano-grid-small { grid-template-columns: 1fr; }
    .loretano-card-v2 { flex-direction: column; }
    .loretano-img-v2 {  width: 100%; height: 160px; border-right: none; border-bottom: 3px solid var(--loretano-orange); }
    .loretano-content-v2 { width: 100%; }
}

    :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;  height: 4px;  background: #ff3b00;  margin: 8px auto 0;  border-radius: 2px;  }

    /* 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: 22px 0; /* Mayor espacio vertical para alojar logos más grandes */
    border-top: 1px solid #222;  
    overflow: hidden;   
    white-space: nowrap;
}

.partners-content { 
    display: flex; 
    align-items: center; 
    gap: 65px; /* Mayor separación entre logos grandes */
    width: max-content;  
    animation: scroll-derecha 25s linear infinite; 
}

/* =========================================================
   TAMAÑO GRANDE PARA LOS LOGOS EN EL CINTILLO
   ========================================================= */
.partners-content img {
    height: 55px;        /* Tamaño grande y destacado */
    width: auto;         /* Mantiene la proporción original */
    object-fit: contain;
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.partners-content img:hover {
    opacity: 1;
    transform: scale(1.05); /* Ligero aumento al pasar el cursor */
}

.partners-content span { 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: #666; 
    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; 
    }
    
    /* Tamaño grande adaptado para dispositivos móviles */
    .partners-content img {
        height: 40px;
    }
}

* { 
    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; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%); z-index: 1; }

/* 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; }

/* 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; 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('../imagenes/deportes/internacional/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);  gap: 20px; }
.foto-item {  width: 100%; aspect-ratio: 1 / 1; 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;}
.modal-contenido-unico { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 40px; box-sizing: border-box; animation: aparecer 0.2s ease-out;}
.modal-contenido-unico img { width: auto !important; height: auto !important; max-width: 92vw !important;  max-height: 90vh !important; object-fit: contain;  aspect-ratio: auto !important; 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;  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; 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;}



/* 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; 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; }    
    .futbol-info-autor {  flex-direction: column; align-items: flex-start; }}