/* ================================================================
   FRAN96MC.ES — includes/aula.css
   PIEL ÚNICA de las cuatro aulas, dirección «Horizonte» (Fase 5).
   Sustituye a piel-aulas.css + piel-clara.css + el <style> en línea
   de cada aula. Este fichero es el PILOTO: hoy solo lo carga
   aula-de-fran/index.html, pero no debe llevar nada específico de
   esa plataforma — las otras tres aulas lo cargarán tal cual al
   migrarse. Lo que cambia de una aula a otra (nombre, colores,
   catálogo, libro/ilustración del hero) lo pone SIEMPRE la página,
   nunca esta hoja.

   Solo consume tokens de includes/tokens.css (--sup-*, --tx-*,
   --acento-*, --t-*, --e-*, --r-*, --sombra-*, --dur-*, --ease-*,
   --z-*, --cat-*, --escalon) y clases de includes/movimiento.css.
   Ningún color literal: todo var(--…). Requiere ambas hojas cargadas
   antes, y opcionalmente includes/horizonte.js si la página trae un
   .fm-horizonte.

   Prohibido (ver DESIGN.md): degradados en texto, bordes laterales de
   color, tarjeta dentro de tarjeta, kicker en mayúsculas, glass
   decorativo, sombras enormes, ease-back fuera de escaparate.
   ================================================================ */

/* ----------------------------------------------------------------
   0) BASE
   ---------------------------------------------------------------- */
html[data-tema="claro"]{color-scheme:light}
html[data-tema="claro"] body{
  background:var(--sup-0);
  color:var(--tx-1);
  font-family:var(--f-cuerpo);
  font-size:var(--t-md);
  line-height:var(--lh-texto);
  -webkit-font-smoothing:antialiased;
}
html[data-tema="claro"] ::selection{background:var(--acento-suave);color:var(--tx-1)}
html[data-tema="claro"] h1,
html[data-tema="claro"] h2,
html[data-tema="claro"] 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="claro"] p,
html[data-tema="claro"] li,
html[data-tema="claro"] label,
html[data-tema="claro"] input,
html[data-tema="claro"] textarea,
html[data-tema="claro"] select{font-family:var(--f-cuerpo)}
a{color:inherit}
html[data-tema="claro"] :focus-visible{outline:3px solid var(--foco);outline-offset:2px}
html[data-tema="claro"] .fm-cifra{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
html[data-tema="claro"]{--f-pixel:var(--f-display)}
.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(--tx-1);border:3px solid var(--acento-tx);color:var(--n-0);
  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(--n-0);outline-offset:2px}

.bigbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:var(--r-2);
  font-family:var(--f-cuerpo);font-size:.95rem;font-weight:700;text-decoration:none;
  color:var(--n-0);background:var(--acento-tx);border:1px solid var(--acento-tx);
  box-shadow:var(--sombra-1);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-out-quart),
             transform var(--dur-1) var(--ease-out-quart),
             box-shadow var(--dur-2) var(--ease-out-quart);
}
.bigbtn:hover{background:var(--acento-osc);border-color:var(--acento-osc);transform:translateY(-1px);box-shadow:var(--sombra-2)}
.bigbtn:active{transform:none}
.bigbtn:focus-visible{outline:2px solid var(--acento-tx);outline-offset:3px}
.bigbtn.ghost{color:var(--tx-1);background:var(--sup-1);border-color:var(--sup-borde-2);box-shadow:none}
.bigbtn.ghost:hover{background:var(--sup-2);border-color:var(--sup-borde-2);color:var(--tx-1);box-shadow:none}
.bigbtn:disabled{opacity:.5;cursor:default;transform:none}

/* ----------------------------------------------------------------
   1) HORIZONTE — franja de cielo pixel recortada de la portada.
   La rellena includes/horizonte.js; aquí solo se fija el tamaño y
   que la barra que vive dentro flote sobre el cielo.
   ---------------------------------------------------------------- */
.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 — cabecera plana del color del aula, fundida con el
   blanco por escalones de --escalon (4px).
   ---------------------------------------------------------------- */
.fm-banda{
  position:relative;
  background:var(--acento-banda);
  color:var(--n-0);
  padding:var(--e-4) var(--gutter) calc(var(--e-5) + 16px);
}
.fm-banda::after{
  content:"";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 0 var(--e-4)}
.fm-migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0;padding:0;list-style:none;
  font-family:var(--f-mono);font-size:var(--t-xs);color:color-mix(in srgb,var(--n-0) 80%,transparent)}
