/* OXIRA Front — estilos exclusivos del sitio público BESTV. */

/* Identidad BestTV Play (solo en el sitio público, que encabeza con ese logo).
   El logo oficial no lleva la lima de Best Cable: su paleta es azul #0070F0 y el
   degradado azul→verde. Los paneles siguen con la marca corporativa (oxira-base.css).
   El verde va con texto navy, como la lima, para no perder contraste. */
/* Este archivo ya NO redefine la marca: los colores salen de oxira-base.css y
   son los mismos en el front y en los paneles. Antes había acá un segundo
   :root con otros valores (--btv-turquesa: #39c6c4 en vez del #33BECA del
   logo) que ganaba por orden de carga, y además volvía a secuestrar
   --bs-success hacia el turquesa. Solo queda lo que de verdad es del front. */
:root {
  /* Verde claro, solo para acentos sobre el fondo oscuro del front. */
  --btv-verde-osc: #45E893;
}

body.oxira-front {
  background: #fff;
}

/* ---------- Cabecera integrada a la experiencia OTT ---------- */
.oxira-front-header {
  background: rgba(17, 17, 17, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  z-index: 1030;
}

.oxira-front-header .navbar-brand img {
  width: auto;
  height: 50px;
  object-fit: contain;
}

.oxira-front-header .nav-link {
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
  padding: .55rem .9rem;
}

.oxira-front-header .nav-link:hover,
.oxira-front-header .nav-link.active {
  color: #fff;
}

.oxira-front-header .nav-link.active {
  border-bottom: 3px solid var(--btv-turquesa);
}

/* ---------- Hero cinematográfico ---------- */
.oxira-front-hero {
  background: var(--bc-navy);
}

.oxira-hero-alto {
  min-height: clamp(520px, 67vh, 680px);
}

.oxira-hero-velo {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .90) 34%, rgba(0, 0, 0, .30) 67%, rgba(0, 0, 0, .08) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 42%);
}

.oxira-front-hero>.container {
  position: relative;
  z-index: 1;
}

.oxira-punto-vivo {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--bc-lima);
  animation: oxira-pulso 1.6s infinite;
}

.oxira-punto-rojo {
  background: #DC3545;
}

@keyframes bc-pulso {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

.oxira-punto-vivo {
  animation-name: bc-pulso;
}

.oxira-canal-icono {
  width: 46px;
  height: 46px;
  background: var(--oxira-canal);
}

/* ---------- Catálogo estilo plataforma OTT ---------- */
.oxira-catalogo {
  background: var(--btv-carbon);
}

.oxira-fila-ott {
  scrollbar-width: thin;
  scrollbar-color: var(--bc-azul) rgba(255, 255, 255, .08);
}

.oxira-fila-ott>[class*='col-'] {
  min-width: 0;
}

.oxira-fila-ott .card {
  transition: transform .18s ease, border-color .18s ease;
}

.oxira-fila-ott .card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--bs-success-rgb), .55) !important;
}

.oxira-progreso {
  height: 4px;
  background: rgba(255, 255, 255, .16);
}

@media (max-width: 767.98px) {
  .oxira-front-hero>img {
    object-position: 67% center;
  }

  .oxira-hero-alto {
    min-height: 620px;
    align-items: end !important;
  }

  .oxira-hero-velo {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .99) 0%, rgba(0, 0, 0, .90) 46%, rgba(0, 0, 0, .32) 78%, rgba(0, 0, 0, .18) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .oxira-fila-ott .card,
  .oxira-punto-vivo {
    transition: none;
    animation: none;
  }
}

/* ---------- Secciones ---------- */

/* Catálogo de canales: Bootstrap resuelve grilla/tarjetas/pills; OXIRA aporta movimiento e identidad. */
.oxira-canal-card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.oxira-canal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(13, 34, 51, .14) !important;
}

.oxira-canal-icono {
  width: 3rem;
  height: 3rem;
}

.oxira-canal-velo {
  background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .15) 72%);
}

.oxira-canal-identidad {
  z-index: 1;
}

