body.sala-premium-visual{--sp-noche:#050d27;--sp-azul:#071a45;--sp-oro:#ffd37d;--sp-cian:#45dcff;--sp-tinta:#f8f3e8;background:var(--sp-noche);overflow-x:hidden}
body.sala-premium-visual #sp-velo,body.sala-premium-visual #sp-rayo,body.sala-premium-visual #sp-marco,body.sala-premium-visual #sp-polvo{display:none!important}
body.sala-premium-visual .fm-horizonte{background:#050d27;border-bottom:1px solid rgba(255,211,125,.18)}
body.sala-premium-visual .fm-migas{display:none}
body.sala-premium-visual .fm-banda{position:relative;min-height:clamp(690px,42vw,880px);padding-bottom:80px;background-color:#06132f;background-image:linear-gradient(90deg,rgba(2,8,28,.96) 0%,rgba(3,11,32,.8) 40%,rgba(3,11,32,.12) 72%),url('https://i.imgur.com/Hpd9k2s.jpg');background-size:cover;background-position:center}
body.sala-premium-visual .fm-banda-grid{position:relative;display:block;max-width:1440px;min-height:clamp(560px,34vw,700px);padding-right:48%;z-index:1}
body.sala-premium-visual .sp-corona{width:64px;margin-bottom:12px}
/* El brillo dorado que sigue al cursor (fondo degradado + color:transparent
   y la fuente serif) vive en includes/sala.css — aquí solo se escala el
   titular al tamaño de gran cabecera que pide esta piel, sin tapar ese
   brillo con un color plano. */
body.sala-premium-visual .fm-banda h1.sp-marca{max-width:none}
body.sala-premium-visual .sp-nombre{font-size:clamp(3.2rem,6vw,6.2rem);line-height:.96;letter-spacing:-.01em}
body.sala-premium-visual .fm-banda-subt{font-family:var(--f-display);color:var(--sp-oro);font-size:clamp(1.4rem,2vw,2.15rem);font-weight:750}
body.sala-premium-visual .fm-banda-parrafo{max-width:58ch;color:#eef4ff;font-size:1.05rem;line-height:1.65}
/* Se dimensiona por ALTURA, no por ancho: es un retrato muy vertical
   (1024×1536) y escalarlo con vw lo hacía tan alto en pantallas anchas
   que la cabeza quedaba por encima de la banda, cortada. Por altura
   se queda siempre dentro de la banda, sea del ancho que sea. */
body.sala-premium-visual .sp-fran-hero{
  position:absolute;right:-3%;bottom:-40px;
  width:auto;height:82%;max-height:760px;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 28px 35px rgba(0,0,0,.52));z-index:-1;
}
body.sala-premium-visual .sp-chapa{border-color:rgba(255,211,125,.5);background:rgba(5,13,39,.65);color:var(--sp-oro)}
body.sala-premium-visual .fm-buscar{background:#fff;border-radius:999px;padding:5px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
body.sala-premium-visual .fm-buscar input{background:#fff;color:#17234a;border-radius:999px 0 0 999px}
body.sala-premium-visual .fm-buscar button,body.sala-premium-visual .bigbtn{background:linear-gradient(135deg,#ffe39a,#e6ad40);color:#17203e;border:0;border-radius:999px;font-weight:900}
body.sala-premium-visual .bigbtn.ghost{background:rgba(5,13,39,.62);color:#fff;border:1px solid var(--sp-oro)}
body.sala-premium-visual main{background:linear-gradient(180deg,#071738,#06142f 52%,#091b3d);color:#fff}
body.sala-premium-visual .fm-seccion,body.sala-premium-visual .sp-mundos,body.sala-premium-visual .sp-herramientas,body.sala-premium-visual .fm-premium{padding:70px var(--gutter)}
body.sala-premium-visual .shead{max-width:1440px;margin:0 auto 28px}
body.sala-premium-visual .shead h2{
  margin:0;color:#fff;font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.1rem,3.2vw,3.15rem);letter-spacing:-.03em;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}
body.sala-premium-visual .shead h2 span{
  display:inline-block;margin-right:.08em;color:var(--sp-oro);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--sp-oro) 55%,transparent));
}
body.sala-premium-visual .shead p{color:#b9c8e8}
body.sala-premium-visual .fm-mosaico{max-width:1440px;margin:auto}
body.sala-premium-visual .cat{min-height:230px;border:1px solid rgba(255,211,125,.22);border-radius:24px;background:linear-gradient(145deg,rgba(22,49,96,.95),rgba(10,22,57,.95));box-shadow:0 22px 42px rgba(0,0,0,.25)}
body.sala-premium-visual .sp-mundos{background:#06132f}
body.sala-premium-visual .sp-mundos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1440px;margin:auto}
body.sala-premium-visual .sp-mundos-grid a{position:relative;min-height:390px;overflow:hidden;border:1px solid rgba(255,211,125,.28);border-radius:24px;color:#fff;text-decoration:none;box-shadow:0 20px 45px rgba(0,0,0,.26)}
body.sala-premium-visual .sp-mundos-grid img{position:absolute;inset:0;width:300%;height:100%;object-fit:cover}
body.sala-premium-visual .sp-mundos-grid a:nth-child(1) img{left:0}
body.sala-premium-visual .sp-mundos-grid a:nth-child(2) img{left:-100%}
body.sala-premium-visual .sp-mundos-grid a:nth-child(3) img{left:-200%}
body.sala-premium-visual .sp-mundos-grid a::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(3,9,28,.97))}
body.sala-premium-visual .sp-mundos-grid a div{position:absolute;left:24px;right:24px;bottom:24px;z-index:1}
body.sala-premium-visual .sp-mundos-grid h3{margin:0 0 8px;font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;font-size:1.55rem;color:#fff}
body.sala-premium-visual .sp-mundos-grid p{margin:0 0 14px;color:#e4ebff;line-height:1.45}
body.sala-premium-visual .sp-mundos-grid strong{color:var(--sp-oro)}
body.sala-premium-visual .sp-herramientas{background:linear-gradient(180deg,#081c42,#06132f)}
body.sala-premium-visual .sp-herramientas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1440px;margin:auto}
body.sala-premium-visual .sp-herramientas-grid a{overflow:hidden;border-radius:22px;background:#f8f3e8;color:#101a3d;text-decoration:none;box-shadow:0 22px 42px rgba(0,0,0,.24)}
body.sala-premium-visual .sp-herramientas-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
body.sala-premium-visual .sp-herramientas-grid div{padding:20px 22px 24px}
body.sala-premium-visual .sp-herramientas-grid h3{margin:0 0 8px;font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;font-size:1.45rem;color:#101a3d}
body.sala-premium-visual .sp-herramientas-grid p{min-height:44px;margin:0 0 14px;color:#506080}
body.sala-premium-visual .sp-herramientas-grid strong{color:#725111}
body.sala-premium-visual .fm-premium{background:linear-gradient(135deg,#071837,#161243 58%,#382049)}
body.sala-premium-visual footer.fm-pie{min-height:360px;padding-top:235px;background:#050d27 url('https://i.imgur.com/LUZXUdG.jpg') center/cover no-repeat}
body.sala-premium-visual .fm-pie-contenido{background:rgba(3,9,27,.78);backdrop-filter:blur(8px);border-radius:18px;padding:20px}
@media(max-width:1000px){body.sala-premium-visual .fm-banda-grid{padding-right:40%}body.sala-premium-visual .sp-fran-hero{right:-8%;height:78%}body.sala-premium-visual .sp-herramientas-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){body.sala-premium-visual .fm-banda{min-height:0;padding-bottom:50px;background-position:62% center}body.sala-premium-visual .fm-banda-grid{padding-right:0}body.sala-premium-visual .sp-nombre{font-size:clamp(3.6rem,18vw,5.2rem)}body.sala-premium-visual .sp-fran-hero{position:relative;right:auto;bottom:-52px;width:min(100%,480px);margin:-10px auto 0;display:block}body.sala-premium-visual .sp-mundos-grid,body.sala-premium-visual .sp-herramientas-grid{grid-template-columns:1fr}body.sala-premium-visual .sp-mundos-grid a{min-height:340px}body.sala-premium-visual .fm-seccion,body.sala-premium-visual .sp-mundos,body.sala-premium-visual .sp-herramientas,body.sala-premium-visual .fm-premium{padding:48px var(--gutter)}body.sala-premium-visual .am-aura{left:50%;right:auto;bottom:10px;width:min(70%,320px);translate:-50% 0}}

/* ================================================================
   VIDA — animaciones propias sobre las ilustraciones ya existentes
   (mascota, fondos y tarjetas de categoria), igual que en Oposiciones,
   El Aula de Fran y Aula Virtual. Prefijo am- y apagado bajo
   prefers-reduced-motion al final de este bloque.
   ================================================================ */

/* Aura que respira detrás de la mascota */
body.sala-premium-visual .am-aura{
  position:absolute;z-index:-2;right:6%;bottom:40px;width:34vw;max-width:360px;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,211,125,.32),rgba(69,220,255,.16) 55%,transparent 72%);
  filter:blur(10px);animation:am-respira 4.5s ease-in-out infinite;
}
@keyframes am-respira{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.09}}
@media(max-width:1000px){body.sala-premium-visual .am-aura{right:0;width:42vw}}

/* La mascota respira, se balancea un poco y reacciona al raton
   (JS le pone --mx/--my via transform). */
body.sala-premium-visual .sp-fran-hero{
  --mx:0px;--my:0px;
  translate:var(--mx) var(--my);
  transition:translate .4s cubic-bezier(.2,.8,.2,1);
}
body.sala-premium-visual .sp-fran-hero.am-vivo{animation:am-hero 7s ease-in-out infinite!important}
@keyframes am-hero{
  0%,100%{transform:translateY(0) rotate(-.7deg) scale(1)}
  50%{transform:translateY(-8px) rotate(.8deg) scale(1.012)}
}

/* Motas/chispas doradas alrededor de la mascota */
body.sala-premium-visual .am-chispas{position:absolute;inset:0;z-index:-1;overflow:visible;pointer-events:none}
body.sala-premium-visual .am-chispa{
  position:absolute;width:6px;height:6px;background:#ffd37d;opacity:0;
  clip-path:polygon(50% 0,63% 38%,100% 50%,63% 62%,50% 100%,37% 62%,0 50%,37% 38%);
  animation:am-sube linear infinite;animation-delay:var(--rd,0s);
  animation-duration:var(--du,6s);left:var(--lx,50%);bottom:var(--ly,10%);
}
@keyframes am-sube{
  0%{opacity:0;transform:translateY(0) scale(.5) rotate(0deg)}
  14%{opacity:1}
  75%{opacity:.8}
  100%{opacity:0;transform:translateY(-150px) scale(1.15) rotate(160deg)}
}

/* Ken Burns muy suave en los dos fondos ilustrados grandes */
body.sala-premium-visual .fm-banda{animation:am-panea 22s ease-in-out infinite alternate}
body.sala-premium-visual footer.fm-pie{animation:am-panea 26s ease-in-out infinite alternate}
@keyframes am-panea{
  0%{background-position:46% center}
  100%{background-position:54% center}
}

/* Destello ambiental propio de cada tarjeta de categoria */
body.sala-premium-visual .cat .am-destello{
  position:absolute;top:14px;left:16px;width:9px;height:9px;z-index:1;pointer-events:none;
  background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  opacity:0;animation:am-destella 5s ease-in-out infinite;animation-delay:var(--dd,0s);
}
@keyframes am-destella{0%,78%,100%{opacity:0;scale:.6}84%{opacity:.9;scale:1}90%{opacity:0;scale:.6}}
body.sala-premium-visual .fm-mosaico > :nth-child(1) .am-destello{--dd:.2s}
body.sala-premium-visual .fm-mosaico > :nth-child(2) .am-destello{--dd:1.1s}
body.sala-premium-visual .fm-mosaico > :nth-child(3) .am-destello{--dd:2s}

@media (prefers-reduced-motion:reduce){
  body.sala-premium-visual .am-aura,body.sala-premium-visual .sp-fran-hero.am-vivo,body.sala-premium-visual .am-chispa,
  body.sala-premium-visual .fm-banda,body.sala-premium-visual footer.fm-pie,body.sala-premium-visual .am-destello{animation:none}
  body.sala-premium-visual .sp-fran-hero{transition:none}
}