/* ================================================================
   FRAN96MC.ES — includes/sala.css
   PIEL de la Sala Premium, dirección «Horizonte», tema medianoche
   (Fase 5). Deriva de includes/aula.css (mismo esqueleto: horizonte,
   banda, mosaico, premium, pie, modales, explorador, buscador, login,
   siteModal, resAdmin, toast, asistente, móvil, reducido) pero consume
   SIEMPRE los tokens del tema [data-tema="medianoche"] (--sup-*,
   --tx-*, --acento-*) en vez de los del tema claro.

   Encima de esa base compartida va la identidad propia de la Sala
   (medianoche + oro), que NO es la piel de las cuatro aulas:
     · Título "Sala Premium" en serif (Georgia), con corona SVG, filete
       dorado y un reflejo que sigue al cursor.
     · Fondo con foco cenital y grano finísimo (sin animar: cuesta caro
       en repintado y aquí no aporta nada que el foco no dé ya).
     · Marco dorado a los cuatro bordes de la pantalla (#sp-marco).
     · Apertura de un solo disparo: velo (#sp-velo) + rayo (#sp-rayo)
       que cruza la escena. Polvo de oro en suspensión (#sp-polvo).

   Solo tokens: cero hex/oklch/rgb literales aquí. Los colores de
   identidad salen de las primitivas --oro-sala, --oro-sala-2, --hueso*,
   --n-950/975 y de la capa semántica --sup-*/--tx-*/--acento-* del
   tema medianoche (includes/tokens.css los define en la sección 4).
   Dos variables locales de tipografía (--sp-serif, --sp-ui) no son
   color, así que no rompen esa regla.
   ================================================================ */

/* ----------------------------------------------------------------
   0) BASE
   ---------------------------------------------------------------- */
html[data-tema="medianoche"]{
  color-scheme:dark;
  --sp-serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sp-ui:'Manrope','Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-tema="medianoche"] body{
  background:var(--sup-0);
  color:var(--tx-1);
  font-family:var(--sp-ui);
  font-size:var(--t-md);
  line-height:var(--lh-texto);
  -webkit-font-smoothing:antialiased;
}
html[data-tema="medianoche"] ::selection{background:var(--acento-suave);color:var(--tx-1)}
html[data-tema="medianoche"] h2,
html[data-tema="medianoche"] h3{
  font-family:var(--f-display);
  line-height:var(--lh-ajustada);
  letter-spacing:var(--tr-ajustado);
  color:var(--tx-1);
  margin:0;
}
html[data-tema="medianoche"] p,
html[data-tema="medianoche"] li,
html[data-tema="medianoche"] label,
html[data-tema="medianoche"] input,
html[data-tema="medianoche"] textarea,
html[data-tema="medianoche"] select{font-family:var(--sp-ui)}
a{color:inherit}
html[data-tema="medianoche"] :focus-visible{outline:3px solid var(--foco);outline-offset:2px}
html[data-tema="medianoche"] .fm-cifra{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

.sr-solo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.fm-salto{
  position:fixed;left:1rem;top:-100px;z-index:var(--z-tooltip);
  padding:.7rem 1rem;background:var(--sup-1);border:3px solid var(--acento-tx);color:var(--tx-1);
  font-size:.75rem;text-decoration:none;transition:top var(--dur-2) var(--ease-out);
}
.fm-salto:focus,.fm-salto:focus-visible{top:1rem;outline:2px solid var(--tx-1);outline-offset:2px}

.bigbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:13px 26px;border-radius:var(--r-1);
  font-family:var(--f-display);font-size:.95rem;font-weight:600;
  text-decoration:none;color:var(--n-950);
  background:linear-gradient(160deg,var(--oro-sala-2),var(--oro-sala) 60%,color-mix(in srgb,var(--oro-sala) 70%,var(--n-950)));
  border:1px solid color-mix(in srgb,var(--oro-sala) 60%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--oro-sala) 22%,transparent);
  transition:transform var(--dur-2) var(--ease-out-quart),
             box-shadow var(--dur-2) var(--ease-out-quart),
             filter var(--dur-2) var(--ease-out-quart);
}
.bigbtn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 42px color-mix(in srgb,var(--oro-sala) 32%,transparent)}
.bigbtn:active{transform:translateY(0)}
.bigbtn:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.bigbtn.ghost{color:var(--acento-tx);background:transparent;border-color:var(--acento-borde);box-shadow:none}
.bigbtn.ghost:hover{background:var(--acento-suave);box-shadow:0 10px 30px color-mix(in srgb,var(--n-950) 40%,transparent)}
.bigbtn:disabled{opacity:.5;cursor:default;transform:none}

/* ----------------------------------------------------------------
   1) HORIZONTE — misma franja de cielo pixel que las aulas.
   ---------------------------------------------------------------- */
.fm-horizonte{
  position:relative;
  height:clamp(84px,9vw,112px);
  overflow:hidden;
  background:var(--cielo-1);
  isolation:isolate;
}
.fm-horizonte .fm-h-cielo{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:720px){.fm-horizonte{height:96px}}

