/* ============================================================
   Nortvisión PWA — estilos del motor.
   Los colores y las tipografías NO se definen aquí: vienen de
   marca/marca.css, que se carga antes que este archivo.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

/* El atributo hidden debe ganar siempre. Sin esto, una clase con
   display:grid o flex (botones, avisos) lo anula y el elemento
   "oculto" sigue en pantalla. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--body);
  font-weight:400;
  color:var(--txt);
  background:var(--fondo);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* El telón se queda fijo detrás de todo: el degradado azul y,
   abajo, la silueta apagada de la ciudad. */
.telon{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--fondo-3) 0%, transparent 60%),
    radial-gradient(100% 60% at 50% 110%, var(--fondo-2) 0%, transparent 70%),
    linear-gradient(180deg, #16266B 0%, var(--fondo) 55%, #081029 100%);
}
.telon::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52vh;
  background:url('../img/telon.webp') center bottom / cover no-repeat;
  opacity:.30; mix-blend-mode:screen;
  /* Se apaga hacia arriba para que no corte con una línea recta */
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 45%);
  mask-image:linear-gradient(180deg, transparent, #000 45%);
}

img{max-width:100%; display:block}

a{color:inherit; text-decoration:none}

h1,h2,h3{margin:0; font-weight:700; line-height:1.15}
p{margin:0}

button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

:focus-visible{outline:2px solid var(--acc-hi); outline-offset:3px; border-radius:6px}

/* ===================== BARRA SUPERIOR ===================== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  height:calc(var(--barra) + var(--st));
  padding:var(--st) 12px 0;
  background:linear-gradient(180deg, rgba(11,20,54,.92), rgba(11,20,54,.62) 70%, transparent);
  backdrop-filter:blur(10px);
}

.ico-btn{
  display:grid; place-items:center;
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px; color:var(--txt);
  transition:background .15s;
}
.ico-btn:hover{background:var(--panel)}

.tb-marca{
  display:flex; align-items:center; gap:10px;
  margin-inline:auto;                 /* centrado, como en la maqueta */
  min-width:0;
}
.tb-simbolo{height:34px; width:auto}

.tb-txt{display:grid; line-height:1; min-width:0}
.tb-txt b{
  font-size:clamp(17px,4.6vw,25px); font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}
.tb-txt i{
  font-style:normal; font-size:clamp(8px,2.1vw,11px); font-weight:400;
  letter-spacing:.42em; margin-top:2px;
}
.tb-txt em{
  font-style:normal; font-size:clamp(7px,1.7vw,9px); font-weight:300;
  letter-spacing:.16em; color:var(--txt-2); margin-top:3px;
  padding-top:3px; border-top:1px solid var(--borde-2);
  white-space:nowrap;
}

.tb-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto}

.pill{
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--borde-2); font-size:14px; font-weight:700;
  white-space:nowrap;
}
.pill.solid{background:var(--acc); border-color:transparent}
.pill.solid:hover{background:var(--acc-hi)}

/* ===================== ESTRUCTURA ===================== */
.app{
  max-width:var(--maxw); margin:0 auto;
  padding:8px 14px 30px;
}

.view{display:grid; gap:22px}

/* En celular las columnas se disuelven y manda el orden del CSS */
.col{display:contents}

/* Orden en celular: reproductor, "ahora", patrocinadores, accesos */
.home .hueco-player{order:1}
.home .ahora-mini{order:2}
.home .blk-patro{order:3}
.home .accesos{order:4}

/* En computador la portada es una sola columna: el reproductor
   grande arriba, debajo los accesos y, al final, la cinta de
   patrocinadores. */
@media (min-width:900px){
  .home{grid-template-columns:minmax(0,1fr); gap:26px}
  .col{display:contents}
  .home .hueco-player{order:1}
  .home .ahora-mini{order:2}
  .home .accesos{order:3}
  .home .blk-patro{order:4}
  /* El reproductor ocupa el ancho, sin pasarse de alto: en una
     pantalla apaisada, 16/9 a todo lo ancho no cabría. Se le deja
     sitio a la primera fila de accesos, para que se asomen sin
     tener que bajar. */
  .home .hueco-player{
    width:100%; max-width:min(100%, calc((100dvh - var(--barra) - 215px) * 16 / 9));
    margin-inline:auto;
  }
  /* Los cinco accesos en una sola fila */
  .home .accesos{grid-template-columns:repeat(5,minmax(0,1fr))}

  /* En la parrilla el reproductor acompaña, no manda: se queda a un
     tamaño que deja ver las fichas de los días sin bajar. */
  .parrilla .hueco-player{
    width:100%; max-width:min(100%, calc((100dvh - var(--barra) - 420px) * 16 / 9));
    margin-inline:auto;
  }
}

/* ===================== REPRODUCTOR ===================== */
.hueco-player{min-width:0}

.player{min-width:0}

.pl-marco{
  position:relative; isolation:isolate;
  aspect-ratio:16/9;
  background:var(--negro);
  border-radius:var(--r-l);
  overflow:hidden;
  border:1px solid rgba(143,176,255,.30);
  /* La pantalla encendida tiñe de azul lo que la rodea */
  box-shadow:var(--sombra-alta), 0 0 60px rgba(47,91,216,.30);
}
/* Mientras está al aire, el halo respira muy despacio */
.player[data-estado="aire"] .pl-marco{
  box-shadow:var(--sombra-alta), 0 0 70px rgba(47,91,216,.40);
}
.pl-marco video{
  width:100%; height:100%; object-fit:contain;
  background:var(--negro);
}
/* En pantalla completa el marco pierde la proporción fija */
.pl-marco:fullscreen{aspect-ratio:auto; width:100vw; height:100vh; border-radius:0; border:0}

