/* ================================================================
   MPPTV — Streaming Platform v4.0
   Diseño aprobado — basado en preview
   ================================================================ */

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

:root {
  --acc:   var(--color-primario, #E50914);
  --bg:    #0F0F0F;
  --bg2:   #1A1A1A;
  --bg3:   #242424;
  --bg4:   #2E2E2E;
  --t1:    #FFFFFF;
  --t2:    #A3A3A3;
  --t3:    #525252;
  --nav-h: 64px;
  --font:  -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --r:     5px;
}

html { scroll-behavior: smooth }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
}
a    { text-decoration: none; color: inherit }
img  { display: block; max-width: 100% }
button { cursor: pointer; font-family: var(--font) }

/* ================================================================
   NAVBAR
   ================================================================ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(0,0,0,.88) 0%, transparent 100%);
  transition: background .35s ease;
}
.site-header.scrolled { background: var(--bg) }

.header-inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--nav-h); padding: 0 5%;
}

.site-logo {
  font-size: 26px; font-weight: 900; letter-spacing: -1.5px;
  color: var(--acc); font-style: italic; flex-shrink: 0;
  line-height: 1;
}
.site-logo img {
  height: 34px; width: auto; object-fit: contain; max-width: 140px;
  font-style: normal;
}

.main-nav { display: flex; gap: 0; flex: 1 }
.main-nav a {
  padding: 6px 13px; border-radius: var(--r);
  font-size: 13.5px; font-weight: 400;
  color: rgba(255,255,255,.68);
  transition: color .12s; white-space: nowrap;
}
.main-nav a:hover  { color: #fff }
.main-nav a.active { color: #fff; font-weight: 600 }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0 }

/* Botón EN VIVO */
.btn-vivo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r);
  background: var(--acc); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  border: none; transition: opacity .15s; white-space: nowrap;
}
.btn-vivo:hover { opacity: .88 }

.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  flex-shrink: 0; animation: blink 1.3s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.15} }

/* Dropdown EN VIVO */
.vivo-dropdown { position: relative }
.vivo-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 290px; background: #1c1c1c;
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  overflow: hidden; z-index: 300;
  box-shadow: 0 20px 60px rgba(0,0,0,.85);
}
.vivo-menu.open { display: block }
.vivo-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .12s;
}
.vivo-menu-item:last-child { border: none }
.vivo-menu-item:hover { background: rgba(255,255,255,.06) }
.vmi-pulse {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(229,9,20,.12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.vmi-pulse i { color: var(--acc); font-size: 14px }
.vmi-prog  { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px }
.vmi-ep    { font-size: 11.5px; color: var(--t2) }
.vmi-play  { margin-left: auto; color: var(--acc); font-size: 18px; flex-shrink: 0; opacity: .7 }

/* Icono intranet */
.btn-intranet {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg3); border: 1.5px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--t2); font-size: 15px; transition: all .15s;
}
.btn-intranet:hover { background: var(--bg4); color: #fff }

/* Hamburger */
.hamburger {
  display: none; background: none; border: none; color: #fff;
  font-size: 22px; padding: 4px; margin-left: auto;
}

/* Mobile nav drawer */
.mobile-nav {
  display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 280px;
  background: #181818; z-index: 400; padding: 20px;
  flex-direction: column; gap: 3px;
  border-left: 1px solid rgba(255,255,255,.07);
}
.mobile-nav.open { display: flex }
.mobile-nav a {
  padding: 12px 14px; border-radius: 6px;
  font-size: 15px; font-weight: 500; color: var(--t2);
  display: flex; align-items: center; gap: 10px;
  transition: all .12s;
}
.mobile-nav a:hover, .mobile-nav a.active { color: #fff; background: rgba(255,255,255,.06) }
.mobile-nav a.active { color: #fff }
.mobile-nav-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg3); border: none; color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-overlay {
  display: none; position: fixed; inset: 0; z-index: 390;
  background: rgba(0,0,0,.65);
}
.mobile-overlay.show { display: block }

/* ================================================================
   PLAYER OVERLAY
   ================================================================ */
.player-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.97);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.player-overlay.open { opacity: 1; pointer-events: auto }
.player-close {
  position: absolute; top: 20px; right: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.player-close:hover { background: rgba(255,255,255,.2) }
.player-wrap { width: 100%; max-width: 1100px; padding: 0 24px }
.player-title { font-size: 14px; color: var(--t2); margin-bottom: 12px; padding-left: 2px }
.player-iframe-wrap {
  position: relative; padding-bottom: 56.25%;
  border-radius: 8px; overflow: hidden;
}
.player-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative; overflow: hidden;
  width: 100%; background: var(--bg);
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .7s ease;
}
.hero-slide.active  { opacity: 1; position: relative; z-index: 2 }
.hero-slide:not(.active) { z-index: 1 }

.hero-bg {
  width: 100%; min-height: 500px;
  aspect-ratio: 21/9; max-height: 88vh;
  background-size: cover; background-position: center 20%;
  position: relative;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(77deg, rgba(15,15,15,.95) 0%, rgba(15,15,15,.7) 40%, rgba(15,15,15,.15) 100%),
    linear-gradient(0deg,  rgba(15,15,15,1)   0%, rgba(15,15,15,.5) 18%, transparent 55%);
}

.hero-content {
  position: absolute; bottom: 0; left: 0; z-index: 5;
  padding: 0 5% 52px; max-width: 580px;
}

/* Eyebrow badges */
.hero-eyebrow { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap }
.eyebrow-tag {
  padding: 3px 10px; border-radius: 3px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.tag-live { background: var(--acc); color: #fff }
.tag-cat  { background: rgba(255,255,255,.12); color: rgba(255,255,255,.75) }

/* Título hero */
.hero-title {
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 800; line-height: .95;
  letter-spacing: -2px; color: #fff; margin-bottom: 12px;
}
.hero-title .accent { color: var(--acc) }

/* Meta */
.hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.hero-meta-item { font-size: 12.5px; color: var(--t2) }
.hero-meta-sep  { width: 3px; height: 3px; border-radius: 50%; background: var(--t3) }
.hero-meta-live { color: #4ade80 !important }

.hero-desc {
  font-size: 14px; color: rgba(255,255,255,.62);
  line-height: 1.65; margin-bottom: 22px; max-width: 440px;
}
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }

/* Indicadores */
.hero-indicators {
  position: absolute; right: 5%; bottom: 58px; z-index: 10;
  display: flex; gap: 5px;
}
.hi {
  width: 24px; height: 2.5px; border-radius: 2px;
  background: rgba(255,255,255,.25); border: none; cursor: pointer;
  transition: all .3s;
}
.hi.active { background: #fff; width: 36px }

/* Flechas */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.2);
  color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all .22s;
}
.hero:hover .hero-arrow { opacity: 1 }
.hero-arrow:hover  { background: rgba(0,0,0,.8); border-color: rgba(255,255,255,.45) }
.hero-arrow.prev   { left: 2% }
.hero-arrow.next   { right: 2% }

/* ================================================================
   BOTONES
   ================================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: var(--r);
  background: #fff; color: #000;
  font-size: 15px; font-weight: 700; border: none;
  transition: background .15s, transform .12s;
}
.btn-primary:hover { background: rgba(255,255,255,.85); transform: scale(1.02) }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r);
  background: rgba(255,255,255,.18); color: #fff;
  font-size: 15px; font-weight: 600; border: none;
  transition: background .15s;
}
.btn-secondary:hover { background: rgba(255,255,255,.26) }

/* ================================================================
   EN VIVO SECTION
   ================================================================ */
.live-section {
  padding: 18px 5% 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.live-section-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.live-dot-lg {
  width: 9px; height: 9px; border-radius: 50%; background: var(--acc);
  animation: blink 1.3s ease-in-out infinite; flex-shrink: 0;
}
.live-section-title { font-size: 18px; font-weight: 700 }
.live-section-sub   { font-size: 12px; color: var(--t3); margin-bottom: 14px }

.live-cards  { display: flex; gap: 10px; flex-wrap: wrap }
.live-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-radius: 6px;
  background: rgba(229,9,20,.06); border: 1px solid rgba(229,9,20,.18);
  flex: 1; min-width: 200px; max-width: 400px; cursor: pointer;
  transition: all .18s;
}
.live-card:hover {
  background: rgba(229,9,20,.12); border-color: rgba(229,9,20,.35);
  transform: translateY(-2px);
}
.live-pulse {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(229,9,20,.12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(229,9,20,.35) }
  60%      { box-shadow: 0 0 0 9px rgba(229,9,20,0) }
}
.live-pulse i { color: var(--acc); font-size: 15px }
.live-card-prog  { font-size: 12.5px; font-weight: 600; color: #fff }
.live-card-ep    { font-size: 11px; color: var(--t2); margin-top: 1px }
.live-card-play  { margin-left: auto; color: var(--acc); font-size: 20px; opacity: .7; flex-shrink: 0 }

/* ================================================================
   CONTENT ROWS — Filas tipo Netflix
   ================================================================ */
.content-row { padding: 10px 5% 6px }

.row-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.row-label { font-size: 18px; font-weight: 700; color: #fff }
.row-more {
  font-size: 12px; font-weight: 500; color: var(--acc);
  display: flex; align-items: center; gap: 2px;
  cursor: pointer; transition: gap .12s;
}
.row-more:hover { gap: 6px }

.row-carousel { position: relative }
.row-track {
  display: flex; gap: 7px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.row-track::-webkit-scrollbar { display: none }

/* Botones de fila */
.row-btn {
  position: absolute; top: 0; bottom: 0; width: 52px;
  background: linear-gradient(90deg, transparent, rgba(15,15,15,.9));
  border: none; color: #fff; font-size: 20px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; z-index: 10;
}
.row-carousel:hover .row-btn { display: flex }
.row-btn.prev {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(15,15,15,.9));
  border-radius: 0 4px 4px 0;
}
.row-btn.next {
  right: 0;
  border-radius: 4px 0 0 4px;
}
.row-btn:hover { background: rgba(15,15,15,.95) }

/* ── NF CARD ── */
.nf-card {
  flex: 0 0 168px; scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden;
  background: var(--bg3); cursor: pointer; position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}
.nf-card:hover {
  transform: scale(1.07);
  box-shadow: 0 12px 40px rgba(0,0,0,.65);
  z-index: 5;
}
.nf-card .thumb {
  aspect-ratio: 16/9; overflow: hidden; background: var(--bg2); position: relative;
}
.nf-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.nf-card:hover .thumb img { transform: scale(1.06) }
.nf-card .thumb-empty {
  width: 100%; height: 100%; background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 28px;
}
/* Overlay play */
.card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .18s;
}
.nf-card:hover .card-overlay { opacity: 1 }
.card-play-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
}
.card-play-btn i { font-size: 18px; color: #000; margin-left: 2px }

/* Badges en card */
.card-badge {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  padding: 2px 7px; border-radius: 3px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.badge-live { background: var(--acc); color: #fff }
.badge-cat  { background: rgba(0,0,0,.72); color: rgba(255,255,255,.78) }
.badge-new  { background: #22d3a0; color: #000 }

/* Info debajo */
.nf-card .card-body { padding: 8px 10px 10px }
.card-prog {
  font-size: 10.5px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px;
}
.card-name { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3 }
.card-meta { font-size: 10.5px; color: var(--t3); margin-top: 3px }

/* Card wide */
.nf-card.wide { flex: 0 0 240px }

/* ── NEWS CARDS ── */
.news-main {
  flex: 0 0 280px; scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden;
  background: var(--bg3); cursor: pointer;
  transition: transform .2s;
}
.news-main:hover { transform: scale(1.03) }
.news-main .nm-img { height: 144px; overflow: hidden; background: var(--bg2) }
.news-main .nm-img img { width: 100%; height: 100%; object-fit: cover }
.news-main .nm-body { padding: 10px 12px 12px }
.news-main .nm-cat {
  font-size: 10px; font-weight: 700; color: var(--acc);
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 5px;
}
.news-main .nm-title { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.4 }
.news-main .nm-date  { font-size: 11px; color: var(--t3); margin-top: 5px }

.news-sm {
  flex: 0 0 230px; scroll-snap-align: start;
  display: flex; gap: 9px; padding: 10px;
  border-radius: var(--r); background: var(--bg3);
  cursor: pointer; transition: background .12s;
}
.news-sm:hover { background: var(--bg2) }
.news-sm .ns-img { width: 72px; height: 54px; border-radius: 4px; overflow: hidden; flex-shrink: 0 }
.news-sm .ns-img img { width: 100%; height: 100%; object-fit: cover }
.ns-title {
  font-size: 12px; font-weight: 600; color: #fff; line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ns-date { font-size: 10.5px; color: var(--t3) }

/* ── EVENT CARDS ── */
.evt-card {
  flex: 0 0 240px; scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden;
  background: var(--bg3); border: 1px solid rgba(255,255,255,.05);
  cursor: pointer; transition: all .18s;
}
.evt-card:hover { border-color: rgba(255,255,255,.12); transform: translateY(-3px) }
.evt-card .evt-img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg2) }
.evt-card .evt-img img { width: 100%; height: 100%; object-fit: cover }
.evt-body { padding: 10px 12px 12px }
.evt-date-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--acc); margin-bottom: 6px;
}
.evt-title { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35 }
.evt-place { font-size: 11px; color: var(--t3); margin-top: 4px; display: flex; align-items: center; gap: 3px }

/* ── BLOG CARDS ── */
.blog-card {
  flex: 0 0 196px; scroll-snap-align: start;
  border-radius: var(--r); overflow: hidden;
  background: var(--bg3); border: 1px solid rgba(255,255,255,.04);
  cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column;
}
.blog-card:hover { border-color: rgba(255,255,255,.1); transform: translateY(-3px) }
.blog-card .blog-img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg2) }
.blog-card .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s }
.blog-card:hover .blog-img img { transform: scale(1.05) }
.blog-body { padding: 9px 11px 11px; flex: 1 }
.blog-cat {
  font-size: 10px; font-weight: 700; color: var(--acc);
  letter-spacing: .4px; text-transform: uppercase; margin-bottom: 5px;
}
.blog-title { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35 }
.blog-meta  { font-size: 10.5px; color: var(--t3); margin-top: 4px }

/* ================================================================
   CTA STRIP
   ================================================================ */
.cta-strip {
  margin: 24px 5%;
  padding: 36px 44px;
  border-radius: 8px;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cta-strip h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px }
.cta-strip p  { font-size: 13px; color: var(--t2) }
.cta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 24px; border-radius: var(--r);
  background: var(--acc); color: #fff;
  font-size: 14px; font-weight: 700; border: none;
  white-space: nowrap; flex-shrink: 0; transition: opacity .15s;
}
.cta-btn:hover { opacity: .88 }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  margin-top: 48px; padding: 52px 5% 32px;
  background: rgba(0,0,0,.4); border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 44px;
}
.footer-brand p { font-size: 13px; color: var(--t2); line-height: 1.7 }
.footer-addr { font-size: 12px; color: var(--t3); margin-top: 8px; display: flex; align-items: center; gap: 5px }
.footer-social { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap }
.social-btn {
  width: 36px; height: 36px; border-radius: 6px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all .12s;
}
.social-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-2px) }
.footer-col h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 16px;
}
.footer-col ul { list-style: none }
.footer-col li { margin-bottom: 11px }
.footer-col a  { font-size: 13px; color: var(--t2); transition: color .12s }
.footer-col a:hover { color: #fff }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--t3); flex-wrap: wrap; gap: 8px;
}

