/* Cristal líquido + border beam — pensado para no costar rendimiento:
   · backdrop-filter SOLO en la barra superior y en los modales abiertos (pocos elementos);
   · el resto del "cristal" son gradientes translúcidos, bordes finos y reflejos internos (sin blur);
   · el beam anima únicamente `transform` (GPU), se pausa fuera de pantalla, con un modal abierto, en pestaña oculta y con "reducir movimiento". */
:root{--glass-hi:rgba(255,255,255,.55);--glass-lo:rgba(255,255,255,.08);--glass-edge:rgba(255,255,255,.38);--beam-a:#C4EAF2;--beam-b:#2E56A6;--beam-c:#C8A46B}
html[data-theme=dark]{--glass-hi:rgba(196,234,242,.30);--glass-lo:rgba(196,234,242,.05);--glass-edge:rgba(196,234,242,.30);--beam-b:#C4EAF2;--beam-a:#C8A46B}

/* ---- cristal: superficies ---- */
.topbar{backdrop-filter:blur(18px) saturate(1.6)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6)!important}
.dialog.sheet,.dialog.introDlg,.dialog{box-shadow:0 30px 90px rgba(10,20,50,.45),inset 0 1px 0 var(--glass-edge)}
.dialog::backdrop{backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
html[data-theme=light] .episode,html[data-theme=light] .acadCard,html[data-theme=light] .progCard,html[data-theme=light] .toolCard,html[data-theme=light] .tabPanel{
  background:linear-gradient(160deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 38%,rgba(214,185,139,.55) 100%),#D6B98B!important;
  border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(19,36,74,.06),0 14px 34px rgba(19,36,74,.12)}
html[data-theme=dark] .episode,html[data-theme=dark] .acadCard,html[data-theme=dark] .progCard,html[data-theme=dark] .toolCard,html[data-theme=dark] .tabPanel{
  background:linear-gradient(160deg,rgba(196,234,242,.22) 0%,rgba(196,234,242,.05) 40%,rgba(46,86,166,.55) 100%),#2E56A6!important;
  border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 rgba(196,234,242,.35),0 16px 40px rgba(0,0,0,.28)}
.videoCard,.cm,.epCard{box-shadow:inset 0 1px 0 var(--glass-edge),0 14px 34px rgba(10,20,50,.28)}
/* reflejo líquido sobre las tarjetas con foto (capa estática, sin animar) */
.libraryGrid.fac .videoCard>.topMeta .contentTag,.libraryGrid.fac .videoCard>.topMeta .aspectTag,.epCard .contentTag,.epCard .aspectTag,.cmTag,.vfTag{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06)),rgba(19,36,74,.62)!important;border:1px solid var(--glass-edge)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.cardPlay{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(232,215,181,.75))!important;box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(10,20,50,.35)!important}
.btn.secondary,.hero .btn.secondary,.btn.ghost,.epNav,.epMode,.tabBtn,.gradeLadder li,.ux-chip{
  background-image:linear-gradient(180deg,var(--glass-hi),var(--glass-lo))!important;box-shadow:inset 0 1px 0 var(--glass-edge)}
.btn.primary,.btn.accent{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 12px 26px rgba(19,36,74,.28)}
.availability{background-image:linear-gradient(180deg,var(--glass-hi),var(--glass-lo))!important;border:1px solid var(--glass-edge)!important}

/* ---- border beam ---- */
.hasBeam{position:relative}
.beam{position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:var(--beam-w,1.5px);z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);overflow:hidden;contain:strict}
.beam i{position:absolute;left:50%;top:50%;width:max(280%,520px);aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--beam-a) 78%,var(--beam-b) 90%,transparent 100%);
  animation:beamSpin var(--beam-t,7s) linear infinite;animation-play-state:paused;will-change:transform}
.beam.run i{animation-play-state:running}
@keyframes beamSpin{to{transform:rotate(360deg)}}
body:has(dialog[open]) .beam i{animation-play-state:paused}
.libraryGrid.fac .videoCard .beam{--beam-w:2px;opacity:.0;transition:opacity .35s}
.libraryGrid.fac .videoCard:hover .beam,.libraryGrid.fac .videoCard:focus-visible .beam{opacity:1}
@media (hover:none){.libraryGrid.fac .videoCard .beam{opacity:.9}}
.btn.hasBeam{overflow:visible}
@media (prefers-reduced-motion:reduce){.beam i{animation:none;transform:rotate(40deg)}.libraryGrid.fac .videoCard .beam{opacity:.85}}
.epNav,.ux-chip,.epMode,.episode .epNav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* beam más visible: arco más largo y brillante, anillo de 2.5px */
.beam{--beam-w:2.5px}
.beam i{background:conic-gradient(from 0deg,transparent 0 50%,var(--beam-a) 70%,#fff 86%,var(--beam-b) 94%,transparent 100%);animation-duration:var(--beam-t,5.5s)}
.libraryGrid.fac .videoCard .beam{--beam-w:3px}

/* pastilla del intro: mismo texto oscuro sobre beige en claro y en oscuro (contraste AA fijo) */
.introNote{background:#D6B98B;color:#13244A!important}
.introNote strong{color:#13244A!important}
.introNote span{color:#13244A!important}

/* etiquetas sobre fotos: solo texto (sin caja, borde ni fondo); sombra suave para legibilidad */
.videoCard .contentTag,.videoCard .aspectTag,.epCard .contentTag,.epCard .aspectTag,.cmTag,.vfTag,
.libraryGrid.fac .videoCard>.topMeta .contentTag,.libraryGrid.fac .videoCard>.topMeta .aspectTag{
  background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;
  color:#fff!important;text-shadow:0 1px 2px rgba(10,20,45,.85),0 0 14px rgba(10,20,45,.7)}
.videoCard .topMeta,.epCard .topMeta{gap:14px}
.vfTag{left:18px}

/* logos del footer: más grandes y legibles */
.footLogo{gap:28px;align-items:center}
.footLogo img{height:clamp(96px,11vw,150px)!important;width:auto!important;object-fit:contain}
.footLogo img+img{height:clamp(120px,14vw,190px)!important}
@media(max-width:700px){.footLogo img{height:96px!important}.footLogo img+img{height:124px!important}}