:root{
  --verde:#14b86a;
  --azul:#0d47a1;
  --blanco:#ffffff;
  --morado:#6d28d9;
  --oscuro:#0b1220;
  --gris:#667085;
  --fondo:#f6f8fc;
  --borde:rgba(15,23,42,.1);
  --sombra:0 20px 45px rgba(13,71,161,.10);
  --transicion: all 0.3s ease;
  --radio-moderno: 16px;
  --sombra-premium: 0 10px 30px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--fondo);
  color:var(--oscuro);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,calc(100% - 32px));margin:0 auto}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
}
.topbar-inner{
  min-height:78px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:50px;height:50px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--azul),var(--morado));
  color:#fff;font-family:'Oswald',sans-serif;font-size:1.3rem;font-weight:700;
  box-shadow:var(--sombra);
}
.brand-title,.brand-subtitle{display:block}
.brand-title{font-family:'Oswald',sans-serif;font-size:1.2rem;letter-spacing:.3px}
.brand-subtitle{font-size:.88rem;color:var(--gris)}
.nav{display:flex;gap:22px;flex-wrap:wrap}
.nav a{font-weight:600;color:#17325c}
.nav a:hover{color:var(--morado)}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem}

.hero{
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(109,40,217,.22), transparent 32%),
    radial-gradient(circle at top right, rgba(20,184,106,.22), transparent 30%),
    linear-gradient(135deg, #081226 0%, #0d47a1 55%, #40159c 100%);
  color:#fff;
  overflow:hidden;
}
.overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:1.4fr .8fr;gap:32px;
  padding:86px 0 72px;
}
.eyebrow,.section-kicker{
  display:inline-block;
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;
  color:#a7f3d0;
}
.hero h1{
  margin:14px 0 16px;
  font-family:'Oswald',sans-serif;
  font-size:clamp(2.1rem,4vw,4.2rem);
  line-height:1.02;
}
.hero p{font-size:1.05rem;max-width:60ch;color:rgba(255,255,255,.9)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;border-radius:14px;font-weight:700;
  transition:.2s transform ease,.2s opacity ease,.2s background ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--verde);color:#052814}
.btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-outline{border:1px solid var(--borde);background:#fff;color:var(--azul)}
/*.hero-stats{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:28px
}
.hero-stats div{
  min-width:110px;padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.hero-stats strong{display:block;font-size:1.4rem}
.hero-stats span{font-size:.88rem;color:rgba(255,255,255,.82)}
*/
.hero-panel{
  align-self:start;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--sombra);
}
.badge-live{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;background:#ffeded;color:#a11212;
  font-size:.8rem;font-weight:800;margin-bottom:12px
}
.match{font-family:'Oswald',sans-serif;font-size:1.9rem;line-height:1.1;margin:.3rem 0 1rem}
.match span{color:#a7f3d0}
.match-meta{list-style:none;padding:0;margin:0 0 12px}
.match-meta li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.muted{color:var(--gris)}
.hero-panel .muted{color:rgba(255,255,255,.78)}

.section{padding:76px 0}
.section-head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  margin-bottom:28px
}
.section h2,.section h1{
  margin:.35rem 0 0;
  font-family:'Oswald',sans-serif;
  font-size:clamp(1.9rem,3vw,2.8rem)
}
.simple-link{font-weight:700;color:var(--morado)}

.news-layout{
  display:grid;grid-template-columns:1.3fr .9fr;gap:24px
}
.featured-card,.mini-card,.video-card,.schedule-card,.result-box,.sponsor-card,.contact-box{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:24px;
  box-shadow:var(--sombra);
}