/* ----------------------------------------------------------------
   2) BANDA — la puerta de la sala. En vez del color plano de un aula,
   aquí es la propia medianoche (--acento-banda del tema) con el
   nombre en oro y serif, corona, filete y una chapa de socio.
   ---------------------------------------------------------------- */
.fm-banda{
  position:relative;overflow:hidden;
  background:var(--acento-banda);
  color:var(--tx-1);
  padding:var(--e-4) var(--gutter) calc(var(--e-4) + 16px);
  text-align:center;
}
/* El salón: foco cenital muy suave y grano finísimo, estático (no se
   anima: en un fondo grande, animar el ruido cuesta caro de repintar
   y el foco ya da vida de sobra). */
.fm-banda::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,color-mix(in srgb,var(--oro-sala) 16%,transparent) 0%,transparent 62%);
}
.fm-banda::after{
  content:"";position:absolute;inset:-40% -10%;z-index:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.3'/></svg>");
}
.fm-banda-escalon{
  position:absolute;left:0;right:0;bottom:-16px;height:16px;pointer-events:none;z-index:1;
  background:
    repeating-linear-gradient(90deg,var(--acento-banda) 0 var(--escalon),transparent var(--escalon) calc(var(--escalon) * 2)) 0 0/calc(var(--escalon) * 2) var(--escalon),
    repeating-linear-gradient(90deg,var(--acento-banda) 0 var(--escalon),transparent var(--escalon) calc(var(--escalon) * 2)) var(--escalon) var(--escalon)/calc(var(--escalon) * 2) var(--escalon),
    repeating-linear-gradient(90deg,var(--acento-banda) 0 calc(var(--escalon) / 2),transparent calc(var(--escalon) / 2) calc(var(--escalon) * 2)) 0 calc(var(--escalon) * 2)/calc(var(--escalon) * 2) var(--escalon),
    repeating-linear-gradient(90deg,var(--acento-banda) 0 calc(var(--escalon) / 2),transparent calc(var(--escalon) / 2) calc(var(--escalon) * 2)) var(--escalon) calc(var(--escalon) * 3)/calc(var(--escalon) * 2) var(--escalon);
}
.fm-migas{position:relative;z-index:1;margin:0 auto var(--e-2);max-width:var(--ancho-max);display:flex;justify-content:center}
.fm-migas ol{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;margin:0;padding:0;list-style:none;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--tx-3)}
.fm-migas a{color:var(--tx-2);text-decoration:none;border-radius:var(--r-1);padding:.15rem .3rem}
.fm-migas a:hover,.fm-migas a:focus-visible{background:var(--acento-suave);color:var(--acento-tx)}
.fm-migas [aria-current="page"]{color:var(--tx-1);font-weight:700}

.fm-banda-grid{position:relative;z-index:1;max-width:var(--ancho-max);margin:0 auto}

/* La corona: dibujada a mano, no un emoji. Tamaño fijo y pequeño: la
   banda no es una portada, es una cabecera que hay que poder pasar
   rápido. */
.sp-corona{display:block;width:56px;margin:0 auto var(--e-1)}
.sp-corona svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 14px color-mix(in srgb,var(--oro-sala) 35%,transparent))}

.fm-banda h1.sp-marca{
  margin:0 auto;max-width:16ch;position:relative;
  font-family:var(--sp-serif);font-weight:400;
  font-size:clamp(1.6rem,.9rem + 2vw,2.5rem);line-height:1.05;
  letter-spacing:.05em;text-transform:uppercase;
}
h1.sp-marca .sp-nombre{
  display:block;position:relative;
  background:linear-gradient(103deg,
    color-mix(in srgb,var(--oro-sala) 55%,var(--n-950)) 0%,var(--oro-sala) 26%,var(--oro-sala-2) 42%,
    var(--oro-sala) 58%,color-mix(in srgb,var(--oro-sala) 55%,var(--n-950)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px color-mix(in srgb,var(--oro-sala) 25%,transparent));
}
/* Reflejo que sigue al cursor (la mano de includes/sala-premium/index.html
   mueve --mx/--my en pointermove): parece metal bajo una luz, no un
   dibujo plano. */
h1.sp-marca{--mx:50%;--my:40%}
h1.sp-marca .sp-nombre::after{
  content:attr(data-t);position:absolute;inset:0;
  background:radial-gradient(120px 90px at var(--mx) var(--my),color-mix(in srgb,var(--oro-sala-2) 92%,white) 0%,color-mix(in srgb,var(--oro-sala-2) 45%,transparent) 42%,transparent 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.px-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:var(--e-1) auto 0;max-width:420px}
.px-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--acento-borde),transparent)}
.px-rule span{width:7px;height:7px;font-size:0;line-height:0;display:inline-block;
  border:1px solid var(--acento-tx);background:var(--acento-suave);transform:rotate(45deg);opacity:.85}

.fm-banda-subt{font-family:var(--sp-ui);font-weight:600;font-size:var(--t-md);
  margin:var(--e-1) auto 0;max-width:52ch;color:var(--tx-2)}
.fm-banda-parrafo{max-width:70ch;margin:var(--e-1) auto 0;font-size:var(--t-md);line-height:var(--lh-texto);color:var(--tx-2)}