/* ================================================================
   PÁGINAS INTERNAS
   ================================================================ */
.page-header {
  padding: calc(var(--nav-h) + 40px) 5% 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-header h1 {
  font-size: clamp(28px, 4vw, 48px); font-weight: 800;
  letter-spacing: -1px; margin-bottom: 8px;
}
.page-header p { font-size: 14px; color: var(--t2) }

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; padding: 28px 5%;
}

.filters-bar {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 20px 5% 0; align-items: center;
}
.filter-chip {
  padding: 6px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  color: var(--t2); transition: all .12s; cursor: pointer;
}
.filter-chip:hover { background: rgba(255,255,255,.13); color: #fff }
.filter-chip.active {
  background: rgba(229,9,20,.15); color: var(--acc);
  border-color: rgba(229,9,20,.3);
}

.pagination {
  display: flex; gap: 5px; justify-content: center; padding: 32px 5%;
}
.pg-btn {
  width: 36px; height: 36px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07);
  color: var(--t2); font-size: 13px; font-weight: 500; transition: all .12s;
}
.pg-btn:hover, .pg-btn.active {
  background: rgba(229,9,20,.15); color: var(--acc); border-color: rgba(229,9,20,.3);
}

.search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
}
.search-bar i { font-size: 16px; color: var(--t3) }
.search-bar input {
  background: none; border: none; outline: none;
  color: #fff; font-size: 13px; font-family: var(--font); width: 200px;
}
.search-bar input::placeholder { color: var(--t3) }

/* Secciones genéricas */
.section-inner { padding: 32px 5% }
.empty-state { padding: 60px 5%; text-align: center; color: var(--t3) }
.empty-state i { font-size: 48px; margin-bottom: 16px; display: block; opacity: .4 }
.empty-state p  { font-size: 14px }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24) }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease }
.reveal.visible { opacity: 1; transform: translateY(0) }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (min-width: 1800px) {
  .nf-card { flex: 0 0 200px }
  .nf-card.wide { flex: 0 0 300px }
  .hero-content { max-width: 680px }
}

@media (max-width: 1100px) {
  :root { --nav-h: 60px }
  .header-inner  { padding: 0 4% }
  .hero-content  { padding: 0 4% 44px }
  .content-row   { padding: 10px 4% 6px }
  .live-section  { padding: 18px 4% 14px }
  .cta-strip     { margin: 20px 4%; padding: 28px 32px }
  .site-footer   { padding: 44px 4% 28px }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 28px }
  .programs-grid { padding: 24px 4% }
  .filters-bar   { padding: 16px 4% 0 }
  .page-header   { padding: calc(var(--nav-h) + 32px) 4% 24px }
}

@media (max-width: 768px) {
  :root { --nav-h: 56px }
  .main-nav { display: none }
  .hamburger { display: block }
  .btn-intranet { display: none }

  .hero-bg { aspect-ratio: 4/3; min-height: 360px }
  .hero-bg::after {
    background:
      linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(15,15,15,.6) 30%, transparent 65%),
      linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 30%);
  }
  .hero-content { padding: 0 5% 36px; max-width: 100% }
  .hero-title { font-size: 34px; letter-spacing: -1px }
  .hero-indicators { display: none }
  .hero-arrow { display: none }

  .nf-card { flex: 0 0 136px }
  .nf-card.wide { flex: 0 0 190px }
  .news-main { flex: 0 0 220px }
  .news-sm   { flex: 0 0 200px }
  .evt-card  { flex: 0 0 200px }
  .blog-card { flex: 0 0 160px }

  .live-cards { flex-direction: column }
  .live-card  { max-width: 100% }

  .cta-strip { flex-direction: column; text-align: center; padding: 28px 20px }

  .footer-grid { grid-template-columns: 1fr }
  .footer-col:nth-child(3), .footer-col:nth-child(4) { display: none }
  .site-footer { padding: 36px 5% 24px }
  .footer-bottom { flex-direction: column; text-align: center }

  .programs-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 16px }
  .page-header h1 { font-size: 28px }
  .section-inner { padding: 24px 5% }
}

@media (max-width: 420px) {
  .nf-card { flex: 0 0 120px }
  .hero-title { font-size: 28px }
  .programs-grid { grid-template-columns: repeat(2, 1fr) }
  .hero-btns .btn-secondary { display: none }
}

/* ================================================================
   FORMULARIO DE CONTACTO
   ================================================================ */
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.form-field label {
  font-size:12px; font-weight:600; color:var(--t2);
  letter-spacing:.3px;
}
.form-field label em { color:var(--acc); font-style:normal }

.form-field input,
.form-field textarea,
.form-field select {
  width:100%;
  padding:11px 14px;
  background:#1e1e1e;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  color:#fff;
  font-size:13.5px;
  font-family:var(--font);
  outline:none;
  transition:border-color .15s, background .15s;
  -webkit-appearance:none;
  appearance:none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color:rgba(255,255,255,.2);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color:rgba(255,255,255,.3);
  background:#262626;
}
.form-field textarea {
  resize:vertical;
  min-height:120px;
  line-height:1.6;
}

/* Grid formulario */
.form-grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Feedback */
.contact-feedback {
  padding:10px 14px;
  border-radius:6px;
  font-size:13px;
  margin-bottom:14px;
  display:none;
}
.contact-feedback.success {
  background:rgba(34,211,160,.1);
  border:1px solid rgba(34,211,160,.25);
  color:#4ade80;
}
.contact-feedback.error {
  background:rgba(229,9,20,.08);
  border:1px solid rgba(229,9,20,.25);
  color:#f87171;
  display:block;
}