.fm-migas a{color:color-mix(in srgb,var(--n-0) 90%,transparent);text-decoration:none;border-radius:var(--r-1);padding:.15rem .3rem}
.fm-migas a:hover,.fm-migas a:focus-visible{background:color-mix(in srgb,var(--n-0) 16%,transparent)}
.fm-migas [aria-current="page"]{color:var(--n-0);font-weight:700}
.fm-banda-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--e-6);
  max-width:var(--ancho-max);margin:0 auto;
  align-items:center;
}
.fm-banda-texto{min-width:0}
.fm-banda h1{
  font-size:clamp(2.4rem,1.2rem + 3.2vw,4.4rem);font-weight:800;letter-spacing:var(--tr-display);
  line-height:var(--lh-ajustada);margin:0 0 var(--e-1);
color:var(--n-0);}
.fm-banda-subt{font-family:var(--f-display);font-weight:600;font-size:var(--t-lg);margin:0 0 var(--e-1);color:var(--n-0)}
.fm-banda-parrafo{max-width:68ch;margin:0 0 var(--e-2);font-size:var(--t-md);line-height:var(--lh-texto);
  color:color-mix(in srgb,var(--n-0) 92%,transparent)}
.fm-cifras{display:flex;flex-wrap:wrap;gap:var(--e-4);margin:0 0 var(--e-3);padding:0;list-style:none;
  font-family:var(--f-mono);font-size:var(--t-sm);color:color-mix(in srgb,var(--n-0) 90%,transparent)}
.fm-banda-acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);align-items:center}
.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:2px solid color-mix(in srgb,var(--n-0) 50%,transparent);
  background:color-mix(in srgb,var(--n-0) 10%,transparent);color:var(--n-0);
  border-radius:var(--r-1) 0 0 var(--r-1);font-family:var(--f-cuerpo);font-size:var(--t-md);
}
.fm-buscar input::placeholder{color:color-mix(in srgb,var(--n-0) 75%,transparent)}
.fm-buscar button{
  min-height:44px;min-width:44px;border:2px solid color-mix(in srgb,var(--n-0) 50%,transparent);border-left:0;
  background:var(--n-0);color:var(--acento-banda);border-radius:0 var(--r-1) var(--r-1) 0;cursor:pointer;
}
.fm-botones{display:flex;flex-wrap:wrap;gap:var(--e-3)}
.fm-boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.7rem 1.3rem;border-radius:var(--r-2);
  font-family:var(--f-cuerpo);font-weight:700;font-size:var(--t-md);
  border:2px solid transparent;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out-quart),
             background-color var(--dur-2) var(--ease-out-quart),
             border-color var(--dur-2) var(--ease-out-quart);
}
.fm-boton:hover{transform:translateY(-1px)}
.fm-boton:active{transform:translateY(0) scale(.98)}
.fm-boton.fm-boton--primario{background:var(--n-0);color:var(--acento-banda);text-decoration:none}
.fm-boton.fm-boton--primario:hover{background:color-mix(in srgb,var(--n-0) 90%,var(--acento-banda))}
.fm-boton.fm-boton--secundario{background:transparent;color:var(--n-0);border-color:color-mix(in srgb,var(--n-0) 55%,transparent);text-decoration:none}
.fm-boton.fm-boton--secundario:hover{border-color:var(--n-0)}
.fm-banda-imagen{
  position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-top:var(--e-5);
}
.fm-banda-imagen img{width:min(100%,220px);max-height:180px;height:auto;object-fit:contain;
  filter:drop-shadow(0 20px 32px color-mix(in srgb,var(--n-950) 35%,transparent))}
@media (min-width:960px){
  .fm-banda-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
  .fm-banda-imagen{margin-top:0}
}

/* ----------------------------------------------------------------
   3) MOSAICO — categorías como bloques planos de color.
   ---------------------------------------------------------------- */
.fm-mosaico{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(7.5rem,auto);grid-auto-flow:dense;
  gap:8px;
  max-width:var(--ancho-max);margin:0 auto;padding:var(--e-6) var(--gutter);
  list-style:none;
}
.cat{
  --cc-tx:var(--n-950);
  position:relative;overflow:hidden;isolation:isolate;
  grid-column:span 3;min-height:7.5rem;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:var(--e-4) var(--e-4) var(--e-4);
  border-radius:var(--r-1);border:0;cursor:pointer;
  background:var(--cc,var(--n-200));color:var(--cc-tx);
  text-decoration:none;
}
.cat--l{grid-column:span 4}
.cat--xl{grid-column:span 6;grid-row:span 2}
.cat::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--n-950);opacity:0;pointer-events:none;
  transition:opacity var(--dur-1) var(--ease-out-quart);
}
.cat:hover::before,.cat:focus-visible::before{opacity:.06}
.cat:focus-visible{outline:3px solid var(--n-0);outline-offset:-3px;box-shadow:0 0 0 3px var(--cc,var(--n-200))}
.cat-glifo{
  position:absolute;top:var(--e-3);right:var(--e-3);z-index:1;
  width:20px;height:20px;display:grid;place-items:center;
  transition:transform var(--dur-1) var(--ease-out-quart);
}
.cat:hover .cat-glifo,.cat:focus-visible .cat-glifo{transform:translate(2px,-2px)}
.cat-nombre{position:relative;z-index:1;margin:0 0 .3rem;padding-right:1.75rem;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xl);line-height:var(--lh-ajustada)}
.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);opacity:.85}