/* Chapa de socio: dice de un vistazo si esta cuenta ya tiene acceso.
   Chip normal, en caja baja — no es un rótulo de sistema. */
.sp-chapa{
  display:inline-flex;align-items:center;gap:9px;margin:var(--e-1) auto 0;
  padding:6px 16px;border-radius:var(--r-pill);
  border:1px solid var(--acento-borde);background:var(--acento-suave);
  font-family:var(--sp-ui);font-size:.8rem;font-weight:600;
  color:var(--acento-tx);
}
.sp-chapa i{width:6px;height:6px;border-radius:50%;background:var(--acento-tx);box-shadow:0 0 0 4px var(--acento-suave)}
.sp-chapa.dentro{color:var(--exito);border-color:color-mix(in srgb,var(--exito) 40%,transparent);background:var(--exito-suave)}
.sp-chapa.dentro i{background:var(--exito);box-shadow:0 0 0 4px var(--exito-suave)}

/* Cifras: UNA línea en Fira Code bajo el párrafo, como en el piloto.
   Nada de números enormes ni de filetes verticales: eso es el patrón
   "hero-metric" que el sistema prohíbe. */
.fm-cifras{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-4);margin:var(--e-1) 0 0;
  padding:0;list-style:none;
  font-family:var(--f-mono);font-size:var(--t-sm);color:var(--tx-2);
}
.fm-cifra{font-family:var(--f-mono);font-weight:700;color:var(--acento-tx);font-variant-numeric:tabular-nums}

.fm-banda-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-3);align-items:center;margin-top:var(--e-2)}
.fm-buscar{display:flex;max-width:26rem;flex:1 1 260px}
.fm-buscar input{
  flex:1;min-height:44px;padding:0 var(--e-4);border:1px solid var(--sup-borde-2);
  background:var(--sup-1);color:var(--tx-1);
  border-radius:var(--r-1) 0 0 var(--r-1);font-family:var(--sp-ui);font-size:var(--t-md);
}
.fm-buscar input::placeholder{color:var(--tx-3)}
.fm-buscar button{
  min-height:44px;min-width:44px;border:1px solid var(--sup-borde-2);border-left:0;
  background:var(--acento-tx);color:var(--n-950);border-radius:0 var(--r-1) var(--r-1) 0;cursor:pointer;
}
.fm-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-3)}

/* La corona grande de la derecha (solo si la página añade
   .fm-banda-imagen; hoy la banda de la Sala centra el texto). */
.fm-banda-imagen{position:relative;z-index:1;display:flex;justify-content:center;margin-top:var(--e-6)}
.fm-banda-imagen svg{width:min(46vw,180px);filter:drop-shadow(0 20px 32px color-mix(in srgb,var(--n-950) 45%,transparent))}

.fm-seccion{padding:var(--e-8) 0 0}
.shead{max-width:var(--ancho-max);margin:0 auto;padding:0 var(--gutter);text-align:center}
.shead h2{font-family:var(--sp-serif);font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);
  letter-spacing:.02em;margin:0;color:var(--tx-1)}
.shead p{margin:var(--e-2) 0 0;color:var(--tx-2);font-size:var(--t-md)}

/* ----------------------------------------------------------------
   3) MOSAICO — igual render que el piloto (bloques .cat con glifo,
   nombre y cifra), en medianoche: panel oscuro, franja de color de la
   categoría arriba, halo dorado al pasar.
   ---------------------------------------------------------------- */
.fm-mosaico{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(8.5rem,auto);grid-auto-flow:dense;
  gap:12px;max-width:var(--ancho-max);margin:0 auto;padding:var(--e-6) var(--gutter);list-style:none;
}
.cat{
  --cc-tx:var(--tx-1);
  position:relative;overflow:hidden;isolation:isolate;
  grid-column:span 3;min-height:8.5rem;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--e-4) + 4px) var(--e-4) var(--e-4);
  border-radius:var(--r-2);border:1px solid var(--sup-borde);cursor:pointer;
  background:var(--sup-1);color:var(--tx-1);text-decoration:none;
  transition:border-color var(--dur-2) var(--ease-out-quart),box-shadow var(--dur-2) var(--ease-out-quart),transform var(--dur-2) var(--ease-out-quart);
}
.cat::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:1;background:var(--cc,var(--acento-tx))}
.cat::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(160px 120px at 50% 0%,color-mix(in srgb,var(--cc,var(--oro-sala)) 20%,transparent),transparent 70%);
  transition:opacity var(--dur-2) var(--ease-out-quart);
}
.cat--l{grid-column:span 4}
.cat--xl{grid-column:span 6;grid-row:span 2}
.cat:hover,.cat:focus-visible{border-color:var(--acento-borde);box-shadow:var(--halo-acento);transform:translateY(-2px)}
.cat:hover::after,.cat:focus-visible::after{opacity:1}
.cat:focus-visible{outline:3px solid var(--foco);outline-offset:-3px}
.cat-glifo{
  position:relative;z-index:1;margin-bottom:var(--e-3);
  width:26px;height:26px;display:grid;place-items:center;font-size:18px;
  transition:transform var(--dur-1) var(--ease-out-quart);
}
.cat:hover .cat-glifo,.cat:focus-visible .cat-glifo{transform:translate(2px,-2px)}
.cat-lock{position:absolute;top:var(--e-3);right:var(--e-3);z-index:1;color:var(--acento-tx);opacity:.85}
.cat-nombre{position:relative;z-index:1;margin:0 0 .3rem;padding-right:1.75rem;font-family:var(--sp-serif);font-weight:400;
  font-size:var(--t-xl);line-height:var(--lh-ajustada);color:var(--tx-1)}