/* Spinner */
.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:inline-block; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* Layout página contacto */
.contact-layout {
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  padding:32px 5%;
  max-width:1100px;
}
.contact-info-item {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.contact-info-icon {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
}
.contact-info-icon i { font-size:18px; color:var(--acc) }
.contact-info-label {
  font-size:10px; font-weight:700; letter-spacing:.9px;
  color:var(--t3); text-transform:uppercase; margin-bottom:3px;
}
.contact-info-value { font-size:13.5px; color:#fff }
.contact-info-value a { color:#fff; transition:color .12s }
.contact-info-value a:hover { color:var(--acc) }

.contact-form-wrap {
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:28px 32px;
}
.contact-form-title {
  font-size:18px; font-weight:700; margin-bottom:22px; color:#fff;
}

@media (max-width:768px) {
  .contact-layout { grid-template-columns:1fr; gap:32px; padding:20px 5% }
  .form-grid-2 { grid-template-columns:1fr }
  .contact-form-wrap { padding:20px }
}


/* PWA: banner de instalación */
.pwa-install-card[hidden] { display:none !important; }
.pwa-install-card {
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:9999;
  max-width:820px;
  margin:0 auto;
  padding:14px;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(14,14,18,.97);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
}
.pwa-install-icon {
  width:56px;
  height:56px;
  border-radius:16px;
  overflow:hidden;
  flex:0 0 auto;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.pwa-install-icon img { width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.pwa-install-copy { min-width:0; flex:1; }
.pwa-install-copy strong { display:block; font-size:15px; font-weight:900; margin-bottom:3px; color:#fff; }
.pwa-install-copy span { display:block; font-size:12.8px; line-height:1.45; color:var(--t2); }
.pwa-install-copy small { display:block; font-size:11.5px; line-height:1.4; color:var(--t3); margin-top:5px; }
.pwa-install-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.pwa-install-btn,
.pwa-install-secondary {
  border:0;
  border-radius:999px;
  padding:10px 15px;
  font-weight:850;
  font-size:12.5px;
  cursor:pointer;
  white-space:nowrap;
}
.pwa-install-btn {
  background:var(--acc);
  color:#fff;
}
.pwa-install-btn:disabled {
  opacity:.62;
  cursor:not-allowed;
}
.pwa-install-secondary {
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.11);
}
.pwa-install-close {
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}
.pwa-help-modal {
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(8px);
}
.pwa-help-modal.show { display:flex; }
.pwa-help-box {
  width:min(480px, 100%);
  position:relative;
  border-radius:20px;
  padding:22px;
  background:#121218;
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 65px rgba(0,0,0,.55);
}
.pwa-help-box h3 { margin:0 0 10px; font-size:20px; }
.pwa-help-box p { color:var(--t2); line-height:1.55; margin:8px 0; }
.pwa-help-box ol { margin:12px 0 0; padding-left:22px; color:var(--t2); line-height:1.7; }
.pwa-help-box strong { color:#fff; }
.pwa-help-close {
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
@media (max-width:620px) {
  .pwa-install-card { align-items:flex-start; bottom:12px; left:10px; right:10px; border-radius:16px; }
  .pwa-install-actions { flex-direction:column-reverse; align-items:stretch; }
  .pwa-install-btn, .pwa-install-secondary { padding:10px 12px; }
  .pwa-install-icon { width:48px; height:48px; border-radius:14px; }
}



/* ================================================================
   MPPTV — VISUAL RESET PREMIUM LIMPIO v2
   Enfoque: elegante, oscuro, ordenado, sin mover módulos ni romper layout.
   ================================================================ */
:root{
  --acc: var(--color-primario, #18a7e0);
  --acc2: var(--color-secundario, #0b6f99);
  --bg:#050608;
  --bg2:#0b0d11;
  --bg3:#11151b;
  --bg4:#171c24;
  --panel:rgba(17,21,27,.76);
  --panel2:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.095);
  --line2:rgba(255,255,255,.16);
  --t1:#f7f8fb;
  --t2:#a4acb8;
  --t3:#697280;
  --shadow:0 28px 70px rgba(0,0,0,.55);
  --shadow2:0 14px 38px rgba(0,0,0,.36);
  --r:18px;
  --r2:26px;
  --nav-h:76px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
html{background:#050608;}
body{
  background:
    radial-gradient(900px 520px at 18% -12%, rgba(var(--brand-primary-rgb, 24,167,224),.18), transparent 62%),
    radial-gradient(800px 520px at 92% 5%, rgba(255,255,255,.055), transparent 58%),
    linear-gradient(180deg,#07090c 0%,#030405 58%,#050608 100%) !important;
  color:var(--t1);
  font-family:var(--font);
  letter-spacing:.005em;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
}
.container,.header-inner,.footer-grid,.footer-bottom,.content-row,.live-section,.contact-layout{max-width:1440px;margin-left:auto;margin-right:auto;}
.site-header{
  height:var(--nav-h);
  background:linear-gradient(180deg,rgba(5,6,8,.92),rgba(5,6,8,.62)) !important;
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.site-header.scrolled{background:rgba(5,6,8,.92)!important;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.header-inner{height:var(--nav-h);padding:0 32px;gap:26px;}
.site-logo{display:flex;align-items:center;min-width:132px;color:#fff!important;}
.site-logo img{height:38px;max-width:154px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.34));}
.main-nav{align-items:center;gap:6px;}
.main-nav a{
  height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px!important;border-radius:999px!important;
  color:rgba(247,248,251,.68)!important;font-size:13px!important;font-weight:650!important;
  letter-spacing:.01em;position:relative;border:1px solid transparent;
}
.main-nav a:hover{color:#fff!important;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.06)}
.main-nav a.active{color:#fff!important;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.btn-intranet,.btn-vivo{
  border-radius:999px!important;height:40px;border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.07)!important;color:#fff!important;box-shadow:none!important;
}
.btn-vivo{padding:0 16px!important;background:linear-gradient(135deg,var(--acc),#0d7fb1)!important;font-weight:900!important;letter-spacing:.05em;}
.btn-intranet{width:40px;background:rgba(255,255,255,.06)!important;}
.btn-intranet:hover,.btn-vivo:hover{transform:translateY(-1px);filter:brightness(1.07)}
.mobile-nav{background:rgba(8,10,14,.96)!important;border-left:1px solid var(--line)!important;backdrop-filter:blur(24px)}

/* Hero público: cinematográfico pero ordenado */
.hero{padding-top:0;background:transparent!important;min-height:0;}
.hero-bg{min-height:660px;max-height:760px;aspect-ratio:auto;border-bottom:1px solid rgba(255,255,255,.055);}
.hero-bg::after{
  background:
    linear-gradient(90deg,rgba(5,6,8,.96) 0%,rgba(5,6,8,.74) 43%,rgba(5,6,8,.20) 76%,rgba(5,6,8,.54) 100%),
    linear-gradient(0deg,#050608 0%,rgba(5,6,8,.78) 16%,transparent 56%)!important;
}
.hero-content{padding:0 32px 88px!important;max-width:760px;left:50%;transform:translateX(-50%);width:100%;margin-left:calc(-720px + 32px);}
.hero-eyebrow{gap:10px;margin-bottom:18px;}
.eyebrow-tag,.card-badge,.badge-cat,.badge-live,.nm-cat,.blog-cat,.evt-date-tag{
  border-radius:999px!important;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.095)!important;
  color:#fff!important;font-size:10px!important;letter-spacing:.12em!important;font-weight:850!important;
  backdrop-filter:blur(12px);
}
.tag-live,.badge-live{background:linear-gradient(135deg,var(--acc),#0e88bd)!important;border-color:rgba(var(--brand-primary-rgb, 24,167,224),.45)!important;}
.hero-title{font-size:clamp(44px,6.2vw,88px)!important;line-height:.92!important;font-weight:950!important;letter-spacing:-.065em!important;max-width:820px;text-shadow:0 30px 80px rgba(0,0,0,.5);}
.hero-title .accent{color:#fff!important;background:linear-gradient(180deg,#fff,#8ddfff);-webkit-background-clip:text;background-clip:text;color:transparent!important;}
.hero-desc{font-size:16px!important;line-height:1.72!important;color:rgba(247,248,251,.76)!important;max-width:620px;margin-top:18px!important;}
.hero-meta{gap:14px;margin-top:14px!important;color:var(--t2)!important;}
.hero-btns{gap:12px;margin-top:26px!important;}
.btn-primary,.btn-secondary,.cta-btn{
  min-height:44px;border-radius:999px!important;padding:0 20px!important;font-weight:850!important;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none!important;
}
.btn-primary,.cta-btn{background:linear-gradient(135deg,var(--acc),#0d79ad)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 18px 34px rgba(var(--brand-primary-rgb, 24,167,224),.20)!important;}
.btn-secondary{background:rgba(255,255,255,.075)!important;color:#fff!important;border:1px solid rgba(255,255,255,.13)!important;backdrop-filter:blur(10px);}
.btn-primary:hover,.btn-secondary:hover,.cta-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hero-arrow{width:44px!important;height:44px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(10,12,16,.54)!important;backdrop-filter:blur(15px);}
.hero-indicators{bottom:34px!important;}
.hi{width:22px!important;height:3px!important;border-radius:99px!important;background:rgba(255,255,255,.24)!important;}
.hi.active{background:#fff!important;width:44px!important;}

/* Secciones y carruseles */
.live-section,.content-row{padding-left:32px!important;padding-right:32px!important;}
.live-section{margin-top:32px!important;margin-bottom:26px!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));border:1px solid var(--line);border-radius:var(--r2);padding:22px 24px!important;box-shadow:var(--shadow2);}
.live-section-header{font-size:12px;color:var(--t2);letter-spacing:.11em;text-transform:uppercase;}
.live-section-title,.row-label{font-size:20px!important;font-weight:900!important;letter-spacing:-.035em;color:#fff!important;}
.live-section-sub{color:var(--t2)!important;margin-top:6px!important;}
.live-cards{gap:12px!important;margin-top:18px!important;}
.live-card{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important;padding:16px!important;}
.live-card:hover{background:rgba(255,255,255,.085)!important;border-color:var(--line2)!important;transform:translateY(-2px)}
.content-row{margin-top:34px!important;margin-bottom:28px!important;}
.row-head{margin-bottom:14px!important;align-items:end!important;}
.row-more{height:34px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:var(--t2)!important;font-size:12px!important;display:inline-flex;align-items:center;gap:4px;}
.row-more:hover{color:#fff!important;background:rgba(255,255,255,.09)}
.row-track{gap:14px!important;padding:6px 2px 16px!important;}
.nf-card,.news-main,.news-sm,.evt-card,.blog-card,.g-card{
  background:linear-gradient(180deg,rgba(255,255,255,.068),rgba(255,255,255,.032))!important;
  border:1px solid var(--line)!important;border-radius:20px!important;overflow:hidden!important;box-shadow:none!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.nf-card:hover,.news-main:hover,.news-sm:hover,.evt-card:hover,.blog-card:hover,.g-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.20)!important;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045))!important;box-shadow:0 18px 45px rgba(0,0,0,.28)!important;}
.nf-card{flex:0 0 218px!important;}
.thumb,.nm-img,.ns-img,.evt-img,.blog-img{background:#0c1016!important;overflow:hidden!important;}
.thumb{height:126px!important;border-radius:18px 18px 0 0!important;}
.thumb img,.nm-img img,.ns-img img,.evt-img img,.blog-img img{transition:transform .35s ease,filter .35s ease;filter:saturate(.95) contrast(1.04)}
.nf-card:hover .thumb img,.news-main:hover img,.news-sm:hover img,.evt-card:hover img,.blog-card:hover img{transform:scale(1.045)}
.card-overlay{background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))!important;}
.card-play-btn{background:rgba(255,255,255,.96)!important;color:#050608!important;box-shadow:0 12px 30px rgba(0,0,0,.38)!important;}
.card-body,.nm-body,.evt-body,.blog-body{padding:15px!important;}
.card-prog,.card-meta,.nm-date,.ns-date,.evt-place,.blog-meta{color:var(--t3)!important;}
.card-name,.card-title,.nm-title,.ns-title,.evt-title,.blog-title{color:#fff!important;font-weight:820!important;line-height:1.28!important;}
.row-btn{width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(8,10,13,.72)!important;border:1px solid var(--line)!important;backdrop-filter:blur(14px);}

/* Páginas internas públicas */
.page-header{padding:132px 32px 30px!important;max-width:1440px;margin-left:auto;margin-right:auto;}
.page-header h1{font-size:clamp(36px,5vw,70px)!important;letter-spacing:-.06em!important;font-weight:950!important;}
.filters-bar,.search-bar{background:rgba(255,255,255,.055)!important;border:1px solid var(--line)!important;border-radius:18px!important;}
.programs-grid{max-width:1440px;margin:0 auto;padding:22px 32px 52px!important;gap:16px!important;}
.contact-layout{padding:32px 32px 68px!important;}
.contact-form-wrap{background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.035))!important;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:var(--shadow2)!important;}
.form-field input,.form-field textarea,.form-field select{background:rgba(255,255,255,.058)!important;border:1px solid var(--line)!important;border-radius:14px!important;color:#fff!important;padding:13px 15px!important;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:rgba(var(--brand-primary-rgb, 24,167,224),.55)!important;box-shadow:0 0 0 4px rgba(var(--brand-primary-rgb, 24,167,224),.11)!important;background:rgba(255,255,255,.07)!important;}
.article-content{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:24px;padding:26px;}

/* CTA y footer */
.cta-strip{max-width:1440px;margin:44px auto 0!important;padding:30px 32px!important;border-radius:26px!important;background:linear-gradient(135deg,rgba(var(--brand-primary-rgb, 24,167,224),.18),rgba(255,255,255,.055) 52%,rgba(255,255,255,.028))!important;border:1px solid var(--line)!important;box-shadow:var(--shadow2)!important;}
.cta-strip h2{font-size:24px!important;letter-spacing:-.035em!important;}
.site-footer{padding:56px 32px 34px!important;background:linear-gradient(180deg,rgba(5,6,8,.88),#020303)!important;border-top:1px solid rgba(255,255,255,.07)!important;}
.footer-grid{gap:46px!important;}
.footer-col h4{color:#fff!important;letter-spacing:.14em!important;font-size:10px!important;}
.footer-col a,.footer-brand,.footer-addr,.footer-bottom{color:var(--t2)!important;}
.social-btn{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;border-radius:12px!important;}

/* PWA install */
.pwa-install-card{max-width:760px!important;left:22px!important;right:22px!important;bottom:22px!important;background:rgba(10,12,16,.86)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:24px!important;box-shadow:0 28px 80px rgba(0,0,0,.60)!important;backdrop-filter:blur(24px);padding:14px!important;}
.pwa-install-icon{background:#fff!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.7);}
.pwa-install-btn{background:linear-gradient(135deg,var(--acc),var(--brand-secondary,#0a77a8))!important;color:#fff!important;box-shadow:0 14px 28px rgba(var(--brand-primary-rgb, 24,167,224),.2);}
.pwa-install-secondary,.pwa-install-close{background:rgba(255,255,255,.075)!important;border:1px solid var(--line)!important;color:#fff!important;}

@media(max-width:1500px){.hero-content{left:0;transform:none;margin-left:0;width:auto;}}
@media(max-width:980px){
  :root{--nav-h:68px;}
  .header-inner{padding:0 18px}.main-nav,.header-actions{display:none}.hamburger{display:flex!important;color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;width:42px;height:42px;align-items:center;justify-content:center}
  .hero-bg{min-height:560px}.hero-content{padding:0 20px 58px!important}.hero-title{font-size:42px!important}.hero-desc{font-size:14px!important}.live-section,.content-row,.programs-grid,.contact-layout,.page-header{padding-left:18px!important;padding-right:18px!important}.nf-card{flex-basis:190px!important}.thumb{height:112px!important}.cta-strip{margin-left:18px!important;margin-right:18px!important;}
}
@media(max-width:620px){
  .hero-bg{min-height:520px}.hero-title{font-size:34px!important}.hero-btns{flex-direction:column;align-items:flex-start}.btn-primary,.btn-secondary,.cta-btn{width:100%;}
  .live-section{border-radius:20px!important}.row-head{align-items:flex-start!important;gap:10px}.row-label{font-size:18px!important}.nf-card{flex-basis:168px!important}.thumb{height:100px!important}.pwa-install-card{align-items:flex-start!important;border-radius:20px!important}.pwa-install-actions{flex-direction:column!important;width:112px}.pwa-install-copy span{display:none!important}.footer-grid{grid-template-columns:1fr!important}.footer-col:nth-child(3),.footer-col:nth-child(4){display:block!important;}
}


/* ================================================================
   MPPTV — REFERENCE BLUE PREMIUM SYSTEM
   Inspirado en las referencias enviadas: oscuro, ordenado, tipo app.
   ================================================================ */
:root{
  --acc: var(--color-primario, var(--brand-primary,#169bd5)) !important;
  --acc2: var(--color-secundario, var(--brand-secondary,#0f6f9f)) !important;
  --brand-blue:var(--brand-primary,#169bd5);
  --brand-blue-soft:#6bd3ff;
  --ink-0:#020305;
  --ink-1:#07090d;
  --ink-2:#0d1117;
  --ink-3:#141922;
  --ink-4:#202733;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --txt:#f5f7fb;
  --muted:#8e99a9;
  --dim:#566171;
  --nav-h:76px;
  --r:18px;
  --shadow:0 28px 80px rgba(0,0,0,.50);
  --max:1380px;
}
html{background:#030406}
body{
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(var(--brand-primary-rgb, 22,155,213),.15), transparent 62%),
    radial-gradient(700px 520px at 5% 12%, rgba(255,255,255,.055), transparent 64%),
    linear-gradient(180deg,#05070a 0%, #020304 58%, #040506 100%) !important;
  color:var(--txt)!important;
  font-size:15px;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.36), transparent 70%);
}
.site-header{
  position:sticky!important; top:0!important; height:var(--nav-h)!important;
  background:rgba(5,7,10,.72)!important; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.075);
  box-shadow:none!important;
}
.site-header.scrolled{background:rgba(5,7,10,.86)!important}
.header-inner{max-width:var(--max); margin:0 auto; padding:0 28px!important; height:var(--nav-h)!important; gap:32px!important}
.site-logo img{height:43px!important; max-width:160px!important; filter:drop-shadow(0 10px 22px rgba(var(--brand-primary-rgb, 22,155,213),.18))}
.main-nav{gap:8px!important; align-items:center!important; flex:initial!important}
.main-nav a{
  height:38px; display:inline-flex; align-items:center; padding:0 16px!important;
  border-radius:999px!important; color:#8d97a6!important; font-size:13px!important; font-weight:800!important;
  letter-spacing:.01em; border:1px solid transparent; background:transparent;
}
.main-nav a:hover{color:#fff!important; background:rgba(255,255,255,.045)!important; border-color:rgba(255,255,255,.065)!important}
.main-nav a.active{color:#fff!important; background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.052))!important; border-color:rgba(255,255,255,.12)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-intranet{width:42px!important;height:42px!important;border-radius:16px!important;background:rgba(255,255,255,.055)!important;border:1px solid var(--line)!important;color:#dfe8f4!important}
.btn-intranet:hover{background:rgba(var(--brand-primary-rgb, 22,155,213),.16)!important;border-color:rgba(var(--brand-primary-rgb, 22,155,213),.33)!important;color:#fff!important}
.btn-vivo,.cta-btn,.btn-primary{background:linear-gradient(135deg,var(--acc),var(--brand-secondary,#0c76ab))!important; border:1px solid rgba(255,255,255,.15)!important; border-radius:16px!important; color:#fff!important; box-shadow:0 16px 34px rgba(var(--brand-primary-rgb, 22,155,213),.18)!important}

/* Public page shell */
.page-header{
  max-width:var(--max)!important; margin:0 auto!important;
  padding:76px 28px 34px!important;
  min-height:0!important; text-align:left!important; position:relative;
}
.page-header::before{
  content:''; position:absolute; right:28px; top:34px; width:360px; height:180px; pointer-events:none;
  background:radial-gradient(circle at 65% 35%, rgba(var(--brand-primary-rgb, 22,155,213),.16), transparent 65%);
  filter:blur(6px); opacity:.8;
}
.page-header h1,.page-header h2{
  font-size:clamp(44px,5vw,76px)!important; line-height:.92!important; letter-spacing:-.075em!important;
  font-weight:950!important; color:#fff!important; margin:0 0 20px!important; max-width:900px;
}
.page-header p{color:#91a0b2!important;font-size:15px!important;letter-spacing:.02em;max-width:640px}
.container,.programs-grid,.pagination,.live-section,.content-row,.contact-layout{max-width:var(--max)!important;margin-left:auto!important;margin-right:auto!important;padding-left:28px!important;padding-right:28px!important}
.filters-bar{
  max-width:var(--max)!important; margin:0 auto 18px!important; padding:0 28px 0!important;
  background:transparent!important; border:0!important; display:flex!important; flex-wrap:wrap!important; gap:10px!important; min-height:0!important;
}
.filter-chip{
  height:38px!important; display:inline-flex!important; align-items:center!important; padding:0 17px!important;
  border-radius:999px!important; background:rgba(255,255,255,.045)!important; color:#9aa6b6!important;
  border:1px solid var(--line)!important; font-weight:850!important; font-size:12.5px!important;
}
.filter-chip:hover{color:#fff!important;background:rgba(255,255,255,.075)!important;border-color:var(--line-2)!important}
.filter-chip.active{background:rgba(var(--brand-primary-rgb, 22,155,213),.14)!important;color:#76d8ff!important;border-color:rgba(var(--brand-primary-rgb, 22,155,213),.38)!important;box-shadow:0 12px 32px rgba(var(--brand-primary-rgb, 22,155,213),.10)!important}
.search-bar{
  height:44px!important; border-radius:16px!important; background:rgba(2,4,7,.72)!important; border:1px solid var(--line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.search-bar input{height:100%!important;color:#fff!important;background:transparent!important;font-size:13.5px!important}
.search-bar i{color:#6f7a89!important}
.programs-grid{
  display:grid!important; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important; gap:18px!important;
  padding-top:8px!important; padding-bottom:44px!important;
}
.nf-card,.blog-card,.evt-card,.live-card,.news-main,.news-sm{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border:1px solid var(--line)!important; border-radius:22px!important; overflow:hidden!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28)!important; transform:none!important;
}
.nf-card:hover,.blog-card:hover,.evt-card:hover,.news-main:hover,.news-sm:hover{border-color:rgba(var(--brand-primary-rgb, 22,155,213),.30)!important;box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 0 1px rgba(var(--brand-primary-rgb, 22,155,213),.08)!important; transform:translateY(-3px)!important}
.thumb,.card-thumb,.blog-img,.evt-img,.nm-img,.ns-img{background:#0a0d12!important; overflow:hidden!important}
.thumb{aspect-ratio:16/10!important; border-radius:0!important}
.thumb img,.card-thumb img,.blog-img img,.evt-img img,.nm-img img,.ns-img img{width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(.95) contrast(1.04)}
.thumb-empty{background:linear-gradient(145deg,#0d1219,#07090d)!important;color:#364150!important;min-height:160px!important}
.card-body,.blog-body,.evt-body,.nm-body{padding:16px!important;background:transparent!important}
.card-name,.blog-title,.evt-title,.nm-title,.ns-title{color:#f6f8fb!important;font-weight:900!important;letter-spacing:-.025em!important}
.card-meta,.blog-meta,.evt-place,.nm-date,.ns-date{color:#8592a3!important;font-size:12.5px!important}
.card-badge,.badge-cat,.badge-live{
  border-radius:999px!important; background:rgba(var(--brand-primary-rgb, 22,155,213),.18)!important; color:var(--brand-primary-soft,#82ddff)!important; border:1px solid rgba(var(--brand-primary-rgb, 22,155,213),.34)!important;
  font-size:10px!important; font-weight:900!important; letter-spacing:.08em!important;
}
.empty-state{
  max-width:var(--max)!important; margin:24px auto 70px!important; min-height:230px!important; padding:46px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.018))!important;
  border:1px solid var(--line)!important; border-radius:28px!important;
  color:#7c8798!important; text-align:center!important;
}
.empty-state i{font-size:42px!important;color:#313a48!important;margin-bottom:12px!important}
.empty-state p{color:#8793a4!important}
.pagination{display:flex!important;gap:8px!important;justify-content:center!important;padding-bottom:52px!important}
.pg-btn{min-width:40px;height:40px;border-radius:14px!important;background:rgba(255,255,255,.045)!important;border:1px solid var(--line)!important;color:#aeb8c7!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-weight:850!important}
.pg-btn.active,.pg-btn:hover{background:rgba(var(--brand-primary-rgb, 22,155,213),.16)!important;border-color:rgba(var(--brand-primary-rgb, 22,155,213),.34)!important;color:var(--brand-primary-soft,#7bdcff)!important}

/* Home */
.hero{background:transparent!important;min-height:clamp(560px,70vh,780px)!important;display:flex!important;align-items:flex-end!important;max-width:100%!important;margin-top:0!important}
.hero-bg{min-height:clamp(560px,70vh,780px)!important;aspect-ratio:auto!important;max-height:none!important;border-bottom:1px solid var(--line)!important}
.hero-bg::after{background:linear-gradient(76deg,rgba(2,3,5,.98) 0%,rgba(5,7,10,.83) 44%,rgba(5,7,10,.28) 100%),linear-gradient(0deg,#030406 0%,rgba(3,4,6,.66) 28%,transparent 65%)!important}
.hero-content{left:50%!important;transform:translateX(-50%)!important;width:100%!important;max-width:var(--max)!important;padding:0 28px 76px!important}
.hero-title{font-size:clamp(52px,7.5vw,110px)!important;line-height:.86!important;font-weight:950!important;letter-spacing:-.085em!important;max-width:980px!important;text-shadow:0 22px 70px rgba(0,0,0,.55)}
.hero-title .accent{color:#fff!important;text-shadow:0 0 36px rgba(var(--brand-primary-rgb, 22,155,213),.25)}
.hero-desc{max-width:620px!important;color:#a7b1c0!important;font-size:17px!important;line-height:1.7!important}
.hero-meta{gap:10px!important;margin:18px 0!important}
.hero-meta-item,.hero-meta-live{height:32px!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;color:#c8d1de!important;padding:0 12px!important}
.hero-btns{gap:12px!important;margin-top:24px!important}
.btn-secondary,.btn-glass{border:1px solid var(--line)!important;background:rgba(255,255,255,.055)!important;color:#fff!important;border-radius:16px!important;backdrop-filter:blur(20px)}
.section-title,.live-section-title{font-size:clamp(28px,3vw,44px)!important;font-weight:950!important;letter-spacing:-.06em!important;color:#fff!important}
.live-section-header{max-width:var(--max)!important;margin:0 auto!important;padding:48px 28px 18px!important}
.live-cards{max-width:var(--max)!important;margin:0 auto!important;padding:0 28px 42px!important;gap:18px!important}

/* Footer */
.site-footer{background:#020304!important;border-top:1px solid var(--line)!important;margin-top:24px!important;padding:48px 0 26px!important}
.footer-grid{max-width:var(--max)!important;margin:0 auto!important;padding:0 28px!important;gap:30px!important;display:grid!important;grid-template-columns:1.45fr repeat(3,1fr)!important}
.footer-brand img{height:50px!important;filter:drop-shadow(0 10px 26px rgba(var(--brand-primary-rgb, 22,155,213),.18))}.footer-brand h3{font-size:16px!important;color:#fff!important;margin:14px 0 6px!important}.footer-addr{color:#717d8d!important}
.footer-col h4{color:#fff!important;font-size:11px!important;letter-spacing:.18em!important;text-transform:uppercase!important;margin-bottom:16px!important}.footer-col a,.footer-col p{color:#8a95a5!important}.footer-col a:hover{color:var(--brand-primary-soft,#7bdcff)!important}.footer-bottom{max-width:var(--max)!important;margin:36px auto 0!important;padding:22px 28px 0!important;border-top:1px solid var(--line)!important;color:#697484!important}

/* Contact/Form public */
.contact-layout,.form-section,.contact-form-wrap,.contact-info-item,.article-content{background:transparent!important}.contact-form-wrap,.contact-info-item,.form-section{border:1px solid var(--line)!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.020))!important;border-radius:24px!important;box-shadow:0 18px 50px rgba(0,0,0,.26)!important}.form-field input,.form-field textarea,.g-select{background:rgba(2,4,7,.65)!important;border:1px solid var(--line)!important;color:#fff!important;border-radius:16px!important}.form-field input:focus,.form-field textarea:focus{border-color:rgba(var(--brand-primary-rgb, 22,155,213),.42)!important;box-shadow:0 0 0 4px rgba(var(--brand-primary-rgb, 22,155,213),.10)!important}

/* PWA banner */
.pwa-install,.pwa-banner,#pwa-install-banner{border:1px solid var(--line-2)!important;background:rgba(9,12,17,.88)!important;backdrop-filter:blur(24px)!important;border-radius:24px!important;box-shadow:0 24px 75px rgba(0,0,0,.45)!important}
.pwa-install button,.pwa-banner button,#pwa-install-banner button{border-radius:999px!important}

@media(max-width:900px){
  .site-header{height:68px!important}.header-inner{height:68px!important;padding:0 18px!important}.main-nav,.header-actions{display:none!important}.hamburger{display:block!important}
  .page-header{padding:46px 18px 24px!important}.page-header h1,.page-header h2{font-size:46px!important}.filters-bar,.container,.programs-grid,.pagination,.live-section,.content-row,.contact-layout{padding-left:18px!important;padding-right:18px!important}.programs-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:14px!important}.footer-grid{grid-template-columns:1fr!important;padding:0 18px!important}.footer-bottom{padding-left:18px!important;padding-right:18px!important}.hero-content{padding:0 18px 50px!important}.hero-title{font-size:54px!important}.hero-desc{font-size:15px!important}.filters-bar{overflow:auto!important;flex-wrap:nowrap!important}.filter-chip{flex:0 0 auto!important}
}

/* ================================================================
   MPPTV — UI DISCIPLINE FIX v6
   Referencia: app oscura premium, bordes moderados, alineación exacta,
   azul de marca como acento. No cambia módulos ni contenido.
   ================================================================ */
:root{
  --acc: var(--color-primario, var(--brand-primary,#169bd5)) !important;
  --acc2: var(--color-secundario, var(--brand-secondary,#0f6f9f)) !important;
  --mp-bg:#030406;
  --mp-panel:#0a0d11;
  --mp-panel-2:#10151b;
  --mp-surface:rgba(255,255,255,.045);
  --mp-surface-2:rgba(255,255,255,.065);
  --mp-border:rgba(255,255,255,.09);
  --mp-border-2:rgba(255,255,255,.16);
  --mp-text:#f5f7fb;
  --mp-muted:#9ba6b6;
  --mp-dim:#647183;
  --mp-radius:10px;
  --mp-radius-sm:7px;
  --mp-max:1360px;
  --nav-h:74px;
}
html,body{background:#030406!important;color:var(--mp-text)!important;}
body{
  background:
    radial-gradient(760px 420px at 78px 110px, rgba(var(--brand-primary-rgb, 22,155,213),.105), transparent 64%),
    radial-gradient(900px 520px at 80% -8%, rgba(var(--brand-primary-rgb, 22,155,213),.13), transparent 60%),
    linear-gradient(180deg,#05070a 0%,#020304 100%) !important;
  font-size:14px!important;
}
body::before{opacity:.35!important;background-size:60px 60px!important;}
*{scrollbar-color:rgba(255,255,255,.15) transparent;}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px}*::-webkit-scrollbar-track{background:transparent}

/* Header ordenado y sin exceso de radios */
.site-header{position:sticky!important;top:0!important;height:var(--nav-h)!important;background:rgba(4,6,9,.82)!important;border-bottom:1px solid var(--mp-border)!important;box-shadow:none!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;}
.header-inner{height:var(--nav-h)!important;max-width:var(--mp-max)!important;margin:0 auto!important;padding:0 28px!important;gap:34px!important;}
.site-logo img{height:42px!important;max-width:158px!important;filter:drop-shadow(0 10px 20px rgba(var(--brand-primary-rgb, 22,155,213),.16))!important;}
.main-nav{gap:6px!important;align-items:center!important;}
.main-nav a{height:36px!important;padding:0 14px!important;border-radius:8px!important;border:1px solid transparent!important;background:transparent!important;color:#9aa4b4!important;font-size:13px!important;font-weight:750!important;letter-spacing:.01em!important;}
.main-nav a:hover{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.08)!important;color:#fff!important;}
.main-nav a.active{background:rgba(255,255,255,.085)!important;border-color:rgba(255,255,255,.13)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;}
.btn-intranet,.btn-vivo{border-radius:9px!important;box-shadow:none!important;}
.btn-intranet{width:38px!important;height:38px!important;background:rgba(255,255,255,.055)!important;border:1px solid var(--mp-border)!important;}
.btn-vivo{height:38px!important;background:linear-gradient(135deg,var(--acc),#0d76aa)!important;border:1px solid rgba(255,255,255,.13)!important;}

/* Páginas públicas: contenedor único, márgenes correctos */
.page-header{max-width:var(--mp-max)!important;margin:0 auto!important;padding:92px 28px 34px!important;background:transparent!important;border:0!important;}
.page-header h1{font-size:clamp(42px,4.8vw,64px)!important;line-height:.95!important;letter-spacing:-.055em!important;font-weight:950!important;color:#fff!important;margin:0 0 20px!important;}
.page-header p{font-size:14px!important;color:var(--mp-muted)!important;letter-spacing:.01em!important;margin:0!important;}
.filters-bar{max-width:var(--mp-max)!important;margin:0 auto!important;padding:0 28px 0!important;min-height:54px!important;display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;background:transparent!important;border:0!important;border-top:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;box-shadow:none!important;}
.filter-chip{height:32px!important;display:inline-flex!important;align-items:center!important;padding:0 15px!important;border-radius:8px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.085)!important;color:#b1bdcc!important;font-size:12px!important;font-weight:750!important;line-height:1!important;}
.filter-chip:hover{background:rgba(255,255,255,.075)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important;}
.filter-chip.active{background:rgba(var(--brand-primary-rgb, 22,155,213),.13)!important;border-color:rgba(var(--brand-primary-rgb, 22,155,213),.38)!important;color:var(--brand-primary-soft,#8cddff)!important;box-shadow:none!important;}
.filters-bar + div{max-width:var(--mp-max)!important;margin:0 auto!important;padding:14px 28px 0!important;}
.search-bar{height:42px!important;max-width:360px!important;background:rgba(3,5,8,.66)!important;border:1px solid rgba(255,255,255,.095)!important;border-radius:8px!important;display:flex!important;align-items:center!important;padding:0 13px!important;box-shadow:none!important;}
.search-bar i{color:#728093!important;font-size:17px!important;}
.search-bar input{height:100%!important;background:transparent!important;border:0!important;color:#fff!important;padding:0 0 0 10px!important;font-size:13px!important;outline:none!important;}
.search-bar input::placeholder{color:#6f7c8f!important;}
.programs-grid{max-width:var(--mp-max)!important;margin:0 auto!important;padding:24px 28px 58px!important;gap:14px!important;}
.empty-state{max-width:var(--mp-max)!important;margin:24px auto 58px!important;min-height:235px!important;padding:58px 28px!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:10px!important;box-shadow:none!important;color:#8490a0!important;}
.empty-state i{color:#2f3945!important;font-size:42px!important;opacity:1!important;}

/* Tarjetas: sobrias, no infladas */
.nf-card,.news-main,.news-sm,.evt-card,.blog-card,.g-card,.contact-form-wrap,.article-content,.cta-strip{background:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.026))!important;border:1px solid rgba(255,255,255,.085)!important;border-radius:10px!important;box-shadow:none!important;overflow:hidden!important;}
.nf-card:hover,.news-main:hover,.news-sm:hover,.evt-card:hover,.blog-card:hover,.g-card:hover{transform:translateY(-2px)!important;border-color:rgba(var(--brand-primary-rgb, 22,155,213),.28)!important;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.032))!important;box-shadow:0 18px 45px rgba(0,0,0,.25)!important;}
.nf-card{flex:0 0 206px!important;}
.thumb{height:120px!important;border-radius:0!important;background:#0b1016!important;}
.card-body,.nm-body,.evt-body,.blog-body{padding:13px!important;}
.card-badge,.badge-cat,.badge-live,.nm-cat,.blog-cat,.evt-date-tag{border-radius:6px!important;background:rgba(var(--brand-primary-rgb, 22,155,213),.16)!important;border:1px solid rgba(var(--brand-primary-rgb, 22,155,213),.28)!important;color:var(--brand-primary-soft,#8bdbff)!important;box-shadow:none!important;}
.card-play-btn{border-radius:8px!important;background:#fff!important;color:#030406!important;box-shadow:0 12px 28px rgba(0,0,0,.32)!important;}
.row-btn{border-radius:8px!important;background:rgba(4,6,9,.78)!important;border:1px solid rgba(255,255,255,.12)!important;}
.btn-primary,.btn-secondary,.cta-btn,.pwa-install-btn,.pwa-install-secondary{border-radius:8px!important;box-shadow:none!important;}
.btn-primary,.cta-btn,.pwa-install-btn{background:linear-gradient(135deg,var(--acc),#0d76aa)!important;border:1px solid rgba(255,255,255,.14)!important;}
.btn-secondary,.pwa-install-secondary{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.10)!important;color:#e7edf5!important;}

/* Formularios públicos + opciones visibles */
input,textarea,select,.form-field input,.form-field textarea,.form-field select{background:#090d13!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:8px!important;color:#f4f7fb!important;box-shadow:none!important;}
input:focus,textarea:focus,select:focus,.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:rgba(var(--brand-primary-rgb, 22,155,213),.55)!important;box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb, 22,155,213),.12)!important;background:#0d1219!important;}
select option,select optgroup{background:#0d1219!important;color:#f4f7fb!important;}
.form-field label{color:#a3afbf!important;font-weight:750!important;}

/* Footer alineado con el mismo contenedor */
.site-footer{padding:0 28px 34px!important;background:rgba(3,4,6,.80)!important;border-top:1px solid rgba(255,255,255,.075)!important;}
.footer-grid{max-width:var(--mp-max)!important;margin:0 auto!important;padding:50px 0!important;gap:50px!important;}
.footer-bottom{max-width:var(--mp-max)!important;margin:0 auto!important;padding-top:20px!important;border-top:1px solid rgba(255,255,255,.07)!important;}
.footer-col h4{letter-spacing:.16em!important;color:#fff!important;font-size:10px!important;}
.footer-col a,.footer-brand,.footer-addr,.footer-bottom{color:#96a2b2!important;}
.social-btn{border-radius:8px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.09)!important;}

/* PWA */
.pwa-install-card{max-width:760px!important;border-radius:10px!important;background:rgba(8,11,15,.92)!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 24px 70px rgba(0,0,0,.52)!important;}
.pwa-install-icon{border-radius:8px!important;background:#fff!important;}
.pwa-install-close{border-radius:8px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.10)!important;color:#fff!important;}

@media(max-width:980px){
  :root{--nav-h:68px}.header-inner,.page-header,.filters-bar,.filters-bar+div,.programs-grid,.site-footer{padding-left:18px!important;padding-right:18px!important}.main-nav,.header-actions{display:none!important}.hamburger{display:flex!important;width:40px!important;height:40px!important;border-radius:8px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.10)!important;align-items:center!important;justify-content:center!important}.page-header{padding-top:70px!important}.page-header h1{font-size:38px!important}.filters-bar{gap:6px!important}.filter-chip{height:30px!important;padding:0 12px!important}.nf-card{flex-basis:180px!important}.thumb{height:105px!important}.footer-grid{grid-template-columns:1fr 1fr!important;}
}
@media(max-width:620px){
  .page-header h1{font-size:34px!important}.search-bar{max-width:100%!important}.programs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.nf-card{flex-basis:auto!important}.footer-grid{grid-template-columns:1fr!important}.pwa-install-card{left:12px!important;right:12px!important;bottom:12px!important;}
}

/* ================================================================
   FIX HOME LIVE + HERO MEDIA — 2026-07
   Evita pantalla duplicada si un stream no tiene URL y mejora fallback del slider.
   ================================================================ */
.hero-bg-empty {
  background:
    radial-gradient(circle at 72% 22%, rgba(var(--brand-primary-rgb, 22,155,213),.22), transparent 32%),
    radial-gradient(circle at 28% 82%, rgba(var(--brand-primary-rgb, 22,155,213),.10), transparent 28%),
    linear-gradient(135deg, #06090d 0%, #0a1118 50%, #030406 100%) !important;
}
.hero-bg-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.hero-fallback-mark {
  position: absolute;
  right: max(6vw, 80px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  opacity: .34;
  pointer-events: none;
  text-align: right;
  max-width: 420px;
}
.hero-fallback-mark img {
  width: min(360px, 32vw);
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 22px 60px rgba(var(--brand-primary-rgb, 22,155,213),.18));
}
.hero-fallback-mark span {
  font-size: clamp(34px, 5vw, 84px);
  line-height: .88;
  letter-spacing: -.07em;
  font-weight: 950;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
}
.mpptv-player-notice {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 9999;
  transform: translate(-50%, 18px);
  opacity: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(9,12,17,.94);
  color: #edf7ff;
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.34);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  font-size: 13px;
  font-weight: 700;
  transition: .22s ease;
}
.mpptv-player-notice.show { opacity: 1; transform: translate(-50%, 0); }
.vivo-dropdown { position: relative; }
.vivo-menu {
  right: 0;
  top: calc(100% + 12px);
  min-width: 318px;
  max-width: min(360px, calc(100vw - 28px));
  border-radius: 12px !important;
  background: rgba(8,11,16,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 86px rgba(0,0,0,.66) !important;
  overflow: hidden;
}
.vivo-menu-item {
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 12px !important;
  cursor: pointer;
}
.vmi-prog { color: #fff; font-weight: 850; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmi-ep { color: var(--t3); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmi-pulse {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.12);
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.25);
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vmi-play { color: var(--acc); opacity: .92; justify-self: end; }
.player-overlay.open { z-index: 8000; }
.player-iframe-wrap iframe[src=""] { display: none; }
@media(max-width:760px){
  .hero-fallback-mark{right:18px;opacity:.22}.hero-fallback-mark img{width:180px}.hero-fallback-mark span{display:none}
  .vivo-menu{position:fixed!important;left:12px!important;right:12px!important;top:74px!important;min-width:0!important}
}

/* ================================================================
   FIX REAL HOME / EN VIVO / SLIDER — v12-live-final
   ================================================================ */
.hero-bg-empty {
  background:
    radial-gradient(800px 480px at 76% 28%, rgba(var(--brand-primary-rgb, 22,155,213),.26), transparent 58%),
    radial-gradient(520px 360px at 42% 74%, rgba(var(--brand-primary-rgb, 22,155,213),.12), transparent 60%),
    linear-gradient(135deg, #06090d 0%, #081017 48%, #030406 100%) !important;
}
.hero-bg-empty::after {
  background:
    linear-gradient(76deg, rgba(2,3,5,.88) 0%, rgba(5,7,10,.60) 42%, rgba(5,7,10,.18) 100%),
    linear-gradient(0deg,#030406 0%,rgba(3,4,6,.54) 24%,transparent 66%) !important;
}
.hero-bg-empty::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    radial-gradient(circle at center, rgba(var(--brand-primary-rgb, 22,155,213),.45) 0 1px, transparent 2px);
  background-size:74px 74px,74px 74px,34px 34px;
  mask-image:linear-gradient(90deg, transparent 0%, #000 35%, #000 78%, transparent 100%);
}
.hero-fallback-mark {
  opacity:.48 !important;
  right:max(7vw,88px) !important;
  z-index:2 !important;
}
.hero-fallback-mark img {
  background:rgba(255,255,255,.96);
  border-radius:14px;
  padding:22px;
  width:min(340px,30vw) !important;
  box-shadow:0 26px 90px rgba(var(--brand-primary-rgb, 22,155,213),.18), inset 0 0 0 1px rgba(0,0,0,.04);
}
.hero-fallback-mark span {
  color:rgba(255,255,255,.46) !important;
  text-shadow:0 18px 80px rgba(0,0,0,.65);
}

.vivo-dropdown { position:relative; }
#vivo-toggle[aria-expanded="true"] { filter:brightness(1.08); }
.vivo-menu {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  z-index:7000;
  width:360px;
  max-width:min(360px, calc(100vw - 24px));
  padding:8px;
  border-radius:12px !important;
  background:rgba(7,10,15,.98) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.72) !important;
  backdrop-filter:blur(22px);
}
.vivo-menu.open { display:block !important; }
.vivo-menu-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px 12px;
  color:#e9f5fb;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px;
}
.vivo-menu-item {
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 28px;
  align-items:center;
  gap:10px;
  padding:12px !important;
  border-radius:9px;
  cursor:pointer;
}
.vivo-menu-item:hover { background:rgba(255,255,255,.065) !important; }
.vivo-menu-item.is-missing-url { opacity:.82; }
.vmi-text { min-width:0; }
.vmi-warn,
.live-card-warn {
  color:#ffb8c1;
  font-size:10.5px;
  margin-top:3px;
  font-weight:800;
}
.live-card {
  border:1px solid rgba(255,255,255,.09) !important;
  color:inherit;
  text-align:left;
  font-family:inherit;
}
button.live-card { cursor:pointer; }
button.live-card:focus-visible,
.vivo-menu-item:focus-visible {
  outline:2px solid rgba(var(--brand-primary-rgb, 22,155,213),.72);
  outline-offset:2px;
}
.live-card.is-missing-url .live-card-play,
.vivo-menu-item.is-missing-url .vmi-play { color:#ff8fa0 !important; }

.player-overlay { background:rgba(0,0,0,.88) !important; backdrop-filter:blur(10px); }
.player-overlay.open { z-index:9000 !important; }
.player-wrap { max-width:min(1180px, calc(100vw - 48px)) !important; }
.player-iframe-wrap {
  background:#05070a;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 34px 110px rgba(0,0,0,.72);
}
.player-iframe-wrap iframe[src=""] { display:none !important; }
body .mpptv-player-notice { z-index:9500 !important; }

@media(max-width:760px){
  .vivo-menu{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:74px!important;
    width:auto!important;
    max-width:none!important;
  }
  .hero-fallback-mark{right:18px!important;opacity:.30!important;}
  .hero-fallback-mark img{width:180px!important;padding:14px!important;border-radius:10px!important;}
  .hero-fallback-mark span{display:none!important;}
}


/* ================================================================
   FIX FINAL: EN VIVO EN MODAL + SLIDER CON IMAGEN VISIBLE
   ================================================================ */
.hero-bg.has-image {
  background-color:#05070a !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
}
.hero-bg.has-image::before { display:none !important; }
.hero-bg.has-image::after {
  /* Capa mucho más ligera: deja ver la portada y solo ayuda a leer el texto. */
  background:
    linear-gradient(90deg, rgba(3,5,8,.74) 0%, rgba(3,5,8,.42) 36%, rgba(3,5,8,.08) 68%, rgba(3,5,8,.22) 100%),
    linear-gradient(0deg, rgba(3,4,6,.68) 0%, rgba(3,4,6,.24) 28%, rgba(3,4,6,.02) 64%) !important;
  pointer-events:none !important;
}
.hero-slide.active .hero-bg.has-image { filter:none !important; opacity:1 !important; }
.hero-slide.active { opacity:1 !important; }
.hero-content { pointer-events:auto !important; }
.player-overlay.open {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
.player-overlay .player-wrap { position:relative; z-index:2; }
.vivo-menu-item,
.live-card { appearance:none; -webkit-appearance:none; }

/* ================================================================
   FIX DEFINITIVO HOME SLIDER / RESPONSIVE / EN VIVO MODAL
   - No más portada tapada por overlay.
   - No más título gigante cortado en pantallas pequeñas.
   - El reproductor siempre queda en modal.
   ================================================================ */
html, body { overflow-x: hidden !important; }

.hero, #hero-carousel {
  position: relative !important;
  overflow: hidden !important;
  min-height: clamp(520px, 72vh, 760px) !important;
  background: #030507 !important;
}
.hero-slide {
  min-height: clamp(520px, 72vh, 760px) !important;
  background: #030507 !important;
}
.hero-slide.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-bg,
.hero-bg.has-image {
  min-height: clamp(520px, 72vh, 760px) !important;
  height: clamp(520px, 72vh, 760px) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.hero-bg.has-image::before { display: none !important; }
.hero-bg.has-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2,4,7,.58) 0%, rgba(2,4,7,.30) 34%, rgba(2,4,7,.05) 62%, rgba(2,4,7,.20) 100%),
    linear-gradient(0deg, rgba(2,4,7,.50) 0%, rgba(2,4,7,.18) 30%, rgba(2,4,7,.00) 62%) !important;
}
.hero-bg-empty {
  background:
    radial-gradient(circle at 24% 28%, rgba(var(--brand-primary-rgb, 22,155,213),.24), transparent 34%),
    radial-gradient(circle at 72% 18%, rgba(var(--brand-primary-rgb, 22,155,213),.10), transparent 30%),
    linear-gradient(135deg, #071018 0%, #030507 56%, #010203 100%) !important;
}
.hero-bg-empty::after {
  background: linear-gradient(90deg, rgba(2,4,7,.72), rgba(2,4,7,.24), rgba(2,4,7,.50)) !important;
}
.hero-fallback-mark {
  opacity: .36 !important;
  right: 8% !important;
  bottom: 18% !important;
  display: flex !important;
}

.hero-content {
  z-index: 5 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(100%, var(--max, 1440px)) !important;
  max-width: var(--max, 1440px) !important;
  box-sizing: border-box !important;
  padding: 0 28px 72px !important;
}
.hero-title {
  max-width: min(920px, calc(100vw - 56px)) !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.hero-desc { max-width: min(620px, calc(100vw - 56px)) !important; }

.player-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(0,0,0,.86) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.player-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
.player-wrap {
  width: min(1120px, 94vw) !important;
  background: #05080c !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.70) !important;
  overflow: hidden !important;
}
.player-close {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 100000 !important;
}

@media (max-width: 900px) {
  .hero, #hero-carousel,
  .hero-slide,
  .hero-bg,
  .hero-bg.has-image {
    min-height: 560px !important;
    height: 560px !important;
  }
  .hero-content {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 22px 54px !important;
  }
  .hero-title {
    font-size: clamp(38px, 13vw, 72px) !important;
    line-height: .90 !important;
    letter-spacing: -.065em !important;
    max-width: calc(100vw - 44px) !important;
  }
  .hero-desc { font-size: 14px !important; max-width: calc(100vw - 44px) !important; }
  .hero-btns { flex-direction: row !important; align-items: center !important; }
}

@media (max-width: 560px) {
  .hero, #hero-carousel,
  .hero-slide,
  .hero-bg,
  .hero-bg.has-image {
    min-height: 520px !important;
    height: 520px !important;
  }
  .hero-title {
    font-size: clamp(32px, 15vw, 52px) !important;
    letter-spacing: -.055em !important;
  }
  .hero-meta { display: none !important; }
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary { width: auto !important; min-width: 124px !important; }
  .player-overlay { padding: 12px !important; }
  .player-close { top: 12px !important; right: 12px !important; }
}

/* ================================================================
   FIX REAL 2026-07-04: slider visible, sin oscurecer al rotar
   ================================================================ */
#hero-carousel,
.hero {
  min-height: clamp(560px, 72vh, 760px) !important;
  height: clamp(560px, 72vh, 760px) !important;
  overflow: hidden !important;
  background: #030507 !important;
}
#hero-carousel .hero-slide,
.hero .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: #030507 !important;
  transition: opacity .35s ease !important;
}
#hero-carousel .hero-slide.active,
.hero .hero-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
#hero-carousel .hero-bg,
.hero .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}
#hero-carousel .hero-image,
.hero .hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 0 !important;
}
#hero-carousel .hero-bg.has-image::before,
.hero .hero-bg.has-image::before { display: none !important; }
#hero-carousel .hero-bg.has-image::after,
.hero .hero-bg.has-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2,4,7,.34) 0%, rgba(2,4,7,.18) 38%, rgba(2,4,7,.03) 66%, rgba(2,4,7,.18) 100%),
    linear-gradient(0deg, rgba(2,4,7,.44) 0%, rgba(2,4,7,.12) 32%, rgba(2,4,7,0) 68%) !important;
}
#hero-carousel .hero-slide.hero-image-error .hero-image,
.hero .hero-slide.hero-image-error .hero-image { display: none !important; }
#hero-carousel .hero-slide.hero-image-error .hero-bg,
.hero .hero-slide.hero-image-error .hero-bg {
  background:
    radial-gradient(circle at 28% 24%, rgba(var(--brand-primary-rgb, 22,155,213),.28), transparent 34%),
    radial-gradient(circle at 72% 18%, rgba(var(--brand-primary-rgb, 22,155,213),.12), transparent 30%),
    linear-gradient(135deg, #071018 0%, #030507 58%, #010203 100%) !important;
}
#hero-carousel .hero-content,
.hero .hero-content {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 0 clamp(18px, 5vw, 74px) 70px !important;
}
#hero-carousel .hero-title,
.hero .hero-title {
  max-width: min(880px, calc(100vw - 40px)) !important;
  font-size: clamp(42px, 6.2vw, 92px) !important;
  line-height: .88 !important;
  letter-spacing: -.065em !important;
  margin: 0 0 16px !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#hero-carousel .hero-desc,
.hero .hero-desc {
  max-width: min(560px, calc(100vw - 40px)) !important;
}
@media (max-width: 900px) {
  #hero-carousel, .hero { height: 560px !important; min-height: 560px !important; }
  #hero-carousel .hero-content, .hero .hero-content {
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 22px 52px !important;
  }
  #hero-carousel .hero-title, .hero .hero-title {
    font-size: clamp(34px, 11vw, 60px) !important;
    line-height: .92 !important;
    letter-spacing: -.045em !important;
    max-width: calc(100vw - 44px) !important;
  }
}
@media (max-width: 560px) {
  #hero-carousel, .hero { height: 500px !important; min-height: 500px !important; }
  #hero-carousel .hero-title, .hero .hero-title { font-size: clamp(30px, 12vw, 46px) !important; }
  #hero-carousel .hero-desc, .hero .hero-desc { display: none !important; }
}

/* ================================================================
   FIX 2026-07-04: slider automático, visible y responsive
   - autoplay vuelve a funcionar
   - imagen nunca queda tapada por overlay negro
   - texto siempre queda dentro del hero en desktop y móvil
   ================================================================ */
#hero-carousel.hero,
#hero-carousel {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(560px, 76vh, 820px) !important;
  height: clamp(560px, 76vh, 820px) !important;
  overflow: hidden !important;
  background: #030507 !important;
  isolation: isolate !important;
}
#hero-carousel .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: #030507 !important;
  transition: opacity .75s ease, visibility .75s ease !important;
}
#hero-carousel .hero-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
#hero-carousel .hero-bg,
#hero-carousel .hero-bg.has-image,
#hero-carousel .hero-bg-empty {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
#hero-carousel .hero-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  z-index: 0 !important;
}
#hero-carousel .hero-bg.has-image::before,
#hero-carousel .hero-bg-empty::before {
  display: none !important;
  content: none !important;
}
#hero-carousel .hero-bg.has-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(2,4,7,.52) 0%, rgba(2,4,7,.28) 28%, rgba(2,4,7,.08) 55%, rgba(2,4,7,.22) 100%),
    linear-gradient(0deg, rgba(2,4,7,.44) 0%, rgba(2,4,7,.12) 34%, rgba(2,4,7,0) 72%) !important;
}
#hero-carousel .hero-bg-empty,
#hero-carousel .hero-slide.hero-image-error .hero-bg {
  background:
    radial-gradient(circle at 25% 24%, rgba(var(--brand-primary-rgb, 22,155,213),.26), transparent 34%),
    radial-gradient(circle at 72% 20%, rgba(var(--brand-primary-rgb, 22,155,213),.14), transparent 28%),
    linear-gradient(135deg, #071018 0%, #030507 54%, #010203 100%) !important;
}
#hero-carousel .hero-slide.hero-image-error .hero-image { display: none !important; }
#hero-carousel .hero-content {
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(42px, 8vh, 92px) !important;
  transform: none !important;
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 0 clamp(20px, 5vw, 76px) !important;
  display: block !important;
}
#hero-carousel .hero-eyebrow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}
#hero-carousel .hero-title {
  display: block !important;
  width: min(850px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: clamp(44px, 6.4vw, 92px) !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  font-weight: 950 !important;
  text-wrap: balance !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  text-shadow: 0 18px 48px rgba(0,0,0,.82), 0 2px 12px rgba(0,0,0,.65) !important;
}
#hero-carousel .hero-title .accent { color: #fff !important; }
#hero-carousel .hero-desc {
  width: min(620px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  color: rgba(231,238,247,.86) !important;
  font-size: clamp(14px, 1.25vw, 17px) !important;
  line-height: 1.62 !important;
  margin: 0 0 22px !important;
  text-shadow: 0 8px 28px rgba(0,0,0,.8) !important;
}
#hero-carousel .hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
#hero-carousel .hero-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}
#hero-carousel .hero-arrow {
  z-index: 6 !important;
  opacity: 1 !important;
  background: rgba(5,8,12,.52) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  backdrop-filter: blur(10px) !important;
}
#hero-carousel .hero-indicators {
  z-index: 6 !important;
  bottom: clamp(26px, 5vh, 48px) !important;
}
@media (max-width: 900px) {
  #hero-carousel.hero,
  #hero-carousel {
    min-height: 560px !important;
    height: 560px !important;
  }
  #hero-carousel .hero-content {
    bottom: 42px !important;
    padding: 0 22px !important;
  }
  #hero-carousel .hero-title {
    width: min(620px, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    font-size: clamp(34px, 10vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -.04em !important;
  }
  #hero-carousel .hero-desc {
    max-width: calc(100vw - 44px) !important;
    font-size: 14px !important;
  }
}
@media (max-width: 560px) {
  #hero-carousel.hero,
  #hero-carousel {
    min-height: 520px !important;
    height: 520px !important;
  }
  #hero-carousel .hero-bg,
  #hero-carousel .hero-image {
    object-position: center center !important;
    background-position: center center !important;
  }
  #hero-carousel .hero-content {
    bottom: 34px !important;
    padding: 0 18px !important;
  }
  #hero-carousel .hero-title {
    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
    font-size: clamp(30px, 11vw, 44px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    margin-bottom: 12px !important;
  }
  #hero-carousel .hero-desc {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    max-height: 3.1em !important;
    overflow: hidden !important;
  }
  #hero-carousel .hero-meta { display: none !important; }
  #hero-carousel .hero-btns .btn-primary,
  #hero-carousel .hero-btns .btn-secondary {
    min-width: 118px !important;
    width: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ================================================================
   FIX BUSCADOR PROGRAMAS - limpio, sin input duplicado, filtro vivo
   ================================================================ */
.program-search-wrap{
  max-width:var(--mp-max, 1280px)!important;
  margin:0 auto!important;
  padding:14px 28px 0!important;
  position:relative!important;
  z-index:2!important;
}
.program-search-wrap .program-search{
  width:min(100%, 360px)!important;
  max-width:360px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 14px!important;
  background:#060a10!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.program-search-wrap .program-search:focus-within{
  border-color:rgba(var(--brand-primary-rgb, 22,155,213),.55)!important;
  box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb, 22,155,213),.10)!important;
  background:#080d14!important;
}
.program-search-wrap .program-search i{
  flex:0 0 auto!important;
  color:#778498!important;
  font-size:17px!important;
  line-height:1!important;
}
.program-search-wrap .program-search input,
.program-search-wrap .program-search input[type="search"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#f5f8fc!important;
  font-size:13px!important;
  font-weight:650!important;
  font-family:var(--font, inherit)!important;
}
.program-search-wrap .program-search input::placeholder{color:#6d798b!important;opacity:1!important}
.program-search-wrap .program-search input::-webkit-search-cancel-button{
  -webkit-appearance:none!important;
  width:15px!important;
  height:15px!important;
  cursor:pointer!important;
  background:linear-gradient(45deg,transparent 43%,#7f8da0 44%,#7f8da0 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,#7f8da0 44%,#7f8da0 56%,transparent 57%)!important;
  opacity:.75!important;
}
.program-card[hidden], .program-card.is-filtered-out{display:none!important}
.program-search-empty{max-width:var(--mp-max, 1280px)!important;margin:24px auto 58px!important}
.programs-grid.has-search-empty{display:none!important}
@media (max-width: 640px){
  .program-search-wrap{padding-left:18px!important;padding-right:18px!important}
  .program-search-wrap .program-search{max-width:none!important;width:100%!important}
}

/* ================================================================
   FIX CARRUSELES 2026-07-04 — controles centrados y flotantes
   Aplica a últimos capítulos, programas, noticias, blogs y eventos.
   ================================================================ */
.content-row{
  overflow:visible!important;
}
.content-row .row-head{
  position:relative!important;
  z-index:3!important;
}
.content-row .row-carousel{
  position:relative!important;
  overflow:visible!important;
  padding:0!important;
}
.content-row .row-track{
  position:relative!important;
  z-index:1!important;
  padding:0 0 8px!important;
  scroll-behavior:smooth!important;
}
.content-row .row-btn{
  display:flex!important;
  position:absolute!important;
  top:50%!important;
  bottom:auto!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(8,11,16,.72)!important;
  color:#fff!important;
  font-size:19px!important;
  line-height:1!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:25!important;
  cursor:pointer!important;
  opacity:.78!important;
  box-shadow:0 16px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  transition:opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease!important;
}
.content-row .row-btn.prev{
  left:-21px!important;
  right:auto!important;
  background:rgba(8,11,16,.72)!important;
}
.content-row .row-btn.next{
  right:-21px!important;
  left:auto!important;
  background:rgba(8,11,16,.72)!important;
}
.content-row .row-btn:hover{
  opacity:1!important;
  transform:translateY(-50%) scale(1.04)!important;
  background:rgba(12,18,26,.92)!important;
  border-color:rgba(var(--brand-primary-rgb, 22,155,213),.48)!important;
  color:#fff!important;
}
.content-row .row-btn i{
  display:block!important;
  line-height:1!important;
}
.content-row .row-btn.prev::before,
.content-row .row-btn.next::before{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:54px!important;
  height:118px!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  z-index:-1!important;
}
.content-row .row-btn.prev::before{
  left:0!important;
  background:linear-gradient(90deg,rgba(2,4,8,.72),rgba(2,4,8,0))!important;
}
.content-row .row-btn.next::before{
  right:0!important;
  background:linear-gradient(270deg,rgba(2,4,8,.72),rgba(2,4,8,0))!important;
}
@media (max-width: 900px){
  .content-row .row-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    opacity:.92!important;
  }
  .content-row .row-btn.prev{left:-10px!important}
  .content-row .row-btn.next{right:-10px!important}
}
@media (max-width: 640px){
  .content-row .row-btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    font-size:16px!important;
  }
  .content-row .row-btn.prev{left:-6px!important}
  .content-row .row-btn.next{right:-6px!important}
  .content-row .row-btn.prev::before,
  .content-row .row-btn.next::before{height:92px!important;width:34px!important}
}

/* =========================================================
   CONTACTO: tarjetas de información con aire interno
   ========================================================= */
.contact-layout .contact-info-item{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:14px!important;
  padding:16px 18px!important;
  margin:0 0 14px!important;
  min-height:66px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.022))!important;
  box-shadow:none!important;
}
.contact-layout .contact-info-icon{
  width:42px!important;
  height:42px!important;
  border-radius:10px!important;
  margin:0!important;
  flex:0 0 42px!important;
  background:rgba(var(--brand-primary-rgb, 22,155,213),.10)!important;
  border:1px solid rgba(var(--brand-primary-rgb, 22,155,213),.22)!important;
}
.contact-layout .contact-info-item > div:last-child{
  min-width:0!important;
  padding:0!important;
}
.contact-layout .contact-info-label{
  margin:0 0 5px!important;
  line-height:1.15!important;
  letter-spacing:.12em!important;
}
.contact-layout .contact-info-value,
.contact-layout .contact-info-value a{
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}
.contact-layout .contact-info{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
@media (max-width: 768px){
  .contact-layout .contact-info-item{
    grid-template-columns:42px minmax(0,1fr)!important;
    padding:14px 15px!important;
    min-height:62px!important;
  }
}

/* =========================================================
   PWA RESPONSIVE FINAL — banner instalable adaptable
   - Evita que botones se partan en pantallas pequeñas.
   - Mantiene logo, texto y acciones ordenados en cualquier ancho.
   ========================================================= */
.pwa-install-card{
  left:50%!important;
  right:auto!important;
  bottom:max(16px, env(safe-area-inset-bottom))!important;
  width:min(760px, calc(100vw - 32px))!important;
  max-width:none!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px!important;
  border-radius:12px!important;
  background:rgba(8,11,15,.94)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 22px 68px rgba(0,0,0,.58)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  overflow:hidden!important;
}
.pwa-install-icon{
  width:56px!important;
  height:56px!important;
  border-radius:10px!important;
  align-self:center!important;
}
.pwa-install-copy{
  min-width:0!important;
  padding-right:4px!important;
}
.pwa-install-copy strong{
  font-size:15px!important;
  line-height:1.15!important;
  margin:0 0 5px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.pwa-install-copy span{
  font-size:12.5px!important;
  line-height:1.35!important;
  max-width:44rem!important;
}
.pwa-install-copy small{
  font-size:11.5px!important;
  line-height:1.3!important;
  margin-top:4px!important;
}
.pwa-install-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  width:auto!important;
  min-width:0!important;
}
.pwa-install-btn,
.pwa-install-secondary{
  height:38px!important;
  min-height:38px!important;
  padding:0 16px!important;
  border-radius:8px!important;
  font-size:12.5px!important;
  line-height:38px!important;
  text-align:center!important;
}
.pwa-install-close{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:8px!important;
  font-size:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

@media (max-width: 720px){
  .pwa-install-card{
    bottom:max(10px, env(safe-area-inset-bottom))!important;
    width:calc(100vw - 20px)!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:10px 12px!important;
    padding:12px!important;
    border-radius:12px!important;
  }
  .pwa-install-icon{
    width:50px!important;
    height:50px!important;
    border-radius:9px!important;
  }
  .pwa-install-copy strong{
    font-size:14.5px!important;
    margin-bottom:3px!important;
  }
  .pwa-install-copy span{
    display:block!important;
    font-size:12px!important;
    line-height:1.28!important;
    max-height:31px!important;
    overflow:hidden!important;
  }
  .pwa-install-copy small{
    font-size:11px!important;
    margin-top:3px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .pwa-install-actions{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px!important;
    width:100%!important;
    gap:8px!important;
  }
  .pwa-install-btn,
  .pwa-install-secondary{
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 10px!important;
    line-height:40px!important;
    font-size:12px!important;
  }
  .pwa-install-close{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }
}

@media (max-width: 420px){
  .pwa-install-card{
    width:calc(100vw - 16px)!important;
    padding:10px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:9px 10px!important;
  }
  .pwa-install-icon{
    width:44px!important;
    height:44px!important;
  }
  .pwa-install-copy span{
    display:none!important;
  }
  .pwa-install-copy small{
    font-size:10.8px!important;
  }
  .pwa-install-actions{
    grid-template-columns:1fr 82px 38px!important;
    gap:7px!important;
  }
  .pwa-install-btn,
  .pwa-install-secondary,
  .pwa-install-close{
    height:38px!important;
    min-height:38px!important;
    line-height:38px!important;
  }
  .pwa-install-secondary{
    padding:0 8px!important;
  }
  .pwa-install-close{
    width:38px!important;
    min-width:38px!important;
  }
}

@media (max-height: 560px){
  .pwa-install-card{
    bottom:8px!important;
    max-height:calc(100dvh - 16px)!important;
    overflow:auto!important;
  }
  .pwa-install-copy span{
    display:none!important;
  }
}

/* Página EN VIVO + controles premium */
.vivo-menu-all{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:8px 10px 10px;padding:11px 12px;
  border:1px solid rgba(var(--brand-primary-rgb, 22,155,213),.28);
  background:rgba(var(--brand-primary-rgb, 22,155,213),.10);
  color:var(--brand-primary-soft,#8fe4ff);text-decoration:none;font-size:12px;font-weight:850;
}
.vivo-menu-all:hover{background:rgba(var(--brand-primary-rgb, 22,155,213),.16);color:#fff}
.live-page-hero{padding:110px 0 34px;background:radial-gradient(680px 360px at 72% 0,rgba(var(--brand-primary-rgb, 22,155,213),.18),transparent 70%)}
.live-page-hero h1{font-size:clamp(42px,7vw,88px);line-height:.94;letter-spacing:-.075em;margin:14px 0 14px;color:#fff}
.live-page-hero p{font-size:15px;color:var(--t2);max-width:640px;line-height:1.6}
.live-page-wrap{padding-bottom:90px}.live-page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}.live-page-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.020));display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);min-height:270px;box-shadow:0 24px 70px rgba(0,0,0,.22)}.live-page-thumb{position:relative;min-height:260px;background:#070b10;overflow:hidden}.live-page-thumb img{width:100%;height:100%;object-fit:cover;display:block}.live-page-thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.50))}.live-page-fallback{height:100%;display:grid;place-items:center;font-size:44px;font-weight:950;letter-spacing:-.08em;color:rgba(255,255,255,.11);background:radial-gradient(circle at 50% 30%,rgba(var(--brand-primary-rgb, 22,155,213),.24),transparent 64%),#071018}.live-badge-strong{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;background:rgba(var(--brand-primary-rgb, 22,155,213),.92);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:950;letter-spacing:.08em;box-shadow:0 0 28px rgba(var(--brand-primary-rgb, 22,155,213),.36)}.live-page-body{padding:22px;display:flex;flex-direction:column;min-width:0}.live-page-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.live-page-meta span{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-primary-soft,#77dcff);background:rgba(var(--brand-primary-rgb, 22,155,213),.12);border:1px solid rgba(var(--brand-primary-rgb, 22,155,213),.20);padding:6px 8px}.live-page-body h2{font-size:26px;line-height:1.05;letter-spacing:-.04em;color:#fff;margin:0 0 6px}.live-page-body h3{font-size:15px;color:var(--t2);margin:0 0 12px}.live-page-body p{font-size:13px;line-height:1.55;color:var(--t3);margin:0 0 18px}.live-page-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}.live-page-warning{margin-top:14px;color:#ffb4be;background:rgba(225,29,72,.12);border:1px solid rgba(225,29,72,.26);padding:10px 12px;font-size:12px;display:flex;align-items:center;gap:8px}.live-empty-state{min-height:360px}.tag-live .live-dot,.live-badge-strong .live-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.55);display:inline-block}
@media(max-width:760px){.live-page-hero{padding:88px 0 24px}.live-page-card{grid-template-columns:1fr;min-height:0}.live-page-thumb{min-height:190px}.live-page-body{padding:18px}.live-page-body h2{font-size:23px}.live-page-actions .btn{width:100%;justify-content:center}}


/* ============================================================
   FIX EN VIVO MODAL + ETIQUETAS + BOTONES DETALLES — 2026-07-04
   ============================================================ */
#hero-carousel .hero-meta {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
#hero-carousel .hero-meta-item,
#hero-carousel .hero-meta-live {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  line-height:1 !important;
  min-height:32px !important;
  white-space:nowrap !important;
}
#hero-carousel .hero-meta-live .live-dot {
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:#54d6ff !important;
  box-shadow:0 0 14px rgba(var(--brand-primary-rgb, 22,155,213),.75) !important;
  display:inline-block !important;
  flex:0 0 7px !important;
}
.hero-btns .btn-primary,
.hero-btns .btn-secondary {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
}
.live-page-actions {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.live-page-actions .btn {
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:9px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-weight:850 !important;
  line-height:1 !important;
}
.live-page-actions .btn-primary {
  box-shadow:0 12px 28px rgba(var(--brand-primary-rgb, 22,155,213),.22) !important;
}
.live-page-actions .live-page-detail-btn {
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#d8e5ee !important;
  box-shadow:none !important;
}
.live-page-actions .live-page-detail-btn:hover {
  background:rgba(255,255,255,.085) !important;
  border-color:rgba(var(--brand-primary-rgb, 22,155,213),.30) !important;
  color:#fff !important;
}
@media (max-width:760px) {
  #hero-carousel .hero-meta { margin:12px 0 0 !important; }
  #hero-carousel .hero-meta-item,
  #hero-carousel .hero-meta-live { min-height:30px !important; font-size:12px !important; }
  .live-page-actions { flex-direction:column !important; align-items:stretch !important; }
  .live-page-actions .btn { width:100% !important; }
}

/* ============================================================
   REPRODUCTOR MPPTV OFICIAL — YouTube embebido dentro del sistema
   ============================================================ */
body.player-open { overflow: hidden !important; }
.player-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 2.5vw, 34px) !important;
  background:
    radial-gradient(circle at 72% 12%, rgba(var(--brand-primary-rgb, 22,155,213),.18), transparent 34%),
    rgba(0,0,0,.88) !important;
  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease !important;
}
.player-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.player-wrap {
  width: min(1180px, 96vw) !important;
  max-height: min(92vh, 820px) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  background: #05080d !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 38px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(var(--brand-primary-rgb, 22,155,213),.07) inset !important;
}
.player-topbar {
  min-height: 70px !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
.player-live-chip {
  height: 34px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.16) !important;
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.34) !important;
  color: #8ee4ff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.player-live-chip .live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #54d6ff !important;
  box-shadow: 0 0 16px rgba(var(--brand-primary-rgb, 22,155,213),.85), 0 0 0 5px rgba(var(--brand-primary-rgb, 22,155,213),.13) !important;
  flex: 0 0 7px !important;
}
.player-title-box { min-width: 0 !important; }
.player-kicker {
  margin-bottom: 3px !important;
  color: #7a8797 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.player-title {
  margin: 0 !important;
  padding: 0 !important;
  color: #f4f8fd !important;
  font-size: clamp(14px, 1.6vw, 19px) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.player-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.player-icon-btn,
.player-close {
  position: static !important;
  inset: auto !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  color: #dfeaf4 !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}
.player-icon-btn:hover,
.player-close:hover {
  background: rgba(var(--brand-primary-rgb, 22,155,213),.16) !important;
  border-color: rgba(var(--brand-primary-rgb, 22,155,213),.38) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.player-icon-btn i { font-size: 19px !important; line-height: 1 !important; }
.player-iframe-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--brand-primary-rgb, 22,155,213),.13), transparent 40%),
    #000 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.player-iframe-wrap::before {
  content: 'MPPTV' !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.08) !important;
  font-size: clamp(38px, 8vw, 104px) !important;
  font-weight: 950 !important;
  letter-spacing: -.08em !important;
  pointer-events: none !important;
}
.player-iframe-wrap iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  z-index: 2 !important;
  background: #000 !important;
}
.player-iframe-wrap iframe[src=""] { display: none !important; }
.player-footbar {
  min-height: 48px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: #05080d !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: #8492a6 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.player-footbar span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.player-footbar i { color: var(--brand-primary-soft,#7bdcff) !important; font-size: 15px !important; }
@media (max-width: 720px) {
  .player-overlay { padding: 10px !important; align-items: center !important; }
  .player-wrap { width: 100% !important; max-height: 94vh !important; border-radius: 10px !important; }
  .player-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: 62px !important;
  }
  .player-live-chip { display: none !important; }
  .player-kicker { font-size: 9px !important; }
  .player-title { font-size: 14px !important; }
  .player-icon-btn, .player-close { width: 38px !important; height: 38px !important; }
  .player-footbar { display: none !important; }
}
@media (max-width: 420px) {
  .player-overlay { padding: 8px !important; }
  .player-actions { gap: 6px !important; }
  .player-icon-btn, .player-close { width: 36px !important; height: 36px !important; }
  .player-title { max-width: calc(100vw - 128px) !important; }
}

/* ============================================================
   AHORA EN VIVO GLOBAL + PÁGINA /ENVIVO PREMIUM — 2026-07-04
   ============================================================ */
body.has-global-live { --live-bar-h: 46px; }
.global-live-bar {
  position: fixed !important;
  top: var(--nav-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 190 !important;
  padding: 0 5% !important;
  background:
    linear-gradient(90deg, rgba(5,8,13,.96), rgba(7,18,27,.94) 48%, rgba(5,8,13,.96)),
    radial-gradient(circle at 20% 50%, rgba(var(--brand-primary-rgb, 22,155,213),.22), transparent 38%) !important;
  border-top: 1px solid rgba(255,255,255,.045) !important;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.18) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(15px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(120%) !important;
}
.global-live-inner {
  height: var(--live-bar-h) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
.global-live-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  text-align: left !important;
  overflow: hidden !important;
}
.global-live-status {
  height: 24px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.18) !important;
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.34) !important;
  color: #92e6ff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.global-live-status .live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #61dfff !important;
  box-shadow: 0 0 14px rgba(var(--brand-primary-rgb, 22,155,213),.88), 0 0 0 5px rgba(var(--brand-primary-rgb, 22,155,213),.13) !important;
}
.global-live-title {
  min-width: 0 !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: -.015em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.global-live-sep { color: rgba(255,255,255,.28) !important; flex: 0 0 auto !important; }
.global-live-episode {
  min-width: 0 !important;
  color: #aeb9c8 !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.global-live-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.global-live-watch,
.global-live-all {
  height: 32px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.global-live-watch {
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.38) !important;
  background: var(--acc) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(var(--brand-primary-rgb, 22,155,213),.22) !important;
}
.global-live-all {
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.055) !important;
  color: #dbe7f2 !important;
}
.global-live-watch:hover,
.global-live-all:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; }
body.has-global-live .hero { margin-top: var(--live-bar-h) !important; }
body.has-global-live .page-hero { padding-top: calc(110px + var(--live-bar-h)) !important; }
body.has-global-live .programs-page,
body.has-global-live .content-page,
body.has-global-live .contact-page { padding-top: var(--live-bar-h) !important; }

.live-hero-premium {
  background:
    radial-gradient(680px 360px at 76% 0, rgba(var(--brand-primary-rgb, 22,155,213),.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent) !important;
}
.live-premium-wrap { padding-bottom: 96px !important; }
.live-feature-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  min-height: 430px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.34), 0 0 0 1px rgba(var(--brand-primary-rgb, 22,155,213),.045) inset !important;
}
.live-feature-media {
  position: relative !important;
  min-height: 430px !important;
  background: #05080d !important;
  overflow: hidden !important;
}
.live-feature-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.live-feature-shade {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.55)),
    linear-gradient(0deg, rgba(0,0,0,.50), transparent 54%) !important;
  pointer-events: none !important;
}
.live-feature-fallback {
  height: 100% !important;
  min-height: 430px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--brand-primary-rgb, 22,155,213),.28), transparent 66%),
    linear-gradient(135deg, #06111a, #030406) !important;
}
.live-feature-fallback strong {
  color: rgba(255,255,255,.13) !important;
  font-size: clamp(56px, 8vw, 116px) !important;
  font-weight: 950 !important;
  letter-spacing: -.08em !important;
  line-height: .9 !important;
}
.live-feature-fallback span {
  color: #8ddfff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.live-feature-badge {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 3 !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.94) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  line-height: 1 !important;
  box-shadow: 0 0 30px rgba(var(--brand-primary-rgb, 22,155,213),.34) !important;
}
.live-feature-badge .live-dot { background:#fff !important; width:7px !important; height:7px !important; }
.live-feature-info {
  min-width: 0 !important;
  padding: clamp(24px, 3.5vw, 46px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background:
    radial-gradient(420px 260px at 100% 0, rgba(var(--brand-primary-rgb, 22,155,213),.12), transparent 70%),
    #070a10 !important;
}
.live-feature-meta {
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.live-feature-meta span {
  min-height: 28px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.24) !important;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.105) !important;
  color: #8ee4ff !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}
.live-feature-info h2 {
  color: #fff !important;
  font-size: clamp(38px, 5vw, 72px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
  margin: 0 0 12px !important;
  font-weight: 950 !important;
}
.live-feature-info h3 {
  color: #b8c2d1 !important;
  font-size: clamp(17px, 2vw, 24px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 14px !important;
  font-weight: 850 !important;
}
.live-feature-info p {
  color: #8592a6 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin: 0 0 26px !important;
}
.live-feature-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.live-feature-actions .btn,
.live-page-actions .live-share-btn,
.live-page-actions .live-program-btn {
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
.live-watch-primary { box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb, 22,155,213),.24) !important; }
.live-share-btn { color:#e6f4ff !important; border-color:rgba(var(--brand-primary-rgb, 22,155,213),.22) !important; background:rgba(var(--brand-primary-rgb, 22,155,213),.09) !important; }
.live-program-btn,
.live-page-detail-btn { color:#dce7f1 !important; background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.12) !important; }
.live-share-btn:hover,
.live-program-btn:hover,
.live-page-detail-btn:hover { background:rgba(var(--brand-primary-rgb, 22,155,213),.14) !important; border-color:rgba(var(--brand-primary-rgb, 22,155,213),.34) !important; color:#fff !important; }
.live-page-section-title {
  margin: 34px 0 16px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}
.live-page-section-title span {
  color: #84ddff !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
}
.live-page-section-title h2 {
  margin: 4px 0 0 !important;
  color: #fff !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}
.live-page-grid-premium { grid-template-columns: repeat(auto-fit,minmax(360px,1fr)) !important; }
.live-card-compact .live-page-actions { margin-top: auto !important; }
.live-card-compact .live-page-actions .btn { flex: 0 0 auto !important; }
.player-share { color: #cdeeff !important; }
.player-share:hover { background: rgba(var(--brand-primary-rgb, 22,155,213),.18) !important; }

@media (max-width: 980px) {
  .live-feature-card { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .live-feature-media { min-height: 300px !important; }
  .live-feature-fallback { min-height: 300px !important; }
  .live-feature-info { padding: 24px !important; }
  .global-live-bar { padding: 0 18px !important; }
  .global-live-episode { display: none !important; }
  .global-live-sep { display: none !important; }
}
@media (max-width: 720px) {
  body.has-global-live { --live-bar-h: 58px; }
  .global-live-inner { height: var(--live-bar-h) !important; gap: 10px !important; }
  .global-live-main { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important; }
  .global-live-status { height: 20px !important; padding: 0 7px !important; font-size: 9px !important; }
  .global-live-title { max-width: 100% !important; font-size: 12.5px !important; }
  .global-live-actions { gap: 6px !important; }
  .global-live-watch { width: 38px !important; padding: 0 !important; font-size: 0 !important; }
  .global-live-watch i { font-size: 16px !important; }
  .global-live-all { width: 38px !important; padding: 0 !important; font-size: 0 !important; }
  .global-live-all i { font-size: 16px !important; margin: 0 !important; }
  body.has-global-live .page-hero { padding-top: calc(88px + var(--live-bar-h)) !important; }
  .live-feature-media { min-height: 220px !important; }
  .live-feature-fallback { min-height: 220px !important; }
  .live-feature-info h2 { font-size: 36px !important; }
  .live-feature-actions { flex-direction: column !important; align-items: stretch !important; }
  .live-feature-actions .btn { width: 100% !important; }
  .live-page-grid-premium { grid-template-columns: 1fr !important; }
  .live-card-compact .live-page-actions .btn { width: 100% !important; }
}
@media (max-width: 430px) {
  .global-live-bar { padding: 0 12px !important; }
  .live-feature-info { padding: 20px !important; }
  .live-feature-info h2 { font-size: 32px !important; }
}

/* ============================================================
   FIX: BARRA EN VIVO SUPERIOR, SIN DUPLICAR BOTÓN DEL HEADER
   - La barra queda fija arriba.
   - El header baja debajo de la barra.
   - Se oculta el botón EN VIVO del header para no repetir acciones.
   ============================================================ */
body.has-global-live {
  --live-bar-h: 42px !important;
  padding-top: var(--live-bar-h) !important;
}
body.has-global-live .header-actions,
body.has-global-live .vivo-dropdown,
body.has-global-live .btn-vivo {
  display: none !important;
}
body.has-global-live .site-header {
  top: var(--live-bar-h) !important;
  z-index: 980 !important;
}
.global-live-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1100 !important;
  height: var(--live-bar-h) !important;
  padding: 0 28px !important;
  background:
    linear-gradient(90deg, rgba(3,5,8,.98), rgba(5,18,28,.98) 48%, rgba(3,5,8,.98)) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.24) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.36) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}
.global-live-inner {
  height: var(--live-bar-h) !important;
  max-width: var(--mp-max, 1380px) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
.global-live-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: var(--live-bar-h) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  text-align: left !important;
}
.global-live-status {
  height: 24px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  border-radius: 6px !important;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.18) !important;
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.36) !important;
  color: #8fe6ff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.global-live-title {
  max-width: 280px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.global-live-sep {
  color: rgba(255,255,255,.28) !important;
  flex: 0 0 auto !important;
}
.global-live-episode {
  min-width: 0 !important;
  color: #9facbd !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.global-live-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.global-live-watch,
.global-live-all {
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.global-live-watch {
  background: linear-gradient(135deg, var(--acc), #0b7fb7) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb, 22,155,213),.20) !important;
}
.global-live-all {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #dbe7f2 !important;
}
.global-live-watch:hover,
.global-live-all:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}
body.has-global-live .hero {
  margin-top: 0 !important;
}
body.has-global-live .page-hero,
body.has-global-live .programs-page,
body.has-global-live .content-page,
body.has-global-live .contact-page {
  padding-top: 0 !important;
}

@media (max-width: 980px) {
  .global-live-bar { padding: 0 18px !important; }
  .global-live-title { max-width: 210px !important; }
  .global-live-episode,
  .global-live-sep { display: none !important; }
}
@media (max-width: 720px) {
  body.has-global-live { --live-bar-h: 44px !important; }
  .global-live-inner { gap: 10px !important; }
  .global-live-main { gap: 8px !important; }
  .global-live-status { height: 22px !important; padding: 0 8px !important; font-size: 9px !important; letter-spacing: .10em !important; }
  .global-live-title { max-width: 42vw !important; font-size: 12px !important; }
  .global-live-actions { gap: 6px !important; }
  .global-live-watch,
  .global-live-all { width: 34px !important; height: 30px !important; padding: 0 !important; font-size: 0 !important; }
  .global-live-watch i,
  .global-live-all i { font-size: 15px !important; margin: 0 !important; }
}
@media (max-width: 430px) {
  .global-live-bar { padding: 0 10px !important; }
  .global-live-title { max-width: 34vw !important; }
}


/* ============================================================
   FIX: BARRA EN VIVO NO FIJA + TICKER DESLIZANTE — 2026-07-04
   - Se conserva el botón EN VIVO del header.
   - La barra ya no queda fija ni duplica visualmente el header.
   - Si el texto no entra, se desliza; al hover/focus se pausa.
   ============================================================ */
body.has-global-live {
  --live-bar-h: 40px !important;
  padding-top: 0 !important;
}
@media (min-width: 1296px) {
  body.has-global-live .header-actions { display: flex !important; }
  body.has-global-live .vivo-dropdown { display: block !important; }
  body.has-global-live .btn-vivo { display: inline-flex !important; }
}
body.has-global-live .site-header {
  top: 0 !important;
  z-index: 980 !important;
}
.global-live-bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 18 !important;
  height: auto !important;
  min-height: var(--live-bar-h) !important;
  padding: 0 28px !important;
  background:
    linear-gradient(90deg, rgba(3,7,11,.96), rgba(5,21,32,.92) 50%, rgba(3,7,11,.96)) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.20) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
}
.global-live-inner {
  height: var(--live-bar-h) !important;
  max-width: var(--mp-max, 1380px) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
.global-live-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: var(--live-bar-h) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  text-align: left !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.global-live-main:hover .global-live-status,
.global-live-main:focus-visible .global-live-status {
  background: rgba(var(--brand-primary-rgb, 22,155,213),.26) !important;
  border-color: rgba(var(--brand-primary-rgb, 22,155,213),.48) !important;
}
.global-live-status {
  height: 22px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  border-radius: 6px !important;
  background: rgba(var(--brand-primary-rgb, 22,155,213),.17) !important;
  border: 1px solid rgba(var(--brand-primary-rgb, 22,155,213),.34) !important;
  color: #8fe6ff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.global-live-status .live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #61dfff !important;
  box-shadow: 0 0 14px rgba(var(--brand-primary-rgb, 22,155,213),.88), 0 0 0 5px rgba(var(--brand-primary-rgb, 22,155,213),.13) !important;
}
.global-live-viewport {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
}
.global-live-track {
  display: inline-flex !important;
  align-items: center !important;
  gap: 54px !important;
  min-width: max-content !important;
  will-change: transform !important;
}
.global-live-copy {
  display: inline-flex !important;
  align-items: center !important;
  color: #dbe7f2 !important;
  font-size: 12.5px !important;
  font-weight: 780 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}
.global-live-copy[aria-hidden="true"] { display: none !important; }
.global-live-main.is-overflowing .global-live-copy[aria-hidden="true"] { display: inline-flex !important; }
.global-live-main.is-overflowing .global-live-track {
  animation: mpptvLiveTicker 22s linear infinite !important;
}
.global-live-main.is-overflowing:hover .global-live-track,
.global-live-main.is-overflowing:focus-visible .global-live-track,
.global-live-main.is-overflowing.is-paused .global-live-track {
  animation-play-state: paused !important;
}
@keyframes mpptvLiveTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 27px)); }
}
.global-live-title,
.global-live-sep,
.global-live-episode { display: none !important; }
.global-live-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.global-live-watch,
.global-live-all {
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.global-live-watch {
  background: linear-gradient(135deg, var(--acc), #0b7fb7) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb, 22,155,213),.16) !important;
}
.global-live-all {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #dbe7f2 !important;
}
.global-live-watch:hover,
.global-live-all:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}
body.has-global-live .hero,
body.has-global-live .page-hero,
body.has-global-live .programs-page,
body.has-global-live .content-page,
body.has-global-live .contact-page {
  margin-top: 0 !important;
  padding-top: inherit;
}
@media (max-width: 980px) {
  .global-live-bar { padding: 0 18px !important; }
  .global-live-inner { gap: 10px !important; }
  .global-live-copy { font-size: 12px !important; }
}
@media (max-width: 720px) {
  body.has-global-live { --live-bar-h: 42px !important; }
  .global-live-bar { padding: 0 12px !important; }
  .global-live-status { height: 21px !important; padding: 0 8px !important; font-size: 9px !important; letter-spacing: .09em !important; }
  .global-live-copy { font-size: 11.5px !important; }
  .global-live-actions { gap: 6px !important; }
  .global-live-watch,
  .global-live-all { width: 34px !important; height: 30px !important; padding: 0 !important; font-size: 0 !important; }
  .global-live-watch i,
  .global-live-all i { font-size: 15px !important; margin: 0 !important; }
}


/* MPPTV full upgrade 20260704 */
.header-search-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:var(--t2);border-radius:10px;text-decoration:none;transition:.18s ease}
.header-search-btn:hover{border-color:rgba(var(--brand-primary-rgb, 22,155,213),.55);color:#fff;background:rgba(var(--brand-primary-rgb, 22,155,213),.12);transform:translateY(-1px)}
.search-page{padding-top:76px;padding-bottom:80px}.search-hero{max-width:980px;margin:0 auto 34px}.search-hero h1{font-size:clamp(38px,7vw,86px);line-height:.92;margin:12px 0;color:#fff;letter-spacing:-.06em}.search-hero p{color:var(--t2);font-size:16px;max-width:620px}.global-search-form{margin-top:24px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.14);background:rgba(7,12,17,.78);padding:10px 12px;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.22)}.global-search-form i{color:var(--acc)}.global-search-form input{flex:1;border:0!important;background:transparent!important;color:#fff!important;outline:0!important;box-shadow:none!important;min-height:42px}.global-search-form button{border:0;background:linear-gradient(135deg,var(--acc),#167fc0);color:#fff;border-radius:10px;padding:12px 22px;font-weight:800;cursor:pointer}.search-summary{max-width:1180px;margin:0 auto 20px;color:var(--t2);border-left:3px solid var(--acc);padding-left:12px}.search-group{max-width:1180px;margin:0 auto 34px}.clean-head{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px;margin-bottom:16px}.clean-head span{color:var(--t3);font-size:12px}.search-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.search-result-card{display:grid;grid-template-columns:150px 1fr;gap:16px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:14px;overflow:hidden;min-height:130px}.search-result-media{display:flex;align-items:center;justify-content:center;background:rgba(var(--brand-primary-rgb, 22,155,213),.08);color:var(--acc);text-decoration:none}.search-result-media img{width:100%;height:100%;object-fit:cover}.search-result-media.no-img i{font-size:34px;opacity:.75}.search-result-body{padding:16px 16px 14px 0;min-width:0}.search-result-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}.search-result-meta span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);font-weight:800}.search-result-meta em{font-style:normal;font-size:11px;color:var(--t3)}.search-result-body h3{font-size:18px;margin:0 0 6px;color:#fff}.search-result-body h3 a{color:inherit;text-decoration:none}.search-result-body p{margin:0 0 12px;color:var(--t2);font-size:13px;line-height:1.45}.search-result-actions{display:flex;gap:8px;flex-wrap:wrap}.btn-compact{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#fff;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}.btn-compact:hover{border-color:rgba(var(--brand-primary-rgb, 22,155,213),.55);background:rgba(var(--brand-primary-rgb, 22,155,213),.13)}.search-empty-pro{max-width:720px;margin:35px auto;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);border-radius:18px;padding:46px;text-align:center}.search-empty-pro i{font-size:44px;color:var(--acc);opacity:.8}.search-empty-pro h3{margin:14px 0 8px;color:#fff;font-size:24px}.search-empty-pro p{color:var(--t2);margin:0}.error-page{min-height:58vh;display:flex;align-items:center;justify-content:center}.error-card-pro{max-width:620px;text-align:center;border:1px solid rgba(255,255,255,.10);background:radial-gradient(circle at 50% 0,rgba(var(--brand-primary-rgb, 22,155,213),.14),transparent 45%),rgba(255,255,255,.035);border-radius:20px;padding:54px 32px}.error-code{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(var(--brand-primary-rgb, 22,155,213),.14);border:1px solid rgba(var(--brand-primary-rgb, 22,155,213),.28);color:var(--acc);font-weight:900;letter-spacing:.16em}.error-card-pro h1{font-size:clamp(34px,6vw,66px);margin:16px 0 10px;letter-spacing:-.05em;color:#fff}.error-card-pro p{color:var(--t2)}.error-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}.btn-secondary{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;text-decoration:none;border-radius:10px;padding:12px 18px;font-weight:800}
@media(max-width:760px){.header-search-btn{display:none}.search-page{padding-top:46px}.global-search-form{flex-wrap:wrap}.global-search-form button{width:100%}.search-grid{grid-template-columns:1fr}.search-result-card{grid-template-columns:110px 1fr}.search-result-body{padding:13px 12px 13px 0}.search-result-body h3{font-size:16px}}


/* === FIX 1693: Buscador público con aire y responsive real === */
.search-page.page-shell{
  width:min(1180px, calc(100% - 56px))!important;
  max-width:1180px!important;
  margin-inline:auto!important;
  padding:76px 0 86px!important;
  box-sizing:border-box!important;
}
.search-page .search-hero,
.search-page .search-summary,
.search-page .search-group,
.search-page .search-empty-pro{
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.search-page .search-hero{margin-bottom:34px!important;}
.global-search-form{width:100%;box-sizing:border-box;}
.global-search-form input{min-width:0!important;}
@media(max-width:760px){
  .search-page.page-shell{width:calc(100% - 28px)!important;padding-top:42px!important;padding-bottom:64px!important;}
  .search-hero h1{font-size:clamp(34px,10.5vw,52px)!important;line-height:.98!important;letter-spacing:-.055em!important;}
  .search-hero p{font-size:14px!important;line-height:1.55!important;}
  .global-search-form{padding:11px!important;border-radius:12px!important;gap:10px!important;}
  .global-search-form button{height:42px!important;border-radius:10px!important;}
  .search-empty-pro{padding:28px 18px!important;border-radius:14px!important;}
  .search-result-card{grid-template-columns:96px 1fr!important;border-radius:12px!important;}
  .search-result-body{padding:12px 12px 12px 0!important;}
}
@media(max-width:420px){
  .search-page.page-shell{width:calc(100% - 22px)!important;}
  .search-result-card{grid-template-columns:1fr!important;}
  .search-result-media{height:150px!important;}
  .search-result-body{padding:14px!important;}
}


/* MPPTV maintenance suite */
.maintenance-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at top,#0d2d45 0,#05070d 55%,#020409 100%)}.maintenance-card{width:min(620px,94vw);padding:34px;text-align:center;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 90px rgba(0,0,0,.45);border-radius:18px}.maintenance-card img{max-height:72px;max-width:220px;object-fit:contain;margin-bottom:18px}.maintenance-card h1{font-size:clamp(30px,6vw,54px);line-height:.95;margin:14px 0}.maintenance-card p{color:rgba(255,255,255,.76);font-size:16px;line-height:1.6}

/* MPPTV Pro Suite extras */
.schedule-page{padding-top:28px;padding-bottom:70px}.schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}.schedule-day{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:18px;padding:18px}.schedule-day h2{font-size:20px;margin:0 0 14px}.schedule-item{display:flex;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.07)}.schedule-item:first-of-type{border-top:0}.schedule-time{min-width:66px;color:var(--acc)}.schedule-time strong{display:block;font-size:16px}.schedule-time span{display:block;font-size:11px;color:var(--text3)}.schedule-info h3{margin:0 0 5px;font-size:15px}.schedule-info p{margin:0 0 6px;color:var(--text2);font-size:13px;line-height:1.45}.schedule-info a{font-size:12px;color:var(--acc);text-decoration:none}.empty-state.mini{padding:20px;text-align:center}.tv-mode-page{min-height:80vh;padding:38px 6vw 70px}.tv-hero-panel{background:radial-gradient(circle at top left,rgba(var(--brand-primary-rgb),.18),transparent 45%),rgba(255,255,255,.035);border:1px solid var(--border);border-radius:28px;padding:32px;display:flex;justify-content:space-between;gap:24px;align-items:center}.tv-hero-panel img{height:52px;margin-bottom:18px}.tv-hero-panel span{display:block;color:var(--text3);font-size:13px}.tv-hero-panel h1{font-size:clamp(42px,8vw,92px);line-height:.9;margin:8px 0}.tv-hero-panel p{font-size:clamp(16px,2vw,24px);color:var(--text2)}.tv-clock{font-size:clamp(40px,7vw,86px);font-weight:900;color:var(--acc)}.tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.tv-card{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:22px;padding:22px}.tv-card h2{margin:0 0 14px}.tv-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}.tv-row:first-of-type{border-top:0}.tv-row strong{color:var(--acc);min-width:54px}.home-banner-strip{width:min(1180px,calc(100% - 32px));margin:24px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.home-banner-card{position:relative;min-height:120px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);display:flex;align-items:end;text-decoration:none;color:var(--text)}.home-banner-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}.home-banner-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}.home-banner-card div{position:relative;z-index:1;padding:18px}.home-banner-card h3{margin:0 0 5px;font-size:17px}.home-banner-card p{margin:0;color:var(--text2);font-size:13px}@media(max-width:720px){.tv-hero-panel,.tv-grid{display:block}.tv-clock{margin-top:20px}.tv-card{margin-top:14px}.schedule-grid{grid-template-columns:1fr}.home-banner-strip{width:calc(100% - 24px)}}