/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/piel-clara.css — piel CLARA de las cuatro aulas
   (El Aula de Fran, DocencIA, Aula Virtual y Oposiciones).

   POR QUÉ EXISTE
   Las aulas vestían la identidad pixel-art nocturna del sitio
   (piel-aulas.css). El usuario pidió (sept. 2026) que fueran
   "sencillas, visuales e intuitivas": fondo claro, tipografía
   normal, tarjetas grandes con color por categoría y mucho más
   contraste. La portada y la Tienda siguen en pixel: esta hoja
   SOLO la cargan las cuatro aulas.

   CÓMO FUNCIONA
   Se carga la ÚLTIMA, después de piel-aulas.css y del <style> que
   fija --acento-pagina, así que gana a todo lo anterior con la
   misma especificidad. Trabaja en dos capas:
     1) Remapea los tokens del sitio (--panel, --tinta, --acento…)
        y las variables heredadas de las aulas (--bg0, --gold,
        --ink, --card, --line, --font-d…) a valores claros. Con eso
        la barra común, el asistente, las migas y la mayor parte
        del CSS propio de cada aula cambian solos.
     2) Reescribe las reglas que no dependen de variables: fuentes
        pixel, recortes clip-path, brillos, fondos decorativos,
        tarjetas, explorador, modales y panel de administración.

   REGLAS DE LA CASA
   · Los colores nuevos del tema claro viven en el bloque 1 (OKLCH)
     y en ningún otro sitio: el resto usa var(--cl-…).
   · Nada de gradientes en texto, ni bordes laterales de color, ni
     tipografía de display en botones/etiquetas.
   · Movimiento solo para estado (hover, foco, entrada de lista);
     todo se apaga con prefers-reduced-motion (bloque final).
   ================================================================ */

/* ----------------------------------------------------------------
   1) TOKENS DEL TEMA CLARO
   Neutros fríos (chroma ~0.005 hacia el azul del sitio, nunca
   crema) y un acento por aula, oscurecido para leerse sobre
   blanco (>= 4.5:1 como texto).
   ---------------------------------------------------------------- */
/* Tipografía de display con personalidad (redondeada, amable):
   Sora, servida desde el propio sitio como el resto de fuentes. */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url('fuentes/sora-latin.woff2') format('woff2');
}
:root{
  /* El fondo va en hex porque la ola del hero lo repite dentro de un
     SVG en data-URI (ahí no llegan las variables). */
  --cl-fondo:#f7f8fc;
  --cl-fondo-2:oklch(96.4% 0.006 265);
  --cl-superficie:#fff;
  --cl-tinta:oklch(24% 0.035 270);
  --cl-tinta-2:oklch(41% 0.03 270);
  --cl-tinta-3:oklch(52% 0.025 270);
  --cl-linea:oklch(91% 0.01 265);
  --cl-linea-2:oklch(85% 0.014 265);

  --cl-exito:oklch(46% 0.14 155);
  --cl-exito-suave:oklch(95% 0.04 155);
  --cl-error:oklch(50% 0.19 25);
  --cl-error-suave:oklch(95% 0.03 25);
  --cl-aviso:oklch(55% 0.15 70);
  --cl-aviso-suave:oklch(95% 0.05 85);

  --cl-sombra-1:0 1px 2px oklch(24% 0.035 270 / .06),0 2px 8px oklch(24% 0.035 270 / .05);
  --cl-sombra-2:0 4px 12px oklch(24% 0.035 270 / .08),0 16px 40px oklch(24% 0.035 270 / .10);
  --cl-sombra-3:0 24px 80px oklch(24% 0.035 270 / .22);

  --cl-radio:16px;
  --cl-radio-s:10px;
  --cl-ease:cubic-bezier(.22,1,.36,1);

  /* Acento por defecto (lo concreta cada aula más abajo).
     --cl-hero / --cl-hero-2: la banda de color del hero y del pie
     (texto blanco encima: >= 4.5:1 en todas). */
  --cl-acento:oklch(50% 0.2 285);
  --cl-acento-oscuro:oklch(42% 0.2 285);
  --cl-acento-suave:oklch(95% 0.04 285);
  --cl-acento-borde:oklch(86% 0.08 285);
  --cl-hero:oklch(46% 0.2 285);
  --cl-hero-2:oklch(56% 0.18 305);
  --cl-sol:oklch(88% 0.17 90);
}
body[data-seccion="aula-de-fran"]{
  --cl-acento:oklch(52% 0.21 350);
  --cl-acento-oscuro:oklch(44% 0.21 350);
  --cl-acento-suave:oklch(95.5% 0.03 350);
  --cl-acento-borde:oklch(86% 0.08 350);
  --cl-hero:oklch(49% 0.21 350);
  --cl-hero-2:oklch(60% 0.19 15);
}
body[data-seccion="docencia-ia"]{
  --cl-acento:oklch(50% 0.2 285);
  --cl-acento-oscuro:oklch(42% 0.2 285);
  --cl-acento-suave:oklch(95% 0.04 285);
  --cl-acento-borde:oklch(86% 0.08 285);
  --cl-hero:oklch(46% 0.2 285);
  --cl-hero-2:oklch(56% 0.18 305);
}
body[data-seccion="aula-virtual"]{
  --cl-acento:oklch(52% 0.15 60);
  --cl-acento-oscuro:oklch(44% 0.15 60);
  --cl-acento-suave:oklch(96% 0.05 80);
  --cl-acento-borde:oklch(87% 0.09 75);
  --cl-hero:oklch(48% 0.15 45);
  --cl-hero-2:oklch(60% 0.17 70);
}
body[data-seccion="oposiciones"]{
  --cl-acento:oklch(48% 0.13 225);
  --cl-acento-oscuro:oklch(40% 0.13 225);
  --cl-acento-suave:oklch(95.5% 0.03 225);
  --cl-acento-borde:oklch(86% 0.07 225);
  --cl-hero:oklch(44% 0.13 235);
  --cl-hero-2:oklch(56% 0.13 205);
}

/* ----------------------------------------------------------------
   2) REMAPEO DE TOKENS
   a) Tokens del sitio (tokens.css) que consumen barra.css,
      asistente.css, componentes.css, recaptcha.css y las migas.
   b) Variables heredadas de las aulas (piel-aulas.css las había
      mandado al pixel; aquí vuelven a significar "claro").
   ---------------------------------------------------------------- */
:root,body{
  --cielo-1:var(--cl-fondo);
  --cielo-2:var(--cl-fondo-2);
  --cielo-3:var(--cl-fondo-2);
  --cielo-4:var(--cl-linea);
  --panel:var(--cl-superficie);
  --panel-2:var(--cl-fondo-2);
  --panel-borde:var(--cl-linea);
  --panel-borde-luz:var(--cl-linea-2);
  --tinta:var(--cl-tinta);
  --tinta-suave:var(--cl-tinta-2);
  --tinta-tenue:var(--cl-tinta-3);
  --oro:var(--cl-acento);
  --oro-vivo:var(--cl-acento);
  --error:var(--cl-error);
  --exito:var(--cl-exito);
  --aviso:var(--cl-aviso);
  --acento-pagina:var(--cl-acento);
  --recorte-px:none;
  --f-pixel:'Sora','Outfit','Manrope',system-ui,sans-serif;
  --f-cuerpo:'Manrope','Rubik',system-ui,sans-serif;

  /* La "personalización del sitio" (panel 🎨) inyecta --gold, --gold2,
     --violet y --bg0 como estilo en línea de <html> con los colores del
     tema oscuro guardado, y pinta body.style.background. Solo un
     !important de hoja de estilos gana a un estilo en línea. */
  --bg0:var(--cl-fondo) !important;
  --bg1:var(--cl-fondo-2);
  --bg2:var(--cl-superficie);
  --gold:var(--cl-acento) !important;
  --gold2:var(--cl-acento) !important;
  --gold3:var(--cl-acento-oscuro);
  --violet:var(--cl-acento) !important;
  --cyan:var(--cl-acento);
  --pink:var(--cl-acento);
  --ink:var(--cl-tinta);
  --ink2:var(--cl-tinta-2);
  --ink3:var(--cl-tinta-3);
  --card:var(--cl-superficie);
  --line:var(--cl-linea);
  --glass:var(--cl-superficie);
  --r:var(--cl-radio);
  --font-d:'Sora','Outfit','Manrope',system-ui,sans-serif;
  --font-b:'Manrope','Rubik',system-ui,sans-serif;
  --font-m:'Manrope','Rubik',system-ui,sans-serif;
}

/* ----------------------------------------------------------------
   3) BASE: fondo, texto, tipografía
   ---------------------------------------------------------------- */