.cat--xl .cat-nombre{font-size:var(--t-2xl)}
.cat-cifra{position:relative;z-index:1;margin:0;font-family:var(--f-mono);font-size:var(--t-sm);color:var(--tx-3)}

/* ----------------------------------------------------------------
   4) PREMIUM — tarjetas de plan sobre --sup-1 con filete de oro.
   ---------------------------------------------------------------- */
.fm-premium{background:var(--sup-0);color:var(--tx-1);padding:var(--e-8) var(--gutter)}
.pwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--e-6);
  max-width:var(--ancho-max);margin:0 auto;align-items:stretch}
.pcardx{
  position:relative;border-radius:var(--r-2);padding:var(--e-6) var(--e-5);overflow:hidden;
  display:flex;flex-direction:column;border:1px solid var(--sup-borde);background:var(--sup-1);
}
.pcardx.gold{border-color:var(--acento-borde);
  background:linear-gradient(165deg,var(--acento-suave),var(--sup-1) 60%);
  box-shadow:var(--halo-acento)}
.pcardx h3{font-family:var(--sp-serif);font-weight:400;font-size:var(--t-2xl);color:var(--tx-1);
  display:flex;align-items:center;gap:10px;margin:0 0 var(--e-3)}
.pcardx .price{margin-top:0;font-family:var(--f-mono);font-size:var(--t-lg);color:var(--acento-tx)}
.pcardx ul{list-style:none;margin:var(--e-4) 0;padding:0;display:grid;gap:10px}
.pcardx li{display:flex;gap:10px;font-size:var(--t-md);color:var(--tx-2);line-height:1.5}
.pcardx li::before{content:"";flex:none;margin-top:.5em;width:7px;height:7px;transform:rotate(45deg);
  border:1px solid var(--acento-tx);opacity:.85}
.pcardx .note{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--tx-3)}
.pcardx .note a{color:var(--info)}
.pcardx .bigbtn{margin-top:var(--e-4);width:100%;justify-content:center}
.pcardx .pfill{flex:1}

/* ----------------------------------------------------------------
   5) PIE — almenas en oro tenue.
   ---------------------------------------------------------------- */
footer.fm-pie{
  position:relative;margin-top:12px;background:var(--sup-0);color:var(--tx-2);
  padding:var(--e-6) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--e-6));
  font-family:var(--sp-ui);font-size:var(--t-sm);line-height:var(--lh-texto);text-align:center;
  border-top:1px solid var(--sup-borde);
}
footer.fm-pie::before{
  content:"";position:absolute;top:-8px;left:0;right:0;height:8px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--acento-borde) 0 12px,transparent 12px 24px);
  opacity:.5;
}
.fm-pie-contenido{display:flex;flex-direction:column;gap:.5rem;align-items:center;max-width:var(--ancho-max);margin:0 auto}
footer.fm-pie b{font-family:var(--sp-serif);font-size:var(--t-md);font-weight:400;letter-spacing:.06em;color:var(--acento-tx)}
.fm-pie-links{display:flex;gap:var(--e-5);flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.fm-pie-links a{opacity:.82;min-height:44px;display:flex;align-items:center;text-decoration:none;color:var(--tx-2)}
.fm-pie-links a:hover{opacity:1}

/* ----------------------------------------------------------------
   6) EXPLORADOR, BUSCADOR, LOGIN, EDITOR — ventanas modales.
   ---------------------------------------------------------------- */
#explorer{position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:center;padding:16px}
#explorer.on{display:grid}
#search{position:fixed;inset:0;z-index:var(--z-modal);display:none;padding:16px}
#search.on{display:block}
#loginModal,#siteModal{position:fixed;inset:0;z-index:var(--z-modal);display:none;place-items:center;padding:16px}
#loginModal.on,#siteModal.on{display:grid}
#resAdmin{position:fixed;inset:0;z-index:var(--z-modal);display:none;padding:16px}
#resAdmin.on{display:grid;place-items:center}

.ex-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--n-950) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ex-panel{
  position:relative;z-index:1;width:min(96vw,1080px);height:auto;max-height:min(92dvh,800px);min-height:320px;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;border:1px solid var(--acento-borde);background:var(--sup-1);box-shadow:var(--sombra-3);
  animation:spPanelIn var(--dur-3) var(--ease-out) both;
}
@keyframes spPanelIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.ex-head{display:flex;align-items:center;gap:10px;padding:12px 16px;flex:none;border-bottom:1px solid var(--sup-borde);background:var(--sup-2)}
.ex-crumbs{position:static;flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;font-size:var(--t-sm);color:var(--tx-3)}
.ex-crumbs a{color:var(--tx-2);padding:5px 9px;border-radius:8px;cursor:pointer}
.ex-crumbs a:hover{background:var(--acento-suave);color:var(--acento-tx)}
.ex-crumbs .sep{color:var(--tx-3)}
.ex-crumbs .cur{color:var(--acento-tx);font-weight:700}
.ex-close{flex:none;border:1px solid var(--sup-borde-2);border-radius:999px;padding:9px 18px;color:var(--tx-2);
  background:var(--sup-1);font-family:var(--sp-ui);font-size:var(--t-sm);font-weight:600;
  transition:background-color var(--dur-2) var(--ease-out-quart),color var(--dur-2) var(--ease-out-quart)}
