@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap');

    *{margin:0;padding:0;box-sizing:border-box;}

    :root{
      --rojo:#c8151b;
      --rojo2:#e8192c;
      --azul:#1a3a6b;
      --azul2:#1e4d9b;
      --azul-bright:#4a90d9;
      --negro:#7d899eda;
      --negro2:#a2a2a2d6;
      --negro3:#f6f6f6e3;
      --plata:#c0c0c0;
      --blanco:#fff;
    }

    body{
      font-family:'Roboto',sans-serif;
      background: url('../img/hero-news.png') no-repeat center center fixed;
      background-size: cover;
      color:var(--blanco);
      min-height:100vh;
      overflow-x:hidden;
    }

    body::before{
      content:'';
      position:fixed;
      inset:0;
      background:rgba(168, 185, 240, 0.76); /* ajusta la opacidad */
      z-index:-1;
      pointer-events:none;
    }

    a{text-decoration:none;color:inherit;}

    /* ══════════════════════════════
       TICKER TOP
    ══════════════════════════════ */
    .ticker-bar{
      background:var(--rojo);
      height:36px;
      display:flex;
      align-items:center;
      overflow:hidden;
      position:relative;
      z-index:300;
    }

    .ticker-label{
      background:#000;
      color:#fff;
      font-family:'Oswald',sans-serif;
      font-size:12px;
      font-weight:600;
      letter-spacing:2px;
      padding:0 18px;
      height:100%;
      display:flex;
      align-items:center;
      white-space:nowrap;
      flex-shrink:0;
      border-right:3px solid var(--rojo2);
    }

    .ticker-track{overflow:hidden;flex:1;}

    .ticker-inner{
      display:flex;
      gap:60px;
      white-space:nowrap;
      animation:ticker 32s linear infinite;
    }

    .ticker-inner span{
      color:#fff;
      font-size:13px;
      font-weight:500;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .ticker-inner span::before{
      content:'●';
      color:rgba(255,255,255,0.6);
      font-size:8px;
    }

    @keyframes ticker{
      0%{transform:translateX(0);}
      100%{transform:translateX(-50%);}
    }

    /* ══════════════════════════════
       HEADER
    ══════════════════════════════ */
    .site-header{
    background: linear-gradient(180deg, #0d1557ae 0%, #111 60%, #1a1a1a 100%);
    border-bottom:4px solid var(--rojo);
    padding:0;
    position:sticky;
    top: 0;
      z-index: 200;
    }
    
    /* Franja superior del header */
    .header-top {
      background: #0a163871;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      padding: 8px 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    
    .header-top .bs2-logo img {
      height: 28px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(74, 144, 217, 0.5));
    }

    .header-top-right{
      display:flex;
      align-items:center;
      gap:20px;
    }

    .header-date{
      color:#90a3bd;
      font-size:14px;
      letter-spacing:0.5px;
    }

    .header-live{
      display:flex;
      align-items:center;
      gap:6px;
      background:var(--rojo);
      color:#fff;
      font-family:'Oswald',sans-serif;
      font-size:12px;
      font-weight:600;
      letter-spacing:2px;
      padding:4px 12px;
      border-radius:2px;
    }

    .live-dot{
      width:7px;height:7px;
      background:#fff;
      border-radius:50%;
      animation:blink 1s infinite;
    }

    @keyframes blink{
      0%,100%{opacity:1;}
      50%{opacity:0.15;}
    }

    /* Logo principal */
    .header-main{
      padding:8px 26px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .weazel-logo-wrap img{
      height: 100px;
      width:auto;
      object-fit:contain;
      filter:drop-shadow(0 2px 12px rgba(7, 147, 222, 0.633));
    }

    .header-slogan{
      text-align:right;
    }

    .header-slogan p{
      color:#475569;
      font-size:12px;
      letter-spacing:1px;
      text-transform:uppercase;
    }

    .header-slogan strong{
      display:block;
      color:var(--plata);
      font-family:'Oswald',sans-serif;
      font-size:16px;
      letter-spacing:2px;
      margin-top:2px;
    }

    .bs2-logo-main img{
      height:48px;
      width:auto;
      object-fit:contain;
      filter:drop-shadow(0 0 10px rgba(74,144,217,0.5));
    }

    /* ══════════════════════════════
       BREAKING BAR
    ══════════════════════════════ */
    .breaking-bar{
      background:linear-gradient(90deg, var(--azul) 0%, #0f2040 100%);
      border-bottom:2px solid var(--azul-bright);
      padding:10px 40px;
      display:flex;
      align-items:center;
      gap:16px;
      position:relative;
      overflow:hidden;
    }

    .breaking-bar::before{
      content:'';
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      background:repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.02) 8px,
        rgba(255,255,255,0.02) 16px
      );
      pointer-events:none;
    }

    .breaking-tag{
      background:var(--rojo);
      color:#fff;
      font-family:'Oswald',sans-serif;
      font-size:12px;
      font-weight:600;
      letter-spacing:2px;
      padding:5px 14px;
      border-radius:2px;
      white-space:nowrap;
      display:flex;
      align-items:center;
      gap:6px;
      flex-shrink:0;
    }

    .breaking-text{
      color:#93c5fd;
      font-size:14px;
      font-weight:500;
      letter-spacing:0.3px;
    }

    /* Líneas azules decorativas */
    .blue-lines{
      margin-left:auto;
      display:flex;
      flex-direction:column;
      gap:3px;
      flex-shrink:0;
    }

    .blue-lines span{
      display:block;
      height:2px;
      background:linear-gradient(90deg, var(--azul-bright), transparent);
      border-radius:2px;
    }

    .blue-lines span:nth-child(1){width:40px;}
    .blue-lines span:nth-child(2){width:60px;}
    .blue-lines span:nth-child(3){width:48px;}
    .blue-lines span:nth-child(4){width:32px;}

    /* ══════════════════════════════
       CONTAINER
    ══════════════════════════════ */
    .container{
      max-width:1280px;
      margin:0 auto;
      padding:36px 28px;
    }

    /* ══════════════════════════════
       SECCIÓN TÍTULO
    ══════════════════════════════ */
    .section-head{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:24px;
    }

    .section-head h2{
      font-family:'Oswald',sans-serif;
      font-size:18px;
      font-weight:600;
      color:var(--blanco);
      letter-spacing:2px;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .section-head .accent-line{
      flex:1;
      height:2px;
      background:linear-gradient(90deg, var(--rojo), var(--azul-bright), transparent);
    }

    .section-head .tag-label{
      background:var(--rojo);
      color:#fff;
      font-family:'Oswald',sans-serif;
      font-size:11px;
      letter-spacing:2px;
      padding:3px 10px;
      border-radius:2px;
      white-space:nowrap;
    }

    /* ══════════════════════════════
       NOTICIA DESTACADA
    ══════════════════════════════ */
    .destacada-wrap{
      margin-bottom:48px;
    }

    .destacada{
      position:relative;
      border-radius:8px;
      overflow:hidden;
      cursor:pointer;
      display:block;
      border:1px solid rgba(255,255,255,0.06);
    }

    .destacada-img-bg{
      width:100%;
      height:520px;
      object-fit:cover;
      display:block;
      transition:transform 0.6s ease;
    }

    .destacada:hover .destacada-img-bg{
      transform:scale(1.02);
    }

    .destacada-placeholder-bg{
      width:100%;
      height:520px;
      background:linear-gradient(135deg, #0d1b2e 0%, #1a2a4a 50%, #0d1b2e 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }

    /* Mapa del mundo SVG de fondo */
    .world-bg{
      position:absolute;
      inset:0;
      opacity:0.08;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500'%3E%3Cpath fill='%23fff' d='M150,80 Q180,60 220,70 Q260,80 280,100 Q300,120 290,150 Q280,180 250,190 Q220,200 190,185 Q160,170 145,145 Q130,120 150,80Z M320,60 Q360,40 400,55 Q440,70 450,100 Q460,130 440,155 Q420,180 385,178 Q350,176 330,155 Q310,134 320,60Z M500,40 Q550,20 590,45 Q630,70 625,110 Q620,150 585,165 Q550,180 520,160 Q490,140 495,40Z M680,70 Q720,50 755,75 Q790,100 780,135 Q770,170 740,178 Q710,186 690,165 Q670,144 680,70Z M100,220 Q140,200 175,220 Q210,240 205,270 Q200,300 170,310 Q140,320 115,300 Q90,280 100,220Z M800,200 Q840,185 870,210 Q900,235 890,265 Q880,295 850,300 Q820,305 805,280 Q790,255 800,200Z M250,320 Q290,300 330,325 Q370,350 360,385 Q350,420 315,425 Q280,430 260,405 Q240,380 250,320Z M600,310 Q640,290 675,315 Q710,340 700,375 Q690,410 655,415 Q620,420 605,395 Q590,370 600,310Z'/%3E%3C/svg%3E");
      background-size:cover;
    }

    .destacada-placeholder-bg .globe-icon{
      font-size:120px;
      opacity:0.15;
    }

    .destacada-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(
        to top,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.7) 40%,
        rgba(0,0,0,0.1) 100%
      );
    }

    .destacada-content{
      position:absolute;
      bottom:0;left:0;right:0;
      padding:36px 40px;
    }

    .destacada-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:var(--rojo);
      color:#fff;
      font-family:'Oswald',sans-serif;
      font-size:12px;
      font-weight:600;
      letter-spacing:2px;
      padding:5px 14px;
      margin-bottom:16px;
    }

    .destacada-titulo{
      font-family:'Oswald',sans-serif;
      font-size:42px;
      font-weight:700;
      line-height:1.1;
      color:#fff;
      margin-bottom:14px;
      text-shadow:0 2px 20px rgba(0,0,0,0.8);
      max-width:800px;
    }

    /* Franja roja estilo broadcast bajo el título */
    .destacada-franja{
      background:linear-gradient(90deg, var(--rojo) 0%, rgba(200,21,27,0.6) 70%, transparent 100%);
      padding:8px 20px;
      margin-bottom:18px;
      display:flex;
      align-items:center;
      gap:16px;
      position:relative;
    }

    .destacada-franja::after{
      content:'';
      position:absolute;
      right:0;top:0;bottom:0;
      width:120px;
      background:linear-gradient(90deg, transparent, rgba(26,58,107,0.8));
    }

    .destacada-resumen{
      color:rgba(255,255,255,0.9);
      font-size:14px;
      font-weight:500;
      flex:1;
    }

    .destacada-meta{
      display:flex;
      align-items:center;
      gap:20px;
      color:rgba(255,255,255,0.55);
      font-size:13px;
    }

    /* Logo weazel esquina */
    .destacada-corner-logo{
      position:absolute;
      bottom:36px;right:40px;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:6px;
    }

    .destacada-corner-logo img{
      height:48px;
      width:auto;
      object-fit:contain;
      filter:drop-shadow(0 2px 8px rgba(0,0,0,0.8));
    }

    /* Líneas azules esquina */
    .corner-lines{
      display:flex;
      flex-direction:column;
      gap:3px;
      align-items:flex-end;
    }

    .corner-lines span{
      display:block;
      height:2px;
      background:linear-gradient(90deg, transparent, var(--azul-bright));
      border-radius:2px;
    }

    .corner-lines span:nth-child(1){width:50px;}
    .corner-lines span:nth-child(2){width:70px;}
    .corner-lines span:nth-child(3){width:55px;}
    .corner-lines span:nth-child(4){width:38px;}

    .btn-leer-destacada{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(255,255,255,0.1);
      border:1px solid rgba(255,255,255,0.25);
      color:#fff;
      font-family:'Oswald',sans-serif;
      font-size:13px;
      font-weight:600;
      letter-spacing:1.5px;
      padding:10px 22px;
      margin-top:8px;
      transition:background 0.3s;
      width:fit-content;
    }

    .btn-leer-destacada:hover{
      background:var(--rojo);
      border-color:var(--rojo);
    }

    /* ══════════════════════════════
       GRID DE NOTICIAS
    ══════════════════════════════ */
    .noticias-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
      gap:22px;
    }

    .card{
      background:var(--negro3);
      border:1px solid rgba(255,255,255,0.06);
      border-radius:6px;
      overflow:hidden;
      cursor:pointer;
      transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
      display:flex;
      flex-direction:column;
    }

    .card:hover{
      transform:translateY(-5px);
      border-color:var(--rojo);
      box-shadow:0 8px 32px rgba(200,21,27,0.2);
    }

    .card-img-wrap{
      position:relative;
      overflow:hidden;
    }

    .card-img{
      width:100%;
      height:190px;
      object-fit:cover;
      display:block;
      transition:transform 0.4s;
    }

    .card:hover .card-img{transform:scale(1.05);}

    .card-img-placeholder{
      width:100%;
      height:190px;
      background:linear-gradient(135deg,#0d1b2e,#1a2a4a);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:38px;
      position:relative;
      overflow:hidden;
    }

    .card-img-placeholder .world-bg{opacity:0.05;}

    /* Franja inferior de imagen */
    .card-img-bar{
      position:absolute;
      bottom:0;left:0;right:0;
      height:4px;
      background:linear-gradient(90deg, var(--rojo), var(--azul-bright));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform 0.3s;
    }

    .card:hover .card-img-bar{transform:scaleX(1);}

    .card-body{
      padding:18px 20px;
      flex:1;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .card-fecha{
      color:#1a3253;
      font-size:11px;
      letter-spacing:1px;
      text-transform:uppercase;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .card-fecha::before{
      content:'';
      display:block;
      width:16px;height:2px;
      background:var(--rojo);
      border-radius:2px;
    }

    .card-titulo{
      font-family:'Oswald',sans-serif;
      font-size:18px;
      font-weight:600;
      line-height:1.3;
      color:var(--azul);
    }

    .card-resumen{
      color:#181b1f;
      font-size:14px;
      line-height:1.65;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
      flex:1;
    }

    .card-footer{
      padding:12px 20px;
      border-top:1px solid rgba(255,255,255,0.05);
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .card-autor{
      color:#334155;
      font-size:12px;
      display:flex;
      align-items:center;
      gap:5px;
    }

    .card-leer{
      color:var(--azul-bright);
      font-size:12px;
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      transition:color 0.2s;
    }

    .card:hover .card-leer{color:var(--rojo);}

    /* ══════════════════════════════
       ARTÍCULO INDIVIDUAL
    ══════════════════════════════ */
    .articulo-wrap{
      max-width:920px;
      margin:0 auto;
    }

    .articulo-back{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#475569;
      font-size:13px;
      margin-bottom:28px;
      letter-spacing:1px;
      text-transform:uppercase;
      transition:color 0.2s;
    }

    .articulo-back:hover{color:var(--blanco);}

    /* Banner estilo broadcast */
    .articulo-banner{
      position:relative;
      margin-bottom:32px;
      border-radius:6px;
      overflow:hidden;
    }

    .articulo-banner-img{
      width:100%;
      max-height:480px;
      object-fit:cover;
      display:block;
    }

    .articulo-banner-placeholder{
      width:100%;
      height:360px;
      background:linear-gradient(135deg,#0d1b2e,#1a2a4a);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:72px;
    }

    .articulo-lower-third{
      position:absolute;
      bottom:0;left:0;right:0;
    }

    .lower-third-titulo{
      background:rgba(0,0,0,0.85);
      padding:12px 24px;
      font-family:'Oswald',sans-serif;
      font-size:28px;
      font-weight:700;
      color:#fff;
      text-transform:uppercase;
    }

    .lower-third-sub{
      background:linear-gradient(90deg, var(--rojo) 0%, rgba(200,21,27,0.8) 80%, transparent 100%);
      padding:7px 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .lower-third-sub span{
      color:#fff;
      font-size:13px;
      font-weight:500;
    }

    .lower-third-logo{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .lower-third-logo img{height:28px;width:auto;object-fit:contain;}

    .lower-third-corner{
      display:flex;
      flex-direction:column;
      gap:2px;
      align-items:flex-end;
    }

    .lower-third-corner span{
      display:block;
      height:2px;
      background:linear-gradient(90deg,transparent,var(--azul-bright));
      border-radius:2px;
    }

    .lower-third-corner span:nth-child(1){width:35px;}
    .lower-third-corner span:nth-child(2){width:50px;}
    .lower-third-corner span:nth-child(3){width:40px;}

    .articulo-body{padding:8px 0;}

    .articulo-body h1{
      font-family:'Oswald',sans-serif;
      font-size:36px;
      font-weight:700;
      line-height:1.2;
      margin-bottom:16px;
    }

    .articulo-meta{
      display:flex;
      align-items:center;
      gap:20px;
      color:#131416;
      font-size:13px;
      padding:16px 0;
      border-top:1px solid rgba(255,255,255,0.06);
      border-bottom:1px solid rgba(255,255,255,0.06);
      margin-bottom:28px;
    }

    .articulo-meta strong{color:var(--azul);}

    .articulo-contenido{
      color:#101010;
      font-size:16px;
      line-height:1.9;
      white-space:pre-wrap;
    }

    /* ══════════════════════════════
       EMPTY
    ══════════════════════════════ */
    .empty-state{
      text-align:center;
      padding:100px 20px;
      color:#1e293b;
    }

    .empty-state .icon{font-size:64px;margin-bottom:20px;opacity:0.3;}
    .empty-state p{font-family:'Oswald',sans-serif;font-size:20px;letter-spacing:2px;color:#1e293b;}

    /* ══════════════════════════════
       TICKER BOTTOM
    ══════════════════════════════ */
    .ticker-bottom{
      background:#010826e5;
      border-top:3px solid var(--rojo);
      height:38px;
      display:flex;
      align-items:center;
      overflow:hidden;
      margin-top:60px;
    }

    .ticker-bottom .ticker-label{
      background:var(--azul);
      border-right:2px solid var(--azul-bright);
      font-size:11px;
    }

    .ticker-bottom .ticker-inner{
      animation:ticker 40s linear infinite;
    }

    /* ══════════════════════════════
       FOOTER
    ══════════════════════════════ */
    footer{
      background:#021031d2;
      border-top:1px solid rgba(255,255,255,0.05);
      padding:20px 40px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:12px;
    }

    .footer-left{
      height: 50px;
      display:flex;
      align-items:center;
      gap:20px;
    }

    .footer-left img{
      height:30px;
      width:auto;
      object-fit:contain;
      opacity:0.8;
    }

    footer p{color:#9ba4b3;font-size:12px;}
    footer span{color:var(--rojo);}

    /* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */
    @media(max-width:768px){
      .header-main{padding:12px 20px;}
      .weazel-logo-wrap img{height:52px;}
      .destacada-titulo{font-size:26px;}
      .container{padding:24px 16px;}
      .lower-third-titulo{font-size:20px;}
      footer{flex-direction:column;align-items:flex-start;}
    }

    /* SIDEBAR VIDEOS */
.layout-con-sidebar{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:28px;
  align-items:start;
}

.sidebar-videos{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:160px;
}

.sidebar-title{
  margin-bottom:4px;
}

.video-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.video-card iframe{
  width:100%;
  height:160px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.08);
}

.video-titulo{
  color:#94a3b8;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
}

@media(max-width:900px){
  .layout-con-sidebar{
    grid-template-columns:1fr;
  }
}