/* ----------------------------------------------------------------
   4) PREMIUM — banda a ancho completo, medianoche.
   ---------------------------------------------------------------- */
.fm-premium{background:var(--n-950);color:var(--hueso);padding:var(--e-8) var(--gutter)}
.fm-premium-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e-6);
  max-width:var(--ancho-max);margin:0 auto;
}
.fm-premium h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-2xl);margin:0 0 var(--e-4);color:var(--hueso)}
.fm-premium ul{list-style:none;margin:0 0 var(--e-4);padding:0;display:grid;gap:.6rem}
.fm-premium li{position:relative;padding-left:1.25rem;font-size:var(--t-md);color:color-mix(in srgb,var(--hueso) 92%,transparent)}
.fm-premium li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--oro-sala)}
.fm-premium .fm-nota{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--hueso-2);margin:0 0 var(--e-4)}
.fm-premium-col--premium li::before{background:var(--acento-tx)}

/* ----------------------------------------------------------------
   5) PIE — sigue en medianoche, con almenas pixel al remate.
   ---------------------------------------------------------------- */
footer.fm-pie{
  position:relative;margin-top:12px;
  background:var(--n-950);color:var(--hueso);
  padding:var(--e-6) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--e-6));
  font-size:var(--t-sm);line-height:var(--lh-texto);
}
footer.fm-pie::before{
  content:"";position:absolute;top:-12px;left:0;right:0;height:12px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--n-950) 0 12px,transparent 12px 24px);
}
.fm-pie-contenido{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  max-width:var(--ancho-max);margin:0 auto;
}
.fm-pie b{font-family:var(--f-display);font-size:var(--t-md);font-weight:800;color:var(--hueso)}
.fm-pie-links{display:flex;gap:var(--e-5);flex-wrap:wrap;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(--hueso)}
.fm-pie-links a:hover{opacity:1}

/* ----------------------------------------------------------------
   6) EXPLORADOR, BUSCADOR, LOGIN, EDITOR — ventanas modales.
   Cada una es un contenedor fijo a pantalla completa, oculto por
   defecto y mostrado con la clase .on (la pone la página).
   ---------------------------------------------------------------- */
#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) 55%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.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:0;background:var(--sup-1);box-shadow:var(--sombra-3);
  animation:clPanelIn var(--dur-3) var(--ease-out) both;
}
@keyframes clPanelIn{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(--tx-1);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(--f-cuerpo);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:clViewIn .32s var(--ease-out) both}
.ex-view.in.back{animation-name:clViewInB}
.ex-view.out{animation:clViewOut .16s ease-in both}
.ex-view.out.back{animation-name:clViewOutB}
@keyframes clViewIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes clViewInB{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes clViewOut{to{opacity:0;transform:translateX(-20px)}}
@keyframes clViewOutB{to{opacity:0;transform:translateX(20px)}}
.ex-hero{
  position:relative;overflow:hidden;isolation:isolate;text-align:left;max-width:none;
  margin:0 -24px 26px;padding:30px 28px 34px;
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;
  color:var(--n-0);background:var(--nc,var(--acento-banda));
}
.ex-emblem{
  grid-row:1 / span 2;width:88px;height:88px;margin:0;border-radius:24px;font-size:44px;display:grid;place-items:center;
  background:var(--n-0);color:var(--nc,var(--acento-banda));box-shadow:var(--sombra-2);transform:rotate(-6deg);
}
.ex-hero h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:var(--tr-ajustado);line-height:1.08;
  color:var(--n-0);align-self:end;margin:0}