.ex-close:hover{background:var(--sup-2);color:var(--tx-1)}
.ex-close:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.ex-body{flex:1;overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-color:var(--sup-borde-2) transparent;background:var(--sup-0)}
.ex-view{padding:0 24px 32px}
.ex-view.in{animation:spViewIn .32s var(--ease-out) both}
.ex-view.in.back{animation-name:spViewInB}
.ex-view.out{animation:spViewOut .16s ease-in both}
.ex-view.out.back{animation-name:spViewOutB}
@keyframes spViewIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes spViewInB{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes spViewOut{to{opacity:0;transform:translateX(-20px)}}
@keyframes spViewOutB{to{opacity:0;transform:translateX(20px)}}
.ex-hero{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;max-width:70ch;margin:0 auto 26px;
}
.ex-emblem{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:38px;
  background:var(--sup-2);border:1px solid var(--acento-borde);box-shadow:var(--halo-acento)}
.ex-hero h2{font-family:var(--sp-serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.02em;
  color:var(--tx-1);margin:0}
.ex-hero .ex-sub{margin:8px 0 0;font-size:1rem;color:var(--tx-2)}
/* Ordenar los recursos de una carpeta por lo que hace falta para abrirlos
   (ver esOrden()/rangoDe() en index.html). Va justo encima de la rejilla,
   alineado a la derecha: es un ajuste de vista, no contenido. */
.ex-orden{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin:0 0 14px;font-size:.85rem;color:var(--tx-2)}
.ex-orden select{font:inherit;font-size:.85rem;padding:7px 30px 7px 12px;border-radius:10px;
  border:1px solid var(--sup-borde-2);background:var(--sup-1);color:var(--tx-1);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8fa8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.ex-orden select:hover{border-color:var(--acento-tx,#d9b45c)}
@media(max-width:520px){.ex-orden{justify-content:space-between}}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ex-card{
  --nc-suave:color-mix(in srgb,var(--nc,var(--acento-tx)) 22%,var(--sup-1));
  display:flex;flex-direction:column;gap:7px;padding:18px 18px 16px;min-height:120px;
  border-radius:14px;border:1px solid var(--sup-borde);background:var(--sup-1);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;box-shadow:var(--sombra-1);
  transition:transform var(--dur-2) var(--ease-out-quart),box-shadow var(--dur-2) var(--ease-out-quart),border-color var(--dur-2) var(--ease-out-quart);
}
.ex-card:hover,.ex-card:focus-visible{transform:translateY(-4px);border-color:var(--acento-borde);box-shadow:var(--halo-acento)}
.ex-card:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.ex-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:22px;
  background:var(--sup-2);border:1px solid var(--sup-borde)}
.ex-card b{font-family:var(--sp-serif);font-weight:400;font-size:1.05rem;color:var(--tx-1);line-height:1.3;margin:0}
.ex-card p{font-size:.86rem;line-height:1.5;color:var(--tx-2);flex:1;margin:0}
.ex-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--sp-ui);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acento-tx);transition:gap var(--dur-2) var(--ease-out-quart)}
.ex-card:hover .ex-go{gap:12px}
.badge{position:absolute;top:14px;right:14px;z-index:2;padding:5px 11px;border-radius:999px;
  font-family:var(--sp-ui);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--exito-suave);color:var(--exito);border:1px solid color-mix(in srgb,var(--exito) 35%,transparent)}
.badge.lock{background:var(--acento-suave);color:var(--acento-tx);border-color:var(--acento-borde)}
.ex-card.prem{border-color:var(--acento-borde)}
.ex-text{max-width:64ch;margin:0 auto;padding:22px 24px;border-radius:18px;background:var(--sup-1);
  border:1px solid var(--sup-borde);font-size:1rem;line-height:1.8;color:var(--tx-2);white-space:pre-line}
.ex-back{display:inline-flex;margin-top:20px;padding:10px 20px;border-radius:999px;border:1px solid var(--sup-borde-2);
  background:var(--sup-1);color:var(--tx-2)}
.ex-back:hover{background:var(--sup-2);color:var(--tx-1)}
.ex-empty{margin:8px auto 0;padding:40px 20px;max-width:520px;border:2px dashed var(--sup-borde-2);border-radius:20px;
  color:var(--tx-2);font-weight:600;text-align:center}

/* ----------------------------------------------------------------
   7) BUSCADOR
   ---------------------------------------------------------------- */
