/* =====================================================================
   Canal 20 Villa Maria - estilos del portal (mobile-first)
   Colores institucionales: --c20-primary / --c20-accent (configurables)
   ===================================================================== */
:root {
  --c20-primary: #ff000a;
  --c20-accent: #a30007;
  --c20-ink: #1d1d1f;
  --c20-muted: #66666b;
  --c20-bg-soft: #faf5f5;
  --c20-radius: 14px;
  --c20-shadow: 0 6px 24px rgba(90, 0, 6, .08);
  --bs-primary: var(--c20-primary);
  --bs-link-color: var(--c20-primary);
  --bs-link-hover-color: var(--c20-accent);
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--c20-ink);
}
html { scroll-behavior: smooth; }
body { font-family: var(--bs-body-font-family); color: var(--c20-ink); overflow-x: hidden; background: #fff; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--c20-accent); outline-offset: 2px; }
.skip-link { position: absolute; z-index: 2000; left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; border-radius: 8px; }
.min-w-0 { min-width: 0; }

.btn-primary { --bs-btn-bg: var(--c20-primary); --bs-btn-border-color: var(--c20-primary); --bs-btn-hover-bg: #d10008; --bs-btn-hover-border-color: #d10008; --bs-btn-active-bg: #b80007; font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--c20-primary); --bs-btn-border-color: var(--c20-primary); --bs-btn-hover-bg: var(--c20-primary); --bs-btn-hover-border-color: var(--c20-primary); --bs-btn-active-bg: var(--c20-primary); font-weight: 600; }
.text-primary { color: var(--c20-primary) !important; }

.preview-bar { background: #fff3cd; color: #664d03; text-align: center; font-size: .875rem; padding: .45rem 1rem; }
.preview-bar a { color: inherit; font-weight: 600; margin-left: .35rem; }

/* ---------- Encabezado ---------- */
.site-header { background: #fff; border-bottom: 3px solid var(--c20-primary); box-shadow: 0 2px 12px rgba(90, 0, 6, .06); }
.site-header .navbar { padding: .55rem 0; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; }
.brand-name { font-weight: 800; color: var(--c20-primary); font-size: 1.05rem; letter-spacing: .01em; line-height: 1.1; }
.navbar-toggler { border: 0; font-size: 1.9rem; color: var(--c20-primary); padding: .25rem .5rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 0, 10, .25); }
.site-header .nav-link { font-weight: 600; color: var(--c20-ink); font-size: .95rem; padding: .75rem 0; border-bottom: 1px solid #f6f0f0; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--c20-primary); }
.btn-social { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; font-weight: 600; font-size: .85rem; border-radius: 8px; padding: .45rem .7rem; min-height: 40px; display: inline-flex; align-items: center; }
.btn-social-facebook { --bs-btn-bg: #ff000a; --bs-btn-hover-bg: #d10008; }
.btn-social-instagram { --bs-btn-bg: #c20008; --bs-btn-hover-bg: #9e0006; }
.btn-social-youtube { --bs-btn-bg: #c4161c; --bs-btn-hover-bg: #a31217; }
.btn-social-x { --bs-btn-bg: #111; --bs-btn-hover-bg: #333; }
.btn-social-tiktok { --bs-btn-bg: #222; --bs-btn-hover-bg: #000; }
.btn-live { --bs-btn-bg: var(--c20-accent); --bs-btn-color: #fff; --bs-btn-hover-bg: #a90c22; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #a90c22; --bs-btn-active-color: #fff; font-weight: 700; border-radius: 8px; min-height: 40px; }
@media (min-width: 992px) {
  .brand-name { font-size: 1rem; }
  .site-header .nav-link { border: 0; padding: .5rem .8rem !important; position: relative; }
  .site-header .nav-link.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem; height: 3px; border-radius: 2px; background: var(--c20-accent); }
}
@media (min-width: 992px) {
  .site-header .nav-link { white-space: nowrap; }
  .header-actions { flex-wrap: nowrap !important; }
  .header-actions .btn-social { width: 40px; justify-content: center; padding: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .brand-name { display: none; } .site-header .nav-link { padding: .5rem .55rem !important; font-size: .9rem; } }
@media (min-width: 1200px) and (max-width: 1399.98px) { .site-header .nav-link { padding: .5rem .7rem !important; } }
@media (min-width: 1400px) { .site-header .nav-link { padding: .5rem 1rem !important; } }

/* ---------- Hero / transmision ---------- */
.hero {
  position: relative;
  background-color: var(--c20-bg-soft);
  background-image:
    linear-gradient(180deg, rgba(250, 245, 245, .9), rgba(250, 245, 245, .97)),
    var(--hero-bg, linear-gradient(transparent, transparent)),
    linear-gradient(rgba(255, 0, 10, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 10, .05) 1px, transparent 1px);
  background-size: cover, cover, 28px 28px, 28px 28px;
  background-position: center;
  padding: 1.25rem 0 2rem;
}
.hero-title {
  font-weight: 800; color: var(--c20-primary); text-transform: uppercase;
  font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; margin-bottom: .6rem;
}
.hero-tagline { font-size: clamp(1rem, 3.6vw, 1.3rem); color: #46464a; margin-bottom: 1rem; }
.hero-divider { width: 110px; height: 3px; border-radius: 2px; background: var(--c20-primary); margin-bottom: 1.1rem; }
.hero-now { font-size: .95rem; color: var(--c20-muted); margin-bottom: 1.2rem; min-height: 1.5rem; }
.hero-now a { font-weight: 600; color: var(--c20-ink); text-decoration: none; }
.hero-now a:hover { color: var(--c20-primary); }
.btn-hero-live {
  background: var(--c20-primary); color: #fff; font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
  padding: .85rem 1.6rem; border-radius: 10px; box-shadow: 0 8px 20px rgba(255, 0, 10, .3); width: 100%;
}
.btn-hero-live:hover, .btn-hero-live:focus-visible { background: #d10008; color: #fff; }
.btn-hero-live i { font-size: 1.4rem; vertical-align: -.2rem; }
@media (min-width: 576px) { .btn-hero-live { width: auto; } }
@media (min-width: 992px) { .hero { padding: 3rem 0 2.5rem; } }

.quick-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.75rem; }
.quick-card {
  display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: 12px; padding: .9rem 1rem;
  box-shadow: var(--c20-shadow); text-decoration: none; color: var(--c20-ink); font-weight: 600; font-size: .92rem;
  min-height: 64px; transition: transform .15s ease, box-shadow .15s ease;
}
.quick-card i { font-size: 1.6rem; color: var(--c20-primary); }
.quick-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(90, 0, 6, .14); color: var(--c20-primary); }
@media (min-width: 768px) { .quick-links { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; } .quick-card { padding: 1.25rem 1.4rem; font-size: 1rem; } .quick-card i { font-size: 2rem; } }

/* ---------- Secciones ---------- */
.section { padding: 3rem 0; }
.section-alt { background: var(--c20-bg-soft); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.section-title { font-weight: 800; color: var(--c20-primary); font-size: clamp(1.5rem, 5vw, 2.1rem); margin-bottom: .2rem; position: relative; }
.section-subtitle { color: var(--c20-muted); margin: 0; }
.btn-round { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #ecdcdc; color: var(--c20-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.btn-round:hover { background: var(--c20-primary); color: #fff; }
.btn-round:disabled { opacity: .4; }
.empty-state { text-align: center; padding: 2.5rem 1rem; background: #fff; border: 1px dashed #e6d0d0; border-radius: var(--c20-radius); color: var(--c20-muted); }
.empty-state > i { font-size: 2.4rem; color: var(--c20-primary); display: block; margin-bottom: .6rem; }

.page-hero { background: var(--c20-bg-soft); padding: 1.25rem 0 1.75rem; border-bottom: 1px solid #f1e4e4; }
.page-title { font-weight: 800; color: var(--c20-primary); font-size: clamp(1.7rem, 6vw, 2.6rem); }
.page-lead { color: var(--c20-muted); margin: 0; font-size: 1.05rem; }
.breadcrumb { font-size: .85rem; margin-bottom: .5rem; }
.breadcrumb a { text-decoration: none; }
.prose p { line-height: 1.75; color: #2e2e31; }

/* ---------- Carrusel de programacion ---------- */
.program-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: .25rem 2px 1rem;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.program-track > * { scroll-snap-align: start; }
@media (min-width: 576px) { .program-track { grid-auto-columns: 55%; } }
@media (min-width: 768px) { .program-track { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (min-width: 1200px) { .program-track { grid-auto-columns: calc((100% - 3rem) / 4); gap: 1rem; } }

.program-card { background: #fff; border-radius: var(--c20-radius); box-shadow: var(--c20-shadow); overflow: hidden; border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease; height: 100%; }
.program-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(90, 0, 6, .15); }
.program-card.is-live { border-color: var(--c20-accent); box-shadow: 0 10px 30px rgba(163, 0, 7, .18); }
.program-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.program-card-media, .program-hero-media { position: relative; aspect-ratio: 16 / 9; background: #f6e9e9; overflow: hidden; }
.program-card-media img, .program-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.program-hero-media { border-radius: var(--c20-radius); border: 3px solid transparent; box-shadow: var(--c20-shadow); }
.program-hero-media.is-live { border-color: var(--c20-accent); }
.program-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--c20-primary); background: linear-gradient(135deg, #f6e9e9, #efd6d6); }
.live-badge { position: absolute; top: .6rem; left: .6rem; font-weight: 700; letter-spacing: .05em; padding: .4em .65em; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.live-badge i, .c20-live-badge i { animation: c20-blink 1.4s ease-in-out infinite; }
.live-badge[hidden], .live-badge-inline[hidden] { display: none !important; }
.program-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.program-card-title { font-size: 1.08rem; font-weight: 700; margin: 0 0 .2rem; color: var(--c20-ink); }
.program-card-time, .program-card-hosts { font-size: .85rem; margin: 0; color: var(--c20-primary); font-weight: 500; }
.program-card-hosts { color: var(--c20-muted); }
.program-card-summary { font-size: .88rem; color: var(--c20-muted); margin: .3rem 0 0; }
.program-facts dt { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c20-muted); font-weight: 600; margin-top: 1rem; }
.program-facts dd { font-weight: 500; margin-bottom: 0; }

/* Grilla por dia */
.day-tabs { gap: .4rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; }
.day-tabs .nav-link { background: #fff; border: 1px solid #ecdcdc; color: var(--c20-ink); font-weight: 600; white-space: nowrap; border-radius: 10px; min-height: 44px; }
.day-tabs .nav-link.active { background: var(--c20-primary); border-color: var(--c20-primary); color: #fff; }
.schedule-list { display: grid; gap: .75rem; }
.schedule-item { position: relative; display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--c20-shadow); border-left: 4px solid #ecdcdc; }
.schedule-item.is-live { border-left-color: var(--c20-accent); background: #fff7f8; }
.schedule-time { font-weight: 800; color: var(--c20-primary); font-size: 1.1rem; min-width: 3.4rem; line-height: 1.1; text-align: center; }
.schedule-time span { display: block; font-size: .78rem; color: var(--c20-muted); font-weight: 500; }
.schedule-time span::before { content: "a "; }
.schedule-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; display: none; }
@media (min-width: 576px) { .schedule-thumb { display: block; } }
.schedule-name { font-size: 1rem; font-weight: 700; margin: 0; }
.schedule-name a { color: var(--c20-ink); text-decoration: none; }
.schedule-hosts { font-size: .85rem; color: var(--c20-muted); }

/* ---------- Videos ---------- */
.video-card { background: #fff; border-radius: var(--c20-radius); overflow: hidden; box-shadow: var(--c20-shadow); height: 100%; display: flex; flex-direction: column; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.video-play i { width: 64px; height: 64px; border-radius: 50%; background: var(--c20-accent); color: #fff; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.video-play:hover { background: rgba(0, 0, 0, .3); }
.video-play:hover i { transform: scale(1.08); }
.video-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; flex-grow: 1; justify-content: space-between; }
.video-title { font-size: 1rem; font-weight: 600; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-date { font-size: .8rem; color: var(--c20-muted); }
.video-link { font-size: .85rem; font-weight: 600; text-decoration: none; }

/* ---------- Institucional / contacto ---------- */
.info-card { background: #fff; border-radius: var(--c20-radius); box-shadow: var(--c20-shadow); padding: 1.5rem; border: 1px solid #f6f0f0; }
@media (min-width: 768px) { .info-card { padding: 2rem; } }
.info-card-title { font-size: 1.2rem; font-weight: 700; color: var(--c20-primary); margin-bottom: 1rem; }
.info-card-title i { color: var(--c20-accent); margin-right: .25rem; }
.about-image { width: 100%; border-radius: var(--c20-radius); box-shadow: var(--c20-shadow); object-fit: cover; }
.cta-box { text-align: center; background: var(--c20-bg-soft); border-radius: var(--c20-radius); padding: 2rem 1rem; }
.contact-list li { display: flex; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid #f6f0f0; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list i { font-size: 1.25rem; color: var(--c20-primary); margin-top: .1rem; }
.contact-list strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c20-muted); }
.contact-list a { text-decoration: none; font-weight: 500; }
.form-control { min-height: 48px; border-radius: 10px; }
.form-control:focus { border-color: var(--c20-primary); box-shadow: 0 0 0 .2rem rgba(255, 0, 10, .15); }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.map-wrap { border-radius: var(--c20-radius); overflow: hidden; box-shadow: var(--c20-shadow); aspect-ratio: 16 / 9; max-height: 420px; width: 100%; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Pie de pagina ---------- */
.site-footer { background: #5e0004; color: rgba(255, 255, 255, .78); }
.footer-band { background: var(--c20-primary); color: #fff; font-weight: 600; padding: 1rem 0; font-size: clamp(.95rem, 3.5vw, 1.2rem); }
.footer-band a { color: #fff; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.footer-logo { width: 56px; height: 56px; background: #fff; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.footer-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.footer-text { font-size: .92rem; line-height: 1.7; }
.footer-title { color: #fff; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a, .footer-contact a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-contact li { display: flex; gap: .7rem; margin-bottom: .75rem; font-size: .92rem; }
.footer-contact i { color: #fff; }
.footer-social { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; text-decoration: none; transition: background .15s ease; }
.footer-social:hover { background: #fff; color: #5e0004; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 1.1rem 0; }
.footer-bottom a { color: #fff; font-weight: 600; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* =====================================================================
   Reproductor HLS (basado en el de la pagina de construccion)
   ===================================================================== */
.c20-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 1rem 3rem rgba(61, 0, 3, .35); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.c20-player:fullscreen, .c20-player:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.c20-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.c20-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; background: radial-gradient(circle at 50% 40%, #ff000a 0%, #3d0003 72%); transition: opacity .5s ease, visibility .5s ease; padding: 1rem; text-align: center; }
.c20-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.c20-overlay.is-soft { background: rgba(61, 0, 3, .55); }
.c20-overlay.is-soft .c20-ov-logo { display: none; }
.c20-ov-logo { width: clamp(64px, 20%, 120px); aspect-ratio: 1 / 1; background: #fff; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4); }
.c20-ov-logo img { display: block; width: 74%; height: auto; max-width: none; flex: 0 0 auto; }
.c20-spinner { width: 2.2rem; height: 2.2rem; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--c20-accent); border-radius: 50%; animation: c20-spin .9s linear infinite; }
@keyframes c20-spin { to { transform: rotate(360deg); } }
@keyframes c20-blink { 50% { opacity: .25; } }
.c20-status { color: #fff; font-weight: 600; font-size: clamp(.85rem, 2.6vw, 1.05rem); margin: 0; }
.c20-status small { display: block; font-weight: 400; opacity: .75; font-size: .82em; margin-top: .2rem; }
.c20-retry { display: none; border: 0; background: var(--c20-accent); color: #fff; font-weight: 600; padding: .55rem 1.3rem; border-radius: 2rem; min-height: 44px; }
.c20-overlay.is-error .c20-spinner, .c20-overlay.is-off .c20-spinner { display: none; }
.c20-overlay.is-error .c20-retry { display: inline-block; }
.c20-bigplay { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); border: 0; color: #fff; }
.c20-bigplay.is-visible { display: flex; }
.c20-bigplay span { width: clamp(60px, 14vw, 88px); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--c20-accent); display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 7vw, 3.1rem); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); transition: transform .2s ease; }
.c20-bigplay:hover span { transform: scale(1.08); }
/* Insignia EN VIVO: solo visible cuando la senal se esta reproduciendo de verdad */
.c20-live-badge { position: absolute; top: .7rem; left: .7rem; z-index: 4; display: none; align-items: center; gap: .4rem; background: var(--c20-accent); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .08em; padding: .3rem .65rem; border-radius: 6px; pointer-events: none; transition: opacity .3s ease; }
.c20-live-badge i { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
.c20-player.is-on-air .c20-live-badge { display: inline-flex; }
.c20-unmute { position: absolute; top: .6rem; right: .6rem; z-index: 4; display: none; align-items: center; gap: .4rem; border: 0; background: rgba(255, 255, 255, .94); color: #3d0003; font-weight: 700; font-size: .8rem; padding: .45rem .85rem; border-radius: 2rem; min-height: 40px; }
.c20-unmute.is-visible { display: inline-flex; }
.c20-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .25rem; padding: 1.8rem .6rem .5rem; background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); transition: opacity .3s ease, transform .3s ease; }
.c20-player.is-idle .c20-controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.c20-player.is-idle { cursor: none; }
.c20-btn { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border: 0; background: transparent; color: #fff; font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.c20-btn:hover, .c20-btn:focus-visible { background: rgba(255, 255, 255, .18); }
.c20-golive { flex: 0 0 auto; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: .35rem .7rem; border-radius: 2rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; }
.c20-golive i { width: .5rem; height: .5rem; border-radius: 50%; background: #999; }
.c20-golive.is-live { background: var(--c20-accent); }
.c20-golive.is-live i { background: #fff; }
.c20-spacer { flex: 1 1 auto; }
.c20-vol { display: flex; align-items: center; }
.c20-vol input[type=range] { width: 0; opacity: 0; margin: 0; transition: width .25s ease, opacity .25s ease, margin .25s ease; accent-color: var(--c20-accent); height: 1.2rem; }
.c20-vol:hover input[type=range], .c20-vol:focus-within input[type=range] { width: 80px; opacity: 1; margin: 0 .5rem 0 .1rem; }
@media (hover: none), (max-width: 575.98px) {
  .c20-vol input[type=range] { display: none; }
  .c20-btn { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
  .c20-controls { padding-left: .3rem; padding-right: .3rem; }
  .c20-btn.c20-pip { display: none; }
}
.c20-player.is-radio video { object-fit: contain; background: radial-gradient(circle at 50% 40%, #ff000a 0%, #3d0003 72%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Sin foto: logo del canal sobre fondo rojo oscuro */
.program-card-placeholder { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 55%), linear-gradient(135deg, #b80007, #4a0003); }
.program-card-media .program-card-placeholder img.program-placeholder-logo,
.program-hero-media .program-card-placeholder img.program-placeholder-logo { width: auto; height: 46%; max-width: 60%; object-fit: contain; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 8px 16px rgba(0,0,0,.4)); transition: transform .3s ease; }
.program-card-link:hover .program-placeholder-logo { transform: scale(1.06); }
.schedule-thumb-empty { align-items: center; justify-content: center; background: linear-gradient(135deg, #b80007, #4a0003); }
@media (min-width: 576px) { .schedule-thumb-empty { display: flex; } }
.schedule-thumb-empty img { height: 74%; width: auto; filter: drop-shadow(0 0 1.5px #fff); }

/* Franja "Llevanos en tu celular" (instalar como app) */
.footer-install-text .bi { margin-right: .25rem; }
.footer-install-btn { font-weight: 700; border-radius: 999px; padding: .35rem 1rem; color: var(--c20-primary); }
.footer-install-btn .bi { margin-right: .3rem; }
.footer-install-help { font-size: .9rem; font-weight: 500; opacity: .9; margin-top: .5rem; }

/* Color del canal (rojo del logo) tambien en los enlaces y utilidades de Bootstrap */
:root { --bs-primary-rgb: 255, 0, 10; --bs-link-color: #ff000a; --bs-link-color-rgb: 255, 0, 10; --bs-link-hover-color: #a30007; --bs-link-hover-color-rgb: 163, 0, 7; --bs-focus-ring-color: rgba(255, 0, 10, .25); }

/* Publicidad: 4 espacios cuadrados entre Programacion y Ultimos videos */
.section-ads { padding-top: 0; }
.ad-tile { position: relative; display: flex; aspect-ratio: 1 / 1; border-radius: var(--c20-radius); overflow: hidden; background: #fff; border: 1px solid #f1e4e4; box-shadow: var(--c20-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ad-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.ad-tile:hover, a.ad-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(90, 0, 6, .14); }
.ad-tile-empty { flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 1rem; text-align: center; text-decoration: none; color: var(--c20-primary); background: repeating-linear-gradient(135deg, #fff, #fff 12px, #fff6f6 12px, #fff6f6 24px); border: 2px dashed #f0c4c6; box-shadow: none; }
.ad-tile-empty .bi { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1; }
.ad-empty-title { font-weight: 700; color: var(--c20-ink); font-size: clamp(.85rem, 2.4vw, 1.05rem); }
.ad-empty-cta { font-size: .78rem; font-weight: 600; color: var(--c20-primary); border: 1px solid currentColor; border-radius: 999px; padding: .15rem .75rem; }
a.ad-tile-empty:hover, a.ad-tile-empty:focus-visible { border-color: var(--c20-primary); background: #fff4f4; transform: none; box-shadow: none; }
a.ad-tile-empty:hover .ad-empty-cta { background: var(--c20-primary); color: #fff; border-color: var(--c20-primary); }