/* ============================================================
   Satel PWA — estilos del motor.
   Los colores y las tipografías vienen de marca/marca.css, que se
   carga antes que este archivo.
   ============================================================ */

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

/* El atributo hidden gana siempre, aunque una clase fije display */
[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;
  /* Espacio para la barra inferior fija */
  padding-bottom:calc(var(--nav) + var(--sb) + 18px);
}

/* Protección: sin selección de texto ni menú de imagen */
.protegido body{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.protegido img{-webkit-user-drag:none; pointer-events:auto}

/* Telón fijo: degradado violeta y las ondas amarillas de las esquinas */
.telon{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(139,61,255,.55) 0%, transparent 60%),
    radial-gradient(80% 50% at 0% 100%, rgba(106,43,217,.55) 0%, transparent 65%),
    linear-gradient(180deg, #2A0E61 0%, var(--fondo) 45%, #12052F 100%);
}
.telon::before,.telon::after{content:''; position:absolute; pointer-events:none}
/* Onda amarilla arriba a la derecha, como en la maqueta */
.telon::before{
  top:0; right:0; width:min(62vw,460px); height:min(34vh,330px);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFD95C%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFB000%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M170%200%20C%20210%2070%20290%2070%20320%20130%20C%20345%20180%20360%20240%20400%20270%20L400%200Z%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M120%200%20C%20170%2090%20250%2095%20290%20150%20C%20320%20195%20340%20250%20400%20300%20L400%20285%20C%20350%20245%20335%20190%20305%20145%20C%20265%2085%20185%2080%20140%200Z%22%20fill%3D%22%23FFC928%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E") right top / contain no-repeat;
  filter:drop-shadow(0 0 30px rgba(255,190,30,.35));
}
/* Onda amarilla y violeta abajo a la izquierda */
.telon::after{
  bottom:0; left:0; width:min(50vw,380px); height:min(30vh,280px);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Cpath%20d%3D%22M0%20120%20C%2060%20150%20110%20210%20150%20300%20L0%20300Z%22%20fill%3D%22%23FFC928%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22M0%2080%20C%2080%20120%20140%20190%20190%20300%20L175%20300%20C%20125%20195%2070%20135%200%20100Z%22%20fill%3D%22%23A66BFF%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E") left bottom / contain no-repeat;
  opacity:.75;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.2}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px; border-radius:10px}
/* Navegación con control remoto: foco muy visible */
body.tv [data-focus]{outline:3px solid var(--amarillo) !important; outline-offset:4px; box-shadow:0 0 0 8px rgba(255,201,40,.22)}

/* ===================== BARRA SUPERIOR ===================== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
  height:calc(var(--barra) + var(--st));
  padding:var(--st) 12px 0;
  background:linear-gradient(180deg, rgba(26,8,69,.94), rgba(26,8,69,.70) 75%, rgba(26,8,69,0));
  backdrop-filter:blur(10px);
}
.topbar > .ico-btn{grid-column:1; grid-row:1}

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

.tb-marca{grid-column:2; justify-self:center; display:flex; align-items:center; min-width:0}
.tb-logo{height:clamp(40px,11vw,52px); width:auto}

.tb-actions{grid-column:3; display:flex; align-items:center; gap:4px}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--borde-2); font-size:13.5px; font-weight:600;
  white-space:nowrap;
}
.pill.solid{background:var(--amarillo); color:var(--txt-inv); border-color:transparent; box-shadow:0 4px 16px rgba(255,201,40,.35)}
.pill.solid:hover{background:var(--amarillo-hi)}
@media (max-width:400px){ .pill span{display:none} .pill{padding:9px} }

/* ===================== ESTRUCTURA ===================== */
.app{max-width:var(--maxw); margin:0 auto; padding:6px 14px 26px}
.view{display:grid; gap:22px}

/* En celular las columnas se disuelven */
.col{display:contents}

@media (min-width:900px){
  .home{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start; gap:26px}
  .col{display:grid; gap:16px; align-content:start; min-width:0}
  .home .blk-cli{grid-column:1 / -1}
  .vivo,.parrilla{max-width:1000px; margin-inline:auto; width:100%}
}

/* ===================== REPRODUCTOR ===================== */
.hueco-player,.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:1.5px solid rgba(166,107,255,.55);
  box-shadow:0 0 0 1px rgba(139,61,255,.25), 0 0 34px rgba(139,61,255,.45), var(--sombra-alta);
}
.pl-marco video{width:100%; height:100%; object-fit:contain; background:var(--negro)}
.pl-marco:fullscreen{aspect-ratio:auto; width:100vw; height:100vh; border-radius:0; border:0}

.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:10px;
  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:10px; height:10px; border-radius:50%; background:#fff; animation:latido 1.8s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

.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:#9A6A00}

.pl-expandir{
  position:absolute; top:12px; right:12px; z-index:3;
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:11px; background:rgba(40,20,80,.55); color:#fff;
  backdrop-filter:blur(6px);
}
.pl-expandir:hover{background:rgba(40,20,80,.85)}

.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(20,6,50,.62); backdrop-filter:blur(2px);
  transition:opacity .25s;
}
.player[data-estado="aire"] .pl-capa,
.player[data-estado="pausado"] .pl-capa{opacity:0; pointer-events:none}

.pl-giro{
  width:40px; height:40px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22); border-top-color:var(--amarillo);
  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(--amarillo); color:var(--txt-inv); font-weight:600}
.player[data-estado="cortado"] .pl-rein,
.player[data-estado="sin-red"] .pl-rein{display:block}