.s-panel{position:relative;z-index:1;border-radius:16px;border:1px solid var(--acento-borde);background:var(--sup-1);
  box-shadow:var(--sombra-3);animation:spPanelIn .2s var(--ease-out) both;width:min(94vw,640px);margin:max(8vh,60px) auto 0;overflow:hidden}
.s-panel input{width:100%;padding:18px 20px;font-size:1.05rem;color:var(--tx-1);border-bottom:1px solid var(--sup-borde);
  background:transparent;border-top:0;border-left:0;border-right:0;outline:none;font-family:var(--sp-ui)}
.s-panel input::placeholder{color:var(--tx-3)}
#sResults{max-height:52vh;overflow:auto}
.s-item{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer}
.s-item:hover{background:var(--sup-2)}
.s-item .si{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:18px;
  background:var(--sup-2);border:1px solid var(--sup-borde)}
.s-item b{display:block;font-size:.9rem;color:var(--tx-1);font-family:var(--sp-ui)}
.s-item small{display:block;font-size:.7rem;color:var(--tx-3)}
.s-item .tagp{margin-left:auto;flex:none;font-size:.58rem;letter-spacing:.06em;padding:4px 9px;border-radius:999px;font-weight:600;
  border:1px solid transparent;text-transform:uppercase}
.tagp--gratis{color:var(--exito);background:var(--exito-suave)}
.tagp--premium{color:var(--aviso);background:var(--aviso-suave)}
.tagp--carpeta{color:var(--tx-2);background:var(--sup-2)}
.s-empty{padding:26px;text-align:center;color:var(--tx-3)}

/* ----------------------------------------------------------------
   8) MODALES: acceso, personalización, editor de recursos
   ---------------------------------------------------------------- */
.login-box,.admin-box,.ra-panel,.ra-form{
  position:relative;z-index:1;border-radius:20px;border:1px solid var(--acento-borde);background:var(--sup-1);box-shadow:var(--sombra-3);
  animation:spPanelIn var(--dur-3) var(--ease-out) both;scrollbar-color:var(--sup-borde-2) transparent;
}
.login-box,.admin-box{width:min(94vw,400px);padding:34px 28px;text-align:center}
.login-box .lico,.admin-box .lico{
  width:64px;height:64px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;font-size:30px;
  background:var(--acento-suave);border:1px solid var(--acento-borde);
}
.login-box h3,.admin-box h3{font-family:var(--sp-serif);font-weight:400;font-size:1.35rem;letter-spacing:.02em;color:var(--tx-1);margin:0}
.login-box .lsub,.admin-box .lsub{margin:8px 0 22px;font-size:.9rem;color:var(--tx-2)}
.lfield,.raf{text-align:left;margin-bottom:14px}
.lfield label,.raf label,.fm-campo label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-2);margin-bottom:6px;
  font-family:var(--sp-ui)}
.lfield input,.raf input,.raf select,.raf textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-2);font-size:1rem;color:var(--tx-1);font-family:var(--sp-ui);
  background:var(--sup-2);border:1px solid var(--sup-borde-2);outline:none;
}
.lfield input:focus,.raf input:focus,.raf select:focus,.raf textarea:focus{border-color:var(--acento-tx);
  box-shadow:0 0 0 3px var(--acento-suave)}
.raf textarea{min-height:90px;resize:vertical}
#loginError,#rafError,.raError,#siteErr{min-height:1.2em;margin:4px 0 10px;font-size:.8rem;color:var(--error)}
.login-box .bigbtn,.login-box .fm-boton{width:100%}
.login-box .lhint{margin-top:18px;font-size:.72rem;color:var(--tx-3);line-height:1.6}
.login-box .lhint a{color:var(--acento-tx)}
.lclose{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--sup-borde-2);background:var(--sup-1);color:var(--tx-2)}
.lclose:hover{background:var(--sup-2);color:var(--tx-1)}
.fm-recordar{display:flex;align-items:center;gap:.55rem;margin:.9rem 0 .25rem;font-size:.9rem;cursor:pointer}
.fm-recordar input{width:1.05rem;height:1.05rem;accent-color:var(--acento-tx);flex:0 0 auto}
.fm-recordar-nota{margin:0;font-size:.76rem;line-height:1.45;color:var(--tx-3)}
.fm-olvide a{color:var(--acento-tx)}
.fm-recaptcha-aviso{color:var(--tx-3);font-size:.76rem}
.fm-recaptcha-aviso a{color:var(--tx-2)}

/* Editor de recursos (solo administrador) */
.ra-panel{width:min(96vw,1000px);height:min(94dvh,860px);display:flex;flex-direction:column;overflow:hidden}
.ra-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px 18px;flex:none;
  border-bottom:1px solid var(--sup-borde);background:var(--sup-2)}
.ra-title{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--tx-1);flex:none;white-space:nowrap}
.ra-spacer{flex:1 1 auto;min-width:0}
.ra-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.ra-save{flex:none;white-space:nowrap;border:1px solid color-mix(in srgb,var(--exito) 35%,transparent);
  background:var(--exito-suave);color:var(--exito);border-radius:999px;padding:9px 18px;font-size:.8rem;font-weight:700}
