/* =========================================
   BASE
========================================= */

body{
  margin:0;
  font-family:Arial, sans-serif;
}

*{
  box-sizing:border-box;
}

.container{
  width:100%;
  max-width:1180px;
  margin:auto;
  padding:0 15px;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================================
   TOP BAR
========================================= */

.top-bar{
  background:#e9f2f9;
  padding:6px 0;
  font-size:14px;
}

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

.top-left{
  color:#0073aa;
  font-weight:600;
}

.top-center{
  color:#333;
}

.top-right a{
  margin-left:10px;
  color:#0073aa;
  font-weight:600;
  text-decoration:none;
}

/* =========================================
   HEADER
========================================= */

.site-header{
  border-bottom:1px solid #ddd;
  background:#fff;
}

.header-inner{
  display:grid;
  grid-template-columns:60px 1fr 200px;
  align-items:center;
  padding:10px 0;
}

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

.menu-toggle span{
  height:3px;
  background:#0073aa;
  border-radius:2px;
}

/* ESCALONADO */
.menu-toggle span:nth-child(1){width:28px;}
.menu-toggle span:nth-child(2){width:20px;}
.menu-toggle span:nth-child(3){width:12px;}

/* LOGO */
.site-branding{
  text-align:center;
}

.custom-logo{
  max-height:60px;
  width:auto;
}

/* BUSCADOR */
.header-search{
  text-align:right;
}

/* =========================================
   MENU LATERAL
========================================= */

.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:999;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

.side-menu{
  position:fixed;
  top:0;
  left:0;
  width:260px;
  height:100%;
  background:#111;
  padding:20px;
  transform:translateX(-100%);
  transition:0.3s ease;
  z-index:1000;
}

.side-menu.active{
  transform:translateX(0);
}

.menu-close{
  position:absolute;
  top:10px;
  right:10px;
  background:#e00000;
  color:#fff;
  border:none;
  padding:6px 10px;
  cursor:pointer;
}

.menu-list{
  list-style:none;
  padding:50px 0 0;
  margin:0;
}

.menu-list li{
  margin-bottom:15px;
}

.menu-list a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
}

/* =========================================
   HOME
========================================= */

.home-top{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:15px;
}

.main-post{
  position:relative;
  overflow:hidden;
}

.main-post img{
  height:420px;
  object-fit:cover;
}

.main-post .overlay{
  position:absolute;
  bottom:0;
  width:100%;
  padding:15px;
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.main-post h2{
  color:#fff;
  margin:0;
  font-size:20px;
}

.side-post img{
  height:200px;
  object-fit:cover;
}

.home-bottom{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:20px;
}

.bottom-post img{
  height:140px;
  object-fit:cover;
}

/* =========================================
   SINGLE
========================================= */

.single-flex{
  display:flex;
  gap:30px;
}

.single-content{
  flex:2;
}

.single-sidebar{
  flex:1;
}

.post-content{
  font-size:18px;
  line-height:1.7;
  text-align:justify;
}

/* PUBLICIDAD */
.ad-box{
  margin-bottom:20px;
}

.ad-box img{
  width:100%;
}

/* =========================================
   FOOTER
========================================= */

.site-footer{
  background:#0b0b0b;
  color:#fff;
  margin-top:50px;
  padding:40px 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px;
}

.footer-col h3{
  margin-bottom:10px;
}

.footer-col a{
  color:#bbb;
  text-decoration:none;
  font-size:14px;
}

.footer-bottom{
  text-align:center;
  margin-top:30px;
  font-size:13px;
  color:#888;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:900px){

  .home-top{
    grid-template-columns:1fr;
  }

  .home-bottom{
    grid-template-columns:1fr 1fr;
  }

  .single-flex{
    flex-direction:column;
  }

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

}
/* =========================================
   🔥 RESTORE PORTADA (LA QUE FUNCIONABA)
========================================= */

/* TOP */
.home-top{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px;
}

/* IMAGENES TOP */
.top-image img{
  width:100%;
  height:280px !important;
  object-fit:cover;
}

/* TITULO TOP */
.top-title{
  font-size:20px;
  font-weight:700;
  margin-top:10px;
  line-height:1.3;
}

/* GRID ABAJO */
.home-bottom{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px;
}

/* IMAGENES ABAJO */
.bottom-image img{
  width:100%;
  height:160px !important;
  object-fit:cover;
}

/* TITULOS ABAJO */
.bottom-post h3{
  font-size:15px;
  margin-top:8px;
  line-height:1.3;
}

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

  .home-top{
    grid-template-columns:1fr !important;
  }

  .home-bottom{
    grid-template-columns:1fr 1fr !important;
  }

}
/* =========================================
   🔥 FIX TITULOS + CATEGORIAS (SIN ROMPER)
========================================= */