/* Botón grande de play: círculo translúcido con borde, como la maqueta */
.pl-grande{
  position:absolute; inset:0; z-index:3; margin:auto;
  width:86px; height:86px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,6,50,.45); color:#fff;
  border:2.5px solid rgba(255,255,255,.85);
  backdrop-filter:blur(4px);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform .18s, opacity .18s, background .18s;
}
.pl-grande:hover{transform:scale(1.06); background:rgba(139,61,255,.6)}
.pl-grande svg{margin-left:5px}
.player:not([data-estado="pausado"]) .pl-grande{opacity:0; pointer-events:none; transform:scale(.8)}

.pl-barra{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:6px;
  padding:26px 12px 10px;
  background:linear-gradient(180deg, transparent, rgba(15,4,40,.88));
  transition:opacity .25s, transform .25s;
}
.player.sonando .pl-marco:not(:hover):not(:focus-within) .pl-barra{opacity:0; transform:translateY(8px)}
@media (hover:none){
  .player.sonando .pl-barra{opacity:0; transform:translateY(8px)}
  .player.sonando .pl-marco:active .pl-barra{opacity:1; transform:none}
}

.pl-b{display:grid; place-items:center; width:40px; height:40px; 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(--amarillo); height:4px; cursor:pointer}
@media (max-width:520px){ .pl-vol{display:none} }