/* --- Insignia EN VIVO --- */
.pl-vivo{
  position:absolute; top:12px; left:12px; z-index:3;
  display:flex; align-items:center; gap:7px;
  padding:6px 13px 6px 11px; border-radius:999px;
  background:var(--vivo); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.06em;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.pl-vivo i{
  width:9px; height:9px; border-radius:50%; background:#fff;
  animation:latido 1.8s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

/* Fuera del aire la insignia deja de ser roja: no se puede
   anunciar "en vivo" cuando no hay señal. */
.player[data-estado="cortado"] .pl-vivo,
.player[data-estado="sin-red"] .pl-vivo{background:rgba(255,255,255,.20)}
.player[data-estado="cortado"] .pl-vivo i,
.player[data-estado="sin-red"] .pl-vivo i{animation:none; background:var(--txt-3)}
.player[data-estado="reconectando"] .pl-vivo{background:#8A6A12}

/* --- Aviso de sonido ----
   El navegador no deja arrancar con sonido si el usuario todavía no
   ha tocado nada: la señal se ve en silencio y este botón lo activa. */
.pl-sonido{
  position:absolute; top:12px; right:12px; z-index:4;
  display:none; align-items:center; gap:8px;
  padding:9px 15px 9px 12px; border-radius:999px;
  background:var(--vivo); color:#fff;
  font-size:13.5px; font-weight:700;
  box-shadow:0 6px 20px rgba(224,27,36,.45);
  animation:respira 2.6s ease-in-out infinite;
}
.player.mudo-auto .pl-sonido{display:flex}
@keyframes respira{50%{transform:scale(1.04)}}
@media (max-width:520px){ .pl-sonido span{display:none} .pl-sonido{padding:10px} }

/* --- Capa de estado --- */
.pl-capa{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; justify-items:center; gap:14px;
  padding:20px; text-align:center;
  background:rgba(6,12,33,.72); backdrop-filter:blur(3px);
  transition:opacity .25s;
}
.player[data-estado="aire"] .pl-capa,
.player[data-estado="pausado"] .pl-capa{opacity:0; pointer-events:none}

.pl-giro{
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff;
  animation:girar .9s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.player[data-estado="cortado"] .pl-giro,
.player[data-estado="sin-red"] .pl-giro{display:none}

.pl-msg{font-size:15px; color:var(--txt-2); max-width:32ch}

.pl-rein{
  display:none;
  padding:10px 20px; border-radius:999px;
  background:var(--acc); font-weight:700;
}
.player[data-estado="cortado"] .pl-rein,
.player[data-estado="sin-red"] .pl-rein{display:block}

/* --- Botón grande de play --- */
.pl-grande{
  position:absolute; inset:0; z-index:3; margin:auto;
  width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(224,27,36,.92); color:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform .18s, opacity .18s;
}
.pl-grande:hover{transform:scale(1.06)}
.pl-grande svg{margin-left:5px}
/* Solo aparece cuando está pausado */
.player:not([data-estado="pausado"]) .pl-grande{opacity:0; pointer-events:none; transform:scale(.8)}

/* --- Barra de controles --- */
.pl-barra{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:6px;
  padding:22px 12px 11px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.80));
  transition:opacity .25s, transform .25s;
}
/* Mientras suena, la barra se esconde. Vuelve al pasar el ratón por
   encima o al tocar la imagen, que es cuando player.js pone la clase
   `controles`; otro toque la esconde de nuevo.

   La regla es de ocultar, nunca de mostrar: con `controles` puesta
   sencillamente no se aplica. Al revés —una regla que mostrara— haría
   falta más peso que la de ocultar, y ganaría la de ocultar. */
.player.sonando:not(.controles) .pl-marco:not(:hover):not(:focus-within) .pl-barra{
  opacity:0; transform:translateY(8px);
}
/* En pantalla táctil no existe "pasar el ratón": manda el toque */
@media (hover:none){
  .player.sonando:not(.controles) .pl-barra{opacity:0; transform:translateY(8px)}
}

.pl-b{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:10px; color:#fff; flex:0 0 auto;
}
.pl-b:hover{background:rgba(255,255,255,.16)}

.pl-vol{
  width:78px; flex:0 0 auto; accent-color:var(--vivo);
  height:4px; cursor:pointer;
}
@media (max-width:520px){ .pl-vol{display:none} }

.pl-titulo{
  flex:1 1 auto; min-width:0;
  padding-left:6px; font-size:14px; color:var(--txt-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* La barra de la portada oculta el botón de expandir duplicado */
/* El de la barra es ahora el único botón de pantalla completa: se ve
   en todos los tamaños. */
.pl-barra .pl-b[data-a="pantalla"]{display:grid}

/* ===================== AHORA / SIGUE =====================
   Franja bajo el reproductor: qué se está viendo, cuánto lleva y
   qué sigue. */
.ahora-mini{display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0}
@media (max-width:520px){ .ahora-mini{grid-template-columns:1fr} }

.am-it{
  display:grid; gap:4px; align-content:start; min-width:0;
  padding:12px 15px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--borde);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.am-it:hover{transform:translateY(-2px); border-color:var(--borde-2)}
.am-it b{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am-etq{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3);
}
.am-etq i{width:8px; height:8px; border-radius:50%; background:var(--vivo-hi); animation:latido 1.6s infinite}
.am-resto{font-size:12px; font-weight:300; color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* La tarjeta de lo que está al aire lleva el rojo de la señal */
.am-ahora{
  border-color:rgba(255,80,88,.5);
  background:linear-gradient(120deg, rgba(224,27,36,.22), rgba(47,91,216,.14));
  box-shadow:0 0 22px rgba(224,27,36,.18);
}
.am-ahora .am-etq{color:#FF9BA0}

.am-barra{height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.14); margin-top:3px}
.am-barra span{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--vivo-hi), #FFC46B);
  box-shadow:0 0 10px rgba(255,42,52,.6);
  transition:width .6s ease;
}

/* ===================== BLOQUES ===================== */
.blk{display:grid; gap:12px; min-width:0}

.blk-hd{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.blk-hd h2{
  font-size:clamp(21px,5vw,28px);
  text-shadow:0 0 26px rgba(47,91,216,.35);
}

.blk-mas{
  font-size:14px; color:var(--txt-2); font-weight:700;
  display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.blk-mas:hover{color:var(--txt)}

/* ===================== CINTA DE PATROCINADORES ===================== */
/* Avanza sola (lo mueve app.js) y además se arrastra con el dedo o
   con el ratón. Los bordes se desvanecen para que las tarjetas no
   aparezcan y desaparezcan de golpe. */
.cinta{
  /* Sin el 100% el contenido ancho estiraría la columna en vez de
     desplazarse dentro de ella. */
  width:100%;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  /* El desplazamiento lo lleva el reloj de la animación: sin esto,
     el arrastre con el dedo pelea con el avance automático. */
  scroll-behavior:auto;
}
.cinta::-webkit-scrollbar{display:none}
.cinta.arrastrando{cursor:grabbing}

.cinta-pista{display:flex; width:max-content; gap:12px}
.cinta-copia{display:flex; gap:12px; margin-left:12px}

.patro{
  flex:0 0 auto; width:168px;
  display:grid; gap:7px; justify-items:center; align-content:start;
  padding:14px 14px 13px;
  background:var(--panel-solido); color:var(--txt-inv);
  border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(143,176,255,.35), 0 10px 26px rgba(4,10,30,.45);
  transition:transform .16s, box-shadow .16s;
  /* Ni se selecciona el texto ni el navegador arrastra la tarjeta:
     el gesto es para mover la cinta. */
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
  cursor:grab;
}
.patro *{-webkit-user-drag:none}
.cinta.arrastrando .patro{cursor:grabbing}
a.patro:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(143,176,255,.6), 0 16px 34px rgba(4,10,30,.55), 0 0 26px rgba(74,118,240,.35);
}
.patro b{font-size:14px; text-align:center; line-height:1.25}

/* Qué ofrece el patrocinador, bajo su nombre */
.pa-producto{
  font-size:11.5px; line-height:1.25; text-align:center;
  color:#5B6780; margin-top:-3px;
}

/* El logotipo, lo más grande que quepa: son marcas a color con
   fondo transparente, así que van directas sobre la tarjeta blanca. */
.pa-marco{
  display:grid; place-items:center;
  width:100%; height:78px; overflow:hidden;
}
.pa-marco img{width:100%; height:100%; object-fit:contain}
/* Sin logotipo: la inicial sobre una placa azul */
.pa-inicial{
  display:grid; place-items:center; width:64px; height:64px;
  border-radius:50%; background:linear-gradient(140deg,#2F6BE0,#16266B);
  color:#fff; font-size:26px; font-weight:700;
}

@media (min-width:900px){
  .patro{width:186px}
  .pa-marco{height:88px}
}

/* ===================== ACCESOS RÁPIDOS ===================== */
.accesos{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}

.acceso{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; gap:4px; align-content:start;
  padding:20px 18px;
  border-radius:var(--r-l);
  box-shadow:var(--sombra), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition:transform .18s, box-shadow .18s;
  min-height:136px;
}
/* Un halo de luz en la esquina: le quita la planitud al color */
.acceso::before{
  content:""; position:absolute; z-index:-1;
  top:-40%; left:-20%; width:75%; height:130%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 65%);
  opacity:.55; transition:opacity .25s, transform .25s;
}
.acceso:hover{transform:translateY(-4px)}
.acceso:hover::before{opacity:.8; transform:translateX(8%)}
.acceso .ac-ico{filter:drop-shadow(0 3px 10px rgba(0,0,0,.35))}

/* Cada acceso deja su propio resplandor de color */
.a-vivo:hover{box-shadow:0 14px 34px rgba(226,55,68,.45), 0 0 0 1px rgba(255,255,255,.18) inset}
.a-web:hover{box-shadow:0 14px 34px rgba(47,107,224,.45), 0 0 0 1px rgba(255,255,255,.18) inset}
.a-parrilla:hover{box-shadow:0 14px 34px rgba(31,163,91,.45), 0 0 0 1px rgba(255,255,255,.18) inset}
.a-privacidad:hover{box-shadow:0 14px 34px rgba(123,68,216,.45), 0 0 0 1px rgba(255,255,255,.18) inset}
.a-pauta:hover{box-shadow:0 14px 34px rgba(240,154,30,.45), 0 0 0 1px rgba(255,255,255,.18) inset}
.acceso b{font-size:19px; line-height:1.15}
.ac-sub{font-size:13.5px; color:rgba(255,255,255,.82); line-height:1.3}
.ac-ico{margin-bottom:6px; opacity:.95}

.a-vivo{background:var(--a-vivo)}
.a-web{background:var(--a-web)}
.a-parrilla{background:var(--a-parrilla)}
.a-privacidad{background:var(--a-privacidad)}
.a-pauta{background:var(--a-pauta)}

/* En celular caben dos por fila; el quinto acceso se queda solo,
   así que ocupa el ancho completo en vez de dejar un hueco. */
@media (max-width:519px){
  .accesos{grid-template-columns:1fr 1fr}
  .acceso:last-child:nth-child(odd){grid-column:1 / -1; min-height:0}
}

/* En tableta, como en la maqueta: tres arriba y dos abajo. */
@media (min-width:520px) and (max-width:899px){
  .accesos{grid-template-columns:repeat(6,1fr)}
  .acceso{grid-column:span 2}
  .acceso:nth-child(4),.acceso:nth-child(5){grid-column:span 3}
}

/* ===================== CABECERAS DE SECCIÓN ===================== */
.shead{display:grid; gap:10px; max-width:70ch}
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-3);
}
.shead h2{font-size:clamp(25px,6.4vw,38px)}
.shead h2 em{
  font-style:normal; color:#8FB0FF;
  text-shadow:0 0 22px rgba(74,118,240,.45);
}
.lead{font-weight:300; font-size:16.5px; line-height:1.55; color:var(--txt-2)}

/* ===================== PROSA Y TARJETAS ===================== */
.prosa{display:grid; gap:12px; max-width:72ch}
.prosa h3{font-size:17px; margin-top:10px}
.prosa p{font-weight:300; line-height:1.65; color:var(--txt-2)}

.tarjetas{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tarjeta{
  padding:18px; border-radius:var(--r);
  background:linear-gradient(150deg, rgba(47,91,216,.18), rgba(255,255,255,.05));
  border:1px solid var(--borde);
  box-shadow:0 8px 24px rgba(4,10,30,.25);
  display:grid; gap:6px;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.tarjeta:hover{
  transform:translateY(-2px);
  border-color:rgba(143,176,255,.45);
  box-shadow:0 12px 30px rgba(4,10,30,.35), 0 0 24px rgba(47,91,216,.22);
}
.tarjeta b{font-size:17px}
.tarjeta p{font-weight:300; line-height:1.5; color:var(--txt-2); font-size:15px}

.pitch{
  display:grid; gap:16px; justify-items:start;
  padding:22px; border-radius:var(--r-l);
  background:linear-gradient(140deg, rgba(47,91,216,.30), rgba(255,255,255,.05));
  border:1px solid var(--borde);
}
.pitch p{font-size:18px; font-weight:300; line-height:1.45}
.pitch-btns{display:flex; flex-wrap:wrap; gap:10px}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:999px;
  border:1px solid var(--borde-2); font-weight:700; font-size:15px;
}
.btn:hover{background:var(--panel)}
.btn.solid{background:var(--acc); border-color:transparent}
.btn.solid:hover{background:var(--acc-hi)}
.btn.wa{background:var(--wa); border-color:transparent; color:#062611}

/* ===================== PAUTA Y COTIZADOR ===================== */
/* --- Portada de la sección --- */
/* En celular la imagen va arriba y el texto debajo: superpuestos, ni
   se lee bien el texto ni se aprecia la fotografía. En pantallas
   anchas sí se superponen, que luce mejor. */
.pt-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-l);
  border:1px solid rgba(143,176,255,.30);
  box-shadow:var(--sombra-alta), 0 0 60px rgba(47,91,216,.28);
  display:grid;
  background:linear-gradient(165deg,#16266B,#0B1436 70%);
}
.pt-hero img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 35%}
.pt-hero-txt{display:grid; gap:10px; padding:20px 20px 22px; max-width:64ch}
.pt-hero-txt h2{font-size:clamp(25px,6.2vw,40px); line-height:1.1}
.pt-hero-txt h2 em{font-style:normal; color:#8FB0FF; text-shadow:0 0 26px rgba(74,118,240,.55)}
.pt-hero-txt p{font-size:clamp(15px,3.6vw,18px); font-weight:300; line-height:1.5; color:var(--txt-2)}
.pt-hero-btn{justify-self:start; margin-top:6px}

@media (min-width:760px){
  .pt-hero{min-height:440px; align-items:end}
  .pt-hero img{position:absolute; inset:0; z-index:-2; height:100%; aspect-ratio:auto}
  /* Velo por abajo: sin él el texto se pierde dentro de la foto */
  .pt-hero::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(11,20,54,.05) 25%, rgba(11,20,54,.80) 70%, rgba(11,20,54,.96));
  }
  .pt-hero-txt{padding:34px 34px 30px}
}

/* --- Cotizador --- */
.cot{display:grid; gap:16px; align-items:start}
@media (min-width:900px){
  .cot{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
}

.cot-pasos{display:grid; gap:14px; min-width:0}

.cot-paso{
  border:1px solid var(--borde); border-radius:var(--r);
  background:linear-gradient(150deg, rgba(47,91,216,.14), rgba(255,255,255,.03));
  padding:16px 16px 14px; margin:0; min-width:0;
}
.cot-paso legend{
  display:flex; align-items:center; gap:10px;
  padding:0 6px; font-size:16px; font-weight:700;
}
.cot-paso legend span{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--acc); color:#fff; font-size:14px;
  box-shadow:0 0 16px rgba(47,91,216,.55);
}
.cot-paso legend i{font-style:normal; font-size:12px; font-weight:400; color:var(--txt-3)}

.cot-ops{display:grid; gap:8px; margin-top:12px}
@media (min-width:620px){
  .cot-ops{grid-template-columns:1fr 1fr}
  .cot-ops-alto{grid-template-columns:1fr}
}

/* Cada opción es una tarjeta que se puede tocar entera */
.cot-op{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; border-radius:var(--r-s);
  background:var(--panel); border:1.5px solid var(--borde);
  cursor:pointer; min-width:0;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.cot-op:hover{border-color:var(--borde-2)}
.cot-op input{position:absolute; opacity:0; width:1px; height:1px}
.cot-marca{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--borde-2); position:relative;
  transition:border-color .16s, background .16s;
}
.cot-op input[type="checkbox"] ~ .cot-marca{border-radius:6px}
.cot-marca::after{
  content:""; position:absolute; inset:3px; border-radius:inherit;
  background:#fff; transform:scale(0); transition:transform .16s;
}
.cot-txt{display:grid; gap:2px; min-width:0; flex:1 1 auto}
.cot-txt b{font-size:14.5px; line-height:1.25}
.cot-txt i{font-style:normal; font-size:12.5px; font-weight:300; color:var(--txt-2)}
.cot-precio{flex:0 0 auto; font-size:14px; font-weight:700; color:#8FB0FF}

.cot-op.on{
  border-color:var(--acc-hi);
  background:linear-gradient(120deg, rgba(74,118,240,.26), rgba(47,91,216,.12));
  box-shadow:0 0 22px rgba(47,91,216,.30);
}
.cot-op.on .cot-marca{border-color:#fff; background:var(--acc-hi)}
.cot-op.on .cot-marca::after{transform:scale(1)}
.cot-op input:focus-visible ~ .cot-marca{outline:3px solid var(--acc-hi); outline-offset:3px}

/* --- Resumen --- */
.cot-total{position:sticky; top:calc(var(--barra) + var(--st) + 10px); min-width:0}

.cot-vacio,.cot-tarjeta{
  display:grid; gap:10px;
  padding:20px; border-radius:var(--r-l);
  border:1px solid var(--borde-2);
  background:linear-gradient(165deg,#1B3080,#0B1436 75%);
  box-shadow:var(--sombra-alta), 0 0 34px rgba(47,91,216,.26);
}
.cot-vacio{justify-items:center; text-align:center; color:var(--txt-2)}
.cot-ico{
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:var(--a-pauta); color:#fff; box-shadow:0 0 26px rgba(240,154,30,.5);
}
.cot-vacio h3{font-size:19px; color:var(--txt)}
.cot-vacio p{font-weight:300; font-size:14.5px}

.cot-para{font-size:15px; font-weight:700; color:#8FB0FF}
.cot-lineas{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.cot-lineas li{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px}
.cot-lineas li span{color:var(--txt-2); font-weight:300; min-width:0}
.cot-lineas li b{flex:0 0 auto; font-weight:700}
.cot-lineas .cot-extra span{color:var(--txt-3)}
.cot-lineas .cot-sub{
  padding-top:7px; border-top:1px solid var(--borde);
  font-size:13.5px; color:var(--txt-3);
}

.cot-gran{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-top:10px; margin-top:2px; border-top:2px solid var(--borde-2);
}
.cot-gran span{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3)}
.cot-gran b{
  font-size:clamp(26px,6.5vw,34px); line-height:1;
  color:#fff; text-shadow:0 0 24px rgba(74,118,240,.7);
}

.cot-btns{display:grid; gap:9px; margin-top:6px}
.cot-btns .btn{justify-content:center}
.cot-nota{font-size:12px; font-weight:300; line-height:1.45; color:var(--txt-3)}

/* ===================== PARRILLA ===================== */
/* Cada programa lleva su color de categoría en --cat, que se
   define en línea a partir de marca.js. */

/* --- Fichas de los días --- */
.pg-fichas{
  position:sticky; top:calc(var(--barra) + var(--st)); z-index:5;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;
  padding:6px; margin-bottom:18px;
  border-radius:var(--r);
  background:rgba(11,20,54,.85); backdrop-filter:blur(12px);
  border:1px solid var(--borde);
  box-shadow:var(--sombra);
}
.pg-ficha{
  position:relative;
  display:grid; place-items:center;
  padding:11px 2px 12px; border-radius:12px;
  color:var(--txt-2); font-weight:700;
  transition:background .18s, color .18s, transform .18s;
}
.pg-ficha:hover{background:var(--panel); color:var(--txt)}
.pg-ficha.on{
  color:#fff;
  background:linear-gradient(150deg,var(--acc-hi),#1B3FA8);
  box-shadow:0 6px 18px rgba(47,91,216,.45);
  transform:translateY(-1px);
}
.pg-corto,.pg-largo{font-size:15px}
.pg-largo{display:none}
/* Marca de "hoy": un punto rojo en celular, la palabra en PC */
.pg-hoy{
  position:absolute; top:5px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--vivo); font-size:0; font-style:normal;
  display:none;
}
.pg-ficha.es-hoy .pg-hoy{display:block}

@media (min-width:760px){
  .pg-corto{display:none}
  .pg-largo{display:block}
  .pg-hoy{
    position:static; width:auto; height:auto; margin-top:4px;
    padding:2px 8px; border-radius:999px; color:#fff;
    font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  }
}

/* --- Tarjeta "al aire ahora" --- */
.pg-ahora{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; align-items:center;
  padding:22px; margin-bottom:10px;
  border-radius:var(--r-l);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--cat) 50%,transparent), transparent 60%),
    linear-gradient(140deg,#1A2C7A,#0D1A48);
  border:1px solid color-mix(in srgb,var(--cat) 60%,transparent);
  box-shadow:0 18px 50px color-mix(in srgb,var(--cat) 26%,transparent), var(--sombra);
}
/* Brillo que cruza la tarjeta de vez en cuando */
.pg-ahora::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  transform:translateX(-100%);
  animation:barrido 5s ease-in-out infinite;
}
@keyframes barrido{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.pg-ahora-ico{
  grid-row:span 2;
  display:grid; place-items:center; width:76px; height:76px;
  border-radius:22px; color:#fff;
  background:var(--cat);
  box-shadow:0 10px 26px color-mix(in srgb,var(--cat) 50%,transparent);
}
.pg-ahora-txt{display:grid; gap:6px; min-width:0}
.pg-ahora h3{font-size:clamp(22px,5.4vw,30px)}
.pg-ahora-txt > p{font-weight:300; color:var(--txt-2); line-height:1.4}
.pg-ver{grid-column:1 / -1; justify-self:start; margin-top:8px}

.pg-etq{
  display:inline-flex; align-items:center; gap:7px; justify-self:start;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.pg-etq.pg-vivo{background:var(--vivo)}
.pg-etq i,.pg-vivo-mini i{
  width:8px; height:8px; border-radius:50%; background:#fff;
  animation:latido 1.6s ease-in-out infinite;
}

.pg-barra{
  height:7px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.14); margin-top:6px;
}
.pg-barra span{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--cat),#fff);
  transition:width .6s ease;
}
.pg-barra.fina{height:4px; margin-top:10px}

.pg-meta{font-size:13.5px; color:var(--txt-2)}
.pg-sigue{
  font-size:14px; color:var(--txt-2); font-weight:300;
  padding-top:8px; margin-top:4px; border-top:1px solid var(--borde);
}
.pg-sigue b{color:var(--txt); font-weight:700}

.pg-ahora.pg-sin{grid-template-columns:minmax(0,1fr); justify-items:start; --cat:#8FA3D9}

@media (max-width:520px){
  .pg-ahora{grid-template-columns:minmax(0,1fr); padding:18px}
  .pg-ahora-ico{grid-row:auto; width:58px; height:58px; border-radius:17px}
  .pg-ahora-ico svg{width:30px; height:30px}
}

.pg-zona{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--txt-3); margin:0 0 16px 4px;
}
.pg-titulo-dia{font-size:15px; color:var(--txt-2); margin:0 0 16px 4px}
.pg-titulo-dia b{color:var(--txt)}

/* --- Línea de tiempo --- */
.pg-linea{list-style:none; margin:0; padding:0; display:grid; gap:10px}

.pg-prog{
  display:grid; grid-template-columns:52px 18px minmax(0,1fr); align-items:stretch;
  /* Deja libres la barra superior y las fichas al centrar el programa */
  scroll-margin-top:170px;
}

.pg-hora{display:grid; align-content:start; justify-items:end; padding-top:14px; line-height:1.15}
.pg-hora b{font-size:16px}
.pg-hora span{font-size:12px; color:var(--txt-3)}

/* Punto y línea vertical que une los programas */
.pg-punto{position:relative}
.pg-punto::before{
  content:""; position:absolute; left:50%; top:-10px; bottom:-10px;
  width:2px; transform:translateX(-50%);
  background:var(--borde);
}
.pg-prog:first-child .pg-punto::before{top:20px}
.pg-prog:last-child .pg-punto::before{bottom:calc(100% - 20px)}
.pg-punto::after{
  content:""; position:absolute; left:50%; top:18px;
  width:11px; height:11px; border-radius:50%;
  transform:translateX(-50%);
  background:var(--fondo); border:2px solid var(--cat);
}

.pg-tarjeta{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--borde);
  border-left:3px solid var(--cat);
  transition:transform .16s, background .16s;
}
.pg-tarjeta:hover{background:var(--panel-2); transform:translateX(2px)}

.pg-ico{
  flex:0 0 auto; display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  color:var(--cat);
  background:color-mix(in srgb,var(--cat) 16%,transparent);
}
.pg-info{display:grid; gap:3px; min-width:0; flex:1 1 auto}
.pg-info h4{margin:0; font-size:17px; line-height:1.2}
.pg-info p{font-size:14px; font-weight:300; color:var(--txt-2); line-height:1.4}

.pg-arriba{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.pg-cat{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cat);
}
.pg-dur{font-size:12px; color:var(--txt-3)}
.pg-vivo-mini{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  padding:3px 9px; border-radius:999px;
  background:var(--vivo); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}

/* El programa que sigue: un borde suave, sin robarle atención al
   que está al aire */
.pg-sigue-mini{
  display:inline-flex; align-items:center; margin-left:auto;
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--borde-2); color:var(--txt-2);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.pg-prog.sigue .pg-tarjeta{border-color:var(--borde-2)}

/* Programa al aire: resaltado con el rojo de la señal */
.pg-prog.al-aire .pg-tarjeta{
  background:linear-gradient(120deg,rgba(224,27,36,.32),rgba(224,27,36,.08));
  border-color:rgba(255,80,88,.65);
  border-left:3px solid var(--vivo-hi);
  box-shadow:0 0 0 1px rgba(255,42,52,.25), 0 12px 34px rgba(224,27,36,.30);
}
.pg-prog.al-aire .pg-ico{color:#fff; background:var(--vivo)}
.pg-prog.al-aire .pg-cat{color:#FF9BA0}
.pg-prog.al-aire .pg-hora b{color:var(--vivo-hi)}
.pg-prog.al-aire .pg-punto::after{
  width:15px; height:15px; top:16px;
  background:var(--vivo-hi); border-color:#fff;
  animation:pulso 1.8s ease-out infinite;
}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(255,42,52,.6)}
  100%{box-shadow:0 0 0 12px rgba(255,42,52,0)}
}
.pg-prog.al-aire .pg-barra span{background:linear-gradient(90deg,var(--vivo-hi),#fff)}

/* Lo que ya pasó hoy se apaga, sin desaparecer */
.pg-prog.pasado .pg-tarjeta,
.pg-prog.pasado .pg-hora{opacity:.5}
.pg-prog.pasado .pg-tarjeta{border-left-color:var(--borde-2)}

@media (min-width:900px){
  .pg-prog{grid-template-columns:70px 24px minmax(0,1fr)}
  .pg-hora b{font-size:18px}
  .pg-tarjeta{padding:16px 20px}
  .pg-info h4{font-size:18px}
}

/* --- Estado vacío (compartido con otras secciones) --- */
.vacio{
  display:grid; gap:12px; justify-items:center; text-align:center;
  padding:44px 22px; border-radius:var(--r-l);
  border:1px dashed var(--borde-2); color:var(--txt-2);
}
.vacio h3{font-size:19px; color:var(--txt)}
.vacio p{font-weight:300}

/* ===================== FAQ ===================== */
.faq{display:grid; gap:8px; max-width:72ch}
.faq details{
  border:1px solid var(--borde); border-radius:var(--r);
  background:var(--panel); overflow:hidden;
}
.faq summary{
  padding:15px 18px; cursor:pointer; font-weight:700; font-size:16px;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; float:right; color:var(--txt-3); font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 18px 16px; font-weight:300; line-height:1.6; color:var(--txt-2)}

/* ===================== AVISOS ===================== */
.aviso-linea{
  padding:12px 16px; border-radius:var(--r-s);
  background:var(--panel); border:1px solid var(--borde);
  font-size:15px; font-weight:300; color:var(--txt-2);
}
.aviso-linea.ok{border-color:rgba(34,185,90,.5)}
.aviso-linea.mal{border-color:rgba(224,27,36,.55)}

.aviso{
  position:fixed; left:50%; bottom:calc(24px + var(--sb)); z-index:60;
  transform:translate(-50%,14px);
  padding:12px 20px; border-radius:999px;
  background:#fff; color:var(--txt-inv); font-size:14.5px; font-weight:700;
  box-shadow:var(--sombra-alta);
  opacity:0; transition:opacity .25s, transform .25s;
  max-width:88vw; text-align:center;
}
.aviso.on{opacity:1; transform:translate(-50%,0)}

/* ===================== QUIÉNES SOMOS ===================== */
.hitos{display:flex; flex-wrap:wrap; gap:10px}
.hito{
  flex:1 1 130px; display:grid; gap:2px;
  padding:14px 16px; border-radius:var(--r);
  background:linear-gradient(150deg, rgba(47,91,216,.22), rgba(255,255,255,.04));
  border:1px solid rgba(143,176,255,.28);
  box-shadow:0 0 20px rgba(47,91,216,.16);
}
.hito b{
  font-size:26px; line-height:1; color:#CFDCFF;
  text-shadow:0 0 18px rgba(143,176,255,.45);
}
.hito span{font-size:13px; color:var(--txt-3)}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:8px 15px; border-radius:999px;
  background:var(--panel); border:1px solid var(--borde);
  font-size:14px; color:var(--txt-2);
}

.tarjeta .kicker{font-size:11px}

/* ===================== SITIO WEB INCRUSTADO ===================== */
.marco-web{
  position:relative; isolation:isolate;
  /* Alto útil: lo que queda de pantalla bajo la barra superior */
  height:calc(100dvh - var(--barra) - var(--st) - 40px);
  min-height:420px;
  border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--borde);
  background:var(--panel-solido);
  box-shadow:var(--sombra);
}
.marco-web iframe{width:100%; height:100%; border:0; display:block}

.web-tarjeta{
  display:grid; gap:14px; justify-items:center; text-align:center;
  padding:34px 22px; border-radius:var(--r-l);
  background:linear-gradient(160deg, rgba(47,91,216,.28), rgba(255,255,255,.04));
  border:1px solid var(--borde);
}
.web-tarjeta img{width:min(210px,60%); height:auto}
.web-tarjeta h3{font-size:22px; letter-spacing:.02em}
.web-tarjeta p{font-weight:300; line-height:1.55; color:var(--txt-2); max-width:36ch}

.web-cargando{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; justify-items:center; gap:14px;
  background:var(--fondo); color:var(--txt-2);
}

/* ===================== VENTANA EMERGENTE ===================== */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px}
.modal-velo{
  position:absolute; inset:0;
  background:rgba(4,8,24,.72); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .22s;
}
.modal.on .modal-velo{opacity:1}

.modal-caja{
  position:relative; z-index:1;
  width:min(380px,100%);
  display:grid; gap:14px; justify-items:center; text-align:center;
  padding:26px 22px 22px;
  border-radius:var(--r-l);
  background:linear-gradient(165deg,#16266B,#0B1436 70%);
  border:1px solid var(--borde-2);
  box-shadow:var(--sombra-alta);
  transform:translateY(12px) scale(.97); opacity:0;
  transition:transform .22s, opacity .22s;
  max-height:90dvh; overflow-y:auto;
}
.modal.on .modal-caja{transform:none; opacity:1}

.modal-caja h3{font-size:21px}
.modal-x{position:absolute; top:8px; right:8px; width:38px; height:38px}
.modal-lead{font-size:14.5px; font-weight:300; line-height:1.5; color:var(--txt-2)}

.qr{
  display:grid; place-items:center;
  padding:12px; border-radius:var(--r);
  background:#fff;
}
.qr img,.qr svg{display:block; width:210px; height:210px; image-rendering:pixelated}
.qr-falla{font-size:14px; color:var(--txt-3)}

.qr-url{
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  color:var(--txt-2); word-break:break-all;
}

.modal-btns{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.modal-btns .btn{padding:11px 17px; font-size:14.5px}

.dlg-ico{
  display:grid; place-items:center; width:66px; height:66px;
  border-radius:50%; background:var(--acc); color:#fff;
  box-shadow:0 0 24px rgba(47,91,216,.5);
}
.dlg-ico.girando svg{animation:girar 1.1s linear infinite}

/* ===================== MENÚ LATERAL ===================== */
.menu{position:fixed; inset:0; z-index:70}
.menu-velo{
  position:absolute; inset:0;
  background:rgba(4,8,24,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s;
}
.menu.on .menu-velo{opacity:1}

.menu-panel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(340px,88vw);
  display:flex; flex-direction:column; gap:14px;
  padding:calc(16px + var(--st)) 18px calc(18px + var(--sb));
  background:linear-gradient(165deg,#16266B,#0B1436 60%);
  border-right:1px solid var(--borde);
  box-shadow:var(--sombra-alta);
  transform:translateX(-100%); transition:transform .22s ease-out;
  overflow-y:auto;
}
.menu.on .menu-panel{transform:none}

.menu-hd{display:flex; align-items:center; gap:10px}
.menu-hd img{height:34px; width:auto}
.menu-hd div{display:grid; flex:1 1 auto; min-width:0; line-height:1.2}
.menu-hd b{font-size:15px}
.menu-hd span{font-size:11.5px; color:var(--txt-3); letter-spacing:.08em}

.menu-lista{display:grid; gap:2px}
.menu-it{
  display:flex; align-items:center; gap:13px;
  width:100%; text-align:left;
  padding:13px 12px; border-radius:var(--r-s);
  font-size:15.5px;
}
.menu-it:hover{background:var(--panel)}
.menu-it svg{color:var(--txt-3); flex:0 0 auto}

.menu-inst{justify-content:center; margin-top:auto}

.menu-redes{display:flex; gap:9px; justify-content:center; padding-top:4px}
.red{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--borde-2); color:var(--txt-2);
}
.red:hover{background:var(--panel); color:var(--txt)}

.menu-pie{font-size:12.5px; color:var(--txt-3); text-align:center}

/* ===================== PIE ===================== */
.foot{
  margin-top:20px;
  padding:26px 16px calc(26px + var(--sb));
  border-top:1px solid var(--borde);
  background:rgba(6,12,33,.5);
}
.foot-in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:18px 26px;
}
.foot-eslogan{
  font-weight:300; font-style:italic; font-size:19px; line-height:1.25;
  color:var(--txt-2);
}
.foot-marca{
  display:grid; gap:3px; line-height:1.2;
  padding-inline:26px;
  border-inline:1px solid var(--borde);
}
.foot-marca b{font-size:14px; letter-spacing:.14em}
.foot-marca span{font-size:11px; letter-spacing:.22em; color:var(--txt-3)}
.foot-redes{display:flex; gap:9px}

@media (max-width:620px){
  .foot-in{flex-direction:column; text-align:center}
  .foot-marca{border:0; padding:0}
}

/* --- Crédito del autor --- */
.foot-autor{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
  max-width:var(--maxw); margin:22px auto 0;
  padding-top:18px; border-top:1px solid var(--borde);
  font-size:12px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--txt-3);
  transition:color .15s;
}
.foot-autor:hover{color:var(--txt-2)}
.foot-autor img{height:26px; width:auto; opacity:.92}
.foot-autor-web{text-transform:none; letter-spacing:.02em; font-weight:700; color:var(--txt-2)}
.foot-ubic{margin-top:3px; letter-spacing:.08em !important; color:var(--txt-2) !important}
.foot-autor:hover img{opacity:1}

/* ===================== PANEL DE CONFIGURACIÓN ===================== */
/* Todo lo que empieza por pn-, pc- o pu- pertenece al panel, que solo
   se descarga cuando alguien entra a #/panel. */
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn.chico{padding:9px 14px; font-size:13.5px}

/* --- Entrada --- */
.pn-login{
  width:min(460px,100%); margin:10px auto 0;
  display:grid; gap:12px; justify-items:center; text-align:center;
  padding:30px 22px 24px; border-radius:var(--r-l);
  background:linear-gradient(165deg,#1B3080,#0B1436 70%);
  border:1.5px solid rgba(74,118,240,.55);
  box-shadow:0 0 34px rgba(47,91,216,.30), var(--sombra);
}
.pn-simbolo{height:62px; width:auto; filter:drop-shadow(0 0 16px rgba(143,176,255,.35))}
.pn-login h2{font-size:clamp(24px,6vw,30px)}
.pn-login h2 em,.pn-hd h2 em{font-style:normal; color:#8FB0FF}
.pn-login .lead{font-size:15px}
.pn-login .lead b{color:#8FB0FF}
.pn-form{display:grid; gap:10px; width:100%; text-align:left}
.pn-lbl{font-size:13px; font-weight:700; color:var(--txt-2)}
.pn-input{
  width:100%; padding:14px 16px; border-radius:14px;
  font:inherit; font-size:16px; color:var(--txt);
  background:rgba(6,12,33,.55); border:1.5px solid var(--borde-2);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.pn-input:focus{border-color:var(--acc-hi); box-shadow:0 0 0 4px rgba(74,118,240,.22)}
.pn-codigo{font-size:30px; font-weight:700; letter-spacing:.5em; text-align:center; padding-left:calc(16px + .5em)}
.pn-form .btn{width:100%; margin-top:4px; justify-content:center}

/* Campo trampa: fuera de la pantalla (no display:none, que algunos
   robots detectan), sin foco y sin lector de pantalla */
.pn-trampa{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

/* Captcha */
.pn-captcha{display:flex; align-items:center; gap:8px}
.pn-captcha-img{
  flex:1 1 auto; display:grid; place-items:center;
  height:80px; border-radius:14px; overflow:hidden;
  background:#EEF3FF; border:2px solid rgba(74,118,240,.7);
}
.pn-captcha-img img{width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; pointer-events:none}
.pn-captcha-img .pl-giro{border-color:rgba(11,20,54,.2); border-top-color:var(--acc)}
.pn-captcha-otra{flex:0 0 auto; border:1.5px solid var(--borde-2)}
.pn-captcha-in{font-size:22px; font-weight:700; letter-spacing:.4em; text-align:center}
.pn-captcha-in::placeholder,.pn-codigo::placeholder{letter-spacing:.1em; font-size:16px; font-weight:400}
.pn-enlaces{display:flex; justify-content:space-between; gap:10px}
.pn-link{font-size:14px; color:#8FB0FF; font-weight:700; padding:6px 2px}
.pn-link:disabled{color:var(--txt-3); cursor:default}
.pn-error{min-height:1.2em; font-size:14px; color:#FF8A96; font-weight:700}
.pn-seguro{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--txt-3)}
.pn-seguro svg{color:#8FB0FF; flex:0 0 auto}

/* --- Tablero --- */
.pn-tablero{display:grid; gap:20px}
.pn-hd{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px}
.pn-hd h2{font-size:clamp(25px,6.4vw,34px)}
.pn-quien{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:14px; color:var(--txt-2)}
.pn-quien svg{color:#8FB0FF}
.pn-opciones{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pn-op{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; gap:8px; align-content:start;
  padding:22px; border-radius:22px; min-height:200px;
  background:linear-gradient(160deg, rgba(47,91,216,.40), rgba(11,20,54,.85) 70%);
  border:1.5px solid rgba(74,118,240,.45);
  box-shadow:var(--sombra);
  transition:transform .18s, box-shadow .18s;
}
a.pn-op:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.pn-op b{font-size:19px; line-height:1.2}
.pn-op > span:not(.pn-op-ico){font-size:14px; font-weight:300; color:var(--txt-2); line-height:1.45}
.pn-op-ico{display:grid; place-items:center; width:68px; height:68px; border-radius:50%; margin-bottom:6px; color:#fff}
/* Cada opción con el color de su acceso en la portada */
.pn-op.t-amarillo .pn-op-ico{background:var(--a-parrilla); box-shadow:0 0 24px rgba(31,163,91,.45)}
.pn-op.t-violeta .pn-op-ico{background:var(--a-pauta); box-shadow:0 0 24px rgba(240,154,30,.45)}
.pn-op.t-super .pn-op-ico{background:var(--a-privacidad); box-shadow:0 0 24px rgba(123,68,216,.5)}
.pn-op.t-super{border-color:rgba(123,68,216,.6)}
.pn-op-ir{display:inline-flex; align-items:center; gap:4px; font-style:normal; font-weight:700; color:#8FB0FF; margin-top:6px}
.pn-estado-pub{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-size:14px; color:var(--txt-2); padding:12px 16px;
  border-radius:var(--r); background:var(--panel); border:1px solid var(--borde);
}
.pn-estado-pub span{display:flex; align-items:center; gap:8px}
.pn-estado-pub svg{color:#8FB0FF; flex:0 0 auto}

/* --- Editor --- */
.pn-editor{display:grid; gap:14px}
.pn-barra{
  position:sticky; top:calc(var(--barra) + var(--st)); z-index:6;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:12px 14px; border-radius:var(--r);
  background:rgba(11,20,54,.94); backdrop-filter:blur(12px);
  border:1.5px solid rgba(74,118,240,.45);
  box-shadow:var(--sombra);
}
.pn-barra-txt{display:grid; gap:2px}
.pn-barra-txt b{font-size:15px}
.pn-sucio{color:#FFC46B}
.pn-sucio::before{content:"\25CF  "; font-size:11px; vertical-align:2px}
.pn-limpio{color:#7FE3A8}
.pn-barra-btns{display:flex; gap:8px; flex-wrap:wrap}
.pn-barra-btns .btn.solid{padding:10px 18px}
.pn-ayuda{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; font-weight:300; line-height:1.5; color:var(--txt-2)}
.pn-ayuda svg{color:#8FB0FF; flex:0 0 auto; margin-top:2px}
.pn-ayuda b{color:#fff; font-weight:700}

.pn-fichas{position:static; margin-bottom:0}
.pn-cuenta{
  font-style:normal; font-size:10.5px; font-weight:700; margin-top:3px;
  min-width:20px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.14);
}
.pg-ficha.on .pn-cuenta{background:rgba(11,20,54,.25)}
.pg-ficha.con-error{box-shadow:inset 0 0 0 2px #FF5A6E}

.pn-herr{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.pn-herr h3{font-size:20px}
.pn-herr small{font-size:13px; font-weight:400; color:var(--txt-3); margin-left:6px}

.pn-lista{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pn-fila{
  display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start; gap:10px 12px;
  padding:10px 12px; border-radius:16px;
  background:rgba(47,91,216,.10); border:1.5px solid rgba(143,176,255,.16);
  transition:background .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.pn-hora{display:grid; justify-items:end; line-height:1.1; padding-top:9px}
.pn-hora b{font-size:16px}
.pn-hora span{font-size:11px; color:var(--txt-3)}
.pn-campo{display:grid; gap:4px; min-width:0}
.pn-titulo{
  width:100%; padding:10px 12px; border-radius:11px;
  font:inherit; font-size:15px; color:var(--txt);
  background:rgba(6,12,33,.45); border:1.5px solid var(--borde);
  outline:none; transition:border-color .15s, box-shadow .15s, color .2s;
}
.pn-titulo:focus{border-color:var(--acc-hi); box-shadow:0 0 0 3px rgba(74,118,240,.22)}
.pn-titulo::placeholder{color:rgba(214,226,255,.35)}
/* Descripción: una línea que crece si el texto es largo */
.pn-desc{
  width:100%; min-width:0; resize:none; overflow:hidden;
  field-sizing:content; min-height:38px; max-height:90px;
  padding:8px 12px; border-radius:10px;
  font:inherit; font-size:13.5px; font-weight:300; line-height:1.4; color:var(--txt-2);
  background:rgba(6,12,33,.35); border:1.5px dashed var(--borde);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.pn-desc:focus{border-style:solid; border-color:var(--acc-hi); box-shadow:0 0 0 3px rgba(74,118,240,.22)}
.pn-desc::placeholder{color:rgba(214,226,255,.32)}
.pn-fila:not(.activo) .pn-desc{opacity:.5}
.pn-fila.activo .pn-desc{border-color:rgba(74,118,240,.45); color:#fff}
.pn-sub{display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap}
.pn-pista{flex:1 1 auto; min-width:0; font-size:12px; color:var(--txt-3); padding-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pn-pista.mal{color:#FF8A96; font-weight:700}

/* Categoría: decide el color del programa en la parrilla */
.pn-cat{
  flex:0 0 auto; appearance:auto; color-scheme:dark;
  padding:7px 10px; border-radius:10px;
  font:inherit; font-size:12.5px; color:var(--txt-2);
  background:rgba(6,12,33,.45); border:1.5px solid var(--borde);
}
.pn-fila.activo .pn-cat{color:#fff; border-color:rgba(74,118,240,.45)}

/* Desactivado: apagado */
.pn-fila:not(.activo) .pn-hora,
.pn-fila:not(.activo) .pn-titulo{opacity:.55}

/* Activado: brillante */
.pn-fila.activo{
  background:linear-gradient(120deg,rgba(74,118,240,.22),rgba(47,91,216,.14));
  border-color:rgba(74,118,240,.7);
  box-shadow:0 0 0 1px rgba(74,118,240,.25), 0 0 22px rgba(47,91,216,.28);
}
.pn-fila.activo .pn-hora b{color:#8FB0FF}
.pn-fila.activo .pn-titulo{border-color:rgba(74,118,240,.55); font-weight:700}
.pn-fila.activo .pn-pista{color:#8FB0FF}
.pn-fila.error{border-color:#FF5A6E; box-shadow:0 0 0 2px rgba(255,90,110,.4)}

/* Interruptor con la etiqueta Activado / Desactivado */
.pn-sw{position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; flex:0 0 auto; -webkit-user-select:none; user-select:none}
.pn-sw input{position:absolute; opacity:0; width:1px; height:1px}
.pn-sw-caja{
  position:relative; flex:0 0 auto; width:46px; height:26px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1.5px solid var(--borde-2);
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.pn-sw-caja i{
  position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  background:#C9D6F5; transition:transform .2s, background .2s;
}
.pn-sw input:checked + .pn-sw-caja{background:var(--acc-hi); border-color:var(--acc-hi); box-shadow:0 0 14px rgba(74,118,240,.6)}
.pn-sw input:checked + .pn-sw-caja i{transform:translateX(20px); background:#fff}
.pn-sw input:focus-visible + .pn-sw-caja{outline:3px solid var(--acc-hi); outline-offset:3px}
.pn-sw-txt{font-size:13px; font-weight:700; width:86px; color:var(--txt-3)}
.pn-sw input:checked ~ .pn-sw-txt{color:#8FB0FF}

#panelHost,.pn-editor,.pn-tablero{min-width:0}
@media (max-width:560px){
  .pn-fila{grid-template-columns:42px minmax(0,1fr); padding:10px; gap:8px 10px}
  .pn-sw-txt{width:80px; font-size:12px}
  .pn-barra{padding:10px 12px; gap:8px}
  .pn-barra-txt .kicker{display:none}
  .pn-barra-btns{width:100%}
  .pn-barra-btns .btn{white-space:nowrap; padding:9px 12px; font-size:14px; flex:1; justify-content:center}
}

.pn-copiar{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; text-align:left}
.pn-chk{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:var(--panel); border:1px solid var(--borde); cursor:pointer}
.pn-chk input{accent-color:var(--acc-hi); width:18px; height:18px}

.pn-mini-giro{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:girar .8s linear infinite}


/* --- Editor de precios --- */
.pn-op.t-tarifas{border-color:rgba(240,154,30,.45)}
.pn-op.t-tarifas .pn-op-ico{background:var(--a-pauta); box-shadow:0 0 24px rgba(240,154,30,.45)}

.pt-base{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding:16px; border-radius:var(--r);
  background:linear-gradient(150deg, rgba(47,91,216,.22), rgba(255,255,255,.04));
  border:1px solid rgba(143,176,255,.3);
}
.pt-base label{display:grid; gap:5px; font-size:12.5px; font-weight:700; color:var(--txt-2)}

.pt-grupo{display:grid; gap:10px; margin-top:20px}
.pt-lista{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pt-fila{
  display:grid; gap:8px; align-items:center;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) 118px 96px 42px;
  padding:10px 12px; border-radius:14px;
  background:rgba(47,91,216,.10); border:1.5px solid rgba(143,176,255,.16);
}
.pt-num{display:grid; gap:3px; font-size:11px; font-weight:700; color:var(--txt-3); min-width:0}
.pt-num input{color-scheme:dark}
.pt-eq{font-size:13.5px; font-weight:700; color:#8FB0FF; text-align:right}
.pt-quitar{color:#FF8A96; border:1px solid var(--borde)}
.pt-quitar:hover{background:rgba(255,90,110,.15)}

@media (max-width:760px){
  .pt-fila{grid-template-columns:minmax(0,1fr) 110px 42px}
  .pt-nombre{grid-column:1 / -1}
  .pt-nota{grid-column:1 / 2}
  .pt-eq{text-align:left}
}

/* --- Patrocinadores --- */
.pc-filtros{display:flex; flex-wrap:wrap; gap:8px}
.pc-filtro{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--panel); border:1px solid var(--borde); color:var(--txt-2);
}
.pc-filtro i{font-style:normal; min-width:22px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.14); font-size:12px}
.pc-filtro.on{background:var(--acc); color:#fff; border-color:transparent}
.pc-filtro.on i{background:rgba(11,20,54,.3)}
.pc-agregar{justify-self:start}

.pc-lista{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pc-item{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px;
  padding:14px; border-radius:18px;
  background:rgba(47,91,216,.10); border:1.5px solid rgba(143,176,255,.25);
  transition:border-color .2s, box-shadow .2s;
}
.pc-item > *{min-width:0}
.pc-item.perm{border-color:rgba(74,118,240,.6); box-shadow:0 0 18px rgba(47,91,216,.2)}
.pc-item.error{border-color:#FF5A6E; box-shadow:0 0 0 2px rgba(255,90,110,.4)}

.pc-logo{
  position:relative; align-self:start;
  display:grid; place-items:center; aspect-ratio:16/10; padding:10px;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(74,118,240,.5);
}
.pc-logo img{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain}
.pc-logo > span{display:grid; justify-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--acc)}
.pc-logo-cambiar{
  position:absolute; right:6px; bottom:6px; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%; font-style:normal;
  background:var(--acc); color:#fff; opacity:.9;
}
.pc-logo.subiendo::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.7);
  animation:parpadeo 1s ease-in-out infinite;
}
@keyframes parpadeo{50%{opacity:.4}}

.pc-datos{display:grid; gap:8px; min-width:0}
.pc-datos .pn-titulo{min-width:0}
.pc-fila2{display:grid; grid-template-columns:140px minmax(0,1fr) 150px; gap:8px}
.pc-tipo{appearance:auto; color-scheme:dark}
.pc-fechas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.pc-fechas label{display:grid; gap:4px; min-width:0; font-size:12px; font-weight:700; color:var(--txt-3)}
.pc-fechas input{color-scheme:dark; min-width:0; width:100%}
.pc-perm{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:9px 12px; border-radius:12px;
  background:rgba(6,12,33,.35); border:1px solid var(--borde);
  font-size:13.5px; color:var(--txt-2); line-height:1.35;
}
.pc-perm input{accent-color:var(--acc-hi); width:20px; height:20px; margin:0; flex:0 0 auto}
.pc-perm b{color:#fff; font-weight:700}
.pc-item.perm .pc-perm{border-color:rgba(74,118,240,.55); background:rgba(47,91,216,.14)}
.pc-item.perm .pc-perm b{color:#8FB0FF}

.pc-pie{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.pc-estado{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700;
  border:1px solid transparent;
}
.pc-estado.e-vigente{background:rgba(34,185,90,.14); color:#7FE3A8; border-color:rgba(34,185,90,.4)}
.pc-estado.e-permanente{background:rgba(47,91,216,.18); color:#8FB0FF; border-color:rgba(74,118,240,.5)}
.pc-estado.e-por-vencer{background:rgba(255,160,40,.16); color:#FFB54D; border-color:rgba(255,160,40,.5)}
.pc-estado.e-vencido{background:rgba(255,90,110,.14); color:#FF8A96; border-color:rgba(255,90,110,.45)}
.pc-estado.e-futuro,.pc-estado.e-incompleto{background:rgba(255,255,255,.08); color:var(--txt-2); border-color:var(--borde)}
.pc-acciones{display:flex; align-items:center; gap:4px}
.pc-acciones .ico-btn{width:36px; height:36px; border:1px solid var(--borde)}
/* Las flechas de orden apuntan arriba y abajo, no a los lados */
.pc-acciones .ico-btn svg{transform:rotate(90deg)}
.pc-acciones .ico-btn:disabled{opacity:.3}
.pc-borrar{border-color:rgba(255,90,110,.5); color:#FF8A96}
.pc-borrar:hover{background:rgba(255,90,110,.15)}

@media (max-width:760px){ .pc-fila2{grid-template-columns:130px minmax(0,1fr)} }
@media (max-width:640px){
  .pc-item{grid-template-columns:minmax(0,1fr)}
  .pc-logo{width:min(220px,100%)}
}
@media (max-width:420px){
  .pc-fechas,.pc-fila2{grid-template-columns:minmax(0,1fr)}
}

/* --- Usuarios --- */
.pu-form{
  display:grid; gap:12px; padding:18px; border-radius:18px;
  background:linear-gradient(140deg, rgba(47,91,216,.28), rgba(123,68,216,.18));
  border:1.5px solid rgba(74,118,240,.45);
}
.pu-form h3{display:flex; align-items:center; gap:8px; font-size:17px}
.pu-form h3 svg{color:#8FB0FF}
.pu-form .btn{justify-self:start}
.pu-campos{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pu-campos label{display:grid; gap:5px; font-size:13px; font-weight:700; color:var(--txt-2)}
.pu-campos .pn-input{padding:11px 13px; font-size:15px}
.pu-modal{width:100%; text-align:left; grid-template-columns:1fr}
.pu-lista{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pu-item{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:14px 16px; border-radius:16px;
  background:var(--panel); border:1px solid var(--borde);
}
.pu-super{border-color:rgba(123,68,216,.6); background:rgba(123,68,216,.12)}
.pu-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--acc); color:#fff; flex:0 0 auto}
.pu-super .pu-ico{background:#7B44D8}
.pu-info{display:grid; gap:1px; flex:1 1 200px; min-width:0}
.pu-info b{font-size:16px}
.pu-info span{font-size:14px; color:#8FB0FF; word-break:break-all}
.pu-info small{font-size:12px; color:var(--txt-3)}
.pu-acciones{display:flex; gap:6px}
.pu-vacio{padding:16px; color:var(--txt-3); font-size:14px}

/* Quien prefiere menos movimiento no ve animaciones */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}