/* Fondo para el logo real del canal: los logos vienen en PNG con transparencia y
   necesitan un lienzo parejo. Va CLARO porque la mayoría son de colores con letras
   oscuras y sobre fondo negro se perdían. El velo inferior mantiene legible el
   nombre del canal, que va en blanco encima. */
.oxira-canal-fondo {
  /* Los dos únicos degradados que quedan además del de la marca, y no son
     decoración: es el fondo detrás de los logos de canal. Los logos vienen con
     fondo transparente y en colores distintos entre sí, así que necesitan una
     base que los deje legibles a todos. Este blanco lo pidió Joel expresamente
     el 2026-09-07 porque el fondo oscuro tapaba las letras negras. */
  background: radial-gradient(120% 120% at 50% 20%, #ffffff 0%, #a1b0bb 70%);
}

/* Los pocos logos blancos se perderían sobre el fondo claro: van sobre lienzo oscuro.
   Lo decide `canales.logo_claro`, que el importador calcula midiendo el PNG. */
.oxira-canal-fondo.claro {
  background: radial-gradient(120% 120% at 50% 20%, #22354a 0%, #0d1c29 70%);
}

/* Franja inferior para que el nombre del canal (blanco) se lea sobre el fondo claro */
.oxira-canal-pie {
  height: 46%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, 0) 100%);
}

.oxira-canal-play {
  width: 3.5rem;
  height: 3.5rem;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -42%) scale(.82);
  transition: opacity .18s ease, transform .18s ease;
}

.oxira-canal-card:hover .oxira-canal-play,
.oxira-canal-card:focus-within .oxira-canal-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.oxira-canal-card .stretched-link:focus-visible {
  outline: 3px solid var(--bc-lima);
  outline-offset: -3px;
}

.oxira-reproductor-play {
  width: 5rem;
  height: 5rem;
}

.oxira-front .nav-pills {
  scrollbar-width: none;
}

.oxira-front .nav-pills::-webkit-scrollbar {
  display: none;
}

.oxira-front .nav-pills .nav-link {
  color: var(--bc-azul);
  font-weight: 700;
  border: 1px solid rgba(var(--bs-primary-rgb), .22);
}

.oxira-front .nav-pills .nav-link.active {
  background: var(--bc-azul);
  color: #fff;
}

/* Planes */
.bc-plan {
  background: #fff;
  border: 1px solid #E3E9ED;
  border-radius: 1rem;
  padding: 2rem 1.8rem;
  height: 100%;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}

.bc-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(13, 34, 51, .14);
}

.bc-plan.destacado {
  border: 2px solid var(--btv-turquesa);
  box-shadow: 0 12px 32px rgba(32, 197, 210, .25);
}

.bc-plan .cinta {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--btv-turquesa);
  color: var(--btv-carbon);
  font-weight: 800;
  font-size: .8rem;
  padding: .35rem 1.2rem;
  border-radius: 2rem;
  white-space: nowrap;
}

.bc-plan .precio {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--bc-navy);
}

.bc-plan .precio small {
  font-size: 1rem;
  font-weight: 700;
  color: #6B7B87;
}

.bc-plan .tachado {
  text-decoration: line-through;
  color: #9AA8B2;
  font-weight: 700;
}

.bc-plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-plan ul li {
  padding: .45rem 0;
  border-bottom: 1px dashed #E3E9ED;
}

.bc-plan ul li i {
  color: var(--bc-azul);
  margin-right: .5rem;
}

/* Banda beneficio abonados */

/* Banda de features */
.oxira-front-features {
  background: var(--bc-celeste);
}

/* Formularios */

/* Página interior: cabecera con atmósfera cinematográfica */
.bc-page-head {
  background: var(--btv-azul-fondo);
  border-bottom: 1px solid rgba(0, 112, 240, .2);
  color: #fff;
}

.bc-page-head h1 {
  font-weight: 900;
}

/* ---------- Footer ---------- */
.bc-footer {
  background: var(--btv-carbon);
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #94A3B8;
}

.bc-footer a {
  color: #CBD5E1;
  text-decoration: none;
}

.bc-footer a:hover {
  color: var(--btv-turquesa);
}

.bc-footer .titulo {
  color: #fff;
  font-weight: 800;
}

.bc-footer .legal {
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #64748B;
  font-size: .85rem;
}