@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: #00cf34; --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; } }     
            
        /* Contenedor Principal */
        .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: #00cf34; transform: scale(1.02); }
        .play-circle { background: #00cf34; 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: #00cf34; 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: #00cf34;  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; }

/* MENU */   
:root { --whinsho-green: #00cf34; --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: var(--text-gray); 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: #00cf34; color: var(--white); }
/* 2. Segundo elemento */
.submenu li:nth-child(2) a:hover {  background-color: #00cf34; color: var(--white); }
/* 3. Tercer elemento */
.submenu li:nth-child(3) a:hover {  background-color: #00cf34; color: var(--white); }
/* 4. Cuarto elemento */
.submenu li:nth-child(4) a:hover {  background-color: #00cf34; color: var(--white); }
/* 5. Quinto elemento */
.submenu li:nth-child(5) a:hover {  background-color: #00cf34; color: var(--white); }
/* 6. Sexto elemento */
.submenu li:nth-child(6) a:hover {  background-color: #00cf34; color: var(--white); }
/* 7. Septimo elemento */
.submenu li:nth-child(7) a:hover { background-color: #00cf34; 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: #00cf34; 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); }   }        


/* ==================
   NOTICIAS LOCALES
   ================== */    
.locales-full-section { background-color: #ffffff; padding: 40px 0; font-family: 'Inter', sans-serif; }
.container-locales-wide { max-width: 1200px; margin: auto; padding: 0 15px; display: flex; flex-direction: column;  gap: 50px; }

/* Distribución inferior: Sidebar (Izquierda) + Noticias (Derecha) */
.bottom-layout { display: flex; gap: 40px; align-items: start;}


/* =========================
   NOTICIA GRANDE SUPERIOR 
   ========================= */
.noticia-principal-top { width: 100%;}
.mini-card-link-main { text-decoration: none; color: inherit; display: block; background-color: transparent; padding: 20px; border-radius: 24px; box-sizing: border-box; transition: background-color 0.3s ease; }
.mini-card-link-main:hover { background-color: rgba(0, 0, 0, 0.02);}
.mini-card-link-main:hover .img-wrap-main img { transform: scale(1.04); }
.main-large-card { display: flex; flex-direction: row; gap: 50px; align-items: center;  background: transparent; }
.img-wrap-main { flex: 1.3; height: 480px; border-radius: 20px; overflow: hidden; animation: entrarIzquierda 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.img-wrap-main img { width: 100%;  height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.info-main { flex: 1; display: flex; flex-direction: column; }
.cat-main { color: #00cf34; font-size: 15px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; animation: entrarDerecha 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards; opacity: 0; }
.info-main h4 { font-size: 36px; font-weight: 900; color: #1a1a1a; line-height: 1.2; margin: 0 0 14px 0; text-transform: uppercase; transition: color 0.3s ease;   animation: entrarDerecha 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;  opacity: 0; }

/* EFECTO HOVER: Cuando se pasa el mouse sobre el enlace contenedor, el título cambia a verde */
.mini-card-link-main:hover .info-main h4 { color: #00cf34;}
.news-date-main {  color: #888; font-size: 13px;  animation: entrarAbajo 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards; opacity: 0; }


/* ==========================================================================
   SIDEBAR IZQUIERDO (LO MÁS VISTO Y PUBLICIDAD)
   ========================================================================== */
.sidebar-left { flex: 1; max-width: 280px; animation: entrarAbajo 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards; opacity: 0; }
.sidebar-title { font-size: 16px; font-weight: 800; margin-bottom: 25px; color: #1a1a1a; border-bottom: 3px solid #00cf34;  display: inline-block;  padding-bottom: 3px;}
.trending-list { list-style: none; padding: 0; margin: 0; }
.trending-list li { margin-bottom: 16px; border-bottom: 1px solid #eaeaea; padding-bottom: 12px; }
.trending-list li a { text-decoration: none; color: #1a1a1a; font-size: 13px; font-weight: 700; display: flex; gap: 10px; line-height: 1.4; text-transform: uppercase; transition: color 0.3s ease; }
.trending-list li span { color: #333; font-weight: 900; }

.trending-list li a:hover,
.trending-list li a:hover span { color: #00cf34; }

/* Banner de Publicidad */
.ad-placeholder { width: 100%;  margin-top: 30px; border-radius: 12px; overflow: hidden; border: 1px solid #ddd; display: block; }
.ad-placeholder a { width: 100%; display: block; line-height: 0; }
.ad-placeholder img { width: 100%; height: auto !important; display: block; object-fit: contain;}


/* ==========================================================================
   SECCIÓN DE NOTICIAS PEQUEÑAS (A LA DERECHA DEL SIDEBAR)
   ========================================================================== */
.news-main-grid { flex: 3; animation: entrarDerecha 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards; opacity: 0;}
.main-tag { font-size: 18px; font-weight: 800; margin-bottom: 25px; border-bottom: 3px solid #00cf34; display: inline-block; padding-bottom: 3px;}

.grid-5-noticias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 24px; align-items: start;}
.mini-card-link { text-decoration: none; color: inherit; display: block;  background-color: transparent; padding: 12px; border-radius: 16px; box-sizing: border-box; transition: background-color 0.3s ease; }

/* EFECTO HOVER: Fondo gris al 2% y activador de zoom en noticias pequeñas */
.mini-card-link:hover { background-color: rgba(0, 0, 0, 0.02);}
.mini-card-link:hover .mini-card .img-wrap img { transform: scale(1.05); }
.mini-card { display: flex; flex-direction: column; background: transparent; }
.mini-card .info { padding: 0; display: flex; flex-direction: column;}
.mini-card .cat { color: #00cf34; font-size: 12px; font-weight: 800; text-transform: uppercase;  margin-bottom: 4px;}
.mini-card h4 { font-size: 13px; font-weight: 800; margin: 0 0 4px 0; line-height: 1.35; color: #1a1a1a; text-transform: uppercase; transition: color 0.3s ease; }

/* El hover activa el color verde */
.mini-card-link:hover .mini-card h4 { color: #00cf34; }
.mini-card .news-date { color: #888; font-size: 11px; margin-bottom: 12px; }
.mini-card .img-wrap { width: 100%; height: 135px; border-radius: 12px; overflow: hidden;}
.mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }

/* ==========================================================================
   EFECTOS DE ENTRADA DINÁMICOS (KEYFRAMES)
   ========================================================================== */
@keyframes entrarIzquierda { 0% { opacity: 0; transform: translateX(-60px);}  100% { opacity: 1; transform: translateX(0); }}
@keyframes entrarDerecha   { 0% { opacity: 0; transform: translateX(60px); }  100% { opacity: 1; transform: translateX(0); }}
@keyframes entrarAbajo     { 0% { opacity: 0; transform: translateY(40px); }  100% { opacity: 1; transform: translateY(0); }}

/* ==========================================================================
   RESPONSIVO (MÓVIL Y TABLET)
   ========================================================================== */
@media (max-width: 992px) {
        .bottom-layout { flex-direction: column; }
        .sidebar-left { max-width: 100%; width: 100%; order: 2; }
        .news-main-grid { order: 1; width: 100%; }
        .main-large-card { gap: 30px; }
        .img-wrap-main { height: 350px; }
        .info-main h4 { font-size: 28px; }}

@media (max-width: 768px) {
        .main-large-card { flex-direction: column; align-items: start; gap: 20px; }
        .img-wrap-main { width: 100%; height: 260px; }
        .info-main h4 { font-size: 24px; }
        .grid-5-noticias { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 480px) {
        .grid-5-noticias { grid-template-columns: 1fr; } }


/* ===================================
   SECCIÓN INTENCIÓN DE VOTOS INDEX
   ==================================== */

.electoral-section .slider-wrapper{ height:auto !important;  display:block !important; } 
:root {--bg-dark: #151c30; --card-bg: #151c30; --line: rgba(255, 255, 255, .08); --green: #00cf34; --muted: #b0b8c9; --white: #ffffff; }

* { box-sizing: border-box;  }

/* Añadimos perspectiva para que los efectos tridimensionales se noten al máximo */
.electoral-section { background: var(--bg-dark); padding: 0; font-family: 'Inter', sans-serif;  color: var(--white); width: 100%; perspective: 1000px; }
.main-layout-container { display: flex;  max-width: 100%;  margin: 0 auto;  border-bottom: 1px solid var(--line);  background: var(--bg-dark);  }

/* PANEL IZQUIERDO */
.header-sidebar { flex: 0 0 180px;  padding: 10px 20px;  background: var(--bg-dark);  border-right: 1px solid var(--line);   display: flex;  align-items: center;  }    
.region-title { animation: entrarDesdeIzquierda 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.region-title .label-top { font-size: .8rem;  color: var(--muted);  letter-spacing: 1px;   display: block;  }
.region-title .location {  font-size: 1.5rem; font-weight: 900; color: var(--white); display: block; line-height: 1.1; }
.update-tag {   font-size: 8px; margin-top: 5px;  }
.update-tag .value {  color: var(--green);  font-weight: bold; }

/* SLIDER */
.slider-wrapper { flex: 1;  position: relative;  padding: 0 42px;  overflow: hidden;   background: var(--bg-dark);  }
.slider-mask { width: 100%;  overflow: hidden; }
.slides-container {  display: flex;  transition: transform .5s cubic-bezier(.4, 0, .2, 1);  }
.slide-group {  min-width: 100%;  padding: 0;  margin: 0;}

/* CANDIDATOS */
.candidates-grid {  display: flex;  gap: 0;   width: 100%;  margin: 0;  padding: 0; }

/* TARJETAS (El fondo aparece con un despliegue y desenfoque elegante) */
.card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px;  padding: 12px 18px;  background: var(--card-bg);  border-right: 1px solid var(--line);  position: relative;  overflow: hidden; transition: background 0.3s; opacity: 0;  animation: emergerFondo 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: transform, opacity;}
.card:last-child {   border-right: none; }
.card:hover { background: #1e273f;  box-shadow: inset 0 0 0 2px var(--green); z-index: 2; }

/* NÚMERO */
.rank { position: absolute;  top: 5px;  left: 5px;   width: 18px;   height: 18px;   background: #2e3445;  border-radius: 50%;  font-size: 9px;  display: flex;  align-items: center;   justify-content: center;  font-weight: bold; color: var(--white); }

/* FOTO (Emerge con gran escala tridimensional y enfoque nítido) */
.photo-container{  width:90px; height:90px;  position:relative;  flex-shrink:0;  display:flex;   align-items:center;   justify-content:center;   overflow:visible; opacity: 0;  animation: emergerFoto 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;  will-change: transform, opacity, filter;}
.photo-ring{  width:100%;  height:100%; border-radius:50%; border:4px solid #d9dde8;  overflow:hidden;  position:relative;  z-index:1; }
.photo-ring img { width: 100%; height: 100%;   object-fit: cover; }

/* LOGO PARTIDO (Efecto caída y rotación pronunciada desde la esquina) */
.party-logo{ position:absolute; right:-8px; bottom:-8px; width:35px; height:35px; background:#fff;  border-radius:50%;  padding:2px;  z-index:999;  overflow:hidden;  box-shadow:0 2px 8px rgba(0,0,0,.45); opacity: 0;  animation: caerEsquina 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: transform, opacity; }
.party-logo img { width: 100%; height: 100%; object-fit: contain;  border-radius: 50%; }

/* DATOS (Desplazamiento largo y fluido desde la derecha hacia el centro) */
.card-info {   min-width: 0;  flex: 1; }
.card-info .name, 
.card-info .party-name {opacity: 0; animation: entrarDesdeDerecha 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;      will-change: transform, opacity;
}
.card-info .name {  font-size: 13px;  font-weight: 700;  color: var(--white);  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; }
.card-info .party-name {  font-size: 10px;  color: var(--muted);  white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; }

/* PORCENTAJE (Sube desde muy abajo con impacto) */
.card-info .percentage { font-size: 1.8rem; line-height: 1;  font-weight: 800; color: var(--green); opacity: 0; display: inline-block;  animation: entrarDesdeAbajo 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;  will-change: transform, opacity;}

/* FLECHAS */
.nav-btncandidatos { position: absolute;  top: 0;  width: 42px; height: 100%; border: none;  background: rgba(255, 255, 255, .03); color: var(--white); z-index: 20; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .3s; }

.nav-btn:hover {  background: rgba(0, 207, 52, .15); color: var(--green); }
.prev { left: 0; border-right: 1px solid var(--line); }
.next { right: 0; border-left: 1px solid var(--line); }

/* ==========================================================================
LÍNEA DE TIEMPO ESCALONADA (Secuencia fluida y marcada por elemento)
========================================================================== */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(1) .photo-container { animation-delay: 0.15s; }
.card:nth-child(1) .name { animation-delay: 0.25s; }
.card:nth-child(1) .party-name { animation-delay: 0.3s; }
.card:nth-child(1) .percentage { animation-delay: 0.35s; }
.card:nth-child(1) .party-logo { animation-delay: 0.45s; }

.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(2) .photo-container { animation-delay: 0.3s; }
.card:nth-child(2) .name { animation-delay: 0.4s; }
.card:nth-child(2) .party-name { animation-delay: 0.45s; }
.card:nth-child(2) .percentage { animation-delay: 0.5s; }
.card:nth-child(2) .party-logo { animation-delay: 0.6s; }

.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(3) .photo-container { animation-delay: 0.45s; }
.card:nth-child(3) .name { animation-delay: 0.55s; }
.card:nth-child(3) .party-name { animation-delay: 0.6s; }
.card:nth-child(3) .percentage { animation-delay: 0.65s; }
.card:nth-child(3) .party-logo { animation-delay: 0.75s; }

.card:nth-child(4) { animation-delay: 0.45s; }
.card:nth-child(4) .photo-container { animation-delay: 0.6s; }
.card:nth-child(4) .name { animation-delay: 0.7s; }
.card:nth-child(4) .party-name { animation-delay: 0.75s; }
.card:nth-child(4) .percentage { animation-delay: 0.8s; }
.card:nth-child(4) .party-logo { animation-delay: 0.9s; }

.card:nth-child(5) { animation-delay: 0.6s; }
.card:nth-child(5) .photo-container { animation-delay: 0.75s; }
.card:nth-child(5) .name { animation-delay: 0.85s; }
.card:nth-child(5) .party-name { animation-delay: 0.9s; }
.card:nth-child(5) .percentage { animation-delay: 0.95s; }
.card:nth-child(5) .party-logo { animation-delay: 1.05s; }

/* ==========================================================================
   KEYFRAMES OPTIMIZADOS (Mayor distancia y transformaciones dramáticas)
   ========================================================================== */
@keyframes emergerFondo {
    0% { opacity: 0; transform: scale(0.9) translateZ(-60px); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1) translateZ(0); filter: blur(0); }
}

@keyframes emergerFoto {
    0% { opacity: 0; transform: scale(0.3) translateZ(-100px); }
    100% { opacity: 1; transform: scale(1) translateZ(0); }
}

@keyframes caerEsquina {
    0% { opacity: 0; transform: translate(40px, -40px) rotate(90deg) scale(0.5); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes entrarDesdeIzquierda {
    0% { opacity: 0; transform: translateX(-80px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes entrarDesdeDerecha {
    0% { opacity: 0; transform: translateX(60px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes entrarDesdeAbajo {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE CELULAR OPTIMIZADO PARA ALTURA */
@media (max-width: 768px) {
        .main-layout-container { flex-direction: column; }    
        .header-sidebar { width: 100%;  border-right: none; border-bottom: 1px solid var(--line);  justify-content: center;  text-align: center;  padding: 12px;  }

        /* slides-container */
        .candidates-grid { flex-direction: column; }
        .card{  width:100%; border-right:none;  border-bottom:1px solid var(--line);  padding:12px 20px;  display:flex;  align-items:center;  gap:14px;  position:relative;  justify-content:space-between; }

        /* PORCENTAJE A LA DERECHA EN CELULAR */
        .card-info{ flex:1; display:flex; flex-direction:column;  justify-content:center;  margin-right:15px; }
        .card-info .percentage{  position:static; right:20px;  top:50%;  text-align:right;  transform:none;  margin-left:auto;  font-size:1.4rem;  white-space:nowrap; }
        .card-info{ margin-top: 0; text-align: left; }
            
        /* Foto más pequeña en móvil para compactar */
        .photo-container { width: 60px; height: 60px; }
        .party-logo {width: 28px; height: 28px; right: -3px; bottom: -3px;}
        .card-info .name { font-size: 12px; }
        .nav-btn {  height: 35px;   width: 35px; top: 50%;  transform: translateY(-50%);  border-radius: 50%; }}
    
/* ============================
   SLIDER DEPORTES INDEX (FIX DE CARGA / SIN SALTO)
   ============================ */

.banner-mundial { display: block; width: 100%; max-width: 1200px; height: 140px;   margin: 10px auto 0 auto !important; overflow: hidden; position: relative; transition: transform .3s ease; text-decoration: none;  background-color: #f0f0f0; box-sizing: border-box;  min-height: 140px; }
.banner-mundial:hover { transform: scale(1.01); }
.banner-deportes { display: flex; width: 400%; height: 140px;  animation: deslizarCuatro 20s infinite ease-in-out; will-change: transform;}

/* FORZAMOS DIMENSIONES EXACTAS EN LOS ENLACES */
.banner-deportes a { display: block; width: 25%; height: 140px; flex-shrink: 0; box-sizing: border-box;}
.banner-deportes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-mundial:hover .banner-deportes { animation-play-state: paused; }

@keyframes deslizarCuatro {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-25%); }
  50%, 70% { transform: translateX(-50%); }
  75%, 95% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

/* ============================
   REGLAS DE ACOPLAMIENTO CON NOTICIAS
   ============================ */
.ultimas-section { margin-top: 0 !important; padding-top: 10px !important;}
.ultimas-title { margin-top: 0 !important;}

/* ============================
   AJUSTE PARA MÓVILES
   ============================ */
@media (max-width: 576px) {
  .banner-mundial {  height: 90px; min-height: 90px; width: 100% !important; margin: 5px 0 0 0 !important; }
  .banner-deportes { height: 90px;}  
  .banner-deportes a { height: 90px;}
  .banner-deportes img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
}


/* ============================
   ÚLTIMAS NOTICIAS INDEX
   ============================ */

:root { --accent-green: #00cf34; --dark-blue: #0d1321;  --gray-text: #555; --fb-blue: #0866FF; --tt-red: #ff2a54;}
.ultimas-section { max-width: 1200px; margin: 20px auto; padding: 0 20px; background: #fff;}
.ultimas-title { font-size: 2rem; font-weight: 700; border-bottom: 4px solid var(--accent-green); display: inline-block;  padding-bottom: 5px;  margin-bottom: 20px;  color: var(--dark-blue); animation: aparecerDesdeIzquierda 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;}

/* --- LAYOUT DEL CONTENEDOR --- */
.main-content-wrapper { display: grid; grid-template-columns: 1fr 340px; gap: 30px;  margin-bottom: 40px; align-items: start;}
.ultimas-grid-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.ultimas-card { display: flex; flex-direction: column; text-decoration: none;  background: #fff;  border-radius: 12px; overflow: hidden; color: inherit; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, background-color 0.3s ease;  opacity: 0; }
.ultimas-card:hover { transform: translateY(-5px); }
.ultimas-card:hover h3 { color: var(--accent-green);}
.ultimas-card img { width: 100%; height: 300px; object-fit: cover; border-bottom: 3px solid var(--accent-green); }
.ultimas-card h3 { font-size: 1rem; margin: 12px 10px; line-height: 1.3; color: var(--dark-blue); transition: color 0.3s ease; }

/* --- REGLAS PARA LA NOTICIA GRANDE (DESDE LA IZQUIERDA AL CENTRO) --- */
.ultimas-card.card-large {  grid-column: span 2;  animation: aparecerDesdeIzquierda 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;}
.ultimas-card.card-large h3 { font-size: 1.4rem; margin: 15px 15px 8px 15px;}
.ultimas-card.card-large .card-subtitle { font-size: 0.95rem; padding: 0 15px; margin-bottom: 15px;}
.ultimas-card.card-large .date { padding: 12px 15px;}
.ultimas-card.card-large img { height: 500px; }

/* --- NOTICIAS SECUNDARIAS (ANIMACIÓN EN CASCADA DESDE ABAJO HACIA ARRIBA) --- */
.ultimas-grid-layout .ultimas-card:not(.card-large) { animation: aparecerDesdeAbajo 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;}

/* Retrasos progresivos para las tarjetas pequeñas */
.ultimas-grid-layout .ultimas-card:nth-child(2) { animation-delay: 0.2s; }
.ultimas-grid-layout .ultimas-card:nth-child(3) { animation-delay: 0.3s; }
.ultimas-grid-layout .ultimas-card:nth-child(4) { animation-delay: 0.4s; }
.ultimas-grid-layout .ultimas-card:nth-child(5) { animation-delay: 0.5s; }

.card-subtitle {font-size: 0.85rem; color: var(--gray-text); padding: 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;  overflow: hidden; margin-bottom: 10px;}
.ultimas-card .date { font-size: 11px; color: var(--accent-green); font-weight: 700; padding: 10px; border-top: 1px solid #eee;}

/* --- BARRA LATERAL STICKY (ANIMACIÓN DESDE LA DERECHA HACIA EL CENTRO) --- */
.p-sidebar-right-fb { position: -webkit-sticky;  position: sticky; top: 20px; z-index: 10; width: 340px; display: flex; flex-direction: column; gap: 25px; opacity: 0; animation: aparecerDesdeDerecha 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;}
.social-box-wrapper { width: 100%; background: #ffffff;  border-radius: 20px;  overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.06); border: 1px solid #eef0f2;}
.social-header-title { color: #ffffff; text-align: center; font-size: 1.25rem; font-weight: 700; padding: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;}
.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;}
.fb-iframe-plugin { border: none; width: 100% !important; height: 100% !important; display: block;}

/* --- LO MÁS LEÍDO (APARECE AL FINAL DESDE ABAJO) --- */
.most-read-horizontal { margin-top: 50px; border-top: 2px solid #eee; padding-top: 30px; opacity: 0; animation: aparecerDesdeAbajo 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;}
.most-read-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; color: var(--dark-blue);}
.most-read-grid { display: grid;  grid-template-columns: repeat(3, 1fr); gap: 20px;}
.most-read-card { display: flex; align-items: center; gap: 15px; text-decoration: none; color: inherit; background: #f8f9fa; padding: 15px; border-radius: 8px; transition: 0.3s;}
.most-read-card:hover { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* EFECTO: Cambia el título de lo más leído a verde al pasar el mouse */
.most-read-card:hover h4 { color: var(--accent-green);}
.rank-badge { background: var(--accent-green); color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center;  justify-content: center; font-weight: 900; flex-shrink: 0;}
.most-read-info h4 { font-size: 0.85rem; margin: 0; line-height: 1.3; font-weight: 700;  transition: color 0.3s ease; }

/* ==========================================================================
    EFECTOS DE ENTRADA MULTIDIRECCIONALES (KEYFRAMES)
    ========================================================================== */
@keyframes aparecerDesdeIzquierda { 0% { opacity: 0; transform: translateX(-50px);}
                                  100% { opacity: 1; transform: translateX(0); }}
@keyframes aparecerDesdeDerecha {   0% { opacity: 0; transform: translateX(50px); }
                                  100% { opacity: 1; transform: translateX(0); }}
@keyframes aparecerDesdeAbajo {     0% { opacity: 0; transform: translateY(40px); }
                                  100% { opacity: 1; transform: translateY(0); }}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
.main-content-wrapper { grid-template-columns: 1fr; }
.most-read-grid { grid-template-columns: 1fr; }    
.ultimas-grid-layout { grid-template-columns: 1fr; }    
.ultimas-card.card-large { grid-column: span 1; }    
.ultimas-card img { height: 260px; }
.ultimas-card.card-large img { height: 360px; }
.p-sidebar-right-fb { position: static; margin: 30px auto 0 auto; }
}

/* =====================================================
   SECCIÓN DE NOTICIAS NACIONALES E INTERNACIONALES
   ===================================================== */
.nacionales-seccion-wrapper { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; font-family: Arial, sans-serif;}
.nacionales-contenedor-principal { margin: 30px 0; width: 100%;}
.nacionales-columna { width: 100%;}

/* Estilo común de enlaces */
.nacional-enlace-contenedor { text-decoration: none !important; color: inherit; width: 100%; height: 100%; display: flex;}

/* Metadata de tiempo y autor */
.nacional-tiempo-publicacion { font-size: 12px; color: #727272; margin-top: auto; padding-top: 8px;}

/* ==========================================
   1. NOTICIA PRINCIPAL (ANIMACIÓN DESDE LOS LADOS)
   ========================================== */
.nacionales-bloque-principal { margin-bottom: 35px; background-color: transparent; padding: 20px;  border-radius: 12px; transition: background-color 0.3s ease; }
.nacional-tarjeta-destacada .nacional-enlace-contenedor { flex-direction: row; gap: 30px;}
.nacional-destacada-img { flex: 1.4; border-radius: 6px; overflow: hidden;   animation: entrarDesdeIzquierda 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
.nacional-destacada-img img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; transition: transform 0.3s ease; }
.nacional-destacada-contenido { flex: 1; display: flex; flex-direction: column; justify-content: flex-start;  animation: entrarDesdeDerecha 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;}
.nacional-destacada-contenido h3 { font-size: 36px; font-weight: 700;  line-height: 1.15;  color: #1a1a1a;  margin: 0 0 15px 0; letter-spacing: -0.5px; transition: color 0.3s ease; }
.nacional-destacada-contenido p { font-size: 16px;  color: #444;  line-height: 1.5;  margin: 0 0 15px 0;}

/* [EFECTOS HOVER - TARJETA DESTACADA] */
.nacionales-bloque-principal:hover { background-color: rgba(0, 0, 0, 0.02); }
.nacional-tarjeta-destacada .nacional-enlace-contenedor:hover h3 {  color: #00CF34; }
.nacional-tarjeta-destacada .nacional-enlace-contenedor:hover .nacional-destacada-img img { transform: scale(1.03); }


/* ==========================================
   2. GRID INFERIOR (ANIMACIÓN EN CASCADA DESDE ABAJO)
   ========================================== */
.nacionales-grid-inferior {  display: grid;  grid-template-columns: repeat(4, 1fr); gap: 20px;}
.nacional-tarjeta-secundaria { background-color: transparent; padding: 15px; border-radius: 12px; box-sizing: border-box; display: flex; flex-direction: column; transition: background-color 0.3s ease;  opacity: 0;  animation: entrarDesdeAbajo 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;}

/* RETRASOS ESCALONADOS: Aparecen una tras otra de izquierda a derecha */
.nacionales-grid-inferior .nacional-tarjeta-secundaria:nth-child(1) { animation-delay: 0.2s; }
.nacionales-grid-inferior .nacional-tarjeta-secundaria:nth-child(2) { animation-delay: 0.3s; }
.nacionales-grid-inferior .nacional-tarjeta-secundaria:nth-child(3) { animation-delay: 0.4s; }
.nacionales-grid-inferior .nacional-tarjeta-secundaria:nth-child(4) { animation-delay: 0.5s; }
.nacional-tarjeta-secundaria .nacional-enlace-contenedor { flex-direction: column; }
.nacional-secundaria-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; margin-bottom: 12px;}
.nacional-secundaria-img img { width: 100%; height: 100%; object-fit: cover;  transition: transform 0.3s ease; }
.nacional-secundaria-contenido { display: flex; flex-direction: column;  flex-grow: 1;}
.nacional-categoria-tag { font-size: 13px; font-weight: bold; color: #00CF34; text-transform: capitalize; margin-bottom: 6px;}
.nacional-tarjeta-secundaria h3 { font-size: 16px; font-weight: 700; line-height: 1.3; color: #1a1a1a; margin: 0 0 8px 0; transition: color 0.3s ease; }

/* [EFECTOS HOVER - TARJETAS SECUNDARIAS] */
.nacional-tarjeta-secundaria:hover { background-color: rgba(0, 0, 0, 0.02); }
.nacional-tarjeta-secundaria .nacional-enlace-contenedor:hover h3 { color: #00CF34; }
.nacional-tarjeta-secundaria .nacional-enlace-contenedor:hover .nacional-secundaria-img img { transform: scale(1.05); }


/* =====================================================
   EFECTOS DE MOVIMIENTO MULTIDIRECCIONAL (KEYFRAMES)
   ===================================================== */

@keyframes entrarDesdeIzquierda { 0% { opacity: 0; transform: translateX(-60px); } 100% { opacity: 1; transform: translateX(0); }}
@keyframes entrarDesdeDerecha {   0% { opacity: 0; transform: translateX(60px);  } 100% { opacity: 1; transform: translateX(0); }}
@keyframes entrarDesdeAbajo {     0% { opacity: 0; transform: translateY(40px);  } 100% { opacity: 1; transform: translateY(0); }}


/* ==========================================
   RESPONSIVO (ADAPTACIÓN A MÓVILES)
   ========================================= */
@media (max-width: 950px) { .nacional-tarjeta-destacada .nacional-enlace-contenedor { flex-direction: column; gap: 15px;}
    .nacional-destacada-img img {  min-height: auto; aspect-ratio: 16 / 9; }
    .nacional-destacada-contenido h3 { font-size: 26px; }
    .nacionales-grid-inferior {  grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 550px) {
    .nacionales-grid-inferior { grid-template-columns: 1fr; }}

/* ==========================================
   SECCIÓN NOTICIAS NACIONALES - FONDO GRIS
   ========================================== */
.nacionales-fondo-verde-wrapper { width: 100%; background-color: #f5f5f5; padding: 25px 0;  box-sizing: border-box; font-family: 'Inter', sans-serif;}
.nacionales-bloque-contenedor { width: 100%; max-width: 1300px; margin: 0 auto; background-color: #002d3d;  border-radius: 16px; padding: 20px; box-sizing: border-box; display: grid; grid-template-columns: 1.4fr 1fr 0.8fr;  gap: 20px;}

/* Enlaces */
.nacional-enlace-banner, 
.nacional-enlace-mini { text-decoration: none !important; color: white; display: block;}

/* ==========================================
   COLUMNA 1: NOTICIA PRINCIPAL (BANNER)
   ========================================== */
.nacional-col-principal { width: 100%;}
.nacional-tarjeta-banner { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background-color: #001f2b;}
.nacional-banner-img { position: relative; width: 100%; height: 100%; min-height: 480px;}
.nacional-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block;}

/* Sombreado degradado para legibilidad del texto blanco */
.nacional-banner-img::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0,20,30,0.95) 10%, rgba(0,20,30,0.5) 50%, transparent 100%);}

/* Contenido de texto sobre el banner */
.nacional-banner-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; box-sizing: border-box; z-index: 2;}
.nacional-banner-info h2 { font-size: 28px;    font-weight: 800; line-height: 1.2; margin: 0 0 12px 0; color: #ffffff;}
.nacional-banner-info p { font-size: 14px; line-height: 1.4; color: #d1d5db; margin: 0;}

/* ==========================================
   COLUMNA 2: LISTADO CENTRAL DE NOTICIAS MINI
   ========================================== */
.nacional-col-lista { display: flex; flex-direction: column;}
.nacional-cabecera-lista { color: #8bb3c2; font-size: 12px; font-weight: bold; letter-spacing: 1px;  margin-bottom: 15px;  text-transform: uppercase;}
.nacional-grid-mini { display: flex; flex-direction: column;  gap: 14px; justify-content: space-between;  height: 100%;}
.nacional-tarjeta-mini { width: 100%;}
.nacional-enlace-mini { display: flex; gap: 12px; align-items: center;}
.nacional-mini-img { position: relative;  width: 105px; min-width: 105px;  height: 70px;  border-radius: 8px;  overflow: hidden;}
.nacional-mini-img img { width: 100%; height: 100%; object-fit: cover;}
.nacional-enlace-mini h3 { font-size: 13px; font-weight: 700; line-height: 1.3; margin: 0; color: #ffffff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.nacional-enlace-mini:hover h3 {color: #00CF34;}

/* ==========================================
   ESTILOS DE ETIQUETAS VERDES (RECIENTES)
   ========================================== */
.nacional-etiqueta { position: absolute; top: 12px; left: 12px; background-color: #00A844; color: #ffffff; font-size: 14px; font-weight: 600; padding: 4px 14px; border-radius: 2px; z-index: 5; text-transform: none;}

/* Ajustes específicos para las imágenes miniatura */
.nacional-etiqueta.mini { top: auto;  bottom: 5px; left: 5px;  font-size: 10px;  padding: 2px 6px; width: calc(100% - 10px);  box-sizing: border-box; text-align: center; background-color: rgba(0, 168, 68, 0.95); }

/* ==========================================
   COLUMNA 3: PUBLICIDAD Y SPONSORS
   ========================================== */
.nacional-col-lateral { display: flex; flex-direction: column; gap: 15px;}
.nacional-bloque-gracias { background-color: #ffffff; border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 110px; box-sizing: border-box;}
.nacional-bloque-gracias span { font-size: 10px; color: #666; font-weight: bold; margin-bottom: 6px; display: block;}
.nacional-logo-auspicio img { max-width: 140px; height: auto;}
.nacional-bloque-publicidad { width: 100%; flex-grow: 1; border-radius: 12px; overflow: hidden;}
.nacional-bloque-publicidad img { width: 100%;  height: 100%; object-fit: cover; display: block;}

/* Línea divisoria sutil para las mini noticias */
.nacional-divisor { border: 0; height: 1px; background-color: rgba(255, 255, 255, 0.15); margin: 4px 0; width: 100%;}

/* ==========================================
   RESPONSIVO
   ========================================== */
@media (max-width: 1024px) { .nacionales-bloque-contenedor { grid-template-columns: 1fr 1fr; } .nacional-col-lateral { grid-column: span 2; flex-direction: row;} .nacional-bloque-gracias,  .nacional-bloque-publicidad { flex: 1; height: auto; }}

@media (max-width: 768px) {  .nacionales-bloque-contenedor { grid-template-columns: 1fr; }     .nacional-col-lateral { grid-column: span 1; flex-direction: column;} .nacional-banner-img { min-height: 320px; } .nacional-banner-info h2 {  font-size: 20px; }}



/* ==========================================================================
   SECCIÓN NOTICIAS INTERNACIONALES - EN NOTICIAS NACIONALES E INTERNACIONALES
   ========================================================================== */

.inter-seccion-interes { width: 100%; max-width: 1300px; margin: 40px auto; padding: 0 20px;  box-sizing: border-box; font-family: 'Inter', sans-serif;}

/* Título con la barra verde vertical del lado izquierdo */
.inter-titulo-contenedor { border-left: 4px solid #00CF34; padding-left: 12px; margin-bottom: 25px;}
.inter-main-title { font-size: 38px; font-weight: 800; color: #111111; margin: 0;}

/* Grid de 5 columnas para las noticias */
.inter-grid-noticias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}

/* Tarjeta y Enlace */
.inter-tarjeta { width: 100%;}
.inter-enlace { text-decoration: none !important; display: flex; flex-direction: column; color: #333333; height: 100%;}

/* Números Gigantes en gris */
.inter-numero { font-size: 32px; font-weight: 800;  color: #999999; margin-bottom: 10px; display: block;}

/* Fila de Tags y Horas */
.inter-meta {  display: flex; flex-direction: column;  align-items: flex-start; gap: 4px; font-size: 13px; margin-bottom: 12px;}
.inter-tag { color: #00CF34; font-weight: bold;}
.inter-fecha { color: #666666;}

/* Titulares limpios */
.inter-titulo { font-size: 15px; font-weight: 700; line-height: 1.35; color: #111111; margin: 0 0 15px 0; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 4;  -webkit-box-orient: vertical;  overflow: hidden;}

/* Imagen en la zona inferior con esquinas redondeadas */
.inter-contenedor-img { width: 100%; height: 140px;  border-radius: 12px; overflow: hidden;  margin-top: auto; }
.inter-contenedor-img img { width: 100%;  height: 100%; object-fit: cover;  display: block;  transition: transform 0.3s ease;}

/* Efecto visual al pasar el mouse por encima */
.inter-enlace:hover .inter-contenedor-img img { transform: scale(1.05);}
.inter-enlace:hover .inter-titulo { color: #00CF34;}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) { .inter-grid-noticias {  grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 768px) { .inter-grid-noticias {   grid-template-columns: repeat(2, 1fr); } .inter-main-title { font-size: 28px; }}
@media (max-width: 480px) { .inter-grid-noticias {  grid-template-columns: 1fr; }}


/* ==========================================================================
   SECCIÓN NOTICIAS NACIONALES - EN NOTICIAS LOCAL
   ========================================================================== */

.nac-seccion-interes { width: 100%; max-width: 1300px;  margin: 40px auto; padding: 0 20px; box-sizing: border-box; font-family: 'Inter', sans-serif;}

/* Título con la barra roja vertical del lado izquierdo */
.nac-titulo-contenedor { border-left: 4px solid #00CF34; padding-left: 12px; margin-bottom: 25px;}
.nac-main-title { font-size: 38px; font-weight: 800; color: #111111; margin: 0;}
.nac-grid-noticias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}

/* Tarjeta y Enlace */
.nac-tarjeta { width: 100%;}
.nac-enlace { text-decoration: none !important; display: flex; flex-direction: column; color: #333333; height: 100%; }

/* Números Gigantes en gris */
.nac-numero { font-size: 32px; font-weight: 800; color: #999999; margin-bottom: 10px; display: block;}

/* Fila de Tags y Horas */
.nac-meta { display: flex; flex-direction: column;  align-items: flex-start; gap: 4px; font-size: 13px;  margin-bottom: 12px;}
.nac-tag { color: #00CF34; font-weight: bold;}
.nac-fecha { color: #666666; font-weight: normal;}

/* Titulares limpios */
.nac-titulo { font-size: 15px; font-weight: 700; line-height: 1.35;  color: #111111; margin: 0 0 15px 0; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}

/* Imagen en la zona inferior con esquinas redondeadas */
.nac-contenedor-img { width: 100%; height: 140px; border-radius: 12px; overflow: hidden; margin-top: auto; }
.nac-contenedor-img img {  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;}

/* Efecto visual al pasar el mouse por encima */
.nac-enlace:hover .nac-contenedor-img img { transform: scale(1.05);}
.nac-enlace:hover .nac-titulo { color: #00CF34;}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) { .nac-grid-noticias { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 768px) {  .nac-grid-noticias { grid-template-columns: repeat(2, 1fr); } .nac-main-title { font-size: 28px; }}
@media (max-width: 480px) {  .nac-grid-noticias { grid-template-columns: 1fr; }}



/* SECCIÓN DEPORTES INDEX */
:root { --accent: #00cf34;  --bg-gray: #edeef0;  --text-hover: #f23d00;  --text-main: #1a1a1a;  --text-muted: #555;  --border-light: #ddd;}
.deportes-premium { background-image: url('../imagenes/index/futbol/fondofutbol.svg'); background-size: cover; background-position: center;  background-repeat: no-repeat; background-attachment: scroll;  padding: 30px 15px; font-family: 'Inter', sans-serif; }
.p-container {  max-width: 1200px;   margin: 0 auto; }

.p-layout { display: grid; grid-template-columns: 240px 1fr 300px; gap: 20px; align-items: start; }

/* SIDEBAR IZQUIERDO FLOTANTE */
.p-sidebar-left { position: -webkit-sticky;  position: sticky; top: 20px;  z-index: 10;  max-height: calc(100vh - 40px);  overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.p-sidebar-left::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent !important; }

/* NAVEGACIÓN DEL MENU IZQUIERDO */
.p-nav { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.p-nav-link {  text-decoration: none; color: inherit; }
.p-nav-item {  display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border-radius: 10px; transition: 0.3s; }
.p-nav-item span { font-weight: 700; font-size: 13px; }
.p-icon-bg {  background: white; width: 25px; height: 25px; display: flex;  align-items: center;  justify-content: center;  border-radius: 8px;  flex-shrink: 0; padding: 5px; }
.p-icon-bg img { width: 30px; height: 30px; object-fit: contain; }

/* HOVERS POR LIGA */
.p-nav-item:hover { background: #333; color: white; }
.p-nav-item.lor:hover   { background: #008148; color: white;}
.p-nav-item.l1max:hover { background: #e32d46; color: white;}


/* SECCIÓN DE PUBLICIDAD */
.p-ads-container {  display: flex;  flex-direction: column;  gap: 15px; }
.p-ad-link {  display: block;  border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 4.9;  height: auto; transition: 0.3s;}   
.p-ad-link:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.p-ad-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* COMPONENTE DE TARJETAS (FEED CENTRAL) */
.p-feed { display: flex; flex-direction: column; gap: 30px; min-width: 0; width: 100%; }
.p-feed a { text-decoration: none; color: inherit; display: block; }
.p-card-featured, .p-card-horizontal { transition: transform 0.3s ease, box-shadow 0.3s ease;}
.p-card-featured:hover, .p-card-horizontal:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0,0,0,0.05);  cursor: pointer;}
.p-card-featured:hover .p-hover-title, .p-card-horizontal:hover h3 { color: var(--text-hover);}

/* TARJETA DESTACADA GRANDE (CORREGIDA) */
.p-card-featured { background: #fff;  border-radius: 15px;  overflow: hidden; width: 100%; }
.p-img-featured { border-bottom: 3px solid var(--text-hover); } 

.p-img-featured img {  width: 100%; height: 280px; object-fit: cover; display: block; }

.p-info { padding: 20px 20px 10px 20px;}
.p-main-subtitle { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;   overflow: hidden; }
.p-hover-title { transition: 0.2s; font-weight: 800; line-height: 1.2; }
.p-category-label { display: block; color: var(--text-hover); font-size: 11px;  font-weight: 800; text-transform: uppercase; border-top: 1px solid var(--border-light); padding-top: 10px;  margin-top: auto;  letter-spacing: 0.5px; width: 100%; }

/* TARJETAS HORIZONTALES MÁS PEQUEÑAS (CORREGIDAS) */
.p-stacked-feed {  display: flex; flex-direction: column; gap: 15px; width: 100%; }
.p-card-horizontal { display: flex; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.035); min-height: 135px;  height: auto; }
.p-img-mini { width: 180px; flex-shrink: 0; border-right: 3px solid var(--text-hover); }
.p-img-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }   
.p-info-mini { padding: 15px 20px; display: flex; flex-direction: column; justify-content: center; width: 100%; box-sizing: border-box;}   
.p-info-mini h3 { font-size: 14px; line-height: 1.1; margin-bottom: 8px; font-weight: 700; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.p-item-subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.2; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* SIDEBAR DERECHO (FLOTANTE / STICKY CON IMÁGENES RE AJUSTADAS) */
.p-sidebar-right { background: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.035); position: -webkit-sticky; position: sticky; top: 20px; z-index: 10; max-height: calc(100vh - 40px);  overflow-y: auto;  overflow-x: hidden; scrollbar-width: none;  -ms-overflow-style: none; }

/* Ocultar barra de scroll en Chrome, Safari y Edge */
.p-sidebar-right::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; background: transparent !important;}
.p-right-title { font-size: 18px; font-weight: 700; display: block; margin-bottom: 20px; border-left: 4px solid var(--text-hover); padding-left: 10px; }

.embajador-item { padding-bottom: 5px; margin-bottom: 15px; border-bottom: 2px solid #eee; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.embajador-item:hover { transform: translateX(5px); }
.embajador-item img { width: 100%; max-width: 280px; height: 145px;  object-fit: cover; border-radius: 10px; margin: 0 auto 8px auto; display: block; border: 2px solid var(--text-hover); box-sizing: border-box; }


/* ANIMACIONES */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); }  to { opacity: 1; transform: translateY(0); } }
.animate-up { animation: fadeInUp 0.5s ease forwards;}

/* DISEÑO RESPONSIVO */
@media (max-width: 768px) {
        .p-layout { grid-template-columns: 1fr; }
        .p-sidebar-left { position: static;  max-height: none; }
        .p-ads-container { order: 2;  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;  } 
        .p-card-horizontal { flex-direction: column; height: auto; }    
        .p-img-mini { width: 100%; height: 180px; border-right: none; border-bottom: 3px solid var(--text-hover); }    
        .p-img-featured img { height: 200px; }}   


        .main-hero-static { width: 100%;  height: 520px; border-radius: 28px; overflow: hidden;   margin-bottom: 30px; position: relative;  background-size: cover;  background-position: center;    background-repeat: no-repeat;  display: flex;  align-items: flex-end; padding: 60px; box-sizing: border-box;  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
        .hero-overlay {position: absolute; top: 0; left: 0;  width: 100%;  height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);  z-index: 1;  } .hero-content {  position: relative; z-index: 2; color: #ffffff;  max-width: 700px;  }
        .hero-tag { background-color: #ff3c00; color: #ffffff; padding: 6px 16px; font-size: 0.75rem;  font-weight: 800; text-transform: uppercase; border-radius: 50px;  display: inline-block; margin-bottom: 15px; letter-spacing: 0.5px;   }

        /* Título */
        .hero-title {  font-size: 3.2rem; font-weight: 900;  line-height: 1.05;   margin: 0 0 12px 0;   letter-spacing: -1.5px;   text-transform: uppercase;  }

        /* Subtítulo */
        .hero-desc { font-size: 1.15rem; color: #e0e0e0;  margin: 0;  font-weight: 400;  opacity: 0.95; }

/* Adaptabilidad para pantallas medianas o celulares */
@media (max-width: 768px) {
    .main-hero-static {height: 380px; padding: 30px; }
    .hero-title { font-size: 2.2rem; }}



  
    
:root { --neon-green: #a8f000; --glass-bg: rgba(255, 255, 255, 0.05);  --glass-border: rgba(255, 255, 255, 0.1);}
.glass-header img { height: 90px; width: auto; }
.whinsho-glass-ultra { 
  background: var(--dark-blue); 
  background-image: linear-gradient(to right, rgba(13, 19, 33, 0.9) 0%, rgba(13, 19, 33, 0.4) 100%, transparent 100%), radial-gradient(circle at 100% 100%, rgba(0, 207, 52, 0.07) 0%, transparent 40%), url('../imagenes/index/winshotv/fondowinsho.jpg'); 
  background-size: cover; 
  background-position: center; 
  color: white; 
  font-family: 'Inter', sans-serif; 
  min-height: 800px; 
  position: relative; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column;
}

/* --- ANIMACIONES DE ENTRADA --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }}

/* --- HEADER SIN GLASS (FONDO TRANSPARENTE INTEGRADO) --- */
.glass-header { display: flex; justify-content: space-between;  align-items: center;  padding: 20px 60px; background: transparent; border-bottom: none; animation: fadeInUp 0.8s ease-out; z-index: 100;}
.nav-glass { display: flex;  gap: 15px;}
.btn-glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); padding: 10px 18px; border-radius: 10px;  color: white; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s ease; }
.btn-glass:hover { background: var(--neon-green);  border-color:var(--neon-green); transform: translateY(-2px); }

/* --- CONTENIDO --- */
.ultra-body { flex: 1; display: grid; grid-template-columns: 1fr 400px; padding: 60px 100px; align-items: center; gap: 40px; z-index: 2;}
.hero-info h1 { font-size: 5rem; font-weight: 900; margin: 0; text-transform: uppercase; line-height: 1;}
.hero-info span { color: var(--neon-green);}

/* --- VERTICAL STACK --- */
.image-stack-vertical { display: flex; flex-direction: column; gap: 25px;}
.glass-card {width: 100%; aspect-ratio: 16 / 10; background: #000; border: 2px solid rgba(255,255,255,0.05); border-radius: 15px; overflow: hidden; position: relative; transition: 0.4s ease; }
.glass-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.4s; }
.glass-card:hover { border-color: var(--neon-green);}
.glass-card:hover img {opacity: 1;}

/* --- CINTILLO --- */
.glass-footer { background: rgba(0,0,0,0.5); padding: 12px 0; z-index: 10;}
.marquee-text { display: inline-block; white-space: nowrap; animation: marquee-scroll 25s linear infinite; color: #ccc; font-size: 0.9rem; }

@keyframes marquee-scroll {from { transform: translateX(100%); } to { transform: translateX(-100%); }}

/* --- MODO CELULAR (RESPONSIVE) --- */
@media (max-width: 768px) {
        .glass-header { flex-direction: column; padding: 20px; gap: 20px;}
        .nav-glass { width: 100%; justify-content: center; flex-wrap: wrap;}
        .btn-glass { padding: 8px 12px; font-size: 0.65rem;}
        .ultra-body { grid-template-columns: 1fr; padding: 40px 20px; text-align: center; background: linear-gradient(to bottom, rgba(13, 19, 33, 0.8) 0%, transparent 100%);}
        .hero-info h1 { font-size: 2.5rem;}
        .image-stack-vertical { margin-top: 30px;}}


     
:root{ --podcast-dark: #0f1014;  --podcast-card: #171a22;  --podcast-green: #00cf34;  --podcast-text: #ffffff;  --podcast-muted: #a7afbd;}
.podcast-section {
  background-image: url('../imagenes/index/podcast/fondopodcast.svg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 80px 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.podcast-card{ max-width: 1200px; margin: auto; background: linear-gradient(145deg,#004ed6,#00389b);  border-radius: 30px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;  box-shadow: 0 25px 60px rgba(0,0,0,0.45),  0 0 0 1px rgba(255,255,255,0.04);}
.podcast-image{ position: relative; overflow: hidden;}
.podcast-image img{ width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease;}
.podcast-card:hover .podcast-image img{  transform: scale(1.05);}    
.podcast-badge{ position: absolute;  top: 20px; left: 20px; background: #68f7e4;  color: #003089; font-size: 0.75rem;  font-weight: 900;  padding: 8px 14px;  border-radius: 50px;  letter-spacing: 1px;}
.podcast-content{ padding: 60px;  display: flex;  flex-direction: column;   justify-content: center;}
.podcast-tag{ color: #68f7e4; font-size: 0.8rem;  font-weight: 800;  text-transform: uppercase; letter-spacing: 1px;  margin-bottom: 18px;}
.podcast-content h2{ font-size: 3rem;  line-height: 1.05;  font-weight: 900; color: #68f7e4; margin-bottom: 25px;}
.podcast-content h2 span{ color: #ffffff; display: block; margin-top: 10px;}
.podcast-description{ color: #bdfcf3;  font-size: 1rem; line-height: 1.8;  margin-bottom: 35px;}
.podcast-info{ display: flex; align-items: center;  justify-content: space-between;  gap: 20px; border-top: 1px solid rgba(104,247,228,0.2);  padding-top: 25px;}
.podcast-host{ display: flex; align-items: center; gap: 12px;}
.podcast-host img{ width: 55px; height: 55px; border-radius: 50%;  object-fit: cover;}
.podcast-host strong{ display: block; color: #68f7e4; font-size: 0.95rem;}
.podcast-host span{ color: #d9fffa; font-size: 0.8rem;}
.podcast-btn{ text-decoration: none; background: #68f7e4;  color: #003089; padding: 14px 22px;  border-radius: 14px;  font-weight: 800;  font-size: 0.9rem; display: flex;  align-items: center;  gap: 10px;  transition: 0.3s ease;}
.podcast-btn:hover{  transform: translateY(-3px); box-shadow: 0 10px 10px rgba(104,247,228,0.35);}

@media (max-width: 950px){
    .podcast-card{ grid-template-columns: 1fr;}
    .podcast-content{ padding: 35px 25px; }
    .podcast-content h2{  font-size: 2rem; }
    .podcast-info{ flex-direction: column; align-items: flex-start;}
    .podcast-play{ width: 70px; height: 70px; font-size: 1.4rem;}}
    
  

    
.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: #00cf34; 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: #00cf34; 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;
}


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



/* ÚLTIMAS NOTICIAS */
    @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: #00cf34; --accent-red: #D90432; --text-dark: #0d1321; --text-light: #fff; --border-color: #eee; --dark-bg: #1a1d23; --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; 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;}}

 
        
/* MENU RADIO */
    .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: #00cf34;  transform: scale(1.02);}
    .play-circle { background: #00cf34; 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: #00cf34; 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: #00cf34; 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; }

/* MENÚ */
    :root { --whinsho-green: #00cf34; --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);}
    
    /* 1. Primer elemento */
    .submenu li:nth-child(1) a:hover { background-color: #00cf34;  color: var(--white); }   
    
    /* Flechita */
    .has-submenu > a::after { content: "▾";  font-size: 12px;   margin-left: 6px;   transition: 0.3s;} 
    .has-submenu > a { display: flex; align-items: center;}    
    .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 { --brand-green: #00cf34;  --brand-red: #00cf34; --text-dark: #1a1a1a; }
    *{ box-sizing:border-box;}
    body{ margin:0; padding:0;}
    .container { max-width: 1150px; margin: auto; font-family: 'Inter', sans-serif; display: flex; gap: 40px; padding: 20px; align-items: flex-start;}


    
/* NOTICIA PRINCIPAL: CUERPO */
    .main-news { flex: 2;}    
    .category-tag { color: var(--brand-red);  font-size: 14px;  font-weight: bold; margin-bottom: 8px;  display: block; }
    .main-title { font-size: 36px; font-weight: 800;  line-height: 1.1;  color: var(--text-dark); margin: 0 0 15px 0; }
    .featured-image { width: 100%; height: 400px; object-fit: cover; border-radius: 20px 20px 0 0; display: block; border-bottom: 4px solid var(--brand-green); }
    .author-info {  display: flex;  justify-content: space-between; align-items: center;  font-size: 13px;  color: #666;  margin: 15px 0; padding-bottom: 10px; border-bottom: 1px solid #eee; }
    .news-body { font-size: 18px; line-height: 1.6; color: #333; }   
    .quote-style { font-size: 26px;  font-weight: bold; font-style: italic; color: var(--brand-green); margin: 30px 0; text-align: center; }
    .support-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 35px 0; align-items: center; }
    .support-card { overflow: hidden; border-radius: 18px; position: relative; height: 230px; transition: transform 0.35s ease, box-shadow 0.35s ease; }
    .support-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
    .support-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.18); }
    .support-card:hover img { transform: scale(1.05); }

/* NUEVOS ESTILOS PARA LOS ICONOS REDONDOS (INTEGRADOS) */
    .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); }

    /* Colores de fondo de las redes */
    .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; }

    @media (max-width: 768px) {   
    .author-info { flex-direction: column;  align-items: flex-start;  gap: 12px; }
    .support-gallery { grid-template-columns: 1fr; gap: 12px; }    
    .support-card { height: 210px; }}


/* BANNER YOUTUBE */
    .youtube-banner { display: block; width: 100%;  height: 150px;  margin-top: 30px;  border-radius: 15px; overflow: hidden; position: relative; }    
    .youtube-banner img { width: 100%; height: 100%; object-fit: cover; }

/* SIDEBAR */
    .sidebar { flex: 1; position: relative;  top: auto; }
    .sidebar-title { font-style: italic; font-size: 18px; font-weight: bold;  border-bottom: 3px solid var(--brand-green);  padding-bottom: 5px; margin-bottom: 20px; }
    .ranking-item { display: flex; gap: 12px;  margin-bottom: 20px;  align-items: flex-start;   padding-bottom: 15px;   border-bottom: 1px solid #eee; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; border-radius: 14px;  padding: 10px; }

    /* EFECTO HOVER */
    .ranking-item:hover{ background: #edeef0;  transform: translateY(-2px);  cursor: pointer; }

/* LO MÁS RECIENTE EN NOTICIAS */
    .rank-img-container { position: relative;  min-width: 110px;  width: 110px;  height: 75px;  border-radius: 10px;  overflow: hidden;  background-color: #333; }
    .rank-img-container img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
    .rank-number-overlay {  position: absolute;  top: 50%;  left: 10px;  transform: translateY(-50%); font-size: 45px; font-weight: 900;   color: transparent; -webkit-text-stroke: 1.5px white; line-height: 1;}
    .rank-content { flex: 1; }
    .rank-cat { color: var(--brand-red); font-size: 12px; font-weight: bold; margin-bottom: 4px; display: block; }
    .rank-text { font-size: 14px; font-weight: bold; color: var(--text-dark); line-height: 1.2; margin: 0; }
    .rank-meta { font-size: 11px; color: #888; margin-top: 5px; }

    @media (max-width: 768px){
    .container{ flex-direction: column;  gap: 25px;  padding: 15px;}



/* NOTICIA GRANDE ARRIBA */
    .main-news{ order: 1; width: 100%; }
    .main-title{  font-size: 28px;  line-height: 1.15;  }
    .featured-image{  height: 240px;  border-radius: 16px 16px 0 0;  }
    .news-body{  font-size: 16px; line-height: 1.7;   }
    .quote-style{  font-size: 22px;  margin: 25px 0;  }
    .youtube-banner{  height: 120px;  border-radius: 12px;}
    .sidebar-title{  font-size: 20px;  margin-top: 10px; }

    /* Tarjetas más modernas en móvil */
    .ranking-item{  gap: 10px; padding: 12px; border-radius: 14px; background: #fafafa;  border: 1px solid #eee; }
    .rank-img-container{  min-width: 105px; width: 105px;  height: 78px; border-radius: 12px; }
    .rank-number-overlay{  font-size: 38px;  left: 8px; }
    .rank-text{ font-size: 14px; line-height: 1.35;  }
    .rank-meta{ margin-top: 6px; }
    }

    /* EXTRA PEQUEÑOS */
    @media (max-width: 480px){
    .container{ padding: 12px;}
    .main-title{ font-size: 24px; }
    .featured-image{  height: 210px; }
    .ranking-item{ flex-direction: row;  align-items: center; }
    .rank-img-container{ min-width: 95px; width: 95px;  height: 70px; }
    .rank-number-overlay{ font-size: 32px; }
    .rank-text{ font-size: 13px; }
    }
        

/* LOS MÁS RECIENTES ABAJO */
    .sidebar{ order: 2; width: 100%; position: static;}

    /* IMÁGENES ABAJO DEL SIDEBAR */
    .sidebar-bottom-images{  margin-top: 25px;  display: flex;  flex-direction: column; gap: 18px; }
    .sidebar-bottom-images a{ display: block; width: 100%; overflow: hidden; border-radius: 16px; border: 1px solid #ddd; box-sizing: border-box; transition: transform .3s ease, box-shadow .3s ease,  border-color .3s ease; isolation: isolate; }
    .sidebar-bottom-images a:hover{ transform: translateY(-4px);  box-shadow: 0 10px 24px rgba(0,0,0,.18);  border-color: #bbb; }
    .sidebar-bottom-images img{  width: 100%; height: 320px;  object-fit: cover;  display: block; border-radius: 15px; }

    /* CELULAR */
    @media (max-width:768px){
    .sidebar-bottom-images{  margin-top: 15px; }
    .sidebar-bottom-images img{ height: 260px; }}



/* VIDEOS DEL CUERPO DE LAS NOTICIAS*/
    .video-section { background-image: url('/02ultimas/imagenes/fondoultimasnot.svg'); background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; padding: 40px 10px; position: relative; overflow: hidden; }    
    .video-header {  display: flex; justify-content: center; margin-bottom: 30px;  }
    .carousel-container { position: relative; max-width: 1200px; margin: 0 auto;  display: flex;  align-items: center; }
    .video-carousel { display: flex; gap: 20px; width: 100%;  justify-content: center; overflow-x: hidden;  scroll-behavior: smooth; padding: 10px 5px; }
    .video-card-v { flex: 0 0 calc(25% - 15px); max-width: 260px; aspect-ratio: 9 / 16; position: relative; border-radius: 12px; overflow: hidden; background-color: #333; border: 1px solid #444;  cursor: pointer; transition: transform 0.3s ease; }
    .video-card-v:hover {  transform: scale(1.03);  border-color: #00cf34; }
    .preview-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; }
    .video-footer { position: absolute; bottom: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 15px; color: white; z-index: 2; }
    .video-title { font-size: 14px; font-weight: bold; line-height: 1.2; }

    /* Botones de navegación */
    .nav-btn { background: rgba(0, 207, 52, 0.9); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; position: absolute; z-index: 10; font-size: 20px;  display: flex; align-items: center; justify-content: center;  box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background 0.3s; }
    .nav-btn:hover { background: #00cf34; }
    .prev { left: 10px; }
    .next { right: 10px; }

    /* Modal Responsive */
    .video-modal {  display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); justify-content: center; align-items: center; }
    .modal-content { width: 90%; max-width: 360px; height: 80vh; }
    #mainVideo { width: 100%; height: 100%; border-radius: 15px; object-fit: cover; }
    .close-btn { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; transition: color 0.3s ease;  }
    .close-btn:hover { color: #00cf34; } 
    .preview-video {  opacity: 0.8; transition: opacity 0.4s ease-in-out;  }
    .video-card-v:hover .preview-video { opacity: 1; }

    @media (max-width: 1024px) {
    .video-carousel { justify-content: flex-start; overflow-x: auto; scrollbar-width: none;  padding: 10px 20px; }
    .video-carousel::-webkit-scrollbar { display: none; }
    .video-card-v { flex: 0 0 220px; }    
    .nav-btn {  display: flex;  width: 35px; height: 35px;   top: 50%;  transform: translateY(-50%); }    
    .prev { left: 5px; }
    .next { right: 5px; }
    }

    @media (max-width: 768px) {
    .video-card-v { flex: 0 0 180px; }
    .video-title { font-size: 12px; }
    .nav-btn { background: rgba(0, 207, 52, 0.7); }
    }


    
    

/* FOOTER ULTIMAS NOTICIAS */
    .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: #00cf34; 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: #00cf34; 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; } }

/* logos flotantes */    
.card{ overflow: visible !important;}
.photo-container{ position: relative !important; overflow: visible !important;  z-index: 100 !important;}
.photo-ring{ position: relative; z-index: 1;}
.party-logo{ position: absolute !important; right: -8px !important; bottom: -8px !important; width: 35px !important; height: 35px !important; z-index: 99999 !important;}

/* ===================================================
   RESET Y CONFIGURACIÓN GLOBAL CORREGIDA
   =================================================== */
* {box-sizing: border-box; margin: 0; padding: 0;}
html { width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; padding: 0;overflow-x: hidden; }


/* ===================================================
   2. REEL CUERPO NOTICIA (INTERIOR DE LA NOTICIA)
   =================================================== */

.reel-layout-container { display: flex; gap: 30px; max-width: 1200px; margin: 0 auto; padding: 20px 15px;}
.reel-main-article { flex: 2; min-width: 0; max-width: 92%; padding-right: 25px;}
.sidebar { flex: 1; min-width: 300px;}
.reel-media-wrapper { width: 100%; max-width: 500px; margin: 0 auto 15px auto; border-radius: 20px; overflow: hidden; background-color: #000000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);}
.reel-featured-video { width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 750px; object-fit: cover; display: block; border-radius: 20px; outline: none;}
.reel-category-tag { color: #00cf34; font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block;}
.reel-main-title {  font-size: 28px;  font-weight: 800;  line-height: 1.15;  color: #111111;  margin: 0 0 12px 0;  text-transform: uppercase;  max-width: 95%;  word-wrap: break-word;}
.reel-author-info { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #666666; margin-bottom: 20px; padding-bottom: 10px; padding-right: 10px; border-bottom: 1px solid #e2e2e2;}
.reel-date-author { font-size: 12px;}
.reel-social-share {  display: flex; gap: 6px;}
.reel-social-btn {  display: inline-flex;  align-items: center;  justify-content: center;  width: 24px;  height: 24px;  border-radius: 50%;  color: #ffffff;  font-size: 11px;  text-decoration: none;  transition: transform 0.2s ease, opacity 0.2s ease;}
.reel-social-btn:hover { opacity: 0.85;  transform: scale(1.1);}
.reel-social-btn.fb { background-color: #1877f2; }
.reel-social-btn.tk { background-color: #000000; }
.reel-social-btn.yt { background-color: #ff0000; }
.reel-social-btn.x-tw { background-color: #000000; }
.reel-social-btn.ig { background-color: #e4405f; }
.reel-news-body p {  font-size: 15px;  line-height: 1.5;  color: #444444;  margin-bottom: 14px;}
.reel-quote-style {  font-size: 20px;  font-weight: 700;  font-style: italic;  color: #00cf34;  text-align: center;  line-height: 1.35;  margin: 30px 0;  padding: 0 10px;}

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

@media (max-width: 992px) { .reels-noticias-container {  grid-template-columns: repeat(3, 1fr); gap: 12px;}}
@media (max-width: 768px) { .reel-layout-container {  flex-direction: column; } .reel-main-article {  max-width: 100%;  padding-right: 0; } .reel-main-title { font-size: 22px;  max-width: 100%;}.reel-author-info {  flex-direction: column; align-items: flex-start;  gap: 10px; padding-right: 0;}}
@media (max-width: 576px) { .reels-noticias { padding: 0 10px; }
  
  .reels-noticias-container {  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 10px; -webkit-overflow-scrolling: touch;}
  .reels-noticias-container .reel-card { flex: 0 0 calc(50% - 6px); min-width: calc(50% - 6px); scroll-snap-align: start;}}

/* PUBLICIDAD FLOTANTE */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: flex;  justify-content: center; align-items: center;  z-index: 9999; }

/* Ventana emergente */
.popup-container { position: relative; background: #fff; padding: 0; border-radius: 8px; max-width: 480px; width: 90%; text-align: center; }
.popup-content img { width: 100%; height: auto; display: block; border-radius: 8px 8px 0 0; }

/* Botón cerrar superior */
.close-btn {
  position: absolute; top: -35px; right: 0; background: transparent; color: #28a745; border: none; font-weight: bold; font-size: 16px; cursor: pointer; z-index: 10; }

/* Botón de acción (CTA) */
.cta-btn { display: block; background-color: #007bff; color: white; padding: 10px; margin-top: 10px; text-decoration: none; border-radius: 5px; font-weight: bold;}



/* Layout para la vista de noticia individual con sidebar */
.contenedor-principal-noticia {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.contenido-noticia {
    flex: 1; /* Ocupa el espacio restante del lado izquierdo */
}

#global-sidebar {
    width: 320px; /* Ancho fijo de la columna del sidebar */
    flex-shrink: 0;
}

/* Adaptación para pantallas móviles */
@media (max-width: 768px) {
    .contenedor-principal-noticia {
        flex-direction: column;
    }
    #global-sidebar {
        width: 100%;
    }
}