.featured-card{overflow:hidden}
.featured-content{padding:22px}
.featured-content h3{font-size:1.7rem;margin:.7rem 0}
.mini-cards{display:grid;gap:18px}
.mini-card{padding:22px}
.mini-card h3{margin:.6rem 0;font-size:1.12rem}
.tag{
  display:inline-flex;padding:7px 10px;border-radius:999px;background:#dcfce7;color:#166534;font-size:.78rem;font-weight:800
}
.tag.alt{background:#dbeafe;color:#1d4ed8}
.tag.alt2{background:#ede9fe;color:#6d28d9}
.tag.alt3{background:#fee2e2;color:#b91c1c}

.dark-section{
  background:linear-gradient(180deg,#0b1220 0%, #121c34 100%);
  color:#fff;
}
.live-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px}
.video-card,.schedule-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.video-placeholder{
  min-height:360px;border-radius:24px;
  display:grid;place-items:center;
  border:1px dashed rgba(255,255,255,.28)
}
.play-circle{
  display:inline-grid;place-items:center;
  width:72px;height:72px;border-radius:999px;background:rgba(255,255,255,.12);
  font-size:1.7rem;margin:0 auto 14px
}
.video-placeholder p{color:rgba(255,255,255,.8);text-align:center}
.schedule-card{padding:24px}
.schedule-item{
  display:flex;flex-direction:column;gap:5px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.12)
}
.dark-section .muted{color:rgba(255,255,255,.75)}

.results-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.result-box{padding:24px}
.scoreline{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  margin-top:10px
}
.scoreline strong{
  font-family:'Oswald',sans-serif;font-size:2rem;color:var(--azul)
}
.cta-box{
  background:linear-gradient(135deg, rgba(13,71,161,.08), rgba(109,40,217,.08))
}
.gradient-section{
  background:linear-gradient(180deg, rgba(13,71,161,.06), rgba(109,40,217,.06))
}
/*.sponsor-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}*/
.sponsor-card{
  min-height:110px;padding:22px;
  display:grid;place-items:center;
  text-align:center;font-weight:800;color:#17325c
}
.contact-box{
  padding:28px;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center
}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.footer{
  background:#0b1220;color:#fff;padding:26px 0;border-top:1px solid rgba(255,255,255,.08)
}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer p{margin:.4rem 0 0;color:rgba(255,255,255,.78)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}


/* ============================================================
   DISEÑO DE TABLAS GLOBAL (PARA QUE SE VEA COMO EL INICIO)
   ============================================================ */

.tables-wrap {
    margin-top: 20px;
}

/* Título de la Serie con el toque verde */
.table-block h2, .panel-tabla h3 {
    font-family: 'Oswald', sans-serif;
    color: var(--oscuro);
    font-size: 1.6rem;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid var(--verde); 
}

/* Contenedor con la sombra y bordes de tu inicio */
.table-responsive, .panel-tabla {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--sombra);
    overflow: hidden;
    border: 1px solid var(--borde);
}

/* AJUSTE CLAVE: Aplicamos el color azul a CUALQUIER tabla en estas secciones */
.table-responsive table, 
.panel-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
}

/* El encabezado AZUL que querías (como en tu Imagen 1) */
.table-responsive table thead th,
.panel-tabla table th {
    background: var(--azul) !important; /* Forzamos tu azul del inicio */
    color: white !important;           /* Texto blanco */
    padding: 15px 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    border: none;
    text-align: center;
}

/* Filas con espacio y bordes finos */
.table-responsive table td,
.panel-tabla table td {
    padding: 16px 10px;
    border-bottom: 1px solid var(--borde);
    color: var(--oscuro);
    text-align: center;
    font-size: 0.95rem;
}

/* Nombre del equipo: Alineado a la izquierda y en azul */
.table-responsive table td:nth-child(2),
.panel-tabla table td:nth-child(2) {
    text-align: left;
    font-weight: 600;
    color: var(--azul);
    padding-left: 20px;
}

/* Columna de Puntos: Resaltado celeste sutil */
.table-responsive table td:last-child,
.panel-tabla table td:last-child {
    font-weight: 800;
    color: var(--azul);
    background-color: rgba(13, 71, 161, 0.05);
}