html{color-scheme:light}
body{
  background:var(--cl-fondo) !important; /* gana a body.style.background del panel 🎨 */
  /* Cuadrícula de puntos de cuaderno, muy tenue */
  background-image:radial-gradient(oklch(89% 0.012 265) 1.2px,transparent 1.3px) !important;
  background-size:26px 26px !important;
  color:var(--cl-tinta);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cl-acento-suave);color:var(--cl-tinta)}
h1,h2,h3,h4,.brand b,.cat h3,.ex-hero h1,.hero .kicker{
  font-family:var(--font-d);
  line-height:1.2;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--cl-tinta);
}
h1{font-size:2rem}
h2{font-size:1.5rem}
h3{font-size:1.1rem}
p,li,label,input,textarea,select,small,.ex-text,.sub{font-family:var(--font-b)}
p{text-wrap:pretty}
a{color:inherit}
hr,.sep{height:1px;background:var(--cl-linea)}

/* Fondos y adornos del cielo nocturno: fuera. Por aula:
   DocencIA (#bg .blob, robot Spline) · El Aula de Fran (gafas, lápices,
   destellos, partículas del libro) · Aula Virtual (luna, nubes, colinas,
   sprites, motas, CRT, birrete/libro, separador, "desliza") ·
   Oposiciones (resplandor, horizonte de barras). El libro de El Aula de
   Fran y el listado con lupa de Oposiciones SE QUEDAN como ilustración
   del hero (bloque 6). */
#bg,#stars,.blob,.sheen,
.px-glasses,.px-pencil,.px-spark,.bshadow,.coreglow,.mote,
.sky-glow,.px-moon,.px-cloud,.px-lamp,.px-hills,.px-float,.px-motes,.px-scan,.px-vig,
.px-cap,.px-bk,.px-rule,.px-scroll,
.resplandor,.horizonte{display:none !important}
/* Párrafos de error con color en línea (#ff8d8d no se lee sobre blanco) */
[style*="#ff8d8d"]{color:var(--cl-error) !important}

/* Barra de progreso de lectura */
#scrollbar{height:3px;background:var(--cl-acento);box-shadow:none;z-index:var(--z-hud)}

/* ----------------------------------------------------------------
   4) BARRA COMÚN DEL SITIO (includes/barra.css)
   Blanca, con las secciones como pastillas y la actual teñida
   del acento. Los iconos pixel se conservan: son la marca.
   ---------------------------------------------------------------- */
.fran-barra{
  background:var(--cl-superficie);
  border-bottom:1px solid var(--cl-linea);
  box-shadow:none;
  padding:.45rem clamp(.7rem,2.5vw,1.4rem);
}
.fran-marca{font-family:var(--font-d);font-size:.86rem;font-weight:700;color:var(--cl-tinta)}
.fran-marca:hover{color:var(--cl-acento)}
.fran-marca:focus-visible{outline-color:var(--cl-acento)}
.fran-cat{
  clip-path:none;
  border-radius:999px;
  border:1px solid transparent;
  padding:.35rem .75rem .35rem .5rem;
  color:var(--cl-tinta-2);
}
.fran-cat-nombre{font-family:var(--font-b);font-size:.82rem;font-weight:600;line-height:1.2}
.fran-cat-icono{filter:none}
.fran-cat:hover,.fran-cat:focus-visible{
  color:var(--cl-tinta);
  background:var(--cl-fondo-2);
  border-color:var(--cl-linea);
  transform:none;
}
.fran-cat:hover .fran-cat-icono,.fran-cat:focus-visible .fran-cat-icono{filter:none;transform:none}
.fran-cat:focus-visible{outline:2px solid var(--cl-acento);outline-offset:2px}
.fran-cat--activa{
  color:var(--cl-acento);
  background:var(--cl-acento-suave);
  border-color:var(--cl-acento-borde);
}
.fran-cat--activa::after{display:none}
.fran-cat--cuenta{border-color:var(--cl-linea)}
.fran-cat:not(.fran-cat--cuenta) + .fran-cat--cuenta::before{background:var(--cl-linea-2)}

/* Migas de pan */
.fran-migas{margin:.7rem 0 0}
.fran-migas ol{font-size:.82rem;color:var(--cl-tinta-3)}
.fran-migas a{color:var(--cl-tinta-2)}
.fran-migas a:hover{color:var(--cl-acento)}
.fran-migas [aria-current="page"]{color:var(--cl-tinta);font-weight:600}

/* ----------------------------------------------------------------
   5) CABECERA PROPIA DEL AULA (nav fija bajo la barra común)
   ---------------------------------------------------------------- */
nav:not(.fran-migas):not(.ex-crumbs):not(.ra-crumbs){
  background:color-mix(in srgb,var(--cl-superficie) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cl-linea);
  box-shadow:none;
  padding-top:calc(env(safe-area-inset-top,0px) + 8px);
  padding-bottom:8px;
  gap:8px;
}
.brand .bicon{
  width:40px;height:40px;border-radius:12px;
  background:var(--cl-acento-suave);
  border:1px solid var(--cl-acento-borde);
  box-shadow:none;animation:none;
}
.brand .bicon img{padding:0;image-rendering:auto}
.brand .bicon::after{display:none}
.brand b{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--cl-tinta);letter-spacing:-.01em;text-shadow:none}
.brand small{
  font-family:var(--font-b);font-size:.74rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--cl-tinta-3);
}
.nbtn{
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--cl-linea-2);
  background:var(--cl-superficie);
  color:var(--cl-tinta-2);
  font-family:var(--font-b);font-size:.86rem;font-weight:600;letter-spacing:0;
  clip-path:none;filter:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s var(--cl-ease);
}
.nbtn:hover{background:var(--cl-fondo-2);border-color:var(--cl-linea-2);color:var(--cl-tinta);transform:none;filter:none}
.nbtn:active{transform:scale(.98)}
.nbtn:focus-visible{outline:2px solid var(--cl-acento);outline-offset:2px}
.nbtn.gold{
  background:var(--cl-acento);border-color:var(--cl-acento);color:#fff;
}
.nbtn.gold:hover{background:var(--cl-acento-oscuro);border-color:var(--cl-acento-oscuro);color:#fff;box-shadow:none}
#userChip{
  padding:7px 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--cl-exito) 30%,white);
  background:var(--cl-exito-suave);color:var(--cl-exito);
  font-family:var(--font-b);font-size:.84rem;font-weight:600;box-shadow:none;
}
#userChip b{color:inherit;font-family:var(--font-b)}

/* ----------------------------------------------------------------
   6) HERO COMPACTO
   Alineado a la izquierda, franja teñida del acento y el catálogo
   asomando en la primera pantalla. Las cifras pasan de tarjetas a
   datos en línea.
   ---------------------------------------------------------------- */
header.hero{
  /* Banda de color del aula. Rejilla: texto a la izquierda y la escena
     ilustrada (la inyecta piel-clara.js) a la derecha. Los hijos van en
     orden de documento: kicker, h1, eslogan, descripción, cifras,
     botones, escena. */
  position:relative;isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  column-gap:48px;row-gap:0;
  align-items:start;
  text-align:left;
  padding:calc(env(safe-area-inset-top,0px) + 116px) 20px 76px;
  perspective:none;overflow:hidden;
  color:#fff;
  background:linear-gradient(120deg,var(--cl-hero) 0%,var(--cl-hero-2) 100%);
  border-bottom:none;
}
/* Ola blanca que funde la banda con el catálogo */
header.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 34 C 240 64 480 4 720 30 S 1200 62 1440 26 V60 H0 Z' fill='%23f7f8fc'/></svg>") center bottom/100% 100% no-repeat;
}
header.hero > *{grid-column:1;width:100%;max-width:1220px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
/* Las ilustraciones pixel antiguas se retiran: la escena nueva las sustituye */
.px-book,.hero-listado,.hero-robot{display:none !important}

/* Formas grandes y suaves flotando por toda la banda */
header.hero > .cl-fondo-hero{position:absolute;inset:0;z-index:0;pointer-events:none;max-width:none;margin:0;width:auto;grid-column:1 / -1;grid-row:1}
.cl-fondo-hero i{
  position:absolute;display:block;border-radius:50%;
  background:rgba(255,255,255,.10);
  animation:clDeriva 18s ease-in-out infinite alternate;
}
.cl-fondo-hero i:nth-child(1){width:260px;height:260px;left:-80px;top:-60px;animation-duration:22s}
.cl-fondo-hero i:nth-child(2){width:120px;height:120px;left:38%;top:8%;background:transparent;border:14px solid rgba(255,255,255,.12);animation-duration:16s;animation-delay:-4s}
.cl-fondo-hero i:nth-child(3){width:90px;height:90px;left:58%;bottom:12%;border-radius:22%;background:rgba(255,255,255,.12);transform:rotate(18deg);animation-duration:20s;animation-delay:-9s}
.cl-fondo-hero i:nth-child(4){width:340px;height:340px;right:-120px;bottom:-160px;background:rgba(255,255,255,.08);animation-duration:26s;animation-delay:-6s}
.cl-fondo-hero i:nth-child(5){width:56px;height:56px;left:22%;bottom:18%;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0;background:var(--cl-sol);opacity:.55;animation-duration:14s;animation-delay:-2s}
.cl-fondo-hero i:nth-child(6){width:40px;height:40px;right:30%;top:14%;border-radius:0;background:var(--cl-sol);opacity:.55;clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);animation-duration:17s;animation-delay:-11s}
@keyframes clDeriva{from{translate:0 0}to{translate:26px 18px}}