.ex-hero .ex-sub{margin:0;font-size:1.02rem;font-weight:500;color:color-mix(in srgb,var(--n-0) 90%,transparent);align-self:start;max-width:60ch}
.ex-hero h2:only-child{grid-row:1 / span 2;align-self:center}
/* 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,#5b8cff)}
@media(max-width:520px){.ex-orden{justify-content:space-between}}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.ex-card{
  --nc-suave:color-mix(in srgb,var(--nc,var(--acento-tx)) 18%,white);
  --nc-texto:color-mix(in srgb,var(--nc,var(--acento-tx)) 62%,var(--tx-1));
  display:grid;grid-template-rows:auto auto 1fr auto;gap:0;padding:0;overflow:hidden;
  border-radius:22px;border:1px solid var(--sup-borde);background:var(--sup-1);box-shadow:var(--sombra-1);
  text-decoration:none;color:inherit;position:relative;
  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);box-shadow:var(--sombra-2)}
.ex-card:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.ex-ico{
  width:100%;height:150px;display:grid;place-items:center;font-size:64px;
  background:linear-gradient(135deg,var(--nc-suave),color-mix(in srgb,var(--nc,var(--acento-tx)) 55%,white));
}
.ex-card b{font-family:var(--f-display);font-size:1.1rem;font-weight:800;color:var(--tx-1);padding:16px 18px 0;line-height:1.2;margin:0}
.ex-card p{font-size:.9rem;line-height:1.5;color:var(--tx-2);padding:6px 18px 0;margin:0}
.ex-go{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:16px 18px 18px;padding:11px 16px;border-radius:999px;
  font-family:var(--f-cuerpo);font-size:.92rem;font-weight:800;color:var(--n-0);
  background:var(--nc-texto);transition:transform var(--dur-2) var(--ease-out-quart)
}
.ex-card:hover .ex-go{transform:translateY(-1px)}
.badge{position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;background:var(--n-0);color:var(--exito)}
.badge.lock{color:var(--aviso)}
.ex-text{max-width:70ch;margin:0;padding:22px 24px;border-radius:18px;background:var(--sup-1);
  border:1px solid var(--sup-borde);box-shadow:var(--sombra-1);font-size:1.02rem;line-height:1.75;color:var(--tx-2)}
.ex-back{display:inline-flex;margin-top:20px;padding:10px 18px;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}
@media (max-width:720px){
  .ex-view{padding:0 14px 24px}
  .ex-hero{margin:0 -14px 18px;padding:22px 18px 26px;gap:4px 14px}
  .ex-emblem{width:66px;height:66px;font-size:32px;border-radius:18px}
  .ex-hero h2{font-size:1.4rem}
  .ex-ico{height:120px;font-size:44px}
}

/* ----------------------------------------------------------------
   7) BUSCADOR
   ---------------------------------------------------------------- */
.s-panel{position:relative;z-index:1;border-radius:16px;border:0;background:var(--sup-1);box-shadow:var(--sombra-3);
  animation:clPanelIn .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(--f-cuerpo)}
.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(--f-cuerpo)}
.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:0;background:var(--sup-1);box-shadow:var(--sombra-3);
  animation:clPanelIn var(--dur-3) var(--ease-out) both;scrollbar-color:var(--sup-borde-2) transparent;
}
/* box-sizing:border-box es imprescindible aquí: sin él, el padding se
   suma por encima del min(94vw,400px) en vez de descontarse de dentro,
   y en un móvil de ~376px de ancho el cuadro acaba midiendo unos 33px
   más que la pantalla entera — el borde derecho (el botón «Entrar», el
   aviso de reCAPTCHA…) se queda cortado fuera de la vista. */
.login-box,.admin-box{width:min(94vw,400px);padding:34px 28px;text-align:center;box-sizing:border-box}
.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(--f-display);font-size:1.3rem;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:.82rem;font-weight:600;color:var(--tx-2);margin-bottom:6px;
  font-family:var(--f-cuerpo)}
.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(--f-cuerpo);
  background:var(--sup-1);border:1px solid var(--sup-borde-2);outline:none;box-sizing:border-box;
}
.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-0)}
.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(--f-cuerpo)}
.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) 55%,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(--n-0);opacity:0;pointer-events:none;
  background:var(--tx-1);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»
   ---------------------------------------------------------------- */
.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(--f-display);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) MÓVIL
   ---------------------------------------------------------------- */
@media (max-width:720px){
  .fm-banda{padding:var(--e-5) var(--gutter) calc(var(--e-6) + 16px)}
  .fm-banda-grid{gap:var(--e-5)}
  .fm-banda h1{font-size:clamp(2rem,9vw,2.6rem)}
  .fm-banda-imagen img{width:140px;max-height:120px}
  .fm-botones .fm-boton{flex:1 1 100%}
  .fm-buscar{max-width:none;flex:1 1 100%}
  .fm-mosaico{grid-template-columns:repeat(2,1fr)}
  .cat,.cat--l,.cat--xl{grid-column:span 1;grid-row:auto}
  .fm-premium-grid{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}
}
@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}
}

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

/* Ajustes tras la revisión del piloto (16/09/2026) */
#premium .fm-premium-col h2{color:var(--hueso)}
.fm-pie-contenido{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-4)}
.fm-pie-links{align-items:center;gap:var(--e-3)}
.fm-pie-links > a,.fm-pie-links li a{opacity:.82;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--hueso)}

html[data-tema="claro"] .fm-banda h1{color:var(--n-0)}