/* TITULOS (como antes) */
.top-title,
.bottom-post h3,
.side-post h3,
.section-post h4{
  color:#111 !important;
  font-weight:700;
}

/* hover elegante */
.top-title:hover,
.bottom-post h3:hover{
  color:#0077cc !important;
}

/* =========================
   TITULOS DE SECCION
========================= */

.section-title{
  width:100%;
  text-align:center;
  padding:14px 10px;
  margin:40px 0 20px;
  font-size:22px;
  font-weight:800;
  color:#fff;
  border:none !important;
  border-radius:6px;
}

/* =========================
   COLORES POR CATEGORIA
========================= */

.section-policiales{
  background:linear-gradient(90deg,#004e92,#000428);
}

.section-ciudad{
  background:linear-gradient(90deg,#2193b0,#6dd5ed);
}

.section-provincia{
  background:linear-gradient(90deg,#ff5f6d,#7b4397);
}

.section-pais{
  background:linear-gradient(90deg,#00c6ff,#0072ff);
}

.section-politica{
  background:linear-gradient(90deg,#bdc3c7,#2c3e50);
}

.section-deportes{
  background:linear-gradient(90deg,#11998e,#38ef7d);
}

.section-educacion{
  background:linear-gradient(90deg,#f7971e,#ffd200);
}

.section-sociedad{
  background:linear-gradient(90deg,#8360c3,#2ebf91);
}

.section-espectaculo{
  background:linear-gradient(90deg,#fc466b,#3f5efb);
}

/* =========================
   GRID SECCIONES
========================= */

.section-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.section-post img{
  width:100%;
  height:160px;
  object-fit:cover;
}

.section-post h4{
  font-size:14px;
  margin-top:8px;
  line-height:1.3;
}

/* MOBILE */
@media(max-width:900px){
  .section-grid{
    grid-template-columns:1fr 1fr;
  }
}
/* =========================================
   🔥 FIX PUBLICIDAD CENTRADA
========================================= */

.home-ad,
.horizontal-ad{
  text-align:center !important;
}

.home-ad img,
.horizontal-ad img{
  display:block;
  margin:0 auto !important;
  max-width:100%;
}

/* =========================================
   🔥 TITULOS PRO (SIN NEGRO DURO)
========================================= */

.top-title,
.bottom-post h3,
.side-post h3,
.section-post h4{
  color:#1a1a1a !important; /* gris oscuro elegante */
  font-weight:700;
  text-decoration:none !important;
}

/* eliminar subrayado de links */
.top-post a,
.bottom-post a,
.side-post a{
  text-decoration:none !important;
  color:inherit !important;
}

/* hover más moderno */
.top-title:hover,
.bottom-post h3:hover,
.side-post h3:hover{
  color:#0077cc !important;
}
/* =========================================
   🔥 TITULOS CATEGORIAS (NEGRO PRO)
========================================= */

/* TITULOS EN SECCIONES */
.section-post h4{
  color:#000 !important;
  text-decoration:none !important;
  font-weight:700;
}

/* LINKS DE NOTICIAS */
.section-post a{
  text-decoration:none !important;
  color:#000 !important;
}

/* HOVER SUAVE */
.section-post a:hover h4{
  color:#0077cc !important;
}
/* =========================================
   🔥 RESTORE SINGLE (EL QUE FUNCIONABA)
========================================= */

/* LAYOUT */
.single-flex{
  display:flex !important;
  gap:30px !important;
  align-items:flex-start !important;
}

/* CONTENIDO */
.single-content{
  flex:2 !important;
  min-width:0;
}

/* SIDEBAR */
.single-sidebar{
  flex:1 !important;
  position:relative !important;
}

/* IMAGEN PRINCIPAL */
.post-image img{
  width:100%;
  height:auto !important;
  border-radius:6px;
}

/* TEXTO */
.post-content{
  font-size:18px;
  line-height:1.7;
  text-align:justify;
}

/* PUBLICIDAD */
.ad-box{
  margin-bottom:20px;
}

.ad-box img{
  width:100%;
  height:auto;
  display:block;
}

/* RELACIONADAS */
.related-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:15px;
}

.related-item img{
  width:100%;
  height:120px;
  object-fit:cover;
}

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

  .single-flex{
    flex-direction:column !important;
  }

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

}
/* =========================================
   🔥 FIX SINGLE REAL (COMPATIBLE CON TU PHP)
========================================= */

/* CONTENEDOR */
.single-flex{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

/* CONTENIDO */
.single-content{
  width:70%;
}

/* SIDEBAR */
.single-sidebar{
  width:30%;
}

/* CAJAS SIDEBAR */
.sidebar-box{
  margin-bottom:25px;
}

/* TITULO */
.post-title{
  font-size:32px;
  margin:10px 0;
  line-height:1.2;
}

/* VOLANTA */
.volanta{
  color:#e00000;
  font-weight:bold;
  font-size:14px;
  margin-bottom:5px;
}

/* CATEGORIA */
.post-category{
  font-size:13px;
  color:#0077cc;
  margin-bottom:5px;
}

/* FECHA */
.post-meta{
  font-size:13px;
  color:#777;
  margin-bottom:15px;
}

/* EXTRACTO */
.post-excerpt{
  font-size:18px;
  color:#444;
  margin-bottom:15px;
}

/* IMAGEN */
.post-image img{
  width:100%;
  height:auto;
  margin-bottom:20px;
}

/* CONTENIDO */
.post-content{
  font-size:18px;
  line-height:1.7;
  text-align:justify;
}

/* RELACIONADAS */
.related-posts{
  margin-top:40px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.related-item{
  display:block;
  text-decoration:none;
  color:#000;
}

.related-item img{
  width:100%;
  height:120px;
  object-fit:cover;
}

.related-item h4{
  font-size:14px;
  margin-top:5px;
}

/* PUBLICIDAD */
.ad-box{
  margin-bottom:20px;
}

.ad-box img{
  width:100%;
  height:auto;
  display:block;
}

/* MÁS LEÍDAS */
.sidebar-box ul{
  padding:0;
  list-style:none;
}

.sidebar-box li{
  margin-bottom:10px;
}

.sidebar-box a{
  text-decoration:none;
  color:#000;
}

/* MOBILE */
@media(max-width:900px){
  .single-flex{
    flex-direction:column;
  }

  .single-content,
  .single-sidebar{
    width:100%;
  }

  .related-grid{
    grid-template-columns:1fr 1fr;
  }
}
/* =========================================
   🔥 FIX REAL SINGLE (ESTRUCTURA CORRECTA)
========================================= */

/* CONTENEDOR GENERAL */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 15px;
}

/* SINGLE LAYOUT */
.single-flex{
  display:grid !important;
  grid-template-columns:2fr 1fr !important;
  gap:30px !important;
  align-items:start;
}

/* CONTENIDO */
.single-content{
  width:100% !important;
}

/* SIDEBAR */
.single-sidebar{
  width:100% !important;
}

/* ASEGURA QUE NO SE ROMPA */
.single-sidebar,
.single-content{
  display:block;
}

/* IMAGEN */
.post-image img{
  width:100%;
  height:auto;
  border-radius:6px;
}

/* TITULO */
.post-title{
  font-size:32px;
  line-height:1.2;
  margin-bottom:10px;
}

/* TEXTO */
.post-content{
  font-size:18px;
  line-height:1.7;
  text-align:justify;
}

/* SIDEBAR FIX */
.sidebar-box{
  margin-bottom:25px;
  background:#fff;
}

/* MÁS LEÍDAS */
.sidebar-box ul{
  padding-left:18px;
}

/* PUBLICIDAD */
.ad-box img{
  width:100%;
  height:auto;
  display:block;
}

/* RELACIONADAS */
.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

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

  .single-flex{
    grid-template-columns:1fr !important;
  }

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

}
/* =========================================
   🔥 ESPACIO ENTRE TOP BAR Y HEADER
========================================= */

.site-header{
  margin-top:8px; /* podés ajustar entre 5 y 10 */
}
.site-header{
  margin-top:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
/* =========================================
   BOTON VER MÁS PRO
========================================= */

.load-more-box{
  text-align:center;
  margin:40px 0;
}

.load-more-btn{
  display:inline-block;
  padding:14px 28px;
  background:#0077cc;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:6px;
  transition:0.3s;
}

.load-more-btn:hover{
  background:#005fa3;
}
/* =========================================
   🔥 PORTADA FULL WIDTH PRO
========================================= */

.home{
  max-width:100% !important;
  padding:0 8px !important; /* aire lateral */
}

/* IMAGENES NO SE ROMPEN */
.top-image img,
.bottom-image img{
  width:100%;
  height:auto;
}

/* =========================================
   ESPACIO + LINEA DEGRADADO PRO
========================================= */

.home-full,
.home{
  margin-top:12px; /* 👈 más aire arriba */
  padding-top:8px; /* 👈 separa la línea del contenido */

  border-top:2px solid;
  border-image:linear-gradient(to right, #0077cc, transparent) 1;
}
/* =========================================
   SINGLE → ESPACIO + LINEA PRO
========================================= */

.single .container{
  margin-top:12px;
  padding-top:8px;

  border-top:2px solid;
  border-image:linear-gradient(to right, #0077cc, transparent) 1;
}
/* =========================================
   ESPACIO SOBRE VOLANTA
========================================= */

.volanta{
  margin-top:8px;
}
/* =========================================
   ESPACIO TOP BAR (SIN LINEA)
========================================= */

.top-bar{
  margin-top:8px;
  margin-bottom:8px;
}
/* =========================================
   SINGLE → ESPACIO TOP BAR LIMPIO
========================================= */

.single .top-bar{
  margin-top:8px;
  margin-bottom:8px;
  border:none !important;
}
/* =========================================
   SINGLE PRO (ESTILO DIARIO)
========================================= */

/* VOLANTA */
.volanta{
  font-size:13px;
  font-weight:700;
  color:#0077cc;
  text-transform:uppercase;
  margin-top:8px;
  margin-bottom:5px;
}

/* TITULO */
.post-title{
  font-size:36px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:10px;
}

/* BAJADA */
.post-excerpt{
  font-size:20px;
  color:#444;
  margin-bottom:15px;
}

/* FECHA */
.post-meta{
  font-size:13px;
  color:#777;
  margin-bottom:15px;
}

/* IMAGEN */
.post-image img{
  width:100%;
  border-radius:6px;
  margin-bottom:20px;
}

/* TEXTO */
.post-content{
  font-size:18px;
  line-height:1.8;
  text-align:justify;
}

/* PRIMERA LETRA GRANDE */
.post-content p:first-child::first-letter{
  font-size:48px;
  float:left;
  line-height:1;
  padding-right:6px;
  font-weight:bold;
}

/* RELACIONADAS */
.related-posts h3{
  margin-top:40px;
  font-size:18px;
}
/* =========================================
   LETRA CAPITULAR (DROP CAP PRO)
========================================= */

.post-content p:first-of-type::first-letter{
  float:left;
  font-size:52px;
  line-height:1;
  font-weight:700;
  margin-right:8px;
  margin-top:4px;
  color:#000;
}
/* ===============================
   TITULOS NEGROS SIN SUBRAYADO
=============================== */

/* Más leídas */
.mas-leidas a{
  color:#000 !important;
  text-decoration:none !important;
  font-weight:600;
}

.mas-leidas a:hover{
  color:#0077cc;
}

/* Te puede interesar */
.related-posts a{
  color:#000 !important;
  text-decoration:none !important;
  font-weight:600;
}

.related-posts a:hover{
  color:#0077cc;
}
/* =========================================
   FIX TITULOS MAS LEIDAS + RELACIONADAS
========================================= */

/* TODOS LOS LINKS EN SIDEBAR */
.sidebar a,
.widget a,
.mas-leidas a,
.related-posts a{
  color:#000 !important;
  text-decoration:none !important;
}

/* TITULOS */
.sidebar li a,
.widget li a,
.mas-leidas li a,
.related-posts li a{
  font-weight:600;
  line-height:1.4;
  display:block;
}

/* HOVER */
.sidebar a:hover,
.widget a:hover,
.mas-leidas a:hover,
.related-posts a:hover{
  color:#0077cc !important;
}

/* SACAR SUBRAYADO GLOBAL EN ESAS ZONAS */
.sidebar a:before,
.sidebar a:after,
.widget a:before,
.widget a:after{
  display:none !important;
}
/* 🔥 MENÚ LATERAL PRO */
.side-menu{
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    transition: 0.3s ease;
    padding: 20px;
    box-shadow: 5px 0 20px rgba(0,0,0,0.1);
    overflow-y: auto;
}

/* ACTIVO */
.side-menu.active{
    left: 0;
}

/* OVERLAY */
.menu-overlay{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    transition:0.3s;
    z-index:9998;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}

/* LOGO */
.menu-logo{
    text-align:center;
    margin-bottom:25px;
}

.menu-logo img{
    max-width:140px;
    height:auto;
}

/* BOTÓN CERRAR */
.menu-close{
    position:absolute;
    top:15px;
    right:15px;
    background:#f1f1f1;
    border:none;
    font-size:18px;
    width:35px;
    height:35px;
    border-radius:50%;
    cursor:pointer;
}

/* LISTA */
.menu-list{
    list-style:none;
    padding:0;
    margin:0;
}

.menu-list li{
    border-bottom:1px solid #eee;
}

.menu-list li a{
    display:block;
    padding:12px 5px;
    color:#111;
    text-decoration:none;
    font-weight:500;
}

.menu-list li a:hover{
    color:#0a58ca;
}
/* 🔴 BOTON EN VIVO HEADER */
.live-btn-header{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 10px;
  padding:6px 12px;
  background:#e10600;
  color:#fff;
  font-size:13px;
  font-weight:700;
  border-radius:20px;
  text-decoration:none;
  white-space:nowrap;
}

/* puntito */
.live-dot{
  width:8px;
  height:8px;
  background:#fff;
  border-radius:50%;
  position:relative;
}

/* animación pulso */
.live-dot::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  animation:pulseLive 1.5s infinite;
}

@keyframes pulseLive{
  0%{transform:scale(1);opacity:1;}
  70%{transform:scale(2.5);opacity:0;}
  100%{opacity:0;}
}
/* HEADER EN UNA SOLA LINEA */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
}

/* LOGO */
.site-branding{
  flex-shrink:0;
}

/* BOTON EN VIVO */
.live-btn-header{
  flex-shrink:0;
}

/* BUSCADOR */
.header-search{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

/* INPUT BUSCADOR */
.header-search input{
  height:32px;
}

/* BOTON BUSCAR */
.header-search button{
  height:32px;
}
/* ===== LIVE PRO ===== */

.live-body{
    margin:0;
    background:#000;
    font-family:Arial, sans-serif;
}

.live-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:20px;
}

/* LOGO CON EFECTO */
.live-logo img{
    max-height:80px;
    margin-bottom:15px;

    filter: drop-shadow(0 0 10px rgba(0,150,255,0.7));
    animation: glowLogo 2s ease-in-out infinite alternate;
}

@keyframes glowLogo{
    from{
        filter: drop-shadow(0 0 5px rgba(0,150,255,0.5));
    }
    to{
        filter: drop-shadow(0 0 20px rgba(0,150,255,1));
    }
}

/* EN VIVO */
.live-indicator{
    color:#fff;
    font-size:18px;
    font-weight:bold;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:8px;
}

.live-indicator .dot{
    width:10px;
    height:10px;
    background:red;
    border-radius:50%;
    animation:pulse 1s infinite;
}

@keyframes pulse{
    0%{opacity:1;}
    50%{opacity:0.3;}
    100%{opacity:1;}
}

/* PLAYER */
.live-player{
    width:100%;
    max-width:1100px;
}

.live-player video{
    width:100%;
    height:auto;
    border-radius:10px;
    box-shadow:0 0 30px rgba(0,0,0,0.8);
}
/* ===== FONDO PREMIUM ===== */

.live-body{
    position:relative;
    overflow-x:hidden;
    background:radial-gradient(circle at center, #0a0a0a 0%, #000 80%);
}

/* CAPA 1 – LUZ SUAVE */
.live-body::before{
    content:"";
    position:fixed;
    top:0;
    left:-100%;
    width:200%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent 30%,
        rgba(0,120,255,0.05) 45%,
        rgba(0,120,255,0.12) 50%,
        rgba(0,120,255,0.05) 55%,
        transparent 70%
    );
    animation:premiumLight 12s linear infinite;
    z-index:0;
}

/* CAPA 2 – GLOW DIFUSO */
.live-body::after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at 70% 30%, rgba(0,150,255,0.08), transparent 60%);
    animation:ambientMove 18s ease-in-out infinite alternate;
    z-index:0;
}

/* MOVIMIENTO SUAVE */
@keyframes premiumLight{
    0%{transform:translateX(0);}
    100%{transform:translateX(50%);}
}

/* AMBIENTE */
@keyframes ambientMove{
    0%{
        transform:translate(0,0);
        opacity:0.6;
    }
    100%{
        transform:translate(-40px, 30px);
        opacity:1;
    }
}

/* CONTENEDOR */
.mas-leidas-pro{
  position:relative;
  padding-left:25px;
}

/* 🔴 LÍNEA VERTICAL ÚNICA */
.mas-leidas-pro::before{
  content:'';
  position:absolute;
  left:8px;
  top:0;
  bottom:0;
  width:2px;
  background:#ddd;
}

/* ITEM */
.mas-item-pro{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  text-decoration:none;
  position:relative;
}

/* 🔴 CÍRCULO ROJO */
.mas-item-pro::before{
  content:'';
  position:absolute;
  left:-17px;
  top:10px;
  width:10px;
  height:10px;
  background:#e60023;
  border-radius:50%;
  z-index:2;
}

/* HOVER */
.mas-item-pro:hover::before{
  transform:scale(1.2);
  transition:0.2s;
}
.mas-leidas-pro{
  font-family:Arial, sans-serif;
}

.mas-leidas-pro h3{
  font-size:18px;
  margin-bottom:15px;
}

.mas-item-pro{
  display:block;
  padding:10px 0;
  border-bottom:1px solid #eee;
  text-decoration:none;
}

.mas-item-pro p{
  font-size:14px;
  font-weight:600;
  color:#111;
  margin:0;
}

.views{
  font-size:12px;
  color:#777;
  display:inline-block;
  margin-right:5px;
}

.badge-trending{
  background:#e60023;
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:4px;
}
/* ===== HEADER BASE ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:9999;
  background:#fff;
  transition:all 0.35s ease;
}

/* CONTENIDO */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:18px 0;
  transition:all 0.3s ease;
}

/* LOGO */
.site-branding img{
  height:60px;
  transition:all 0.3s ease;
}

/* ===== EFECTO SCROLL PRO ===== */
.site-header.scrolled{
  background:#ffffffee;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* REDUCE ALTURA */
.site-header.scrolled .header-inner{
  padding:8px 0;
}

/* LOGO MÁS CHICO */
.site-header.scrolled .site-branding img{
  height:40px;
}

/* BOTÓN EN VIVO */
.live-btn-header{
  font-weight:700;
  color:#fff;
  background:#e60023;
  padding:6px 12px;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}

/* DOT EN VIVO */
.live-dot{
  width:8px;
  height:8px;
  background:#fff;
  border-radius:50%;
  animation:pulse 1.5s infinite;
}

/* ANIMACIÓN */
@keyframes pulse{
  0%{opacity:1;}
  50%{opacity:0.3;}
  100%{opacity:1;}
}

:root{
  --color-principal:#0b5ed7;
  --color-principal-hover:#084298;
}

.post-content a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0b5ed7;
  color:#fff !important;
  padding:12px 18px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  margin:12px 0;
  font-size:0; /* OCULTA URL */
  transition:0.2s;
}

.post-content a::before{
  content:"📝 Acceder al enlace";
  font-size:15px;
}

.post-content a:hover{
  background:#084298;
}
/* TOP BAR SHARE PRO */

.top-left{
  font-size:17px;
  font-weight:600;
}

.share-top{
  display:flex;
  gap:14px;
}

.share-top a{
  color:#444;
  font-size:17px;
  text-decoration:none;
  transition:.2s;
}

.share-top a:hover{
  color:#0073e6;
  transform:scale(1.15);
}
/* =========================================
   META + SHARE PRO
========================================= */

.share-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  padding-bottom:8px;
  border-bottom:1px solid #eee;
}

/* FECHA */
.meta-left{
  font-size:15px;
  font-weight:600;
  color:#555;
  display:flex;
  align-items:center;
  gap:6px;
}

/* ICONOS */
.meta-right{
  display:flex;
  gap:12px;
}

.meta-right a{
  color:#444;
  font-size:16px;
  text-decoration:none;
  transition:.2s;
}

.meta-right a:hover{
  color:#0073e6;
  transform:scale(1.15);
}

/* MOBILE */
@media(max-width:768px){
  .share-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}
/* =========================
   FOOTER PRO
========================= */

.site-footer{
  background:#0a0a0a;
  color:#fff;
  padding:40px 0 20px;
}

/* GRID */
.footer-inner{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:40px;
}

/* TEXTOS */
.footer-col h3{
  margin-bottom:10px;
  font-size:16px;
}

.footer-col p{
  color:#bbb;
  font-size:14px;
  line-height:1.5;
}

/* LINKS */
.footer-col ul{
  list-style:none;
  padding:0;
}

.footer-col ul li{
  margin-bottom:6px;
}

.footer-col ul li a{
  color:#ccc;
  text-decoration:none;
  transition:.2s;
}

.footer-col ul li a:hover{
  color:#fff;
}

/* 🔥 REDES GRANDES */
.footer-social{
  margin-top:15px;
  display:flex;
  gap:15px;
}

.footer-social a{
  font-size:22px; /* 👈 MÁS GRANDE */
  color:#bbb;
  transition:.3s;
}

.footer-social a:hover{
  color:#00aaff;
  transform:scale(1.2);
}

/* COPYRIGHT */
.footer-bottom{
  text-align:center;
  margin-top:30px;
  font-size:13px;
  color:#777;
  border-top:1px solid #222;
  padding-top:15px;
}

/* MOBILE */
@media(max-width:900px){
  .footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-social{
    justify-content:center;
  }
}
/* FOOTER REDES MEJORADAS */
.footer-social{
  margin-top:15px;
  display:flex;
  gap:16px;
}

.footer-social a{
  font-size:22px;
  color:#bbb;
  transition:.3s;
}

.footer-social a:hover{
  color:#00aaff;
  transform:scale(1.2);
}
/* =========================================
   FIX FOOTER GRID + PUBLICIDAD
========================================= */

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px;
}

/* columna publicidad */
.footer-ad{
  display:block;
  width:100%;
}

.footer-ad img{
  width:100%;
  height:auto;
  display:block;
}

/* evita que se esconda */
.footer-col{
  min-width:0;
}
.footer-ad img{
  width:100%;
  height:auto;
  display:block;
}
/* REDES NUEVAS (SIN ROMPER NADA) */

.footer-social{
  display:flex;
  gap:14px;
  margin-top:10px;
}

.footer-social a{
  font-size:20px;
  color:#bbb;
  text-decoration:none;
  transition:.3s;
}

.footer-social a:hover{
  color:#00aaff;
  transform:scale(1.15);
}
/* =========================================
   FIX FOOTER PUBLICIDAD (REAL)
========================================= */

.footer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 🔥 fuerza 4 columnas */
  gap:25px;
}

/* columna newsletter/publicidad */
.footer-grid .footer-col{
  width:100%;
}

/* PUBLICIDAD */
.footer-ad{
  width:100%;
  margin-top:15px;
}

.footer-ad img{
  width:100%;
  height:auto;
  display:block;
}
.footer-social a{
  font-size:20px;
  color:#bbb;
  margin-right:10px;
  transition:.3s;
}

.footer-social a:hover{
  color:#00aaff;
  transform:scale(1.1);
}