.pl-titulo{flex:1 1 auto; min-width:0; padding-left:6px; display:grid; line-height:1.2}
.pl-titulo b{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-titulo small{font-size:12.5px; color:var(--txt-2); font-weight:300}

.pl-barra .pl-b[data-a="pantalla"]{display:none}
@media (min-width:900px){ .pl-barra .pl-b[data-a="pantalla"]{display:grid} }

/* ===================== AHORA / SIGUE ===================== */
.ahora-mini{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.am-it{
  display:grid; gap:3px; min-width:0;
  padding:11px 14px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--borde);
}
.am-it b{font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am-etq{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3)}
.am-ahora{border-color:rgba(255,201,40,.55); background:linear-gradient(120deg,rgba(255,201,40,.16),rgba(139,61,255,.14))}
.am-ahora .am-etq{color:var(--amarillo)}
.am-etq i{width:8px; height:8px; border-radius:50%; background:var(--vivo-hi); animation:latido 1.6s infinite}

/* ===================== ACCESOS (maqueta) ===================== */
.accesos{display:grid; gap:14px; grid-template-columns:1fr 1fr}

.acceso{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr; align-content:space-between;
  min-height:clamp(168px,44vw,206px);
  padding:16px 16px 18px;
  border-radius:22px;
  background:linear-gradient(160deg, rgba(92,40,190,.55), rgba(40,14,100,.75) 70%);
  border:1.5px solid rgba(166,107,255,.55);
  box-shadow:0 0 22px rgba(139,61,255,.30), var(--sombra);
  transition:transform .18s, box-shadow .18s;
}
.acceso:hover{transform:translateY(-3px); box-shadow:0 0 30px rgba(166,107,255,.55), var(--sombra-alta)}

/* Icono grande apagado de fondo */
.ac-marca{position:absolute; right:-18px; top:14px; z-index:-1; color:rgba(190,160,255,.13); transform:rotate(-12deg)}
/* Onda amarilla de la esquina */
.ac-onda{position:absolute; z-index:-1; right:0; width:62%; height:52%; pointer-events:none}
/* Tarjetas amarillas: arco arriba a la derecha; violetas: abajo */
.t-amarillo .ac-onda{top:0; background:radial-gradient(circle at 100% 0%, transparent 58%, #FFC928 59%, #FFB000 72%, rgba(255,176,0,0) 73%)}
.t-violeta .ac-onda{bottom:0; background:radial-gradient(circle at 100% 100%, transparent 58%, rgba(255,201,40,.9) 59%, rgba(255,160,0,.7) 70%, rgba(255,176,0,0) 71%)}

.ac-ico{
  display:grid; place-items:center;
  width:clamp(62px,17vw,78px); height:clamp(62px,17vw,78px); border-radius:50%;
}
.t-amarillo .ac-ico{background:radial-gradient(circle at 35% 30%, #FFE17A, var(--amarillo) 60%, #F2A900); color:#1A0845; box-shadow:0 0 0 5px rgba(255,201,40,.18), 0 0 26px rgba(255,201,40,.55)}
.t-violeta .ac-ico{background:radial-gradient(circle at 35% 30%, #C79BFF, var(--violeta) 60%, #6420D8); color:#fff; box-shadow:0 0 0 5px rgba(166,107,255,.20), 0 0 26px rgba(166,107,255,.65)}

.ac-pie{display:grid; gap:10px; padding-right:44px; align-self:end}
.ac-pie b{font-size:clamp(15px,4.1vw,20px); font-weight:600; line-height:1.18}
.ac-raya{display:block; width:48px; height:5px; border-radius:99px; background:var(--amarillo)}

.ac-flecha{
  position:absolute; right:12px; bottom:14px;
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:rgba(120,60,230,.55); border:1.5px solid rgba(200,170,255,.6);
  box-shadow:0 0 14px rgba(139,61,255,.5);
}

/* ===================== BLOQUES ===================== */
.blk{display:grid; gap:14px; min-width:0}
.blk-hd{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; scroll-margin-top:90px}
.blk-hd h2{font-size:clamp(20px,5vw,26px)}
.blk-hd h2 em,.shead h2 em,.cli-hero h2 em{font-style:normal; color:var(--amarillo)}
.blk-mas{font-size:14px; color:var(--amarillo); font-weight:600; display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.blk-mas:hover{color:var(--amarillo-hi)}

/* ===================== CINTA DE CLIENTES (portada) ===================== */
.cinta{
  width:100%; overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista{display:flex; width:max-content; animation:cinta 42s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-copia{display:flex}
@keyframes cinta{to{transform:translateX(-50%)}}
.cinta-it{
  flex:0 0 auto; display:grid; place-items:center;
  width:150px; height:84px; margin-right:12px; padding:10px 14px;
  background:#fff; border-radius:16px;
  box-shadow:0 0 0 1px rgba(166,107,255,.35), 0 8px 20px rgba(8,0,30,.35);
}
.cinta-it{position:relative}
.cinta-it img{position:absolute; inset:10px 14px; width:calc(100% - 28px); height:calc(100% - 20px); object-fit:contain}

/* ===================== CABECERAS DE SECCIÓN ===================== */
.shead{display:grid; gap:8px; max-width:70ch}
.kicker{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--amarillo)}
.shead h2{font-size:clamp(25px,6.4vw,36px)}
.lead{font-weight:300; font-size:16px; line-height:1.6; color:var(--txt-2)}

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

.tarjeta{
  padding:18px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--borde);
  display:grid; gap:8px; align-content:start;
}
.tarjeta b{font-size:17px}
.tarjeta p{font-weight:300; line-height:1.55; color:var(--txt-2); font-size:15px}
.tarjeta p svg{vertical-align:-3px; color:var(--amarillo)}

.pitch{
  display:grid; gap:16px; justify-items:start;
  padding:22px; border-radius:var(--r-l);
  background:linear-gradient(140deg, rgba(255,201,40,.18), rgba(139,61,255,.20));
  border:1px solid rgba(255,201,40,.4);
}
.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; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:999px;
  border:1px solid var(--borde-2); font-weight:600; font-size:15px;
  transition:background .15s, transform .15s;
}
.btn:hover{background:var(--panel-2)}
.btn.solid{background:linear-gradient(135deg,var(--violeta-hi),var(--violeta)); border-color:transparent; box-shadow:0 6px 18px rgba(139,61,255,.4)}
.btn.solid:hover{filter:brightness(1.1)}
.btn.amarillo{background:var(--amarillo); color:var(--txt-inv); border-color:transparent; box-shadow:0 6px 18px rgba(255,201,40,.35)}
.btn.amarillo:hover{background:var(--amarillo-hi)}
.btn.wa{background:var(--wa); border-color:transparent; color:#06301A}
.btn.chico{padding:8px 14px; font-size:13.5px}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  background:var(--panel); border:1px solid var(--borde);
  font-size:14px; color:var(--txt-2);
}
.chip svg{color:var(--amarillo)}

/* ===================== PARRILLA ===================== */
.pg-fichas{
  position:sticky; top:calc(var(--barra) + var(--st)); z-index:5;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;
  padding:6px; margin-bottom:18px;
  border-radius:var(--r);
  background:rgba(30,10,80,.88); 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:600;
  transition:background .18s, color .18s, transform .18s;
}
.pg-ficha:hover{background:var(--panel-2); color:var(--txt)}
/* Ficha del día elegido: amarilla */
.pg-ficha.on{
  color:var(--txt-inv); background:linear-gradient(150deg,var(--amarillo-hi),var(--amarillo));
  box-shadow:0 6px 18px rgba(255,201,40,.45); transform:translateY(-1px);
}
.pg-corto,.pg-largo{font-size:14.5px}
.pg-largo{display:none}
.pg-hoy{
  position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--vivo-hi); 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:1px 8px; border-radius:999px; color:#fff;
    font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  }
}

.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) 40%,transparent), transparent 60%),
    linear-gradient(140deg,#3A1486,#1E0A52);
  border:1.5px solid color-mix(in srgb,var(--cat) 70%,transparent);
  box-shadow:0 18px 50px color-mix(in srgb,var(--cat) 24%,transparent), var(--sombra);
}
.pg-ahora::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 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:50%; color:#1A0845; background:var(--cat);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--cat) 22%,transparent), 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-nota{font-weight:300; color:var(--txt-2); line-height:1.4}

.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:600; 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(--amarillo),#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{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:14px; color:var(--txt-2); font-weight:300;
  padding-top:9px; margin-top:4px; border-top:1px solid var(--borde);
}
.pg-sigue svg{color:var(--amarillo)}
.pg-sigue b{color:var(--amarillo); font-weight:600}
.pg-ahora.pg-sin{grid-template-columns:minmax(0,1fr); justify-items:start; --cat:#9C8CC9}

@media (max-width:520px){
  .pg-ahora{grid-template-columns:minmax(0,1fr); padding:18px}
  .pg-ahora-ico{grid-row:auto; width:58px; height:58px}
  .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)}

.pg-linea{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.pg-prog{display:grid; grid-template-columns:48px 18px minmax(0,1fr); align-items:stretch; 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; font-weight:600}
.pg-hora span{font-size:11px; color:var(--txt-3)}

.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:13px 15px; 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:50%; 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{font-size:16.5px}
.pg-info p{font-size:13.5px; font-weight:300; color:var(--txt-2); line-height:1.4}
.pg-arriba{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.pg-cat{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cat)}
.pg-dur{font-size:12px; color:var(--txt-3)}
.pg-vivo-mini,.pg-sigue-mini{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.pg-vivo-mini{background:var(--vivo)}
.pg-sigue-mini{background:rgba(255,201,40,.18); color:var(--amarillo); border:1px solid rgba(255,201,40,.5)}

/* Programa al aire: resaltado en amarillo, con el pulso de la señal */
.pg-prog.al-aire .pg-tarjeta{
  background:linear-gradient(120deg,rgba(255,201,40,.26),rgba(139,61,255,.18));
  border-color:rgba(255,201,40,.75); border-left:4px solid var(--amarillo);
  box-shadow:0 0 0 1px rgba(255,201,40,.3), 0 12px 34px rgba(255,201,40,.22);
}
.pg-prog.al-aire .pg-ico{color:var(--txt-inv); background:var(--amarillo)}
.pg-prog.al-aire .pg-cat{color:var(--amarillo)}
.pg-prog.al-aire .pg-hora b{color:var(--amarillo)}
.pg-prog.al-aire .pg-punto::after{
  width:15px; height:15px; top:16px; background:var(--amarillo); border-color:#fff;
  animation:pulso 1.8s ease-out infinite;
}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(255,201,40,.6)}100%{box-shadow:0 0 0 12px rgba(255,201,40,0)}}
.pg-prog.sigue .pg-tarjeta{border-color:rgba(255,201,40,.4)}

.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:64px 24px minmax(0,1fr)}
  .pg-hora b{font-size:18px}
  .pg-tarjeta{padding:15px 20px}
}