.ra-save:enabled:hover{background:var(--exito);color:var(--n-950)}
.ra-save:disabled{opacity:.4;cursor:default}
.ra-crumbs{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:12px 18px 0;
  font-size:.82rem;color:var(--tx-3)}
.ra-crumbs a{color:var(--tx-2);padding:5px 10px;border-radius:8px}
.ra-crumbs a:hover{background:var(--acento-suave);color:var(--acento-tx)}
.ra-crumbs .cur{color:var(--tx-1);font-weight:700}
.ra-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px 6px}
.ra-add{border:1px dashed var(--sup-borde-2);background:var(--sup-2);color:var(--tx-2);border-radius:999px;
  padding:10px 16px;font-size:.82rem;font-family:var(--sp-ui)}
.ra-add:hover{background:var(--sup-borde);color:var(--tx-1)}
.ra-add.res{border-color:var(--acento-borde);background:var(--acento-suave);color:var(--acento-tx)}
.ra-hint{font-size:.76rem;color:var(--tx-3);margin-left:auto}
.ra-body{flex:1;overflow:hidden auto;padding:8px 18px 24px;scrollbar-color:var(--sup-borde-2) transparent}
.ra-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;margin-bottom:9px;
  background:var(--sup-1);border:1px solid var(--sup-borde)}
.ra-item:hover{border-color:var(--sup-borde-2);background:var(--sup-2)}
.ra-item .ra-emoji{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:var(--sup-2);border:1px solid var(--sup-borde)}
.ra-item .ra-meta{flex:1;min-width:0;cursor:pointer}
.ra-item .ra-name{font-size:.95rem;color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-item .ra-sub{font-size:.72rem;color:var(--tx-3);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.ra-tagt{font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid transparent}
.ra-tagt.fold{border-color:var(--acento-borde);color:var(--acento-tx);background:var(--acento-suave)}
.ra-tagt.free{color:var(--exito);background:var(--exito-suave)}
.ra-tagt.paid{color:var(--aviso);background:var(--aviso-suave)}
.ra-tagt.text{color:var(--info)}
.ra-acts{display:flex;align-items:center;gap:6px;flex:none}
.ra-acts button{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;
  border:1px solid var(--sup-borde-2);background:var(--sup-1);color:var(--tx-2)}
.ra-acts button:hover{background:var(--sup-2);color:var(--tx-1)}
.ra-acts button:disabled{opacity:.28}
.ra-acts .del:hover{background:var(--error-suave);border-color:var(--error);color:var(--error)}
.ra-empty{text-align:center;color:var(--tx-3);padding:26px 10px}
.ra-form-wrap{position:absolute;inset:0;z-index:5;display:none;place-items:center;padding:16px;
  background:color-mix(in srgb,var(--n-950) 65%,transparent)}
.ra-form-wrap.on{display:grid}
.ra-form{width:min(94%,480px);max-height:94%;overflow:auto;border-radius:18px}
.ra-form-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--sup-borde)}
.ra-form-head b{flex:1;color:var(--tx-1);font-size:.92rem}
.ra-form-body{padding:18px}
.ra-form-foot{display:flex;gap:10px;padding:0 18px 18px}
.raf-row{display:flex;gap:12px}
.raf-row .raf.ico{flex:none;width:84px}
.raf-row .raf.grow{flex:1}
.raf.ico input{text-align:center;font-size:1.2rem}
.raf-toggle{display:flex;gap:10px;margin-bottom:14px}
.raf-toggle button{flex:1;padding:12px;border-radius:var(--r-2);font-size:.85rem;border:1px solid var(--sup-borde-2);
  background:var(--sup-1);color:var(--tx-2)}
.raf-toggle button.sel{border-color:var(--acento-tx);background:var(--acento-suave);color:var(--acento-tx)}
.raf-color{display:flex;align-items:center;gap:10px}
.raf-color input[type=color]{width:54px;height:46px;padding:3px;flex:none;cursor:pointer;border-radius:var(--r-2)}
.raf-color input[type=text]{flex:1}
.plan-picks{display:flex;flex-wrap:wrap;gap:8px}
.planchip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;cursor:pointer;
  font-size:.82rem;color:var(--tx-2);border:1px solid var(--sup-borde-2);background:var(--sup-1)}
.planchip.on{border-color:var(--acento-tx);background:var(--acento-suave);color:var(--acento-tx)}
.plan-empty{font-size:.8rem;color:var(--tx-3)}

/* ----------------------------------------------------------------
   9) AVISOS
   ---------------------------------------------------------------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);z-index:var(--z-toast);
  padding:13px 24px;border-radius:999px;font-size:.85rem;color:var(--tx-1);opacity:0;pointer-events:none;
  background:var(--sup-2);border:1px solid var(--acento-borde);box-shadow:var(--sombra-2);
  transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-3) var(--ease-out);
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ----------------------------------------------------------------
   10) ASISTENTE «FRAN», con la ropa de la sala.
   ---------------------------------------------------------------- */