/* Escena: foto de aula en marco tipo polaroid + pegatinas */
.cl-escena{
  position:relative;margin:36px auto 0;width:min(100%,440px);aspect-ratio:4/3;
}
.cl-marco{
  position:absolute;inset:0;overflow:hidden;
  border-radius:24px;border:8px solid #fff;
  box-shadow:0 30px 60px oklch(20% 0.05 270 / .35);
  transform:rotate(-2.5deg);
  background:#fff;
}
.cl-marco img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.cl-forma{position:absolute;display:block;border-radius:50%;pointer-events:none;z-index:-1;background:rgba(255,255,255,.14)}
.cl-forma--1{width:140px;height:140px;left:-60px;top:-40px;animation:clDeriva 15s ease-in-out infinite alternate}
.cl-forma--2{width:90px;height:90px;right:-40px;top:30%;border:12px solid rgba(255,255,255,.16);background:transparent;animation:clDeriva 19s -5s ease-in-out infinite alternate-reverse}
.cl-forma--3{width:180px;height:180px;right:-50px;bottom:-70px;animation:clDeriva 23s -9s ease-in-out infinite alternate}
.cl-pegatina{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 10px;border-radius:999px;
  background:#fff;color:var(--cl-tinta);
  font-family:var(--font-b);font-size:.86rem;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 24px oklch(20% 0.05 270 / .22);
  transform:rotate(var(--rot,0deg));
  animation:clFlota 5s ease-in-out infinite;
}
.cl-pegatina i{font-style:normal;font-size:1.25rem;line-height:1}
.cl-pegatina b{font-weight:700}
.cl-pegatina--1{--rot:-6deg;left:-5%;top:-6%;animation-delay:-1s}
.cl-pegatina--2{--rot:5deg;right:-3%;top:10%;animation-delay:-2.6s}
.cl-pegatina--3{--rot:4deg;left:-3%;bottom:10%;animation-delay:-4s}
.cl-pegatina--4{--rot:-4deg;right:-2%;bottom:-7%;animation-delay:-.4s}
@keyframes clFlota{50%{transform:translateY(-9px) rotate(var(--rot,0deg))}}

/* Entrada escalonada (solo cuando el JS marca cl-listo; sin él, visible) */
.cl-listo header.hero > :not(.cl-fondo-hero){animation:clSube .55s var(--cl-ease) both}
.cl-listo header.hero > :nth-child(3){animation-delay:.05s}
.cl-listo header.hero > :nth-child(4){animation-delay:.1s}
.cl-listo header.hero > :nth-child(5){animation-delay:.15s}
.cl-listo header.hero > :nth-child(6){animation-delay:.2s}
.cl-listo header.hero > :nth-child(7){animation-delay:.25s}
.cl-listo header.hero > .cl-escena{animation-delay:.2s;animation-duration:.7s}
@keyframes clSube{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

@media (min-width:960px){
  header.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  header.hero > *{max-width:none}
  header.hero > .cl-escena{
    grid-column:2;grid-row:1 / span 7;align-self:center;justify-self:center;
    width:min(100% - 40px,470px);margin:0;
  }
}
@media (min-width:1300px){
  header.hero{padding-left:calc((100% - 1260px) / 2 + 20px);padding-right:calc((100% - 1260px) / 2 + 20px)}
}
.hero .kicker,.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  font-family:var(--font-b);font-size:.86rem;font-weight:700;
  letter-spacing:0;text-transform:none;line-height:1.4;
  color:var(--cl-hero);
  background:#fff;
  border:none;
  box-shadow:0 6px 16px oklch(20% 0.05 270 / .18);text-shadow:none;animation:none;
  width:fit-content;
}
.hero-title,.hero h1,.px-logo{
  display:block;position:static;
  font-family:var(--font-d);
  font-size:clamp(2.3rem,5vw,3.9rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.02;
  text-transform:none;
  margin:18px 0 0;padding:0;max-width:none;
  color:#fff;
  animation:none;text-shadow:none;
}
/* Logotipo por palabras de las aulas pixel ("El / Aula / de / Fran"):
   vuelve a ser una línea de texto normal. */
.px-line,.px-line.s1,.px-line.s2,.px-line.s3,.px-line.s4{
  display:inline;font-size:inherit;letter-spacing:inherit;margin:0;padding:0;animation:none;
}
.px-line + .px-line::before{content:" "}
.px-inner,.px-line .px-inner,.px-line.s1 .px-inner,.px-line.s2 .px-inner,.px-line.s4 .px-inner{
  display:inline;animation:none;transform:none;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#fff;-webkit-text-fill-color:#fff;filter:none;text-shadow:none;
}
.hero-title .grad,.hero h1 .grad,.hero-title span{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#fff;-webkit-text-fill-color:#fff;
  filter:none;animation:none;
}
.hero-slogan{
  margin-top:10px;
  font-family:var(--font-d);font-size:1.2rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--cl-sol);
  animation:none;
}
.hero .sub{
  max-width:56ch;margin:14px 0 0;
  font-family:var(--font-b);font-size:1.1rem;font-style:normal;font-weight:500;line-height:1.6;
  color:rgba(255,255,255,.92);text-shadow:none;animation:none;
}
/* Cifras como pegatinas blancas sobre la banda */
.stats{
  justify-content:flex-start;gap:10px;margin:24px auto 0;animation:none;
}
.stat{
  display:inline-flex;align-items:center;gap:8px;
  min-width:0;padding:9px 14px;border-radius:14px;
  background:#fff;border:none;color:var(--cl-tinta);
  backdrop-filter:none;box-shadow:0 8px 20px oklch(20% 0.05 270 / .18);
  transition:transform .2s var(--cl-ease),box-shadow .2s ease;
  clip-path:none;
}
.stat::before,.stat::after{display:none}
.stat:hover{transform:translateY(-3px);box-shadow:0 14px 28px oklch(20% 0.05 270 / .24);border-color:transparent}
.stat .sico{display:inline;font-size:20px;margin:0;line-height:1;filter:none;animation:none}
.stat b{display:inline;font-family:var(--font-d);font-size:1.15rem;font-weight:800;color:var(--cl-tinta);text-shadow:none}
.stat span{
  display:inline;margin:0;
  font-family:var(--font-b);font-size:.88rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--cl-tinta-2);opacity:1;
}
.hero .cta{justify-content:flex-start;margin-top:26px;gap:12px;animation:none}
/* Sobre la banda: el botón principal es blanco y el secundario, calado */
.hero .cta .bigbtn{
  background:#fff;border-color:#fff;color:var(--cl-hero);
  box-shadow:0 10px 24px oklch(20% 0.05 270 / .22);
  padding:13px 24px;font-size:1rem;border-radius:999px;
}
.hero .cta .bigbtn:hover{background:var(--cl-sol);border-color:var(--cl-sol);color:var(--cl-tinta);transform:translateY(-2px);box-shadow:0 16px 32px oklch(20% 0.05 270 / .28)}
.hero .cta .bigbtn.ghost{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;box-shadow:none}
.hero .cta .bigbtn.ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;box-shadow:none}

/* Botones principales (hero, modales, planes) */
.bigbtn,.hero .cta .bigbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:var(--cl-radio-s);
  font-family:var(--font-b);font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:#fff;background:var(--cl-acento);border:1px solid var(--cl-acento);
  box-shadow:var(--cl-sombra-1);
  clip-path:none;filter:none;
  transition:background .15s ease,border-color .15s ease,transform .15s var(--cl-ease),box-shadow .15s ease;
}
.bigbtn:hover,.hero .cta .bigbtn:hover{background:var(--cl-acento-oscuro);border-color:var(--cl-acento-oscuro);transform:translateY(-1px);box-shadow:var(--cl-sombra-2);filter:none}
.bigbtn:active{transform:none;box-shadow:var(--cl-sombra-1);filter:none}
.bigbtn:focus-visible{outline:2px solid var(--cl-acento);outline-offset:3px}
.bigbtn.ghost,.hero .cta .bigbtn.ghost{
  color:var(--cl-tinta);background:var(--cl-superficie);border-color:var(--cl-linea-2);box-shadow:none;
}
.bigbtn.ghost:hover,.hero .cta .bigbtn.ghost:hover{background:var(--cl-fondo-2);border-color:var(--cl-linea-2);color:var(--cl-tinta);box-shadow:none}
.login-box .bigbtn::after{display:none}