/* Filas intercaladas para leer mejor */
.table-responsive table tbody tr:nth-child(even),
.panel-tabla table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Botones de Series (Píldoras) */
.tab-btn {
    padding: 10px 22px;
    border: 1px solid var(--borde);
    background: white;
    color: var(--azul);
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: var(--azul);
    color: white;
    box-shadow: 0 8px 15px rgba(13, 71, 161, 0.2);
}

/* 1. Nombres siempre en Mayúsculas */
.table-responsive table td:nth-child(2) {
    text-transform: uppercase;
    font-weight: 600;
    color: #1a237e; /* Un azul muy oscuro para los nombres */
}

/* 2. Aplicando degradado de azules (Opción A) */

/* 1er Lugar */
.table-responsive tbody tr:nth-child(1) {
    background-color: #bbdefb !important; 
    border-left: 5px solid #0d47a1;
}

/* 2do Lugar */
.table-responsive tbody tr:nth-child(2) {
    background-color: #d1e9ff !important;
}

/* 3er Lugar */
.table-responsive tbody tr:nth-child(3) {
    background-color: #e3f2fd !important;
}

/* 4to y 5to Lugar */
.table-responsive tbody tr:nth-child(4),
.table-responsive tbody tr:nth-child(5) {
    background-color: #f1f8fe !important;
}




/* RESPONSIVE */

@media (max-width: 980px){
  .hero-grid,
  .news-layout,
  .live-grid,
  .results-grid,
  .sponsor-grid,
  .contact-box{
    grid-template-columns:1fr;
  }
}

@media (max-width: 860px){
  .menu-toggle{
    display:block;
    color:var(--azul);
    cursor:pointer;
  }

  .nav{
    display:none;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    background:#fff;
    padding:16px;
    border-bottom:1px solid var(--borde);
    flex-direction:column;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }

  .nav.open{
    display:flex;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .section{
    padding:40px 0;
  }

  .container{
    width:min(100% - 20px, 1120px);
  }

  .table-block h2{
    font-size:1.15rem;
  }

  .series-tabs{
    gap:8px;
    margin:14px 0 16px;
  }

  .tab-btn{
    padding:9px 12px;
    font-size:.82rem;
  }

  .table-responsive{
    border-radius:10px;
  }

  table{
    min-width:640px;
  }

  th,td{
    padding:9px 8px;
    font-size:.82rem;
  }

  td:nth-child(2),
  th:nth-child(2){
    min-width:150px;
  }
}

@media (max-width: 420px){
  .tab-btn{
    padding:8px 10px;
    font-size:.78rem;
  }

  th,td{
    padding:8px 7px;
    font-size:.76rem;
  }

  table{
    min-width:600px;
  }

  td:nth-child(2),
  th:nth-child(2){
    min-width:140px;
  }
}
.titulo-noticia{
font-weight:700;
font-style:italic;
font-size:38px;
color:#0b1f3a;
line-height:1.3;
margin-bottom:20px;
}

/* ============================================================
   SECCIÓN AUSPICIADORES (Logos Grandes y Azules)
   ============================================================ */

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.sponsor-card {
  display: flex;
  height: 150px; /* Altura fija para que todos sean iguales */
  background: #ffffff;
  border-radius: var(--radio-moderno); 
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-premium);
  transition: var(--transicion);
  cursor: pointer;
  overflow: hidden; /* Esto es clave para que el logo llegue hasta el borde */
  padding: 0; /* QUITAMOS EL MARGEN INTERNO */
}

.sponsor-card a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.sponsor-card img {
  width: 100%; /* El logo intenta ocupar todo el ancho */
  height: 100%; /* El logo intenta ocupar todo el alto */
  object-fit: cover; /* ¡IMPORTANTE! Esto hace que la imagen llene el cuadro sin dejar espacios blancos */
  filter: none; /* Quitamos el efecto gris, ahora se ve siempre a color */
  transition: transform 0.3s ease;
}

/* === EFECTO HOVER EN AZUL === */
.sponsor-card:hover {
  transform: translateY(-8px);
  border-color: var(--azul); /* Cambiamos a azul al seleccionar */
  box-shadow: 0 15px 35px rgba(13, 71, 161, 0.2); /* Sombra azulada */
}

