/* =====================================================================
   v3 · 30 AÑOS — PALETA CROMO Y LOGO DEL ANIVERSARIO
   Fuente: "Libro del logo · 30 años" (Libro_del_Logo_30_anos_Canal11.v2.pptx).
   Se carga después de estilos.css y v2.css; reasigna los tokens de marca y
   solo sobrescribe lo que cambia con la nueva identidad.
   Regla 60 · 30 · 10: azules oscuros de fondo · platas y aceros en textos ·
   oro destello y azul reflejo como acentos.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Escala del cromo (lámina 5) */
  --cromo-blanco: #F6F7F8;   /* Blanco brillo */
  --cromo-plata: #D4D7E1;    /* Plata cromo */
  --cromo-acero-claro: #AAB3C9;
  --cromo-acero: #808DAF;    /* Acero azul */
  --cromo-sombra: #3A456A;   /* Azul sombra */
  --cromo-profundo: #172146; /* Azul profundo */
  --cromo-noche: #050623;    /* Azul noche */

  /* Acentos (lámina 6): menos del 10 % de cada pantalla */
  --c11-reflejo: #4E70BB;    /* Azul reflejo: enlaces, íconos, botones */
  --c11-oro: #CFA066;        /* Oro destello: fechas, cifras, hashtag */

  /* Degradado cromo (lámina 7): solo en elementos delgados o tipografía grande */
  --c11-cromo: linear-gradient(180deg, #050623 0%, #172146 18%, #3A456A 34%, #AAB3C9 46%, #F6F7F8 50%, #D4D7E1 54%, #808DAF 68%, #3A456A 84%, #050623 100%);
  --c11-cromo-h: linear-gradient(90deg, #050623 0%, #3A456A 20%, #AAB3C9 42%, #F6F7F8 50%, #D4D7E1 56%, #808DAF 72%, #3A456A 88%, #050623 100%);
  --c11-cromo-texto: linear-gradient(180deg, #F6F7F8 0%, #D4D7E1 38%, #808DAF 52%, #D4D7E1 64%, #F6F7F8 100%);

  /* Tokens heredados de la v1/v2, reasignados */
  --c11-azul: #172146;                 /* primario sobre fondo claro */
  --c11-morado: #3A456A;               /* secundario (antes morado) */
  --c11-azul-claro: #7D9BDF;           /* azul reflejo aclarado para TEXTO sobre fondo oscuro (contraste AA) */
  --c11-degradado: linear-gradient(115deg, #4E70BB 0%, #172146 55%, #050623 100%);
  --c11-degradado-suave: linear-gradient(115deg, rgba(78,112,187,.14), rgba(23,33,70,.06));

  --bg: #FFFFFF;
  --bg-alt: #F6F7F8;
  --line: #D9DCE6;
  --text: #050623;
  --text-2: #3A456A;
  --text-3: #5F6A8C;                   /* acero oscurecido: el #808DAF no da contraste en texto chico */

  --ink: #050623;
  --ink-2: #0E1438;
  --ink-3: #172146;
  --on-ink: #F6F7F8;
  --on-ink-2: #AAB3C9;

  --shadow: 0 10px 30px -12px rgba(5, 6, 35, .3);
  --header-h: 68px;
}
@media (min-width: 768px) { :root { --header-h: 76px; } }
@media (min-width: 1024px) { :root { --header-h: 92px; } }

/* ---------- 2. ACENTOS ---------- */
:focus-visible { outline-color: var(--c11-reflejo); }
.ver-todo { color: var(--c11-reflejo); }
.btn--vivo { background: var(--c11-reflejo); box-shadow: 0 6px 20px -6px rgba(78,112,187,.7); }
.btn--vivo:hover { background: #41609F; }
.badge--estreno { background: var(--c11-reflejo); }
.badge--genero { background: var(--cromo-sombra); }
.hero__dot[aria-current="true"] { background: var(--c11-reflejo); }
.redes a:hover { background: var(--c11-reflejo); }

/* Oro destello: horarios y cifras sobre fondo oscuro */
.principal__hora, .destacado__txt small, .hero__horario { color: var(--c11-oro); }
.subnav a[aria-current="true"] { color: var(--c11-oro); border-color: var(--c11-oro); }

/* Barra de título de sección: listón cromado en vez del degradado azul-morado */
.seccion-cab h2::before { background: var(--c11-cromo); box-shadow: 0 0 0 1px rgba(5,6,35,.15); }
.banda-oscura .seccion-cab h2::before, .fila-col--destacada .seccion-cab h2::before, .fila-col--novelas .seccion-cab h2::before { box-shadow: none; }

/* Líneas de marca: filo cromado */
.principales-sec::after, .hero::after, .cab-pagina::after { background: var(--c11-cromo-h); }
.pie::before { background: var(--c11-cromo-h); height: 3px; }

/* ---------- 3. CABECERA OSCURA (el cromo va siempre sobre fondo oscuro) ---------- */
.aviso-proto { background: #F3E8D8; color: #5A3F17; }

.franja-marcas { background: var(--ink-2); color: var(--cromo-plata); border-bottom: 1px solid rgba(212,215,225,.08); }
.franja-marcas__links a { font-size: 13px; }

.cabecera { background: rgba(5, 6, 35, .94); border-bottom: 0; color: var(--on-ink); }
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c11-cromo-h); opacity: .55; }
.cabecera .logo { display: block; line-height: 0; }
.cabecera .logo img, .cabecera--v2 .logo img { height: 50px; width: auto; filter: drop-shadow(0 4px 14px rgba(78,112,187,.35)); }
@media (min-width: 768px) { .cabecera .logo img, .cabecera--v2 .logo img { height: 60px; } }
@media (min-width: 1024px) { .cabecera .logo img, .cabecera--v2 .logo img { height: 76px; } }

.cabecera .nav > a, .cabecera .nav__desplegable > button { color: var(--on-ink); }
.cabecera .nav > a:hover, .cabecera--v2 .nav > a[aria-current="page"]:not(.btn) { background: rgba(212,215,225,.1); color: #fff; }
.cabecera--v2 .nav > a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -2px 0 var(--c11-oro); border-radius: 999px 999px 6px 6px; }
.cabecera .icono-btn { color: var(--on-ink); }
.cabecera .icono-btn:hover { background: rgba(212,215,225,.1); color: #fff; }

.busca-pill { background: rgba(212,215,225,.08); border-color: rgba(212,215,225,.2); }
.busca-pill:focus-within { background: rgba(212,215,225,.14); border-color: var(--c11-reflejo); }
.busca-pill input { color: #fff; }
.busca-pill input::placeholder { color: var(--cromo-acero-claro); }
.busca-pill button { color: var(--cromo-plata); }

.barra-ahora { background: var(--ink-2); }
.menu-movil__cab img { height: 56px; width: auto; }

/* ---------- 4. BANDA 30 AÑOS (portada) ---------- */
.aniversario { position: relative; background: radial-gradient(120% 140% at 85% 50%, #172146 0%, #050623 62%); color: var(--on-ink); overflow: hidden; }
.aniversario::before {             /* reflejo cálido de los biseles */
  content: ""; position: absolute; width: 520px; height: 520px; left: -180px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(207,160,102,.22), transparent 65%); pointer-events: none;
}
.aniversario__grid { position: relative; display: grid; gap: 28px; padding-block: 44px; align-items: center; }
@media (min-width: 900px) { .aniversario__grid { grid-template-columns: 1fr 1.15fr; gap: 56px; padding-block: 64px; } }
.aniversario__fecha { color: var(--c11-oro); display: inline-flex; align-items: center; gap: 10px; }
.aniversario__fecha::before { content: ""; width: 28px; height: 2px; background: var(--c11-oro); }
.aniversario h2 {
  margin-top: 12px; font-size: clamp(34px, 5vw, 60px); font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1;
  background: var(--c11-cromo-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(5,6,35,.6));
}
.aniversario p { margin-top: 16px; color: var(--cromo-plata); font-size: clamp(15px, 1.6vw, 18px); max-width: 46ch; }
.aniversario__hashtag { display: inline-block; margin-top: 14px; color: var(--c11-oro); font-weight: 800; font-size: 16px; letter-spacing: .01em; }
.aniversario__acciones { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Escenario: fondo del cliente (pasillo brillante) + logo de pie sobre el piso, con reflejo */
.aniversario__media {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9;
  background: #0B2A7A url(../img/fondo-escenario.webp) center / cover no-repeat;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.9);
}
.aniversario__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(212,215,225,.18); pointer-events: none; }
.aniversario__logo {
  position: absolute; left: 50%; bottom: 25%; width: 44%; height: auto; transform: translateX(-50%);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
  -webkit-box-reflect: below 2px linear-gradient(transparent 60%, rgba(255,255,255,.28));
}

/* ---------- 4b. FONDOS DEL ANIVERSARIO (enviados por el cliente) ----------
   fondo-pasillo   (oscuro, simétrico)      → bandas con reproductor: portada y En Vivo
   fondo-columnas  (vacío a la izquierda)   → cabeceras de página con título a la izquierda
   fondo-escenario (brillante, simétrico)   → escenario del logo en la banda 30 años */
.principales-sec, .fondo-pasillo {
  background:
    linear-gradient(180deg, rgba(5,6,35,.4) 0%, rgba(5,6,35,.7) 55%, var(--ink) 100%),
    var(--ink) url(../img/fondo-pasillo.webp) center 35% / cover no-repeat;
}
.cab-pagina, .novelas-hero {
  background:
    linear-gradient(90deg, rgba(5,6,35,.92) 0%, rgba(5,6,35,.6) 45%, rgba(5,6,35,.05) 80%),
    var(--ink) url(../img/fondo-columnas.webp) right center / cover no-repeat;
}
@media (max-width: 767px) {         /* en móvil el texto ocupa todo el ancho: oscurecer parejo */
  .cab-pagina, .novelas-hero {
    background:
      linear-gradient(90deg, rgba(5,6,35,.85), rgba(5,6,35,.55)),
      var(--ink) url(../img/fondo-columnas.webp) 85% center / cover no-repeat;
  }
}

/* ---------- 5. PIE: firma horizontal (lámina 12) ---------- */
.pie__marca img { height: auto; }
.firma-h { display: flex; align-items: center; gap: 16px; }
.firma-h img { height: 72px; width: auto; flex: none; }
.firma-h span { display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid var(--cromo-acero); }
.firma-h strong { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; }
.firma-h em { color: var(--c11-oro); font-style: normal; font-weight: 700; font-size: 13px; }
@media (min-width: 900px) {         /* columna angosta del pie: firma vertical */
  .pie .firma-h { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pie .firma-h img { height: 84px; }
  .pie .firma-h span { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--cromo-acero); }
}
.pie__legal a:hover, .pie ul a:hover { color: #fff; }

/* ---------- 6. Ajustes menores ---------- */
.tabbar__vivo span.ico { box-shadow: 0 6px 18px -4px rgba(23,33,70,.6); }
.cap[aria-current] { background: var(--c11-degradado); }