.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);
}

/* ===================== PRODUCCIÓN ===================== */
.prod-rejilla{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prod{
  display:grid; grid-template-rows:auto 1fr; text-align:left;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(170deg, rgba(92,40,190,.5), rgba(40,14,100,.8));
  border:1.5px solid rgba(166,107,255,.5);
  box-shadow:0 0 22px rgba(139,61,255,.25), var(--sombra);
  transition:transform .18s, box-shadow .18s;
}
.prod:hover{transform:translateY(-4px); box-shadow:0 0 30px rgba(166,107,255,.5), var(--sombra-alta)}
.prod-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:#fff}
.prod-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-play{
  position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; color:#1A0845;
  background:var(--amarillo); box-shadow:0 0 0 6px rgba(255,201,40,.3), 0 8px 24px rgba(0,0,0,.4);
}
.prod-play svg{margin-left:3px}
.prod-txt{display:grid; gap:6px; padding:16px 18px 18px; align-content:start}
.prod-txt b{font-size:19px; font-weight:600}
.prod-txt > span{font-size:14px; font-weight:300; color:var(--txt-2); line-height:1.45}
.prod-ver{display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-style:normal; font-weight:600; font-size:14px; color:var(--amarillo)}

/* Videos en miniatura */
.videos{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mini-video{display:grid; gap:8px; text-align:left}
.mv-img{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--borde); background:var(--negro)}
.mv-img img{width:100%; height:100%; object-fit:cover}
.mv-img .prod-play{width:46px; height:46px}
.mini-video b{font-size:15px; font-weight:600}

.video-marco{width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000}
.video-marco iframe{width:100%; height:100%; border:0; display:block}

/* ===================== SERVICIOS ===================== */
.srv-rapidos{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .srv-rapidos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.srv-r{
  display:grid; gap:3px; justify-items:start;
  padding:16px; border-radius:20px;
  background:var(--panel); border:1.5px solid var(--borde);
  transition:transform .16s, border-color .16s;
}
.srv-r:hover{transform:translateY(-3px); border-color:var(--amarillo)}
.srv-r b{font-size:15.5px; font-weight:600; margin-top:8px}
.srv-r > span:last-child{font-size:13px; color:var(--txt-3)}
.srv-r-ico{display:grid; place-items:center; width:52px; height:52px; border-radius:50%}
.srv-r.t-amarillo .srv-r-ico{background:var(--amarillo); color:var(--txt-inv); box-shadow:0 0 18px rgba(255,201,40,.45)}
.srv-r.t-violeta .srv-r-ico{background:var(--violeta); color:#fff; box-shadow:0 0 18px rgba(166,107,255,.55)}

.tv-banner{
  display:grid; grid-template-columns:auto 1fr; gap:18px 24px; align-items:center;
  padding:22px; border-radius:var(--r-l);
  background:linear-gradient(135deg,#2A0E61,#1A0845 60%);
  border:1.5px solid rgba(255,201,40,.5);
  box-shadow:0 0 30px rgba(255,201,40,.12), var(--sombra);
}
.tv-num{display:grid; justify-items:center; line-height:1; color:var(--amarillo)}
.tv-num small{font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.tv-num b{font-size:clamp(64px,18vw,96px); font-weight:700; letter-spacing:-.03em}
.tv-num span{font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:#fff}
.tv-txt{display:grid; gap:12px; justify-items:start}
.tv-txt h3{font-size:20px}
.tv-txt ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.tv-txt li{display:flex; align-items:center; gap:8px; font-size:15px}
.tv-txt li svg{color:var(--amarillo)}
@media (max-width:480px){ .tv-banner{grid-template-columns:1fr; justify-items:start} .tv-num{justify-items:start} }

.canales{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.canal{
  display:grid; place-items:center; aspect-ratio:16/10; padding:10px;
  background:#fff; border-radius:14px;
  box-shadow:0 4px 12px rgba(8,0,30,.3);
}
.canal.oscuro{background:linear-gradient(150deg,#3A1486,#1A0845); border:1px solid var(--borde)}
.canal{position:relative}
.canal img{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain}

.planes{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.plan{
  display:grid; gap:12px; justify-items:center; text-align:center;
  padding:20px 14px; border-radius:22px;
  background:linear-gradient(180deg,#22094F,#14052F);
  border:1.5px solid var(--amarillo);
  box-shadow:0 0 22px rgba(255,201,40,.15);
  transition:transform .18s;
}
.plan:hover{transform:translateY(-4px)}
.plan-n{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amarillo)}
.plan-megas{
  display:grid; justify-items:center; line-height:1;
  padding:10px 18px; border:1.5px solid var(--amarillo); border-radius:14px; color:var(--amarillo);
}
.plan-megas small{font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px}
.plan-megas b{font-size:40px; font-weight:700; letter-spacing:-.02em}
.plan-megas span{font-size:14px; font-style:italic; text-transform:uppercase}
.plan-precio{font-size:24px; font-weight:700; padding:4px 16px; border:1.5px solid var(--amarillo); border-radius:999px}
.plan-precio small{font-size:12px; font-weight:400; color:var(--txt-3); margin-left:2px}
.plan .btn{padding:10px 16px; font-size:14px}

.pagos{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cuenta-logo{display:grid; place-items:center start; height:52px; padding:8px 12px; background:#fff; border-radius:12px; justify-self:start}
.cuenta-logo img{max-height:36px; width:auto; max-width:100%}
.cuenta-num{font-size:22px !important; letter-spacing:.04em; color:var(--amarillo)}
.cuenta-tit{font-size:13px; color:var(--txt-3)}
.cuenta .btn{justify-self:start; margin-top:4px}
.pago-hora{font-size:14px !important}
.pago-qr{justify-items:center; text-align:center}
.pago-qr img{width:180px; height:auto; border-radius:12px; background:#fff; padding:6px; image-rendering:auto}

/* ===================== CLIENTES ===================== */
.cli-hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; gap:10px; padding:26px 22px;
  border-radius:var(--r-l);
  background:linear-gradient(150deg,#4A1AA8,#22094F 70%);
  border:1.5px solid rgba(166,107,255,.55);
  box-shadow:0 0 30px rgba(139,61,255,.35);
}
.cli-hero::after{
  content:''; position:absolute; z-index:-1; right:-80px; top:-90px; width:300px; height:220px;
  border-radius:50%; background:linear-gradient(200deg,var(--amarillo),rgba(255,170,20,0) 65%); transform:rotate(-15deg);
}
.cli-hero h2{font-size:clamp(28px,7vw,42px)}
.cli-hero .lead{max-width:52ch}
.cli-contador{display:flex; align-items:center; gap:12px; margin-top:6px}
.cli-contador b{font-size:52px; line-height:1; font-weight:700; color:var(--amarillo)}
.cli-contador span{font-size:14px; line-height:1.3; color:var(--txt-2)}

/* Muro: rejilla densa con dos placas grandes; cada placa flota a su ritmo */
.cli-muro{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:dense;
  perspective:900px;
}
@media (min-width:640px){ .cli-muro{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:980px){ .cli-muro{grid-template-columns:repeat(4,minmax(0,1fr))} }

.cli{
  margin:0; display:grid; gap:10px; align-content:start;
  animation:flotar 6s ease-in-out infinite; animation-delay:calc(var(--d) * -1);
}
.cli.grande{grid-column:span 2}
/* En celular, el último cliente suelto ocupa la fila entera */
@media (max-width:639px){ .cli:last-child:nth-child(odd){grid-column:span 2} .cli:last-child:nth-child(odd) .cli-placa{aspect-ratio:16/7} }
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -6px}}

.cli-placa{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  aspect-ratio:16/10; padding:16px 18px;
  background:#fff; border-radius:22px;
  box-shadow:0 0 0 1.5px rgba(166,107,255,.55), 0 0 24px rgba(139,61,255,.35), 0 14px 30px rgba(8,0,30,.45);
  transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .2s ease-out, box-shadow .2s;
}
.cli.grande .cli-placa{aspect-ratio:16/7}
.cli-placa img{position:absolute; inset:14px 16px; width:calc(100% - 32px); height:calc(100% - 28px); object-fit:contain}
.cli.grande .cli-placa img{inset:18px 26px; width:calc(100% - 52px); height:calc(100% - 36px)}
/* Brillo que cruza la placa al pasar el ratón */
.cli-placa::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .6s;
}
.cli:hover .cli-placa{box-shadow:0 0 0 2px var(--amarillo), 0 0 30px rgba(255,201,40,.45), 0 18px 36px rgba(8,0,30,.5)}
.cli:hover .cli-placa::after{transform:translateX(120%)}
.cli figcaption{display:grid; gap:1px; padding:0 4px}
.cli figcaption b{font-size:14px; font-weight:600; line-height:1.25}
.cli figcaption span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--amarillo)}

/* ===================== CONTACTO ===================== */
.contacto{display:grid; gap:18px}
.ct-botones{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .ct-botones{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ct-b{
  display:grid; gap:4px; justify-items:center; text-align:center;
  padding:18px 10px; border-radius:20px;
  background:var(--panel); border:1.5px solid var(--borde);
  transition:transform .16s, border-color .16s;
}
.ct-b:hover{transform:translateY(-3px); border-color:var(--amarillo)}
.ct-b > span{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--violeta); box-shadow:0 0 18px rgba(166,107,255,.55); margin-bottom:6px}
.ct-b.wa > span{background:var(--wa); color:#06301A; box-shadow:0 0 18px rgba(37,211,102,.45)}
.ct-b b{font-size:15px; font-weight:600}
.ct-b small{font-size:12px; color:var(--txt-3); word-break:break-all}

.ct-lugar{display:grid; gap:14px}
@media (min-width:860px){ .ct-lugar{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)} }
.ct-lugar .btn{justify-self:start; margin-top:8px}
.ct-mapa{min-height:280px; border-radius:var(--r-l); overflow:hidden; border:1.5px solid var(--borde)}
.ct-mapa iframe{width:100%; height:100%; min-height:280px; border:0; display:block}
.ct-redes{display:flex; flex-wrap:wrap; gap:18px 40px}
.ct-redes > div{display:grid; gap:10px}

/* ===================== 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:var(--panel); border:1px solid var(--borde)}
.hito b{font-size:26px; line-height:1.1; color:var(--amarillo)}
.hito span{font-size:13px; color:var(--txt-3)}

.nos-grid{display:grid; gap:14px}
@media (min-width:860px){ .nos-grid{grid-template-columns:1fr 1fr 0.8fr} }
.nos-card p{line-height:1.7}
.nos-card p b{color:#fff; font-weight:600}
.nos-logo{display:grid; place-items:center start; height:64px; margin-bottom:4px}
.nos-logo img{max-height:100%; width:auto}
.nos-logo.blanco{background:#fff; border-radius:14px; padding:10px 14px; justify-self:start}
.nos-sede{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--borde); display:grid}
.nos-sede img{width:100%; height:100%; max-height:420px; object-fit:cover}
.nos-sede figcaption{padding:10px 14px; font-size:12.5px; color:var(--txt-3); background:var(--panel)}

.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:600; font-size:15.5px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; float:right; color:var(--amarillo); 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)}

/* ===================== PÁGINA WEB ===================== */
.web-hd{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.web-hd > span{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--txt-2)}
.marco-web{
  position:relative; isolation:isolate;
  height:calc(100dvh - var(--barra) - var(--st) - var(--nav) - var(--sb) - 90px);
  min-height:420px;
  border-radius:var(--r-l); overflow:hidden;
  border:1.5px solid var(--borde-2); background:#fff; box-shadow:var(--sombra);
}
.marco-web iframe{width:100%; height:100%; border:0; display:block}
.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)}

/* ===================== 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(37,211,102,.5)}
.aviso-linea.mal{border-color:rgba(232,25,44,.6)}

.aviso{
  position:fixed; left:50%; bottom:calc(var(--nav) + var(--sb) + 22px); z-index:90;
  transform:translate(-50%,14px);
  padding:12px 20px; border-radius:999px;
  background:var(--amarillo); color:var(--txt-inv); font-size:14.5px; font-weight:600;
  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)}

/* ===================== 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(10,2,30,.75); backdrop-filter:blur(4px); opacity:0; transition:opacity .22s}
.modal.on .modal-velo{opacity:1}
.modal-caja{
  position:relative; z-index:1; width:min(390px,100%);
  display:grid; gap:14px; justify-items:center; text-align:center;
  padding:26px 22px 22px; border-radius:var(--r-l);
  background:linear-gradient(165deg,#3A1486,#1A0845 70%);
  border:1.5px solid rgba(166,107,255,.6);
  box-shadow:0 0 40px rgba(139,61,255,.4), var(--sombra-alta);
  transform:translateY(12px) scale(.97); opacity:0;
  transition:transform .22s, opacity .22s;
  max-height:90dvh; overflow-y:auto;
}
.modal-caja.ancho{width:min(900px,100%); padding:22px 16px 16px}
.modal.on .modal-caja{transform:none; opacity:1}
.modal-caja h3{font-size:21px; padding-inline:34px}
.modal-x{position:absolute; top:8px; right:8px; width:40px; height:40px}
.modal-lead{font-size:14.5px; font-weight:300; line-height:1.55; color:var(--txt-2)}
.modal-lead b{color:var(--amarillo)}

.qr{display:grid; place-items:center; padding:14px; border-radius:var(--r); background:#fff; box-shadow:0 0 0 4px var(--amarillo)}
.qr img,.qr svg{display:block; width:210px; height:210px; image-rendering:pixelated}
.qr-falla{font-size:14px; color:var(--txt-inv)}
.qr-url{font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--amarillo); 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(--amarillo); color:var(--txt-inv); box-shadow:0 0 24px rgba(255,201,40,.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(10,2,30,.65); 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:12px;
  padding:calc(14px + var(--st)) 16px calc(18px + var(--sb));
  background:linear-gradient(165deg,#3A1486,#1A0845 55%);
  border-right:1.5px solid rgba(166,107,255,.5);
  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; justify-content:space-between; gap:10px}
.menu-hd img{height:48px; width:auto}
.menu-lista{display:grid; gap:2px}
.menu-it{display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:12px; border-radius:var(--r-s); font-size:15px}
.menu-it:hover{background:var(--panel-2)}
.menu-it svg{color:var(--amarillo); flex:0 0 auto}
.menu-inst{margin-top:auto}
.menu-pie{font-size:12px; color:var(--txt-3); text-align:center; line-height:1.5}
.menu-ver{font-size:11px; color:var(--txt-3); text-align:center; letter-spacing:.08em}

.redes{display:flex; gap:9px; flex-wrap:wrap}
.menu-redes{justify-content:center}
.red{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--borde-2); color:var(--txt)}
.red:hover{background:var(--amarillo); color:var(--txt-inv); border-color:transparent}

/* ===================== BARRA INFERIOR (maqueta) ===================== */
.bnav{
  position:fixed; z-index:50;
  left:50%; bottom:calc(8px + var(--sb)); transform:translateX(-50%);
  width:min(560px, calc(100% - 16px)); height:var(--nav);
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center;
  padding:0 6px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(58,20,134,.92), rgba(30,10,82,.96));
  border:1.5px solid rgba(166,107,255,.5);
  box-shadow:0 0 26px rgba(139,61,255,.35), 0 10px 30px rgba(5,0,20,.6);
  backdrop-filter:blur(12px);
}
.bn-it{
  position:relative; display:grid; justify-items:center; gap:3px;
  padding:8px 2px 10px; color:var(--txt-2); font-size:11.5px;
}
.bn-it:hover{color:#fff}
.bn-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.bn-it.on{color:var(--amarillo)}
.bn-it.on::after{content:''; position:absolute; bottom:2px; width:34px; height:4px; border-radius:99px; background:var(--amarillo)}
/* En Vivo: círculo levantado en el centro */
.bn-it.centro{margin-top:-30px}
.bn-it.centro .bn-ico{
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #B57BFF, var(--violeta) 55%, #5A1CC8);
  border:2px solid rgba(220,200,255,.7);
  color:#fff;
  box-shadow:0 0 0 5px rgba(26,8,69,.9), 0 0 26px rgba(166,107,255,.8);
}
.bn-it.centro.on .bn-ico{background:radial-gradient(circle at 35% 30%, #FFE17A, var(--amarillo) 60%, #F2A900); color:var(--txt-inv); box-shadow:0 0 0 5px rgba(26,8,69,.9), 0 0 26px rgba(255,201,40,.7)}
.bn-it.centro.on::after{display:none}

/* ===================== PIE ===================== */
.foot{margin-top:24px; padding:26px 16px 22px; border-top:1px solid var(--borde); background:rgba(15,4,40,.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:18px; color:var(--amarillo)}
.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; font-weight:600}
.foot-marca span{font-size:11px; letter-spacing:.2em; color:var(--txt-3)}
.foot-ubic{margin-top:3px}
.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:8px 12px;
  max-width:var(--maxw); margin:22px auto 0; padding-top:18px;
  border-top:1px solid var(--borde);
  font-size:12.5px; color:var(--txt-2); text-align:center;
  transition:color .15s;
}
.foot-autor:hover{color:#fff}
.foot-autor img{height:28px; width:auto}
.foot-autor-web{font-weight:600; color:var(--amarillo)}


/* ===================== PANEL DE CONFIGURACIÓN ===================== */
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}

/* --- 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,#3A1486,#1E0A52 70%);
  border:1.5px solid rgba(166,107,255,.55);
  box-shadow:0 0 34px rgba(139,61,255,.35), var(--sombra);
}
.pn-simbolo{height:62px; width:auto; filter:drop-shadow(0 0 16px rgba(255,201,40,.35))}
.pn-login h2{font-size:clamp(24px,6vw,30px)}
.pn-login h2 em,.pn-hd h2 em{font-style:normal; color:var(--amarillo)}
.pn-login .lead{font-size:15px}
.pn-login .lead b{color:var(--amarillo)}
.pn-form{display:grid; gap:10px; width:100%; text-align:left}
.pn-lbl{font-size:13px; font-weight:600; color:var(--txt-2)}
.pn-input{
  width:100%; padding:14px 16px; border-radius:14px;
  font:inherit; font-size:16px; color:var(--txt);
  background:rgba(10,2,30,.55); border:1.5px solid var(--borde-2);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.pn-input:focus{border-color:var(--amarillo); box-shadow:0 0 0 4px rgba(255,201,40,.18)}
.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}

/* 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:#F4EEFF; border:2px solid rgba(255,201,40,.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(42,14,97,.2); border-top-color:#6A2BD9}
.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:var(--amarillo); font-weight:600; 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:600}
.pn-seguro{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--txt-3)}
.pn-seguro svg{color:var(--amarillo); 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:var(--amarillo)}
.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(92,40,190,.55), rgba(40,14,100,.8) 70%);
  border:1.5px solid rgba(166,107,255,.55);
  box-shadow:0 0 22px rgba(139,61,255,.3), var(--sombra);
  transition:transform .18s, box-shadow .18s;
}
a.pn-op:hover{transform:translateY(-3px); box-shadow:0 0 30px rgba(255,201,40,.35), var(--sombra-alta)}
.pn-op b{font-size:19px; font-weight:600; 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}
.pn-op.t-amarillo .pn-op-ico{background:radial-gradient(circle at 35% 30%, #FFE17A, var(--amarillo) 60%, #F2A900); color:#1A0845; box-shadow:0 0 24px rgba(255,201,40,.55)}
.pn-op.t-violeta .pn-op-ico{background:radial-gradient(circle at 35% 30%, #C79BFF, var(--violeta) 60%, #6420D8); color:#fff; box-shadow:0 0 24px rgba(166,107,255,.6)}
.pn-op-ir{display:inline-flex; align-items:center; gap:4px; font-style:normal; font-weight:600; color:var(--amarillo); margin-top:6px}
.pn-op.off{opacity:.55; filter:saturate(.6)}
.pn-pronto{justify-self:start; font-style:normal; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--borde-2); color:var(--txt-2); margin-top:6px}
.pn-estado-pub{display:flex; align-items:center; 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 svg{color:var(--amarillo); 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(30,10,80,.94); backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,201,40,.45);
  box-shadow:var(--sombra);
}
.pn-barra-txt{display:grid; gap:2px}
.pn-barra-txt b{font-size:15px}
.pn-sucio{color:var(--amarillo)}
.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.amarillo{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:var(--amarillo); flex:0 0 auto; margin-top:2px}
.pn-ayuda b{color:#fff; font-weight:600}

.pn-fichas{position:static; margin-bottom:0}
.pn-cuenta{
  font-style:normal; font-size:10.5px; font-weight:600; 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(26,8,69,.2)}
.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(120,70,230,.08); border:1.5px solid rgba(170,130,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; font-weight:600}
.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(10,2,30,.45); border:1.5px solid var(--borde);
  outline:none; transition:border-color .15s, box-shadow .15s, color .2s;
}
.pn-titulo:focus{border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(255,201,40,.2)}
.pn-titulo::placeholder{color:rgba(225,210,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(10,2,30,.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(--amarillo); box-shadow:0 0 0 3px rgba(255,201,40,.2)}
.pn-desc::placeholder{color:rgba(225,210,255,.32)}
.pn-fila:not(.activo) .pn-desc{opacity:.5}
.pn-fila.activo .pn-desc{border-color:rgba(255,201,40,.35); color:#fff}
.pn-sub{display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0}
.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:600}

/* 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(255,201,40,.16),rgba(139,61,255,.20));
  border-color:rgba(255,201,40,.7);
  box-shadow:0 0 0 1px rgba(255,201,40,.25), 0 0 22px rgba(255,201,40,.22);
}
.pn-fila.activo .pn-hora b{color:var(--amarillo)}
.pn-fila.activo .pn-titulo{border-color:rgba(255,201,40,.55); font-weight:600}
.pn-fila.activo .pn-pista{color:var(--amarillo)}
.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; -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:#CFC3EE; transition:transform .2s, background .2s;
}
.pn-sw input:checked + .pn-sw-caja{background:var(--amarillo); border-color:var(--amarillo); box-shadow:0 0 14px rgba(255,201,40,.6)}
.pn-sw input:checked + .pn-sw-caja i{transform:translateX(20px); background:#1A0845}
.pn-sw input:focus-visible + .pn-sw-caja{outline:3px solid var(--amarillo); outline-offset:3px}
.pn-sw-txt{font-size:13px; font-weight:600; width:86px; color:var(--txt-3)}
.pn-sw input:checked ~ .pn-sw-txt{color:var(--amarillo); text-shadow:0 0 12px rgba(255,201,40,.6)}

.pn-sw{flex:0 0 auto}
#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}
  .pn-barra-btns .btn{flex:1}
}

.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(--amarillo); width:18px; height:18px}

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


/* --- Tablero: opción del súper usuario y estado publicado --- */
.pn-op.t-super{border-color:rgba(255,201,40,.7); background:linear-gradient(160deg, rgba(255,201,40,.18), rgba(40,14,100,.85) 65%)}
.pn-op.t-super .pn-op-ico{background:radial-gradient(circle at 35% 30%, #FFE17A, var(--amarillo) 60%, #F2A900); color:#1A0845; box-shadow:0 0 24px rgba(255,201,40,.55)}
.pn-estado-pub{flex-direction:column; align-items:flex-start}
.pn-estado-pub span{display:flex; align-items:center; gap:8px}

/* --- Clientes --- */
.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:600;
  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(--amarillo); color:var(--txt-inv); border-color:transparent}
.pc-filtro.on i{background:rgba(26,8,69,.18)}
.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(120,70,230,.10); border:1.5px solid rgba(170,130,255,.25);
  transition:border-color .2s, box-shadow .2s;
}
.pc-item.perm{border-color:rgba(255,201,40,.55); box-shadow:0 0 18px rgba(255,201,40,.15)}
.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(166,107,255,.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:600; color:#4A1AA8}
.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(--violeta); color:#fff; opacity:.85;
}
.pc-logo.subiendo::after{
  content:''; position:absolute; inset:0; background:rgba(255,255,255,.7) center / 34px no-repeat;
  animation:parpadeo 1s ease-in-out infinite;
}
@keyframes parpadeo{50%{opacity:.4}}

.pc-datos{display:grid; gap:8px; min-width:0}
.pc-fila2{display:grid; grid-template-columns:150px minmax(0,1fr); 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; font-size:12px; font-weight:600; color:var(--txt-3)}
.pc-fechas label{min-width:0}
.pc-fechas input{color-scheme:dark; min-width:0; width:100%}
.pc-datos .pn-titulo{min-width:0}
.pc-item > *{min-width:0}
.pc-perm{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:9px 12px; border-radius:12px;
  background:rgba(10,2,30,.35); border:1px solid var(--borde);
  font-size:13.5px; color:var(--txt-2); line-height:1.35;
}
.pc-perm input{accent-color:var(--amarillo); width:20px; height:20px; margin:0; flex:0 0 auto}
.pc-perm b{color:#fff; font-weight:600}
.pc-item.perm .pc-perm{border-color:rgba(255,201,40,.55); background:rgba(255,201,40,.10)}
.pc-item.perm .pc-perm b{color:var(--amarillo)}

.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:600;
  border:1px solid transparent;
}
.pc-estado.e-vigente{background:rgba(37,211,102,.14); color:#7FE3A8; border-color:rgba(37,211,102,.4)}
.pc-estado.e-permanente{background:rgba(255,201,40,.16); color:var(--amarillo); border-color:rgba(255,201,40,.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)}
.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:640px){
  .pc-item{grid-template-columns:minmax(0,1fr)}
  .pc-logo{width:min(220px,100%)}
  .pc-fila2{grid-template-columns:120px minmax(0,1fr)}
}
@media (max-width:420px){ .pc-fechas{grid-template-columns:minmax(0,1fr)} }

/* --- Usuarios --- */
.pu-form{
  display:grid; gap:12px; padding:18px; border-radius:18px;
  background:linear-gradient(140deg, rgba(255,201,40,.12), rgba(139,61,255,.16));
  border:1.5px solid rgba(255,201,40,.45);
}
.pu-form h3{display:flex; align-items:center; gap:8px; font-size:17px}
.pu-form h3 svg{color:var(--amarillo)}
.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:600; 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(255,201,40,.6); background:rgba(255,201,40,.10)}
.pu-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--violeta); flex:0 0 auto}
.pu-super .pu-ico{background:var(--amarillo); color:var(--txt-inv)}
.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:var(--amarillo); 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; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}