:root{
    --bg:#FFFFFF;
    --bg-soft:#F7F8F6;
    --ink:#1B1F1D;
    --ink-soft:#5B655E;
    --line: rgba(27,31,29,0.10);
    --green:#1E7A4D;
    --green-deep:#123D28;
    --green-tint: rgba(30,122,77,0.08);
    --red:#C8262C;
    --red-deep:#8C1A1F;
    --red-tint: rgba(200,38,44,0.08);
    --gold:#C98A22;
    --nav-green:#598E0F;
    --nav-green-deep:#3E630A;
    --maxw: 1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Work Sans', -apple-system, Segoe UI, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3, .display{
    font-family:'Anton', 'Arial Narrow', sans-serif;
    font-weight:400;
    letter-spacing:0.01em;
    line-height:1.05;
    color:var(--ink);
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; padding:5px 12px;
    border-radius:100px; border:1px solid transparent;
  }
  .tag.green{color:var(--green-deep); border-color:rgba(30,122,77,0.3); background:var(--green-tint);}
  .tag.red{color:var(--red-deep); border-color:rgba(200,38,44,0.3); background:var(--red-tint);}
  .tag.gold{color:#8A5D14; border-color:rgba(201,138,34,0.3); background:rgba(201,138,34,0.08);}

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--nav-green);
    border-bottom:1px solid var(--nav-green-deep);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:74px;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-mark{
    width:44px; height:44px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 2px rgba(255,255,255,0.85);
  }
  .brand-name{font-family:'Anton', sans-serif; font-size:20px; letter-spacing:0.03em; color:var(--ink);}
  .brand-sub{font-size:11px; color:var(--ink-soft); letter-spacing:0.03em; margin-top:-2px;}
  header .brand-name{color:#fff;}
  header .brand-sub{color:rgba(255,255,255,0.8);}

  .nav-links{display:flex; gap:34px; font-size:14.5px; font-weight:600;}
  .nav-links a{color:var(--ink); position:relative; padding:6px 0;}
  .nav-links a:hover{color:var(--green-deep);}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
    background:var(--red); transition:width .25s ease;
  }
  .nav-links a.active{color:var(--green-deep);}
  .nav-links a.active::after, .nav-links a:hover::after{width:100%;}
  header .nav-links a{color:#fff;}
  header .nav-links a:hover, header .nav-links a.active{color:#FCEBA8;}

  .nav-cta{display:flex; align-items:center; gap:14px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:6px; font-weight:700; font-size:14px;
    border:1.5px solid transparent; cursor:pointer;
  }
  .btn-solid{background:var(--green); color:#fff;}
  .btn-solid:hover{background:var(--green-deep);}
  .btn-live{background:var(--red); color:#fff;}
  .btn-live:hover{background:var(--red-deep);}
  .btn-outline{border-color:var(--ink); color:var(--ink);}
  .btn-outline:hover{border-color:var(--green); color:var(--green-deep);}
  .nav-cta .btn-outline{border-color:rgba(255,255,255,0.85); color:#fff;}
  .nav-cta .btn-outline:hover{background:rgba(255,255,255,0.15); border-color:#fff; color:#fff;}

  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .burger span{width:24px; height:2px; background:var(--ink);}
  header .burger span{background:#fff;}

  /* ---------- TICKER ---------- */
  .ticker{
    background:var(--red); overflow:hidden; white-space:nowrap;
  }
  .ticker-track{
    display:inline-flex; gap:52px; padding:9px 0;
    animation: scroll-ticker 32s linear infinite;
    font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    color:#fff;
  }
  .ticker-track b{color:#FCEBA8; margin-right:8px;}
  @keyframes scroll-ticker{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* ---------- HERO ---------- */
  .hero{position:relative; border-bottom:1px solid var(--line); background:var(--bg-soft); overflow:hidden;}
  .hero::before{
    content:""; position:absolute; inset:0;
    background-image:url('../bg/hero-bg.jpg?v=3');
    background-size:cover; background-position:center 35%;
    opacity:0.70; filter:saturate(1.1);
    z-index:0;
  }
  .hero::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 34%, rgba(255,255,255,0.38) 55%, rgba(255,255,255,0.55) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.5) 78%, #F7F8F6 100%);
    z-index:0;
  }
  .hero .wrap{position:relative; z-index:1;}
  .hero .wrap{
    display:grid; grid-template-columns:1.05fr 0.8fr; gap:48px;
    align-items:center; padding-top:64px; padding-bottom:64px;
  }
  .hero-eyebrow{color:var(--red-deep); font-size:14px; margin-bottom:16px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;}
  .hero h1{font-size:clamp(40px, 5.6vw, 68px); color:var(--ink);}
  .hero h1 em{font-style:normal; color:var(--red);}
  .hero p.lead{
    margin-top:22px; font-size:17.5px; color:var(--ink-soft); max-width:46ch;
  }
  .hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .hero-stats{display:flex; gap:36px; margin-top:44px; flex-wrap:wrap;}
  .stat b{font-family:'Anton', sans-serif; font-size:26px; display:block; color:var(--red);}
  .stat span{font-size:12.5px; color:var(--ink-soft);}

  /* ---------- REELS (scroll vertical 9:16) ---------- */
  .reels-frame{
    position:relative; width:100%; max-width:320px; aspect-ratio:9/16;
    margin:0 auto; border-radius:22px; overflow:hidden;
    background:#000; box-shadow:0 24px 50px rgba(18,61,40,0.18), 0 0 0 6px #fff, 0 0 0 7px var(--line);
  }
  .reels-scroll{
    width:100%; height:100%; overflow-y:scroll; scroll-snap-type:y mandatory;
    scrollbar-width:none;
  }
  .reels-scroll::-webkit-scrollbar{display:none;}
  .reel-slide{
    width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
    position:relative; background:#000;
  }
  .reel-slide video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .reels-dots{
    position:absolute; right:9px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:7px; z-index:3;
  }
  .reels-dots span{
    width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.45);
    transition:background .2s ease, height .2s ease;
  }
  .reels-dots span.active{background:#fff; height:16px; border-radius:4px;}
  .reels-sound{
    position:absolute; left:12px; bottom:14px; z-index:3;
    width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(3px);
  }
  .reels-hint{
    position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:3;
    background:rgba(0,0,0,0.45); color:#fff; font-size:11px; font-weight:600;
    padding:5px 12px; border-radius:100px; letter-spacing:0.02em;
  }

  /* ---------- SECTION SHELL ---------- */
  section{padding:88px 0;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:44px; gap:24px; flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(30px,4vw,42px);}
  .section-head p{color:var(--ink-soft); max-width:40ch; font-size:15px;}
  .link-more{font-weight:700; font-size:14.5px; color:var(--red);}
  .link-more:hover{text-decoration:underline;}

  /* ---------- NOTICIAS ---------- */
  .news-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
  .news-card-link{color:inherit; text-decoration:none; display:block; transition:transform .15s ease;}
  .news-card-link:hover{transform:translateY(-3px);}
  .news-card-link:hover .news-card{box-shadow:0 10px 24px rgba(27,31,29,0.12);}
  .news-card{
    background:#fff; border:1px solid var(--line); border-radius:10px;
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 1px 2px rgba(27,31,29,0.04); transition:box-shadow .15s ease;
  }
  .news-thumb{height:170px; position:relative; display:flex; align-items:flex-end; padding:16px; overflow:hidden; background:var(--bg-soft);}
  .news-thumb img, .news-thumb video{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0;}
  .news-thumb::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
  }
  .news-thumb .tag{background:rgba(255,255,255,0.94); position:relative; z-index:2;}
  .news-body{padding:20px 20px 24px; display:flex; flex-direction:column; gap:12px; flex:1;}
  .news-body h3{font-family:'Work Sans',sans-serif; font-weight:700; font-size:18px; line-height:1.3; color:var(--ink);}
  .news-body p{font-size:14px; color:var(--ink-soft);}
  .news-meta{font-size:12.5px; color:#8A9389; margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}

  /* ---------- CULTURA (split) ---------- */
  .cultura{background:var(--bg-soft);}
  .cultura .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .cultura h2{font-size:clamp(30px,4vw,44px); margin-bottom:20px;}
  .cultura h2 em{font-style:normal; color:var(--red);}
  .cultura p{color:var(--ink-soft); font-size:16px; max-width:48ch; margin-bottom:16px;}
  .cultura ul{margin-top:24px; display:flex; flex-direction:column; gap:14px;}
  .cultura li{display:flex; gap:12px; font-size:15px; color:var(--ink); align-items:flex-start;}
  .dot{width:8px; height:8px; border-radius:50%; margin-top:7px; flex-shrink:0;}
  .dot.g{background:var(--green);} .dot.r{background:var(--red);} .dot.gd{background:var(--gold);}
  .mask-art{position:relative; height:380px;}

  /* ---------- INSTAGRAM / PROGRAMAS ---------- */
  .social{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .social-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:16px;}
  .ig-handle{display:flex; align-items:center; gap:14px;}
  .ig-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:6px;}
  .ig-cell{
    aspect-ratio:1; border-radius:6px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-family:'Anton', sans-serif; font-size:13px; color:rgba(255,255,255,0.92);
  }
  /* Color de cada sección — cambia el degradado de esa línea para
     cambiarle el color a esa tarjeta. Primer valor = tono oscuro
     (esquina superior), segundo valor = tono claro (esquina inferior). */
  .ig-carnaval    {background:linear-gradient(160deg, #8C1A1F, #C8262C);}  /* rojo */
  .ig-region      {background:linear-gradient(160deg, #123D28, #1E7A4D);}  /* verde */
  .ig-comunidad   {background:linear-gradient(160deg, #1E3A8A, #2563EB);}  /* azul */
  .ig-entrevista  {background:linear-gradient(160deg, #4C1D95, #7C3AED);}  /* morado */
  .ig-cultura     {background:linear-gradient(160deg, #7A5210, #C98A22);}  /* dorado */
  .ig-noticias    {background:linear-gradient(160deg, #9A3412, #EA580C);}  /* naranja */
  .ig-deporte     {background:linear-gradient(160deg, #3F6212, #65A30D);}  /* verde lima */
  .ig-gastronomia {background:linear-gradient(160deg, #115E59, #0D9488);}  /* verde azulado */
  .ig-especial    {background:linear-gradient(160deg, #9D174D, #DB2777);}  /* magenta */
  .ig-municipios  {background:linear-gradient(160deg, #1E293B, #475569);}  /* gris azulado */
  .ig-turismo     {background:linear-gradient(160deg, #075985, #0EA5E9);}  /* celeste */
  .ig-envivo      {background:linear-gradient(160deg, #7F1D1D, #EF4444);}  /* rojo intenso */

  /* ---------- FOOTER ---------- */
  footer{background:var(--bg-soft); padding:64px 0 28px; border-top:1px solid var(--line);}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  footer h4{font-size:14px; margin-bottom:16px; color:var(--ink);}
  footer ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
  footer a{color:var(--ink-soft); font-size:14px;}
  footer a:hover{color:var(--green-deep);}
  .foot-brand p{color:var(--ink-soft); font-size:14px; margin-top:14px; max-width:34ch;}
  .foot-bottom{
    margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; font-size:12.5px; color:#8A9389; flex-wrap:wrap; gap:10px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    .nav-links, .nav-cta .btn-outline{display:none;}
    .burger{display:flex;}
    .hero .wrap{grid-template-columns:1fr; padding-top:44px; padding-bottom:44px;}
    .reels-frame{order:-1; max-width:260px;}
    .news-grid{grid-template-columns:1fr;}
    .cultura .wrap{grid-template-columns:1fr;}
    .mask-art{height:240px;}
    .ig-grid{grid-template-columns:repeat(3,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }

/* ---------- PÁGINAS DE CATEGORÍA (carnaval, región, comunidad, entrevistas) ---------- */
.cat-hero{background:var(--bg-soft); padding:56px 0; border-bottom:1px solid var(--line);}
.cat-hero h1{font-size:clamp(32px,5vw,52px);}
.cat-hero h1 em{font-style:normal; color:var(--red);}
.cat-hero p{color:var(--ink-soft); margin-top:14px; max-width:60ch; font-size:16px;}
.cat-back{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-bottom:18px;}
.cat-back:hover{color:var(--green-deep);}

.cat-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; padding:64px 0;}
.cat-item-link{color:inherit; text-decoration:none; display:block;}
.cat-item-link:hover .cat-item{box-shadow:0 10px 24px rgba(27,31,29,0.12);}
.cat-item{
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 1px 2px rgba(27,31,29,0.04); transition:box-shadow .15s ease;
}
.cat-item .cat-media{aspect-ratio:4/3; background:var(--bg-soft); position:relative; overflow:hidden;}
.cat-item .cat-media img, .cat-item .cat-media video{width:100%; height:100%; object-fit:cover; display:block;}
.cat-item .cat-body{padding:16px 18px 20px;}
.cat-item h3{font-family:'Work Sans',sans-serif; font-weight:700; font-size:16px; color:var(--ink); margin-bottom:6px;}
.cat-item p{font-size:13.5px; color:var(--ink-soft);}
.cat-empty{
  border:1.5px dashed var(--line); border-radius:10px; padding:40px 24px; text-align:center;
  color:var(--ink-soft); font-size:14px; grid-column:1/-1;
}
@media (max-width:900px){ .cat-grid{grid-template-columns:1fr;} }

/* ---------- CELDAS DE CATEGORÍA CLICKEABLES (grilla estilo Instagram) ---------- */
.ig-cell-link{display:block; cursor:pointer;}
.ig-cell-link .ig-cell{transition:transform .2s ease, filter .2s ease;}
.ig-cell-link:hover .ig-cell{transform:scale(1.03); filter:brightness(1.08);}


/* ---------- REPRODUCTOR DEL JINGLE (flotante) ---------- */
.jingle-player{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:100px;
  padding:9px 16px 9px 9px; box-shadow:0 10px 26px rgba(27,31,29,0.16);
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.jingle-toggle{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.jingle-toggle:hover{background:var(--green-deep);}
.jingle-player:not(.playing) .jingle-toggle{background:var(--ink-soft);}
.jingle-label b{color:var(--green-deep);}
.jingle-volume{
  width:70px; accent-color:var(--green); cursor:pointer;
}
@media (max-width:900px){
  .jingle-player{right:12px; bottom:12px; padding:8px 12px 8px 8px;}
  .jingle-label{display:none;}
  .jingle-volume{width:56px;}
}

/* ---------- PÁGINA DE DETALLE DE NOTICIA (noticia.html) ---------- */
.noticia-media{margin:32px 0 24px;}
.noticia-texto{font-size:17px; line-height:1.7; color:var(--ink); white-space:pre-line;}