.sponsor-card:hover img {
  transform: scale(1.05); /* Un zoom muy sutil al pasar el mouse */
}

/* Nueva clase para logos que deben verse completos y no cortados */
.logo-fit img {
  object-fit: contain !important; /* Muestra el logo completo */
  padding: 10px; /* Le da un pequeño margen para que no toque los bordes */
  background: #ffffff; /* Asegura fondo blanco */
}


/* cuidao*/
.news-layout-auto {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Relación de tamaño */
    gap: 30px;
    margin-top: 20px;
}

.img-featured {
    width: 100%;
    height: 400px; 
    object-fit: cover;
    border-radius: 12px;
}

.mini-cards-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Para que en el celular se vea una debajo de otra */
@media (max-width: 768px) {
    .news-layout-auto {
        grid-template-columns: 1fr;
    }
}


.contact-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; 
    justify-content: center; 
    margin-top: 30px;
}


.btn-social {
    background-color: white; 
    color: var(--azul); 
    border: 1px solid #ddd; 
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 8px; 
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-social i {
    margin-right: 10px;
    font-size: 1.3rem; 
}


#icon-facebook { color: #1877F2; } 
#icon-youtube { color: #FF0000; }  
#icon-instagram { color: #E4405F; } 
#icon-whatsapp { color: #25D366; }  


.btn-social:hover {
    border-color: var(--azul); 
    background-color: #f9f9f9; 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

/* paneles del fixture-reglamento-canchas*/
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px; 
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: left; 
    display: flex; 
    align-items: center;
    min-width: 180px; 
}

.stat-card:hover {
    background: var(--verde);
    transform: translateY(-2px); 
}

.stat-card a {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    color: inherit;
}

.stat-card i {
    font-size: 1.2rem; 
    margin-bottom: 0; 
    margin-right: 1px; 
    color: white;
}

.stat-card strong {
    display: flex;          
    align-items: center;    
    gap: 10px;              
    font-size: 0.95rem;
    margin-bottom: 4px;     
    
}

.stat-card span {
    display: block;
    font-size: 0.8rem;
    padding-left: 30px;     
    opacity: 0.8;
}

/* PANELES 
.hero-carousel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 30px;
  color: white;
  max-width: 400px;
  min-height: 380px;
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: none;
  animation: fadeEffect 0.8s ease;
}

.carousel-item.active {
  display: block;
}

@keyframes fadeEffect {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.btn-primary-carousel {
  display: block;
  background: #00ff88;
  color: #052814;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 20px;
}

.badge-news { background: #3498db; color: white; padding: 5px 12px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; display: inline-block; margin-bottom: 15px; text-transform: uppercase; }

.carousel-dots {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
}

.dot {
  height: 8px; width: 8px;
  margin: 0 5px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;
}

.dot.active { background-color: white; width: 20px; border-radius: 10px; } */


.hero-carousel {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 30px;
    color: white;
    overflow: hidden;
    min-height: 380px;
}


.carousel-item {
    display: none; 
    animation: fadeIn 0.8s ease;
}

.carousel-item.active {
    display: block; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.carousel-dots {
    text-align: center;
    margin-top: 20px;
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
}

.dot {
    height: 8px; width: 8px;
    margin: 0 5px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background-color: white;
    width: 20px;
    border-radius: 10px;
}

.btn-primary-carousel {
    display: block;
    background: #00ff88;
    color: #052814;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 20px;
}

.badge-news { 
    background: #3498db; color: white; padding: 5px 12px; 
    border-radius: 50px; font-size: 0.7rem; font-weight: 700; 
    display: inline-block; margin-bottom: 15px; text-transform: uppercase; 
}

/* TABLAS DE RESULTADOS

.main-results-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    margin-top: 20px;
    align-items: start;
}

.result-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-left: 4px solid #00ff88;
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}
*/

/* carrusel 
.table-carousel-container {
    background: rgba(0, 70, 174, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden; 
    min-height: 380px;
}

.table-item {
    display: none; 
}

.table-item.active {
    display: block; 
    animation: fadeIn 0.5s ease;
}


.table-item table {
    width: 100%;
    border-collapse: collapse;
}

.table-item th { text-align: left; font-size: 0.8rem; padding: 10px; color: #0046ae; border-bottom: 2px solid #00ff88; }
.table-item td { padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.9rem; }


@media (max-width: 768px) {
    .main-results-layout { grid-template-columns: 1fr; }
}
*/

/* --- CONFIGURACIÓN DE COLUMNAS --- */
.contenedor-deportivo {
    display: grid;
    grid-template-columns: 1fr 350px; 
    gap: 25px;
    align-items: start;
    width: 100%;
    margin-top: 20px;
}
/* --- TARJETAS IZQUIERDA (HORIZONTALES) --- */
.tarjeta-partido {
    background: #fff;
    border-radius: 10px;
    padding: 15px 25px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 5px solid #00ff88;
}

.tarjeta-partido .info-serie {
    font-size: 0.75rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.marcador-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nombre-equipo {
    flex: 1;
    font-weight: 700;
    font-size: 1.1rem;
}

.goles-centro {
    background: #f0f4f8;
    color: #0046ae;
    padding: 5px 20px;
    border-radius: 8px;
    font-weight: 900;
    margin: 0 15px;
    min-width: 70px;
    text-align: center;
}

/* --- PANEL DERECHO (ALARGADO) --- */
.panel-tabla {
    background: #fff;
    border-radius: 15px;
    padding: 20px 10px;
    min-height: 450px; /* La hace ver alta */
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
}

.item-carrusel { 
    display: none; 
    width: 100%; 
    animation: fadeIn 0.4s ease;
}

.item-carrusel.active { display: block; }

.panel-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem; /* Letra más pequeña para que quepa en el ancho */
}

.panel-tabla th { 
    text-align: left; 
    color: #0046ae; 
    border-bottom: 2px solid #00ff88; 
    padding-bottom: 8px;
}

.panel-tabla td { padding: 12px 5px; border-bottom: 1px solid #f9f9f9; }

/* Responsive */
@media (max-width: 850px) {
    .contenedor-deportivo { grid-template-columns: 1fr; }
}


/*OJOJOJOJOJ*/

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.result-box {
    background: white;
    border-radius: 20px;
    padding: 30px;
    min-height: 200px; /* Alto fijo para que todas sean iguales */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Animación suave para el cambio de slides */
.item-carrusel-tabla {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.carrusel-manual-container { position: relative; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.tab-slide-manual { display: none; animation: fadeIn 0.5s; }
.tab-slide-manual.active { display: block; }

.titulo-serie-mini { color: #1a3a8a; border-left: 4px solid #00d1b2; padding-left: 10px; margin-bottom: 15px; font-family: 'Oswald', sans-serif; }
.tabla-mini { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-mini th { text-align: left; color: #999; font-size: 0.7rem; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.tabla-mini td { padding: 8px 0; border-bottom: 1px solid #f8f8f8; font-weight: 600; text-transform: uppercase; }
.tabla-mini td:first-child { color: #00d1b2; width: 35px; }
.tabla-mini td:last-child { text-align: right; color: #1a3a8a; font-weight: 800; }

.carrusel-dots-manual { text-align: center; margin-top: 15px; }
.dot-m { height: 8px; width: 8px; background: #bbb; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; transition: 0.3s; }
.dot-m.active { background: #00d1b2; width: 20px; border-radius: 4px; }



/* ============================================================
   AJUSTES PRO FDL 2026
   Sin tocar la lógica de resultados, tablas, noticias ni sancionados
   ============================================================ */

.topbar{
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.brand-mark{
  border:1px solid rgba(255,255,255,.12);
}

.hero-grid{
  align-items:center;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.hero h1{
  text-shadow:0 14px 34px rgba(0,0,0,.24);
  max-width:12ch;
}

.hero p{
  max-width:58ch;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}

.stat-card{
  min-width:0;
  min-height:88px;
  border-radius:18px;
  padding:16px 18px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 12px 30px rgba(3,8,20,.16);
  backdrop-filter:blur(10px);
}

.stat-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.18);
}

.stat-card a{
  width:100%;
}

.stat-card strong{
  font-size:.98rem;
  line-height:1.25;
}

.stat-card span{
  font-size:.82rem;
  line-height:1.35;
  opacity:.92;
}

.stat-highlight{
  background:linear-gradient(135deg, rgba(20,184,106,.30), rgba(13,71,161,.32));
  border-color:rgba(167,243,208,.35);
}

.stat-highlight:hover{
  background:linear-gradient(135deg, rgba(20,184,106,.38), rgba(13,71,161,.40));
}

.hero-carousel{
  box-shadow:0 20px 45px rgba(3,8,20,.18);
}

.btn-primary-carousel{
  box-shadow:0 12px 24px rgba(0,255,136,.18);
}

.section{
  padding:64px 0;
}

.section h2{
  color:var(--azul);
}

#transmision .section-head h2,
.dark-section h2,
.dark-section .section-kicker{
  color:#fff;
}

.results-layout > div > h3{
  letter-spacing:.2px;
}

.mini-sancionados-box{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:22px;
  box-shadow:var(--sombra-premium);
  padding:10px 22px;
}

.mini-sancionados-box > div:last-child{
  border-bottom:none !important;
}

.contact-box{
  border-radius:24px;
}

.contact-actions .btn{
  min-width:145px;
}

.footer{
  margin-top:0;
}

.footer-inner{
  align-items:center;
}

@media (max-width: 980px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:24px;
    padding:56px 0 48px;
  }

  .hero h1{
    max-width:none;
  }

  .results-layout{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 768px){
  .topbar-inner{
    min-height:72px;
  }

  .brand-title{
    font-size:1.02rem;
  }

  .brand-subtitle{
    font-size:.8rem;
  }

  .hero h1{
    font-size:clamp(2rem,10vw,3rem);
    line-height:1.02;
  }

  .hero p{
    font-size:.98rem;
  }

  .hero-stats{
    grid-template-columns:1fr;
    gap:12px;
  }

  .stat-card{
    min-height:auto;
  }

  .stat-card span{
    padding-left:0;
  }

  .video-placeholder iframe{
    height:240px !important;
  }

  .contact-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .section{
    padding:48px 0;
  }

  .results-layout{
    gap:18px !important;
  }

  .mini-sancionados-box{
    padding:8px 16px;
  }

  .sponsor-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }

  .sponsor-card{
    height:120px;
  }
}

@media (max-width: 420px){
  .container{
    width:min(100% - 16px, 1120px);
  }

  .hero{
    overflow:hidden;
  }

  .hero-grid{
    padding:42px 0 38px;
  }

  .hero h1{
    font-size:1.9rem;
  }

  .brand{
    gap:10px;
  }

  .brand-mark{
    width:42px;
    height:42px;
    border-radius:14px;
    font-size:1.05rem;
  }

  .sponsor-grid{
    grid-template-columns:1fr 1fr;
  }
}
/* =========================
   NOTICIAS DINÁMICAS HOME
========================= */

#contenedor-noticias{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.noticia-card{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}

.noticia-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(0,0,0,0.12);
}

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

.contenido-noticia{
  padding:18px;
}

.contenido-noticia h3{
  margin:12px 0 10px;
  font-size:1.15rem;
  line-height:1.3;
  color:#0f172a;
}

.contenido-noticia p{
  margin:0;
  color:#475569;
  line-height:1.55;
  font-size:.95rem;
}

.btn-leer{
  display:inline-block;
  margin-top:14px;
  color:#114cad;
  font-weight:800;
  text-decoration:none;
}

.btn-leer:hover{
  text-decoration:underline;
}