/* ----------------------------------------------------------------
   7) SECCIONES
   ---------------------------------------------------------------- */
section{padding:44px 20px 24px}
.shead{text-align:left;margin-bottom:22px}
.shead.rv{opacity:1;translate:none}
.shead .tag{display:none}
.shead h2{
  display:inline-block;margin-top:0;
  font-family:var(--font-d);font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  text-transform:none;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--cl-tinta);-webkit-text-fill-color:var(--cl-tinta);filter:none;text-shadow:none;
}
/* Subrayado "a mano" en el color del aula */
.shead h2::after{
  content:"";display:block;width:100%;height:10px;margin:2px 0 0;border-radius:0;
  box-shadow:none;transition:none;
  background:var(--cl-acento);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3 9 C 40 2, 80 13, 120 6 S 175 3, 197 9' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3 9 C 40 2, 80 13, 120 6 S 175 3, 197 9' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.shead.seen h2::after{width:100%}
.shead p{margin-top:4px;font-family:var(--font-b);font-size:1rem;line-height:1.5;color:var(--cl-tinta-2);opacity:1}

/* ----------------------------------------------------------------
   8) TARJETAS DE CATEGORÍA
   Blancas, grandes, con un mosaico de color por categoría (--cc
   viene del catálogo: se aclara para el fondo y se oscurece para
   el texto, así cualquier color guardado se lee sobre blanco).
   ---------------------------------------------------------------- */
.cats{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;perspective:none}
.cat{
  --cc-suave:color-mix(in srgb,var(--cc,#818cf8) 16%,white);
  --cc-borde:color-mix(in srgb,var(--cc,#818cf8) 38%,white);
  --cc-texto:color-mix(in srgb,var(--cc,#818cf8) 62%,var(--cl-tinta));
  opacity:1;translate:none;
  border-radius:var(--cl-radio);
  border:1px solid var(--cl-linea);
  background:var(--cl-superficie);
  box-shadow:var(--cl-sombra-1);
  transform:translateY(var(--ty,0));
  transform-style:flat;will-change:auto;
  clip-path:none;filter:none;
  transition:transform .2s var(--cl-ease),box-shadow .2s ease,border-color .2s ease;
}
.cat.seen{opacity:1;translate:none;transition:transform .2s var(--cl-ease),box-shadow .2s ease,border-color .2s ease}
.cat:hover,.cat:focus-visible{
  --ty:-3px;
  transform:translateY(-3px) scale(1);
  border-color:var(--cc-borde);
  box-shadow:var(--cl-sombra-2);
  filter:none;
}
.cat:focus-visible{outline:2px solid var(--cl-acento);outline-offset:3px}
.cat::after,.cat .glow{display:none}
/* Cabecera de color de la tarjeta: franja teñida con puntos y el
   icono grande como pegatina inclinada */
.cat .cimg{
  height:84px;overflow:hidden;
  background:
    radial-gradient(color-mix(in srgb,var(--cc,#818cf8) 45%,white) 1.5px,transparent 1.6px) 0 0/16px 16px,
    var(--cc-suave);
}
.cat .cimg:not(:empty){height:140px;background:var(--cc-suave)}
.cat .cimg img{transform:none;filter:none;object-fit:cover;object-position:center 30%;image-rendering:auto}
.cat:hover .cimg img{transform:none}
.cat .cimg::after{display:none}
.cat .cico{
  position:absolute;top:44px;left:20px;margin:0;
  width:68px;height:68px;border-radius:18px;
  font-size:34px;line-height:1;
  background:#fff;
  border:none;
  box-shadow:0 8px 20px oklch(20% 0.05 270 / .16);
  transform:rotate(-5deg);
  transition:transform .25s var(--cl-ease);
}
.cat .cimg:not(:empty) + .cico{top:104px}
.cat:hover .cico,.cat:focus-visible .cico{transform:rotate(3deg) scale(1.08);box-shadow:0 12px 26px oklch(20% 0.05 270 / .2)}
.cat .cbody{padding:36px 20px 18px}
.cat .cimg:not(:empty) ~ .cbody{padding-top:44px}
.cat .cbody{transform:none}
.cat h3{font-family:var(--font-d);font-size:1.12rem;font-weight:700;line-height:1.25;color:var(--cl-tinta);letter-spacing:-.01em;text-shadow:none}
.cat p{margin-top:6px;font-size:.9rem;line-height:1.55;color:var(--cl-tinta-2);min-height:0}
.cat .cfoot{margin-top:14px;gap:6px}
.chip,.badge{
  font-family:var(--font-b);font-size:.76rem;font-weight:600;
  letter-spacing:0;text-transform:none;
  padding:4px 10px;border-radius:999px;
  border:1px solid transparent;
  background:var(--cl-fondo-2);color:var(--cl-tinta-2);
  clip-path:none;transition:none;
}
.chip.lock,.badge.lock{
  background:var(--cl-aviso-suave);color:var(--cl-aviso);border-color:transparent;animation:none;box-shadow:none;
}
.cat:hover .chip{transform:none;border-color:transparent}
.cat .cgo{
  font-family:var(--font-b);font-size:.86rem;font-weight:700;
  letter-spacing:0;text-transform:none;
  color:var(--cc-texto);gap:5px;
}
.cat:hover .cgo{gap:9px}

/* ----------------------------------------------------------------
   9) PLANES (Gratuito y Premium)
   ---------------------------------------------------------------- */
#premium .pwrap{gap:16px}
.pcardx{
  border-radius:var(--cl-radio);padding:26px 24px;
  border:1px solid var(--cl-linea);background:var(--cl-superficie);
  backdrop-filter:none;box-shadow:var(--cl-sombra-1);
  opacity:1;translate:none;clip-path:none;filter:none;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s var(--cl-ease);
}
.pcardx.rv{opacity:1;translate:none}
.pcardx:hover{transform:translateY(-2px);border-color:var(--cl-linea-2);box-shadow:var(--cl-sombra-2);filter:none}
.pcardx.gold{border:2px solid var(--cl-acento-borde);background:var(--cl-superficie);box-shadow:var(--cl-sombra-1)}
.pcardx h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;line-height:1.25;color:var(--cl-tinta);text-shadow:none}
.pcardx .price{font-family:var(--font-d);font-size:1.5rem;font-weight:700;letter-spacing:-.01em;color:var(--cl-tinta);text-shadow:none;text-transform:none}
.pcardx .pfill{flex:1}
.pcardx .price small{color:var(--cl-tinta-3);font-size:.8rem}
.pcardx ul{margin-top:14px;gap:9px}
.pcardx li{font-size:.94rem;color:var(--cl-tinta-2);transform:none}
.pcardx:hover li{transform:none}
.pcardx li::before{content:"✓";color:var(--cl-acento);font-size:.9em;font-weight:700;margin-top:.2em}
.pcardx:hover li::before{color:var(--cl-acento)}
.pcardx .note{color:var(--cl-tinta-3);font-size:.84rem}
.pcardx .note a{color:var(--cl-acento);text-decoration:underline}
.pcardx .bigbtn{margin-top:18px}

/* ----------------------------------------------------------------
   10) EXPLORADOR (ventana de recursos)
   ---------------------------------------------------------------- */
.ex-backdrop{background:oklch(24% 0.035 270 / .45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ex-panel{
  height:auto;max-height:min(92dvh,800px);min-height:320px;
  border-radius:20px;border:none;
  background:var(--cl-superficie);
  box-shadow:var(--cl-sombra-3);
  clip-path:none;
  animation:clPanelIn .25s var(--cl-ease) both;
}
@keyframes clPanelIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.ex-head{padding:12px 16px;border-bottom:1px solid var(--cl-linea);background:var(--cl-fondo-2)}
/* Las migas son un <nav>: las aulas dan a `nav` fondo oscuro, blur y
   posición fija; aquí vuelven a ser texto plano. */
.ex-crumbs,.ra-crumbs{
  position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;box-shadow:none;padding:0;z-index:auto;
}
.ex-crumbs{font-size:.88rem;color:var(--cl-tinta-3)}
.ex-crumbs a{color:var(--cl-tinta-2);border-radius:8px;padding:5px 9px}
.ex-crumbs a:hover{background:var(--cl-acento-suave);color:var(--cl-acento)}
.ex-crumbs .sep{color:var(--cl-tinta-3);opacity:1}
.ex-crumbs .cur{color:var(--cl-tinta);font-weight:700}
.ex-close,.ex-back,.lclose{
  border:1px solid var(--cl-linea-2);border-radius:999px;
  background:var(--cl-superficie);color:var(--cl-tinta-2);
  font-family:var(--font-b);font-size:.86rem;font-weight:600;letter-spacing:0;text-transform:none;
  clip-path:none;filter:none;transform:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ex-close:hover,.ex-back:hover,.lclose:hover{background:var(--cl-fondo-2);color:var(--cl-tinta);box-shadow:none;filter:none}
.ex-back:active,.ex-close:active{transform:none}
.ex-close:focus-visible,.ex-back:focus-visible,.lclose:focus-visible{outline:2px solid var(--cl-acento);outline-offset:2px}
.ex-body{scrollbar-color:var(--cl-linea-2) transparent;background:var(--cl-fondo)}
.ex-view{padding:0 24px 32px}
.ex-view.in{animation:clViewIn .32s var(--cl-ease) both}
.ex-view.in.back{animation:clViewInB .32s var(--cl-ease) both}
.ex-view.out{animation:clViewOut .16s ease-in both}
.ex-view.out.back{animation:clViewOutB .16s ease-in both}
@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)}}

/* Banda de color de la categoría (el color guardado, --nc, se lleva a
   un tono profundo con sintaxis de color relativo; el color-mix previo
   es el respaldo para navegadores antiguos). */
.ex-hero{
  --nc-banda:color-mix(in srgb,var(--nc,#818cf8) 55%,#2a1f4e);
  --nc-banda-2:color-mix(in srgb,var(--nc,#818cf8) 72%,#3b2a7a);
  --nc-banda:oklch(from var(--nc,#818cf8) 47% clamp(.11,c,.19) h);
  --nc-banda-2:oklch(from var(--nc,#818cf8) 58% clamp(.13,c,.2) calc(h - 18));
  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:#fff;
  background:linear-gradient(120deg,var(--nc-banda),var(--nc-banda-2));
}
.ex-hero::before,.ex-hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.12);
  animation:clDeriva 16s ease-in-out infinite alternate;
}
.ex-hero::before{width:220px;height:220px;right:-70px;top:-110px}
.ex-hero::after{width:110px;height:110px;left:38%;bottom:-70px;background:transparent;border:14px solid rgba(255,255,255,.14);animation-duration:21s;animation-delay:-7s}
.ex-emblem{
  grid-row:1 / span 2;
  width:88px;height:88px;margin:0;border-radius:24px;font-size:44px;
  background:#fff;border:none;
  box-shadow:0 14px 30px oklch(20% 0.05 270 / .28);
  transform:rotate(-6deg);
  animation:clEmblema .7s var(--cl-ease) both,clFlotaEmblema 5s ease-in-out 1s infinite;
}
@keyframes clEmblema{from{opacity:0;transform:rotate(-20deg) scale(.6)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes clFlotaEmblema{50%{transform:rotate(-6deg) translateY(-7px)}}
.ex-hero h2{
  font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.08;
  text-transform:none;text-shadow:none;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#fff;-webkit-text-fill-color:#fff;animation:none;
  align-self:end;
}
.ex-hero .ex-sub{margin:0;font-size:1.02rem;font-weight:500;color:rgba(255,255,255,.9);align-self:start;max-width:60ch}
.ex-hero h2:only-child{grid-row:1 / span 2;align-self:center}

/* Tarjetas de recurso en formato PÓSTER (escaparate): portada
   vívida con el emoji gigante (o la imagen "portada" del catálogo si la
   hay), cinta Gratis/Premium, título grande y botón a todo el ancho. El
   primer recurso de cada carpeta sale destacado a doble ancho. */
.ex-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;perspective:none}
.ex-card{
  --nc-suave:color-mix(in srgb,var(--nc,#818cf8) 18%,white);
  --nc-borde:color-mix(in srgb,var(--nc,#818cf8) 40%,white);
  --nc-texto:color-mix(in srgb,var(--nc,#818cf8) 62%,var(--cl-tinta));
  --nc-fuerte:color-mix(in srgb,var(--nc,#818cf8) 55%,#2a1f4e);
  --nc-fuerte:oklch(from var(--nc,#818cf8) 47% clamp(.11,c,.19) h);
  --nc-portada-1:color-mix(in srgb,var(--nc,#818cf8) 80%,white);
  --nc-portada-2:color-mix(in srgb,var(--nc,#818cf8) 70%,#3b2a7a);
  --nc-portada-1:oklch(from var(--nc,#818cf8) 83% clamp(.12,c,.17) h);
  --nc-portada-2:oklch(from var(--nc,#818cf8) 62% clamp(.15,c,.21) calc(h - 25));
  display:grid;grid-template-rows:auto auto 1fr auto;gap:0;
  padding:0;min-height:0;overflow:hidden;
  border-radius:22px;border:1px solid var(--cl-linea);
  background:var(--cl-superficie);box-shadow:var(--cl-sombra-1);
  clip-path:none;filter:none;
  transition:transform .25s var(--cl-ease),box-shadow .25s ease,border-color .25s ease;
  animation:clCardIn .5s var(--cl-ease) backwards;animation-delay:var(--dl,0s);
}
.ex-card::before{display:none}
.ex-card > *{position:relative;z-index:1}
@keyframes clCardIn{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
.ex-card:hover,.ex-card:focus-visible{
  transform:translateY(-6px) scale(1.01);
  border-color:var(--nc-borde);filter:none;
}
.ex-card:focus-visible{outline:2px solid var(--cl-acento);outline-offset:3px}
/* Foco de luz que sigue al ratón (--gx/--gy los pone piel-clara.js) */
.ex-card::after{
  content:"";display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.32),transparent 62%);
  opacity:0;transition:opacity .3s ease;
}
.ex-card:hover::after{opacity:1}
.ex-card.prem{background:var(--cl-superficie)}

/* Portada */
.ex-ico{
  grid-row:1;width:100%;height:168px;margin:0;border-radius:0;
  display:grid;place-items:center;
  font-size:76px;line-height:1;
  background:
    radial-gradient(120px 120px at 18% 20%,rgba(255,255,255,.35),transparent 70%),
    radial-gradient(160px 160px at 88% 90%,rgba(255,255,255,.28),transparent 70%),
    linear-gradient(135deg,var(--nc-portada-1),var(--nc-portada-2));
  border:none;box-shadow:none;transform:none;
  overflow:hidden;
}
/* Las aulas giran y escalan .ex-ico al pasar: aquí es la portada
   entera, así que se queda quieta (lo que se mueve es el emoji). */
.ex-card:hover .ex-ico,.ex-card:focus-visible .ex-ico{transform:none;box-shadow:none}
.ex-ico::before{ /* aro decorativo que deriva */
  content:"";position:absolute;width:150px;height:150px;right:-50px;top:-60px;border-radius:50%;
  border:16px solid rgba(255,255,255,.16);
  animation:clDeriva 14s ease-in-out infinite alternate;
}
.cl-emoji{
  display:block;font-style:normal;
  filter:drop-shadow(0 14px 22px oklch(20% 0.05 270 / .35));
  transition:transform .3s var(--cl-ease);
  animation:clLevita 4.5s ease-in-out infinite;
}
@keyframes clLevita{50%{transform:translateY(-7px) rotate(-3deg)}}
.ex-card:hover .cl-emoji,.ex-card:focus-visible .cl-emoji{animation:clHechizo .6s var(--cl-ease) both;transform:scale(1.18) rotate(4deg)}
.cl-emoji::after{
  content:"✨";position:absolute;top:-6px;right:-22px;
  font-size:26px;line-height:1;opacity:0;pointer-events:none;transform:scale(.4);
}
.ex-card:hover .cl-emoji::after,.ex-card:focus-visible .cl-emoji::after{animation:clBrote .75s ease-out both}
/* Imagen de portada del catálogo (campo "portada"), si existe */
.cl-portada{position:absolute;inset:0;z-index:2}
.cl-portada img{width:100%;height:100%;object-fit:cover;display:block}
.cl-portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,16,50,.45))}
.ex-card:has(.cl-portada) .cl-emoji{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font-size:30px;width:52px;height:52px;display:grid;place-items:center;
  background:#fff;border-radius:14px;box-shadow:0 8px 20px oklch(20% 0.05 270 / .25);
}

/* Cinta Gratis / Premium */
.badge{
  position:absolute;top:14px;left:14px;right:auto;z-index:4;
  padding:6px 12px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:#fff;color:var(--cl-exito);
  box-shadow:0 6px 14px oklch(20% 0.05 270 / .22);
}
.badge.lock{background:#fff;color:oklch(48% 0.13 70)}

/* Texto y acción */
.ex-card b{
  font-family:var(--font-d);font-size:1.15rem;font-weight:800;color:var(--cl-tinta);
  padding:16px 18px 0;line-height:1.2;margin:0;
}
.ex-card p{font-size:.9rem;line-height:1.5;color:var(--cl-tinta-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(--font-b);font-size:.92rem;font-weight:800;
  letter-spacing:0;text-transform:none;
  color:#fff;background:var(--nc-fuerte);
  box-shadow:0 8px 18px color-mix(in srgb,var(--nc,#818cf8) 35%,transparent);
  transition:transform .2s var(--cl-ease),box-shadow .2s ease,gap .2s ease;
}
.ex-card:hover .ex-go,.ex-card:focus-visible .ex-go{gap:12px;transform:translateY(-1px);box-shadow:0 12px 24px color-mix(in srgb,var(--nc,#818cf8) 50%,transparent);color:#fff;background:var(--nc-fuerte)}

/* Destacado: el primero de cada carpeta con 3 o más recursos, a doble
   ancho y en horizontal */
@media (min-width:720px){
  .ex-grid:has(> .ex-card:nth-child(3)) > .ex-card:first-child{
    grid-column:span 2;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    /* filas 1 y 5 elásticas: el texto queda centrado y la portada
       ocupa toda la altura */
    grid-template-rows:1fr auto auto auto 1fr;
    align-items:start;
  }
  .ex-grid:has(> .ex-card:nth-child(3)) > .ex-card:first-child .ex-ico{
    grid-column:1;grid-row:1 / span 5;height:100%;min-height:250px;font-size:96px;
  }
  .ex-grid:has(> .ex-card:nth-child(3)) > .ex-card:first-child b{grid-column:2;grid-row:2;font-size:1.5rem;padding-top:0}
  .ex-grid:has(> .ex-card:nth-child(3)) > .ex-card:first-child p{grid-column:2;grid-row:3;font-size:1rem;padding-top:8px}
  .ex-grid:has(> .ex-card:nth-child(3)) > .ex-card:first-child .ex-go{grid-column:2;grid-row:4;justify-self:start;margin-top:18px;margin-bottom:0}
  .ex-grid:has(> .ex-card:nth-child(3)) > .ex-card:first-child .badge{left:auto;right:14px}
}
.ex-text{
  max-width:70ch;margin:0;padding:22px 24px;border-radius:18px;
  background:var(--cl-superficie);border:1px solid var(--cl-linea);box-shadow:var(--cl-sombra-1);
  font-size:1.02rem;line-height:1.75;color:var(--cl-tinta-2);
}
/* ---- Magia: chispas, aura, hechizo y barrido de luz ----
   Las chispas (.cl-chispas) y la capa de brillo (.cl-brillo) las
   añade piel-clara.js a cada tarjeta; sin JS, queda el aura y el
   resplandor del hover, que son CSS puro. */
.ex-card > .cl-chispas,.cat > .cl-chispas{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit;
}
.cl-chispas i{
  position:absolute;display:block;
  background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.95));
  opacity:0;transform:scale(.3);
  animation:clTitila var(--dur,2.4s) ease-in-out var(--del,0s) infinite;
}
.cl-chispas i:nth-child(odd){background:var(--cl-sol);filter:drop-shadow(0 0 5px oklch(88% 0.17 90 / .9))}
@keyframes clTitila{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:.95;transform:scale(1) rotate(60deg)}}
.ex-card:hover .cl-chispas i,.cat:hover .cl-chispas i{animation-duration:.9s}

.ex-card > .cl-brillo,.cat > .cl-brillo{
  position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);
  transform:translateX(-130%);
}
.ex-card:hover > .cl-brillo,.cat:hover > .cl-brillo{animation:clBarrido .9s ease-out both}
@keyframes clBarrido{to{transform:translateX(130%)}}

/* Aura de luz que respira detrás del icono de categoría */
.ex-ico{position:relative}
.cat .cico{
  position:absolute; /* sigue siendo la pegatina flotante de la cabecera */
  animation:clAura 3.2s ease-in-out infinite;
  --aura:color-mix(in srgb,var(--cc,#818cf8) 55%,white);
}
@keyframes clAura{
  0%,100%{box-shadow:0 8px 20px oklch(20% 0.05 270 / .16),0 0 0 4px color-mix(in srgb,var(--aura) 45%,transparent),0 0 18px color-mix(in srgb,var(--aura) 55%,transparent)}
  50%{box-shadow:0 8px 20px oklch(20% 0.05 270 / .16),0 0 0 8px color-mix(in srgb,var(--aura) 28%,transparent),0 0 34px color-mix(in srgb,var(--aura) 85%,transparent)}
}
/* Hechizo al pasar: el icono se agita y suelta un destello */
.cat:hover .cico,.cat:focus-visible .cico{
  animation:clHechizo .6s var(--cl-ease) both;
  transform:rotate(4deg) scale(1.1);
}
@keyframes clHechizo{
  0%{transform:rotate(-5deg) scale(1)}
  30%{transform:rotate(-14deg) scale(1.12)}
  60%{transform:rotate(9deg) scale(1.14)}
  100%{transform:rotate(4deg) scale(1.1)}
}
.cat .cico::after{
  content:"✨";position:absolute;top:-12px;right:-14px;
  font-size:20px;line-height:1;opacity:0;pointer-events:none;
  transform:scale(.4);
}
.cat:hover .cico::after,.cat:focus-visible .cico::after{animation:clBrote .75s ease-out both}
@keyframes clBrote{
  0%{opacity:0;transform:scale(.4) translate(0,0)}
  35%{opacity:1;transform:scale(1.25) translate(3px,-6px)}
  100%{opacity:0;transform:scale(1) translate(12px,-18px)}
}
/* Resplandor de toda la tarjeta */
.ex-card:hover,.ex-card:focus-visible{
  box-shadow:var(--cl-sombra-2),0 0 0 2px var(--nc-borde),0 0 40px color-mix(in srgb,var(--nc,#818cf8) 45%,transparent);
}
.cat:hover,.cat:focus-visible{
  box-shadow:var(--cl-sombra-2),0 0 0 2px var(--cc-borde),0 0 36px color-mix(in srgb,var(--cc,#818cf8) 40%,transparent);
}

/* Premium: portada y botón de oro que reluce */
.ex-card.prem .ex-ico{
  background:
    radial-gradient(120px 120px at 18% 20%,rgba(255,255,255,.4),transparent 70%),
    radial-gradient(160px 160px at 88% 90%,rgba(255,255,255,.3),transparent 70%),
    linear-gradient(135deg,oklch(88% 0.14 90),oklch(72% 0.17 70) 60%,oklch(62% 0.16 55));
}
.ex-card.prem .badge.lock{color:oklch(48% 0.13 70);background:#fff}
.ex-card.prem .ex-go,.ex-card.prem:hover .ex-go{
  color:var(--cl-tinta);
  background:linear-gradient(120deg,oklch(92% 0.13 88),oklch(84% 0.16 80),oklch(95% 0.1 92),oklch(84% 0.16 80));
  background-size:250% 100%;
  box-shadow:0 8px 18px oklch(75% 0.15 80 / .5);
  animation:clReluce 3s linear infinite;
}
.ex-card.prem:hover .ex-go{animation-duration:1.2s}
@keyframes clReluce{to{background-position:-250% 0}}

.ex-back{display:inline-flex;margin-top:20px;padding:10px 18px}
.ex-empty{
  margin:8px auto 0;padding:40px 20px;max-width:520px;
  border:2px dashed var(--cl-linea-2);border-radius:20px;
  color:var(--cl-tinta-2);font-weight:600;text-align:center;
}
.ex-empty::before{content:"🌱";display:block;font-size:2.6rem;margin-bottom:8px}
@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-hero .ex-sub{font-size:.94rem}
  .ex-ico{height:150px;font-size:66px}
}

/* ----------------------------------------------------------------
   11) BUSCADOR
   ---------------------------------------------------------------- */
.s-panel{
  border-radius:16px;border:none;background:var(--cl-superficie);
  box-shadow:var(--cl-sombra-3);animation:clPanelIn .2s var(--cl-ease) both;
}
.s-panel input{padding:18px 20px;font-size:1.05rem;color:var(--cl-tinta);border-bottom:1px solid var(--cl-linea)}
.s-panel input::placeholder{color:var(--cl-tinta-3)}
.s-item:hover{background:var(--cl-fondo-2)}
.s-item .si{background:var(--cl-fondo-2);border:1px solid var(--cl-linea)}
.s-item b{color:var(--cl-tinta);font-family:var(--font-b)}
.s-item small{color:var(--cl-tinta-3)}
.s-item .tagp{border-radius:999px;font-weight:600}
.s-empty{color:var(--cl-tinta-3)}

/* ----------------------------------------------------------------
   12) MODALES: acceso, usuarios, planes, editor de recursos
   ---------------------------------------------------------------- */
.login-box,.admin-box,.ra-panel,.ra-form{
  border-radius:20px;border:none;
  background:var(--cl-superficie);
  box-shadow:var(--cl-sombra-3);
  clip-path:none;
  animation:clPanelIn .25s var(--cl-ease) both;
  scrollbar-color:var(--cl-linea-2) transparent;
}
.login-box .lico,.admin-box .lico{
  border-radius:16px;background:var(--cl-acento-suave);
  border:1px solid var(--cl-acento-borde);box-shadow:none;animation:none;
}
.login-box h3,.admin-box h3{color:var(--cl-tinta);font-size:1.3rem}
.login-box .lsub,.admin-box .lsub{color:var(--cl-tinta-2);font-size:.9rem}
.lfield label,.raf label,.adm-listtitle,.fm-campo label{
  font-family:var(--font-b);font-size:.82rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--cl-tinta-2);
}
.lfield input,.raf input,.raf select,.raf textarea,.fm-campo input,.fm-campo select,.fm-campo textarea{
  border-radius:var(--cl-radio-s);
  background:var(--cl-superficie);color:var(--cl-tinta);
  border:1px solid var(--cl-linea-2);
}
.lfield input::placeholder,.raf input::placeholder,.raf textarea::placeholder{color:var(--cl-tinta-3)}
.lfield input:focus,.raf input:focus,.raf select:focus,.raf textarea:focus,
.fm-campo input:focus,.fm-campo select:focus,.fm-campo textarea:focus{
  border-color:var(--cl-acento);
  box-shadow:0 0 0 3px var(--cl-acento-suave);
}
.raf select option{background:var(--cl-superficie);color:var(--cl-tinta)}
#loginError,#admError,.raError,#ssoPassError{color:var(--cl-error)}
#admError.ok{color:var(--cl-exito)}
.login-box .lhint{color:var(--cl-tinta-3)}
.login-box .lhint a{color:var(--cl-acento)}
.lclose{width:36px;height:36px;padding:0;border-radius:50%}
.adm-listwrap{border-top:1px solid var(--cl-linea)}
.adm-row{border-radius:12px;background:var(--cl-fondo-2);border:1px solid var(--cl-linea)}
.adm-row b{color:var(--cl-tinta);font-family:var(--font-b)}
.adm-row .adm-tag,.ra-tagt,.plan-chip,.raf-toggle button{
  font-family:var(--font-b);font-size:.76rem;font-weight:600;
  letter-spacing:0;text-transform:none;border-radius:999px;
}
.adm-row .adm-tag{background:var(--cl-acento-suave);color:var(--cl-acento);border-color:var(--cl-acento-borde)}
.adm-row .adm-ico,.ra-acts button{
  border-radius:10px;border:1px solid var(--cl-linea-2);
  background:var(--cl-superficie);color:var(--cl-tinta-2);
}
.adm-row .adm-ico:hover,.ra-acts button:hover,.ra-acts .open:hover{background:var(--cl-fondo-2);color:var(--cl-tinta)}
.adm-row .adm-ico.del:hover,.ra-acts .del:hover{background:var(--cl-error-suave);border-color:var(--cl-error);color:var(--cl-error)}
.adm-empty{color:var(--cl-tinta-3)}
.adm-actions .bigbtn{padding:11px 16px}

/* Editor de recursos (solo administrador) */
.ra-head{border-bottom:1px solid var(--cl-linea);background:var(--cl-fondo-2)}
.ra-title{color:var(--cl-tinta)}
.ra-save{
  border-radius:999px;border:1px solid color-mix(in srgb,var(--cl-exito) 30%,white);
  background:var(--cl-exito-suave);color:var(--cl-exito);font-weight:700;
}
.ra-save:enabled:hover{background:var(--cl-exito);color:#fff;box-shadow:none}
.ra-save.dirty{animation:none;box-shadow:0 0 0 3px var(--cl-exito-suave)}
.ra-crumbs{color:var(--cl-tinta-3)}
.ra-crumbs a{color:var(--cl-tinta-2)}
.ra-crumbs a:hover{background:var(--cl-acento-suave);color:var(--cl-acento)}
.ra-crumbs .sep{color:var(--cl-tinta-3)}
.ra-crumbs .cur{color:var(--cl-tinta);font-weight:700}
.ra-add{border:1px dashed var(--cl-linea-2);background:var(--cl-fondo-2);color:var(--cl-tinta-2);border-radius:999px;font-weight:600}
.ra-add:hover{background:var(--cl-linea);color:var(--cl-tinta)}
.ra-add.res{border-color:var(--cl-acento-borde);background:var(--cl-acento-suave);color:var(--cl-acento)}
.ra-add.res:hover{background:var(--cl-acento);color:#fff}
.ra-hint{color:var(--cl-tinta-3)}
.ra-body{scrollbar-color:var(--cl-linea-2) transparent}
.ra-item{border-radius:12px;background:var(--cl-superficie);border:1px solid var(--cl-linea)}
.ra-item:hover{border-color:var(--cl-linea-2);background:var(--cl-fondo-2)}
.ra-item .ra-emoji{background:var(--cl-fondo-2);border:1px solid var(--cl-linea)}
.ra-item .ra-name{color:var(--cl-tinta)}
.ra-item .ra-sub{color:var(--cl-tinta-3)}
.ra-tagt.fold{border-color:var(--cl-linea-2);color:var(--cl-tinta-2);background:var(--cl-fondo-2)}
.ra-tagt.free{border-color:transparent;color:var(--cl-exito);background:var(--cl-exito-suave)}
.ra-tagt.paid{border-color:transparent;color:var(--cl-aviso);background:var(--cl-aviso-suave)}
.ra-tagt.text{border-color:transparent;color:var(--cl-acento);background:var(--cl-acento-suave)}
.ra-empty{color:var(--cl-tinta-3)}
.ra-card{border-radius:14px;border:1px solid var(--cl-linea);background:var(--cl-superficie);animation:clCardIn .25s var(--cl-ease) backwards}
.ra-card:hover{border-color:var(--cl-linea-2);box-shadow:var(--cl-sombra-2)}
.ra-card__media{background:color-mix(in srgb,var(--rc,#818cf8) 16%,white)}
.ra-card__media img{opacity:1}
.ra-card__emoji{filter:none}
.ra-card__title{color:var(--cl-tinta)}
.ra-card__sub{color:var(--cl-tinta-3)}
.ra-card__del,.ra-card__ord,.ra-card__edit{background:var(--cl-superficie);color:var(--cl-tinta-2);border:1px solid var(--cl-linea-2);box-shadow:var(--cl-sombra-1)}
.ra-card__del{color:var(--cl-error)}
.ra-card__del:hover{background:var(--cl-error);color:#fff}
.ra-card__ord:hover,.ra-card__edit:hover{background:var(--cl-fondo-2);color:var(--cl-tinta)}
.ra-card--add{border:2px dashed var(--cl-linea-2);color:var(--cl-tinta-3);border-radius:14px}
.ra-card--add:hover{border-color:var(--cl-acento);color:var(--cl-acento)}
.ra-prev{border-radius:12px;background:var(--cl-fondo-2);border:1px solid var(--cl-linea)}
.ra-prev__ico{background:color-mix(in srgb,var(--rc,#818cf8) 16%,white);border:1px solid color-mix(in srgb,var(--rc,#818cf8) 38%,white)}
.ra-prev__title{color:var(--cl-tinta)}
.ra-prev__hint{color:var(--cl-tinta-3)}
.ra-form-wrap{background:oklch(24% 0.035 270 / .35)}
.ra-form-head{border-bottom:1px solid var(--cl-linea)}
.ra-form-head b{color:var(--cl-tinta)}
.raf label .opt{color:var(--cl-tinta-3)}
.raf-toggle button{border:1px solid var(--cl-linea-2);background:var(--cl-superficie);color:var(--cl-tinta-2);border-radius:var(--cl-radio-s)}
.raf-toggle button.sel{border-color:var(--cl-acento);background:var(--cl-acento-suave);color:var(--cl-acento)}
.plan-chip,.planchip{
  font-family:var(--font-b);font-size:.8rem;font-weight:600;border-radius:999px;
  border:1px solid var(--cl-linea-2);background:var(--cl-superficie);color:var(--cl-tinta-2);
}
.plan-chip:hover,.planchip:hover{border-color:var(--cl-acento-borde)}
.plan-chip.sel,.planchip.on{border-color:var(--cl-acento);background:var(--cl-acento-suave);color:var(--cl-acento)}
.plan-empty{color:var(--cl-tinta-3)}

/* Editor de planes de las aulas pixel (El Aula de Fran, Aula Virtual) */
.pl-panel{
  border-radius:20px;border:none;background:var(--cl-superficie);
  box-shadow:var(--cl-sombra-3);clip-path:none;animation:clPanelIn .25s var(--cl-ease) both;
}
.pl-body{scrollbar-color:var(--cl-linea-2) transparent}
.pl-listtitle{font-family:var(--font-b);font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--cl-tinta-2)}
.pl-addplan{border:1px dashed var(--cl-linea-2);background:var(--cl-fondo-2);color:var(--cl-tinta-2);border-radius:999px;font-family:var(--font-b);font-weight:600;clip-path:none;filter:none}
.pl-addplan:hover{background:var(--cl-linea);color:var(--cl-tinta)}
.plc{border-radius:14px;border:1px solid var(--cl-linea);background:var(--cl-superficie);box-shadow:var(--cl-sombra-1)}
.plc.oro{border-color:var(--cl-acento-borde);background:var(--cl-superficie)}
.plc input,.plc textarea,.plc select,.pl-gfield input,.pl-gfield textarea{
  border-radius:var(--cl-radio-s);background:var(--cl-superficie);color:var(--cl-tinta);border:1px solid var(--cl-linea-2);
}
.plc input:focus,.plc textarea:focus,.pl-gfield input:focus,.pl-gfield textarea:focus{border-color:var(--cl-acento);box-shadow:0 0 0 3px var(--cl-acento-suave)}
.plc-move button,.plc-del,.fdel,.plc-addfeat{border-radius:8px;border:1px solid var(--cl-linea-2);background:var(--cl-superficie);color:var(--cl-tinta-2)}
.plc-move button:hover,.plc-addfeat:hover{background:var(--cl-fondo-2);color:var(--cl-tinta)}
.plc-del:hover,.fdel:hover{background:var(--cl-error-suave);border-color:var(--cl-error);color:var(--cl-error)}
.plc-star{color:var(--cl-tinta-2)}
.plc-star .box{border:1px solid var(--cl-linea-2);background:var(--cl-superficie);border-radius:6px}
.plc-star.on .box{background:var(--cl-acento);border-color:var(--cl-acento);color:#fff}
.adm-planT,.adm-plantags span{font-family:var(--font-b);font-size:.74rem;font-weight:600;border-radius:999px;background:var(--cl-acento-suave);color:var(--cl-acento);border:1px solid var(--cl-acento-borde)}

/* ----------------------------------------------------------------
   13) PIE, AVISOS Y VARIOS
   ---------------------------------------------------------------- */
footer{
  margin-top:40px;padding:40px 20px calc(env(safe-area-inset-bottom,0px) + 36px);
  border-top:none;
  background:linear-gradient(120deg,var(--cl-hero),var(--cl-hero-2));
  font-family:var(--font-b);color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.9;
}
footer b{font-family:var(--font-d);font-size:1rem;font-weight:800;letter-spacing:0;color:#fff;text-shadow:none}
footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--cl-sol)}
#toast{
  border-radius:12px;background:var(--cl-tinta);color:#fff;border:none;
  box-shadow:var(--cl-sombra-2);font-weight:600;
}
#toTop{
  border-radius:12px;color:var(--cl-tinta-2);border:1px solid var(--cl-linea-2);
  background:var(--cl-superficie);box-shadow:var(--cl-sombra-1);backdrop-filter:none;
}
#toTop:hover{border-color:var(--cl-acento-borde);color:var(--cl-acento);box-shadow:var(--cl-sombra-2)}
.fm-recaptcha-aviso{color:var(--cl-tinta-3)}
.fm-recaptcha-aviso a{color:var(--cl-tinta-2)}
.fm-recaptcha-aviso a:hover{color:var(--cl-acento)}
.fm-olvide a{color:var(--cl-acento) !important;opacity:1 !important;text-decoration:underline}
.fm-salto{background:var(--cl-tinta);color:#fff}

/* Cortina de transición entre páginas: el acento claro del aula */
.fm-cortina i{background:var(--cl-acento)}

/* ----------------------------------------------------------------
   14) ASISTENTE "FRAN" (mascota pixel)
   El sprite se queda (es la marca); el bocadillo pasa a tarjeta
   blanca con esquinas redondeadas.
   ---------------------------------------------------------------- */
.fm-bocadillo{
  background:var(--cl-superficie);
  border:1px solid var(--cl-linea-2);
  border-radius:14px;
  clip-path:none;
  color:var(--cl-tinta);
  box-shadow:var(--cl-sombra-2);
}
.fm-flecha{
  width:14px;height:14px;
  margin:-8px 40px 0 auto;
  background:var(--cl-superficie);
  border-right:1px solid var(--cl-linea-2);
  border-bottom:1px solid var(--cl-linea-2);
  clip-path:none;
  transform:rotate(45deg);
}
.fm-nombre{
  font-family:var(--font-d);font-size:.8rem;font-weight:700;letter-spacing:0;
  color:var(--cl-acento);text-shadow:none;margin-bottom:.3rem;
}
.fm-texto{color:var(--cl-tinta-2);font-size:.9rem}
.fm-tecleando .fm-texto-visible::after{color:var(--cl-acento)}
.fm-cerrar{font-family:var(--font-b);font-size:1rem;color:var(--cl-tinta-3)}
.fm-cerrar:hover{color:var(--cl-error)}
.fm-avatar::after{background:radial-gradient(closest-side,oklch(24% 0.035 270 / .22),transparent 72%)}
.fm-asistente--cerrado .fm-avatar{
  background:var(--cl-superficie);
  border:3px solid var(--cl-linea-2);
  box-shadow:var(--cl-sombra-1);
}
.fm-asistente--cerrado .fm-avatar:hover{border-color:var(--cl-acento);box-shadow:var(--cl-sombra-2)}

/* Componentes pixel compartidos que pudieran aparecer */
.px-panel,.px-btn,.px-chip,.px-badge,.px-tooltip::after,.px-barra-progreso{clip-path:none;border-radius:var(--cl-radio-s)}
.px-btn,.px-badge,.px-tooltip::after,.px-titulo h2,.px-titulo h3{font-family:var(--font-b);font-size:.9rem;text-shadow:none}

/* ----------------------------------------------------------------
   15) MÓVIL
   ---------------------------------------------------------------- */
@media (max-width:720px){
  header.hero{padding-top:calc(env(safe-area-inset-top,0px) + 100px);padding-bottom:64px}
  .hero-title,.hero h1,.px-logo{font-size:2.1rem}
  .hero .sub{font-size:1rem}
  .stat{padding:7px 11px;border-radius:12px}
  .stat b{font-size:1rem}
  .stat span{font-size:.82rem}
  .cl-escena{width:min(100% - 24px,360px);margin:40px auto 0}
  .cl-pegatina{font-size:.78rem;padding:6px 11px 6px 8px}
  .cl-pegatina i{font-size:1.05rem}
  .cl-pegatina--1{left:-4%;top:-8%}
  .cl-pegatina--2{right:-4%;top:6%}
  .cl-pegatina--3{left:-4%;bottom:8%}
  .cl-pegatina--4{right:-4%;bottom:-8%}
  section{padding:30px 14px 16px}
  .cats{grid-template-columns:1fr;gap:12px}
  .cat .cimg:not(:empty){height:150px}
  .cat .cimg:not(:empty) + .cico{top:116px}
  .cat .cico{width:60px;height:60px;font-size:30px;top:52px;left:16px}
  .cat .cbody{padding:34px 16px 16px}
  .cat .cimg:not(:empty) ~ .cbody{padding-top:40px}
  .cat h3{font-size:1.05rem}
  .cat p{font-size:.88rem}
  .cat .cgo{display:flex}
  .ex-panel{border-radius:16px}
  .ex-view{padding:16px 14px 24px}
  .ex-hero{grid-template-columns:auto 1fr;gap:2px 12px}
  .ex-emblem{width:52px;height:52px;font-size:24px;border-radius:14px}
  .ex-hero h2{font-size:1.25rem}
}
@media (min-width:721px) and (max-width:1000px){
  .cats{grid-template-columns:repeat(2,1fr)}
}

/* ----------------------------------------------------------------
   16) MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cat,.ex-card,.pcardx,.bigbtn,.nbtn,.stat,.ex-panel,.s-panel,.login-box,.admin-box,.ra-panel,.ra-form,.ra-card,
  .cl-fondo-hero i,.cl-forma,.cl-pegatina,.cl-listo header.hero > *{
    transition:none;animation:none;
  }
  .cat:hover,.ex-card:hover,.pcardx:hover,.bigbtn:hover,.stat:hover{transform:none}
  .cat .cico,.cat:hover .cico{transition:none;transform:rotate(-5deg)}
  .ex-view.in,.ex-view.out,.ex-view.in.back,.ex-view.out.back{animation:none}
  .cl-chispas i{animation:none;opacity:.6;transform:scale(1)}
  .cl-brillo,.ex-card:hover > .cl-brillo,.cat:hover > .cl-brillo{animation:none;display:none}
  .cat .cico,.cat:hover .cico{animation:none;box-shadow:0 8px 20px oklch(20% 0.05 270 / .16)}
  .cat .cico::after,.cl-emoji::after,.ex-ico::before{display:none}
  .cl-emoji,.ex-card:hover .cl-emoji{animation:none;transform:none}
  .ex-card::after{display:none}
  .ex-card.prem .ex-go,.ex-card.prem:hover .ex-go{animation:none}
  .ex-emblem{animation:none;transform:rotate(-6deg)}
}