.fm-bocadillo{background:var(--sup-1);border:1px solid var(--sup-borde-2);border-radius:14px;color:var(--tx-1);box-shadow:var(--sombra-2)}
.fm-flecha{width:14px;height:14px;margin:-8px 40px 0 auto;background:var(--sup-1);
  border-right:1px solid var(--sup-borde-2);border-bottom:1px solid var(--sup-borde-2);transform:rotate(45deg)}
.fm-nombre{font-family:var(--sp-ui);font-size:.8rem;font-weight:700;color:var(--acento-tx);margin-bottom:.3rem}
.fm-texto{color:var(--tx-2);font-size:.9rem}
.fm-cerrar{font-size:1rem;color:var(--tx-3)}
.fm-cerrar:hover{color:var(--error)}
.fm-asistente--cerrado .fm-avatar{background:var(--sup-1);border:3px solid var(--sup-borde-2);box-shadow:var(--sombra-1)}
.fm-asistente--cerrado .fm-avatar:hover{border-color:var(--acento-tx);box-shadow:var(--sombra-2)}

/* ----------------------------------------------------------------
   11) LA SALA — apertura de un solo disparo y ambiente
   ---------------------------------------------------------------- */
/* El marco: filetes de oro pegados al borde y cuatro esquinas. */
#sp-marco{position:fixed;inset:0;z-index:var(--z-hud);pointer-events:none;
  opacity:0;animation:spMarcoEntra var(--dur-6) .5s var(--ease-out) forwards}
@keyframes spMarcoEntra{to{opacity:1}}
#sp-marco::before,#sp-marco::after{content:"";position:absolute;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--acento-borde) 14%,var(--acento-borde) 86%,transparent)}
#sp-marco::before{top:14px} #sp-marco::after{bottom:14px}
#sp-marco i{position:absolute;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--acento-borde) 12%,var(--acento-borde) 88%,transparent)}
#sp-marco i.iz{left:14px} #sp-marco i.de{right:14px}
#sp-marco b{position:absolute;width:26px;height:26px;opacity:.85}
#sp-marco b::before,#sp-marco b::after{content:"";position:absolute;background:var(--acento-borde)}
#sp-marco b::before{width:100%;height:1px;top:0} #sp-marco b::after{width:1px;height:100%;left:0}
#sp-marco b.e1{top:14px;left:14px}
#sp-marco b.e2{top:14px;right:14px;transform:scaleX(-1)}
#sp-marco b.e3{bottom:14px;left:14px;transform:scaleY(-1)}
#sp-marco b.e4{bottom:14px;right:14px;transform:scale(-1)}
@media (max-width:640px){#sp-marco{display:none}}

/* El velo que se abre, con un rayo que cruza la escena al descorrerse. */
#sp-velo{position:fixed;inset:0;z-index:var(--z-warp);pointer-events:none;background:var(--sup-0)}
#sp-velo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 40% 30% at 50% 45%,color-mix(in srgb,var(--oro-sala) 22%,transparent),transparent 70%)}
body.sp-abierta #sp-velo{animation:spVelo var(--dur-6) var(--ease-inout) forwards}
@keyframes spVelo{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
#sp-rayo{position:fixed;inset:0;z-index:calc(var(--z-warp) - 1);pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 42%,color-mix(in srgb,var(--oro-sala-2) 55%,white) 50%,transparent 58%);
  background-size:250% 100%}
body.sp-abierta #sp-rayo{animation:spRayo var(--dur-6) .25s var(--ease-out) forwards}
@keyframes spRayo{0%{opacity:0;background-position:150% 0}35%{opacity:.85}100%{opacity:0;background-position:-90% 0}}

/* El polvo de oro en suspensión, detrás de todo el contenido. */
#sp-polvo{position:fixed;inset:0;z-index:var(--z-fondo);pointer-events:none;opacity:.85}

@media (prefers-reduced-motion:reduce){
  #sp-velo,#sp-rayo,#sp-polvo{display:none}
  #sp-marco{opacity:1;animation:none}
}

/* ----------------------------------------------------------------
   12) MÓVIL
   ---------------------------------------------------------------- */
@media (max-width:720px){
  .fm-banda{padding:var(--e-6) var(--gutter) calc(var(--e-5) + 16px)}
  .fm-mosaico{grid-template-columns:repeat(2,1fr)}
  .cat,.cat--l,.cat--xl{grid-column:span 1;grid-row:auto}
  .pwrap{grid-template-columns:1fr}
  .ex-panel{width:100%;height:calc(100dvh - 20px)}
  .ex-view{padding:18px 14px 26px}
  .ex-grid{grid-template-columns:1fr;gap:11px}
  .fm-banda-imagen{display:none}
}
@media (min-width:721px) and (max-width:1000px){
  .fm-mosaico{grid-template-columns:repeat(6,1fr)}
  .cat--xl{grid-column:span 6}
  .cat--l{grid-column:span 3}
  .cat{grid-column:span 3}
}

/* ----------------------------------------------------------------
   13) MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cat,.cat::after,.cat-glifo,.ex-card,.ex-go,.bigbtn,#toast{transition:none}
  .cat:hover,.ex-card:hover,.bigbtn:hover{transform:none}
  .ex-view.in,.ex-view.out,.ex-view.in.back,.ex-view.out.back{animation:none}
}