/* ══════════════════════════════════════════════════════════════════════════════
   TEMA 2026 — la app con el aspecto de la web (retorika.es)
   ──────────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de style.css y gana por orden. Aquí vive el sistema visual
   entero: letras, colores, el esqueleto (menú lateral en ordenador, cabecera y
   barra inferior en móvil) y el aspecto de cada pieza. style.css sigue siendo la
   base de maquetación; lo que se ve lo decide este archivo.

   Las reglas del diseño, en corto:
   - Inter para leer; Space Grotesk para la marca, el menú y las etiquetas
     espaciadas en mayúsculas (una por bloque, como en la web).
   - Tinta #0B1220 sobre casi blanco #FBFCFD, líneas finas #E7EBF1, sin sombras.
   - Fucsia, verde y azul de la marca SOLO como código (paso del día, asignatura),
     nunca como fondo decorativo. Nada de degradados, brillos ni animaciones de
     fondo.
   - Titular grande en mayúsculas una vez por pantalla; el resto, tranquilo.
   Lo explica docs/areas/inicio.md, sección «Tema 2026».
   ══════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/vendor/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/vendor/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --t-ink:#0B1220;
  --t-ink-2:#5A6577;
  --t-line:#E7EBF1;
  --t-line-2:#EEF1F5;
  --t-paper:#FBFCFD;
  --t-soft:#F3F6FB;
  --t-blue:#1D6DF0;
  --t-blue-soft:#E8F0FE;
  --t-pink:#F4166B;
  --t-pink-text:#D40E5A;
  --t-green:#12C56B;
  --t-green-text:#077A3F;
  --t-blue-text:#1A64DC;   /* el azul de marca, como color de letra (≥ 4,5:1 también sobre --t-blue-soft) */
  --t-label:'Space Grotesk','Inter',system-ui,sans-serif;
  /* Las variables viejas se reapuntan al tema: así todo lo que ya las usa
     (cientos de reglas de style.css) cambia de golpe y en la misma dirección. */
  --primary:#1D6DF0;--primary-dark:#0B4FC4;--accent:#0B4FC4;
  --navy:#0B1220;--text:#0B1220;--text2:#3D4757;--text3:#5A6577;
  --bg:#FBFCFD;--blue-ghost:#FBFCFD;--border:#E7EBF1;--border-light:#E7EBF1;
  --dark:#0B1220;
}

html,body{background:var(--t-paper);color:var(--t-ink)}
body{font-family:var(--font);-webkit-font-smoothing:antialiased}
.dash-layout,.dash-main,.dash-content,.dash-bienvenida,.dash-content.dash-bienvenida{background:var(--t-paper)}

/* Etiqueta espaciada de la marca: «TU CURSO», «VIERNES, 25 DE SEPTIEMBRE»… */

/* ══ ESQUELETO ═══════════════════════════════════════════════════════════════
   Menú lateral a la izquierda, blanco y sin adornos, que se puede ocultar
   (alternarLateral() en app.js, clase body.lateral-oculto; se recuerda en el
   navegador). Oculto, el contenido ocupa todo el ancho y queda un botón pequeño
   arriba a la izquierda para volver a abrirlo. En móvil no hay menú lateral:
   cabecera arriba y barra de navegación abajo. */

.rk-logo::before,.rk-escudo,.rk-logo-r,.rk-chispas{display:none !important}
.rk-marca{display:block;height:20px;width:auto}
.rk-lateral-abrir,.rk-lateral-cerrar{display:none}

@media(min-width:769px){
  .dash-layout{flex-direction:row;background:var(--t-paper)}
  .rk-topnav{
    position:relative;width:240px;height:100vh;flex-shrink:0;box-sizing:border-box;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:28px 14px 16px;overflow-y:auto;overflow-x:hidden;
    background:#fff;border-right:1px solid var(--t-line);border-bottom:0;box-shadow:none;
    transition:width .28s ease,padding .28s ease,border-color .28s ease
  }
  .rk-logo{display:block !important;position:static;transform:none;width:fit-content;height:auto;order:-1;margin:2px 48px 34px 12px}
  .rk-marca{height:19px}

  .rk-lateral-cerrar{display:flex;position:absolute;z-index:3;top:22px;right:10px;width:34px;height:34px;align-items:center;justify-content:center;
    border:0;border-radius:9px;background:none;color:#5E6A7E;cursor:pointer;font-size:19px;transition:background .15s,color .15s}
  .rk-lateral-cerrar:hover{background:var(--t-soft);color:var(--t-ink)}
  .rk-lateral-abrir{position:fixed;top:18px;left:18px;z-index:60;width:42px;height:42px;align-items:center;justify-content:center;
    border:1px solid rgba(18,30,52,.14);border-radius:50%;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    color:var(--t-ink);cursor:pointer;font-size:19px;box-shadow:0 8px 22px -12px rgba(16,38,72,.35)}
  .rk-lateral-abrir:hover{background:#fff}
  .rk-lateral-cerrar:focus-visible,.rk-lateral-abrir:focus-visible{outline:2px solid var(--t-blue);outline-offset:2px}

  /* Oculto: el menú se pliega a cero y aparece el botón de abrir */
  body.lateral-oculto .rk-topnav{width:0;padding-left:0;padding-right:0;border-right-color:transparent}
  body.lateral-oculto .rk-topnav > *{visibility:hidden}
  body.lateral-oculto .rk-lateral-abrir{display:flex}

  /* Entradas del menú: icono fino y nombre, sin cajas */
  .rk-home,.rk-nav .dash-nav-item{
    display:flex;align-items:center;justify-content:flex-start;gap:12px;
    width:auto;height:40px;padding:0 12px;margin:0;border:0;border-radius:9px;
    background:none;box-shadow:none;position:relative;
    font:500 14.5px/1 var(--font);letter-spacing:0;text-transform:none;text-decoration:none;
    color:#5A6577;-webkit-text-fill-color:currentColor;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;
    white-space:nowrap;transition:background .15s,color .15s
  }
  .rk-home i,.rk-nav .dash-nav-item i{display:inline-block;font-size:19px;width:20px;text-align:center;color:#5E6A7E;transition:color .15s}
  .rk-home .rk-lbl{display:inline}
  .rk-nav .dash-nav-item::before{display:none}
  .rk-home::after,.rk-nav .dash-nav-item::after{display:none}
  .rk-home:hover,.rk-nav .dash-nav-item:hover{background:var(--t-soft);color:var(--t-ink);box-shadow:none;background-image:none}
  .rk-home:hover i,.rk-nav .dash-nav-item:hover i{color:var(--t-ink)}
  .rk-home.active,.rk-nav .dash-nav-item.active{background:var(--t-soft);color:var(--t-ink);font-weight:600;background-image:none}
  .rk-home.active i,.rk-nav .dash-nav-item.active i{color:var(--t-blue-text)}
  .rk-home:focus-visible,.rk-nav .dash-nav-item:focus-visible{outline:2px solid var(--t-blue);outline-offset:-2px;border-radius:9px}
  .rk-nav{flex-direction:column;align-items:stretch;gap:1px;padding:0 !important;margin:0 !important}
  /* Un respiro entre lo del día a día y lo demás (Logros, Retorika, Tienda) */
  .rk-nav-der{display:flex !important;margin-top:18px !important;padding-top:18px !important;border-top:1px solid var(--t-line-2)}
  .rk-menu-secciones,.rk-menu-secciones-sep{display:none !important}

  /* Pie: amigos, avisos y desplegable en fila; debajo la ficha del usuario */
  .rk-user{margin:auto 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--t-line-2);flex-wrap:wrap;gap:6px;align-items:center}
  .rk-topnav .dash-user-card{
    order:2;flex:1 1 100%;max-width:none;width:auto;box-sizing:border-box;
    display:flex;align-items:center;gap:10px;padding:8px;
    background:none;border:0;border-radius:12px;box-shadow:none;cursor:pointer
  }
  .rk-topnav .dash-user-card:hover{background:var(--t-soft)}
  .rk-user-txt{display:block !important;min-width:0}
  .rk-topnav .dash-av{width:34px;height:34px;font-size:12px;background:var(--t-ink);color:#fff;box-shadow:none}
  .rk-topnav .dash-av-name{font:600 13.5px var(--font);color:var(--t-ink);letter-spacing:0;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rk-topnav .dash-av-status{display:flex;font-size:12px;color:var(--t-ink-2)}
  .rk-topnav .dash-av-status i{color:var(--t-ink-2)}
  .rk-topnav .dash-av-status b{color:var(--t-ink);font-weight:600}
  .rk-rtk-lbl{display:none}
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{width:36px;height:36px;border-radius:9px;background:none;border:0;box-shadow:none}
  .rk-topnav .dash-friends-wrap:hover,.rk-topnav .dash-bell-wrap:hover{background:var(--t-soft)}
  .rk-topnav .dash-friends-wrap i,.rk-topnav .dash-bell-wrap i{color:#5A6577;font-size:18px}
  body:not(.rail-oculto) .rk-topnav .dash-friends-wrap{background:none;border-color:transparent}
  body:not(.rail-oculto) .rk-topnav .dash-friends-wrap i{color:#5A6577}
  .rk-menu-btn{margin-left:auto;width:36px;height:36px;border-radius:9px;color:#5E6A7E}
  .rk-menu-btn i{transform:rotate(180deg)}
  .rk-menu-btn.open i{transform:none}
  .rk-menu{position:fixed;left:248px;right:auto;top:auto;bottom:16px;border-color:var(--t-line);border-radius:14px;box-shadow:0 18px 44px rgba(11,18,32,.14);transform:translateX(-8px)}
  .rk-menu.open{transform:none}
  .rk-menu::before{display:none}

  .dash-body{flex:1;min-width:0;height:100vh}
  .dash-friends-rail{display:none !important}
}

/* Móvil: cabecera con la marca, avisos y avatar; el menú vive en la barra de abajo */
@media(max-width:768px){
  .rk-topnav{height:60px;padding:0 16px;gap:8px;background:#fff;border-bottom:1px solid var(--t-line);box-shadow:none}
  .rk-logo{display:block !important;position:static !important;transform:none !important;width:auto !important;height:auto !important;flex-shrink:0}
  .rk-marca{height:17px}
  .rk-user{flex:1;justify-content:flex-end;margin:0;padding:0;border:0;gap:8px}
  .rk-topnav .dash-user-card{order:3;flex:0 0 auto !important;width:auto !important;min-width:0 !important;max-width:none !important;padding:0 !important;background:none;border:0;box-shadow:none}
  .rk-user-txt{display:none !important}
  .rk-topnav .dash-av{width:38px;height:38px;font-size:13px;background:var(--t-ink);color:#fff;box-shadow:none}
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--t-line);box-shadow:none}
  .rk-topnav .dash-friends-wrap i,.rk-topnav .dash-bell-wrap i{color:var(--t-ink);font-size:17px}

  .mnav{border-top:1px solid var(--t-line);box-shadow:none;padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px))}
  .mnav-item{color:var(--t-ink-2);font:500 11px var(--font);gap:4px;position:relative}
  .mnav-item i{font-size:22px}
  .mnav-item.active{color:var(--t-ink);font-weight:600}
  .mnav-item.active i{transform:none}
  .mnav-item.active::after{content:'';position:absolute;bottom:0;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--t-blue)}
  .mnav-sheet-item{background:#fff;border-color:var(--t-line);color:var(--t-ink);font-weight:600}
  .mnav-sheet-item i{color:var(--t-ink)}
  .mnav-sheet-item.active{background:var(--t-soft);border-color:var(--t-ink)}
  .mnav-sheet-instalar{background:var(--t-ink)}
  .mnav-sheet-aux{border-color:var(--t-line);color:var(--t-ink)}
}

/* ══ BOTONES Y ENLACES DEL TEMA ══════════════════════════════════════════════ */
/* La píldora de la web («Panel ●→»): texto y un círculo con la flecha */
/* La de contorno («Diseña tu plan →») */
.t-pill-o{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border:1.5px solid #BFD3FA;border-radius:24px;background:#fff;color:var(--t-blue-text);font:600 15px var(--font);cursor:pointer;text-decoration:none}
.t-pill-o:hover{border-color:var(--t-blue)}

/* ══ INICIO ══════════════════════════════════════════════════════════════════
   La portada, al estilo de la web: el anfiteatro a sangre, camino con halo y chinchetas que
   laten. Los valores (tamaños, colores, espaciados) están copiados de la hoja de
   estilos de retorika.es para que se vea igual, no parecido. */
.dash-content.dash-bienvenida{max-width:none;padding:0 0 72px;gap:0}
.dash-bienvenida > div:empty{display:none}
.dash-bienvenida > *:not(.ti-portada){width:calc(100% - 2 * clamp(24px,4.5vw,72px));max-width:1180px;margin-left:auto;margin-right:auto;margin-bottom:28px;box-sizing:border-box}

.ti-portada{position:relative;container-type:inline-size;display:flex;flex-direction:column;margin:0 0 56px;overflow:hidden;background:var(--t-paper)}
/* La foto se ve SIEMPRE entera: la escena toma la proporción de la imagen
   (1672×941) y la altura de la portada sale de su ancho. */
.ti-escena{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:#eef2f7}
.ti-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ti-ruta{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ti-escena::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 35%),
             linear-gradient(90deg,rgba(251,252,253,.88) 0%,rgba(251,252,253,.66) 30%,rgba(251,252,253,.2) 46%,rgba(251,252,253,0) 58%)}
.ti-via{fill:none;stroke:url(#ti-grad);stroke-linecap:round;stroke-width:2.6}
.ti-via-ancha{stroke-width:8;opacity:.35}
.ti-via-halo{stroke-width:18;opacity:.35}
.ti-via-flujo{stroke-width:3.6;stroke-dasharray:26 38;animation:tiFlujo 14s linear infinite;opacity:.95}
@keyframes tiFlujo{to{stroke-dashoffset:-640}}

.ti-portada-tx{position:absolute;top:0;left:0;z-index:3;padding:clamp(24px,4.6cqw,96px) 0 0 clamp(24px,4.6cqw,72px);max-width:min(62%,1000px)}
.ti-ceja{display:flex;flex-direction:column;gap:13px;font:500 clamp(11px,.95vw,13px)/1 var(--font);letter-spacing:.34em;text-transform:uppercase;color:#5E6A7E;margin-bottom:18px}
.ti-ceja i{width:42px;height:2px;background:var(--t-blue);border-radius:2px}
.ti-claim{margin:0 0 clamp(12px,1.8cqw,34px);display:flex;flex-direction:column;gap:clamp(10px,1.7cqw,34px)}
.ti-claim-fuerte{font:700 clamp(44px,5.6vw,108px)/.96 var(--font);font-size:clamp(44px,6.4cqw,108px);letter-spacing:-.024em;text-transform:uppercase;color:#1257C0}
.ti-claim-tinta{color:#0E1626;font-size:.88em}
.ti-claim-tinta.ti-largo{font-size:.62em;line-height:1.02;display:inline-block;margin-top:.12em}
.ti-claim-lead{font:400 clamp(17px,2.4cqw,42px)/1.2 var(--font);letter-spacing:-.014em;color:#16233A;max-width:640px}
.ti-claim-sub{display:flex;align-items:center;gap:14px;margin:0;font:500 clamp(13px,1.1vw,17px) var(--font);letter-spacing:.2em;color:#4C5A73}
.ti-claim-sub::before{content:'';flex-shrink:0;width:10px;height:10px;border-radius:50%;background:#0D58F2;border:6px solid rgba(29,109,240,.22);background-clip:padding-box}
.ti-claim-sub[hidden],.ti-acciones[hidden]{display:none}
.ti-acciones{margin-top:clamp(16px,2.4cqw,40px)}
.ti-cta{display:inline-flex;align-items:center;gap:18px;height:clamp(46px,3.6cqw,62px);padding:0 26px 0 32px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(29,100,240,.42);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:600 clamp(15px,1.2vw,18px) var(--font);color:#0D58F2;transition:background .25s,color .25s,transform .25s}
.ti-cta svg{width:17px;height:17px;transition:transform .25s}
.ti-cta:hover{background:var(--t-blue);color:#fff;transform:translateY(-2px)}
.ti-cta:hover svg{transform:translateX(4px)}
.ti-cta:focus-visible{outline:2px solid var(--t-blue);outline-offset:3px}

/* Chinchetas: el punto (0,0) de cada una es la punta, sobre su ancla */
.ti-pin{position:absolute;z-index:2;width:0;height:0;min-width:0;min-height:0;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;-webkit-appearance:none;appearance:none;overflow:visible;cursor:pointer;opacity:0;transition:opacity .4s}
.ti-pin.ti-pin-listo{opacity:1}
.ti-pin::before,.ti-pin::after{display:none !important}
.ti-pin{--d:1}
.ti-pin--rosa{--a:#F4166B;--a-rgb:244,22,107;--retraso:0s}
.ti-pin--verde{--a:#12C56B;--a-rgb:18,197,107;--retraso:.87s;--d:.8}
.ti-pin--azul{--a:#1D6DF0;--a-rgb:29,109,240;--retraso:1.73s;--d:.64}
.ti-pin-marca{position:absolute;left:calc(-15px * var(--d));bottom:0;width:calc(30px * var(--d));height:calc(45px * var(--d));fill:var(--a);filter:drop-shadow(0 10px 14px rgba(11,18,32,.28));transition:transform .3s cubic-bezier(.2,.8,.3,1.3),filter .3s;transform-origin:50% 100%}
.ti-pin-anillo{position:absolute;left:calc(-38px * var(--d));top:calc(-13px * var(--d));width:calc(76px * var(--d));height:calc(26px * var(--d));border-radius:50%;border:1.5px solid rgba(var(--a-rgb),.75);animation:tiAnillo 2.6s ease-out var(--retraso) infinite;pointer-events:none}
.ti-pin-anillo-b{animation-delay:calc(var(--retraso) + 1.3s)}
.ti-pin-brillo{position:absolute;left:calc(-35px * var(--d));top:calc(-13px * var(--d));width:calc(70px * var(--d));height:calc(26px * var(--d));border-radius:50%;background:rgba(var(--a-rgb),.55);filter:blur(9px);animation:tiBrillo 2.6s ease-in-out var(--retraso) infinite;pointer-events:none}
@keyframes tiAnillo{0%{transform:scale(.45);opacity:0}25%{opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes tiBrillo{0%,100%{opacity:.55}50%{opacity:1}}
.ti-pin:hover .ti-pin-marca,.ti-pin:focus-visible .ti-pin-marca{transform:translateY(-13px) scale(1.2);filter:drop-shadow(0 18px 22px rgba(11,18,32,.42))}
.ti-pin:focus-visible{outline:none}
.ti-pin-rotulo{position:absolute;bottom:14px;display:flex;flex-direction:column;gap:10px;width:260px;text-align:left;align-items:flex-start;left:26px}
.ti-pin--rosa .ti-pin-rotulo{left:auto;right:26px;text-align:right;align-items:flex-end}
.ti-pin--verde .ti-pin-rotulo{bottom:auto;top:-44px;left:34px;width:230px}
.ti-pin--azul .ti-pin-rotulo{bottom:auto;top:-78px;left:30px;width:220px}
.ti-pin-raya{width:30px;height:2px;border-radius:2px;background:var(--a)}
.ti-pin-tit{font:700 27px/1.05 var(--font);letter-spacing:-.012em;color:var(--a);text-shadow:0 1px 14px rgba(255,255,255,.95);transition:transform .28s cubic-bezier(.2,.8,.3,1.3)}
.ti-pin-desc{font:400 15.5px/1.5 var(--font);color:#33415A;text-shadow:0 1px 10px rgba(255,255,255,.95),0 0 22px rgba(255,255,255,.85);text-wrap:balance}
.ti-pin:hover .ti-pin-tit{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.ti-via-flujo,.ti-pin-anillo,.ti-pin-brillo{animation:none}}

/* Debajo de la portada: el camino del día y el curso, en dos columnas */
.cm{position:relative;display:flex;flex-direction:column;gap:6px}
.cm::before{content:'';position:absolute;left:19px;top:16px;bottom:34px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--t-ink) 0%,var(--t-pink) 24%,var(--t-green) 62%,var(--t-blue) 100%);opacity:.9}
.cm-punto .dpt-check{width:20px;height:20px;margin-top:2px;border-radius:50%;background:#fff;border:2px solid var(--t-ink);box-sizing:border-box;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:.2s}
.cm-punto .dpt-check i{font-size:12px;color:transparent}
.cm-punto .dpt-check.done{background:var(--t-ink)}
.cm-punto .dpt-check.done i{color:#fff}

/* Títulos de las secciones de más abajo («Programa de la semana», «Compite»):
   la etiqueta espaciada con su línea, como «CONFÍAN EN RETORIKA» en la web */

/* Tarjetas de Inicio: blancas, línea fina, sin sombra */
.dg-aviso{background:#fff;border:1px solid var(--t-line);border-radius:16px;box-shadow:none}
.dpt-semana-label{font:500 11px var(--t-label);letter-spacing:.2em;color:var(--t-ink-2)}
.dpt-semana-titulo{font:700 15px var(--font);color:var(--t-ink)}
.dpt-semana-check{background:#fff;border:1px solid var(--t-line);color:var(--t-ink)}

/* Diagnóstico pendiente (generarBannerDiagnostico) */
.dg-aviso{display:flex;align-items:center;gap:18px;padding:20px 24px;cursor:pointer}
.dg-aviso:hover{border-color:#CFD8E6}
.dg-aviso-ic{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--t-line);color:var(--t-blue-text);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.dg-aviso-tx{flex:1;min-width:0}
.dg-aviso-k{font:500 11px var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--t-blue-text)}
.dg-aviso-t{font:700 20px var(--font);color:var(--t-ink);margin-top:4px;letter-spacing:-.01em}
.dg-aviso-d{font-size:14px;color:var(--t-ink-2);margin-top:2px}
.dg-aviso-btn{flex-shrink:0;height:44px;padding:0 20px;border-radius:22px;border:1.5px solid #BFD3FA;background:#fff;color:var(--t-blue-text);font:600 14px var(--font);cursor:pointer;white-space:nowrap}
.dg-aviso-btn:hover{border-color:var(--t-blue)}
/* Portada estrecha (móvil, tableta u ordenador con poco sitio): el texto no cabe
   sobre la foto sin taparla, así que va ENCIMA y la foto, entera, debajo. Se decide
   por el ancho de la propia portada (container query), no por el de la ventana,
   porque el menú lateral abierto o cerrado cambia ese ancho. */
@container (max-width:899px){
  .ti-portada-tx{position:static;order:-1;max-width:none;padding:28px clamp(20px,4cqw,40px) 22px}
  .ti-escena::after{background:linear-gradient(180deg,var(--t-paper) 0%,rgba(251,252,253,0) 16%)}
  .ti-claim-fuerte{font-size:clamp(38px,10cqw,64px)}
  .ti-claim-lead{font-size:clamp(17px,3.2cqw,22px);line-height:1.3}
}
/* Muy estrecha: chinchetas más pequeñas y sin rótulo (el camino del día, justo
   debajo, dice qué es cada una) */
@container (max-width:899px){ .ti-pin-desc{display:none} }
@container (max-width:560px){
  .ti-pin--rosa{--d:.56}.ti-pin--verde{--d:.44}.ti-pin--azul{--d:.34}
  .ti-pin-rotulo,.ti-pin-anillo-b{display:none}
}
/* Móvil: ajustes de tamaño; la colocación de la portada la deciden las container queries de arriba. */
@media(max-width:768px){
  .dash-content.dash-bienvenida{padding:0 0 110px}
  .dash-bienvenida > *:not(.ti-portada){width:calc(100% - 40px);margin-bottom:22px}
  .ti-portada{margin-bottom:36px}
  .ti-ceja{letter-spacing:.24em;gap:10px;margin-bottom:14px}
  .ti-claim{gap:14px;margin-bottom:14px}
  .ti-claim-sub{font-size:12.5px;letter-spacing:.12em;gap:10px}
  .ti-claim-sub::before{width:8px;height:8px;border-width:5px}
  .ti-acciones{margin-top:18px}
  .ti-cta{height:48px;padding:0 20px 0 24px;font-size:15px}
  .ti-claim-tinta.ti-largo{font-size:.7em}
  .dg-aviso{flex-wrap:wrap;padding:18px}
  .dg-aviso-btn{flex:1 1 100%}
}

/* ══ CABECERAS DE SECCIÓN ════════════════════════════════════════════════════
   .pf2-hero (Entrenamiento, Diagnóstico, Ranking, Logros, Perfil, Aula, Retorika…),
   .comp-hero y .tienda-hero dejan de ser una franja de color: son la portada de la
   web en pequeño. Regla azul, título grande en mayúsculas, subtítulo en tinta y
   las cifras en texto. */
.pf2-hero{background:none !important;border:0;border-radius:0;box-shadow:none !important;padding:4px 0 8px !important;color:var(--t-ink);overflow:visible;margin-bottom:12px}
.pf2-hero::before{content:'';display:block;position:static;inset:auto;width:40px;height:2px;margin:0 0 22px;border-radius:0;background:var(--t-blue);animation:none;z-index:auto}
.pf2-hero::after,.pf2-hero-glow,.pf2-hero-libros .pf2-libros,.pf2-hero canvas{display:none !important;animation:none !important}
.pf2-hero-top{align-items:flex-end;gap:24px}
.pf2-avatar:has(i){display:none}
.pf2-avatar{width:76px;height:76px;border-radius:50%;background:var(--t-ink);border:0;box-shadow:none;backdrop-filter:none;color:#fff;font:600 26px var(--font);letter-spacing:0}
.pf2-name{font:800 52px/1 var(--font) !important;letter-spacing:-.03em !important;text-transform:uppercase;color:var(--t-blue-text) !important}
.pf2-alias{display:block;font:400 19px/1.45 var(--font) !important;color:var(--t-ink) !important;margin-top:12px !important;max-width:680px}
.pf2-badges{gap:8px 22px;margin-top:16px}
.pf2-badge,.pf2-badge-done{background:none !important;border:0 !important;padding:0 !important;border-radius:0;font:500 14px var(--font) !important;color:var(--t-ink-2) !important}
.pf2-badge i{color:var(--t-ink-2) !important}
.pf2-hero-rtk{border-left:1px solid var(--t-line);padding-left:24px;text-align:left}
.pf2-rtk-num{font:800 48px/1 var(--font) !important;letter-spacing:-.03em !important;color:var(--t-ink) !important}
.pf2-rtk-lbl{font:500 13px var(--font) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--t-ink-2) !important;margin-top:6px}
.pf2-hero-btn{background:#fff !important;border:1px solid var(--t-line) !important;color:var(--t-ink) !important;border-radius:22px;box-shadow:none}
.pf2-hero-btn:hover{border-color:var(--t-ink) !important;transform:none}

/* ══ TARJETAS Y PIEZAS COMUNES ═══════════════════════════════════════════════ */
.pf2-card{background:#fff;border:1px solid var(--t-line) !important;border-radius:16px;box-shadow:none !important}
.pf2-card-head{font:700 17px var(--font) !important;letter-spacing:-.01em;color:var(--t-ink) !important}
.pf2-card-head i{color:var(--t-ink-2) !important}
.pf2-head-btn{background:#fff !important;border:1px solid var(--t-line) !important;color:var(--t-ink) !important;border-radius:18px !important;font-weight:600 !important}

@media(max-width:768px){
  .pf2-hero-top{flex-wrap:wrap;align-items:flex-start}
  .pf2-name{font-size:36px !important}
  .pf2-alias{font-size:16.5px !important}
  .pf2-hero-rtk{border:0;padding:0;flex-basis:100%}
  .pf2-rtk-num{font-size:36px !important}
  .pf2-avatar{width:60px;height:60px;font-size:21px}
}

/* ══ BOTONES DE ACCIÓN, ICONOS Y PESTAÑAS (todas las secciones) ══════════════
   Los botones de degradado (verde, azul, violeta…) pasan a la píldora de tinta;
   los cuadraditos de color de los iconos, a un círculo de línea fina; las
   pestañas, a texto subrayado como el menú de la web. El !important hace falta:
   muchos de estos colores vienen en línea desde app.js. */
.dxv2-btn-start,.dxv2-btn-renew,.dxv2-action-btn,.lc-btn,.cc-btn-go,.cs-btn-go,.bo-btn,.evd-btn-primary,.dm-btn-iniciar,.btn-soporte-send,.he-btn-publicar,.comp-friends-btn,.pf2-btn-edit{
  background:var(--t-ink) !important;color:#fff !important;border:0 !important;border-radius:22px !important;
  box-shadow:none !important;font-family:var(--font) !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important
}
.dxv2-btn-start:hover,.lc-btn:hover{background:#1c2638 !important;transform:none !important}
.dxv2-btn-start i{color:#fff !important}
.dxv2-btn-unlock,.dxv2-btn-locked,.dxv2-btn-metal,.dxv2-btn-metal-dark{
  background:#fff !important;color:var(--t-ink) !important;border:1.5px solid var(--t-line) !important;border-radius:22px !important;box-shadow:none !important;font-weight:600 !important
}
.dxv2-btn-unlock:hover,.dxv2-btn-metal:hover,.dxv2-btn-metal-dark:hover{border-color:var(--t-ink) !important;background:#fff !important}

.dxv2-card-icon,.cc-ic,.ta-ic,.bv-ic,.evd-modal-ic,.cb-head-ic{
  background:#fff !important;border:1.5px solid var(--t-line) !important;color:var(--t-ink) !important;border-radius:50% !important;box-shadow:none !important
}
.dxv2-card-icon i,.cc-ic i,.ta-ic i,.bv-ic i,.cb-head-ic i{color:var(--t-ink) !important}
.dxv2-icon-overlay{background:var(--t-ink) !important}
.aula-switch-tab.act{background:var(--t-ink) !important;color:#fff !important}

/* El anuncio del plan PRO (Diagnóstico) en tinta, sin degradado */
.dxv2-pro-card{background:var(--t-ink) !important;border:0 !important;box-shadow:none !important;border-radius:16px !important}
.dxv2-pro-icon{background:none !important;border:1.5px solid rgba(255,255,255,.25) !important;border-radius:50% !important}
.dxv2-pro-card [class*="feat"],.dxv2-pro-card [class*="chip"]{background:none !important;border-color:rgba(255,255,255,.22) !important}
.comp-maquina-btn,.comp-azar-btn{background:#fff !important;color:var(--t-ink) !important;border:1.5px solid var(--t-line) !important;border-radius:22px !important;box-shadow:none !important;font-weight:600 !important}
.comp-maquina-btn:hover,.comp-azar-btn:hover{border-color:var(--t-ink) !important}

/* ══ VENTANAS DEL CAMPUS (clase, cuaderno, examen, diario, diplomas, bienvenida:
   todas llevan .lc-head) Y LAS DEL PLAN DEL DÍA (.dm-*) ═══════════════════════
   Cabecera blanca como la portada: regla azul, etiqueta espaciada y título en
   tinta. Sin degradados ni dorados. */
.lc-head{background:#fff !important;color:var(--t-ink) !important;border-bottom:1px solid var(--t-line);padding:30px 24px 22px !important}
.lc-head::before{content:'';display:block;width:40px;height:2px;background:var(--t-blue);margin-bottom:16px}
.lc-head-kicker{font:500 11.5px var(--t-label) !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--t-ink-2) !important}
.lc-head-kicker i{display:none}
.lc-head-tit{font:800 30px/1.08 var(--font) !important;letter-spacing:-.02em !important;color:var(--t-ink) !important;margin-top:10px !important}
.lc-x{background:#fff !important;border:1px solid var(--t-line) !important;color:var(--t-ink) !important}
.lc-texto{font-size:16px;line-height:1.7;color:var(--t-ink)}
.lc-idea{background:none !important;border:0 !important;border-top:1px solid var(--t-line) !important;border-bottom:1px solid var(--t-line) !important;border-radius:0 !important;padding:18px 0 !important;color:var(--t-ink) !important;font:700 20px/1.3 var(--font) !important;letter-spacing:-.01em}
.lc-idea i{display:none}
.lc-idea small{display:block;font:500 11px var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--t-blue-text);margin-bottom:8px}
.lc-op{background:#fff !important;border:1.5px solid var(--t-line) !important;border-radius:14px !important;color:var(--t-ink) !important}
.lc-op:hover{border-color:var(--t-ink) !important}
.lc-link{border:1.5px solid var(--t-line) !important;background:#fff !important;color:var(--t-ink) !important;border-radius:22px !important;font-weight:600 !important}
.lc-link:hover{border-color:var(--t-ink) !important}
.lc-aviso{background:var(--t-soft) !important;border-color:var(--t-line) !important;color:var(--t-ink) !important}
.dm-quote-block{border-color:var(--t-line)}

/* Cabeceras de las ventanas del plan del día y de «Tu desempeño» (.dm-cab, en
   app.js): blancas, con la regla del color del paso. Su contenido trae colores
   blancos en línea pensados para el fondo de color de antes; se reescriben aquí. */
.dm-cab{position:relative;overflow:hidden;background:#fff;border-radius:28px 28px 0 0;padding:30px 24px 24px;border-bottom:1px solid var(--t-line);color:var(--t-ink)}
.dm-cab::before{content:'';display:block;width:40px;height:2px;background:var(--c,var(--t-blue));margin-bottom:18px}
.dm-cab > div[style*="position:absolute"]{display:none}
.dm-cab [style*="color:white"],.dm-cab [style*="color:#fff"]{color:var(--t-ink) !important}
.dm-cab [style*="rgba(255,255,255,.7"],.dm-cab [style*="rgba(255,255,255,.8"],.dm-cab [style*="rgba(255,255,255,.6"]{color:var(--t-ink-2) !important}
.dm-cab button{background:#fff !important;border:1px solid var(--t-line) !important;color:var(--t-ink) !important}
.dm-cab [style*="border:3px solid rgba(255,255,255"]{background:var(--t-soft) !important;border:0 !important}
.dm-cab [style*="background:rgba(255,255,255"]:not(button){background:var(--t-soft) !important;border-color:var(--t-line) !important;color:var(--t-ink) !important}
.dm-cab [style*="font-weight:900"]{letter-spacing:-.01em}
.dm-cab circle[stroke*="255,255,255"]{stroke:#E4E9F0}

/* ══ EL BOCADILLO DE RETO (la mascota) ═══════════════════════════════════════
   Pasa de caja oscura con degradado a la píldora translúcida de la web: blanco
   con desenfoque, línea fina y texto en tinta. */
.reto-boc{background:rgba(255,255,255,.92) !important;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(18,30,52,.12) !important;box-shadow:0 20px 44px -18px rgba(16,38,72,.35) !important;color:var(--t-ink)}
.reto-boc::after,.reto-boc::before{background:rgba(255,255,255,.92) !important;border-color:rgba(18,30,52,.12) !important}
.boc-text,.boc-resp{color:var(--t-ink) !important;font-family:var(--font)}
.boc-crumb{color:var(--t-ink-2) !important;font-family:var(--t-label);letter-spacing:.2em}
.boc-back{background:var(--t-soft) !important;color:var(--t-ink) !important}
.boc-opt{background:#fff !important;border:1px solid var(--t-line) !important}
.boc-opt:hover{border-color:var(--t-ink) !important}
.boc-label{color:var(--t-ink) !important}
.boc-arr{color:var(--t-ink-2) !important}
.boc-icon{background:var(--t-blue-soft) !important}
.boc-icon i{color:var(--t-blue-text) !important}
.boc-action{background:var(--t-ink) !important;border:0 !important;color:#fff !important;border-radius:999px !important}
.reto-msg-bot{background:var(--t-soft) !important;border-color:var(--t-line) !important;color:var(--t-ink) !important}
.reto-msg-user{background:var(--t-ink) !important}
.reto-boc input,.reto-boc textarea{background:#fff !important;border:1px solid var(--t-line) !important;color:var(--t-ink) !important}
.reto-boc{background-image:none !important}.boc-orb1,.boc-orb2{display:none !important}

/* Los rombos flotantes de los márgenes (monitores grandes, initSideDecor en app.js)
   eran del diseño anterior: con el tema no se enseñan. */
.side-decor{display:none !important}

/* ══ INICIO EN UNA SOLA PANTALLA (2026-09-25) ════════════════════════════════
   Inicio no se desplaza: la portada ocupa todo el alto disponible y debajo va la
   franja del día. La foto se ve siempre con su alto entero: el lienzo mide el alto
   de la escena y su ancho sale de la proporción de la foto; si sobra ancho, los lados
   se funden con el fondo; si falta, se recortan los lados (el camino va en el centro). */
.dash-content.dash-bienvenida{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0 !important;gap:0}
.dash-main:has(> .dash-bienvenida:not(.dash-content-hidden)){overflow:hidden}
.dash-bienvenida > *{margin-bottom:0 !important}
.ti-portada{flex:1 1 auto;min-height:0;margin:0 !important;overflow:visible}
.ti-escena{flex:1 1 auto;min-height:0;aspect-ratio:auto;position:relative;container-type:size;overflow:hidden;background:var(--t-paper)}
.ti-lienzo{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:1672/941;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.ti-lienzo .ti-foto,.ti-lienzo .ti-ruta{position:absolute;inset:0;width:100%;height:100%}
.ti-lienzo .ti-foto{object-fit:cover}
/* Chincheta hecha: un visto de tinta junto a la cabeza */
.ti-pin .dpt-check{display:none}
.ti-pin .dpt-check.done{display:flex;position:absolute;left:calc(6px * var(--d));top:calc(-46px * var(--d));width:17px;height:17px;border-radius:50%;
  background:var(--t-ink);border:2px solid #fff;align-items:center;justify-content:center;box-shadow:none;z-index:2}
.ti-pin .dpt-check.done i{font-size:9px;color:#fff}
.ti-pin.activo .ti-pin-marca{transform:translateY(-8px) scale(1.12)}
.ti-portada.con-bocata .ti-pin-rotulo{opacity:0;pointer-events:none}
.ti-pin-rotulo{transition:opacity .2s}

/* ── Bocadillos ── */
.ti-bocata{position:absolute;z-index:20;width:300px;max-width:calc(100% - 20px);box-sizing:border-box;padding:18px 20px 18px;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1.5px solid color-mix(in srgb,var(--a) 45%,transparent);border-radius:18px;
  box-shadow:0 24px 50px -22px rgba(16,38,72,.45),0 0 0 6px color-mix(in srgb,var(--a) 7%,transparent);
  opacity:0;transform:scale(.55);transition:opacity .2s ease,transform .42s cubic-bezier(.2,.9,.3,1.28)}
.ti-bocata[hidden]{display:block;visibility:hidden}
.ti-bocata.abierta{opacity:1;transform:none}
/* La cola, del lado de la chincheta */
.ti-bocata::before{content:'';position:absolute;width:14px;height:14px;background:inherit;border:inherit;border-radius:3px;box-sizing:border-box}
.ti-bocata.lado-der::before{left:-8px;top:calc(var(--cola) - 7px);border-top-color:transparent;border-right-color:transparent;transform:rotate(45deg)}
.ti-bocata.lado-izq::before{right:-8px;top:calc(var(--cola) - 7px);border-bottom-color:transparent;border-left-color:transparent;transform:rotate(45deg)}
.ti-bocata.lado-arriba::before{bottom:-8px;left:calc(var(--cola) - 7px);border-top-color:transparent;border-left-color:transparent;transform:rotate(45deg)}
.ti-bocata > *{position:relative}
/* El contenido entra un instante después que la caja */
.ti-bocata > :not(.ti-boc-x){opacity:0;transform:translateY(6px);transition:opacity .3s ease .12s,transform .3s ease .12s}
.ti-bocata.abierta > :not(.ti-boc-x){opacity:1;transform:none}
.ti-bocata.abierta > :nth-child(3){transition-delay:.16s}
.ti-bocata.abierta > :nth-child(4){transition-delay:.2s}
.ti-bocata.abierta > :nth-child(5),.ti-bocata.abierta > :nth-child(6){transition-delay:.24s}
.ti-boc-x{position:absolute !important;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--t-ink-2);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.ti-boc-x:hover{background:var(--t-soft);color:var(--t-ink)}
.ti-boc-k{display:flex;align-items:center;gap:8px;font:600 12px var(--font);color:var(--a);padding-right:28px}
.ti-boc-k::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 18%,transparent);flex-shrink:0}
.ti-boc-t{font:700 21px/1.18 var(--font);letter-spacing:-.015em;color:var(--t-ink);margin-top:10px}
.ti-boc-d{font:400 14.5px/1.5 var(--font);color:#33415A;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ti-boc-m{font-size:12.5px;color:var(--t-ink-2);margin-top:10px}
.ti-boc-btn{display:inline-flex;align-items:center;gap:10px;margin-top:14px;height:42px;padding:0 20px;border:0;border-radius:21px;background:var(--a);color:#fff;font:600 14.5px var(--font);cursor:pointer;transition:filter .15s,transform .15s}
.ti-boc-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ti-boc-btn:focus-visible{outline:2px solid var(--t-ink);outline-offset:3px}
#boc-practica .ti-boc-btn{background:#0CA85A}
@media(prefers-reduced-motion:reduce){.ti-bocata,.ti-bocata > *{transition:none !important}}

/* ── Franja del día ── */
.ti-franja{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.15fr) minmax(0,1fr);gap:12px;
  padding:14px clamp(20px,3vw,40px) 16px;background:var(--t-paper);border-top:1px solid var(--t-line)}
.tf-item{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:12px 14px;background:#fff;border:1px solid var(--t-line);border-radius:14px;cursor:pointer;text-align:left;font-family:var(--font);color:var(--t-ink);transition:border-color .15s}
.tf-item:hover{border-color:#CFD8E6}
.tf-item:focus-visible{outline:2px solid var(--t-blue);outline-offset:2px}
.tf-item .dpt-check{flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#fff;border:2px solid var(--t-ink);box-sizing:border-box;display:flex;align-items:center;justify-content:center;box-shadow:none}
.tf-item .dpt-check i{font-size:11px;color:transparent}
.tf-item .dpt-check.done{background:var(--t-ink)}
.tf-item .dpt-check.done i{color:#fff}
.tf-tx{min-width:0}
.tf-k{font-size:12px;color:var(--t-ink-2)}
.tf-t{font-size:14px;font-weight:600;line-height:1.3;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tf-semana{flex-direction:column;gap:5px;cursor:default}
.tf-curso{flex-direction:column;gap:6px}
.tf-curso:hover b{color:var(--t-blue-text)}

/* Tableta y móvil: la franja se desliza en horizontal (la página no) */
@media(max-width:1100px){
  .ti-franja{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 16px 14px;gap:10px}
  .ti-franja::-webkit-scrollbar{display:none}
  .tf-item{flex:0 0 min(260px,74%);scroll-snap-align:start}
}
@media(max-width:768px){
  /* Alto justo entre la cabecera (60) y la barra de abajo */
  .dash-content.dash-bienvenida{flex:none;height:calc(100dvh - 60px - var(--alto-mnav,70px))}
  #app-screen:has(.dash-bienvenida:not(.dash-content-hidden)){overflow:hidden}
  .ti-portada-tx{padding:18px 20px 12px !important}
  .ti-ceja{margin-bottom:10px;gap:8px;font-size:10.5px}
  .ti-claim{gap:8px !important;margin-bottom:10px !important}
  .ti-claim-fuerte{font-size:clamp(30px,9.4vw,44px) !important}
  .ti-claim-lead{font-size:15px !important;line-height:1.35}
  .ti-claim-sub{display:none !important}
  .ti-acciones{margin-top:12px !important}
  .ti-cta{height:42px;padding:0 18px 0 20px;font-size:14.5px}
  .ti-franja{padding:10px 14px 10px}
  .tf-item{padding:10px 12px}
  .ti-bocata{width:min(300px,calc(100vw - 28px));padding:16px 16px 16px}
  .ti-boc-t{font-size:18px}
}

/* ── Reto (la mascota flotante): sobre un círculo blanco con línea fina ── */
.reto-avatar-wrap{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(18,30,52,.12);box-shadow:0 14px 30px -14px rgba(16,38,72,.45);display:flex;align-items:center;justify-content:center}
.reto-avatar-wrap .reto-mic-svg{width:50px !important;height:50px !important;filter:none;margin-top:4px}
.reto-wave{border-color:rgba(29,109,240,.18)}
.reto-wave:nth-child(1){width:74px;height:74px}
.reto-wave:nth-child(2){width:90px;height:90px}
.reto-dot{bottom:3px;right:3px}
.mascota-reto .mr-brazo-d{transform-origin:46.5px 30.5px;animation:retoSaluda 5s ease-in-out infinite}
@keyframes retoSaluda{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-10deg)}}
@media(max-width:768px){ .reto-avatar-wrap{width:54px;height:54px} .reto-avatar-wrap .reto-mic-svg{width:44px !important;height:44px !important} }
@media(prefers-reduced-motion:reduce){.mascota-reto .mr-brazo-d{animation:none}}

/* Mascotas de la tienda: con el dibujo nuevo sobra el aura de color */
.masc::before{opacity:.35}

/* La mascota no tapa la franja: en ordenador la franja le deja hueco a la derecha */
@media(min-width:769px){ .ti-franja{padding-right:110px} }
/* Portada baja (pantallas de poca altura): las chinchetas solo con su nombre */
.ti-portada.compacta .ti-pin-desc{display:none}
/* Sin columna de amigos, Reto vuelve a la esquina (style.css lo apartaba 314 px) */
@media(min-width:1200px){ .reto-widget{right:28px} }

/* ══ COLUMNA DEL DÍA (ventanitas a la derecha, sobre el fondo) ═══════════════
   Con la portada ancha (≥1100 px), consejo, dato, semana y curso van apilados a la
   derecha, como ventanitas translúcidas encima del anfiteatro. Con menos ancho no
   caben sin tapar el camino y vuelven a ser la fila de debajo de la foto. */
.ti-portada > .ti-franja{order:3}
@container (min-width:1100px){
  .ti-portada > .ti-franja{
    position:absolute;z-index:4;top:clamp(24px,4.4cqw,64px);right:clamp(20px,2.6cqw,40px);width:252px;
    display:flex;flex-direction:column;gap:10px;padding:0 !important;background:none;border:0;overflow:visible}
  .ti-franja .tf-item{
    flex:none;width:auto;padding:13px 15px;border-radius:16px;
    background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 34px -20px rgba(16,38,72,.45);
    transition:background .2s,transform .2s,box-shadow .2s}
  .ti-franja .tf-item:hover{background:rgba(255,255,255,.88);transform:translateX(-2px);box-shadow:0 18px 38px -20px rgba(16,38,72,.5);border-color:#fff}
  .ti-franja .tf-k{font:500 11px var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:#5E6A7E}
  .ti-franja .tf-t{font-size:14px;margin-top:5px}
  .ti-franja .dpt-check{background:rgba(255,255,255,.7)}
  /* Entran una detrás de otra al cargar */
  .ti-franja .tf-item{animation:tfEntra .5s cubic-bezier(.2,.8,.3,1) both}
  .ti-franja .tf-item:nth-child(2){animation-delay:.07s}
  .ti-franja .tf-item:nth-child(3){animation-delay:.14s}
  .ti-franja .tf-item:nth-child(4){animation-delay:.21s}
  /* Los rótulos de las chinchetas, más estrechos, para no llegar a la columna */
  .ti-pin-rotulo{width:210px}
  .ti-pin--verde .ti-pin-rotulo,.ti-pin--azul .ti-pin-rotulo{width:190px}
}
@keyframes tfEntra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ti-franja .tf-item{animation:none}}
.tf-semana{overflow:hidden}
.ti-franja{scroll-padding-inline:16px}


/* ══ VENTANITAS DEL DÍA QUE SE DESPLIEGAN (ampliarVentanita en app.js) ═══════
   La pulsada crece un pelín y abre debajo su detalle; no tapa nada ni hay que
   cerrarla para seguir usando la app. */
.tf-item{transition:transform .32s cubic-bezier(.2,.9,.3,1.25),box-shadow .3s,background .2s,border-color .2s}
.tf-item.tf-abierta{transform:scale(1.035);border-color:#fff;background:rgba(255,255,255,.92) !important;box-shadow:0 22px 44px -22px rgba(16,38,72,.5) !important;z-index:2;position:relative}
.ti-franja .tf-item.tf-abierta:hover{transform:scale(1.035)}
.tf-curso .tf-tx{display:block}
.tf-abierta .tf-t{-webkit-line-clamp:unset;display:block}
#item-dato.tf-abierta .tf-t{display:none}
.tf-mas{overflow:hidden;max-height:0;transition:max-height .32s ease,opacity .25s ease}
.tf-mas > *{opacity:0;transform:translateY(4px);transition:opacity .25s ease .1s,transform .25s ease .1s}
.tf-abierta .tf-mas > *{opacity:1;transform:none}
.tf-mas-p{font:400 13.5px/1.5 var(--font);color:#33415A;margin:8px 0 0}
.tf-mas-p b{color:var(--t-ink)}
.tf-mas-f{font-size:12px;color:var(--t-ink-2);margin-top:6px}
.tf-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.tf-btn{height:32px;padding:0 14px;border:0;border-radius:16px;background:var(--t-ink);color:#fff;font:600 12.5px var(--font);cursor:pointer}
.tf-btn:hover{background:#1c2638}
.tf-enl{height:32px;padding:0 12px;border:1px solid var(--t-line);border-radius:16px;background:#fff;color:var(--t-ink);font:600 12.5px var(--font);cursor:pointer}
.tf-enl:hover{border-color:var(--t-ink)}
.tf-hecho{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;background:#E9F9F0;color:var(--t-green-text);font:600 12.5px var(--font)}
.tf-rec{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--t-ink-2)}
.tf-rec span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-rec .tf-enl{flex-shrink:0}
.tf-mas .tf-asig{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-top:8px;font-size:12px;font-weight:600;color:var(--t-ink)}
.tf-mas .tf-asig em{font-style:normal;font-weight:500;color:var(--t-ink-2)}
.tf-mas .tf-asig i{grid-column:1/-1;display:block;height:3px;border-radius:2px;background:#E4E9F0;overflow:hidden}
.tf-mas .tf-asig i b{display:block;height:100%;border-radius:2px}
@media(prefers-reduced-motion:reduce){.tf-item,.tf-mas,.tf-mas > *{transition:none !important}}
.ti-franja .tf-curso .tf-k{letter-spacing:.08em}
/* Con la franja en fila (pantallas estrechas) no hay alto para crecer: el detalle
   sube flotando sobre la parte baja de la foto, pegado a la franja */
.tf-mas.tf-mas-flota{position:absolute;z-index:6;left:14px;right:14px;max-width:420px;margin:0 auto;box-sizing:border-box;padding:4px 16px 14px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid #fff;border-radius:16px;box-shadow:0 18px 40px -20px rgba(16,38,72,.5);overflow-y:auto}
.tf-mas-flota .tf-mas-tit{font:600 14px var(--font);color:var(--t-ink);margin-top:10px}
.tf-mas-tit{display:none}
.tf-mas.tf-mas-dentro > *{opacity:1;transform:none}
.tf-semana .tf-tx{min-width:0;width:100%}

/* ══ CHINCHETAS PULSABLES ════════════════════════════════════════════════════
   Cada chincheta lleva un área de toque invisible de 48 px (las del fondo son
   pequeñas y costaba acertarles). En pantallas estrechas, además, tres botones
   de camino debajo de la foto, como en la web móvil. */
.ti-pin-toque{position:absolute;left:-24px;bottom:-10px;width:48px;height:58px;border-radius:50%}
.ti-caminos{display:none}
@container (max-width:899px){
  .ti-caminos{order:2;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px 16px 2px}
  .ti-camino-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(var(--a-rgb),.38);background:rgba(var(--a-rgb),.08);color:var(--a);font:600 14.5px var(--t-label)}
  .ti-camino-btn::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--a);box-shadow:0 0 0 4px rgba(var(--a-rgb),.16)}
  .ti-camino-btn:active{background:rgba(var(--a-rgb),.16)}
  .ti-camino-btn:focus-visible{outline:2px solid var(--a);outline-offset:2px}
  /* Las chinchetas quedan como decoración: el toque va a los botones */
  .ti-pin{pointer-events:none}
}
.ti-camino-btn.activo{background:var(--a) !important;color:#fff !important}.ti-camino-btn.activo::before{background:#fff}

/* ══ MENÚ LATERAL FLOTANTE (2026-09-25, a partir de una maqueta del equipo) ════
   Tarjeta blanca separada del borde, esquinas redondas y sombra suave; la sección
   activa en una píldora azul clara; iconos de trazo en tinta; y al pie, las ondas
   azules que avanzan (initOndaMenu) con la firma «Be water.» en letra manuscrita
   (Caveat, la de la web). */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.rk-onda,.rk-plan{display:none}
@media(min-width:769px){
  .dash-layout{background:#F4F7FC}
  .rk-topnav{
    width:252px;height:calc(100vh - 32px);margin:16px 0 16px 16px;padding:30px 16px 16px;
    border:1px solid rgba(255,255,255,.9);border-radius:26px;
    background:linear-gradient(180deg,#fff 0%,#FAFCFF 100%);
    box-shadow:0 24px 60px -30px rgba(29,77,160,.35),0 2px 8px -4px rgba(29,77,160,.08);
    overflow:hidden}
  body.lateral-oculto .rk-topnav{width:0;margin-left:0;border-color:transparent;box-shadow:none}
  .rk-logo{margin:4px 48px 30px 18px}
  .rk-marca{height:21px}
  .rk-lateral-cerrar{top:24px;right:16px;width:38px;height:38px;border-radius:50%;background:#EEF3FC;color:#1D4FA8;font-size:17px}
  .rk-lateral-cerrar:hover{background:#E0EAFB;color:var(--t-blue-text)}
  /* Entradas: más aire, icono de trazo en tinta, activa en píldora azul */
  .rk-home,.rk-nav .dash-nav-item{height:50px;padding:0 18px;gap:16px;border-radius:16px;font:500 15.5px/1 var(--font);color:#1B2A4A}
  .rk-home i,.rk-nav .dash-nav-item i{font-size:22px;width:24px;color:#1B2A4A}
  .rk-home:hover,.rk-nav .dash-nav-item:hover{background:#F2F6FD;color:#0B1220}
  .rk-home.active,.rk-nav .dash-nav-item.active{background:#E6EFFE;color:var(--t-blue-text);font-weight:600}
  .rk-home.active i,.rk-nav .dash-nav-item.active i{color:var(--t-blue-text)}
  .rk-nav{gap:4px}
  .rk-home{margin-bottom:4px}
  .rk-nav-der{margin-top:14px !important;padding-top:14px !important;border-top:1px solid #E8EEF7;margin-left:6px !important;margin-right:6px !important}
  .rk-nav-der .dash-nav-item{margin:0 -6px}
  /* Ondas y firma: capa del fondo del pie, por detrás de la ficha */
  .rk-onda{display:block;position:absolute;left:0;right:0;bottom:0;height:300px;pointer-events:none;z-index:0}
  .rk-onda-lienzo{position:absolute;left:0;right:0;top:0;width:100%;height:210px}
  .rk-firma{position:absolute;left:26px;bottom:104px;font:600 44px/1 'Caveat',cursive;color:var(--t-blue-text);transform:rotate(-8deg);transform-origin:0 100%;letter-spacing:.5px}
  .rk-topnav > *:not(.rk-onda):not(.rk-menu){position:relative;z-index:1}
  .rk-lateral-cerrar{position:absolute !important;z-index:3 !important}
  /* Pie: la ficha como en la maqueta (avatar, nombre, plan y flecha) */
  .rk-user{border-top:0;padding-top:0;flex-wrap:nowrap;gap:4px}
  .rk-topnav .dash-user-card{order:1;flex:1 1 auto;min-width:0;padding:8px 6px;gap:12px;background:none}
  .rk-topnav .dash-user-card:hover{background:rgba(242,246,253,.8)}
  .rk-topnav .dash-av{width:46px;height:46px;font-size:15px;background:linear-gradient(135deg,#1D6DF0,#0B3F99);box-shadow:0 0 0 3px #fff,0 6px 14px -6px rgba(29,77,160,.6)}
  .rk-topnav .dash-av-name{font:700 14.5px var(--font);color:#0B1220}
  .rk-plan{display:block;font-size:13px;color:#5E6A7E;margin-top:2px}
  .rk-topnav .dash-av-status{display:none !important}
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{order:2;width:32px;height:32px;flex-shrink:0}
  .rk-topnav .dash-friends-wrap i,.rk-topnav .dash-bell-wrap i{font-size:17px;color:#5A6577}
  .rk-menu-btn{order:3;margin-left:0;width:30px;height:32px;color:#5E6A7E}
  .rk-menu-btn i{transform:none}
  .rk-menu-btn.open i{transform:rotate(180deg)}
  .rk-menu{left:284px}
  /* Con poco alto, la firma y las ondas se recogen para no pisar el menú */
  @media(max-height:820px){ .rk-firma{display:none} .rk-onda{height:220px} }
  @media(max-height:700px){ .rk-onda{display:none} }
}
@media(min-width:769px) and (max-width:1100px){
  .rk-topnav{width:88px}
  .rk-onda,.rk-plan,.rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{display:none}
  .rk-lateral-cerrar{display:none}
  .rk-menu{left:120px}
}
@media(min-width:769px){
  .rk-topnav .rk-logo{left:auto !important;top:auto !important;transform:none !important}
  /* Las ondas se difuminan arriba para no cortar en seco */
  .rk-onda-lienzo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 100%)}
  /* Amigos y avisos: dos botones de cristal junto a la firma; la fila de abajo queda
     como en la maqueta (avatar, nombre, plan y flecha) */
  .rk-user{position:static !important}
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{position:absolute !important;z-index:2 !important;bottom:118px;width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.75) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(29,77,160,.12) !important}
  .rk-topnav .dash-bell-wrap{right:18px}
  .rk-topnav .dash-friends-wrap{right:62px}
  .rk-topnav .dash-friends-wrap i,.rk-topnav .dash-bell-wrap i{color:#1B2A4A}
  .rk-topnav .dash-user-card{position:relative;z-index:1}
  .rk-user-txt{flex:1;min-width:0}
  .rk-topnav .dash-av-name,.rk-plan{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-height:820px){ .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{bottom:82px} }
}
@media(min-width:769px) and (max-width:1100px){
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{display:none !important}
}
@media(min-width:769px){
  .rk-topnav .rk-marca{height:auto;width:148px;max-width:148px}
  .rk-topnav .rk-logo{margin:10px 56px 30px 18px}
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{bottom:176px}
  .rk-firma{font-size:42px;bottom:100px}
}
@media(min-width:769px) and (max-height:820px){ .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{bottom:84px} }

/* Fondo de la portada (2026-09-25): un poco más de color y menos velo a la izquierda.
   El velo justo detrás del texto se mantiene lo necesario para que se lea. */
.ti-foto{filter:saturate(1.22) contrast(1.03)}
.ti-escena::after{background:
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%),
  linear-gradient(90deg,rgba(251,252,253,.62) 0%,rgba(251,252,253,.38) 26%,rgba(251,252,253,.08) 42%,rgba(251,252,253,0) 52%)}
.ti-lienzo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
@container (max-width:899px){ .ti-escena::after{background:linear-gradient(180deg,var(--t-paper) 0%,rgba(251,252,253,0) 16%)} }

/* ══ LAS CUATRO VENTANITAS CON LUZ DE ESTADO (2026-09-25, maqueta del equipo) ══
   Consejo: anillo azul con estela que gira (como el aviso de un altavoz inteligente)
   mientras no se ha abierto; visto, anillo fijo y más oscuro. Dato: caja fucsia que
   se enciende y se apaga despacio; visto, fucsia apagado. Semana: igual en verde.
   Progreso: una barra por asignatura, cada una en su color, con una luz que respira
   de izquierda a derecha. */
.tf-item{align-items:center}
.tf-fl{flex-shrink:0;color:#5E6A7E;font-size:18px;transition:transform .2s,color .2s}
.tf-item:hover .tf-fl{color:var(--t-blue-text);transform:translateX(3px)}
.tf-abierta .tf-fl{transform:rotate(90deg)}
.tf-luz{position:relative;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.tf-luz .dpt-check{display:none !important}
.tf-sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t-ink-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-sub i{font-size:14px;flex-shrink:0}

/* Consejo: anillo con estela */
.tf-luz-anillo::before{content:'';position:absolute;inset:6px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(29,109,240,0) 0deg,rgba(29,109,240,.15) 120deg,#1D6DF0 300deg,#6FA8FF 350deg,rgba(29,109,240,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:tfGira 1.6s linear infinite;filter:drop-shadow(0 0 4px rgba(29,109,240,.55))}
.tf-luz-anillo::after{content:'';position:absolute;inset:6px;border-radius:50%;border:4px solid rgba(29,109,240,.1)}
@keyframes tfGira{to{transform:rotate(360deg)}}
.tf-consejo.tf-visto .tf-luz-anillo::before,.tf-consejo:has(.dpt-check.done) .tf-luz-anillo::before{animation:none;background:#1449A8;filter:none}
.tf-consejo.tf-visto .tf-luz-anillo::after,.tf-consejo:has(.dpt-check.done) .tf-luz-anillo::after{display:none}

/* Dato y semana: caja de color que late */
.tf-luz-caja{border-radius:14px;background:color-mix(in srgb,var(--lz) 12%,#fff);color:var(--lz);font-size:21px;box-shadow:0 0 0 0 var(--lz)}
.tf-luz-caja i{position:relative;z-index:1}
.tf-luz-caja::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--lz);opacity:0;animation:tfLatido 2.8s ease-in-out infinite}
.tf-luz-caja::after{content:'';position:absolute;inset:-5px;border-radius:17px;border:2px solid var(--lz);opacity:0;animation:tfHalo 2.8s ease-in-out infinite}
@keyframes tfLatido{0%,100%{opacity:.06}50%{opacity:.34}}
@keyframes tfHalo{0%,100%{opacity:0;transform:scale(.92)}50%{opacity:.45;transform:scale(1)}}
.tf-dato{--lz:#F4166B}
.tf-semana{--lz:#12C56B}
.tf-dato.tf-visto,.tf-dato:has(.dpt-check.done){--lz:#B05A83}
.tf-semana.tf-visto{--lz:#3E9A6E}
.tf-visto .tf-luz-caja::before,.tf-visto .tf-luz-caja::after,.tf-dato:has(.dpt-check.done) .tf-luz-caja::before,.tf-dato:has(.dpt-check.done) .tf-luz-caja::after{animation:none;opacity:0}
.tf-visto .tf-luz-caja,.tf-dato:has(.dpt-check.done) .tf-luz-caja{background:color-mix(in srgb,var(--lz) 16%,#fff)}

/* Progreso */
.tf-curso{cursor:pointer}
.tf-curso .tf-tx{width:100%}
.tf-prog-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.tf-verdet{border:0;background:none;padding:0;color:var(--t-blue-text);font:600 12.5px var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.tf-verdet:hover{text-decoration:underline}
.tf-asig-lista{display:flex;flex-direction:column;gap:10px}
.tf-asig-vacio{font-size:12.5px;color:var(--t-ink-2)}
.tf-asig{display:grid;grid-template-columns:32px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:5px;align-items:center}
.tf-asig-ic{grid-row:1/3;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:16px}
.tf-asig-n{font-size:12.5px;font-weight:600;color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-asig em{grid-row:1/3;grid-column:3;font-style:normal;font-size:12.5px;color:var(--t-ink-2);font-variant-numeric:tabular-nums}
.tf-barra{position:relative;display:block;height:5px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--c) 13%,#EEF2F8)}
.tf-barra b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;min-width:0;
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff),var(--c));background-size:200% 100%;
  animation:tfFluye 3.2s linear infinite,tfRespira 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
/* La luz que recorre la barra (también la parte vacía, para que se vea «viva») */
.tf-barra::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 55%,transparent),transparent);
  animation:tfBarrido 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes tfFluye{to{background-position:-200% 0}}
@keyframes tfRespira{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) saturate(1.1)}}
@keyframes tfBarrido{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(350%);opacity:0}}
.tf-mini-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.tf-mini-cifras span{display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;background:var(--t-soft);font-size:11.5px;color:var(--t-ink-2)}
.tf-mini-cifras b{font:700 17px/1.1 var(--font);color:var(--t-ink)}
@container (min-width:1100px){
  .ti-portada > .ti-franja{width:288px}
  .ti-franja .tf-item{padding:14px 14px 14px 12px;gap:12px}
  .ti-franja .tf-curso{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  .tf-luz-anillo::before,.tf-luz-caja::before,.tf-luz-caja::after,.tf-barra b,.tf-barra::after{animation:none}
}
/* Ajustes de las ventanitas con luz */
.ti-franja .tf-semana{flex-direction:row;align-items:center;gap:12px;cursor:pointer}
.tf-luz-caja i{font-size:21px;line-height:1}
.tf-asig-ic i{font-size:16px;line-height:1}
/* En fila (pantallas estrechas): el progreso se compacta para no comerse la foto */
@container (max-width:1099px){
  .ti-franja{align-items:stretch}
  .ti-franja .tf-item{align-items:center}
  .tf-curso{flex:0 0 min(300px,86%) !important}
  .tf-asig-lista{gap:5px}
  .tf-asig{grid-template-columns:1fr auto;row-gap:2px}
  .tf-asig-ic{display:none}
  .tf-asig-n{font-size:11.5px}
  .tf-asig em{grid-row:1;grid-column:2;font-size:11.5px}
  .tf-barra{grid-column:1/-1;height:4px}
  .tf-prog-h{margin-bottom:3px}
}
@media(max-width:768px){ .ti-escena{min-height:170px} }

/* Móvil: el progreso en rejilla de 2×2 para que la fila sea baja y quepa la foto */
@media(max-width:768px){
  .tf-curso .tf-asig-lista{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
  .ti-escena{min-height:0}
  .ti-franja .tf-item{padding:10px 12px}
}
/* Logo «Retorika · Academia virtual» en el menú lateral; en la cabecera del móvil,
   que es muy baja, sigue la marca de una línea */
.rk-marca-academia{display:none}
@media(min-width:769px){
  .rk-topnav .rk-marca{display:none !important}
  .rk-marca-academia{display:block;width:158px;height:auto}
  .rk-topnav .rk-logo{margin:8px 56px 28px 18px}
}
@media(min-width:769px) and (max-width:1100px){ .rk-marca-academia{width:56px} }
@media(min-width:769px){ .rk-marca-academia{width:146px} .rk-topnav .rk-logo{margin:6px 60px 28px 16px} }

/* La foto de la portada cubre SIEMPRE todo el ancho (con el menú abierto o plegado):
   el lienzo mide lo que haga falta para cubrir la escena, pegado abajo, así que si
   sobra imagen se recorta el cielo de arriba y nunca la pasarela con las chinchetas.
   Un difuminado corto en los laterales la funde con el fondo. */
.ti-lienzo{top:auto !important;bottom:0;left:50%;height:auto !important;
  width:max(100cqw, calc(100cqh * 1672 / 941)) !important;aspect-ratio:1672/941;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%) !important}
/* El bloque del texto es más ancho que lo que se ve: su hueco deja pasar los clics a
   las chinchetas; solo el botón y los enlaces los recogen */
.ti-portada-tx{pointer-events:none}
.ti-portada-tx button,.ti-portada-tx a{pointer-events:auto}

/* Chinchetas dentro de la foto, en % de su tamaño (coordenadas de la imagen de
   1672×941): se mueven exactamente con ella, sin JavaScript. */
.ti-lienzo .ti-pin{position:absolute}
.ti-lienzo .ti-pin[data-anchor="aprende"]{left:48.385%;top:89.69%}
.ti-lienzo .ti-pin[data-anchor="practica"]{left:50.837%;top:76.514%}
.ti-lienzo .ti-pin[data-anchor="supera"]{left:49.940%;top:68.544%}

/* ══ AMIGOS Y AVISOS ARRIBA A LA DERECHA (ordenador) ═════════════════════════
   Los dos botones salen del menú y flotan arriba a la derecha de la pantalla. Cada
   uno abre un panel del mismo ancho que las ventanitas de Inicio, no muy alto y con
   su propio scroll: la campana, las notificaciones (#notif-panel); amigos, la lista
   (#friends-rail, que deja de ser columna). */
@media(min-width:769px){
  .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap{
    position:fixed !important;top:18px !important;bottom:auto !important;z-index:1100 !important;visibility:visible !important;
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.78) !important;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
    border:1px solid rgba(255,255,255,.95) !important;box-shadow:0 10px 26px -14px rgba(16,38,72,.45) !important}
  .rk-topnav .dash-bell-wrap{right:24px !important}
  .rk-topnav .dash-friends-wrap{right:78px !important}
  .rk-topnav .dash-friends-wrap:hover,.rk-topnav .dash-bell-wrap:hover{background:#fff !important}
  .rk-topnav .dash-friends-wrap i,.rk-topnav .dash-bell-wrap i{font-size:19px;color:#1B2A4A}
  body.amigos-abierto .rk-topnav .dash-friends-wrap,.rk-topnav .dash-bell-wrap:has(~ #notif-panel.open){background:#fff !important;box-shadow:0 0 0 2px var(--t-blue) !important}
  .dash-bell-badge,.dash-friends-badge{top:6px !important;right:7px !important}
  /* Hueco para los botones: la columna de ventanitas de Inicio baja un poco */
  .ti-portada > .ti-franja{top:78px !important}

  /* El panel: cristal, 288 px de ancho, como mucho 420 de alto y scroll dentro */
  .notif-panel,.dash-friends-rail{
    position:fixed !important;top:72px !important;right:24px !important;left:auto !important;bottom:auto !important;
    width:288px !important;height:auto !important;max-height:min(420px,calc(100vh - 96px)) !important;overflow-y:auto !important;
    padding:14px 14px 10px !important;border-radius:18px !important;border:1px solid #fff !important;
    background:rgba(255,255,255,.9) !important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 26px 54px -24px rgba(16,38,72,.5) !important;z-index:1150 !important;
    transform-origin:top right;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.9,.3,1.2) !important}
  .notif-panel{visibility:hidden;opacity:0;transform:translateY(-6px) scale(.96) !important}
  .notif-panel.open{visibility:visible;opacity:1;transform:none !important}
  .dash-friends-rail{display:block !important;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.96) !important}
  body.amigos-abierto .dash-friends-rail{visibility:visible;opacity:1;transform:none !important}
  .notif-panel-head,.dfr-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-14px;margin:-14px -14px 8px;padding:14px 14px 10px;background:rgba(255,255,255,.96);z-index:1;border-bottom:1px solid var(--t-line-2)}
  .notif-panel-title,.dfr-title{font:500 11.5px var(--t-label) !important;letter-spacing:.2em;text-transform:uppercase;color:#5E6A7E !important}
  .notif-panel-close,.dfr-cerrar{width:30px;height:30px;border-radius:50%;border:0;background:var(--t-soft);color:var(--t-ink);cursor:pointer;font-size:13px}
  .dfr-search{width:100%;box-sizing:border-box;height:38px;padding:0 12px;border:1px solid var(--t-line);border-radius:12px;background:#fff;font:14px var(--font);margin-bottom:8px}
}

/* ══ FONDO EN TODAS LAS SECCIONES ═════════════════════════════════════════════
   Fuera de Inicio el mismo anfiteatro, pero desenfocado y velado, como si estuviera
   lejos: da ambiente sin competir con la información (body.fondo-seccion lo pone
   activarNavItem). */
.dash-layout{position:relative}
.dash-layout::before{content:'';position:fixed;inset:-40px;z-index:0;pointer-events:none;
  background:url(/assets/tema/anfiteatro.jpg) center 70%/cover no-repeat;filter:blur(14px) saturate(1.15);opacity:0;transition:opacity .45s ease}
.dash-layout::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(180deg,rgba(247,250,255,.55) 0%,rgba(247,250,255,.72) 45%,rgba(247,250,255,.82) 100%)}
body.fondo-seccion .dash-layout::before{opacity:.9}
body.fondo-seccion .dash-layout::after{opacity:1}
.dash-body,.rk-topnav{position:relative;z-index:1}
body.fondo-seccion .dash-main,body.fondo-seccion .dash-content,body.fondo-seccion .dash-layout{background:transparent !important}
/* Las tarjetas de las secciones, un pelín translúcidas para que se intuya el fondo */
body.fondo-seccion .pf2-card{background:rgba(255,255,255,.88)}
@media(min-width:769px){ body.fondo-seccion .dash-main > [id^="seccion-"]{padding-top:72px !important} }

/* ══ MENÚ LATERAL: con Cursos y Ejercicios, las entradas algo más compactas ══ */
@media(min-width:769px){
  .rk-home,.rk-nav .dash-nav-item{height:44px}
  .rk-nav{gap:2px}
  .rk-nav-der{margin-top:10px !important;padding-top:10px !important}
  .rk-topnav .rk-logo{margin-bottom:22px}
  @media(max-height:900px){ .rk-firma{display:none} .rk-onda{height:170px} }
  @media(max-height:780px){ .rk-onda{display:none} .rk-home,.rk-nav .dash-nav-item{height:40px} }
}

/* ══ SECCIONES CURSOS Y EJERCICIOS ════════════════════════════════════════════ */
.sec-propia{max-width:1180px;margin:0 auto;padding:28px clamp(20px,3vw,40px) 60px;box-sizing:border-box}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px;margin-top:8px}
.cr-card{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;background:rgba(255,255,255,.9);border:1px solid #fff;box-shadow:0 18px 40px -26px rgba(16,38,72,.4)}
.cr-top{display:flex;align-items:center;gap:14px}
.cr-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:25px;flex-shrink:0}
.cr-tit{flex:1;min-width:0}
.cr-tit h2{margin:0;font:700 19px/1.2 var(--font);color:var(--t-ink);letter-spacing:-.01em}
.cr-tit span{font-size:13px;color:var(--t-ink-2)}
.cr-sello{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#FFF4D6;color:#B8860B;font-size:21px}
.cr-barra{height:6px;border-radius:3px;background:color-mix(in srgb,var(--c) 13%,#EEF2F8);overflow:hidden}
.cr-barra b{display:block;height:100%;border-radius:3px;background:var(--c)}
.cr-hitos{display:flex;flex-wrap:wrap;gap:6px}
.cr-hito{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--t-soft);font-size:12.5px;font-weight:600;color:var(--t-ink-2)}
.cr-hito.ok{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.cr-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.cr-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);font:600 13.5px var(--font);cursor:pointer}
.cr-btn:hover{border-color:var(--t-ink)}
.cr-btn-p{background:var(--c);border-color:var(--c);color:#fff}
.cr-btn-p:hover{filter:brightness(1.08);border-color:var(--c)}
.ej-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.ej-chip{height:38px;padding:0 16px;border-radius:19px;border:1px solid var(--t-line);background:rgba(255,255,255,.9);color:var(--t-ink);font:600 13.5px var(--font);cursor:pointer}
.ej-chip:hover{border-color:var(--c,var(--t-ink))}
.ej-chip.on{background:var(--c,var(--t-ink));border-color:var(--c,var(--t-ink));color:#fff}
.ej-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.ej-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid #fff;box-shadow:0 16px 36px -26px rgba(16,38,72,.4);transition:transform .2s,box-shadow .2s}
.ej-card:hover{transform:translateY(-2px);box-shadow:0 22px 44px -26px rgba(16,38,72,.5)}
.ej-hoy{box-shadow:0 0 0 2px var(--c),0 22px 44px -26px rgba(16,38,72,.5)}
.ej-hoy-et{position:absolute;top:16px;right:16px;padding:4px 10px;border-radius:999px;background:var(--c);color:#fff;font:600 11.5px var(--font)}
.ej-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:22px}
.ej-card h2{margin:4px 0 0;font:700 17px/1.25 var(--font);color:var(--t-ink)}
.ej-card p{margin:0;font-size:14px;line-height:1.5;color:#33415A;flex:1}
.ej-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.ej-pie > span{font-size:12.5px;font-weight:600;color:var(--c)}
.ej-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border:0;border-radius:19px;background:var(--t-ink);color:#fff;font:600 13.5px var(--font);cursor:pointer}
.ej-btn:hover{background:#1c2638}
/* Ajustes: el menú por encima del contenido (sus botones fijos de amigos y avisos
   tienen que verse también sobre la portada), fondo de sección algo más presente,
   ondas sin pisar la ficha y cursos en dos columnas */
@media(min-width:769px){ .rk-topnav{z-index:5} }
.dash-layout::before{filter:blur(9px) saturate(1.2)}
.dash-layout::after{background:linear-gradient(180deg,rgba(247,250,255,.32) 0%,rgba(247,250,255,.5) 40%,rgba(247,250,255,.66) 100%)}
@media(min-width:769px) and (max-height:900px){ .rk-onda{bottom:74px;height:130px} }
.cr-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
/* Los contenedores de cada sección traían su propio fondo opaco y tapaban el anfiteatro */
body.fondo-seccion .dash-main > [id^="seccion-"],body.fondo-seccion .dash-main > .dash-content,body.fondo-seccion .dash-main > div:not(.ti-bocata){background:transparent !important}

/* ══ FONDO COMÚN CON TRANSICIÓN ══════════════════════════════════════════════
   Una sola foto para toda la app, encuadrada igual que la de la portada de Inicio
   (cubre el ancho, pegada abajo). En Inicio se ve nítida; en el resto de secciones se
   desenfoca, se acerca un poco y se vela, con transición: no hay cambio de imagen. */
.dash-layout::before,.dash-layout::after{content:none !important}
.dash-body{position:relative}
.fondo-comun{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size}
.fondo-comun-lienzo{position:absolute;bottom:0;left:50%;width:max(100cqw, calc(100cqh * 1672 / 941));aspect-ratio:1672/941;
  transform:translateX(-50%);transform-origin:50% 70%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  transition:filter .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.fondo-comun-lienzo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.22) contrast(1.03)}
.fondo-comun::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background:linear-gradient(180deg,rgba(247,250,255,.32) 0%,rgba(247,250,255,.5) 40%,rgba(247,250,255,.66) 100%)}
body.fondo-seccion .fondo-comun-lienzo{filter:blur(10px);transform:translateX(-50%) scale(1.06)}
body.fondo-seccion .fondo-comun::after{opacity:1}
.dash-main{position:relative;z-index:1;background:transparent !important}
.dash-body > .dash-friends-rail{z-index:2}
/* En Inicio (ordenador), la foto de la portada la pone el fondo común */
body.fondo-unico .ti-lienzo .ti-foto{opacity:0}
body.fondo-unico .ti-escena,body.fondo-unico .dash-bienvenida,body.fondo-unico .dash-content.dash-bienvenida{background:transparent !important}
/* Contenido de las secciones: entra con un leve fundido mientras el fondo se desenfoca */
body.fondo-seccion .dash-main > [id^="seccion-"]{animation:secFunde .45s ease both}
@keyframes secFunde{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fondo-comun-lienzo,.fondo-comun::after{transition:none}body.fondo-seccion .dash-main > [id^="seccion-"]{animation:none}}

/* ══ PANELES QUE EMPUJAN ═════════════════════════════════════════════════════ */
:root{--empuje:0px}
@media(min-width:769px){
  .notif-panel,.dash-friends-rail{top:72px !important;right:24px !important;width:288px !important}
  .ti-portada > .ti-franja{right:24px !important;width:288px !important;top:calc(78px + var(--empuje)) !important;transition:top .38s cubic-bezier(.2,.9,.3,1)}
  body.fondo-seccion .dash-main > [id^="seccion-"]{padding-top:calc(72px + var(--empuje)) !important;transition:padding-top .38s cubic-bezier(.2,.9,.3,1)}
  body.empuje-compacto .tf-curso .tf-asig-lista{display:none}
  /* El panel se despliega hacia abajo desde su botón */
  .notif-panel,.dash-friends-rail{transform-origin:top center;clip-path:inset(0 0 100% 0 round 18px);transition:clip-path .38s cubic-bezier(.2,.9,.3,1),opacity .2s ease,visibility 0s linear .38s !important;transform:none !important}
  .notif-panel.open,body.amigos-abierto .dash-friends-rail{clip-path:inset(0 0 0 0 round 18px);transition:clip-path .38s cubic-bezier(.2,.9,.3,1),opacity .2s ease,visibility 0s !important}
}
@media(prefers-reduced-motion:reduce){.ti-portada > .ti-franja,body.fondo-seccion .dash-main > [id^="seccion-"],.notif-panel,.dash-friends-rail{transition:none !important}}
body.fondo-unico .ti-portada{background:transparent !important}
/* En las secciones el panel empuja el contenido hacia la izquierda (se estrecha y
   queda al lado del panel), en vez de bajarlo 400 px y dejar un hueco */
@media(min-width:769px){
  body.fondo-seccion .dash-main > [id^="seccion-"]{padding-top:72px !important;transition:padding-right .38s cubic-bezier(.2,.9,.3,1)}
  body.fondo-seccion.panel-abierto .dash-main > [id^="seccion-"]{padding-right:336px !important}
}

/* ══ CURSOS: CATÁLOGO ONLINE Y PRESENCIAL ═════════════════════════════════════ */
.cc-intro{margin:8px 0 18px;font-size:15px;line-height:1.5;color:#33415A;max-width:720px}
.cc-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;margin-top:6px;border-radius:20px;
  background:var(--t-ink);color:#fff;font:600 14px var(--font);text-decoration:none}
.cc-btn:hover{background:#1c2638;color:#fff}
.cc-btn:focus-visible{outline:2px solid var(--t-blue);outline-offset:3px}
.cc-btn{white-space:nowrap}

/* ══ CURSOS EN UNA PANTALLA, CON PESTAÑAS ═════════════════════════════════════ */
.sec-cursos{padding-bottom:24px !important}
.sec-cursos .pf2-hero{margin-bottom:4px;padding-bottom:0 !important}
.sec-cursos .pf2-name{font-size:44px !important}
.sec-cursos .pf2-alias{font-size:16px !important;margin-top:8px !important}
.cc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.cc-tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:20px;border:1px solid rgba(18,30,52,.1);
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--t-ink);font:600 14px var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cc-tab i{font-size:17px}
.cc-tab:hover{border-color:var(--t-ink)}
.cc-tab.on{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.cc-tab:focus-visible{outline:2px solid var(--t-blue);outline-offset:2px}
.cc-panel.cc-entra{animation:ccEntra .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes ccEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cc-panel .cc-intro{margin:0 0 14px}
/* Plan de estudios: 2 × 2 compacto */
.sec-cursos .cr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:0}
.sec-cursos .cr-card{padding:18px;gap:11px}
.cr-ult{font-size:13px;color:var(--t-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-ult button{border:0;background:none;padding:0;font:600 13px var(--font);color:var(--c);cursor:pointer}
.cr-ult button:hover{text-decoration:underline}
@media(max-width:640px){ .sec-cursos .cr-grid{grid-template-columns:1fr !important} .cc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .cc-tab{flex-shrink:0} }

/* ══ CURSOS: LAS TARJETAS (2026-10-19) ═════════════════════════════════════════
   La portada arriba, a 16:10 y con el encuadre que le haya dado el equipo en SuperAdmin ›
   Cursos (--px, --py: el punto que queda en el centro; --z: el acercamiento; Portadas en app.js);
   sobre ella, si es online o presencial y, si hay oferta, el descuento. Debajo, lo que dura, el
   nombre, la descripción y el pie con el precio (tachado el de antes si ha bajado) o el avance si
   ya es tuyo, y el botón. --cc es el color del curso. Sustituye al «cartel» de cristal sobre la
   portada (2026-09-27), que con las portadas pálidas se veía soso. */
.cv-encuadre{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--px,50%) var(--py,50%);
  transform:scale(var(--z,1));transform-origin:var(--px,50%) var(--py,50%)}
.cv{--cc:#1D6DF0;position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;margin:0;padding:0;border-radius:22px;
  background:#fff;border:1px solid rgba(18,30,52,.08);box-shadow:0 22px 44px -30px rgba(16,38,72,.55);text-align:left;font:inherit;color:var(--t-ink);
  transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s}
.cv-pres{--cc:#F4166B}
.cv:hover,.cv:focus-within{transform:translateY(-4px);box-shadow:0 32px 60px -30px rgba(16,38,72,.62)}
.cv-foto{position:relative;flex-shrink:0;aspect-ratio:16/10;overflow:hidden;background:#E3EAF5}
.cv-foto .cv-encuadre{transition:scale .9s cubic-bezier(.2,.9,.3,1)}
.cv:hover .cv-foto .cv-encuadre{scale:1.045}
.cv-foto::after{content:'';position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(11,18,32,.18));pointer-events:none}
.cv-tipo{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  font:700 12px var(--font);color:#fff;background:rgba(11,18,32,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cv-tipo i{font-size:15px;color:color-mix(in srgb,var(--cc) 55%,#fff)}
.cv-oferta{position:absolute;right:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 10px;border-radius:999px;
  font:800 14.5px var(--font);color:#fff;background:#F4166B;box-shadow:0 10px 24px -8px rgba(244,22,107,.75);transform:rotate(-3deg)}
.cv-oferta[hidden]{display:none}
.cv-oferta i{font-size:17px}
.cv-cuerpo{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 18px 16px}
.cv-meta{margin:0;min-height:1.3em;font:600 11.5px/1.3 var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--cc) 82%,#000)}
.cv h3{margin:0;font:700 19px/1.25 var(--font);letter-spacing:-.012em;color:var(--t-ink)}
.cv-desc{margin:2px 0 0;font:400 14px/1.5 var(--font);color:#4A566B;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cv-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.cv-cuerpo > .cv-pie{border-top:1px solid rgba(18,30,52,.07)}
.cv-cuerpo h3 + .cv-pie,.cv-desc + .cv-pie{margin-top:auto}
.cv-precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.cv-precio b{font:800 25px/1 var(--font);letter-spacing:-.025em;color:var(--t-ink)}
.cv-precio s{font:500 15px var(--font);color:#8A94A6}
.cv-precio em{flex-basis:100%;margin-top:3px;font:700 12.5px var(--font);font-style:normal;color:#C2185B}
.cv-rebajado .cv-precio b{color:#D10F5C}
.cv-precio b.cv-pronto,.cv-precio b.cv-medida{font:700 15px var(--font);letter-spacing:0;color:var(--t-ink)}
.cv-precio .cv-pronto{color:#7A4FD0}
.cv-cargando{display:block;width:96px;height:24px;border-radius:8px;background:linear-gradient(90deg,#EEF2F8 25%,#F8FAFD 50%,#EEF2F8 75%);background-size:200% 100%;
  animation:cvCarga 1.2s linear infinite}
@keyframes cvCarga{to{background-position:-200% 0}}
.cv-avance{display:grid;gap:7px;min-width:130px}
.cv-avance b{display:inline-flex;align-items:center;gap:5px;font:700 14px var(--font);color:#0C8A4A}
.cv-barra{display:block;height:6px;border-radius:3px;background:rgba(18,30,52,.08);overflow:hidden}
.cv-barra i{display:block;height:100%;border-radius:3px;background:#12C56B}
.cv-tuyo{border-color:rgba(18,197,107,.5);box-shadow:0 0 0 2px rgba(18,197,107,.18),0 22px 44px -30px rgba(16,38,72,.55)}
.cv-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 15px;border-radius:999px;font:700 13.5px var(--font);
  color:#fff;background:var(--t-ink);transition:background .2s}
.cv:hover .cv-cta,.cv:focus-within .cv-cta{background:var(--cc)}
.cv-cta i{font-size:16px;transition:transform .25s}
.cv:hover .cv-cta i{transform:translateX(3px)}
.cv-enlace{position:absolute;inset:0;z-index:3;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer}
.cv-enlace:focus-visible{outline:3px solid var(--t-blue);outline-offset:3px}
/* Compacta (la vista «Todos»): sin descripción y más prieta */
.cv-c .cv-cuerpo{gap:4px;padding:12px 14px 14px}
.cv-c h3{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-c .cv-meta{font-size:10.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-c .cv-pie{padding-top:10px;gap:8px}
.cv-c .cv-precio b{font-size:20px}
.cv-c .cv-precio s{font-size:13px}
.cv-c .cv-precio em{display:none}
.cv-c .cv-cta{padding:7px 11px 7px 12px;font-size:12.5px}
.cv-c .cv-oferta{padding:4px 10px 4px 8px;font-size:13px}
/* Tu plan de estudios, entre las tarjetas de «Todos» */
.cv.cv-plan{justify-content:flex-end;gap:12px;padding:20px;cursor:pointer;color:#fff;border-color:rgba(255,255,255,.3);
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(150deg,#2F80FF 0%,#1449C8 70%,#0E2F86 100%)}
.cv-plan-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;font-size:24px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.cv-plan-tx b{display:block;font:700 18px/1.2 var(--font)}
.cv-plan-tx small{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.85)}
.cv-plan .cv-cta{align-self:flex-start;color:#1449C8;background:#fff}
.cv-plan:hover .cv-cta{color:#fff;background:var(--t-ink)}
.cv-plan:focus-visible{outline:3px solid var(--t-blue);outline-offset:3px}
/* Las rejillas */
.cc-online,.cc-pres,.cc-todos{display:grid;gap:18px;grid-auto-rows:auto !important;align-items:stretch}
.cc-online{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.cc-pres,.cc-todos{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px}
@media(max-width:1180px){ .cc-online,.cc-pres,.cc-todos{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media(max-width:640px){ .cc-online,.cc-pres,.cc-todos{grid-template-columns:minmax(0,1fr) !important} .cv-plan{min-height:200px} }
@media(prefers-reduced-motion:reduce){ .cv,.cv-foto .cv-encuadre,.cv-cta,.cv-cta i{transition:none} .cv-cargando{animation:none} }
/* La foto de la ficha de compra y la novedad de Inicio, con su encuadre si el equipo puso otra */
.co-compra-foto{aspect-ratio:16/10;overflow:hidden;background:#E3EAF5}
.tf-nov-foto img.cv-encuadre,.tf-novedad:hover .tf-nov-foto img.cv-encuadre{object-position:var(--px,50%) var(--py,50%);transform:scale(var(--z,1));transform-origin:var(--px,50%) var(--py,50%)}

/* ══ AMIGOS Y NOTIFICACIONES, REDISEÑO (2026-09-27) ═══════════════════════════
   Mismo lenguaje que las ventanitas de Inicio: cristal, tinta, líneas finas, color
   solo como código (estado, tipo de aviso) y un único botón fuerte por fila. */
@media(min-width:769px){
  .notif-panel,.dash-friends-rail{width:320px !important;max-height:min(520px,calc(100vh - 96px)) !important;padding:0 14px 14px !important;scrollbar-width:thin}
  .notif-panel-head,.dfr-head{position:sticky;top:0;margin:0 -14px 6px !important;padding:16px 16px 12px !important;border-bottom:0 !important;
    background:linear-gradient(180deg,rgba(255,255,255,.98) 70%,rgba(255,255,255,0)) !important}
}
.dfr-head-tx{display:flex;align-items:center;gap:10px;min-width:0}
.dfr-title,.notif-panel-title{font:700 17px var(--font) !important;letter-spacing:-.01em !important;text-transform:none !important;color:var(--t-ink) !important}
.dfr-online{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--font);color:var(--t-green-text)}
.nt-cont{padding:2px 9px;border-radius:10px;background:#E6EFFE;color:var(--t-blue-text);font:600 12px var(--font)}
.dfr-cerrar,.notif-panel-close{width:32px !important;height:32px !important;border-radius:50% !important;border:0 !important;background:var(--t-soft) !important;color:var(--t-ink) !important;font-size:15px !important;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dfr-cerrar:hover,.notif-panel-close:hover{background:#E4EAF3 !important}
/* Buscador */
.af-buscar{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;margin:0 0 12px;border-radius:12px;background:var(--t-soft);border:1px solid transparent;transition:border-color .2s,background .2s}
.af-buscar:focus-within{background:#fff;border-color:var(--t-blue)}
.af-buscar i{color:#5E6A7E;font-size:17px}
.af-buscar .dfr-search{flex:1;min-width:0;height:auto !important;border:0 !important;background:none !important;padding:0 !important;margin:0 !important;outline:none;font:500 14px var(--font);color:var(--t-ink)}
/* Secciones */
.af-sec{display:flex;align-items:center;gap:8px;margin:14px 2px 6px;font:600 11px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:#5E6A7E}
.af-sec-sub{font:500 11.5px var(--font);letter-spacing:0;text-transform:none;color:#A0AABA}
.af-num{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--t-soft);color:var(--t-ink);font:600 11px var(--font);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center}
.af-num-azul{background:var(--t-blue);color:#fff}
/* Tarjeta «yo»: estado y código */
.af-yo{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:rgba(243,246,251,.8)}
.af-est{position:relative}
.af-est-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:11px;background:#fff;cursor:pointer;font-family:var(--font);box-shadow:0 1px 2px rgba(16,38,72,.06)}
.af-est-btn > i{margin-left:auto;color:#5E6A7E;font-size:15px}
.af-est-punto{width:10px;height:10px;border-radius:50%;background:var(--e);flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--e) 20%,transparent)}
.af-est-punto.hueco{background:#fff;box-shadow:inset 0 0 0 2px #8A94A6}
.af-est-tx{display:flex;flex-direction:column;min-width:0;text-align:left}
.af-est-tx small{font-size:11px;color:#5E6A7E}
.af-est-tx b{font:600 13.5px var(--font);color:var(--t-ink)}
.af-est-menu{margin-top:6px;padding:5px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -18px rgba(16,38,72,.45);animation:ccEntra .25s both}
.af-est-op{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border:0;border-radius:9px;background:none;cursor:pointer;font-family:var(--font);text-align:left}
.af-est-op:hover,.af-est-op.on{background:var(--t-soft)}
.af-est-op .af-est-tx small{font-size:11.5px}
.af-est-op > i{margin-left:auto;color:var(--t-blue-text)}
.af-est-priv{display:flex;align-items:flex-start;gap:9px;margin-top:4px;padding:9px;border-top:1px solid var(--t-line-2);cursor:pointer}
.af-est-priv b{display:block;font:600 12.5px var(--font);color:var(--t-ink)}
.af-est-priv small{display:block;font-size:11px;color:#5E6A7E}
.af-cod{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(16,38,72,.06)}
.af-cod-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.af-cod-tx small{font-size:11px;color:#5E6A7E}
.af-cod-tx b{font:700 15px var(--t-label);letter-spacing:.12em;color:var(--t-ink)}
.af-premio{display:flex;align-items:center;gap:7px;padding:0 4px;font-size:12px;color:#33415A}
.af-premio i{color:var(--t-green-text);font-size:15px}
.af-premio b{color:var(--t-green-text)}
.inv-caja{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;background:#fff;border:0 !important;font-size:12px;color:#33415A}
.inv-caja i{color:#5E6A7E;font-size:17px}
.inv-num{font:700 20px var(--font);color:var(--t-blue-text)}
.inv-tit{font:600 12.5px var(--font);color:var(--t-ink)}
.inv-sub{font-size:11.5px;color:#5E6A7E}
/* Botones */
.af-ic{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:0;background:var(--t-soft);color:var(--t-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:background .2s,color .2s}
.af-ic:hover{background:var(--t-ink);color:#fff}
.af-ic-wa:hover{background:#25D366}
.af-ic-retar:hover{background:var(--t-blue)}
.af-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:16px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);font:600 12.5px var(--font);cursor:pointer;white-space:nowrap}
.af-btn-p{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.af-btn-p:hover{background:#1c2638}
.af-btn-ancho{width:100%;justify-content:center;height:40px;margin-bottom:10px}
.af-tag{flex-shrink:0;font:600 11.5px var(--font);color:#5E6A7E;display:inline-flex;align-items:center;gap:4px}
.af-tag-ok{color:var(--t-green-text)}
/* Filas */
.af-fila{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px;transition:background .15s}
.af-fila:hover{background:rgba(243,246,251,.9)}
.af-fila-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.af-fila-tx b{font:600 13.5px var(--font);color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-fila-tx small{font-size:11.5px;color:#5E6A7E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-fila-nueva,.af-fila-duelo{background:rgba(230,239,254,.55)}
.af-marc{flex-shrink:0;font:700 12.5px var(--font);font-variant-numeric:tabular-nums;color:#5E6A7E}
.af-marc.gana{color:var(--t-green-text)}.af-marc.pierde{color:#C2185B}
.af-pend{margin:10px 6px 0;font-size:12px;color:#5E6A7E}
/* Avatar */
.af-av{position:relative;flex-shrink:0;width:var(--t);height:var(--t)}
.af-av-in{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 calc(var(--t) * .4) var(--font);
  background:linear-gradient(145deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c))}
.af-av-est{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--e);border:2px solid #fff;display:inline-block}
/* En línea: carrusel de avatares */
.af-online{display:flex;gap:12px;overflow-x:auto;padding:2px 4px 6px;scrollbar-width:none}
.af-online-it{flex:0 0 auto;width:58px;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;cursor:pointer;padding:0}
.af-online-it .af-av-in{box-shadow:0 0 0 2px #fff,0 0 0 4px #12C56B}
.af-online-it .af-av-est{display:none}
.af-online-it span:last-child{max-width:100%;font:500 11.5px var(--font);color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-online-it:hover .af-av-in{transform:translateY(-2px);transition:transform .2s}
/* Vacío */
.af-vacio{padding:14px 8px;text-align:center;font-size:13px;color:#5E6A7E}
.af-vacio-grande{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px}
.af-vacio-grande b{font:600 14.5px var(--font);color:var(--t-ink)}
.af-vacio-grande span{font-size:13px;line-height:1.45;max-width:230px}
.af-vacio-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--t-soft);color:var(--t-blue-text);font-size:24px;margin-bottom:4px}
/* Notificaciones */
.nt-it{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 8px;border:0;border-radius:12px;background:none;text-align:left;font-family:var(--font);transition:background .15s}
button.nt-it{cursor:pointer}
.nt-it:hover{background:rgba(243,246,251,.9)}
.nt-nueva{background:rgba(230,239,254,.5)}
.nt-ic{width:36px;height:36px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);font-size:18px}
.nt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nt-tx b{font:600 13.5px var(--font);color:var(--t-ink)}
.nt-tx span{font-size:12.5px;line-height:1.4;color:#33415A}
.nt-tx small{font-size:11.5px;color:#A0AABA;margin-top:2px}
.nt-punto{position:absolute;top:14px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--t-blue);box-shadow:0 0 0 3px rgba(29,109,240,.18)}
/* Los estilos viejos del panel ya no aplican */
.af-buscar .dfr-search{-webkit-appearance:none;appearance:none;box-shadow:none !important;outline:none !important;border-radius:0 !important}
.af-buscar .dfr-search::-webkit-search-cancel-button{-webkit-appearance:none;width:14px;height:14px;cursor:pointer;border-radius:50%;
  background:#A0AABA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/9px no-repeat}
.inv-caja.inv-vacia{font-weight:400 !important;color:#5E6A7E !important;font-size:12px;line-height:1.4;padding:4px 4px 2px;background:none}
.inv-caja.inv-vacia i{display:none}
.inv-caja span{font-weight:400}
@media(min-width:769px){ .notif-panel-head,.dfr-head{background:rgba(255,255,255,.97) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} }
.af-online{padding-top:6px}
/* Panel de amigos en móvil (Duelos._overlay) */
.af-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 20px 8px}
.af-cab-t{font:700 22px var(--font);letter-spacing:-.015em;color:var(--t-ink)}
.af-cab-s{font-size:13px;color:#5E6A7E;margin-top:2px}
.af-cuerpo{padding:10px 18px 22px}

/* ══ LENGUAJE COMÚN DE LAS SECCIONES (2026-09-27) ═════════════════════════════
   Lo mismo que Cursos y los paneles, para todas las secciones: tarjetas-contenedor de
   cristal sobre el anfiteatro desenfocado; tarjetas-elemento blancas que suben y se
   iluminan al pasar el ratón; entrada escalonada al abrir una sección; y el color
   solo como código. */
/* Contenedores: cristal */
body.fondo-seccion .pf2-card{
  background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.9) !important;border-radius:22px !important;box-shadow:0 22px 50px -34px rgba(16,38,72,.5) !important}
/* Elementos: blancos, sube y se ilumina */
.dxv2-card,.ej-card,.rtk2-service,.rtk2-rrss-item,.du-fila,.cr-card{
  background:rgba(255,255,255,.94) !important;border:1px solid rgba(255,255,255,.95) !important;border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,38,72,.05),0 14px 32px -26px rgba(16,38,72,.5) !important;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s,border-color .35s !important}
.dxv2-card:hover,.ej-card:hover,.rtk2-service:hover,.rtk2-rrss-item:hover,.du-fila:hover,.cr-card:hover{
  transform:translateY(-3px) !important;box-shadow:0 1px 2px rgba(16,38,72,.05),0 24px 44px -26px rgba(16,38,72,.55) !important}
/* Entrada escalonada al abrir la sección */
body.fondo-seccion .dash-main > [id^="seccion-"] > *{animation:secPieza .5s cubic-bezier(.2,.9,.3,1) both}
body.fondo-seccion .dash-main > [id^="seccion-"] > :nth-child(2){animation-delay:.05s}
body.fondo-seccion .dash-main > [id^="seccion-"] > :nth-child(3){animation-delay:.1s}
body.fondo-seccion .dash-main > [id^="seccion-"] > :nth-child(4){animation-delay:.15s}
body.fondo-seccion .dash-main > [id^="seccion-"] > :nth-child(n+5){animation-delay:.2s}
@keyframes secPieza{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Cabeceras de tarjeta: tamaño y peso comunes, sin iconos de color sueltos */
.pf2-card-head{font:700 18px var(--font) !important;letter-spacing:-.01em}
.pf2-card-head i{color:var(--t-blue-text) !important}
/* Etiquetas GRATUITO / PREMIUM y similares: píldoras sobrias */

/* ── Retorika: la cabecera ya no es azul: textos en tinta ── */
.rtk2-hero-desc{color:#33415A !important;font-size:16px !important;line-height:1.6 !important;max-width:720px}
.rtk2-mision{background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #fff !important;border-left:3px solid var(--t-blue) !important;border-radius:14px !important}
.rtk2-mision i{color:var(--t-blue-text) !important}
.rtk2-mision-tx{color:var(--t-ink) !important;font-weight:600 !important}
.rtk2-service-num{color:#D5DDE8 !important;font-weight:700 !important}
.rtk2-service-ic{border-radius:14px !important}
.rtk2-link{color:var(--t-blue-text) !important;font-weight:600 !important}

/* ── Competición: juegos con icono y color propio ── */
.comp-chip{border:1.5px solid var(--t-line) !important;background:#fff !important;border-radius:16px !important;padding:14px 8px !important;gap:8px !important;transition:border-color .2s,background .2s,transform .2s !important}
.comp-chip:hover{transform:translateY(-2px)}
.comp-chip-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:22px;transition:background .2s,color .2s}
.comp-chip-name{font:600 12.5px var(--font) !important;color:var(--t-ink) !important}
.comp-chip.on{border-color:var(--c) !important;background:color-mix(in srgb,var(--c) 5%,#fff) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.comp-chip.on .comp-chip-ic{background:var(--c);color:#fff}
.comp-dur{border:1.5px solid var(--t-line) !important;border-radius:14px !important;color:var(--t-ink) !important;font-weight:700 !important}
.comp-dur.on{border-color:var(--t-ink) !important;background:var(--t-ink) !important;color:#fff !important}
.comp-dur.on span{color:rgba(255,255,255,.7) !important}
.comp-step{font:600 11px var(--t-label) !important;letter-spacing:.16em !important;text-transform:uppercase;color:#5E6A7E !important}
/* Lista de duelos */
.du-h{font:700 18px var(--font);letter-spacing:-.01em;color:var(--t-ink);margin:0 0 12px}
.du-fila{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:12px 14px;cursor:pointer;font-family:var(--font);text-align:left}
.du-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:20px;flex-shrink:0}
.du-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.du-tx b{font:600 14px var(--font);color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-tx small{font-size:12.5px;color:#5E6A7E}
.du-marc{font:700 14px var(--font);font-variant-numeric:tabular-nums;color:var(--t-ink);flex-shrink:0}
.du-est{flex-shrink:0;padding:5px 11px;border-radius:999px;background:var(--t-soft);color:#5A6577;font:600 12px var(--font)}
.du-est.gana{background:#E3F7EC;color:var(--t-green-text)}
.du-est.pierde{background:#FDE7F0;color:#C2185B}
.du-est.toca{background:var(--t-blue);color:#fff}
.du-est.espera{background:#FFF1DE;color:#B45A09}

/* ── Aula, vacío ── */
@media(prefers-reduced-motion:reduce){body.fondo-seccion .dash-main > [id^="seccion-"] > *{animation:none}}
.af-vacio-ic i{font-size:24px !important;line-height:1}
.comp-link-btn,button[onclick*="crearEnlace"]{border:1.5px solid var(--t-line) !important;color:var(--t-ink) !important;background:#fff !important;border-radius:22px !important}
/* Diagnóstico: cada tarjeta con el color de su diagnóstico (el que trae el catálogo) */
.dxv2-card .dxv2-card-icon{background:var(--card-grad) !important;color:#fff !important;border:0 !important;border-radius:15px !important;box-shadow:0 10px 20px -12px rgba(16,38,72,.6) !important}
.dxv2-card .dxv2-card-icon i{color:#fff !important}
.dxv2-card-locked .dxv2-card-icon{background:#CBD3DF !important;box-shadow:none !important}
.dxv2-card-title{font:600 15.5px var(--font) !important;color:var(--t-ink) !important}
.dxv2-card-desc{color:#5E6A7E !important;font-weight:500 !important}
.dxv2-card-accent{display:none !important}
.dxv2-card{overflow:hidden;position:relative}
.dxv2-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--card-grad);opacity:0;transition:opacity .3s}
.dxv2-card:hover::after{opacity:1}
.dxv2-card-locked::after{display:none}

/* ══ SECCIONES AGRUPADAS: CABECERA COMÚN CON PESTAÑAS (2026-09-27) ═══════════
   Practicar (verde), Evaluarme (azul), Competir (fucsia) y Mi perfil (tinta). Banda
   de cristal con el icono de la sección como marca de agua en su color, ceja «Aula
   digital», título, frase y cifras; debajo, pestañas con una píldora que se desliza.
   Al cambiar de pestaña la cabecera se queda y solo entra el contenido. */
.hub{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;width:calc(100% - 2 * clamp(20px,3vw,40px));max-width:1180px;margin:24px auto 18px;
  padding:26px 30px 0;border-radius:26px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 60px -40px rgba(16,38,72,.55);animation:hubEntra .6s cubic-bezier(.2,.9,.3,1) both;transition:margin-right .38s cubic-bezier(.2,.9,.3,1)}
@keyframes hubEntra{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
/* Halo del color de la sección, abajo a la derecha */
.hub::before{content:'';position:absolute;z-index:-1;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--h) 26%,transparent) 0%,transparent 65%);animation:hubHalo 7s ease-in-out infinite}
@keyframes hubHalo{0%,100%{transform:translate(0,0) scale(1);opacity:.9}50%{transform:translate(-30px,-16px) scale(1.08);opacity:1}}
.hub-marca{position:absolute;z-index:-1;right:150px;top:-26px;font-size:190px;line-height:1;color:var(--h);opacity:.07;transform:rotate(-12deg);animation:hubMarca .9s cubic-bezier(.2,.9,.3,1) both}
@keyframes hubMarca{from{opacity:0;transform:rotate(-24deg) scale(.8)}to{opacity:.07;transform:rotate(-12deg)}}
.hub-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hub-tx{min-width:0}
.hub-ceja{display:flex;align-items:center;gap:10px;font:600 11.5px var(--t-label);letter-spacing:.28em;text-transform:uppercase;color:#5E6A7E}
.hub-regla{display:block;height:3px;width:30px;border-radius:2px;background:var(--h);animation:hubRegla .8s .15s cubic-bezier(.2,.9,.3,1) both}
@keyframes hubRegla{from{width:0}to{width:30px}}
.hub h1{margin:10px 0 0;font:700 clamp(34px,3.6vw,50px)/1 var(--font);letter-spacing:-.028em;text-transform:uppercase;color:#1257C0}
.hub p{margin:10px 0 0;max-width:560px;font:400 15.5px/1.5 var(--font);color:#33415A}
/* Cifras */
.hub-cifras{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;min-height:40px;transition:opacity .3s}
.hub-cifras.cargando{opacity:0}
.hub-num{display:flex;flex-direction:column;align-items:flex-end}
.hub-num b{font:800 40px/1 var(--font);letter-spacing:-.03em;color:var(--t-ink)}
.hub-num small{font:500 12.5px var(--font);color:#5E6A7E;margin-top:2px}
.hub-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.hub-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;background:rgba(255,255,255,.85);border:1px solid rgba(18,30,52,.07);font:500 12.5px var(--font);color:#33415A;white-space:nowrap}
.hub-chip i{color:var(--h);font-size:14px}
/* Pestañas con píldora deslizante */
.hub-tabs{position:relative;display:flex;gap:4px;margin:22px -14px 0;padding:10px 14px 12px;border-top:1px solid rgba(18,30,52,.07);overflow-x:auto;scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}
.hub-ind{position:absolute;left:0;top:10px;height:42px;border-radius:21px;background:var(--t-ink);box-shadow:0 10px 22px -12px rgba(11,18,32,.6);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.15),width .45s cubic-bezier(.2,.9,.3,1.15);z-index:0}
.hub.sin-anim .hub-ind{transition:none}
.hub-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:21px;background:none;cursor:pointer;
  font:600 14.5px var(--font);color:#5A6577;white-space:nowrap;transition:color .3s}
.hub-tab i{font-size:18px;transition:color .3s,transform .3s}
.hub-tab:hover{color:var(--t-ink)}
.hub-tab:hover i{transform:translateY(-1px)}
.hub-tab.on{color:#fff}
.hub-tab.on i{color:color-mix(in srgb,var(--h) 55%,#fff)}
.hub-tab:focus-visible{outline:2px solid var(--h);outline-offset:2px}
/* Dentro de una agrupada: fuera la cabecera antigua de cada pestaña (sus cifras ya
   están arriba), fuera lo repetido y el contenido pegado a la cabecera */
body.en-hub .dash-main > [id^="seccion-"]:not(#seccion-perfil):not(#seccion-aula) .pf2-hero{display:none !important}
body.en-hub #en2-plan,body.en-hub #perfil-comunicativo-section{display:none !important}
@media(min-width:769px){
  body.en-hub .dash-main > [id^="seccion-"]{padding-top:4px !important}
  body.fondo-seccion.panel-abierto #hub-cab{margin-right:336px}
}
/* Mi perfil: su tarjeta de alumno sí se queda (es el expediente) */
body.en-hub #seccion-perfil .pf2-hero{margin-top:0}
/* Usuario del menú, iluminado cuando estás en Mi perfil */
.rk-topnav .dash-user-card.activa{background:#E6EFFE !important}
.rk-nav-oculta{display:none !important}
/* Retorika dentro de Cursos: sin su cabecera grande */
.cc-panel .pf2-hero-top{display:none}
.cc-panel .pf2-hero{padding-top:0 !important;margin-bottom:6px}
.cc-panel .pf2-hero::before{display:none}
@media(max-width:768px){
  .hub{width:calc(100% - 28px);margin:14px auto 12px;padding:20px 18px 0;border-radius:22px}
  .hub-top{flex-direction:column;align-items:flex-start;gap:12px}
  .hub-cifras{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .hub-num{align-items:flex-start}
  .hub-num b{font-size:30px}
  .hub-chips{justify-content:flex-start}
  .hub h1{font-size:32px}
  .hub p{font-size:14.5px}
  .hub-marca{right:-20px;top:-16px;font-size:140px}
  .hub-tabs{margin:16px -18px 0;padding:10px 12px 12px}
  .hub-tab{padding:0 16px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.hub,.hub::before,.hub-marca,.hub-regla{animation:none}.hub-ind{transition:none}}
.hub{flex-shrink:0}
/* Mi perfil: bajo la cabecera común, la ficha del alumno es una tarjeta de cristal */
body.en-hub #seccion-perfil .pf2-hero{background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.9) !important;border-radius:22px !important;padding:22px 26px !important;box-shadow:0 22px 50px -34px rgba(16,38,72,.5) !important;margin-bottom:16px}
body.en-hub #seccion-perfil .pf2-hero::before{display:none !important}
body.en-hub #seccion-perfil .pf2-name{font-size:30px !important}
body.en-hub #seccion-perfil .pf2-avatar{width:64px;height:64px;font-size:22px}
body.en-hub #seccion-perfil .pf2-rtk-num{font-size:36px !important}
@media(max-width:768px){ body.en-hub #seccion-perfil .pf2-name{font-size:24px !important} }
@media(max-width:768px){
  .hub{padding:16px 16px 0}
  .hub-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:10px}
  .hub p,.hub-chips{display:none}
  .hub h1{font-size:28px;margin-top:6px}
  .hub-ceja{font-size:10.5px;letter-spacing:.22em}
  .hub-num{align-items:flex-end}
  .hub-num b{font-size:24px}
  .hub-num small{font-size:11.5px}
  .hub-cifras{align-items:flex-end;min-height:0}
  .hub-marca{font-size:110px;right:70px;top:-14px}
  .hub-tabs{margin-top:12px;padding:8px 10px 10px}
  .hub-ind{top:8px;height:38px}
  .hub-tab{height:38px;padding:0 14px;font-size:13.5px}
  body.en-hub #seccion-perfil .pf2-hero{padding:18px !important}
}

/* Scroll: una sola barra, la del contenedor principal. Varias secciones antiguas
   (Diagnóstico y otras) traían su propio scroll interno (flex:1 + overflow:auto) y,
   dentro del principal, quedaban recortadas sin poder bajar al final. */
.dash-main > [id^="seccion-"]{flex:none !important;overflow:visible !important;height:auto !important;max-height:none !important;min-height:0 !important}

/* ══ EVALUARME · RADIOGRAFÍA COMUNICATIVA (2026-09-27) ════════════════════════
   Anillo de diagnósticos sin iconos: el color dice el área y el relleno, si ya está
   hecho. Al pasar el ratón el segmento se adelanta y la ficha lo cuenta. */
.rd-oculto{display:none !important}
.rd{max-width:1180px;margin:0 auto}
.rd-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.rd-f{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:18px;border:1px solid rgba(18,30,52,.1);
  background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--t-ink);font:600 13.5px var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rd-f:hover{border-color:var(--c,var(--t-ink))}
.rd-f.on{background:var(--c,var(--t-ink));border-color:var(--c,var(--t-ink));color:#fff}
.rd-f-p{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.rd-f.on .rd-f-p{background:#fff}
.rd-cuerpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:28px;align-items:center}
/* La rueda */
.rd-rueda{position:relative;width:min(100%,calc(100vh - 330px),560px);aspect-ratio:1;margin:0 auto;min-width:380px}
.rd-rueda svg{position:absolute;inset:13%;width:74%;height:74%;overflow:visible}
.rd-fondo-in{fill:rgba(255,255,255,.62);stroke:rgba(255,255,255,.95);stroke-width:1.5}
.rd-seg{cursor:pointer;outline:none;animation:rdSeg .6s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * .06s)}
@keyframes rdSeg{from{opacity:0;transform:scale(.86) rotate(-8deg);transform-origin:300px 300px}to{opacity:1;transform:none}}
.rd-arco{fill:color-mix(in srgb,var(--c) 16%,#fff);stroke:color-mix(in srgb,var(--c) 50%,#fff);stroke-width:1.5;transition:d .35s cubic-bezier(.2,.9,.3,1.2),fill .3s,filter .3s,opacity .3s}
.rd-seg.hecho .rd-arco{fill:var(--c);stroke:var(--c)}
.rd-seg:hover .rd-arco,.rd-seg.sel .rd-arco{fill:color-mix(in srgb,var(--c) 34%,#fff);filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--c) 45%,transparent))}
.rd-seg.hecho.sel .rd-arco,.rd-seg.hecho:hover .rd-arco{fill:var(--c)}
.rd-seg:focus-visible .rd-arco{stroke:var(--t-ink);stroke-width:3}
.rd-seg.renovable .rd-arco{animation:rdLatido 2.4s ease-in-out infinite}
@keyframes rdLatido{0%,100%{opacity:1}50%{opacity:.6}}
.rd-seg.apagado,.rd-et.apagado,.rd-li.apagado{opacity:.14;pointer-events:none;filter:grayscale(1)}
.rd-seg,.rd-et,.rd-li{transition:opacity .35s,filter .35s}
.rd-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.rd-centro b{font:800 60px/1 var(--font);letter-spacing:-.04em;color:var(--t-ink)}
.rd-centro b small{font-size:.45em;color:#5E6A7E;font-weight:700;margin-left:2px}
.rd-centro span{font:500 13px var(--font);color:#5E6A7E;margin-top:6px}
/* Nombres alrededor */
.rd-et{position:absolute;width:150px;padding:4px 6px;border:0;background:none;cursor:pointer;font:600 13.5px/1.25 var(--font);color:#33415A;
  transition:color .25s,transform .25s,opacity .35s;animation:rdEt .6s .3s both}
@keyframes rdEt{from{opacity:0}to{opacity:1}}
.rd-et-der{transform:translate(0,-50%);text-align:left}
.rd-et-izq{transform:translate(-100%,-50%);text-align:right}
.rd-et-centro{transform:translate(-50%,-50%);text-align:center}
.rd-et::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px;opacity:.5}
.rd-et.hecho::before{opacity:1}
.rd-et:hover,.rd-et.sel{color:var(--c)}
.rd-et.sel{font-weight:700}
/* La ficha */
.rd-ficha{position:relative;min-height:320px;padding:28px 28px 26px;border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid #fff;box-shadow:0 30px 60px -38px rgba(16,38,72,.55)}
.rd-ficha::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--c);transition:background .35s}
.rd-ficha::after{content:'';position:absolute;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);transition:background .35s}
.rd-ficha-in{position:relative;z-index:1}
.rd-ficha-in.cambia{animation:rdFicha .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes rdFicha{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rd-area{display:inline-flex;align-items:center;gap:8px;font:600 11.5px var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.rd-ficha h2{margin:12px 0 0;font:800 32px/1.08 var(--font);letter-spacing:-.025em;color:var(--t-ink)}
.rd-corta{margin:10px 0 0;font:600 16px/1.4 var(--font);color:#33415A}
.rd-larga{margin:8px 0 0;font:400 14.5px/1.6 var(--font);color:#5A6577}
.rd-estado{display:flex;align-items:center;gap:8px;margin-top:18px;padding:10px 12px;border-radius:12px;background:var(--t-soft);font:500 13px var(--font);color:#5A6577}
.rd-estado i{color:#A0AABA;font-size:17px}
.rd-estado.hecho{background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--t-ink)}
.rd-estado.hecho i{color:var(--c)}
.rd-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rd-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:24px;background:var(--t-ink);color:#fff;font:600 15px var(--font);cursor:pointer;transition:background .2s,transform .2s}
.rd-btn:hover{background:var(--c);transform:translateY(-1px)}
.rd-btn-o{background:#fff;color:var(--t-ink);border:1.5px solid var(--t-line)}
.rd-btn-o:hover{background:#fff;border-color:var(--t-ink)}
.rd-lista{display:none}
/* Pantallas medianas: rueda arriba, ficha debajo */
@media(max-width:1180px){ .rd-cuerpo{grid-template-columns:1fr} .rd-rueda{width:min(100%,520px)} .rd-ficha{min-height:0} }
/* Móvil: lista */
@media(max-width:700px){
  .rd-cuerpo{display:none}
  .rd-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
  .rd-f{flex-shrink:0}
  .rd-lista{display:flex;flex-direction:column;gap:10px}
  .rd-li{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:18px;border:1px solid #fff;background:rgba(255,255,255,.88);text-align:left;cursor:pointer;font-family:var(--font);box-shadow:0 14px 30px -24px rgba(16,38,72,.5)}
  .rd-li-marca{width:6px;align-self:stretch;border-radius:3px;background:color-mix(in srgb,var(--c) 30%,#fff);flex-shrink:0}
  .rd-li.hecho .rd-li-marca{background:var(--c)}
  .rd-li-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .rd-li-tx b{font:700 15.5px var(--font);color:var(--t-ink)}
  .rd-li-tx small{font-size:13px;color:#5A6577}
  .rd-li-est{flex-shrink:0;padding:6px 12px;border-radius:14px;background:var(--t-ink);color:#fff;font:600 12.5px var(--font)}
  .rd-li.hecho .rd-li-est{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
}
@media(prefers-reduced-motion:reduce){.rd-seg,.rd-et,.rd-ficha-in.cambia,.rd-seg.renovable .rd-arco{animation:none}}
.rd-rueda{width:min(100%,calc(100vh - 360px),540px);min-width:360px}
.rd-cuerpo{grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:20px}
.rd-et{width:130px;font-size:13px}
.rd-arco{fill:color-mix(in srgb,var(--c) 22%,#fff)}
.rd-rueda{width:min(100%,calc(100vh - 360px),640px)}

/* ══ PRACTICAR · MAPA DE PRÁCTICA (2026-09-27) ════════════════════════════════
   Carriles por módulo con estaciones: vacía = sin probar, llena = probada (con las
   veces), latiendo = la recomendada. Reutiliza filtros, ficha y lista de Evaluarme. */
.pp{max-width:1180px;margin:0 auto}
.pp-cuerpo{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr);gap:24px;align-items:center;margin-top:10px}
.pp-mapa{display:flex;flex-direction:column;gap:6px;padding:14px 18px;border-radius:26px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9)}
.pp-carril{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:12px;padding:8px 0;border-top:1px dashed rgba(18,30,52,.08);
  animation:ppCarril .55s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--ci) * .07s);transition:opacity .35s,filter .35s}
.pp-carril:first-child{border-top:0}
@keyframes ppCarril{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.pp-carril-tx b{display:flex;align-items:center;gap:8px;font:700 14.5px var(--font);color:var(--t-ink)}
.pp-carril-tx b::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c);flex-shrink:0}
.pp-carril-tx small{display:block;margin:2px 0 0 17px;font-size:12px;color:#5E6A7E}
/* La pista: una línea del color del módulo con las estaciones encima */
.pp-pista{position:relative;display:flex;justify-content:space-around;align-items:flex-start;min-height:92px;padding-top:6px}
.pp-pista::before{content:'';position:absolute;left:0;right:0;top:27px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),color-mix(in srgb,var(--c) 45%,transparent) 20%,color-mix(in srgb,var(--c) 45%,transparent) 80%,color-mix(in srgb,var(--c) 10%,transparent))}
.pp-est{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;width:118px;padding:0;border:0;background:none;cursor:pointer;
  animation:ppEst .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--ci,0) * .07s + .15s + var(--i) * .05s);transition:opacity .35s,filter .35s}
.pp-carril .pp-est{animation-delay:calc(var(--ci) * .07s + .15s + var(--i) * .05s)}
@keyframes ppEst{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.pp-punto{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;
  box-shadow:inset 0 0 0 3px var(--c),0 8px 18px -12px rgba(16,38,72,.5);transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s,background .3s}
.pp-est.hecho .pp-punto{background:var(--c);box-shadow:0 10px 20px -10px var(--c)}
.pp-punto b{font:800 15px var(--font);color:#fff}
.pp-est.sig .pp-punto{animation:ppSig 1.8s ease-in-out infinite}
@keyframes ppSig{0%,100%{box-shadow:inset 0 0 0 3px var(--c),0 0 0 0 color-mix(in srgb,var(--c) 45%,transparent)}50%{box-shadow:inset 0 0 0 3px var(--c),0 0 0 10px color-mix(in srgb,var(--c) 0%,transparent)}}
.pp-est:hover .pp-punto,.pp-est.sel .pp-punto{transform:scale(1.18)}
.pp-est.sel:not(.hecho) .pp-punto{background:color-mix(in srgb,var(--c) 18%,#fff)}
.pp-est:focus-visible{outline:none}
.pp-est:focus-visible .pp-punto{outline:3px solid var(--t-ink);outline-offset:3px}
.pp-nom{font:600 12.5px/1.25 var(--font);color:#33415A;text-align:center;transition:color .25s}
.pp-est:hover .pp-nom,.pp-est.sel .pp-nom{color:var(--c)}
.pp-est.apagado,.pp-carril.apagado{opacity:.18;filter:grayscale(1)}
.pp-est.apagado{pointer-events:none}
/* Ficha: extras de Practicar */
.pp-entrena,.pp-mision{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(243,246,251,.9);font:500 13.5px/1.45 var(--font);color:#33415A}
.pp-entrena small,.pp-mision small{display:block;font:600 10.5px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E;margin-bottom:3px}
.pp-mision b{display:block;font:700 14px var(--font);color:var(--t-ink)}
.pp-mision span{display:block;margin-top:2px}
.pp-ficha h2{font-size:28px}
@media(max-width:1180px){ .pp-cuerpo{grid-template-columns:1fr} }
@media(max-width:700px){ .pp-cuerpo{display:none} }
@media(prefers-reduced-motion:reduce){.pp-carril,.pp-est,.pp-est.sig .pp-punto{animation:none}}
/* Mapa de práctica según el alto de pantalla: que quepa sin scroll */
.pp-carril{padding:4px 0}
.pp-pista{min-height:clamp(64px,calc((100vh - 430px) / 5),92px)}
.pp-mapa{padding:10px 18px}
@media(min-width:769px) and (max-height:920px){
  .hub p{display:none}
  .hub{padding-top:20px}
  .hub h1{margin-top:6px}
  .hub-tabs{margin-top:14px}
  .pp-punto{width:36px;height:36px}
  .pp-pista::before{top:23px}
  .pp-nom{font-size:12px}
  .pp-ficha{padding:22px 24px 20px}
  .pp-ficha h2{font-size:24px}
  .pp-ficha .rd-corta{font-size:14.5px}
  .pp-entrena,.pp-mision{margin-top:8px;padding:8px 10px;font-size:12.5px}
  .pp-ficha .rd-estado{margin-top:10px}
  .pp-ficha .rd-acc{margin-top:12px}
  .pp-ficha .rd-btn{height:42px}
}
@media(min-width:769px) and (max-height:800px){
  .pp-entrena{display:none}
  .pp-nom{white-space:nowrap;max-width:112px;overflow:hidden;text-overflow:ellipsis}
}
/* Las cifras de la cabecera no chocan con amigos/avisos en pantallas bajas */
@media(min-width:769px){ .hub-cifras{padding-top:26px} }
@media(min-width:769px) and (max-height:920px){ .hub-cifras{padding-top:30px} }
.pp-carril.oculto{display:none}
@media(min-width:769px){ .hub-cifras{padding-top:0 !important;margin-top:18px;margin-bottom:-18px} }
@media(min-width:769px) and (max-height:920px){ .hub-cifras{margin-top:26px;margin-bottom:-26px} }

/* ══ COMPETIR · LA ARENA (pestaña Retar, 2026-09-27) ══════════════════════════ */
.ar{max-width:1180px;margin:0 auto}
.ar-cuerpo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);gap:20px;align-items:start}
.ar-montaje,.ar-hist{padding:20px 22px;border-radius:26px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 26px 54px -38px rgba(16,38,72,.55);animation:secPieza .5s cubic-bezier(.2,.9,.3,1) both}
.ar-hist{animation-delay:.08s}
.ar-paso{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ar-paso:not(:first-child){margin-top:18px}
.ar-paso b{font:700 15px var(--font);color:var(--t-ink)}
.ar-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--t-ink);color:#fff;font:700 12px var(--font)}
/* Juegos */
.ar-juegos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ar-juego{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:18px;border:1.5px solid rgba(18,30,52,.08);background:#fff;cursor:pointer;text-align:left;font-family:var(--font);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3),border-color .25s,box-shadow .25s}
.ar-juego::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.ar-juego:hover{transform:translateY(-3px)}
.ar-juego.on{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 14%,transparent),0 16px 30px -20px var(--c)}
.ar-juego.on::after{opacity:1}
.ar-juego-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:21px;margin-bottom:4px;transition:background .25s,color .25s,transform .3s}
.ar-juego.on .ar-juego-ic{background:var(--c);color:#fff;transform:rotate(-8deg)}
.ar-juego b{font:700 15px var(--font);color:var(--t-ink)}
.ar-juego small{font-size:12px;line-height:1.35;color:#5E6A7E}
/* Preguntas */
.ar-durs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ar-dur{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:16px;border:1.5px solid rgba(18,30,52,.08);background:#fff;cursor:pointer;font:500 12.5px var(--font);color:#5A6577;transition:all .25s}
.ar-dur b{font:800 22px/1 var(--font);color:var(--t-ink)}
.ar-dur small{font-size:11.5px;color:#A0AABA}
.ar-dur:hover{border-color:var(--t-ink)}
.ar-dur.on{background:var(--t-ink);border-color:var(--t-ink);color:rgba(255,255,255,.8)}
.ar-dur.on b{color:#fff}
.ar-dur.on small{color:rgba(255,255,255,.55)}
/* Rivales */
.ar-rivales{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.ar-rival{flex:0 0 auto;width:82px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:0;border-radius:16px;background:none;cursor:pointer;font-family:var(--font);transition:background .2s}
.ar-rival:hover{background:rgba(255,255,255,.8)}
.ar-rival > span:nth-child(2){font:600 12.5px var(--font);color:var(--t-ink);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-rival small{font-size:11px;color:#5E6A7E}
.ar-rival-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--t-ink);font-size:21px;box-shadow:0 0 0 1.5px rgba(18,30,52,.1)}
.ar-rival-reto{background:#EEF4FE;overflow:hidden}
.ar-rival .af-av,.ar-rival-av{transition:box-shadow .25s,transform .3s cubic-bezier(.2,.9,.3,1.4)}
.ar-rival.on .ar-rival-av,.ar-rival.on .af-av-in{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--t-blue);transform:scale(1.06)}
.ar-rival.on > span:nth-child(2){color:var(--t-blue-text)}
/* Lanzar */
.ar-lanzar{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(18,30,52,.07)}
.ar-resumen{flex:1;min-width:0;display:flex;flex-direction:column}
.ar-resumen small{font:600 10.5px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E}
.ar-resumen b{font:700 16px var(--font);color:var(--t-ink);margin-top:2px}
.ar-resumen span{font-size:13px;color:#5A6577}
.ar-go{--c:var(--t-blue);display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 10px 0 26px;border:0;border-radius:27px;background:var(--t-ink);color:#fff;font:700 16px var(--font);cursor:pointer;
  box-shadow:0 16px 30px -16px var(--c);transition:transform .25s,background .3s}
.ar-go i{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c);font-size:18px;transition:transform .35s cubic-bezier(.2,.9,.3,1.4),background .3s}
.ar-go:hover{transform:translateY(-2px)}
.ar-go:hover i{transform:rotate(-20deg) scale(1.1)}
/* Historial */
.ar-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ar-balance div{display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-radius:16px;background:rgba(243,246,251,.9)}
.ar-balance b{font:800 30px/1 var(--font);letter-spacing:-.03em;color:var(--t-ink)}
.ar-balance b.gana{color:var(--t-green-text)}.ar-balance b.pierde{color:#D40E5A}
.ar-balance small{font-size:12px;color:#5E6A7E;margin-top:4px}
.ar-h{margin:18px 0 8px;font:600 11px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E}
.ar-racha{display:flex;flex-wrap:wrap;gap:6px}
.ar-bola{width:20px;height:20px;border-radius:50%;background:#D5DDE8;animation:arBola .4s cubic-bezier(.2,.9,.3,1.5) both;animation-delay:calc(var(--i) * .04s + .2s);cursor:default}
.ar-bola.gana{background:#12C56B}.ar-bola.pierde{background:#F4166B}
.ar-bola:hover{transform:scale(1.25)}
@keyframes arBola{from{transform:scale(0)}to{transform:none}}
.ar-leyenda{display:flex;gap:12px;margin-top:8px;font-size:11.5px;color:#5E6A7E}
.ar-leyenda span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:#D5DDE8}
.ar-leyenda .gana::before{background:#12C56B}.ar-leyenda .pierde::before{background:#F4166B}
.ar-pend{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:6px;padding:9px 10px;border:0;border-radius:14px;background:#fff;cursor:pointer;font-family:var(--font);text-align:left;box-shadow:0 1px 2px rgba(16,38,72,.05)}
.ar-pend:hover{box-shadow:0 10px 24px -16px rgba(16,38,72,.5)}
.ar-pend-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:17px;flex-shrink:0}
.ar-pend-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ar-pend-tx b{font:600 13px var(--font);color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-pend-tx small{font-size:11.5px;color:#5E6A7E}
.ar-vacio{font-size:13px;line-height:1.45;color:#5E6A7E}
@media(max-width:1100px){ .ar-cuerpo{grid-template-columns:1fr} }
@media(max-width:640px){
  .ar-montaje,.ar-hist{padding:16px}
  .ar-juegos{grid-template-columns:1fr}
  .ar-juego{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
  .ar-juego-ic{margin:0}
  .ar-juego small{display:none}
  .ar-lanzar{flex-direction:column;align-items:stretch}
  .ar-go{justify-content:space-between}
}
@media(min-width:769px) and (max-height:820px){
  .ar-juego small{display:none}
  .ar-paso:not(:first-child){margin-top:12px}
  .ar-lanzar{margin-top:12px;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){.ar-bola{animation:none}}
.ar-dur{flex-direction:row;justify-content:center;align-items:baseline;gap:6px;padding:9px 8px}
.ar-dur b{font-size:19px}
.ar-dur small{display:none}
.ar-rival small{white-space:nowrap}
.ar-rival{width:76px;padding:6px 2px}
.ar-montaje,.ar-hist{padding:18px 20px}
.ar-juego{padding:12px}
.ar-juego-ic{width:36px;height:36px;font-size:19px}
@media(min-width:769px) and (max-height:820px){
  .ar-juego{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
  .ar-juego-ic{margin:0}
  .ar-paso{margin-bottom:8px}
  .ar-rival small{display:none}
  .ar-go{height:48px}
}
.ar-rivales{gap:10px}

/* ══ COMPETIR · LA ESCALERA (pestaña Ranking, 2026-09-27) ═════════════════════ */
.es{max-width:1180px;margin:0 auto}
.es .rd-f i{font-size:16px}
.es-cuerpo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.95fr);gap:22px;align-items:start;margin-top:8px}
.es-izq{padding:18px 22px 20px;border-radius:26px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9)}
/* Podio */
.es-podios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;padding-top:6px}
.es-podio{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font);
  animation:esSube .7s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i) * .1s)}
@keyframes esSube{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.es-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 17px var(--font);
  background:linear-gradient(145deg,color-mix(in srgb,var(--c,#8A94A6) 75%,#fff),var(--c,#8A94A6));box-shadow:0 0 0 3px #fff,0 10px 20px -10px rgba(16,38,72,.6);transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.es-p1 .es-av{width:66px;height:66px;font-size:21px;box-shadow:0 0 0 3px #fff,0 0 0 6px #F2B82C,0 14px 26px -12px rgba(242,184,44,.9)}
.es-p2 .es-av{box-shadow:0 0 0 3px #fff,0 0 0 5px #B7C1CF}
.es-p3 .es-av{box-shadow:0 0 0 3px #fff,0 0 0 5px #D39266}
.es-av-vacio{background:#E8EDF4;color:#A0AABA}
.es-podio b{font:700 14px var(--font);color:var(--t-ink);margin-top:6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-podio small{font-size:12px;color:#5E6A7E}
.es-pedestal{width:100%;margin-top:8px;border-radius:16px 16px 6px 6px;display:flex;justify-content:center;padding-top:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55));border:1px solid #fff;box-shadow:0 18px 30px -24px rgba(16,38,72,.6)}
.es-pedestal span{font:800 30px/1 var(--font);color:#C5CEDB}
.es-p1 .es-pedestal{height:120px;background:linear-gradient(180deg,#FFF6DC,rgba(255,255,255,.6))}
.es-p1 .es-pedestal span{color:#E0A814;font-size:38px}
.es-p2 .es-pedestal{height:88px}
.es-p2 .es-pedestal span{color:#9AA6B6}
.es-p3 .es-pedestal{height:64px;background:linear-gradient(180deg,#FBEDE3,rgba(255,255,255,.6))}
.es-p3 .es-pedestal span{color:#C27B4C}
.es-vacio{opacity:.45;cursor:default}
.es-podio:hover .es-av,.es-podio.sel .es-av{transform:translateY(-4px) scale(1.06)}
.es-podio.yo b{color:var(--t-blue-text)}
.es-podio:focus-visible{outline:none}
.es-podio:focus-visible .es-av{outline:3px solid var(--t-ink);outline-offset:4px}
/* Peldaños */
.es-peldanos{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-height:calc(100vh - 560px);min-height:120px;overflow-y:auto;scrollbar-width:thin}
.es-fila{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:0;border-radius:14px;background:rgba(255,255,255,.9);cursor:pointer;font-family:var(--font);text-align:left;
  animation:secPieza .45s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(.3s + var(--i) * .04s);transition:transform .2s,box-shadow .2s}
.es-fila:hover,.es-fila.sel{transform:translateX(4px);box-shadow:0 10px 22px -16px rgba(16,38,72,.5)}
.es-fila.yo{background:#E6EFFE;box-shadow:inset 3px 0 0 var(--t-blue)}
.es-pos{width:24px;font:700 14px var(--font);color:#5E6A7E;text-align:center}
.es-av-s{width:34px;height:34px;font-size:12px;box-shadow:none}
.es-fila-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.es-fila-tx b{font:600 13.5px var(--font);color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-fila-tx i{display:block;height:4px;border-radius:2px;background:var(--c)}
.es-rtk{font:700 15px var(--font);color:var(--t-ink);font-variant-numeric:tabular-nums}
.es-nadie{margin-top:16px;text-align:center}
.es-sub{font-size:13.5px;line-height:1.5;color:#5A6577;margin-bottom:12px}
/* Ficha */
.es-ficha h2{font-size:30px}
.es-vs{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(243,246,251,.9)}
.es-vs div{display:flex;flex-direction:column;align-items:center;min-width:0}
.es-vs b{font:800 24px/1 var(--font);color:var(--t-ink)}
.es-vs small{font-size:12px;color:#5E6A7E;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-vs > span{font:700 14px var(--font);color:var(--t-pink-text)}
.rd-estado.es-baja{background:#FDE7F0;color:#C2185B}
.rd-estado.es-baja i{color:#C2185B}
@media(max-width:1100px){ .es-cuerpo{grid-template-columns:1fr} .es-peldanos{max-height:none} }
@media(max-width:640px){
  .es-izq{padding:14px}
  .es-av{width:44px;height:44px;font-size:15px}
  .es-p1 .es-av{width:54px;height:54px}
  .es-p1 .es-pedestal{height:90px}.es-p2 .es-pedestal{height:66px}.es-p3 .es-pedestal{height:48px}
}
@media(prefers-reduced-motion:reduce){.es-podio,.es-fila{animation:none}}
.es-vs > span{font:600 12.5px var(--font);padding:4px 10px;border-radius:12px;white-space:nowrap}.es-vs > span.delante{background:#E3F7EC;color:var(--t-green-text)}.es-vs > span.detras{background:#FDE7F0;color:#C2185B}

/* ══ MI AULA (2026-09-27) ═════════════════════════════════════════════════════ */
.hub-tabs-una{display:none}
.hub:has(.hub-tabs-una){padding-bottom:22px}
/* Dentro de un aula: su ficha (nombre, profe, alumnos) es una tarjeta bajo la cabecera */
body.en-hub #seccion-aula .pf2-hero{display:block !important;background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.9) !important;border-radius:22px !important;padding:20px 24px !important;box-shadow:0 22px 50px -34px rgba(16,38,72,.5) !important;margin-bottom:14px}
body.en-hub #seccion-aula .pf2-hero::before{display:none !important}
body.en-hub #seccion-aula .pf2-name{font-size:28px !important}
body.en-hub #seccion-aula .pf2-alias{font-size:15px !important}
.aula-tabs{margin:4px 0 14px}
.aula-tabs .rd-f i{font-size:16px}
.aula-tabs .rd-f.on{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.aula-pest{animation:secPieza .35s cubic-bezier(.2,.9,.3,1) both}
.aula-pest > .aula-alum-section-header,.aula-pest > .aula-section-header{display:none}
/* Recibidor */
.au{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.au-h{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.au-h b{font:700 19px var(--font);color:var(--t-ink);letter-spacing:-.01em}
.au-h small{font-size:13px;color:#5E6A7E}
.au-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px}
.au-puerta{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:190px;padding:0;overflow:hidden;border-radius:22px;border:1px solid #fff;background:rgba(255,255,255,.9);
  cursor:pointer;text-align:left;font-family:var(--font);box-shadow:0 18px 40px -30px rgba(16,38,72,.55);transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s;animation:secPieza .5s cubic-bezier(.2,.9,.3,1) both}
.au-puerta:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(16,38,72,.6)}
.au-puerta:focus-visible{outline:3px solid var(--t-blue);outline-offset:3px}
.au-banda{position:relative;display:flex;align-items:flex-end;justify-content:space-between;width:100%;height:84px;padding:0 16px 12px;box-sizing:border-box;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#0B1220));overflow:hidden}
.au-banda::after{content:'';position:absolute;right:-30px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.au-puerta:hover .au-banda::after{transform:scale(1.25) translate(-10px,10px)}
.au-inicial{font:800 36px/1 var(--font);color:#fff;letter-spacing:-.03em}
.au-estado{position:relative;z-index:1;padding:3px 10px;border-radius:10px;background:rgba(255,255,255,.22);color:#fff;font:600 11.5px var(--font)}
.au-tx{display:flex;flex-direction:column;gap:3px;padding:14px 16px 0;width:100%;box-sizing:border-box}
.au-tx b{font:700 16px/1.25 var(--font);color:var(--t-ink)}
.au-tx small{font-size:12.5px;color:#5E6A7E}
.au-pie{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding:12px 16px 14px;box-sizing:border-box}
.au-cod{display:inline-flex;align-items:center;gap:5px;font:600 12px var(--t-label);letter-spacing:.06em;color:#5A6577}
.au-entrar{display:inline-flex;align-items:center;gap:5px;font:600 13px var(--font);color:var(--c)}
.au-entrar i{transition:transform .25s}
.au-puerta:hover .au-entrar i{transform:translateX(3px)}
.au-puerta.cerrada{filter:grayscale(.7);opacity:.75}
/* Tarjetas de acción */
.au-unirme,.au-crear{justify-content:center;gap:4px;padding:20px;cursor:default;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px dashed rgba(29,109,240,.35)}
.au-crear{cursor:pointer;border-color:rgba(240,138,36,.45)}
.au-unirme:hover{transform:none}
.au-unirme-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#E6EFFE;color:var(--t-blue-text);font-size:22px;margin-bottom:6px}
.au-crear .au-unirme-ic{background:#FFF1DE;color:#C96A0E}
.au-unirme b,.au-crear b{font:700 16px var(--font);color:var(--t-ink)}
.au-unirme small,.au-crear small{font-size:12.5px;line-height:1.4;color:#5E6A7E}
.au-unirme-f{display:flex;gap:6px;width:100%;margin-top:12px}
.au-unirme-f input{flex:1;min-width:0;height:42px;padding:0 12px;border:1.5px solid var(--t-line);border-radius:12px;background:#fff;font:700 14px var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--t-ink);outline:none}
.au-unirme-f input:focus{border-color:var(--t-blue)}
.au-unirme-f button{width:42px;height:42px;border:0;border-radius:12px;background:var(--t-ink);color:#fff;font-size:18px;cursor:pointer}
.au-unirme-f button:hover{background:var(--t-blue)}
.au-aviso{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;border-radius:12px;background:rgba(255,241,222,.9);color:#9A560C;font-size:13px}
.au-borrar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.au-borrar button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid #F7C4D6;border-radius:16px;background:#fff;color:#C2185B;font:600 12.5px var(--font);cursor:pointer}
/* Ficha del aula del profesor: acciones dentro de la ficha y pestaña «Invitar alumnos» */
.au-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative;z-index:1}
.au-acc{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--t-line);background:#fff;color:var(--t-ink);font:600 13px var(--font);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.au-acc i{font-size:16px}
.au-acc:hover{border-color:var(--t-ink)}
.au-acc:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.au-acc-eval{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.au-acc-eval:hover{background:var(--t-blue);border-color:var(--t-blue)}
.au-acc-peligro{color:#C2185B;border-color:#F7C4D6}
.au-acc-peligro:hover{background:#FFF1F5;border-color:#F4166B}
.au-inv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:22px;align-items:center}
.au-inv-lbl{display:block;font:600 12.5px var(--font);color:#5E6A7E;margin-bottom:6px}
.au-inv-cod b{display:block;font:700 30px/1.1 var(--t-label);letter-spacing:.08em;color:var(--t-ink);margin-bottom:12px;word-break:break-all}
.au-inv .aula-copy-btn-mini{border:1px solid var(--t-line);background:#fff;color:var(--t-ink)}
.au-inv-ayuda{display:block;margin-top:8px;font-size:12.5px;color:#5E6A7E}
.au-inv-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--t-line)}
.au-inv-qr img{display:block;width:132px;height:132px;border-radius:10px}
.au-inv-qr figcaption{font-size:12px;color:#5E6A7E}
@media (max-width:760px){
  body.en-hub #seccion-aula .pf2-hero{padding:16px !important;border-radius:18px !important}
  body.en-hub #seccion-aula .pf2-name{font-size:22px !important}
  body.en-hub #seccion-aula .pf2-alias{font-size:13.5px !important}
  body.en-hub #seccion-aula .pf2-hero-top{position:relative}
  body.en-hub #seccion-aula .pf2-hero-actions{position:absolute;top:0;right:0}
  body.en-hub #seccion-aula .pf2-hero-id{padding-right:48px}
  body.en-hub #seccion-aula .pf2-badges{flex-direction:row;flex-wrap:wrap;gap:6px 12px}
  .aula-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px}
  .aula-tabs::-webkit-scrollbar{display:none}
  .aula-tabs .rd-f{flex:none}
  .au-puerta{min-height:0}
  .au-inv{grid-template-columns:1fr;gap:16px}
  .au-inv-cod b{font-size:24px}
  .au-inv-qr{justify-self:start}
  #seccion-aula.aula-wrap{padding-left:10px !important;padding-right:10px !important}
}

/* ══ MI PERFIL (2026-09-27) ═══════════════════════════════════════════════════
   Expediente: carnet de alumno que se gira (datos personales por detrás) + boletín.
   Logros: la vitrina, cinco baldas de cristal por rareza y una ficha al lado. */
.ex{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px;align-items:start}
.ex-izq{display:flex;flex-direction:column;gap:14px;perspective:1400px}
/* El carnet */
.ex-carnet{position:relative;aspect-ratio:1.586;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.3,.5,1);cursor:pointer;outline:none;animation:exLlega .8s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes exLlega{from{opacity:0;transform:rotateX(18deg) translateY(24px)}to{opacity:1;transform:none}}
.ex-carnet.girado{transform:rotateY(180deg)}
.ex-carnet:focus-visible .ex-cara{outline:3px solid var(--t-blue);outline-offset:3px}
.ex-cara{position:absolute;inset:0;border-radius:22px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 30px 60px -32px rgba(11,18,32,.7)}
.ex-frente{display:flex;flex-direction:column;padding:18px 20px;color:#fff;
  background:
    repeating-radial-gradient(circle at 115% -20%,rgba(255,255,255,.07) 0 1px,transparent 1px 9px),
    radial-gradient(120% 90% at 100% 0,rgba(29,109,240,.9),transparent 60%),
    radial-gradient(90% 80% at 0 100%,rgba(244,22,107,.35),transparent 65%),
    linear-gradient(150deg,#13213F,#0B1220 70%)}
/* brillo holográfico que sigue al ratón por encima */
.ex-frente::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 45%,rgba(18,197,107,.12) 50%,rgba(255,255,255,.1) 55%,transparent 70%);background-size:250% 100%;background-position:100% 0;transition:background-position 1.1s cubic-bezier(.2,.9,.3,1);pointer-events:none}
.ex-carnet:hover .ex-frente::after{background-position:0 0}
.ex-cab{display:flex;align-items:center;justify-content:space-between}
.ex-logo{height:17px;filter:brightness(0) invert(1);opacity:.95}
.ex-cab span{font:600 10.5px var(--t-label);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ex-id{display:flex;align-items:center;gap:14px;margin-top:auto}
.ex-foto{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;font:800 21px var(--font);color:#0B1220;background:linear-gradient(145deg,#fff,#C9D8F5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.ex-nombre{display:flex;flex-direction:column;min-width:0}
.ex-nombre b{font:800 19px/1.15 var(--font);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-nombre small{font-size:12.5px;color:rgba(255,255,255,.7)}
.ex-nombre em{font-style:normal;align-self:flex-start;margin-top:5px;padding:2px 9px;border-radius:9px;background:rgba(255,255,255,.14);font:600 11px var(--font)}
.ex-nivel{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin-top:14px;font-size:12px;color:rgba(255,255,255,.72)}
.ex-nivel b{color:#fff}
.ex-nivel-barra{grid-column:1/-1;height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.ex-nivel-barra i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#12C56B,#7CF0B5);animation:exBarra 1.2s .4s cubic-bezier(.2,.9,.3,1) both;transform-origin:left}
@keyframes exBarra{from{transform:scaleX(0)}to{transform:none}}
.ex-pie{display:flex;align-items:flex-end;gap:18px;margin-top:12px}
.ex-pie span{display:flex;flex-direction:column}
.ex-pie small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ex-pie b{font:600 13px var(--t-label);letter-spacing:.06em}
.ex-barras{flex:1;height:26px;opacity:.55;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 13px)}
.ex-girar{position:absolute;right:14px;top:44px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:15px;opacity:0;transition:opacity .3s}
.ex-carnet:hover .ex-girar{opacity:1}
.ex-dorso{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,#F1F5FC);color:var(--t-ink);display:flex;flex-direction:column}
.ex-dorso .ex-girar{background:var(--t-soft);color:var(--t-ink);top:auto;bottom:12px}
.ex-banda{height:38px;margin-top:18px;background:linear-gradient(90deg,#0B1220,#1B2A48 60%,#0B1220);flex-shrink:0}
.ex-datos{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin:0;padding:14px 20px}
.ex-datos div{min-width:0}
.ex-datos dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5E6A7E}
.ex-datos dd{margin:1px 0 0;font:600 13px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-botones{display:flex;flex-wrap:wrap;gap:8px}
.ex-objs{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #fff}
.ex-h-mini{display:block;margin-bottom:8px;font:700 13px var(--font);color:var(--t-ink)}
.ex-objs .pf2-objs{margin:0}
.ex-push:empty{display:none}
/* El boletín */
.ex-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 12px}
.ex-h b{font:700 19px var(--font);color:var(--t-ink)}
.ex-h small{font-size:13px;color:#5E6A7E}
.ex-boletin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex-asig{position:relative;display:flex;flex-direction:column;align-items:flex-start;height:150px;padding:16px;border-radius:20px;border:1px solid #fff;overflow:hidden;text-align:left;cursor:pointer;font-family:var(--font);
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 36px -30px rgba(16,38,72,.6);animation:secPieza .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 45ms)}
.ex-asig-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:var(--c);background:color-mix(in srgb,var(--c) 11%,#fff)}
.ex-asig-num{margin-top:auto;font:800 30px/1 var(--font);letter-spacing:-.03em;color:var(--t-ink)}
.ex-asig-num small{font-size:.5em;color:#5E6A7E;font-weight:700;margin-left:2px}
.ex-asig-nom{margin-top:5px;font:600 13.5px var(--font);color:#5A6577}
/* al pasar, la casilla se tiñe y cuenta qué mide */
.ex-asig-desc{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px 16px 18px;background:var(--c);color:#fff;font:500 14px/1.45 var(--font);transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.9,.3,1)}
.ex-asig:hover .ex-asig-desc,.ex-asig:focus-visible .ex-asig-desc{transform:none}
.ex-asig:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ex-asig-barra{position:absolute;left:0;right:0;bottom:0;height:4px;background:color-mix(in srgb,var(--c) 12%,transparent)}
.ex-asig-barra i{display:block;height:100%;background:var(--c)}
/* Guardados */
.gd-card{margin-top:12px}
.gd-card .af-vacio-grande{padding:40px 16px}
/* La vitrina */
.vt{max-width:1180px;margin:0 auto}
.vt-filtros{align-items:center}
.vt-filtros .rd-f small{font-size:11.5px;opacity:.6;margin-left:2px}
.vt-sep{width:1px;height:22px;background:rgba(18,30,52,.14);margin:0 4px}
.vt-tema{height:32px;padding:0 11px;font-size:12.5px;gap:6px}
.vt-tema i{font-size:15px}
.vt-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-top:12px;align-items:start}
.vt-armario{padding:6px 20px 12px;border-radius:26px;border:1px solid #fff;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(236,242,252,.55));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 60px -40px rgba(16,38,72,.55),inset 0 1px 0 #fff}
.vt-balda{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:end;gap:10px;padding-top:10px}
.vt-balda-nom{display:flex;flex-direction:column;padding-bottom:14px;font:700 13px var(--font);color:var(--c)}
.vt-balda-nom small{font:500 12px var(--font);color:#5E6A7E}
.vt-fila{position:relative;display:flex;flex-wrap:wrap;gap:2px 3px;padding:0 6px 9px}
/* la balda: un canto de cristal con su sombra */
.vt-fila::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),color-mix(in srgb,var(--c) 18%,#DDE6F4));box-shadow:0 8px 14px -8px rgba(16,38,72,.45),inset 0 -1px 0 color-mix(in srgb,var(--c) 30%,transparent)}
.vt-tr{position:relative;width:50px;height:60px;padding:0;border:0;background:none;cursor:pointer;outline:none;transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),opacity .35s,filter .35s;animation:vtSube .6s cubic-bezier(.2,.9,.3,1.2) backwards;animation-delay:calc(var(--b) * 90ms + var(--k) * 28ms)}
@keyframes vtSube{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
.vt-tr svg{width:100%;height:100%;display:block}
.vt-tr.off{filter:grayscale(1) opacity(.42)}
.vt-tr.on{filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--c) 45%,transparent))}
.vt-tr:hover,.vt-tr.sel{transform:translateY(-5px) scale(1.12)}
.vt-tr.sel::after{content:'';position:absolute;left:50%;bottom:-7px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--c)}
.vt-tr:focus-visible{outline:2px solid var(--t-blue);outline-offset:2px;border-radius:10px}
.vt-tr.nuevo::before{content:'';position:absolute;top:4px;right:6px;width:9px;height:9px;border-radius:50%;background:#F4166B;box-shadow:0 0 0 3px #fff}
.vt-tr.fuera{opacity:.1;filter:grayscale(1);transform:scale(.9)}
.vt-ficha{min-height:0}
.vt-grande{width:132px;height:150px;margin:-4px auto 6px;position:relative}
.vt-grande::before{content:'';position:absolute;inset:10px -10px 0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 28%,transparent),transparent 68%)}
.vt-grande svg{position:relative;width:100%;height:100%}
.vt-grande.off svg{filter:grayscale(1) opacity(.5)}
.vt-ficha h2{font-size:27px}
.vt-prog{margin-top:16px;font-size:13px;color:#5A6577}
.vt-prog b{color:var(--t-ink);font-size:15px}
.vt-prog-barra{display:block;height:7px;margin-top:7px;border-radius:4px;background:color-mix(in srgb,var(--c) 14%,#fff);overflow:hidden}
.vt-prog-barra i{display:block;height:100%;border-radius:4px;background:var(--c)}
@media (max-width:1180px){
  .ex{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
  .vt-cuerpo{grid-template-columns:1fr}
}
@media (max-width:860px){
  .ex{grid-template-columns:1fr}
  .ex-izq{max-width:440px;width:100%;margin:0 auto}
}
@media (max-width:760px){
  .ex-boletin{grid-template-columns:1fr 1fr;gap:10px}
  .ex-asig{height:128px;padding:14px}
  .ex-asig-num{font-size:26px}
  .ex-asig-desc{display:none}
  .vt-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .vt-filtros .rd-f{flex:none}
  .vt-armario{padding:4px 12px 10px}
  .vt-balda{grid-template-columns:1fr;gap:4px}
  .vt-balda-nom{flex-direction:row;gap:8px;align-items:baseline;padding:0}
  .vt-tr{width:40px;height:48px}
  .vt-fila{gap:2px}
  .ex-botones .au-acc{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ex-carnet,.vt-tr,.ex-asig,.ex-nivel-barra i{animation:none}.ex-carnet{transition:none}}

/* ══ TIENDA · EL PROBADOR (2026-09-27) ═══════════════════════════════════════
   Izquierda: tu avatar en un escenario con foco; te pruebas lo que señalas.
   Derecha: el catálogo de un tipo cada vez, en fichas pequeñas. */
.pr{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:360px minmax(0,1fr);gap:22px;align-items:start}
.pr-probador{position:sticky;top:12px;border-radius:28px;overflow:hidden;border:1px solid #fff;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 30px 60px -38px rgba(16,38,72,.6)}
.pr-escena{position:relative;height:312px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:26px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 110%,color-mix(in srgb,var(--c) 30%,#fff),transparent 60%),linear-gradient(180deg,#0B1220,#1A2744 70%,#26365A);transition:background .4s}
/* el foco que baja del techo */
.pr-foco{position:absolute;left:50%;top:-40px;width:340px;height:330px;margin-left:-170px;background:conic-gradient(from 160deg at 50% 0,transparent 0deg,rgba(255,255,255,.2) 16deg,rgba(255,255,255,.26) 20deg,rgba(255,255,255,.2) 24deg,transparent 40deg);filter:blur(6px);animation:prFoco 5s ease-in-out infinite alternate}
@keyframes prFoco{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.pr-yo{position:relative;width:146px;height:146px;margin-bottom:34px;display:grid;place-items:center;animation:prEntra .5s cubic-bezier(.2,.9,.3,1.3) backwards}
@keyframes prEntra{from{opacity:.4;transform:scale(.92)}to{opacity:1;transform:none}}
.pr-av{transform:scale(2.6);font:800 20px var(--font) !important;color:var(--t-blue-text) !important}
.pr-masc{position:absolute;right:-74px;bottom:-14px;transform:scale(1.7);transform-origin:bottom center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.pr-nombre{position:relative;font:800 19px var(--font);color:#fff;letter-spacing:-.01em}
.pr-tit{position:relative;margin-top:4px;padding:3px 12px;border-radius:12px;background:rgba(255,255,255,.94);font:700 12.5px var(--font)}
.pr-tit.vacio{background:rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
.pr-pedestal{position:absolute;left:50%;bottom:10px;width:220px;height:26px;margin-left:-110px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);pointer-events:none}
.pr-info{--c:#12C56B;padding:20px 22px 22px;min-height:196px}
.pr-info h2{margin:10px 0 0;font:800 26px/1.1 var(--font);letter-spacing:-.02em;color:var(--t-ink)}
.pr-comprar{background:linear-gradient(135deg,#E8A317,#D1810A)}
@media (hover:hover){.pr-comprar:hover{background:var(--t-ink)}}
.pr-queda{margin:10px 0 0;font-size:12.5px;color:#5E6A7E}
.pr-falta{margin-top:16px;font-size:13px;color:#5A6577}
.pr-falta b{color:var(--t-ink);font-size:15px}
.pr-falta-barra{display:block;height:7px;margin-top:7px;border-radius:4px;background:#FDF3DC;overflow:hidden}
.pr-falta-barra i{display:block;height:100%;border-radius:4px;background:#E8A317}
/* Catálogo */
.pr-filtros{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pr-filtros .rd-f small{font-size:11.5px;opacity:.6;margin-left:2px}
.pr-estado{display:inline-flex;padding:3px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid rgba(18,30,52,.08)}
.pr-estado button{height:30px;padding:0 12px;border:0;border-radius:11px;background:none;font:600 12.5px var(--font);color:#5A6577;cursor:pointer}
.pr-estado button.on{background:var(--t-ink);color:#fff}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin-top:12px}
.pr-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px 10px;border-radius:20px;border:1.5px solid #fff;background:rgba(255,255,255,.82);cursor:pointer;font-family:var(--font);
  box-shadow:0 14px 30px -26px rgba(16,38,72,.6);transition:transform .3s cubic-bezier(.3,1.4,.5,1),border-color .2s,box-shadow .3s;animation:secPieza .45s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i) * 35ms)}
.pr-art:hover,.pr-art.sel{transform:translateY(-4px);border-color:var(--c);box-shadow:0 20px 34px -24px color-mix(in srgb,var(--c) 70%,transparent)}
.pr-art:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.pr-art::before{content:'';position:absolute;top:10px;left:10px;width:8px;height:8px;border-radius:50%;background:var(--c)}
.pr-art-vista{height:64px;display:grid;place-items:center}
/* Los compañeros, más grandes que el resto de artículos: la tarjeta crece para ellos */
.pr-art-vista:has(.masc){height:96px}
.pr-art-vista .masc{width:92px;height:92px}
.pr-mini{margin:0}
.pr-mini-tit{font-size:40px;line-height:1}
.pr-art b{font:700 13.5px/1.2 var(--font);color:var(--t-ink);text-align:center}
.pr-art small{display:inline-flex;align-items:center;gap:4px;font:600 12.5px var(--font);color:#B7790A}
.pr-art.caro small{color:#5E6A7E}
.pr-art.tuyo small{color:#0CA85A}
.pr-art.puesto{border-color:#12C56B}
.pr-art.puesto small{color:#fff;background:#12C56B;padding:2px 9px;border-radius:9px}
.pr-vacio{grid-column:1/-1;padding:40px 16px}
@media (max-width:1000px){
  .pr{grid-template-columns:minmax(0,1fr)}
  .pr-probador{position:relative;top:0;max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:760px){
  .pr-escena{height:222px;padding-bottom:16px}
  .pr-yo{width:104px;height:104px;margin-bottom:26px}
  .pr-av{transform:scale(1.85)}
  .pr-masc{right:-58px;transform:scale(1.3)}
  .pr-info{min-height:0;padding:16px 18px 18px}
  .pr-info:has(.pr-intro){display:none}
  .pr-info h2{font-size:22px}
  .pr-filtros .rd-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .pr-filtros .rd-f{flex:none}
  .pr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pr-art{padding:12px 6px 10px;border-radius:16px}
  .pr-art b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.pr-foco,.pr-art,.pr-yo{animation:none}}

/* ══ DIAGNÓSTICOS · LA SALA DE EXAMEN (2026-09-27) ═════════════════════════════
   Marco de pantalla completa con el cuestionario dentro (iframe). */
.sala{position:fixed;inset:0;height:100dvh;z-index:2000;display:flex;flex-direction:column;background:#F3F6FB;animation:salaEntra .35s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes salaEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sala-cab{position:relative;flex-shrink:0;display:flex;align-items:center;gap:16px;height:62px;padding:0 18px;background:#0B1220;color:#fff}
.sala-cab::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.sala-cab::after{content:'';position:absolute;left:0;bottom:0;width:var(--p,100%);height:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c));transition:width .5s cubic-bezier(.2,.9,.3,1)}
.sala-volver{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border-radius:19px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:600 13.5px var(--font);cursor:pointer;transition:background .2s,border-color .2s}
.sala-volver i{font-size:17px}
.sala-volver:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
.sala-volver:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.sala-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.sala-ceja{display:inline-flex;align-items:center;gap:7px;font:600 10.5px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sala-punto{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.sala-tx b{font:700 17px/1.2 var(--font);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sala-nota{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--font);color:rgba(255,255,255,.7)}
.sala-nota i{font-size:17px;color:var(--c)}
.sala-corto{display:none}
@media (max-width:760px){.sala-corto{display:inline}}
.sala-cuerpo{position:relative;flex:1;min-height:0}
.sala-cuerpo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#F3F6FB;opacity:0;transition:opacity .35s}
.sala.lista iframe{opacity:1}
.sala-carga{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:500 14px var(--font);color:#5A6577;transition:opacity .3s}
/* ── Recreo: los juegos de arcade, en su sala (2026-10-16; abrirJuegoEntr en app.js) ── */
.sala-juego .sala-cuerpo.jg{overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 16px 30px;background:radial-gradient(900px 520px at 50% 105%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),#F3F6FB}
.jg-escena{position:relative;flex-shrink:0;width:min(880px,100%,(100dvh - 250px) * 1.526);aspect-ratio:580/380;border-radius:22px;overflow:hidden;background:#0B1220;box-shadow:0 30px 60px -30px rgba(11,18,32,.7)}
.jg-escena canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.jg-capa{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;color:#fff;background:rgba(11,18,32,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .25s,visibility .25s}
.jg-capa.fuera{opacity:0;visibility:hidden;pointer-events:none}
.jg-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;font-size:28px;background:var(--c);box-shadow:0 14px 30px -12px var(--c)}
.jg-capa h2{margin:4px 0 0;font:700 clamp(22px,3vw,30px)/1.1 var(--font);letter-spacing:-.02em;text-transform:uppercase}
.jg-desc{margin:0;max-width:420px;font:500 15px/1.5 var(--font);color:rgba(255,255,255,.75)}
.jg-res{margin:2px 0 0;font:700 17px var(--font);color:#FCD34D}
.jg-btn{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:13px 26px;border:0;border-radius:999px;cursor:pointer;font:700 15px var(--font);color:#0B1220;background:#fff;transition:background .2s,color .2s,transform .15s}
.jg-btn:hover{color:#fff;background:var(--c);transform:translateY(-1px)}
.jg-btn:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.jg-teclas{display:inline-flex;align-items:center;gap:7px;margin:2px 0 0;font:500 13px var(--font);color:rgba(255,255,255,.6)}
.jg-teclas i{font-size:16px}
.jg-tactil{display:none}
@media (hover:none),(pointer:coarse){.jg-tactil{display:inline}.jg-raton{display:none}}
.jg-pie{display:flex;gap:10px;width:min(880px,100%)}
.jg-dato{flex:1;display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.85);border:1px solid rgba(18,30,52,.08)}
.jg-dato small{font:600 10.5px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E}
.jg-dato b{font:800 21px var(--font);color:#0B1220;font-variant-numeric:tabular-nums}
.jg-cruceta{display:none;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(2,62px);gap:8px}
.jg-cruceta button{display:grid;place-items:center;border:0;border-radius:18px;background:#0B1220;color:#fff;font-size:26px;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.jg-cruceta button:active{background:var(--c)}
.jg-cruceta [data-d="arriba"]{grid-column:2}
.jg-cruceta [data-d="izq"]{grid-column:1;grid-row:2}
.jg-cruceta [data-d="abajo"]{grid-column:2;grid-row:2}
.jg-cruceta [data-d="der"]{grid-column:3;grid-row:2}
@media (hover:none),(pointer:coarse){.jg-cruceta{display:grid}}
@media (max-width:560px){
  .sala-juego .sala-cuerpo.jg{padding:14px 12px 24px;gap:12px}
  .jg-escena{border-radius:18px}
  .jg-ic,.jg-desc{display:none}
  .jg-capa{gap:6px}
  .jg-capa h2{font-size:19px}
  .jg-btn{padding:11px 22px}
  .jg-dato{padding:9px 12px;border-radius:14px}
  .jg-dato b{font-size:17px}
}
.sala-carga span{width:34px;height:34px;border-radius:50%;border:3px solid color-mix(in srgb,var(--c) 20%,#fff);border-top-color:var(--c);animation:spin 1s linear infinite}
.sala.lista .sala-carga{opacity:0;pointer-events:none}
@media (max-width:760px){
  .sala-cab{height:56px;gap:10px;padding:0 10px}
  .sala-volver{width:38px;padding:0;justify-content:center}
  .sala-volver span{display:none}
  .sala-nota{flex-shrink:0;padding:5px 10px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:700;white-space:nowrap}
  .sala-largo{display:none}
  .sala-nota:not([data-p]){display:none}
  .sala-tx b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.sala{animation:none}}
/* Ventanas de los diagnósticos: ya tienes el informe, ver resultados, comprar */
.dm{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(11,18,32,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:dmVelo .25s ease backwards}
@keyframes dmVelo{from{opacity:0}to{opacity:1}}
.dm-caja{outline:none;position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow:auto;padding:30px 28px 26px;border-radius:28px;background:#fff;box-shadow:0 40px 90px -30px rgba(11,18,32,.7);font-family:var(--font);animation:dmCaja .4s cubic-bezier(.2,.9,.3,1.2) backwards}
@keyframes dmCaja{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.dm-caja::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--c)}
.dm-caja h2{margin:12px 0 0;font:800 26px/1.1 var(--font);letter-spacing:-.025em;color:var(--t-ink)}
.dm-caja .rd-area{color:var(--c)}
.dm-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:0;background:var(--t-soft);color:#5A6577;font-size:17px;display:grid;place-items:center;cursor:pointer}
.dm-x:hover{background:var(--t-ink);color:#fff}
.dm-ic{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:27px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.dm-ic-pro{color:#fff;background:linear-gradient(135deg,#E8A317,#C9780A);box-shadow:0 12px 24px -12px rgba(201,120,10,.8)}
.dm-tx{margin:10px 0 0;font:500 15px/1.55 var(--font);color:#5A6577}
.dm-tx b{color:var(--t-ink)}
.dm-caja .rd-estado{--c:#1D6DF0}
.dm-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.dm-acc .rd-btn{height:46px;font-size:14.5px}
.dm-res{margin-top:16px;padding:16px 18px;border-radius:18px;background:color-mix(in srgb,var(--c) 8%,#fff)}
.dm-res small{display:block;font-size:12.5px;color:#5A6577}
.dm-res b{display:block;margin-top:2px;font:800 22px/1.2 var(--font);color:var(--c);letter-spacing:-.02em}
.dm-nota{display:flex;align-items:baseline;gap:4px;margin-top:16px}
.dm-nota b{font:800 52px/1 var(--font);letter-spacing:-.05em;color:var(--t-ink)}
.dm-nota small{font:700 18px var(--font);color:#5E6A7E}
.dm-nota span{margin-left:10px;padding:4px 12px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font:700 12.5px var(--font)}
.dm-dims{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.dm-dims-t{font:600 12.5px var(--font);color:#5A6577}
.dm-dim{display:grid;grid-template-columns:128px 1fr 34px;align-items:center;gap:10px;font-size:13px;color:var(--t-ink)}
.dm-dim i{height:8px;border-radius:4px;background:var(--t-soft);overflow:hidden}
.dm-dim em{display:block;height:100%;border-radius:4px;background:var(--c);transform-origin:left;animation:exBarra .9s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(.2s + var(--i) * 60ms)}
.dm-dim b{text-align:right;font-weight:800;color:var(--c)}
.dm-claves{margin:14px 0 0}
.dm-claves div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--t-line-2);font-size:13.5px}
.dm-claves dt{color:#5A6577}
.dm-claves dd{margin:0;font-weight:700;color:var(--t-ink);text-align:right}
.dm-pie{display:flex;align-items:center;gap:7px;margin:16px 0 0;font-size:12.5px;color:#5E6A7E}
/* Compra */
.dm-plan{margin-top:16px;padding:16px;border-radius:20px;border:1.5px solid var(--t-line)}
.dm-plan-pro{border-color:#F3D08A;background:linear-gradient(160deg,#FFF9EC,#fff)}
.dm-plan-cab b{display:block;font:800 16px var(--font);color:var(--t-ink)}
.dm-plan-cab span{font-size:12.5px;color:#5A6577}
.dm-plan ul{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:#33415A}
.dm-plan li{display:flex;align-items:center;gap:7px}
.dm-plan li i{color:var(--t-green-text);font-size:16px}
.dm-plan .rd-btn{width:100%;justify-content:center;margin-top:12px}
.dm-plan-pro .rd-btn{margin-top:0}
.dm-pro-btn{background:linear-gradient(135deg,#E8A317,#C9780A)}
.dm-plan .rd-btn s{opacity:.6;font-weight:500}
.dm-oferta{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:3px 10px;border-radius:10px;background:#FFF1DA;color:#9A560C;font:700 12px var(--font)}
.dm-o{display:flex;align-items:center;gap:12px;margin:14px 0 0;font:600 12px var(--font);color:#5E6A7E}
.dm-o::before,.dm-o::after{content:'';flex:1;height:1px;background:var(--t-line)}
.dm-ahora{display:block;width:100%;margin-top:14px;padding:10px;border:0;background:none;font:600 14px var(--font);color:#5A6577;cursor:pointer}
.dm-ahora:hover{color:var(--t-ink)}
@media (max-width:520px){ .dm{align-items:flex-end;padding:0} .dm-caja{max-width:none;border-radius:26px 26px 0 0;padding:26px 20px 22px} .dm-dim{grid-template-columns:104px 1fr 30px} }
@media (prefers-reduced-motion:reduce){.dm,.dm-caja,.dm-dim em{animation:none}}

/* ══ VENTANAS DEL CAMPUS (2026-09-28) ══════════════════════════════════════════
   Clase de hoy, cuaderno, diario, diplomas, examen, glosario, deberes, bienvenida y
   boletín comparten la ventana de Daily (.daily-modal + .lc-*). En el ordenador eran una
   hoja pegada abajo, de 480 px y cortada; ahora son un diálogo centrado con la cabecera
   fija y scroll dentro. En el móvil siguen siendo una hoja desde abajo. Paleta de la
   app: fuera el dorado y el azul marino de antes. */
.daily-modal-overlay{background:rgba(11,18,32,.55) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.daily-modal .lc-head{position:sticky;top:0;z-index:3}
.lc-body{border-radius:0 !important}
.lc-btn{background:var(--t-ink) !important;border-radius:26px !important;font-weight:600 !important}
.lc-btn:hover{background:var(--t-blue) !important}
@media (min-width:761px){
  .daily-modal-overlay{align-items:center !important;padding:24px}
  .daily-modal{max-width:720px !important;max-height:88vh !important;border-radius:28px !important;box-shadow:0 40px 90px -30px rgba(11,18,32,.7);animation:campusEntra .4s cubic-bezier(.2,.9,.3,1.2) !important}
  .daily-modal .lc-head{padding:34px 36px 24px !important}
  .daily-modal .lc-body{padding:26px 36px 34px !important}
  .daily-modal .lc-head-tit{font-size:34px !important}
}
@keyframes campusEntra{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
/* Vacíos: el número ya no se parte en tres líneas */
.cu-vacio-big{display:block !important;text-align:center;padding:30px 12px !important;color:#5A6577 !important;line-height:1.6}
.cu-vacio-big i{display:block;margin:0 auto 12px;font-size:42px !important;color:var(--t-blue-text) !important}
.cu-vacio-big b{color:var(--t-ink)}
/* Cuaderno */
.cu-mod-h{color:var(--t-ink-2) !important;font-family:var(--t-label);letter-spacing:.14em !important}
.cu-mod-n{color:var(--t-ink) !important}
.cu-bar{background:var(--t-soft) !important}
.cu-bar div{background:linear-gradient(90deg,#1D6DF0,#6FA3F7) !important}
.cu-item{border-color:var(--t-line) !important;border-radius:14px !important}
.cu-item:hover{border-color:var(--t-ink) !important;background:#fff !important}
/* Diario */
.di-box{background:var(--t-soft) !important;border:1px solid var(--t-line) !important;border-radius:18px !important;padding:16px !important}
.di-box label{color:var(--t-ink) !important;font-weight:700 !important}
.di-box textarea{border-color:var(--t-line) !important;border-radius:12px !important}
.di-box textarea:focus{border-color:var(--t-blue) !important;box-shadow:0 0 0 3px rgba(29,109,240,.15) !important}
.di-guardar{background:var(--t-ink) !important;border-radius:22px !important;font-weight:600 !important;padding:12px !important}
.di-guardar:hover:not(:disabled){background:var(--t-blue) !important}
.di-entrada{border-left-color:var(--t-blue) !important}
.di-fecha{color:var(--t-ink-2) !important;font-family:var(--t-label);letter-spacing:.12em !important}
.di-txt{color:var(--t-ink) !important}
/* Diplomas */
.dp-mod{border-color:var(--t-line) !important;border-radius:18px !important;padding:16px 18px !important}
.dp-mod.dp-ok{border-color:#12C56B !important;background:#F1FCF6 !important}
.dp-h{color:var(--t-ink) !important}
.dp-h i{color:var(--t-blue-text) !important}
.dp-ok .dp-h i{color:#0CA85A !important}
.dp-fila{color:#5A6577 !important}
.dp-fila b{color:var(--t-ink) !important}
.dp-ver{background:#12C56B !important;border-radius:14px !important;font-weight:600 !important}
.dp-examen{background:#fff !important;border:1.5px solid var(--t-line) !important;border-radius:22px !important;color:var(--t-ink) !important;font-weight:600 !important;justify-content:center}
.dp-examen:hover{border-color:var(--t-ink) !important}
/* Examen */
.ex-q{border-color:var(--t-line) !important;border-radius:16px !important;padding:16px !important}
.ex-n{color:var(--t-ink) !important}
.ex-op{border-radius:10px !important}
.ex-op:hover{background:var(--t-soft) !important}
.ex-op input{accent-color:var(--t-blue) !important}
/* Glosario */
.gl-buscar{border-color:var(--t-line) !important;border-radius:14px !important}
.gl-buscar:focus{border-color:var(--t-blue) !important;box-shadow:0 0 0 3px rgba(29,109,240,.15) !important}
.gl-cat{color:var(--t-blue-text) !important;font-family:var(--t-label);letter-spacing:.16em !important;margin-top:20px !important}
.gl-t{border-left-color:rgba(29,109,240,.35) !important}
.gl-t b{color:var(--t-ink) !important}
/* Bienvenida y tema de la semana */
.bv-ic{background:var(--t-soft) !important;color:var(--t-ink) !important}
.bv-paso b{color:var(--t-ink) !important}
@media (prefers-reduced-motion:reduce){.daily-modal{animation:none !important}}

/* Herramientas de Practicar: la misma sala, por encima de todo (como antes, z 9000) */
.sala-herr{z-index:9000}

/* Escalera: la regla de la liga semanal, a la vista (se perdió con el rediseño del 27-09 y
   es la duda más repetida: «¿por qué voy 5.º si tengo más RTK que nadie?») */
.es-regla{margin:12px 0 0;font:500 12.5px/1.5 var(--font);color:#5A6577}

/* ══ CURSO NUEVO EN INICIO ═══════════════════════════════════════════════════
   Quinta ventanita, debajo de «Tu progreso»: el curso que se promociona como novedad
   (CURSO_NUEVO en app.js). Es la única con borde de color (azul, violeta y rosa de la
   marca) para que se lea como algo distinto al trabajo del día. En la fila de móvil y
   tableta es una ventanita más, con la portada en miniatura; en la columna de PC lleva
   la portada arriba, la etiqueta «Nuevo» y una línea de descripción. */
.tf-novedad{position:relative;text-decoration:none;color:var(--t-ink);align-items:center;gap:12px}
.tf-novedad::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:linear-gradient(120deg,#1D6DF0,#7C5CFF 55%,#F4166B);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tf-novedad .tf-tx{display:flex;flex-direction:column;min-width:0}
.tf-novedad .tf-k,.tf-novedad .tf-t{display:block}
.tf-novedad .tf-t{display:-webkit-box}
.tf-nov-foto{position:relative;flex-shrink:0;width:44px;height:44px;border-radius:12px;overflow:hidden;background:#DCE6F5}
.tf-nov-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:64% 0;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
/* En miniatura, la foto se acerca al micrófono (el texto de la portada no se leería) */
.tf-nov-foto img{transform:scale(2.3);transform-origin:60% 6%}
.tf-nov-chip,.tf-nov-d,.tf-nov-cta{display:none}
.tf-novedad:hover .tf-nov-foto img{transform:scale(2.45)}
.tf-novedad:focus-visible{outline:2px solid var(--t-blue);outline-offset:2px}
@container (min-width:1100px){
  .ti-franja .tf-novedad{flex-direction:column;align-items:stretch;gap:0;padding:0 !important;overflow:hidden;animation-delay:.28s}
  .tf-novedad .tf-nov-foto{width:auto;height:88px;border-radius:0}
  .tf-novedad .tf-nov-foto img{transform:none}
  .tf-novedad:hover .tf-nov-foto img{transform:scale(1.05)}
  .tf-novedad .tf-nov-foto::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0) 45%,rgba(11,18,32,.28))}
  .tf-novedad .tf-tx{padding:11px 14px 13px}
  .tf-nov-chip{position:absolute;left:10px;top:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;overflow:hidden;
    padding:4px 10px 4px 8px;border-radius:20px;background:#0B1220;color:#fff;font:600 11.5px/1.2 var(--font)}
  .tf-nov-chip i{font-size:13px;color:#B9A8FF}
  /* Un destello cruza la etiqueta de vez en cuando: lo único que se mueve solo */
  .tf-nov-chip::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:tfDestello 4.5s ease-in-out 1.2s infinite}
  .tf-nov-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:12.5px;line-height:1.4;color:#56627A}
  .tf-nov-cta{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font:600 13px var(--font);color:var(--t-blue-text)}
  .tf-nov-cta i{transition:transform .2s}
  .tf-novedad:hover .tf-nov-cta i{transform:translate(2px,-2px)}
}
@keyframes tfDestello{0%,70%{left:-40%}100%{left:120%}}
/* Pantallas bajas o con un panel abierto encima: sin descripción, o sin la tarjeta */
@media(min-width:769px) and (max-height:820px){ .tf-nov-d{display:none !important} }
@media(min-width:769px){ body.panel-abierto .tf-novedad{display:none} }
@media(prefers-reduced-motion:reduce){ .tf-nov-chip::after{animation:none;display:none} .tf-nov-foto img{transition:none} }

/* Fila de ventanitas con portada estrecha (portátil y tableta con menú): cada una con su
   ancho y deslizando en horizontal. Sin esto se quedaban con el ancho de la columna de
   PC (288 px, «PANELES QUE EMPUJAN») y salían aplastadas. */
@container (max-width:1099px){
  .ti-portada > .ti-franja{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;width:auto !important}
  .ti-portada > .ti-franja::-webkit-scrollbar{display:none}
  .ti-franja .tf-item{flex:0 0 min(260px,74%);scroll-snap-align:start}
}

/* ══ CURSO ONLINE (ficha de venta y aula) ════════════════════════════════════
   Dentro de una «sala» (.sala-curso). --c es el color del curso. La ficha lleva la
   portada a dos columnas (texto y tarjeta de compra, que se queda fija al bajar); el
   aula, el reproductor a la izquierda y el temario a la derecha. En móvil todo va en
   una columna y la compra baja a una barra fija. */
.sala-curso .sala-nota[hidden]{display:none}
.co-scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.co-ficha,.co-aula{max-width:1120px;margin:0 auto;padding:36px 28px 72px;font-family:var(--font);color:var(--t-ink)}
.co-ceja{display:block;font:600 11.5px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 78%,#0B1220)}
.co-p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:#4A566B}
.co-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:23px;border:1px solid #CFD8E6;background:#fff;
  color:var(--t-ink);font:600 15px var(--font);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.co-btn:hover{border-color:#9FB0C8}
.co-btn:active{transform:scale(.98)}
.co-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--c) 55%,#fff);outline-offset:2px}
.co-btn:disabled{opacity:.6;cursor:default}
.co-btn-p{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.co-btn-p:hover{background:#1c2638;border-color:#1c2638}
.co-btn-ok{border-color:#12C56B;color:#0C8A4A;background:#EFFBF4}
.co-btn i{font-size:18px}
.co-vacio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:#4A566B;font:500 15px var(--font)}
.co-vacio i{font-size:40px;color:#5E6A7E}

/* Ficha: portada */
/* Dos columnas: el contenido a la izquierda y la tarjeta de compra, que acompaña al bajar */
.co-ficha{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;align-items:start}
.co-ficha > *{grid-column:1;min-width:0}
.co-ficha > .co-compra{grid-column:2;grid-row:1 / span 12}
.co-portada-tx h1{margin:14px 0 0;font:800 clamp(34px,4.6vw,56px)/1 var(--font);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.co-lema{margin:18px 0 0;font:600 21px/1.35 var(--font);letter-spacing:-.01em;max-width:30em}
.co-desc{margin:12px 0 0;font-size:16px;line-height:1.6;color:#4A566B;max-width:38em}
.co-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:30px 0 0;border-top:1px solid #D9E0EA;border-bottom:1px solid #D9E0EA}
.co-cifras div{padding:16px 14px 16px 0}
.co-cifras div + div{padding-left:16px;border-left:1px solid #D9E0EA}
.co-cifras dt{font:700 28px/1 var(--font);letter-spacing:-.02em}
.co-cifras dd{margin:6px 0 0;font-size:13px;color:#5A6577}
.co-compra{position:sticky;top:20px;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--t-line);box-shadow:0 26px 50px -34px rgba(16,38,72,.55)}
.co-compra-foto img{display:block}
.co-compra-tx{padding:20px 22px 22px}
.co-pr-cifra{display:flex;align-items:baseline;gap:10px}
.co-pr-cifra b{font:800 40px/1 var(--font);letter-spacing:-.03em}
.co-pr-cifra s{font-size:17px;color:#5E6A7E}
.co-pr-oferta{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:12px;background:#FFE9F1;color:var(--t-pink-text);font:600 12.5px var(--font)}
.co-pr-nota{margin:8px 0 16px;font-size:14px;line-height:1.45;color:#5A6577}
.co-compra .co-btn{width:100%;min-height:50px;font-size:16px}
.co-aviso{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#FFF1F0;color:#A8261B;font-size:13.5px;line-height:1.45}
/* El cupón (2026-10-19): un enlace discreto que se abre en un campo; aplicado, una franja verde */
.co-cupon{margin-top:12px}
.co-cupon-abrir{display:inline-flex;align-items:center;gap:7px;padding:6px 2px;border:0;background:none;color:#4A566B;font:600 14px var(--font);cursor:pointer;text-decoration:underline;text-decoration-color:#C3CCDA;text-underline-offset:3px}
.co-cupon-abrir:hover{color:#0B1220;text-decoration-color:currentColor}
.co-cupon-abrir i{font-size:18px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}
.co-cupon-form label{display:block;margin-bottom:6px;font:600 13px var(--font);color:#4A566B}
.co-cupon-form > div{display:flex;gap:8px}
.co-cupon-form input{flex:1;min-width:0;padding:11px 12px;border:1.5px solid #CBD5E3;border-radius:12px;font:600 15px var(--font);letter-spacing:.04em;text-transform:uppercase;color:#0B1220;background:#fff}
.co-cupon-form input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:#8592A6}
.co-cupon-form input:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.co-compra .co-cupon-form .co-btn{width:auto;min-height:0;padding:0 16px;font-size:14px}
.co-cupon-err{margin:8px 0 0;font-size:13.5px;line-height:1.4;color:#B42318}
.co-cupon-ok{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:#E9F9EF;color:#14532D;font-size:14px;line-height:1.35}
.co-cupon-ok > i{font-size:20px;color:#16A34A;flex-shrink:0}
.co-cupon-ok span{flex:1}
.co-cupon-ok b{letter-spacing:.03em}
.co-cupon-ok button{border:0;background:none;padding:4px;color:#166534;font:600 13px var(--font);text-decoration:underline;cursor:pointer}
.co-garantias{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--t-line);display:grid;gap:9px}
.co-garantias li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#4A566B}
.co-garantias i{font-size:17px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}

/* Ficha: bloques */
.co-bloque{margin-top:52px}
.co-bloque h2{margin:0 0 16px;font:700 24px/1.2 var(--font);letter-spacing:-.015em}
.co-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.co-lista li{display:flex;gap:11px;font-size:15.5px;line-height:1.45;color:#25324A}
.co-lista i{flex-shrink:0;margin-top:2px;font-size:18px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}
.co-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.co-dos .co-lista{grid-template-columns:1fr}
.co-mod{border:1px solid var(--t-line);border-radius:18px;background:#fff;overflow:hidden}
.co-mod + .co-mod{margin-top:12px}
.co-mod h3{margin:0;padding:15px 18px;font:700 16.5px/1.25 var(--font);border-bottom:1px solid var(--t-line);background:var(--t-paper)}
.co-mod h3 span{display:block;margin-bottom:3px;font:600 10.5px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:#5E6A7E}
.co-mod ol{list-style:none;margin:0;padding:4px 0}
.co-temario li{display:flex;gap:12px;padding:12px 18px}
.co-temario li + li{border-top:1px solid #F0F3F7}
.co-temario li > i{flex-shrink:0;margin-top:2px;font-size:17px;color:#A2ACBB}
.co-temario b{display:block;font:600 15px/1.35 var(--font)}
.co-temario small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:#5A6577}
.co-min{flex-shrink:0;margin-left:auto;padding-left:12px;font:500 12.5px var(--font);color:#5E6A7E;white-space:nowrap}
.co-tema-b > span:not(.co-min){flex:1;min-width:0}
.co-pr-pronto{font-size:30px !important}
.co-informes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.co-informes span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;background:#fff;border:1px solid var(--t-line);font:600 14.5px var(--font)}
.co-informes i{font-size:18px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}
.co-profes{display:grid;gap:18px}
.co-profe{display:flex;gap:16px}
.co-profe-av{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 75%,#0B1220);font:700 21px var(--font)}
.co-profe b{display:block;font:700 16.5px var(--font)}
.co-profe em{display:block;margin-top:2px;font-style:normal;font-size:14px;color:#5A6577}
.co-profe p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:#4A566B}
/* Reseñas: citas sueltas sobre el fondo, no otra fila de tarjetas */
.co-resenas{display:grid;gap:26px}
.co-resena{margin:0;padding-left:18px;border-left:3px solid color-mix(in srgb,var(--c) 45%,#fff)}
.co-estrellas{display:flex;gap:2px;font-size:15px;color:#F2B82C}
.co-resena blockquote{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:#25324A}
.co-resena figcaption{margin-top:8px;font:600 14px var(--font);color:#5A6577}
/* Varios vídeos en una lección: botones encima del título */
.co-videos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.co-videos button{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px 0 6px;border:1px solid var(--t-line);border-radius:20px;background:#fff;color:#25324A;font:600 14px var(--font);cursor:pointer;transition:border-color .15s,background .15s}
.co-videos button b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--t-soft);font:700 13px var(--font)}
.co-videos button small{font:500 12.5px var(--font);color:#5E6A7E}
.co-videos button:hover{border-color:#9FB0C8}
.co-videos button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,#fff);color:var(--t-ink)}
.co-videos button.on b{background:var(--c);color:#fff}
.co-videos button:focus-visible{outline:2px solid var(--c);outline-offset:2px}
/* Test de repaso: ocupa el sitio del vídeo, pero como hoja clara, no como pantalla */
.co-test-ini{padding:34px 30px;border:1px solid var(--t-line);border-radius:20px;background:#fff;text-align:center}
.co-test-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:28px}
.co-test-ini h2{margin:14px 0 0;font:800 24px/1.2 var(--font);letter-spacing:-.02em}
.co-test-ini p{margin:8px auto 0;max-width:32em;font-size:15.5px;line-height:1.5;color:#4A566B}
.co-test-mejor{display:inline-flex !important;align-items:center;gap:8px;margin-top:16px !important;padding:7px 14px;border-radius:16px;background:var(--t-soft);font-weight:600;color:#25324A !important}
.co-test-mejor.ok{background:#EFFBF4;color:#0C8A4A !important}
.co-test-mejor i{font-size:18px}
.co-test-ini .co-btn{margin-top:22px}
.co-test-form{display:grid;gap:14px}
.co-preg{margin:0;padding:20px 22px;border:1px solid var(--t-line);border-radius:18px;background:#fff;min-width:0}
.co-preg legend,.co-preg-t{display:flex;gap:12px;margin:0 0 12px;padding:0;font:600 16.5px/1.4 var(--font);color:var(--t-ink);float:left;width:100%}
.co-preg legend + *{clear:both}
.co-preg legend span,.co-preg-t span{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--t-soft);font:700 13px var(--font);color:#4A566B}
.co-op{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid transparent;border-radius:12px;font-size:15.5px;line-height:1.45;color:#25324A;clear:both}
label.co-op{cursor:pointer;transition:background .15s}
label.co-op:hover{background:var(--t-soft)}
.co-op input{flex-shrink:0;width:19px;height:19px;margin:2px 0 0;accent-color:var(--c)}
label.co-op:has(input:checked){background:color-mix(in srgb,var(--c) 8%,#fff);border-color:color-mix(in srgb,var(--c) 45%,#fff)}
label.co-op:has(input:focus-visible){outline:2px solid var(--c);outline-offset:1px}
.co-op > i{flex-shrink:0;margin-top:1px;font-size:19px;color:#B9C2CF}
.co-op em{font-style:normal;font-weight:600;font-size:13.5px}
.co-op.correcta{background:#EFFBF4;border-color:#BDEBD0}
.co-op.correcta > i,.co-op.correcta em{color:#0C8A4A}
.co-op.fallada{background:#FFF1F0;border-color:#F5C6C1}
.co-op.fallada > i,.co-op.fallada em{color:#C0392B}
.co-preg.bien .co-preg-t span{background:#EFFBF4;color:#0C8A4A}
.co-preg.mal .co-preg-t span{background:#FFF1F0;color:#C0392B}
.co-test-res{display:flex;align-items:center;gap:22px;margin-bottom:14px;padding:24px 26px;border-radius:20px;background:#0B1220;color:#fff}
.co-test-res > b{flex-shrink:0;font:800 40px/1 var(--font);letter-spacing:-.03em}
.co-test-res.ok > b{color:#5BE39B}
.co-test-res.ko > b{color:#FFB3A8}
.co-test-res h2{margin:0;font:700 21px var(--font)}
.co-test-res p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.75)}
.co-test .co-acc{margin-top:8px}
/* Encuesta: el formulario incrustado debajo del texto, con alto de sobra para no tener dos scrolls */
.co-form{order:3;margin-top:26px;border:1px solid var(--t-line);border-radius:20px;overflow:hidden;background:#fff}
.co-player[hidden]{display:none}
.co-player[hidden] + .co-tema{padding-top:4px}
.sala-curso .co-form iframe{display:block;position:static;width:100%;height:1500px;border:0;opacity:1;background:#fff}
.co-barra-compra{display:none}

/* Aula */
.co-aula{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-top:28px}
.co-player{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0B1220;box-shadow:0 30px 60px -40px rgba(11,18,32,.7)}
/* La sala esconde sus marcos hasta estar «lista» (.sala-cuerpo iframe{opacity:0}); el
   reproductor no pasa por ahí, así que se enseña siempre. Sin esto se oía pero no se veía. */
.sala-curso .co-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:1;background:#0B1220}
.co-player-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:rgba(255,255,255,.78);font:500 14.5px/1.45 var(--font);isolation:isolate}
.co-player-msg::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(11,18,32,.88),rgba(11,18,32,.95)),var(--foto,none) center/cover}
.co-player-msg i{font-size:34px;color:color-mix(in srgb,var(--c) 55%,#fff)}
.co-player-msg b{font:700 19px var(--font);color:#fff}
.co-player-msg span:not(.co-gira){max-width:30em}
.co-gira{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin 1s linear infinite}
.co-tema{padding:24px 2px 0}
.co-tema h1{margin:10px 0 0;font:800 clamp(24px,2.6vw,32px)/1.15 var(--font);letter-spacing:-.02em;text-wrap:balance}
.co-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* El texto del tema: columna de lectura estrecha, debajo de los botones */
.co-texto{order:2;margin-top:34px;padding-top:26px;border-top:1px solid #D9E0EA;max-width:40em}
.co-texto h3{margin:0 0 12px;font:700 17px var(--font);letter-spacing:-.01em}
.co-texto p{margin:0 0 14px;font-size:16px;line-height:1.65;color:#25324A}
.co-texto p:last-child{margin-bottom:0}
.co-tema{display:flex;flex-direction:column}
.co-tema > .co-acc{order:1}
.co-tema > .co-recursos{order:3}
.co-recursos{margin-top:22px}
.co-recursos h3{margin:0 0 10px;font:700 15px var(--font)}
.co-recursos a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--t-line);color:var(--t-ink);font:600 14.5px var(--font);text-decoration:none}
.co-recursos a + a{margin-top:8px}
.co-recursos a:hover{border-color:#9FB0C8}
.co-recursos i{font-size:18px;color:var(--t-blue-text)}
/* El temario se queda a la vista; si no cabe (cursos largos), tiene su propio scroll */
.co-lado{position:sticky;top:20px;display:grid;gap:14px;max-height:calc(100dvh - 62px - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
.co-indice .co-mod h3{padding:13px 16px;font-size:15px}
.co-indice ol{padding:6px}
.co-tema-b{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px;border:0;border-radius:12px;background:none;text-align:left;color:#25324A;font:500 14px/1.4 var(--font);cursor:pointer;transition:background .15s}
.co-tema-b:hover{background:var(--t-soft)}
.co-tema-b:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.co-tema-b .co-est{flex-shrink:0;margin-top:1px;font-size:18px;color:#A2ACBB}
.co-tema-b.visto .co-est{color:var(--t-green-text)}
.co-tema-b.on{background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--t-ink);font-weight:600}
/* Lección que aún no toca (la primera vez el curso va en orden) */
.co-tema-b.bloq{color:#5E6A7E;cursor:default}
.co-tema-b.bloq:hover{background:none}
.co-tema-b.bloq .co-est{color:#B9C2CF}
.co-tema-b .co-est.ti-circle-x{color:#E08A7E}
.co-orden{display:flex;gap:12px;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--c) 9%,#fff);border:1px solid color-mix(in srgb,var(--c) 28%,#fff)}
.co-orden[hidden]{display:none}
.co-orden > i{flex-shrink:0;font-size:22px;color:var(--c)}
.co-orden b{display:block;font:700 14.5px var(--font);color:var(--t-ink)}
.co-orden p{margin:3px 0 0;font-size:13px;line-height:1.45;color:#4A566B}
.co-orden.ok{background:#EFFBF4;border-color:#BDEBD0}
.co-orden.ok > i{color:#0C8A4A}
.co-estado{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 6px;font:500 14.5px var(--font);color:#5A6577}
.co-estado i{font-size:19px;color:var(--c)}
.co-estado.ok{color:#0C8A4A;font-weight:600}
.co-estado.ok i{color:var(--t-green-text)}
.co-videos button.visto b{background:#EFFBF4;color:#0C8A4A}
.co-videos button.on.visto b{background:#12C56B;color:#fff}
.co-videos button b i{font-size:15px}
.co-test-fin{margin-top:16px !important;font-weight:600;color:#25324A !important}
.co-tema-b.on:not(.visto) .co-est{color:var(--c)}
.co-incluye{padding:16px;border:1px solid var(--t-line);border-radius:18px;background:#fff}
.co-incluye h3{margin:0;font:700 15px var(--font)}
.co-incluye p{margin:4px 0 12px;font-size:13.5px;line-height:1.45;color:#5A6577}
.co-inf{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-paper);color:var(--t-ink);font:600 14px var(--font);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.co-inf + .co-inf{margin-top:8px}
.co-inf span{flex:1;min-width:0}
.co-inf i:first-child{font-size:18px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}
.co-inf i:last-child{font-size:16px;color:#5E6A7E;transition:transform .2s}
.co-inf:hover{border-color:#9FB0C8;background:#fff}
.co-inf:hover i:last-child{transform:translateX(3px)}
.co-inf:focus-visible{outline:2px solid var(--c);outline-offset:1px}

@media(max-width:960px){
  .co-ficha{display:block}
  .co-compra{position:static;max-width:460px;margin-top:28px}
  .co-aula{grid-template-columns:1fr;gap:24px}
  .co-lado{position:static;max-height:none;overflow:visible}
}
@media(max-width:640px){
  .co-ficha,.co-aula{padding:22px 16px 56px}
  .co-ficha{padding-bottom:110px}
  .co-lema{font-size:18px}
  .co-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-cifras div:nth-child(3){padding-left:0;border-left:0;border-top:1px solid #D9E0EA}
  .co-cifras div:nth-child(4){border-top:1px solid #D9E0EA}
  .co-lista,.co-dos{grid-template-columns:1fr}
  .co-dos{gap:0}
  .co-bloque{margin-top:40px}
  .co-bloque h2{font-size:21px}
  .co-player{border-radius:14px;margin:0 -4px}
  .co-preg{padding:16px 14px}
  .co-test-ini{padding:26px 18px}
  .co-test-res{gap:16px;padding:20px 18px}
  .co-test-res > b{font-size:32px}
  .co-acc .co-btn{flex:1 1 auto}
  /* La compra, siempre a mano: barra fija abajo con el precio y el botón */
  .co-barra-compra{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--t-line)}
  .co-barra-compra b{font:800 24px/1 var(--font);letter-spacing:-.02em}
  .co-barra-compra .co-btn{flex:1}
}
@media(prefers-reduced-motion:reduce){.co-btn,.co-inf i,.co-tema-b,label.co-op{transition:none}.co-gira{animation-duration:2.5s}}

/* ══ MATRÍCULA (onboarding) Y «CREANDO TU PLAN» ══════════════════════════════
   Lo primero que ve un alumno nuevo, con el mismo lenguaje que el campus que viene
   después: el anfiteatro desenfocado de fondo, la cabecera en tinta de las salas con su
   línea de progreso (un cuarto por paso) y cada paso en una hoja blanca. Antes era una
   pantalla azul oscuro con otro logo, otros botones y otra letra. Solo cambia el aspecto:
   los pasos, los ids y lo que se guarda son los de siempre (initOnboarding en app.js).
   Todo va con #onboarding-screen / #loading-screen delante porque style.css fija ahí los
   colores del tema oscuro con esa misma fuerza. */
#onboarding-screen,#loading-screen{--c:#1D6DF0;padding:0;background:#EEF3FA;font-family:var(--font);color:var(--t-ink)}
#onboarding-screen::before,#loading-screen::before{content:'';position:fixed;inset:-40px;z-index:0;pointer-events:none;
  background:url(/assets/tema/anfiteatro.jpg) center 70%/cover no-repeat;filter:blur(14px) saturate(1.15);opacity:.9}
#onboarding-screen::after,#loading-screen::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,250,255,.5) 0%,rgba(247,250,255,.72) 45%,rgba(247,250,255,.86) 100%)}
.ob-cab{position:sticky;top:0;z-index:3;--p:4%}
.ob-cab-logo{height:38px;width:auto;flex-shrink:0;margin:0 8px 0 2px}
#onboarding-screen:has(#ob-step-1.active) .ob-cab{--p:25%}
#onboarding-screen:has(#ob-step-2.active) .ob-cab{--p:50%}
#onboarding-screen:has(#ob-step-3.active) .ob-cab{--p:75%}
#onboarding-screen:has(#ob-step-4.active) .ob-cab,#loading-screen .ob-cab{--p:100%}

/* La hoja */
#onboarding-screen .ob-container,#loading-screen .loading-wrap{position:relative;z-index:1;max-width:620px;width:calc(100% - 32px);margin:40px auto 56px;padding:40px 44px 44px;
  background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:26px;box-shadow:0 34px 70px -44px rgba(16,38,72,.55)}
#onboarding-screen .ob-step h2,#loading-screen .loading-title{margin:0 0 12px;font:800 clamp(27px,3.4vw,36px)/1.04 var(--font);letter-spacing:-.03em;text-transform:uppercase;color:var(--t-ink);text-align:left;text-wrap:balance}
#onboarding-screen .ob-step h2 span,#loading-screen .loading-title span{color:inherit}
#onboarding-screen .ob-step > p,#onboarding-screen .ob-sub,#loading-screen .loading-sub{margin:0 0 26px;font-size:16.5px;line-height:1.5;color:#4A566B;text-align:left}

/* Cabecera de cada paso: volver y en qué paso estamos (el avance ya está en la barra) */
#onboarding-screen .ob-step-header{justify-content:flex-start;gap:16px;margin-bottom:22px}
#onboarding-screen .ob-dots{display:none}
#onboarding-screen .ob-back{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 11px;border-radius:18px;border:1px solid #CFD8E6;background:#fff;color:var(--t-ink);font:600 13.5px var(--font);cursor:pointer;transition:border-color .15s}
#onboarding-screen .ob-back:hover{border-color:#9FB0C8;background:#fff;color:var(--t-ink)}
#onboarding-screen .ob-back i{font-size:16px}
#onboarding-screen .ob-step-num{font:600 11.5px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:#1652B8}

/* Bienvenida: tres líneas, no tres cajas */
#onboarding-screen .ob-intro-feats{gap:0;margin:0 0 30px;border-top:1px solid var(--t-line)}
#onboarding-screen .ob-intro-feat{gap:16px;padding:16px 2px;background:none;border:0;border-bottom:1px solid var(--t-line);border-radius:0}
#onboarding-screen .ob-intro-feat i{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:#EAF1FE;color:var(--t-blue-text);font-size:21px}
#onboarding-screen .ob-intro-feat strong{font:700 16px var(--font);color:var(--t-ink);margin-bottom:2px}
#onboarding-screen .ob-intro-feat span{font-size:14px;color:#5A6577}

/* Opciones */
#onboarding-screen .ob-list{gap:10px;margin-bottom:26px}
#onboarding-screen .ob-opt{gap:14px;padding:14px 16px;background:#fff;border:1.5px solid var(--t-line);border-radius:16px;color:var(--t-ink);font:600 15.5px var(--font);transition:border-color .15s,background .15s,box-shadow .15s}
#onboarding-screen .ob-opt:hover{border-color:#B9C8DE;background:#fff;color:var(--t-ink)}
#onboarding-screen .ob-opt i{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--t-soft);color:#4A566B;font-size:20px;transition:background .15s,color .15s}
#onboarding-screen .ob-opt small{margin-top:2px;font-size:13.5px;font-weight:400;color:#5A6577}
#onboarding-screen .ob-opt.selected{border-color:var(--t-blue);background:#F4F8FF;color:var(--t-ink);box-shadow:0 0 0 3px rgba(29,109,240,.12)}
#onboarding-screen .ob-opt.selected i{background:var(--t-blue);color:#fff}
#onboarding-screen .ob-check{width:24px;height:24px;border-radius:50%;border:1.5px solid #C5CFDD;background:#fff}
#onboarding-screen .ob-opt.selected .ob-check{background:var(--t-blue);border-color:var(--t-blue)}
#onboarding-screen .ob-opt.selected .ob-check::after{font-size:13px}
#onboarding-screen .ob-opt.grid{gap:12px;padding:18px}
#onboarding-screen .ob-opt.grid i{font-size:21px}

/* Botón principal: la píldora en tinta del resto de la app */
#onboarding-screen .btn-primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;padding:0 24px;border:0;border-radius:27px;background:var(--t-ink);color:#fff;font:600 16px var(--font);transition:background .15s,transform .15s}
#onboarding-screen .btn-primary:hover{background:#1c2638;transform:none}
#onboarding-screen .btn-primary:active{transform:scale(.985)}
#onboarding-screen .btn-primary:disabled{background:#C9D2DF;color:#fff;opacity:1}
#onboarding-screen .btn-primary i{font-size:19px}
#onboarding-screen .btn-primary:focus-visible,#onboarding-screen .ob-back:focus-visible{outline:3px solid rgba(29,109,240,.45);outline-offset:2px}
#onboarding-screen .ob-opt:focus-visible{outline:3px solid rgba(29,109,240,.45);outline-offset:2px}

/* Tus datos */
#onboarding-screen .ob-form{gap:18px;margin-bottom:26px}
#onboarding-screen .form-group label{font:600 13.5px var(--font);letter-spacing:0;text-transform:none;color:#25324A}
#onboarding-screen .req{color:var(--t-pink-text)}
#onboarding-screen .form-group input,#onboarding-screen .form-group select,#onboarding-screen .date-row select{
  padding:13px 15px;background:#fff;border:1.5px solid #D5DDE8;border-radius:14px;color:var(--t-ink);font:500 16px var(--font);box-shadow:none}
#onboarding-screen .form-group input::placeholder{color:#97A2B3}
#onboarding-screen .form-group input:focus,#onboarding-screen .form-group select:focus,#onboarding-screen .date-row select:focus{border-color:var(--t-blue);background:#fff;box-shadow:0 0 0 3px rgba(29,109,240,.14);outline:none}
#onboarding-screen .date-row select option{background:#fff;color:var(--t-ink)}
#onboarding-screen .form-hint{margin-top:2px;font-size:13px;color:#5A6577}
#onboarding-screen .gender-opt{padding:11px 18px;border:1.5px solid #D5DDE8;border-radius:22px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
#onboarding-screen .gender-opt span{font:600 14.5px var(--font);letter-spacing:0;text-transform:none;color:#25324A}
#onboarding-screen .gender-opt:has(input:checked){border-color:var(--t-ink);background:var(--t-ink)}
#onboarding-screen .gender-opt:has(input:checked) span{color:#fff}
#onboarding-screen .gender-opt:has(input:focus-visible){outline:3px solid rgba(29,109,240,.45);outline-offset:2px}
#onboarding-screen .form-msg{margin-bottom:16px;border-radius:12px;font-size:14px}
#onboarding-screen .form-msg.error{background:#FFF1F0;color:#A8261B;border:1px solid #F5C6C1}

/* «Creando tu plan» */
#loading-screen .loading-steps{gap:12px;margin-bottom:22px}
#loading-screen .loading-step{gap:16px;padding:20px;background:#fff;border:1px solid var(--t-line);border-radius:18px}
#loading-screen .loading-step-num{width:32px;height:32px;background:var(--t-ink);font:700 14px var(--font)}
#loading-screen .loading-step-badge{margin-bottom:8px;padding:0;border:0 !important;background:none !important;font:600 11px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:#1652B8 !important}
#loading-screen .loading-step-body h3{margin-bottom:6px;font:700 16.5px/1.3 var(--font);color:var(--t-ink)}
#loading-screen .loading-step-body p{font-size:14.5px;line-height:1.55;color:#4A566B}
#loading-screen .loading-bar-card{padding:18px 20px;background:var(--t-soft);border:0;border-radius:18px}
#loading-screen .loading-bar-top span{font:600 14.5px var(--font);color:var(--t-ink)}
#loading-screen .loading-spinner{border-color:#D5DDE8;border-top-color:var(--t-blue)}
#loading-screen .loading-bar{height:6px;background:#D9E0EA;border-radius:3px}
#loading-screen .loading-bar-fill{background:var(--t-blue);border-radius:3px}
#loading-screen .loading-bar-pct{font:700 13px var(--font);color:#1652B8}
#loading-screen .loading-note{margin:16px 0 0;font-size:14px;color:#5A6577;text-align:left}

@media(max-width:640px){
  #onboarding-screen .ob-container,#loading-screen .loading-wrap{width:calc(100% - 20px);margin:14px auto 28px;padding:24px 18px 26px;border-radius:22px}
  #onboarding-screen .ob-step > p,#onboarding-screen .ob-sub,#loading-screen .loading-sub{font-size:15.5px;margin-bottom:20px}
  #onboarding-screen .ob-opt{padding:12px 13px;font-size:15px}
  #onboarding-screen .ob-list.ob-grid{grid-template-columns:1fr 1fr}
  #onboarding-screen .gender-row{flex-direction:row}
  .ob-cab-logo{height:32px}
}
@media(prefers-reduced-motion:reduce){
  #onboarding-screen .ob-step{animation:none}
  #onboarding-screen .ob-opt,#onboarding-screen .btn-primary,#onboarding-screen .ob-back{transition:none}
}

/* ══ EVALUADOR (profesores) ══════════════════════════════════════════════════
   Con la cabecera de las secciones sueltas (.pf2-hero, como Cursos) y tarjetas como las de
   Ejercicios: blancas, icono tintado de su color (--c) y la acción escrita abajo. Antes
   eran títulos azules, iconos en degradado y tarjetas que subían al pasar el ratón. */
#seccion-evaluador .evd-cards{gap:16px;margin:6px 0 18px}
#seccion-evaluador .evd-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:22px 22px 20px;text-align:left;font-family:var(--font);
  background:#fff;border:1px solid var(--t-line);border-radius:22px;box-shadow:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
#seccion-evaluador .evd-card:hover{transform:none;border-color:#CFD8E6;box-shadow:0 18px 40px -30px rgba(16,38,72,.5)}
#seccion-evaluador .evd-card:focus-visible{outline:3px solid color-mix(in srgb,var(--c) 45%,#fff);outline-offset:2px}
#seccion-evaluador .evd-card-ic{width:46px;height:46px;border-radius:14px;margin-bottom:16px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:23px;box-shadow:none}
#seccion-evaluador .evd-card-title{font:700 19px/1.25 var(--font);letter-spacing:-.01em;color:var(--t-ink);margin-bottom:6px}
#seccion-evaluador .evd-card-sub{max-width:none;font-size:14.5px;line-height:1.5;color:#4A566B}
#seccion-evaluador .evd-card-ir{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font:600 14px var(--font);color:color-mix(in srgb,var(--c) 80%,#0B1220)}
#seccion-evaluador .evd-card-ir i{transition:transform .2s}
#seccion-evaluador .evd-card:hover .evd-card-ir i{transform:translateX(3px)}
#seccion-evaluador .evd-panel{padding:20px 22px;background:#fff;border:1px solid var(--t-line);border-radius:22px;box-shadow:none}
#seccion-evaluador .evd-panel-head{font:600 11.5px var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:#1652B8}
/* Las pantallas de dentro (historial, alumno) conservan su cabecera con «volver»: el
   título, con la letra del campus */
#seccion-evaluador .evd-title{font:800 clamp(26px,3vw,34px)/1.05 var(--font);letter-spacing:-.03em;text-transform:uppercase;color:var(--t-ink)}
#seccion-evaluador .evd-sub{font-size:15.5px;font-weight:400;color:#4A566B}
#seccion-evaluador .evd-back{border-radius:50%;border-color:#CFD8E6;color:var(--t-ink)}
@media(prefers-reduced-motion:reduce){#seccion-evaluador .evd-card,#seccion-evaluador .evd-card-ir i{transition:none}}

/* ══ BIENVENIDA Y ACCESO ═════════════════════════════════════════════════════
   La puerta del campus, con su mismo lenguaje: el anfiteatro de fondo (nítido en la
   bienvenida, desenfocado en el acceso), el titular grande en mayúsculas de Inicio, y a la
   derecha unas ventanitas de cristal como la columna de Inicio (de ejemplo). El acceso y el
   registro son la hoja blanca de la matrícula. Antes: fondo azul noche con círculos de
   color, y cuatro «capturas» falsas de la app con emojis. */
#welcome-screen .bg-circle,#welcome-screen .diamond,#auth-screen .bg-circle{display:none}
#welcome-screen{background:#EEF3FA url(/assets/tema/anfiteatro.jpg) 70% 60%/cover no-repeat;font-family:var(--font);color:var(--t-ink)}
#welcome-screen::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(247,250,255,.97) 0%,rgba(247,250,255,.92) 38%,rgba(247,250,255,.45) 62%,rgba(247,250,255,.12) 100%)}
#welcome-screen .welcome-grid{max-width:1320px;padding:0 48px}
#welcome-screen .welcome-left{padding:56px 40px 48px 0;justify-content:center}
#welcome-screen .wl-logo{width:150px;height:auto;margin:0 0 30px -8px}
.wl-ceja{display:flex;align-items:center;gap:14px;margin-bottom:16px;font:600 12px var(--t-label);letter-spacing:.26em;text-transform:uppercase;color:#4A566B}
.wl-ceja::before{content:'';width:34px;height:2px;background:var(--t-blue)}
#welcome-screen .welcome-left h1{margin:0 0 18px;font:800 clamp(38px,4.6vw,64px)/.98 var(--font);letter-spacing:-.035em;text-transform:uppercase;color:var(--t-ink);text-wrap:balance}
#welcome-screen .welcome-left h1 span{color:inherit}
#welcome-screen .welcome-subtitle{margin:0 0 30px;max-width:30em;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:#33415A}
/* Las cuatro ventajas: líneas, no cajas */
#welcome-screen .feats{gap:0 28px;margin-bottom:34px;max-width:560px;border-top:1px solid #D9E0EA}
#welcome-screen .feat{gap:12px;padding:14px 0;border-bottom:1px solid #D9E0EA}
#welcome-screen .feat-icon-wrap{width:40px;height:40px;border:0;border-radius:12px;background:#EAF1FE}
#welcome-screen .feat-icon-wrap i{font-size:20px;color:var(--t-blue-text)}
#welcome-screen .feat-icon-wrap.purple{background:#F1ECFF}
#welcome-screen .feat-icon-wrap.purple i{color:#6440E8}
#welcome-screen .feat-label{font:700 15px var(--font);color:var(--t-ink)}
#welcome-screen .feat-sub{font-size:13.5px;color:#5A6577}
#welcome-screen .feat-info{color:#97A2B3}
#welcome-screen .feat-info:hover{color:var(--t-blue-text)}
#welcome-screen .info-tooltip,#welcome-screen ~ .info-tooltip{background:#fff;border:1px solid var(--t-line);color:#25324A;box-shadow:0 20px 40px -24px rgba(16,38,72,.5)}
#welcome-screen .btn-welcome-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;min-height:56px;padding:0 30px;border:0;border-radius:28px;
  background:var(--t-ink);color:#fff;font:600 16.5px var(--font);box-shadow:0 20px 40px -24px rgba(11,18,32,.8);transition:background .15s}
#welcome-screen .btn-welcome-cta:hover{background:#1c2638;transform:none;box-shadow:0 20px 40px -24px rgba(11,18,32,.8)}
#welcome-screen .btn-welcome-cta i{font-size:19px}
#welcome-screen .welcome-login-row{margin-top:16px;font-size:15px;color:#4A566B}
#welcome-screen .btn-welcome-login{color:var(--t-blue-text);font-weight:600}
#welcome-screen .welcome-note{margin-top:18px;color:#5E6A7E;font-size:13px}
#welcome-screen .welcome-close{background:rgba(255,255,255,.8);border:1px solid #fff;color:var(--t-ink);box-shadow:0 10px 26px -14px rgba(16,38,72,.45)}
#welcome-screen .welcome-close:hover{background:#fff}
#welcome-screen .btn-welcome-cta:focus-visible,#welcome-screen .btn-welcome-login:focus-visible,#welcome-screen .welcome-close:focus-visible{outline:3px solid rgba(29,109,240,.45);outline-offset:3px}
/* Ventanitas de ejemplo */
#welcome-screen .welcome-right{justify-content:flex-end;padding:40px 0}
.wv-col{display:flex;flex-direction:column;gap:12px;width:310px;margin-right:12px}
.wv-item{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 40px -24px rgba(16,38,72,.5);animation:tfEntra .6s cubic-bezier(.2,.8,.3,1) both}
.wv-item:nth-child(2){animation-delay:.08s}.wv-item:nth-child(3){animation-delay:.16s}.wv-item:nth-child(4){animation-delay:.24s}
.wv-item small{display:block;font:500 10.5px var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:#5E6A7E}
.wv-item b{display:block;margin-top:4px;font:600 14.5px/1.3 var(--font);color:var(--t-ink)}
.wv-luz{flex-shrink:0;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--lz) 13%,#fff);color:var(--lz);font-size:21px}
.wv-prog{flex-direction:column;align-items:stretch;gap:9px}
.wv-barra span{display:block;font:600 12.5px var(--font);color:#25324A;margin-bottom:5px}
.wv-barra i{display:block;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c) var(--v),#E4E9F0 var(--v))}
@media(max-width:1024px){#welcome-screen .welcome-right{display:none}#welcome-screen::before{background:linear-gradient(180deg,rgba(247,250,255,.9),rgba(247,250,255,.96))}}
@media(max-width:640px){
  #welcome-screen .welcome-grid{padding:0 22px}
  #welcome-screen .welcome-left{padding:36px 0 32px}
  #welcome-screen .wl-logo{width:120px;margin-bottom:22px}
  #welcome-screen .feats{grid-template-columns:1fr}
  #welcome-screen .btn-welcome-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){.wv-item{animation:none}}

/* Acceso y registro: la hoja de la matrícula */
#auth-screen{background:#EEF3FA;font-family:var(--font)}
#auth-screen::before{content:'';position:fixed;inset:-40px;z-index:0;pointer-events:none;background:url(/assets/tema/anfiteatro.jpg) center 70%/cover no-repeat;filter:blur(14px) saturate(1.15);opacity:.9}
#auth-screen::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(247,250,255,.5),rgba(247,250,255,.82))}
#auth-screen .auth-card{max-width:460px;padding:40px 40px 36px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #fff;border-radius:26px;box-shadow:0 34px 70px -44px rgba(16,38,72,.55)}
#auth-screen .auth-logo{margin:4px 0 26px}
#auth-screen .wl-logo{width:130px;height:auto}
#auth-screen .auth-back,#auth-screen .auth-close{width:36px;height:36px;background:#fff;border:1px solid #CFD8E6;color:var(--t-ink);font-size:17px}
#auth-screen .auth-back:hover,#auth-screen .auth-close:hover{background:#fff;border-color:#9FB0C8;color:var(--t-ink)}
#auth-screen .auth-tabs{padding:4px;margin-bottom:24px;border-radius:24px;background:var(--t-soft)}
#auth-screen .auth-tab{border-radius:20px;color:#4A566B;font:600 14.5px var(--font)}
#auth-screen .auth-tab.active{background:var(--t-ink);color:#fff}
#auth-screen .form-group label{font:600 13.5px var(--font);letter-spacing:0;text-transform:none;color:#25324A}
#auth-screen .form-group input{padding:13px 15px;background:#fff;border:1.5px solid #D5DDE8;border-radius:14px;color:var(--t-ink);font:500 16px var(--font);box-shadow:none}
#auth-screen .form-group input::placeholder{color:#97A2B3}
#auth-screen .form-group input:focus{border-color:var(--t-blue);background:#fff;box-shadow:0 0 0 3px rgba(29,109,240,.14)}
#auth-screen .btn-eye{color:#5A6577}
#auth-screen .btn-eye:hover{color:var(--t-ink)}
#auth-screen .btn-link{color:var(--t-blue-text);font-weight:600}
#auth-screen .btn-link.back{display:inline-flex;align-items:center;gap:6px}
#auth-screen .btn-primary{min-height:52px;border:0;border-radius:26px;background:var(--t-ink);color:#fff;font:600 16px var(--font)}
#auth-screen .btn-primary:hover{background:#1c2638;transform:none}
#auth-screen .btn-primary:disabled{background:#C9D2DF;opacity:1}
#auth-screen .auth-divider{color:#5E6A7E}
#auth-screen .auth-divider::before,#auth-screen .auth-divider::after{background:#E1E7EF}
#auth-screen .btn-google{min-height:50px;border-radius:25px;background:#fff;border:1.5px solid #D5DDE8;color:var(--t-ink);font:600 15px var(--font)}
#auth-screen .btn-google:hover{border-color:#9FB0C8;background:#fff}
#auth-screen .forgot-hint{color:#4A566B}
#auth-screen .form-msg.error{background:#FFF1F0;color:#A8261B;border:1px solid #F5C6C1}
#auth-screen .form-msg.success{background:#EFFBF4;color:#0C8A4A;border:1px solid #BDEBD0}
#auth-screen .form-msg.info{background:#EAF1FE;color:#1652B8;border:1px solid #C9DBFB}
#auth-screen :is(.btn-primary,.btn-google,.auth-tab,.auth-back,.auth-close,.btn-link):focus-visible{outline:3px solid rgba(29,109,240,.45);outline-offset:2px}
@media(max-width:640px){#auth-screen .auth-card{padding:34px 20px 26px;border-radius:22px}}
#auth-screen .auth-divider span{color:#5E6A7E;font:500 13px var(--font);background:none}

/* ══ AVISO: CONFIRMA TU CORREO ═══════════════════════════════════════════════
   Píldora de cristal abajo al centro (arriba tapaba la fecha de Inicio), encima del
   contenido y debajo de las ventanas.
   Sale solo a las cuentas con correo sin confirmar (avisoVerificarCorreo en app.js). */
.av-verif{position:fixed;z-index:1500;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(680px,calc(100vw - 24px));
  padding:9px 9px 9px 16px;border-radius:24px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid #fff;box-shadow:0 18px 40px -22px rgba(16,38,72,.55);font:500 14px/1.35 var(--font);color:#25324A;animation:avVerif .4s cubic-bezier(.2,.8,.3,1) both}
.av-verif > i{flex-shrink:0;font-size:20px;color:var(--t-blue-text)}
.av-verif b{font-weight:600;color:var(--t-ink);overflow-wrap:anywhere}
.av-corto{display:none}
.av-verif-btn{flex-shrink:0;min-height:34px;padding:0 14px;border:0;border-radius:17px;background:var(--t-ink);color:#fff;font:600 13px var(--font);cursor:pointer}
.av-verif-btn:disabled{opacity:.7;cursor:default}
.av-verif-x{flex-shrink:0;width:30px;height:30px;border:0;border-radius:50%;background:none;color:#5E6A7E;font-size:16px;cursor:pointer}
.av-verif-x:hover{background:var(--t-soft);color:var(--t-ink)}
.av-verif button:focus-visible{outline:3px solid rgba(29,109,240,.45);outline-offset:2px}
@keyframes avVerif{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:768px){.av-verif{bottom:calc(150px + env(safe-area-inset-bottom));width:calc(100vw - 24px);font-size:13px;padding:8px 8px 8px 14px}.av-largo{display:none}.av-corto{display:inline}}
@media(prefers-reduced-motion:reduce){.av-verif{animation:none}}

/* ═══ AULA: QUITAR A UN ALUMNO ═══ */
.aula-student-quitar{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--t-line);border-radius:10px;background:transparent;color:var(--t-mute,#64748b);cursor:pointer;transition:.15s}
.aula-student-quitar:hover,.aula-student-quitar:focus-visible{color:#dc2626;border-color:#fca5a5;background:#fef2f2}

/* ═══ SIN CONEXIÓN AL ARRANCAR ═══ */
.rk-sin-red{position:fixed;inset:0;z-index:99990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:var(--t-bg,#F6F8FB);color:var(--t-ink,#0B1220);font-family:inherit}
.rk-sin-red i{font-size:40px;color:var(--t-mute,#64748b)}
.rk-sin-red b{font-size:19px}
.rk-sin-red span{color:var(--t-mute,#64748b);font-size:14px}
.rk-sin-red button{margin-top:8px;padding:12px 26px;border:0;border-radius:999px;background:var(--t-ink,#0B1220);color:#fff;font:inherit;font-weight:700;cursor:pointer}

/* ═══ CONTRASTE DE LOS TEXTOS (2026-10-01) ═══
   Los colores de las áreas (verde, rosa, morado, azul, naranja) son de fondo e iconos: como
   letra no llegaban al mínimo de lectura (WCAG AA, 4,5:1; el verde, 2,1:1). Donde un texto
   lleva el color de su área se oscurece mezclándolo con negro, que vale para cualquier área.
   Los iconos se quedan con el color vivo. Los grises de texto secundario pasan a #5E6A7E. */
.cr-hito.ok,.cr-btn-p,.cr-btn-p:hover,.ej-pie > span,.cr-ult button,.comp-chip.on,.rd-et:hover,.rd-et.sel,.rd-area,
.rd-li.hecho .rd-li-est,.pp-est:hover .pp-nom,.pp-est.sel .pp-nom,.ar-juego.on,.au-entrar,.vt-balda-nom,.pr-art:hover,
.pr-art.sel,.sala-carga span,.dm-caja .rd-area,.dm-res b,.dm-nota span,.dm-dim b,.co-videos button.on,
.co-tema-b.on:not(.visto) .co-est{color:color-mix(in srgb,var(--c) 62%,#000)}
.ti-pin-tit{color:color-mix(in srgb,var(--a) 62%,#000)}
/* El azul de marca en letra (las etiquetas de objetivos lo traen de style.css como --primary) */
.perfil-obj-tag,.perfil-obj-tag i{color:var(--t-blue-text)}
.ej-hoy-et{background:#6440E8}
/* La cara de detrás de las tarjetas del expediente: letra blanca sobre el color del área */
.ex-asig-desc{background:color-mix(in srgb,var(--c) 64%,#000)}

/* ═══ CURSOS ONLINE: FORMULARIO DE REGISTRO (Diagnóstico docente) ═══
   Las mismas tarjetas que los tests (.co-preg, .co-op); aquí solo lo propio del formulario. */
.co-reg-ini{text-align:left}
.co-reg-lista{margin:12px 0 0;padding-left:20px;font-size:15px;line-height:1.5;color:#4A566B}
.co-reg-lista li{margin-bottom:4px}
.co-reg-aviso{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0 !important;padding:12px 14px;border-radius:12px;background:var(--t-soft);font-size:13.5px !important;color:#4A566B !important}
.co-reg-aviso i{flex-shrink:0;margin-top:2px;font-size:16px}
.co-reg-sec{margin:12px 0 0;font:800 20px/1.2 var(--font);letter-spacing:-.01em;color:var(--t-ink)}
.co-reg-ob{font-style:normal;color:#C0392B}
.co-preg-t small,.co-preg legend small{font-weight:500;color:#5E6A7E;font-size:13px}
.co-inp{display:block;width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--t-line);border-radius:12px;background:#fff;font:16px/1.4 var(--font);color:var(--t-ink)}
.co-inp:focus{outline:2px solid var(--c);outline-offset:1px;border-color:transparent}
textarea.co-inp{resize:vertical;min-height:100px}
.co-reg-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px}
.co-escala{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.co-escala .co-op{justify-content:center;align-items:center;flex-direction:column;gap:4px;padding:10px 4px;border:1px solid var(--t-line);font-weight:700}
.co-escala .co-op input{margin:0}
.co-escala-ext{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;color:#5E6A7E}
.co-reg-f.falta{border-color:#F5C6C1;box-shadow:0 0 0 3px #FFF1F0}
.co-reg-err{margin:0;padding:12px 14px;border-radius:12px;background:#FFF1F0;color:#B42318;font-weight:600}
/* Lo que falta, con el número de cada pregunta (2026-10-19): pegado abajo mientras se recorre el
   formulario; cada número lleva a su pregunta. La pregunta que falta lleva su número en rojo y la
   etiqueta «Falta por responder». */
.co-reg-err:not([hidden]){position:sticky;bottom:12px;z-index:3;display:flex;align-items:flex-start;gap:10px;border:1px solid #F5C6C1;box-shadow:0 14px 30px -16px rgba(180,35,24,.45)}
.co-reg-err > i{flex-shrink:0;font-size:20px;margin-top:2px}
.co-reg-err > span{line-height:2}
.co-reg-n{display:inline-grid;place-items:center;min-width:30px;height:30px;margin:0 6px 4px 0;padding:0 7px;border:0;border-radius:999px;vertical-align:middle;
  cursor:pointer;font:700 13.5px var(--font);color:#fff;background:#D92D20;transition:background .15s,transform .15s}
.co-reg-n:hover{background:#B42318;transform:translateY(-1px)}
.co-reg-mas{font-style:normal;white-space:nowrap}
@media(max-width:640px){ .co-reg-n{min-width:26px;height:26px;margin:0 4px 4px 0;padding:0 6px;font-size:13px} .co-reg-err > span{line-height:1.9} }
.co-reg-f.falta legend span,.co-reg-f.falta .co-preg-t span{color:#fff;background:#D92D20}
.co-reg-f.falta legend::after,.co-reg-f.falta .co-preg-t::after{content:'Falta por responder';flex-shrink:0;align-self:center;margin-left:auto;padding:2px 9px;border-radius:999px;
  font:700 11.5px var(--font);color:#B42318;background:#FFF1F0;white-space:nowrap}
.co-reg > .co-btn{justify-self:start}
.co-reg-ini p{margin-left:0;max-width:none}

/* ═══ CENTRO DE ENTRENAMIENTO ═══
   El mapa del campus con siete lugares. El lienzo tiene la proporción de la imagen y cubre la
   escena como un fondo (cover, con unidades del contenedor): así los puntos, en % de la
   imagen, caen siempre sobre su edificio. En el móvil el lienzo es más ancho que la pantalla y
   se arrastra de lado. Al entrar, nubes que se apartan mientras el mapa se acerca (unos
   3,5 s); después aparecen la cabecera y los lugares. */
.rk-nav .dash-nav-item.dash-nav-largo{height:auto;min-height:50px;padding-top:8px;padding-bottom:8px;line-height:1.2;white-space:normal}
.ce{padding:18px clamp(12px,2vw,28px) 28px;box-sizing:border-box}
/* Sin la entrada común de las secciones: esta trae la suya, y con el fundido se veía lo de detrás */
#seccion-centro,#seccion-centro > .ce-escena{animation:none;opacity:1}
.ce-escena{position:relative;overflow:hidden;border-radius:24px;height:calc(100dvh - var(--rk-nav-h,72px) - 56px);min-height:520px;
  container-type:size;background:#EAF1FB;box-shadow:0 1px 0 #fff inset,0 18px 50px rgba(11,18,32,.12)}
.ce-vista{position:absolute;inset:0;overflow:hidden}
.ce-lienzo{position:absolute;left:50%;top:50%;width:max(100cqw,177.7cqh);aspect-ratio:1672/941;transform:translate(-50%,-50%)}
.ce-mapa{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:55% 55%;
  animation:ceAcerca 3.4s cubic-bezier(.25,.75,.25,1) .1s both}
@keyframes ceAcerca{from{transform:scale(1.25);filter:blur(6px) saturate(.75) brightness(1.08)}to{transform:scale(1);filter:none}}
/* La niebla de la entrada: tres capas de una textura de niebla de verdad (ruido fractal,
   assets/centro/niebla-densa.webp; sin bordes, a diferencia de las nubes de degradados, que
   dejaban cortes). Dos se apartan a los lados y la tercera se abre desde el centro. */
.ce-nubes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ce-velo{position:absolute;inset:0;background:#F4F8FE;animation:ceVelo .9s ease-out .1s both}
@keyframes ceVelo{from{opacity:1}to{opacity:0}}
.ce-niebla{position:absolute;inset:-20%;background:url(/assets/centro/niebla-densa.webp?v=20261002c) center/100% 100% no-repeat;will-change:transform,opacity}
/* La textura ocupa justo su capa (100% 100%, no «cover»): «cover» recortaba sus bordes difuminados
   y, al apartarse, el borde recortado se veía como un corte de lado a lado */
.ce-ni3{-webkit-mask:radial-gradient(closest-side,transparent var(--ce-hueco),#000 calc(var(--ce-hueco) + 30%));
  mask:radial-gradient(closest-side,transparent var(--ce-hueco),#000 calc(var(--ce-hueco) + 30%));animation:ceNieblaAbre 3s cubic-bezier(.35,.3,.3,1) .1s both}
@property --ce-hueco{syntax:'<percentage>';inherits:false;initial-value:0%}
/* Las dos capas no se desplazan: crecen desde su centro mientras se apagan. Un borde que se
   desplaza cruza la pantalla y, aunque esté difuminado, se ve como un tajo que avanza; creciendo
   desde el centro, los bordes solo se alejan hacia fuera y nunca entran en la escena. */
.ce-ni1{animation:ceNieblaIzq 3.4s cubic-bezier(.4,.2,.25,1) .15s both}
.ce-ni2{transform:scale(-1,1);animation:ceNieblaDer 3.4s cubic-bezier(.4,.2,.25,1) .25s both}
@keyframes ceNieblaIzq{0%{opacity:1;transform:scale(1)}70%{opacity:.5}100%{opacity:0;transform:scale(1.7)}}
@keyframes ceNieblaDer{0%{opacity:1;transform:scale(-1,1)}70%{opacity:.5}100%{opacity:0;transform:scale(-1.7,1.7)}}
@keyframes ceNieblaAbre{0%{--ce-hueco:0%;opacity:1}60%{opacity:.85}100%{--ce-hueco:110%;opacity:0}}
/* El entorno vivo, sobre el mapa (se mueve con él): las cascadas y la bruma del valle */
.ce-entorno{position:absolute;inset:0;pointer-events:none;container-type:size;opacity:0;animation:ceEntorno 1.2s ease-out 2.2s both}
@keyframes ceEntorno{to{opacity:1}}
.ce-cascada{position:absolute}
/* El agua que cae: una sola capa sobre todo el mapa que solo se ve donde hay agua pintada en
   las cascadas (máscara assets/centro/agua-mascara.webp, sacada de la propia imagen: lo claro y
   azulado, sin roca ni vegetación). Dentro, una lámina clara y dos capas de estrías
   (assets/centro/agua.webp, sin costura) bajando a distinta velocidad. Las medidas van en cqw
   del contenedor .ce-entorno (del tamaño del lienzo): el agua mide lo mismo en cualquier
   pantalla. El contenedor no es el lienzo a propósito: en el lienzo, Firefox calculaba mal su
   propio ancho. Las texturas llevan ?v=: nginx las guarda en caché 30 días. */

.ce-aguas{position:absolute;inset:0;
  -webkit-mask:url(/assets/centro/agua-mascara.webp?v=20261002c) 0 0/100% 100% no-repeat;mask:url(/assets/centro/agua-mascara.webp?v=20261002c) 0 0/100% 100% no-repeat;
  background:
    url(/assets/centro/agua.webp?v=20261002c) 0 0/2.4cqw 9.6cqw repeat,
    url(/assets/centro/agua.webp?v=20261002c) 1.1cqw 0/3.2cqw 8cqw repeat,
    rgba(236,244,255,.5);
  animation:ceCae .85s linear infinite}
@keyframes ceCae{to{background-position:0 9.6cqw,1.1cqw 8cqw,0 0}}
/* La nube de agua al pie: bocanadas que suben y el viento lleva a la derecha. Cada una es un
   difuminado que se apaga antes de su borde (closest-side), así que no hay cortes. */
.ce-espuma{position:absolute;left:0;right:0;bottom:-4%;height:0}
.ce-espuma i{position:absolute;left:50%;top:0;width:240%;aspect-ratio:1.5;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 45%,rgba(255,255,255,0));
  filter:blur(3px);opacity:0;animation:ceEspuma 3.4s ease-out infinite}
.ce-grande .ce-espuma i{width:340%}
@keyframes ceEspuma{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}15%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--ce-viento,110%)),-110%) scale(1.7)}}
.ce-espuma i:nth-child(2){animation-delay:.85s;--ce-viento:140%}
.ce-espuma i:nth-child(3){animation-delay:1.7s;--ce-viento:95%}
.ce-espuma i:nth-child(4){animation-delay:2.55s;--ce-viento:160%}
/* La bruma que se queda en el valle, a la deriva */
.ce-bruma-valle{position:absolute;inset:-6% -25%;background:url(/assets/centro/niebla-jirones.webp?v=20261002c) center/100% 100% no-repeat;opacity:.7;
  animation:ceDeriva 38s ease-in-out infinite alternate}
@keyframes ceDeriva{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
/* Los lugares: una estela blanca azulada y luminosa con la forma de cada edificio (su contorno, en .ce-estelas).
   Al acabar la entrada se van encendiendo una a una, del primer plano al fondo (el orden y los
   tiempos, también en CentroEntrenamiento.ORDEN, T_ESTELAS y PASO_ESTELAS): la línea se dibuja
   alrededor del edificio con un destello, y luego una chispa la recorre despacio. Al pasar por
   encima, el edificio se ilumina y sale su nombre (.ce-bocadillo). */
.ce-estelas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ce-estela{--d:calc(var(--desde,.6s) + var(--i,0) * .38s);cursor:pointer;outline:none;transition:opacity .25s}
/* Encendidas las siete, se apagan (clase .calma, la pone app.js); la que se señala vuelve a brillar.
   Apagadas siguen recibiendo el ratón y el toque: opacidad 0 no quita los eventos */
.ce-estelas.calma .ce-estela{opacity:0;transition:opacity 1.4s ease}
.ce-estelas.calma .ce-estela:hover,.ce-estelas.calma .ce-estela:focus-visible{opacity:1;transition:opacity .25s}
.ce-estela polygon{fill:none;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.ce-e-relleno{fill:#EEF5FF !important;fill-opacity:0;pointer-events:all !important;transition:fill-opacity .25s}
.ce-e-halo{stroke:#DCEBFF;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1;opacity:1;
  animation:ceTraza .9s cubic-bezier(.5,0,.3,1) var(--d) forwards,ceDestello 1.4s ease-out var(--d),ceRespira 4.5s ease-in-out calc(var(--d) + 1.4s) infinite;transition:stroke-width .25s}
.ce-e-linea{stroke:#F2F8FF;stroke-width:3;filter:drop-shadow(0 0 1.5px rgba(29,80,170,.5));stroke-dasharray:1;stroke-dashoffset:1;animation:ceTraza .9s cubic-bezier(.5,0,.3,1) var(--d) forwards}
.ce-e-chispa{stroke:#fff;stroke-width:3.4;stroke-dasharray:.07 .93;stroke-dashoffset:1;opacity:0;
  animation:ceChispa 7s linear calc(var(--d) + .9s) infinite}
@keyframes ceTraza{to{stroke-dashoffset:0}}
@keyframes ceDestello{0%,40%{stroke-width:12}65%{stroke-width:26;opacity:1}100%{stroke-width:12}}
@keyframes ceRespira{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes ceChispa{0%{stroke-dashoffset:1;opacity:0}6%,94%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.ce-estela:hover .ce-e-relleno,.ce-estela:focus-visible .ce-e-relleno{fill-opacity:.24}
.ce-estela:hover .ce-e-halo,.ce-estela:focus-visible .ce-e-halo{animation:none;stroke-dashoffset:0;stroke:#DCEBFF;stroke-width:20;opacity:1}
.ce-estela:hover .ce-e-linea,.ce-estela:focus-visible .ce-e-linea{stroke:#fff;stroke-width:3.4}
/* El nombre del lugar, encima del edificio, solo mientras se pasa por encima */
.ce-bocadillo{position:absolute;z-index:2;transform:translate(calc(-50% + var(--ajx,0px)),calc(-100% - 12px));display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:8px 14px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid #fff;box-shadow:0 10px 28px rgba(11,18,32,.18),0 0 18px rgba(255,255,255,.9);
  text-align:center;white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;translate:0 6px;transition:opacity .18s,translate .18s,visibility 0s .18s}
.ce-bocadillo.ver{visibility:visible;opacity:1;translate:0 0;transition:opacity .18s,translate .18s}
.ce-bocadillo b{font:700 14.5px/1.2 var(--font);color:var(--t-ink)}
.ce-bocadillo small{font-size:12.5px;line-height:1.3;color:#4A566B}
/* Cabecera, cita y progreso, sobre el mapa */
.ce-titulo{position:absolute;left:clamp(16px,2.6vw,34px);top:clamp(14px,2vw,24px);padding:12px 18px 14px;border-radius:18px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(11,18,32,.12);animation:ceTitulo .7s ease-out 2.4s both}
.ce-titulo .hub-ceja::before{content:'';width:26px;height:3px;border-radius:3px;background:var(--t-blue)}
.ce-titulo h1{margin:6px 0 0;font:800 clamp(24px,2.6cqw,40px)/1.05 var(--font);letter-spacing:-.025em;color:var(--t-ink);white-space:nowrap}
.ce-t2{color:var(--t-blue-text)}
.ce-t3{color:var(--t-pink-text)}
.ce-titulo p{margin:6px 0 0;font-size:14.5px;line-height:1.4;color:#4A566B}
.ce-arriba-der{position:absolute;right:clamp(16px,2.6vw,34px);top:clamp(16px,2.4vw,28px);display:flex;align-items:center;gap:10px}
.ce-progreso{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(11,18,32,.12);animation:ceTitulo .7s ease-out 2.6s both}
.ce-aro{width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--t-blue) calc(var(--p) * 1%),#E2E9F4 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 68%,#000 70%);mask:radial-gradient(farthest-side,transparent 68%,#000 70%)}
.ce-progreso small{display:block;font:600 10.5px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E}
.ce-progreso b{display:block;margin-top:2px;font:700 14px var(--font);color:var(--t-ink)}
@keyframes ceTitulo{from{opacity:0;visibility:hidden;transform:translateY(-8px)}1%{visibility:visible}to{opacity:1;visibility:visible;transform:none}}
/* La ventana de cada lugar */
.ce-dm-ic{background:color-mix(in srgb,var(--c) 14%,#fff) !important;color:color-mix(in srgb,var(--c) 62%,#000) !important}
.ce-dm-lista{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:8px;text-align:left}
.ce-dm-lista li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:#25324A}
.ce-dm-lista i{flex-shrink:0;margin-top:2px;color:#077A3F}
.ce-dm-btn{width:100%;justify-content:center;margin-top:8px}
/* Según el ancho de la escena (no de la ventana): con menos sitio, las tarjetas dicen solo el
   nombre y la cita se quita, para que nada se pise ni tape un lugar */
@media(max-width:768px){
  .ce{padding:10px 10px calc(84px + env(safe-area-inset-bottom))}
  .ce-escena{height:calc(100dvh - 150px - env(safe-area-inset-bottom));min-height:460px;border-radius:18px}
  /* El mapa se arrastra de lado; la cabecera y las nubes se quedan quietas encima */
  .ce-vista{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ce-vista::-webkit-scrollbar{display:none}
  .ce-lienzo{position:relative;left:0;top:0;height:100%;width:auto;transform:none}
  .ce-titulo{left:10px;right:10px;top:10px;max-width:none;padding:11px 14px 13px;border-radius:16px}
  .ce-titulo h1{font-size:23px}.ce-titulo p{font-size:13px;margin-top:5px}
  .ce-progreso{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ce-mapa,.ce-titulo,.ce-progreso,.ce-entorno,.ce-aguas,.ce-bruma-valle,.ce-e-halo,.ce-e-linea{animation:none}
  .ce-entorno{opacity:1}
  .ce-e-halo,.ce-e-linea{stroke-dashoffset:0}
  .ce-e-chispa{display:none}
  .ce-nubes,.ce-espuma{display:none}
}

/* El botón del viento, a la izquierda de «Tu progreso» (en el móvil, arriba a la derecha) */
.ce-sonido{flex-shrink:0;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(11,18,32,.12);color:var(--t-ink);font-size:21px;cursor:pointer;animation:ceTitulo .7s ease-out 2.6s both}
.ce-sonido:hover{background:#fff}
.ce-sonido:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
@media(max-width:768px){.ce-arriba-der{right:auto;left:10px;top:auto;bottom:10px}.ce-sonido{width:42px;height:42px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.ce-sonido{animation:none}}

/* ══ TU COMPAÑERO (2026-10-02) ════════════════════════════════════════════════
   La burbuja de Reto o del sabio que lleves puesto (Companero en app.js). Tarjeta
   blanca con la cabecera del personaje (retrato, nombre y qué es), su frase del día,
   dónde estás, el menú y el chat. --cp es el color de su manto. Va acotado a
   #reto-widget para ganar a las reglas antiguas de la burbuja (oscura, con !important). */
#reto-widget .reto-boc{--cp:#1D6DF0;width:340px;padding:14px 14px 12px;border-radius:24px 24px 8px 24px;
  background:rgba(255,255,255,.97) !important;border:1px solid rgba(18,30,52,.1) !important;
  box-shadow:0 26px 60px -24px rgba(16,38,72,.45),0 0 0 4px color-mix(in srgb,var(--cp) 10%,transparent) !important;
  animation:none;overflow:visible;max-height:min(640px,calc(100dvh - 140px));overflow-y:auto;scrollbar-width:thin}
#reto-widget .reto-boc::before,#reto-widget .reto-boc::after{display:none}
#reto-widget .boc-header{display:flex;align-items:center;gap:10px;margin:0 0 10px}
#reto-widget .boc-back{width:30px;height:30px;font-size:15px;border-radius:50%;background:#F1F4F9 !important;color:var(--t-ink) !important}
#reto-widget .boc-back.hidden{display:none}
.cp-retrato{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:color-mix(in srgb,var(--cp) 14%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cp) 30%,#fff)}
.cp-retrato svg{width:44px;height:44px;margin-top:6px}
.cp-quien{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cp-quien b{font:800 16px/1.15 var(--font);color:var(--t-ink);letter-spacing:-.01em}
#reto-widget .boc-crumb{font:600 12.5px/1.25 var(--font) !important;letter-spacing:0 !important;text-transform:none !important;color:#4A566B !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-x{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:0;background:#F1F4F9;color:var(--t-ink);display:grid;place-items:center;font-size:15px;cursor:pointer}
.cp-x:hover,#reto-widget .boc-back:hover{background:#E3E8F1 !important}
.cp-dice{display:none}
#reto-widget .boc-text{font:600 14.5px/1.4 var(--font) !important;color:var(--t-ink) !important;margin:0 0 10px}
#reto-widget .boc-text:empty{display:none}
#reto-widget .boc-resp{font:600 14px/1.5 var(--font) !important;color:var(--t-ink) !important}
/* Dónde estás */
.cp-aqui{width:100%;display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:9px 10px;border-radius:14px;border:1px solid var(--t-line);background:#fff;
  cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,background .15s}
.cp-aqui:hover{border-color:var(--cp);background:color-mix(in srgb,var(--cp) 5%,#fff)}
.cp-aqui-ic{flex-shrink:0;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  background:color-mix(in srgb,var(--cp) 14%,#fff);color:color-mix(in srgb,var(--cp) 70%,#000)}
.cp-aqui > span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.cp-aqui small{font:600 11.5px var(--font);color:#5E6A7E}
.cp-aqui b{font:700 14px/1.2 var(--font);color:var(--t-ink)}
.cp-aqui-mas{flex-shrink:0;font:700 12px var(--font);color:color-mix(in srgb,var(--cp) 70%,#000)}
/* El menú: en lista, o en rejilla para «Llévame a…» */
.cp-lista{display:flex;flex-direction:column;gap:6px}
.cp-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#reto-widget .boc-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:13px;font:inherit;text-align:left;cursor:pointer;
  background:#fff !important;border:1px solid var(--t-line) !important;transform:none;animation:none;opacity:1}
#reto-widget .boc-opt::before{display:none}
#reto-widget .boc-opt:hover,#reto-widget .boc-opt:focus-visible{border-color:var(--cp) !important;background:color-mix(in srgb,var(--cp) 5%,#fff) !important;outline:none}
#reto-widget .boc-icon{width:30px;height:30px;border-radius:10px;flex-shrink:0;background:color-mix(in srgb,var(--cp) 12%,#fff) !important}
#reto-widget .boc-icon i{font-size:16px;color:color-mix(in srgb,var(--cp) 70%,#000) !important}
#reto-widget .boc-label{font:700 13.5px/1.25 var(--font) !important;color:var(--t-ink) !important}
#reto-widget .boc-arr{font-size:15px;color:#7A8699 !important}
.cp-rejilla .boc-opt{flex-direction:column;justify-content:center;gap:6px !important;padding:11px 4px !important;text-align:center !important}
.cp-rejilla .boc-label{font-size:12.5px !important}
#reto-widget .cp-urgente .boc-icon{background:#FFF1E6 !important}
#reto-widget .cp-urgente .boc-icon i{color:#C2410C !important}
#reto-widget .cp-suave .boc-icon{background:#F1F4F9 !important}
#reto-widget .cp-suave .boc-icon i,#reto-widget .cp-suave .boc-label{color:#4A566B !important}
/* La guía de la sección */
.cp-guia{position:relative;margin:0 0 10px;padding:14px;border-radius:16px;background:color-mix(in srgb,var(--cp) 6%,#fff);border:1px solid color-mix(in srgb,var(--cp) 16%,#fff)}
.cp-guia-ic{float:left;width:36px;height:36px;margin:0 10px 4px 0;border-radius:11px;display:grid;place-items:center;font-size:19px;color:#fff;background:var(--cp)}
.cp-guia b{display:block;font:800 15px/1.2 var(--font);color:var(--t-ink)}
.cp-guia p{margin:3px 0 0;font:500 13.5px/1.45 var(--font);color:#25324A}
.cp-guia ul{clear:both;list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.cp-guia li{position:relative;padding-left:22px;font:500 13.5px/1.4 var(--font);color:#25324A}
.cp-guia li::before{content:'';position:absolute;left:3px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--cp)}
#reto-widget .boc-action{width:100%;justify-content:center;padding:10px 14px;font:700 13.5px var(--font) !important;background:var(--t-ink) !important}
/* Lo que te conviene ahora */
#reto-widget .reto-smart{margin:0 0 8px;padding:10px;border-radius:14px;background:#FFF6EE !important;border:1px solid #FFD9BC}
#reto-widget .reto-smart-ic{background:#FFE4CC !important;border-radius:10px}
#reto-widget .reto-smart-ic i{color:#C2410C}
#reto-widget .reto-smart-lbl{font:700 11.5px var(--font) !important;letter-spacing:0 !important;text-transform:none !important;color:#9A3412 !important}
#reto-widget .reto-smart-txt{font:700 13.5px/1.3 var(--font) !important;color:var(--t-ink) !important}
#reto-widget .reto-smart-arr{color:#C2410C !important}
/* El chat */
#reto-widget .reto-chat{max-height:300px;gap:8px}
#reto-widget .reto-msg-bot,#reto-widget .reto-msg-user{font:500 13.5px/1.45 var(--font) !important;padding:9px 12px;border-radius:16px}
#reto-widget .reto-msg-bot{background:color-mix(in srgb,var(--cp) 8%,#fff) !important;border:1px solid color-mix(in srgb,var(--cp) 16%,#fff) !important;border-bottom-left-radius:5px}
#reto-widget .reto-msg-user{background:var(--t-ink) !important;color:#fff;border-bottom-right-radius:5px}
#reto-widget .reto-input-row{margin-top:10px;gap:8px}
#reto-widget #reto-input{height:42px;padding:0 16px;border-radius:999px !important;font:500 14px var(--font) !important}
#reto-widget #reto-input:focus{border-color:var(--cp) !important;outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--cp) 18%,transparent)}
#reto-widget #reto-send{width:42px;height:42px;border-radius:50%;background:var(--cp);font-size:17px}
/* La burbuja compacta (saludos y la guía automática): el nombre arriba, en su color */
#reto-widget .reto-boc.reto-boc-mini{width:min(290px,calc(100vw - 24px));padding:12px 14px;border-radius:20px 20px 6px 20px}
#reto-widget .reto-boc-mini .boc-header,#reto-widget .reto-boc-mini .reto-input-row{display:none}
#reto-widget .reto-boc-mini .cp-dice{display:block;margin:0 0 4px;font:800 12.5px var(--font);color:color-mix(in srgb,var(--cp) 72%,#000)}
#reto-widget .reto-boc-mini .boc-text{font-size:14px !important;margin-bottom:9px}
.cp-mini-sec{display:flex;align-items:center;gap:6px;margin-bottom:4px;font:800 15px var(--font);color:var(--t-ink)}
.cp-mini-sec i{font-size:17px;color:var(--cp)}
.cp-mini-acc{display:flex;gap:6px}
.cp-mini-acc .boc-opt{justify-content:center;padding:9px 6px !important}
.cp-mini-acc .boc-label{white-space:nowrap;text-align:center}

/* ── Más grande y hablando (2026-10-19) ──────────────────────────────────────
   Pasaba desapercibido: el compañero crece (100 px en el ordenador, 74 en el móvil) y lo que
   dice por su cuenta sale en un bocadillo de cómic encima de él (Companero.decir en app.js),
   con la cola hacia su boca y la boca moviéndose mientras escribe. */
.reto-avatar-wrap{width:100px;height:100px;transition:transform .2s}
.reto-avatar-wrap:hover{transform:scale(1.05)}
.reto-avatar-wrap .reto-mic-svg{width:84px !important;height:84px !important;margin-top:8px}
.reto-wave:nth-child(1){width:114px;height:114px}
.reto-wave:nth-child(2){width:136px;height:136px}
.reto-dot{width:15px;height:15px;bottom:7px;right:7px}
#reto-avatar .masc{inset:-20px -14px -8px}
#reto-widget.cp-hablando .reto-avatar-wrap svg{animation:cpHabla .36s ease-in-out infinite alternate}
#reto-widget.cp-hablando .mascota-reto .mr-boca{transform-box:fill-box;transform-origin:center top;animation:cpBoca .16s ease-in-out infinite alternate}
@keyframes cpHabla{to{transform:translateY(-3px) rotate(-2.5deg)}}
@keyframes cpBoca{to{transform:scaleY(2.3)}}
#reto-widget .cp-boc{--cp:#1D6DF0;pointer-events:auto;position:relative;width:min(330px,calc(100vw - 24px));padding:13px 16px 13px;border-radius:22px;
  background:#fff;border:1px solid rgba(18,30,52,.1);box-shadow:0 24px 50px -22px rgba(16,38,72,.5),0 0 0 4px color-mix(in srgb,var(--cp) 12%,transparent);transform-origin:calc(100% - 50px) 100%}
#reto-widget .cp-boc[hidden]{display:none}
#reto-widget .cp-boc.entra{animation:cpBocEntra .38s cubic-bezier(.34,1.45,.64,1) both}
#reto-widget .cp-boc.sale{animation:cpBocSale .2s ease-in both}
#reto-widget .cp-boc::after{content:'';position:absolute;right:41px;bottom:-9px;width:18px;height:18px;background:#fff;border-right:1px solid rgba(18,30,52,.1);
  border-bottom:1px solid rgba(18,30,52,.1);border-bottom-right-radius:5px;transform:rotate(45deg)}
@keyframes cpBocEntra{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cpBocSale{to{opacity:0;transform:translateY(6px) scale(.96)}}
.cp-boc-quien{display:block;margin:0 30px 3px 0;font:800 12.5px var(--font);color:color-mix(in srgb,var(--cp) 75%,#000)}
.cp-boc-tx{min-height:1.5em;font:500 15px/1.5 var(--font);color:var(--t-ink);cursor:default}
.cp-boc-tx b{font-weight:700}
.cp-boc-tx .cp-mini-sec{margin-bottom:2px}
.cp-boc-cita{display:block;margin:8px 0 0;padding-left:12px;border-left:3px solid var(--cp);font:italic 500 17px/1.4 Georgia,'Times New Roman',serif;color:#1C2740}
.cp-boc-autor{display:block;margin-top:6px;padding-left:15px;font:600 11px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E}
.cp-boc-autor::before{content:'— '}
.cp-boc-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:#F1F4F9;color:#4A566B;font-size:14px;cursor:pointer}
.cp-boc-x:hover{background:#E3E8F1}
.cp-boc-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.cp-boc-acc.ver{opacity:1;transform:none;pointer-events:auto}
.cp-boc-acc:empty{display:none}
.cp-boc-acc button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid rgba(18,30,52,.12);background:#fff;cursor:pointer;
  font:700 13.5px var(--font);color:var(--t-ink);transition:background .15s,border-color .15s,color .15s}
.cp-boc-acc button:hover{border-color:var(--cp)}
.cp-boc-acc button i{font-size:16px}
.cp-boc-acc button.principal{color:#fff;background:var(--t-ink);border-color:var(--t-ink)}
.cp-boc-acc button.principal:hover{background:var(--cp);border-color:var(--cp)}
.cp-boc-pasos{display:flex;gap:5px;margin-left:auto}
.cp-boc-pasos i{width:7px;height:7px;border-radius:50%;background:rgba(18,30,52,.15)}
.cp-boc-pasos i.on{background:var(--cp)}
.cp-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:769px){ .ti-franja{padding-right:144px} }
@media(max-width:768px){
  .reto-avatar-wrap{width:74px;height:74px}
  .reto-avatar-wrap .reto-mic-svg{width:62px !important;height:62px !important;margin-top:6px}
  .reto-wave:nth-child(1){width:86px;height:86px}
  .reto-wave:nth-child(2){width:102px;height:102px}
  .reto-dot{width:13px;height:13px;bottom:5px;right:5px}
  #reto-widget .cp-boc{width:min(320px,calc(100vw - 24px))}
  #reto-widget .cp-boc::after{right:28px}
  .cp-boc-tx{font-size:14.5px}
  .cp-boc-cita{font-size:16px}
}
@media(prefers-reduced-motion:reduce){#reto-widget.cp-hablando .reto-avatar-wrap svg,#reto-widget.cp-hablando .mascota-reto .mr-boca,#reto-widget .cp-boc.entra,#reto-widget .cp-boc.sale{animation:none}}
@media(max-width:768px){
  #reto-widget .reto-boc{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 200px)}
}
/* Compacto (2026-10-02): el panel entero se ve de un vistazo, sin desplazarse dentro.
   Menos aire entre piezas, «Estás en» más bajo, y el menú en 2×2. */
#reto-widget .reto-boc{padding:12px 12px 10px}
#reto-widget .boc-header{margin-bottom:8px;gap:9px}
#reto-widget .cp-retrato{width:40px;height:40px}
#reto-widget .cp-retrato svg{width:38px;height:38px;margin-top:5px}
#reto-widget .boc-text{font-size:14px !important;margin-bottom:8px}
#reto-widget .cp-aqui{margin-bottom:8px;padding:7px 9px;border-radius:13px}
#reto-widget .cp-aqui-ic{width:28px;height:28px;font-size:15px;border-radius:9px}
#reto-widget .cp-aqui b{font-size:13.5px}
#reto-widget .reto-smart{margin-bottom:8px;padding:7px 9px;border-radius:13px}
#reto-widget .reto-smart-ic{width:28px;height:28px;font-size:15px}
#reto-widget .reto-smart-txt{font-size:13px !important}
.cp-cuadro{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#reto-widget .cp-cuadro .boc-opt{padding:8px 9px;gap:8px;min-height:46px}
#reto-widget .cp-cuadro .boc-icon{width:28px;height:28px;border-radius:9px}
#reto-widget .cp-cuadro .boc-icon i{font-size:15px}
#reto-widget .cp-cuadro .boc-label{font-size:13px !important;line-height:1.2}
#reto-widget .cp-guia{padding:12px;margin-bottom:8px}
#reto-widget .cp-guia ul{margin-top:8px;gap:5px}
#reto-widget .cp-guia li{font-size:13px}
#reto-widget .reto-input-row{margin-top:8px}
#reto-widget #reto-input,#reto-widget #reto-send{height:38px}
#reto-widget #reto-input::placeholder{color:#7A8699;opacity:1}
#reto-widget #reto-send{width:38px;font-size:16px}
@media(prefers-reduced-motion:reduce){#reto-widget .reto-boc{transition:none}}

/* ══ EL VIAJE DEL CENTRO DE ENTRENAMIENTO (2026-10-02) ═════════════════════════
   Siete territorios con sus seis espacios (CentroEntrenamiento en app.js, api/viaje.php).
   Todo se abre en una hoja de pergamino encima del mapa: crema, filos dorados, títulos
   serif en azul marino y medallas doradas numeradas, como las láminas de referencia. */
.ce{--pg:#FBF6EA;--pg2:#F4ECD8;--oro:#C9A04A;--oro2:#E8CF8E;--oro-t:#8A6420;--marino:#13285E}
.ce-tit-acc{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ce-btn-viaje{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--marino);background:var(--marino);color:#fff;
  font:700 13px var(--font);cursor:pointer}
.ce-btn-viaje.ce-btn-sec{background:rgba(255,255,255,.7);color:var(--marino);border-color:#C8D3E6}
.ce-btn-viaje:hover{filter:brightness(1.12)}
.ce-btn-viaje:focus-visible,.ce-progreso:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
button.ce-progreso{border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.ce-boc-prog{display:block;margin-top:3px;font:700 11.5px var(--font);font-style:normal;color:var(--oro-t)}
.ce-boc-prog:empty{display:none}
/* La hoja */
.ce-hoja{position:absolute;inset:0;z-index:6}
.ce-hoja-velo{position:absolute;inset:0;background:rgba(10,20,45,.28);animation:ceHojaVelo .25s ease-out both}
.ce-hoja-caja{position:absolute;top:14px;right:14px;bottom:14px;width:min(540px,calc(100% - 28px));overflow-y:auto;overscroll-behavior:contain;
  padding:26px 26px 22px;border-radius:22px;background:var(--pg);color:#2A2A33;
  box-shadow:0 0 0 1.5px var(--oro2),0 0 0 7px var(--pg),0 0 0 8.5px var(--oro2),0 30px 70px -20px rgba(10,20,45,.55);
  animation:ceHojaEntra .35s cubic-bezier(.2,.8,.2,1) both;scrollbar-width:thin;outline:none}
.ce-hoja-caja.ce-hoja-centro{top:50%;left:50%;right:auto;bottom:auto;width:min(480px,calc(100% - 40px));max-height:calc(100% - 40px);transform:translate(-50%,-50%);
  animation:ceHojaCentro .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes ceHojaVelo{from{opacity:0}}
@keyframes ceHojaEntra{from{opacity:0;transform:translateX(24px)}}
@keyframes ceHojaCentro{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.ce-hoja-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--oro2);background:#fff;color:var(--marino);
  display:grid;place-items:center;font-size:16px;cursor:pointer}
.ce-hoja-cab{margin-bottom:16px;padding-right:30px}
.ce-hoja-caja h2{margin:6px 0 2px;font:700 27px/1.12 Georgia,'Times New Roman',serif;color:var(--marino);letter-spacing:-.01em}
.ce-hoja-caja h3{margin:2px 0 0;font:italic 600 17px/1.3 Georgia,'Times New Roman',serif;color:var(--oro-t)}
.ce-hoja-caja p{margin:8px 0 0;font:500 14.5px/1.55 var(--font);color:#3A3A45}
.ce-cinta{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--pg2);border:1px solid var(--oro2);
  font:700 11.5px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--oro-t)}
.ce-volver{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:0;border:0;background:none;cursor:pointer;font:700 13px var(--font);color:var(--marino)}
.ce-volver:hover{text-decoration:underline}
.ce-med{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 19px Georgia,serif;color:#5B3D0C;
  background:radial-gradient(circle at 35% 30%,#FFF1C4 0,#E9C46A 45%,#B98A2E 100%);box-shadow:0 0 0 2px #F6E3A8,0 3px 8px rgba(120,80,10,.3)}
.ce-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:14px 20px;border-radius:999px;cursor:pointer;
  border:2px solid var(--oro);background:linear-gradient(180deg,#2A4BA8,#16307A);color:#fff;font:700 16px var(--font);
  box-shadow:0 10px 24px -10px rgba(22,48,122,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.ce-cta:hover{filter:brightness(1.1)}
.ce-cta:disabled{opacity:.6;cursor:wait}
.ce-hecho-msg{display:flex;align-items:center;gap:8px;margin-top:16px !important;padding:12px 14px;border-radius:14px;background:#EAF7EF;color:#0B6B3A !important;font-weight:700 !important}
/* Misión y resultado */
.ce-mision{text-align:center;padding:6px 4px}
.ce-mision h2{font-size:34px}
.ce-mision p{text-align:center}
.ce-sello{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 12px;border-radius:50%;font-size:34px;color:#fff;
  background:radial-gradient(circle at 35% 30%,#3D63C9,#16307A);box-shadow:0 0 0 4px #F6E3A8,0 0 0 6px var(--oro),0 10px 24px rgba(22,48,122,.35)}
.ce-sello-oro{color:#5B3D0C;background:radial-gradient(circle at 35% 30%,#FFF1C4 0,#E9C46A 45%,#B98A2E 100%);animation:ceSello 1s cubic-bezier(.2,1.6,.4,1) both}
.ce-sello-gris{background:radial-gradient(circle at 35% 30%,#8A94A8,#4A5568)}
@keyframes ceSello{from{transform:scale(.3) rotate(-30deg);opacity:0}}
.ce-victoria h2{color:var(--oro-t)}
/* La misión, en tres pasos con icono (antes eran tres párrafos) */
.ce-mision-lema{margin-top:6px !important;font-size:16px !important;color:#2A2A33 !important}
.ce-pasos{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;text-align:left}
.ce-pasos li{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:16px;background:#fff;border:1px solid #EADFC4}
.ce-paso-ic{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:21px;color:#5B3D0C;
  background:radial-gradient(circle at 35% 30%,#FFF1C4 0,#E9C46A 45%,#B98A2E 100%);box-shadow:0 0 0 2px #F6E3A8}
.ce-pasos li > span:last-child{display:flex;flex-direction:column;gap:2px}
.ce-pasos b{font:700 16px/1.25 Georgia,'Times New Roman',serif;color:var(--marino)}
.ce-pasos small{font:500 13.5px/1.4 var(--font);color:#55555F}
.ce-mision-meta{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px !important;font-size:14px !important}
.ce-mision-meta i{font-size:18px;color:var(--oro-t)}
@media(max-width:768px){
  /* En el móvil, la misión entera sin desplazarse */
  .ce-hoja-caja.ce-hoja-centro{padding:18px 14px 16px}
  .ce-mision .ce-sello{width:52px;height:52px;font-size:24px;margin-bottom:8px}
  .ce-mision h2{font-size:26px}
  .ce-mision-lema{font-size:15px !important;margin-top:2px !important}
  .ce-pasos{margin-top:12px;gap:7px}
  .ce-pasos li{padding:8px 11px;gap:10px}
  .ce-paso-ic{width:34px;height:34px;font-size:17px}
  .ce-pasos b{font-size:15px}
  .ce-pasos small{font-size:12.5px;line-height:1.35}
  .ce-mision .ce-cinta,.ce-mision-meta{display:none}
  .ce-mision h2{margin-top:0}
  .ce-mision .ce-cta{margin-top:12px;padding:12px 18px;font-size:15px}
}
/* Mapa del viaje */
.ce-terr,.ce-esps,.ce-acts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ce-terr-it,.ce-esp,.ce-act{width:100%;display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:16px;cursor:pointer;text-align:left;font:inherit;
  background:#fff;border:1px solid #EADFC4;box-shadow:0 1px 0 #fff inset,0 6px 16px -12px rgba(90,60,10,.35);transition:border-color .15s,transform .15s}
.ce-terr-it:hover:not(:disabled),.ce-esp:hover,.ce-act:hover{border-color:var(--oro);transform:translateY(-1px)}
.ce-terr-it:focus-visible,.ce-esp:focus-visible,.ce-act:focus-visible,.ce-op:focus-within{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-terr-tx,.ce-esp-tx,.ce-act-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ce-terr-tx b,.ce-esp-tx b,.ce-act-tx b{font:700 16.5px/1.2 Georgia,'Times New Roman',serif;color:var(--marino)}
.ce-terr-tx em,.ce-esp-tx em{font:italic 600 13.5px/1.3 Georgia,serif;color:var(--oro-t)}
.ce-terr-tx small,.ce-act-tx small{font:500 13px/1.4 var(--font);color:#55555F}
.ce-terr-est,.ce-esp-ic{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--oro-t);
  background:var(--pg2);border:1px solid var(--oro2)}
.ce-terr-it.actual{border-color:var(--oro);box-shadow:0 0 0 3px rgba(201,160,74,.25)}
.ce-terr-it.superado .ce-terr-est{background:#EAF7EF;border-color:#A8DDBC;color:#0B6B3A}
.ce-terr-it.bloqueado{cursor:not-allowed;opacity:.62;filter:grayscale(.5)}
.ce-terr-it.bloqueado .ce-med{background:radial-gradient(circle at 35% 30%,#F0F0F0,#B5B5B5);color:#555;box-shadow:0 0 0 2px #E5E5E5}
/* Ficha del territorio */
.ce-nivel h2{font-size:30px}
.ce-chips{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 14px}
.ce-chip{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:16px;background:#fff;border:1px solid #EADFC4}
.ce-chip > span:last-child{display:flex;flex-direction:column;min-width:0}
.ce-chip small{font:600 11.5px var(--font);color:#6B6B75}
.ce-chip b{font:700 16px/1.2 Georgia,serif;color:var(--marino)}
.ce-chip em{margin-top:3px;font:500 12px/1.4 var(--font);font-style:normal;color:#55555F}
.ce-chip-ins em{font:800 14px var(--font);color:var(--oro-t)}
.ce-maestro-ret{flex-shrink:0;width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--pg2);box-shadow:0 0 0 2px var(--oro2)}
.ce-maestro-ret svg{width:44px;height:44px;margin-top:6px}
.ce-maestro-ic{font-size:22px;color:var(--oro-t)}
.ce-ins-ic{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#5B3D0C;
  background:radial-gradient(circle at 35% 30%,#FFF1C4 0,#E9C46A 45%,#B98A2E 100%);box-shadow:0 0 0 2px #F6E3A8}
.ce-esp-est{flex-shrink:0;font:700 12.5px var(--font);color:#6B6B75}
.ce-esp.hecho .ce-esp-est{color:var(--oro-t)}
.ce-esp.completo .ce-esp-ic{background:#EAF7EF;border-color:#A8DDBC;color:#0B6B3A}
.ce-ciclo{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--pg2);border:1px solid var(--oro2)}
.ce-ciclo b{display:block;margin-bottom:6px;font:700 13px var(--font);color:var(--marino)}
.ce-ciclo span{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;font:600 12.5px var(--font);color:#4A4A55}
.ce-ciclo i{color:var(--oro-t);font-size:16px;margin-right:2px}
.ce-ciclo em{font-style:normal;color:var(--oro)}
/* Un espacio y sus actividades */
.ce-mini-prog{display:flex;align-items:center;gap:9px;margin-top:10px;font:700 12.5px var(--font);color:var(--oro-t)}
.ce-mini-prog span{flex:1;height:6px;border-radius:6px;background:#EADFC4;overflow:hidden}
.ce-mini-prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#E9C46A,#B98A2E)}
.ce-act-ic{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:var(--marino);background:#EEF2FA}
.ce-act.hecho .ce-act-ic{color:#0B6B3A;background:#EAF7EF}
.ce-act-btn{flex-shrink:0;padding:7px 12px;border-radius:999px;background:var(--marino);color:#fff;font:700 12.5px var(--font)}
.ce-act.hecho .ce-act-btn{background:#fff;color:var(--marino);box-shadow:inset 0 0 0 1px #C8D3E6}
/* Lecturas, lecciones y prueba */
.ce-lectura{font:500 15px/1.6 var(--font);color:#2F2F3A}
.ce-lectura p{font-size:15px}
.ce-perg{margin-top:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #EADFC4}
.ce-perg b{display:block;margin-bottom:6px;font:700 14px var(--font);color:var(--marino)}
.ce-perg ul,.ce-perg ol{margin:0;padding-left:20px;display:grid;gap:6px;font:500 14px/1.5 var(--font);color:#3A3A45}
.ce-oraculo{margin:14px 0 0;padding:18px 20px;border-radius:16px;background:linear-gradient(180deg,#FFFDF6,var(--pg2));border:1px solid var(--oro2);
  font:italic 500 19px/1.45 Georgia,serif;color:var(--marino);text-align:center}
.ce-enlace{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font:700 13.5px var(--font);color:var(--marino)}
.ce-faltan{list-style:none;padding:0 !important}
.ce-faltan li{display:flex;align-items:center;gap:8px}
.ce-faltan li.hecho{color:#0B6B3A}
.ce-faltan button{padding:0;border:0;background:none;font:700 14px var(--font);color:var(--marino);text-decoration:underline;cursor:pointer}
.ce-preg{margin:16px 0 0;padding:14px;border-radius:16px;background:#fff;border:1px solid #EADFC4}
.ce-preg legend,.ce-preg > b{display:flex;gap:9px;padding:0;font:700 15px/1.4 var(--font);color:var(--marino)}
.ce-preg legend span{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--pg2);color:var(--oro-t);font-size:13px}
/* La pregunta de la prueba es un fieldset: su legend flota para quedarse dentro de la caja */
fieldset.ce-preg{min-width:0}
fieldset.ce-preg legend{float:left;width:100%;margin-bottom:2px}
fieldset.ce-preg .ce-ops{clear:both}
.ce-ops{display:grid;gap:7px;margin-top:10px}
.ce-op{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;border-radius:12px;border:1px solid #DCE2EE;background:#FAFBFD;cursor:pointer;
  font:600 14px/1.35 var(--font);color:#2A2A33;text-align:left}
.ce-op:hover:not(:disabled){border-color:var(--marino)}
.ce-op:has(input:checked){border-color:var(--marino);background:#EEF2FA}
.ce-op input{accent-color:var(--marino)}
.ce-op.ok{border-color:#3BB273;background:#EAF7EF;color:#0B6B3A}
.ce-op.mal{border-color:#E5484D;background:#FDECEC;color:#A11D22}
.ce-expl{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--pg2)}
.ce-err{color:#A11D22 !important;font-weight:700 !important}
@media(max-width:768px){
  /* Cabecera en una fila (nombre a la izquierda, los dos botones solo con icono): más alta,
     tapaba el Templo y no se podía tocar */
  .ce-titulo{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;padding:8px 8px 9px 14px}
  .ce-titulo .hub-ceja{grid-column:1;font-size:10px}
  .ce-titulo h1{grid-column:1;margin-top:2px;font-size:18px;overflow:hidden;text-overflow:ellipsis}
  .ce-titulo #ce-sub{display:none}
  .ce-tit-acc{grid-column:2;grid-row:1 / span 2;margin:0;flex-wrap:nowrap}
  .ce-btn-viaje{width:38px;height:38px;padding:0;justify-content:center;font-size:0;gap:0}
  .ce-btn-viaje i{font-size:18px}
  .ce-hoja-caja{top:8px;right:8px;bottom:8px;left:8px;width:auto;padding:22px 16px 18px}
  .ce-hoja-caja.ce-hoja-centro{width:calc(100% - 16px)}
  .ce-hoja-caja h2{font-size:23px}
  .ce-chips{grid-template-columns:1fr}
  .ce-esp-est{display:none}
}
@media(prefers-reduced-motion:reduce){.ce-hoja-velo,.ce-hoja-caja,.ce-sello-oro{animation:none}}

/* ══ EL AULA DEL CURSO, MÁS GRANDE (2026-10-05) ════════════════════════════════
   Se veía pequeña: el aula iba a 1120 px con el temario de 340 al lado, y el vídeo se quedaba
   en unos 690 px. Ahora ocupa casi todo el ancho, la letra sube y «Vídeo más grande» (modo
   cine, se recuerda) quita el temario para que el vídeo vaya de lado a lado. */
.co-aula{max-width:min(1640px,100%);padding:20px clamp(16px,2.4vw,40px) 72px;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,380px);gap:clamp(20px,2.2vw,36px)}
.co-aula.co-cine{grid-template-columns:minmax(0,1fr)}
.co-aula.co-cine .co-lado{display:none}
/* En modo cine el vídeo cabe entero en la pantalla, con sus controles: el ancho sale del alto
   disponible (pantalla menos la barra de la sala y el botón) */
.co-aula.co-cine .co-main{max-width:min(1500px,100%,calc((100dvh - 170px) * 16 / 9));margin:0 auto;width:100%}
.co-barra{display:flex;justify-content:flex-end;margin-bottom:10px}
.co-cine-b{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1px solid #CFD8E6;background:#fff;color:var(--t-ink);font:700 14px var(--font);cursor:pointer}
.co-cine-b:hover{border-color:var(--t-ink)}
.co-cine-b i{font-size:18px}
.co-player{border-radius:22px}
.co-tema h1{font-size:clamp(28px,2.6vw,42px)}
.co-ceja{font-size:13px}
.co-p{font-size:18px;line-height:1.55}
.co-texto{max-width:46em}
.co-texto h3{font-size:20px}
.co-texto p{font-size:18px;line-height:1.7}
.co-btn{min-height:50px;font-size:16px;padding:0 24px}
.co-estado{font-size:16px}
.co-recursos h3{font-size:17px}
.co-recursos a{font-size:16px;padding:13px 16px}
.co-indice .co-mod h3{font-size:16.5px}
.co-tema-b{font-size:15.5px;padding:11px}
.co-tema-b .co-est{font-size:19px}
.co-orden b,.co-incluye h3{font-size:16px}
.co-orden p,.co-incluye p{font-size:14.5px}
.co-inf{font-size:15px}
/* La tarjeta del diploma, arriba del temario */
.co-diploma{display:flex;gap:12px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--t-line)}
.co-diploma[hidden]{display:none}
.co-diploma > i{flex-shrink:0;font-size:26px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}
.co-diploma > div{flex:1;min-width:0}
.co-diploma b{display:block;font:700 16px var(--font);color:var(--t-ink)}
.co-diploma p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:#4A566B}
.co-diploma .co-btn{margin-top:12px;width:100%;text-decoration:none}
.co-diploma.listo{background:#EFFBF4;border-color:#BDEBD0}
.co-diploma.listo > i{color:#0C8A4A}
.co-diploma.pedir{background:color-mix(in srgb,var(--c) 8%,#fff);border-color:color-mix(in srgb,var(--c) 30%,#fff)}
.co-diploma input{width:100%;margin-top:12px;height:46px;padding:0 14px;border-radius:12px;border:1px solid #CFD8E6;font:600 16px var(--font);color:var(--t-ink)}
.co-diploma input:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.co-dip-err{color:#A11D22 !important;font-weight:600}
.co-dip-aviso{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:12px;padding:12px 14px;border-radius:16px;cursor:pointer;text-align:left;
  border:1px solid color-mix(in srgb,var(--c) 35%,#fff);background:color-mix(in srgb,var(--c) 10%,#fff);font:500 15px var(--font);color:var(--t-ink)}
.co-dip-aviso span{flex:1}
.co-dip-aviso > i{font-size:22px;color:color-mix(in srgb,var(--c) 80%,#0B1220)}
@media(max-width:960px){
  .co-aula{grid-template-columns:1fr;padding:12px 12px 72px}
  .co-barra{display:none}
  .co-tema h1{font-size:26px}
  .co-p,.co-texto p{font-size:17px}
}
@media(max-width:640px){
  /* En el móvil el vídeo va de borde a borde */
  .co-player{margin:0 -12px;border-radius:0}
}
/* Móviles bajos (iPhone SE y parecidos): de cada paso de la misión, solo su título */
@media(max-width:768px) and (max-height:720px){
  .ce-pasos small,.ce-mision-lema{display:none}
  .ce-pasos li{padding:7px 11px}
}


/* ══ EL VIAJE CON SUS ILUSTRACIONES (2026-10-07) ═══════════════════════════════
   El lienzo muestra el mapa general (assets/centro/mapa.png) con una estela por territorio, o
   la vista de cerca de un territorio con sus siete sitios como medallas (.ce-pin). Cambiar de
   uno a otro es un acercamiento hacia el territorio (.ce-acerca → .ce-llega) o un alejamiento
   (.ce-aleja → .ce-vuelve), con `scale` para no pisar el `transform` que centra el lienzo. */
.ce-escena{background:linear-gradient(#4E9FE3,#A9D8F6)}
.ce-escena.en-mundo .ce-solo-terr,.ce-escena:not(.en-mundo) .ce-solo-mundo{display:none}
/* En el ordenador el mapa general ocupa todo el ancho, sin franjas a los lados. Si es más bajo
   que la escena, va pegado abajo (arriba queda cielo); si es más alto, va
   pegado arriba y se recorta solo por abajo (el mar), para no perder el Olimpo. 56.27cqw = la
   altura de la imagen a todo el ancho (941/1672). */
@media(min-width:769px){.ce-escena.en-mundo .ce-lienzo{width:100cqw;top:max(100cqh - 56.27cqw, 0px);transform:translateX(-50%)}}
.ce-lienzo{transform-origin:var(--origen,50% 50%)}
.ce-lienzo.ce-acerca{animation:ceAcercaZona .9s cubic-bezier(.45,.05,.7,.4) forwards}
.ce-lienzo.ce-llega{animation:ceLlega 1.4s cubic-bezier(.2,.7,.2,1) both}
.ce-lienzo.ce-aleja{animation:ceAleja .52s cubic-bezier(.55,0,.8,.2) forwards}
.ce-lienzo.ce-vuelve{animation:ceVuelve .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes ceAcercaZona{to{scale:3.2;translate:var(--zdx,0) var(--zdy,0);filter:blur(3px)}}
@keyframes ceLlega{from{scale:1.08;filter:blur(9px) brightness(.8)}45%{filter:blur(3px) brightness(.95)}}
@keyframes ceAleja{to{scale:.85;opacity:0;filter:blur(4px)}}
@keyframes ceVuelve{from{scale:1.8;opacity:0;filter:blur(6px)}}
/* Las zonas del mapa, discretas (2026-10-07): ninguna línea al entrar (lo que aparece son las
   chinchetas); el borde solo se ve al pasar por encima, tenue. Las cerradas
   llevan una bruma ligera. El territorio actual se reconoce por su medalla, que late. */
.ce-zona-e .ce-e-halo{stroke:#fff;stroke-width:7;animation:none;stroke-dashoffset:0;opacity:0;transition:opacity .25s}
.ce-zona-e .ce-e-linea{stroke:#fff;stroke-width:1.6;animation:none;stroke-dashoffset:0;opacity:0;filter:none;transition:opacity .25s}
.ce-zona-e .ce-e-chispa{display:none}
.ce-zona-e .ce-e-relleno{fill:#fff}
.ce-zona-e:hover .ce-e-halo,.ce-zona-e:focus-visible .ce-e-halo{stroke:#fff;stroke-width:9;opacity:.45}
.ce-zona-e:hover .ce-e-linea,.ce-zona-e:focus-visible .ce-e-linea{stroke:#fff;stroke-width:2;opacity:.85}
.ce-zona-e:hover .ce-e-relleno,.ce-zona-e:focus-visible .ce-e-relleno{fill-opacity:.1}
.ce-zona-e.bloqueado .ce-e-halo,.ce-zona-e.bloqueado .ce-e-linea{stroke:#E5E9EF}
.ce-z-bruma{fill:#fff;opacity:.3;pointer-events:none;animation:ceBruma 7s ease-in-out infinite alternate}
@keyframes ceBruma{from{opacity:.24}to{opacity:.36}}
.ce-estelas.calma .ce-zona-e.bloqueado{opacity:1}
.ce-estelas.calma .ce-zona-e.bloqueado .ce-e-halo,.ce-estelas.calma .ce-zona-e.bloqueado .ce-e-linea{opacity:0}
.ce-estelas.calma .ce-zona-e.bloqueado:hover .ce-e-halo,.ce-estelas.calma .ce-zona-e.bloqueado:hover .ce-e-linea{opacity:.6}
.ce-bocs{position:absolute;inset:0;pointer-events:none}
.ce-bocs .ce-bocadillo{z-index:3}
@keyframes ceLate{from{transform:scale(1);opacity:.9}to{transform:scale(1.5);opacity:0}}
/* Los siete sitios de un territorio, sobre su vista de cerca */
.ce-pines{position:absolute;inset:0;z-index:2;pointer-events:none}
.ce-pin{position:absolute;translate:-23px -50%;display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;font:inherit;text-align:left;pointer-events:auto}
.ce-pin.dcha{flex-direction:row-reverse;translate:calc(-100% + 23px) -50%;text-align:right}
.ce-pin-tx{display:flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:12px;translate:0 var(--ety,0px);background:rgba(255,255,255,.93);box-shadow:0 8px 20px -10px rgba(10,20,40,.55);transition:transform .2s}
.ce-pin-tx b{font:700 14px/1.2 var(--font);color:var(--t-ink);white-space:nowrap}
.ce-pin-tx em{font:600 11.5px var(--font);font-style:normal;color:#8A6420;white-space:nowrap}
.ce-pin-tx em:empty{display:none}
.ce-pin:hover .ce-pin-tx,.ce-pin:focus-visible .ce-pin-tx{transform:translateY(-2px)}
.ce-pin:focus-visible{outline:none}
.ce-pin:focus-visible .ce-pin-tx{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-pines.ce-entrada .ce-pin{animation:ceAparece .3s ease-out both;animation-delay:calc(.25s + var(--i) * .16s)}
.ce-pines.ce-entrada .ce-pin-ic{animation:ceCae .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.25s + var(--i) * .16s)}
@media(max-width:768px){
  .ce-pin{translate:-19px -50%}.ce-pin.dcha{translate:calc(-100% + 19px) -50%}
  .ce-pin-tx{padding:4px 8px}.ce-pin-tx b{font-size:12.5px}.ce-pin-tx em{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ce-lienzo.ce-acerca,.ce-lienzo.ce-llega,.ce-lienzo.ce-aleja,.ce-lienzo.ce-vuelve,.ce-zmarca,.ce-pines.ce-entrada .ce-pin,.ce-pines.ce-entrada .ce-pin-ic,.ce-chincheta,.ce-sombra,.ce-z-bruma{animation:none}
}

/* ══ CHINCHETAS DE MÁRMOL (2026-10-07) ═══════════════════════════════════════
   Los territorios del mapa (.ce-zmarca) y los sitios de cada territorio (.ce-pin-ic) se marcan
   con chinchetas tipo mapa, en mármol: caen una a una con un pequeño rebote (con su nota),
   luego flotan despacio sobre su sombra. La punta señala el sitio. */
.ce-zmarca{position:absolute;z-index:2;width:50px;height:64px;translate:-50% -100%;pointer-events:none;transform-origin:50% 100%;
  animation:ceCae .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--desde-m,2.4s) + var(--i,0) * .38s)}
.ce-chincheta{position:absolute;left:50%;top:2px;width:42px;height:42px;margin-left:-21px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:grid;place-items:center;
  background:
    linear-gradient(118deg,transparent 37%,rgba(105,96,88,.45) 39.5%,rgba(105,96,88,.15) 41%,transparent 43%),
    linear-gradient(62deg,transparent 57%,rgba(130,120,110,.38) 59.5%,transparent 62%),
    linear-gradient(160deg,transparent 21%,rgba(150,140,130,.32) 23%,transparent 25%),
    linear-gradient(35deg,transparent 74%,rgba(160,150,140,.25) 75.5%,transparent 77%),
    radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 28%,#DDD5C7 65%,#B9AF9F 100%);
  box-shadow:inset -4px -5px 8px rgba(70,60,50,.35),inset 3px 3px 4px rgba(255,255,255,.95),0 0 0 1.5px #A69B8B,0 0 0 3px rgba(255,255,255,.75),0 8px 14px -4px rgba(30,25,20,.6);
  animation:ceFlota 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.ce-chincheta i{transform:rotate(45deg);font-size:21px;color:#2B3342;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(0,0,0,.15)}
.ce-sombra{position:absolute;left:50%;bottom:2px;width:22px;height:7px;margin-left:-11px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,15,10,.45),rgba(20,15,10,0));
  animation:ceSombra 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.ce-zmarca em{position:absolute;top:-6px;right:-4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px Georgia,serif;font-style:normal;
  color:#fff;background:#13285E;box-shadow:0 0 0 2px #fff}
@keyframes ceCae{0%{opacity:0;transform:translateY(-70px)}55%{opacity:1;transform:translateY(4px)}75%{transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes ceFlota{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes ceSombra{0%,100%{scale:1;opacity:1}50%{scale:.8;opacity:.7}}
/* Cerrado: mármol gris oscuro y candado; superado: el icono en verde; actual: un aro dorado que late en la base */
.ce-zmarca.bloqueado .ce-chincheta{background:
    linear-gradient(118deg,transparent 38%,rgba(60,60,60,.25) 40%,transparent 43%),
    radial-gradient(circle at 32% 28%,#E2E2E2 0,#B9B9B9 45%,#8F8F8F 100%)}
.ce-zmarca.bloqueado .ce-chincheta i{color:#5A6170}
.ce-zmarca.superado .ce-chincheta i,.ce-pin.hecho .ce-chincheta i{color:#0C8A4A}
.ce-zmarca.actual .ce-sombra::after,.ce-pin.abierta .ce-sombra::after{content:'';position:absolute;inset:-6px -10px;border-radius:50%;border:2px solid #FFD666;animation:ceLate 1.8s ease-out infinite}
.ce-zmarca.nego{animation:ceNego .45s}
@keyframes ceNego{20%,60%{rotate:-9deg}40%,80%{rotate:9deg}}
/* Los sitios: la chincheta y su nombre al lado */
.ce-pin{translate:-25px -100%;align-items:flex-end}
.ce-pin.dcha{translate:calc(-100% + 25px) -100%}
.ce-pin-ic{position:relative;flex-shrink:0;width:50px;height:62px;transition:scale .2s}
.ce-pin-tx{margin-bottom:22px}
.ce-pin:hover .ce-pin-ic,.ce-pin:focus-visible .ce-pin-ic{scale:1.1}
@media(max-width:768px){
  .ce-zmarca,.ce-pin-ic{width:42px;height:54px}
  .ce-chincheta{width:36px;height:36px;margin-left:-18px}
  .ce-chincheta i{font-size:17px}
  .ce-pin{translate:-21px -100%}.ce-pin.dcha{translate:calc(-100% + 21px) -100%}
  .ce-pin-tx{margin-bottom:18px}
}

/* La cabecera y «Tu viaje» juntos arriba a la izquierda (2026-10-07: «Tu viaje» iba arriba a la
   derecha y tapaba el mapa); el botón del sonido se queda solo arriba a la derecha */
.ce-arriba-izq{position:absolute;left:clamp(16px,2.6vw,34px);top:clamp(14px,2vw,24px);display:flex;align-items:flex-start;gap:10px;max-width:calc(100% - 120px)}
.ce-arriba-izq > .ce-titulo{position:relative;left:auto;top:auto;right:auto}
@media(max-width:768px){
  .ce-arriba-izq{left:10px;right:10px;top:10px;max-width:none}
  .ce-arriba-izq > .ce-titulo{flex:1;min-width:0}
}

/* El foco al señalar un territorio (2026-10-07): en vez del borde blanco, el resto del mapa se
   oscurece y el territorio queda iluminado, con el borde difuminado (máscara #ce-foco-m) */
.ce-foco{fill:#0A1530;opacity:0;pointer-events:none;transition:opacity .35s ease}
.ce-estelas.foco .ce-foco{opacity:.42}
.ce-zona-e .ce-e-halo,.ce-zona-e .ce-e-linea{display:none}
.ce-zona-e:hover .ce-e-relleno,.ce-zona-e:focus-visible .ce-e-relleno{fill-opacity:.06}
@media(prefers-reduced-motion:reduce){.ce-foco{transition:none}}

/* El bocadillo de un territorio de arriba del todo (el Olimpo) va debajo de su zona */
.ce-bocadillo.debajo{transform:translate(calc(-50% + var(--ajx,0px)),12px)}

/* Lo de encima del mapa (cabecera, «Tu viaje», sonido) queda por encima de los párpados y la niebla */
.ce-escena > .ce-nubes{z-index:3}
.ce-escena > .ce-titulo,.ce-escena > .ce-arriba-der,.ce-escena > .ce-arriba-izq{z-index:4}
/* Abrir los ojos al llegar a un territorio (2026-10-07): dos párpados oscuros, de borde curvo, se
   cierran al final del vuelo y se abren con un parpadeo cuando aparece la vista nueva */
.ce-parpados{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.ce-parpados i{position:absolute;left:-15%;width:130%;height:58%;background:#060A14;translate:0 -101%}
.ce-parpados i:first-child{top:0;border-radius:0 0 50% 50% / 0 0 38% 38%;box-shadow:0 10px 40px 20px rgba(6,10,20,.6)}
.ce-parpados i:last-child{bottom:0;translate:0 101%;border-radius:50% 50% 0 0 / 38% 38% 0 0;box-shadow:0 -10px 40px 20px rgba(6,10,20,.6)}
.ce-escena.ce-ojos-cierra .ce-parpados i:first-child{animation:cePpArribaCierra .33s ease-in forwards}
.ce-escena.ce-ojos-cierra .ce-parpados i:last-child{animation:cePpAbajoCierra .33s ease-in forwards}
.ce-escena.ce-ojos-abre .ce-parpados i:first-child{animation:cePpArribaAbre 1.3s ease-out both}
.ce-escena.ce-ojos-abre .ce-parpados i:last-child{animation:cePpAbajoAbre 1.3s ease-out both}
@keyframes cePpArribaCierra{from{translate:0 -101%}to{translate:0 0}}
@keyframes cePpAbajoCierra{from{translate:0 101%}to{translate:0 0}}
@keyframes cePpArribaAbre{0%,8%{translate:0 0}35%{translate:0 -62%}50%{translate:0 -38%}100%{translate:0 -101%}}
@keyframes cePpAbajoAbre{0%,8%{translate:0 0}35%{translate:0 62%}50%{translate:0 38%}100%{translate:0 101%}}
@media(prefers-reduced-motion:reduce){.ce-parpados{display:none}}

/* Sin nombres (botón de la etiqueta): solo las chinchetas; el nombre sale al pasar por encima o
   con el foco */
.ce-pin-tx{transition:opacity .2s,transform .2s}
.ce-escena.sin-nombres .ce-pin-tx{opacity:0;transform:translateY(4px) scale(.96);pointer-events:none}
/* La cabecera es una caja que abarca sus tarjetas: el hueco transparente de debajo de la más baja
   tapaba, sin verse, las chinchetas y etiquetas de detrás (no se podían pulsar). Solo las tarjetas
   reciben el toque. */
.ce-arriba-izq,.ce-arriba-der{pointer-events:none}
.ce-arriba-izq > *,.ce-arriba-der > *{pointer-events:auto}
.ce-escena:has(.ce-hoja-caja.izq) > .ce-arriba-izq > *{pointer-events:none}
/* «Tu viaje» se aparta si tapa una chincheta del territorio (CentroEntrenamiento._despejarEtiquetas).
   Con !important porque su animación de entrada (ceTitulo) deja fijadas la opacidad y la visibilidad */
.ce-progreso{transition:opacity .3s,visibility .3s}
.ce-escena.ce-prog-tapa:not(.en-mundo) .ce-progreso{opacity:0!important;visibility:hidden!important}
/* Solo la chincheta y la etiqueta reciben el toque: el resto del botón (el hueco entre las dos y lo
   de encima de la etiqueta) es transparente y tapaba la etiqueta o la chincheta de al lado */
.ce-pin{pointer-events:none}
.ce-pin-ic,.ce-escena:not(.sin-nombres) .ce-pin-tx{pointer-events:auto}
.ce-escena.sin-nombres .ce-pin:hover .ce-pin-tx,.ce-escena.sin-nombres .ce-pin:focus-visible .ce-pin-tx{opacity:1;transform:none}
.ce-arriba-der{gap:8px}

/* ══ LA ESTELA DE MÁRMOL (2026-10-07) ═══════════════════════════════════════════
   Las hojas del Centro (sitios, lecciones, puerta, prueba) dejan de ser un panel crema y pasan
   a ser una estela de mármol con el remate en arco, del mismo mundo que la ilustración. La de
   un sitio lleva arriba una ventana a su trozo de la escena (con un leve paneo y motas de luz),
   una greca y el emblema del sitio, que cae como un sello. Cada sitio tiene su color (--ac):
   Templo azul egeo, Arena terracota, Biblioteca papiro, Anfiteatro adelfa, Oráculo violeta
   (con humo), Puerta bronce, Ágora turquesa. Mientras está abierta, la cámara se acerca a la
   chincheta (.ce-mirando, _mirar en app.js), que se queda iluminada. Títulos en Cinzel
   (assets/centro/cinzel-latin.woff2, licencia OFL), mayúsculas de inscripción. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/centro/cinzel-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ce{--marmol:#FBF8F2;--veta:rgba(150,138,120,.13);--piedra:#E4DBCB;--tinta:#26303F;--ac:#1F8A8A}
.ce-s-agora{--ac:#17858A}
.ce-s-templo{--ac:#2C67AE}
.ce-s-arena{--ac:#C25A34}
.ce-s-biblioteca{--ac:#9A7124}
.ce-s-anfiteatro{--ac:#B83E5C}
.ce-s-oraculo{--ac:#6A55A8}
.ce-s-puerta{--ac:#A87A22}
/* La escena se acerca a la chincheta y el velo deja un círculo de luz sobre ella */
.ce-vista{transition:scale .9s cubic-bezier(.3,.7,.2,1),translate .9s cubic-bezier(.3,.7,.2,1),transform-origin .9s cubic-bezier(.3,.7,.2,1)}
.ce-escena.ce-mirando .ce-vista{scale:1.12;translate:var(--miradx,0) var(--mirady,0);transform-origin:var(--mirax,50%) var(--miray,50%)}
/* Con la estela a la izquierda, la cabecera (que quedaría asomando detrás) se aparta */
.ce-escena:has(.ce-hoja-caja.izq) > .ce-arriba-izq{opacity:0;pointer-events:none;transition:opacity .3s}
.ce-escena.ce-mirando .ce-pin:not(.elegido){opacity:.35;transition:opacity .4s}
.ce-pin.elegido .ce-pin-ic{scale:1.15}
.ce-pin.elegido .ce-sombra::after{content:'';position:absolute;inset:-6px -10px;border-radius:50%;border:2px solid #FFE08A;animation:ceLate 1.8s ease-out infinite}
.ce-hoja-velo{background:rgba(10,20,45,.3)}
.ce-escena.ce-mirando .ce-hoja-velo{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(10,20,45,0) 0 60px,rgba(10,20,45,.14) 120px,rgba(10,20,45,.5) 420px)}
/* La estela */
.ce-hoja-caja{top:14px;right:18px;bottom:14px;width:min(500px,calc(100% - 36px));padding:30px 28px 24px;color:var(--tinta);
  border-radius:250px 250px 20px 20px / 130px 130px 20px 20px;
  background:
    radial-gradient(60% 18% at 80% 34%,rgba(170,155,135,.07),transparent 70%),
    radial-gradient(45% 12% at 20% 62%,rgba(170,155,135,.06),transparent 70%),
    radial-gradient(70% 14% at 65% 88%,rgba(170,155,135,.06),transparent 70%),
    radial-gradient(130% 50% at 15% 0%,#fff,transparent 70%),
    linear-gradient(170deg,#FDFBF7,#F3EDE2 70%,#EEE6D8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px #D7CCB8,0 0 0 6px #F4EFE6,0 0 0 7px #CBBFA8,0 34px 70px -24px rgba(10,20,45,.6);
  animation:ceEstelaSube .55s cubic-bezier(.2,.9,.25,1) both}
.ce-hoja-caja.izq{right:auto;left:18px}
.ce-hoja-caja.con-ventana{padding-top:0}
@keyframes ceEstelaSube{from{opacity:0;transform:translateY(46px) scale(.97)}}
.ce-hoja-caja.ce-hoja-centro{border-radius:220px 220px 20px 20px / 80px 80px 20px 20px;padding-top:34px;animation:ceHojaCentro .5s cubic-bezier(.2,.9,.25,1) both}
/* La ventana al sitio, con el mismo arco */
.ce-ventana{position:relative;height:178px;margin:0 -28px;overflow:hidden;border-radius:250px 250px 0 0 / 130px 130px 0 0;background:#9CC8EA;
  box-shadow:inset 0 -18px 30px -18px rgba(20,15,10,.45)}
.ce-ventana img{position:absolute;left:50%;top:50%;width:290%;max-width:none;height:auto;translate:calc(-1 * var(--px)) calc(-1 * var(--py));
  transform-origin:var(--px) var(--py);animation:ceVentana 9s ease-out both}
@keyframes ceVentana{from{transform:scale(1.18);filter:saturate(.7) brightness(1.15)}30%{filter:none}to{transform:scale(1)}}
.ce-baja .ce-ventana{height:116px}
.ce-ventana::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,200,.25),transparent 40%),radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(30,20,10,.18))}
/* Motas de luz que flotan en el aire del sitio */
.ce-motas{position:absolute;inset:0;pointer-events:none}
.ce-motas i{position:absolute;bottom:-8px;width:5px;height:5px;border-radius:50%;background:#FFF4CF;box-shadow:0 0 8px 2px rgba(255,230,160,.8);opacity:0;
  animation:ceMota 7s linear infinite}
.ce-motas i:nth-child(1){left:12%;animation-delay:.2s}.ce-motas i:nth-child(2){left:27%;animation-delay:2.6s;scale:.7}
.ce-motas i:nth-child(3){left:41%;animation-delay:4.8s}.ce-motas i:nth-child(4){left:56%;animation-delay:1.3s;scale:.6}
.ce-motas i:nth-child(5){left:68%;animation-delay:3.7s}.ce-motas i:nth-child(6){left:81%;animation-delay:5.9s;scale:.8}
.ce-motas i:nth-child(7){left:91%;animation-delay:.9s;scale:.6}
@keyframes ceMota{0%{opacity:0;translate:0 0}15%{opacity:.9}70%{opacity:.6}100%{opacity:0;translate:14px -190px}}
/* El Oráculo: humo de incienso en vez de motas */
.ce-s-oraculo .ce-motas i{width:70px;height:70px;margin-left:-35px;background:radial-gradient(closest-side,rgba(235,225,255,.55),rgba(235,225,255,0));box-shadow:none;
  animation:ceHumo 8s ease-in infinite}
@keyframes ceHumo{0%{opacity:0;translate:0 0;scale:.5}25%{opacity:.8}100%{opacity:0;translate:-20px -200px;scale:2.2}}
/* El Templo: rayos de luz que entran entre las columnas */
.ce-s-templo .ce-ventana::before{content:'';position:absolute;inset:-40% -10%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-linear-gradient(105deg,rgba(255,245,210,0) 0 38px,rgba(255,245,210,.32) 50px,rgba(255,245,210,0) 66px);animation:ceRayos 12s ease-in-out infinite alternate}
@keyframes ceRayos{from{translate:-30px 0}to{translate:30px 0}}
/* La greca, en el color del sitio */
.ce-greca{height:14px;margin:0 -28px;background:var(--ac);opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M0 .9H16M0 13.1H16M3 13.1V3.6H12V10H6.5V6.6H9' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center/16px 14px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M0 .9H16M0 13.1H16M3 13.1V3.6H12V10H6.5V6.6H9' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center/16px 14px}
/* El emblema del sitio: un disco de mármol que cae como un sello sobre la greca */
.ce-emblema{position:relative;z-index:2;display:grid;place-items:center;width:62px;height:62px;margin:-38px auto 6px;border-radius:50%;
  background:
    linear-gradient(118deg,transparent 37%,rgba(105,96,88,.35) 39.5%,transparent 42%),
    linear-gradient(55deg,transparent 60%,rgba(130,120,110,.28) 62%,transparent 64%),
    radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 30%,#DDD5C7 68%,#B9AF9F 100%);
  box-shadow:inset -4px -5px 9px rgba(70,60,50,.3),inset 3px 3px 5px #fff,0 0 0 2px var(--ac),0 0 0 6px #FBF8F2,0 10px 18px -6px rgba(30,25,20,.55);
  animation:ceEmblema .7s .25s cubic-bezier(.3,1.4,.5,1) both}
.ce-emblema i{font-size:28px;color:var(--ac);filter:drop-shadow(0 1px 0 #fff)}
@keyframes ceEmblema{from{opacity:0;transform:translateY(-36px) scale(1.5)}60%{opacity:1}}
/* Los botones de encima de la ventana: mármol */
.ce-hoja-x{top:14px;right:16px;border:0;background:rgba(251,248,242,.92);color:var(--tinta);box-shadow:0 0 0 1px #D7CCB8,0 6px 14px -6px rgba(20,15,10,.5)}
.ce-hoja-caja.con-ventana .ce-hoja-x{top:84px;right:20px}
.ce-hoja-caja:not(.con-ventana):not(.ce-hoja-centro) .ce-hoja-x{top:40px;right:26px}
.ce-hoja-caja.con-ventana .ce-volver{position:absolute;top:88px;left:20px;z-index:2;margin:0;padding:6px 12px;border-radius:999px;background:rgba(251,248,242,.92);
  box-shadow:0 0 0 1px #D7CCB8,0 6px 14px -6px rgba(20,15,10,.5);color:var(--tinta);font-size:12.5px;max-width:calc(50% - 30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce-hoja-caja.ce-baja.con-ventana .ce-hoja-x{top:44px}
.ce-hoja-caja.ce-baja.con-ventana .ce-volver{top:48px}
/* La inscripción: centrada, en Cinzel, como grabada */
.ce-hoja-caja.con-ventana .ce-hoja-cab{padding-right:0;text-align:center;margin-bottom:18px}
.ce-hoja-caja .ce-hoja-cab h2,.ce-hoja-caja .ce-mision h2{font:600 27px/1.15 'Cinzel',Georgia,serif;color:var(--tinta);letter-spacing:.01em;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.06)}
.ce-hoja-caja .ce-nivel h2{font-size:29px}
.ce-hoja-caja .ce-hoja-cab h3{font:italic 500 16.5px/1.35 Georgia,serif;color:var(--ac)}
.ce-hoja-caja .ce-hoja-cab p{color:#4A4F5A}
.ce-hoja-caja.con-ventana .ce-hoja-cab p{max-width:40ch;margin-left:auto;margin-right:auto}
.ce-hoja-caja .ce-cinta{padding:0;border:0;background:none;gap:7px;font:600 12px 'Cinzel',Georgia,serif;letter-spacing:.12em;text-transform:none;color:var(--ac)}
.ce-hoja-caja .ce-cinta::before,.ce-hoja-caja .ce-cinta::after{content:'';width:22px;height:1px;background:currentColor;opacity:.5}
.ce-hoja-caja .ce-cinta i{font-size:15px}
.ce-mini-prog{max-width:300px;margin:12px auto 0;color:var(--ac)}
.ce-mini-prog span{background:var(--piedra);box-shadow:inset 0 1px 2px rgba(60,45,20,.18)}
.ce-mini-prog i{background:var(--ac)}
/* Las listas: losas grabadas, no tarjetas */
.ce-esps,.ce-acts,.ce-terr{gap:0;border-top:1px solid var(--piedra);box-shadow:inset 0 1px 0 #fff}
.ce-esps li,.ce-acts li,.ce-terr li{animation:ceLosa .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--n,0) * .06s)}
@keyframes ceLosa{from{opacity:0;transform:translateY(10px)}}
.ce-terr-it,.ce-esp,.ce-act{border:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--piedra),0 1px 0 #fff;padding:13px 8px;transition:background .2s}
.ce-terr-it:hover:not(:disabled),.ce-esp:hover,.ce-act:hover{transform:none;background:color-mix(in srgb,var(--ac) 7%,transparent)}
.ce-terr-tx b,.ce-esp-tx b,.ce-act-tx b{font:600 16px/1.25 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-terr-tx em,.ce-esp-tx em{color:var(--ac)}
/* La medalla: un disco de mármol con el número romano grabado en el color del sitio */
.ce-med{width:42px;height:42px;font:700 15px 'Cinzel',Georgia,serif;color:var(--ac);text-shadow:0 1px 0 #fff;
  background:radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 34%,#DCD3C3 75%,#BEB3A2 100%);
  box-shadow:inset -3px -4px 7px rgba(70,60,50,.25),inset 2px 2px 3px #fff,0 0 0 1.5px color-mix(in srgb,var(--ac) 55%,#fff),0 3px 8px -2px rgba(40,30,20,.35)}
.ce-terr-it.bloqueado .ce-med{background:radial-gradient(circle at 32% 28%,#F2F2F2,#BDBDBD);color:#777;box-shadow:inset -3px -4px 7px rgba(0,0,0,.15)}
.ce-esp-ic,.ce-terr-est{width:36px;height:36px;border:0;background:color-mix(in srgb,var(--ac) 12%,#fff);color:var(--ac)}
/* El icono de cada actividad: un óstrakon (trozo de vasija) en el color del sitio */
.ce-act-ic{width:42px;height:40px;border-radius:46% 54% 40% 60% / 58% 42% 58% 42%;font-size:19px;color:var(--ac);background:color-mix(in srgb,var(--ac) 13%,#FFF8EC);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ac) 22%,transparent)}
.ce-act.hecho .ce-act-ic{color:#2F8A4F;background:#E7F4EA}
.ce-act-btn{border-radius:10px;padding:7px 13px;background:var(--ac);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 color-mix(in srgb,var(--ac) 65%,#000)}
.ce-act:hover .ce-act-btn{translate:0 -1px}
.ce-act.hecho .ce-act-btn{background:none;color:var(--ac);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ac) 45%,#fff)}
/* Ficha: maestro e insignia como relieves */
.ce-chip{background:rgba(255,255,255,.55);border:1px solid var(--piedra);border-radius:14px}
.ce-chip b{font:600 15px/1.25 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-chip-ins em{color:var(--ac)}
.ce-ciclo{background:rgba(255,255,255,.45);border:1px dashed color-mix(in srgb,var(--ac) 35%,var(--piedra))}
.ce-ciclo i,.ce-ciclo em{color:var(--ac)}
/* El botón principal: una placa en el color del sitio */
.ce-hoja-caja .ce-cta{border:0;border-radius:14px;font:700 15px 'Cinzel',Georgia,serif;letter-spacing:.05em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 80%,#fff),var(--ac) 50%,color-mix(in srgb,var(--ac) 80%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 color-mix(in srgb,var(--ac) 60%,#000),0 14px 24px -12px color-mix(in srgb,var(--ac) 80%,#000)}
.ce-hoja-caja .ce-cta:active{translate:0 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.ce-hecho-msg{background:#E7F4EA;border-radius:12px}
/* La lección: letra capital y la pregunta en una tablilla hundida en la piedra */
.ce-leccion > p:first-child::first-letter{float:left;margin:4px 8px 0 0;font:700 46px/.8 'Cinzel',Georgia,serif;color:var(--ac)}
.ce-preg{background:#F3EDE2;border:0;border-radius:14px;box-shadow:inset 0 2px 7px rgba(80,60,30,.16),0 1px 0 #fff}
.ce-preg legend span{background:#fff;color:var(--ac);font-family:'Cinzel',Georgia,serif}
.ce-preg legend,.ce-preg > b{color:var(--tinta)}
.ce-op{background:#FDFBF7;border:1px solid var(--piedra);box-shadow:0 2px 0 var(--piedra);transition:translate .15s,border-color .15s}
.ce-op:hover:not(:disabled){border-color:var(--ac);translate:0 -1px}
.ce-op:has(input:checked){border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,#fff)}
.ce-op input{accent-color:var(--ac)}
.ce-op.ok{border-color:#3E9B5E;background:#E7F4EA;color:#1F6B3A;animation:ceLaurel .5s ease-out}
.ce-op.ok::after{content:'✓';margin-left:auto;font:700 17px Georgia,serif}
.ce-op.mal{border-color:#C25A34;background:#FBEDE6;color:#8C3517;animation:ceNego .4s}
@keyframes ceLaurel{40%{scale:1.03}}
.ce-expl{background:#fff;border-left:3px solid var(--ac);border-radius:4px 12px 12px 4px}
/* El pergamino (Biblioteca) es papiro; el oráculo, una voz entre humo */
.ce-perg{border:0;border-radius:6px;background:
    repeating-linear-gradient(90deg,rgba(150,110,40,.05) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(0deg,rgba(150,110,40,.04) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#F7EBCB,#EFDDB1);
  box-shadow:inset 8px 0 10px -8px rgba(110,75,20,.45),inset -8px 0 10px -8px rgba(110,75,20,.45),0 6px 14px -10px rgba(80,55,10,.5)}
.ce-perg b{font-family:'Cinzel',Georgia,serif;color:#5B4214}
.ce-perg ul,.ce-perg ol{color:#4A3A1C}
.ce-oraculo{position:relative;border:0;border-radius:18px;color:var(--tinta);
  background:radial-gradient(90% 120% at 50% 100%,color-mix(in srgb,var(--ac) 16%,#fff),#fff 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 25%,#fff)}
.ce-oraculo::before{content:'“';display:block;font:700 54px/.6 Georgia,serif;color:var(--ac);opacity:.5;margin-bottom:6px}
/* Misión y resultados (la estela sin ventana): el sello en mármol */
.ce-sello{background:radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 30%,#DDD5C7 68%,#B9AF9F 100%);color:#2C67AE;
  box-shadow:inset -4px -5px 9px rgba(70,60,50,.3),inset 3px 3px 5px #fff,0 0 0 2px #2C67AE,0 0 0 6px #FBF8F2,0 10px 20px -6px rgba(30,25,20,.5)}
.ce-sello-gris{color:#6B7280;box-shadow:inset -4px -5px 9px rgba(70,60,50,.3),inset 3px 3px 5px #fff,0 0 0 2px #9CA3AF,0 0 0 6px #FBF8F2}
.ce-pasos li{background:rgba(255,255,255,.6);border-color:var(--piedra)}
.ce-pasos b{font-family:'Cinzel',Georgia,serif;font-weight:600;color:var(--tinta)}
.ce-hoja-centro{--ac:#2C67AE}
.ce-victoria{--ac:#A87A22}
@media(max-width:768px){
  .ce-hoja-caja,.ce-hoja-caja.izq{top:8px;right:8px;bottom:8px;left:8px;width:auto;padding:24px 16px 18px;border-radius:180px 180px 18px 18px / 64px 64px 18px 18px}
  .ce-hoja-caja.con-ventana{padding-top:0}
  .ce-ventana,.ce-greca{margin:0 -16px}
  .ce-ventana{height:150px;border-radius:180px 180px 0 0 / 64px 64px 0 0}
  .ce-baja .ce-ventana{height:104px}
  .ce-hoja-caja.con-ventana .ce-volver{top:44px;left:14px}
  .ce-hoja-caja.con-ventana .ce-hoja-x{top:40px;right:14px}
  .ce-hoja-caja.ce-baja.con-ventana .ce-volver{top:34px}.ce-hoja-caja.ce-baja.con-ventana .ce-hoja-x{top:30px}
  .ce-hoja-caja .ce-hoja-cab h2{font-size:23px}
  .ce-emblema{width:54px;height:54px;margin-top:-34px}.ce-emblema i{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .ce-vista{transition:none}
  .ce-ventana img,.ce-motas,.ce-emblema,.ce-esps li,.ce-acts li,.ce-terr li,.ce-s-templo .ce-ventana::before,.ce-op.ok,.ce-op.mal{animation:none}
  .ce-motas{display:none}
}
.ce-expl[hidden]{display:none}
.ce-perg b{font:italic 600 15.5px/1.35 Georgia,serif}
/* La escena ya recorta: la vista no, para que al acercarse a una chincheta (se escala y se mueve
   la vista entera) no se destape el fondo por un lado */
@media(min-width:769px){.ce-vista{overflow:visible}}
.ce-hoja-caja.ce-hoja-centro .ce-hoja-x{top:64px;right:34px}
/* «Mapa» va arriba a la derecha, junto a etiquetas y sonido (2026-10-07: en la cabecera quedaba
   pegado a la cita de Cicerón); la cita baja un poco para no rozar la cabecera */
.ce-sonido.ce-btn-mapa{width:auto;padding:0 18px 0 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font:700 15px var(--font);color:var(--t-ink)}
.ce-sonido.ce-btn-mapa i{font-size:20px}
.ce-arriba-der .ce-solo-terr{animation:ceTitulo .5s ease-out .3s both}

/* ══ EL MAESTRO Y LA CELEBRACIÓN (2026-10-07) ═══════════════════════════════════
   _saludo, _siguiente y _celebrar en app.js. (El camino dorado del mapa se quitó el 2026-10-08.) */

@keyframes ceSigBota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* El maestro te recibe: abajo a la izquierda, con su retrato y una frase suya */
.ce-saludo{position:absolute;left:clamp(16px,2.6vw,34px);bottom:clamp(16px,2.6vw,30px);z-index:5;display:flex;align-items:flex-start;gap:12px;width:min(420px,calc(100% - 120px));
  padding:14px 40px 14px 14px;border-radius:20px 20px 20px 6px;background:rgba(251,248,242,.96);color:#26303F;backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px #D7CCB8,0 0 0 5px rgba(251,248,242,.6),0 22px 44px -18px rgba(10,20,45,.6);animation:ceSaludo .6s .9s cubic-bezier(.2,1.2,.3,1) both}
.ce-saludo.ce-sal-va{animation:ceSaludoVa .35s ease-in forwards}
@keyframes ceSaludo{from{opacity:0;transform:translateY(24px) scale(.95)}}
@keyframes ceSaludoVa{to{opacity:0;transform:translateY(16px)}}
.ce-saludo .ce-maestro-ret{width:54px;height:54px;background:radial-gradient(circle at 32% 28%,#fff,#E6DED0);box-shadow:0 0 0 2px #CBBFA8}
.ce-saludo .ce-maestro-ret svg{width:52px;height:52px}
.ce-sal-tx{min-width:0}
.ce-sal-tx small{font:600 13px 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#8A6420}
.ce-sal-tx p{margin:3px 0 0;font:italic 500 15px/1.4 Georgia,serif}
.ce-sal-tx .ce-sal-paso{margin-top:7px;font:500 13.5px/1.4 var(--font);font-style:normal;color:#4A4F5A}
.ce-sal-ir{margin-top:9px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#FFE7A0,#F2C14E);color:#5B3D0C;font:800 13px var(--font);box-shadow:0 3px 0 #C99A2A}
.ce-sal-ir:active{translate:0 2px;box-shadow:0 1px 0 #C99A2A}
.ce-sal-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:none;color:#6B7280;cursor:pointer;display:grid;place-items:center;font-size:15px}
.ce-sal-x:hover{background:rgba(0,0,0,.06)}
.ce-sal-ir:focus-visible,.ce-sal-x:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
@media(max-width:768px){
  .ce-saludo{left:10px;right:10px;bottom:62px;width:auto;padding:11px 36px 11px 11px;gap:10px}
  .ce-saludo .ce-maestro-ret{width:44px;height:44px}.ce-saludo .ce-maestro-ret svg{width:42px;height:42px}
  .ce-sal-tx p{font-size:14px}
}

/* La celebración: corona de laurel que se dibuja hoja a hoja, el icono del sitio y hojas que caen */
.ce-fiesta{position:absolute;inset:0;z-index:7;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,rgba(10,20,45,.25),rgba(10,20,45,0) 60%);
  animation:ceAparece .3s both}
.ce-fiesta.ce-fi-va{animation:ceSaludoVa .45s ease-in forwards}
.ce-fi-caja{position:relative;display:grid;justify-items:center;text-align:center;padding:26px 34px 22px;border-radius:24px;
  background:rgba(251,248,242,.97);box-shadow:0 0 0 1px #D7CCB8,0 0 0 6px rgba(251,248,242,.6),0 30px 60px -20px rgba(10,20,45,.65);animation:ceFiCaja .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes ceFiCaja{from{opacity:0;transform:scale(.7)}}
.ce-corona{width:120px;height:120px}
.ce-hoja-l{fill:var(--ac);opacity:0;animation:ceHojaL .35s var(--d) ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes ceHojaL{from{opacity:0;scale:.2}to{opacity:.9;scale:1}}
.ce-fi-ic{position:absolute;top:86px;left:50%;translate:-50% -50%;font-size:40px;color:var(--ac);animation:ceEmblema .6s .5s cubic-bezier(.3,1.4,.5,1) both}
.ce-fi-caja b{margin-top:4px;font:600 22px/1.2 'Cinzel',Georgia,serif;color:#26303F}
.ce-fi-caja small{margin-top:4px;font:italic 500 15px Georgia,serif;color:var(--ac)}
.ce-fi-caen{position:absolute;inset:0;overflow:hidden}
.ce-fi-caen i{position:absolute;top:-20px;width:14px;height:6px;border-radius:50%;background:#7FA65A;opacity:.85;animation:ceCae2 2.6s ease-in forwards}
.ce-fi-caen i:nth-child(odd){background:#E7C35A}
.ce-fi-caen i:nth-child(1){left:8%;animation-delay:.1s}.ce-fi-caen i:nth-child(2){left:15%;animation-delay:.5s}.ce-fi-caen i:nth-child(3){left:22%;animation-delay:.2s}
.ce-fi-caen i:nth-child(4){left:30%;animation-delay:.7s}.ce-fi-caen i:nth-child(5){left:37%;animation-delay:.3s}.ce-fi-caen i:nth-child(6){left:44%;animation-delay:.9s}
.ce-fi-caen i:nth-child(7){left:51%;animation-delay:.15s}.ce-fi-caen i:nth-child(8){left:58%;animation-delay:.6s}.ce-fi-caen i:nth-child(9){left:65%;animation-delay:.35s}
.ce-fi-caen i:nth-child(10){left:72%;animation-delay:.8s}.ce-fi-caen i:nth-child(11){left:79%;animation-delay:.25s}.ce-fi-caen i:nth-child(12){left:86%;animation-delay:.55s}
.ce-fi-caen i:nth-child(13){left:92%;animation-delay:.05s}.ce-fi-caen i:nth-child(14){left:4%;animation-delay:.45s}
@keyframes ceCae2{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(40px,105cqh) rotate(540deg);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ce-saludo,.ce-fi-caja,.ce-fi-ic{animation:none}
  .ce-hoja-l{animation:none;opacity:.9}.ce-fi-caen{display:none}
}
@keyframes ceAparece{from{opacity:0}}

/* ══ LA HORA DEL DÍA Y LA VIDA DE LA ESCENA (2026-10-07) ═════════════════════════
   _momento en app.js pone .ce-hora-alba/dia/tarde/noche en la escena. La capa .ce-luz va
   encima de la ilustración (dentro del lienzo, así se acerca con ella) y debajo de las zonas y
   las chinchetas, que no cambian. De día cruzan gaviotas; de noche hay estrellas y luciérnagas. */
.ce-luz,.ce-vida{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ce-luz{opacity:0;transition:opacity 1.2s}
.ce-hora-alba .ce-luz{opacity:1;mix-blend-mode:multiply;background:linear-gradient(100deg,rgba(255,190,205,.6),rgba(255,215,190,.45) 50%,rgba(215,205,255,.45))}
.ce-hora-tarde .ce-luz{opacity:1;mix-blend-mode:multiply;background:radial-gradient(130% 100% at 85% 0%,rgba(255,215,150,.55),rgba(255,170,110,.5) 50%,rgba(200,120,140,.5))}
.ce-hora-tarde .ce-estrellas{opacity:0}
.ce-hora-tarde .ce-luz::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(60% 50% at 88% 6%,rgba(255,200,120,.45),transparent 70%)}
.ce-hora-noche .ce-luz{opacity:1;mix-blend-mode:multiply;background:linear-gradient(180deg,rgba(40,55,130,.78),rgba(55,70,140,.62) 60%,rgba(70,80,150,.55))}
.ce-escena.ce-hora-noche{background:linear-gradient(#0E1A3D,#2B3F78)}
.ce-escena.ce-hora-tarde{background:linear-gradient(#D98E6E,#E9B595)}
.ce-escena.ce-hora-alba{background:linear-gradient(#C9A6C9,#E8C3CC)}
/* Las estrellas: solo en el cielo (arriba) y de noche; titilan */
.ce-estrellas{position:absolute;left:0;right:0;top:0;height:26%;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(1.5px 1.5px at 12% 30%,#fff,transparent),radial-gradient(1px 1px at 22% 62%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 34% 18%,#fff,transparent),radial-gradient(1px 1px at 47% 44%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 58% 12%,#fff,transparent),radial-gradient(1px 1px at 66% 52%,#fff,transparent),
    radial-gradient(1.7px 1.7px at 77% 26%,#fff,transparent),radial-gradient(1px 1px at 88% 58%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 94% 16%,#fff,transparent),radial-gradient(1px 1px at 6% 70%,#fff,transparent);
  -webkit-mask:linear-gradient(#000 40%,transparent);mask:linear-gradient(#000 40%,transparent)}
.ce-hora-noche .ce-estrellas{opacity:1;animation:ceTitila 4s ease-in-out infinite alternate}
@keyframes ceTitila{from{opacity:.55}to{opacity:1}}
/* Las gaviotas: una «m» con alas que baten, cruzando despacio por arriba */
.ce-gaviota{position:absolute;left:-6%;top:12%;width:22px;height:10px;opacity:0;animation:ceVuela 46s linear infinite}
.ce-gaviota:nth-child(2){top:20%;scale:.75;animation-duration:58s;animation-delay:-20s}
.ce-gaviota:nth-child(3){top:9%;scale:.6;animation-duration:64s;animation-delay:-41s}
.ce-gaviota i{position:absolute;inset:0;animation:ceAla .55s ease-in-out infinite alternate}
.ce-gaviota i::before,.ce-gaviota i::after{content:'';position:absolute;top:0;width:11px;height:7px;border-top:2.2px solid #3A4250;border-radius:60% 60% 0 0}
.ce-gaviota i::before{left:0;rotate:12deg}.ce-gaviota i::after{right:0;rotate:-12deg}
@keyframes ceVuela{0%{opacity:0;translate:0 0}4%{opacity:.85}50%{translate:56cqw 26px}96%{opacity:.85}100%{opacity:0;translate:112cqw -10px}}
@keyframes ceAla{from{scale:1 1}to{scale:1 .35}}
.ce-hora-noche .ce-gaviota,.ce-hora-alba .ce-gaviota:nth-child(3){display:none}
/* Las luciérnagas, solo de noche: puntos de luz que flotan y se encienden y apagan */
.ce-luciernaga{position:absolute;width:5px;height:5px;border-radius:50%;background:#F7FFB0;box-shadow:0 0 10px 3px rgba(230,255,120,.75);display:none;
  animation:ceLuci 6s ease-in-out infinite}
.ce-hora-noche .ce-luciernaga{display:block}
.ce-luciernaga:nth-child(4){left:12%;top:72%;animation-delay:-1s}.ce-luciernaga:nth-child(5){left:24%;top:58%;animation-delay:-3s}
.ce-luciernaga:nth-child(6){left:31%;top:82%;animation-delay:-4.5s}.ce-luciernaga:nth-child(7){left:43%;top:66%;animation-delay:-2s}
.ce-luciernaga:nth-child(8){left:52%;top:88%;animation-delay:-5s}.ce-luciernaga:nth-child(9){left:61%;top:62%;animation-delay:-.5s}
.ce-luciernaga:nth-child(10){left:69%;top:76%;animation-delay:-3.6s}.ce-luciernaga:nth-child(11){left:78%;top:55%;animation-delay:-2.7s}
.ce-luciernaga:nth-child(12){left:86%;top:80%;animation-delay:-1.8s}.ce-luciernaga:nth-child(13){left:92%;top:64%;animation-delay:-4s}
.ce-luciernaga:nth-child(14){left:6%;top:86%;animation-delay:-5.5s}.ce-luciernaga:nth-child(15){left:37%;top:50%;animation-delay:-.9s}
@keyframes ceLuci{0%,100%{opacity:0;translate:0 0}20%{opacity:1}50%{opacity:.3;translate:14px -18px}75%{opacity:1;translate:-8px -30px}}
/* La puerta cerrada: cinco gemas, una por espacio */
.ce-gemas{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}
.ce-gemas i{width:7px;height:7px;rotate:45deg;border-radius:1.5px;background:#D9D2C4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ce-gemas i.si{background:linear-gradient(135deg,#FFE9A0,#E0A526);box-shadow:0 0 6px rgba(240,180,40,.8)}
/* «Estás aquí» encima de la chincheta del territorio en el que estás */
.ce-zmarca.actual::before{content:'Estás aquí';position:absolute;left:50%;bottom:100%;margin-bottom:6px;translate:-50% 0;white-space:nowrap;padding:3px 9px 4px;border-radius:8px;
  background:#13285E;color:#fff;font:800 11px var(--font);box-shadow:0 0 0 1.5px #fff,0 6px 14px -4px rgba(10,20,50,.6);animation:ceSigBota 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ce-gaviota,.ce-gaviota i,.ce-luciernaga,.ce-estrellas,.ce-zmarca.actual::before{animation:none}.ce-gaviota{display:none}}

/* ══ LA PRUEBA, UNA PREGUNTA CADA VEZ (2026-10-07) ═══════════════════════════════
   Una fila de columnas (una por pregunta) que se levantan al responder; la actual brilla. */
.ce-cols{display:flex;justify-content:center;align-items:flex-end;gap:7px;height:46px;margin:2px 0 14px}
.ce-cols i{position:relative;width:14px;height:16px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,#DDD5C7,#F4F0E8 45%,#CFC6B6);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);transition:height .45s cubic-bezier(.3,1.5,.5,1),background .3s}
.ce-cols i::before{content:'';position:absolute;left:-3px;right:-3px;top:-4px;height:4px;border-radius:2px;background:#E4DBCB}
.ce-cols i.si{height:40px;background:linear-gradient(90deg,#E7C35A,#FFF0BE 45%,#C99A2A)}
.ce-cols i.si::before{background:#D9AE3E}
.ce-cols i.aqui{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ac)}
.ce-prueba fieldset.ce-preg{display:none}
.ce-prueba fieldset.ce-preg.actual{display:block;animation:ceLosa .35s cubic-bezier(.2,.8,.2,1) both}
.ce-pr-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.ce-pr-cuenta{font:600 13px 'Cinzel',Georgia,serif;color:var(--ac)}
.ce-pr-atras,.ce-pr-sig{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border:0;border-radius:10px;background:none;color:var(--tinta);font:700 13px var(--font);cursor:pointer}
.ce-pr-atras:hover:not(:disabled),.ce-pr-sig:hover:not(:disabled){background:rgba(0,0,0,.05)}
.ce-pr-atras:disabled,.ce-pr-sig:disabled{opacity:.3;cursor:default}
.ce-prueba .ce-cta[hidden]{display:none}
.ce-prueba .ce-cta:not([hidden]){animation:ceEmblema .5s cubic-bezier(.3,1.4,.5,1) both}
@media(prefers-reduced-motion:reduce){.ce-cols i{transition:none}.ce-prueba fieldset.ce-preg.actual,.ce-prueba .ce-cta:not([hidden]){animation:none}}
/* La escena no se desplaza nunca por sí sola (al enfocar algo dentro, el navegador la movía de
   lado porque la vista acercada sobresale) */
.ce-escena{overflow:clip}
.ce-hoja-caja.ce-baja.con-ventana .ce-hoja-x{top:66px}
.ce-hoja-caja.ce-baja.con-ventana .ce-volver{top:70px}

/* ══ TU CUADERNO DE ORADOR (2026-10-07) ══════════════════════════════════════════
   CentroEntrenamiento.cuaderno(): lo aprendido, por territorio, en la estela. Las ideas van
   escritas a mano (Caveat) sobre renglones, como apuntes de verdad. */
.ce-cuad-n{min-width:19px;height:19px;padding:0 5px;margin-left:2px;border-radius:999px;display:inline-grid;place-items:center;background:#F2C14E;color:#5B3D0C;font:800 11px var(--font)}
.ce-cuad-n[hidden]{display:none}
.ce-cuaderno{--ac:#9A7124}
.ce-cuad-cab{text-align:center;padding-right:0 !important}
.ce-cap{margin-top:18px}
.ce-cap h3{display:flex;align-items:center;gap:11px;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--piedra);font-style:normal !important}
.ce-cap h3 > span:last-child{display:flex;flex-direction:column;font:600 17px/1.2 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-cap h3 small{font:italic 500 13.5px Georgia,serif;color:var(--ac)}
.ce-cap > ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ce-ap{padding:10px 14px 12px;border-radius:10px;
  background:repeating-linear-gradient(180deg,transparent 0 25px,rgba(120,150,190,.22) 25px 26px),linear-gradient(180deg,#FFFDF7,#FBF5E6);
  background-position:0 6px;box-shadow:0 1px 0 #fff inset,0 0 0 1px #EADFC4,0 6px 12px -10px rgba(80,55,10,.4)}
.ce-ap-et{display:flex;align-items:center;gap:5px;font:700 11.5px var(--font);color:#8A6420}
.ce-ap-et i{font-size:14px}
.ce-ap p,.ce-ap ol{margin:3px 0 0;font:600 21px/26px 'Caveat',cursive;color:#203A73}
.ce-ap ol{padding-left:22px}
.ce-ap-habito{box-shadow:0 1px 0 #fff inset,0 0 0 1.5px #F2C14E,0 6px 12px -10px rgba(80,55,10,.4)}
.ce-cuad-vacio{text-align:center;padding:20px 8px}
.ce-cuad-vacio > i{font-size:40px;color:var(--ac)}
.ce-cuad-vacio p{color:#4A4F5A}
@media(max-width:768px){
  /* En el móvil, la lección y la prueba con la ventana más baja y las columnas más juntas, para
     que se vean las opciones sin desplazarse */
  .ce-baja .ce-ventana{height:78px}
  .ce-hoja-caja.ce-baja.con-ventana .ce-volver{top:22px}.ce-hoja-caja.ce-baja.con-ventana .ce-hoja-x{top:18px}
  .ce-baja .ce-emblema{width:46px;height:46px;margin-top:-30px}.ce-baja .ce-emblema i{font-size:20px}
  .ce-baja .ce-hoja-cab{margin-bottom:8px}
  .ce-cols{height:32px;margin:0 0 8px}.ce-cols i{width:11px;height:12px}.ce-cols i.si{height:28px}
  .ce-prueba .ce-preg{margin-top:4px}
}
/* El repaso del maestro (2026-10-07): botón en el saludo y su hoja */
.ce-sal-acc{display:flex;flex-wrap:wrap;gap:8px}
.ce-sal-acc:empty{display:none}
.ce-sal-rep{margin-top:9px;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:0;border-radius:10px;cursor:pointer;
  background:#fff;color:#26303F;font:700 13px var(--font);box-shadow:inset 0 0 0 1.5px #D7CCB8,0 2px 0 #D7CCB8}
.ce-sal-rep i{color:#6A55A8;font-size:16px}
.ce-sal-rep:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-repaso{--ac:#6A55A8}
.ce-repaso .ce-hoja-cab{text-align:center;padding-right:0}
.ce-expl b{display:block;margin-top:5px;font:600 19px/1.3 'Caveat',cursive;color:#203A73}
@media(max-width:768px){
  /* En las hojas sin ventana (cuaderno, mapa del viaje) la X va arriba y el título debajo */
  .ce-hoja-caja:not(.con-ventana):not(.ce-hoja-centro) .ce-hoja-x{top:20px;right:50%;translate:50% 0}
  .ce-hoja-caja:not(.con-ventana):not(.ce-hoja-centro){padding-top:66px}
}
/* El mapa general tiene ilustración propia para cada hora (2026-10-07): sin capa de color ni
   estrellas pintadas encima; la franja de cielo, del color de lo alto de cada imagen */
.ce-escena.en-mundo .ce-luz{opacity:0}
/* Igual en los territorios que tienen su ilustración de cada hora (VISTA_HORA en app.js) */
.ce-escena.ce-luz-propia:not(.en-mundo) .ce-luz{opacity:0}
.ce-escena.ce-hora-alba{background:linear-gradient(#C9B6CC,#D1BDCC)}
.ce-escena.ce-hora-tarde{background:linear-gradient(#BE8E8C,#C9978E)}
.ce-escena.ce-hora-noche{background:linear-gradient(#021B5C,#042679)}

/* Territorio superado en el mapa (2026-10-08): sin palabras. La chincheta pasa a mármol dorado
   con el icono del territorio, una corona de laurel detrás y un destello que la recorre de vez
   en cuando; se puede seguir entrando para repasar. */
.ce-zmarca.superado .ce-chincheta{background:
    linear-gradient(118deg,transparent 37%,rgba(150,105,20,.35) 39.5%,transparent 42%),
    linear-gradient(62deg,transparent 57%,rgba(170,120,30,.3) 59.5%,transparent 62%),
    radial-gradient(circle at 32% 28%,#FFFBEA 0,#FBE7A6 28%,#E9C25C 65%,#B98A2E 100%);
  box-shadow:inset -4px -5px 8px rgba(120,80,10,.4),inset 3px 3px 4px rgba(255,255,255,.95),0 0 0 1.5px #B98A2E,0 0 0 3px rgba(255,245,210,.85),0 0 18px 2px rgba(255,210,90,.55),0 8px 14px -4px rgba(60,40,0,.6);
  overflow:hidden}
.ce-zmarca.superado .ce-chincheta i{color:#6B4A0E}
.ce-zmarca.superado .ce-chincheta::after{content:'';position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);
  transform:translateX(-120%);animation:ceDestello 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .7s + 3s)}
@keyframes ceDestello{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.ce-laurel{position:absolute;left:50%;top:-6px;width:62px;height:62px;margin-left:-31px;fill:#7FA65A;opacity:.95;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
  animation:ceFlota 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.ce-laurel ellipse:nth-child(odd){fill:#93BA6B}
.ce-zmarca.superado em{background:#B98A2E}
@media(max-width:768px){.ce-laurel{width:54px;height:54px;margin-left:-27px;top:-6px}}
@media(prefers-reduced-motion:reduce){.ce-zmarca.superado .ce-chincheta::after,.ce-laurel{animation:none}}
.ce-laurel{width:84px;height:84px;margin-left:-42px;top:-19px;fill:#5E8F3A;stroke:#FFF8E0;stroke-width:1.1;paint-order:stroke;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ce-laurel ellipse:nth-child(odd){fill:#7DB04F}
@media(max-width:768px){.ce-laurel{width:72px;height:72px;margin-left:-36px;top:-17px}}
/* La corona en el verde de la marca (#03d26e), con borde blanco y sombra para que no se funda
   con los árboles del mapa (2026-10-08) */
.ce-laurel{fill:#03D26E;stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 0 1.5px rgba(0,40,20,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.ce-laurel ellipse:nth-child(odd){fill:#02B85F}
/* La corona, pintada como la ilustración (2026-10-08): hojas con degradado de luz y nervio, tallo
   pardo, sin contorno blanco; la separa del fondo una sombra cálida proyectada */
.ce-laurel{fill:none;stroke:none;stroke-width:0;filter:drop-shadow(1px 2px 1.5px rgba(60,40,10,.45))}
.ce-laurel .lh{fill:url(#ce-lg);stroke:rgba(2,90,50,.35);stroke-width:.35}
.ce-laurel .ln{fill:none;stroke:rgba(230,255,215,.55);stroke-width:.45;stroke-linecap:round}
.ce-laurel .lt{fill:none;stroke:#7A5A2A;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.ce-laurel ellipse{display:none}
.cp-enlace{border:0;padding:0;background:none;cursor:pointer;font:inherit;width:100%}

/* ══ TAREAS DE LOS CURSOS (2026-10-08) ═══════════════════════════════════════════
   CursoOnline._pintarTarea: las tareas de Udemy, tal cual. Instrucciones, la respuesta del
   alumno y, tras enviarla, el ejemplo del instructor. */
.co-tarea-ini{padding:24px 26px}
.co-tarea-min{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.co-tarea-ins{margin-top:14px;padding:22px 24px;border:1px solid var(--t-line);border-radius:20px;background:#fff}
.co-tarea-ins h3,.co-tarea-ej h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:800 17px var(--font);color:var(--t-ink)}
.co-tarea-ins p,.co-tarea-ej p{margin:0 0 10px;font-size:16px;line-height:1.6;color:#2B3446}
.co-tarea-ins ul{margin:4px 0 0;padding-left:20px;display:grid;gap:8px;font-size:16px;line-height:1.5;color:#2B3446}
.co-tarea{margin-top:14px}
.co-tarea textarea{min-height:180px;resize:vertical;font-size:16px;line-height:1.55}
.co-tarea-ej{margin-top:14px;padding:22px 24px;border-radius:20px;background:color-mix(in srgb,var(--c,#F4166B) 6%,#fff);border:1px solid color-mix(in srgb,var(--c,#F4166B) 25%,#fff)}
.co-tarea-ej h3 i{color:color-mix(in srgb,var(--c,#F4166B) 80%,#0B1220)}
.co-tarea-ej-sub{font-size:14.5px !important;color:#4A566B !important}
.co-tarea-ej-r{padding-top:10px;border-top:1px solid color-mix(in srgb,var(--c,#F4166B) 18%,#fff)}
.co-tarea-ej-r b{display:block;margin-bottom:6px;font:700 15.5px var(--font);color:var(--t-ink)}
@media(max-width:640px){.co-tarea-ins,.co-tarea-ej{padding:18px 16px}}
.co-tarea-rec{margin-top:16px}.co-tarea-rec h3{font-size:15px !important}
/* El HTML de las tareas y lecturas (de Udemy): párrafos juntos como en el original, enlaces e imágenes */
.co-html{font-size:16px;line-height:1.6;color:#2B3446;overflow-wrap:anywhere}
.co-html p{margin:0 0 4px}
.co-html h3,.co-html h4{margin:14px 0 6px;font:800 16px var(--font);color:var(--t-ink)}
.co-html ul,.co-html ol{margin:6px 0 10px;padding-left:22px;display:grid;gap:6px}
.co-html a{color:color-mix(in srgb,var(--c,#F4166B) 85%,#0B1220);font-weight:700;text-decoration:underline}
.co-html img{display:block;max-width:100%;height:auto;margin:6px auto;border-radius:12px}
.co-html figure{margin:0}
.co-html blockquote{margin:8px 0;padding-left:12px;border-left:3px solid var(--t-line)}
.co-lectura .co-html{font-size:17px}
/* El curso comprado, en su tarjeta de Cursos: «Tuyo · N %» o «Terminado» junto a «Online» */
.cp-tuyo{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 9px;border-radius:999px;background:#0C8A4A;color:#fff;font:700 11.5px var(--font)}
.cp-tuyo[hidden]{display:none}
.cp-tuyo i{font-size:13px}
.cp.cp-comprado{box-shadow:0 0 0 2px #0C8A4A,0 14px 34px -18px rgba(11,18,32,.45)}

/* ══ EL MAPA EN 3D (2026-10-09) ══════════════════════════════════════════════════
   CentroEntrenamiento._profIniciar: un lienzo WebGL repinta el mapa general con profundidad
   (assets/centro/mapa-profundidad.png). Solo en el mapa general y cuando está listo; mientras,
   y en los territorios, la imagen de siempre. */
.ce-mapa-3d{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ce-escena.en-mundo .ce-lienzo.con-3d .ce-mapa-3d{display:block}
.ce-escena.en-mundo .ce-lienzo.con-3d #ce-img{visibility:hidden}

/* En el móvil el mapa empieza debajo de la cabecera (2026-10-09): la cabecera ocupa todo el ancho
   de arriba y tapaba la Asamblea y el Olimpo, y alguna chincheta de los territorios. --ce-cab la
   mide CentroEntrenamiento._bajoCabecera; detrás de la cabecera queda el cielo de la escena. */
@media(max-width:768px){
  .ce-escena .ce-vista{top:var(--ce-cab,76px)}
  /* Un margen de cielo arriba: la chincheta del Olimpo, en el borde de arriba, se cortaba. Se pinta
     con los colores de lo alto de la imagen (--ce-cielo, CentroEntrenamiento._cieloArriba), fundido
     arriba con el cielo de la escena; la luz de cada hora (.ce-luz) también lo cubre */
  .ce-lienzo{top:34px;height:calc(100% - 34px)}
  .ce-lienzo::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:34px;background:var(--ce-cielo,none);pointer-events:none;
    -webkit-mask:linear-gradient(transparent,#000 75%);mask:linear-gradient(transparent,#000 75%)}
  .ce-luz{top:-34px;-webkit-mask:linear-gradient(transparent,#000 34px);mask:linear-gradient(transparent,#000 34px)}
  .ce-zmarca.arriba.actual::before{bottom:auto;top:100%;margin:6px 0 0}
}
/* Chinchetas con otra forma (PIN_MUNDO en app.js; la del 7, colgada): colgada, la punta arriba,
   en el punto, y el cuerpo debajo; de lado, la punta a la izquierda y el cuerpo a la derecha. Sin la
   sombra del suelo, que ahí no tiene sentido; su «Estás aquí», debajo. */
.ce-zmarca.ce-pin-lado{width:56px;height:50px;translate:0 -50%;transform-origin:0 50%}
.ce-pin-lado .ce-chincheta{left:30px;top:4px;transform:rotate(45deg)}
.ce-pin-lado .ce-chincheta i{transform:rotate(-45deg)}
.ce-zmarca.ce-pin-colgada{height:56px;translate:-50% 0;transform-origin:50% 0}
.ce-pin-colgada .ce-chincheta{top:9px;transform:rotate(135deg)}
.ce-pin-colgada .ce-chincheta i{transform:rotate(-135deg)}
.ce-pin-colgada em{top:auto;bottom:-4px}
.ce-pin-lado .ce-sombra,.ce-pin-colgada .ce-sombra{display:none}
.ce-zmarca.ce-pin-lado.actual::before,.ce-zmarca.ce-pin-colgada.actual::before{bottom:auto;top:100%;margin:6px 0 0}
@media(max-width:768px){
  .ce-zmarca.ce-pin-lado{width:48px;height:44px}
  .ce-pin-lado .ce-chincheta{left:26px;top:4px}
  .ce-zmarca.ce-pin-colgada{height:50px}
  .ce-pin-colgada .ce-chincheta{top:7px}
}

/* SuperAdmin → Registros (2026-10-13): respuestas a los formularios de registro de los cursos */
.sar-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sar-sub{font-size:12px;color:#64748b;margin-top:3px}
.sar-excel{display:inline-flex;align-items:center;gap:6px}
.sar-bloque{margin:16px 0 4px;font-size:12px;font-weight:800;color:#4f7fb3}
.sar-resp{border:1px solid #eef3fb;border-radius:10px;margin:6px 0;background:#f9fbff}
.sar-resp summary{padding:10px 12px;cursor:pointer;font-size:13px;color:#0d2a6e}
.sar-resp dl{margin:0;padding:4px 14px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.sar-resp dt{font-size:11.5px;font-weight:700;color:#64748b;margin-top:8px}
.sar-resp dd{margin:0;font-size:13px;color:#0d2a6e;white-space:pre-wrap;overflow-wrap:anywhere}
.sar .sai-fila{flex-wrap:wrap;row-gap:4px;padding:6px 0}
.sar .sai-fila-nom{flex:0 0 100%;white-space:normal;font-weight:600}
.sar .sai-fila-val{min-width:58px}
.sar .sai-fila-val small{font-weight:600;color:#64748b}

/* ══ EL INFORME DE EJEMPLO (2026-10-14) ══════════════════════════════════════════
   El ojo de Evaluarme (verInformeEjemplo en app.js): las hojas del informe de muestra a
   escala, en un visor a pantalla completa con su barra de cristal. */
.rd-ojo{width:46px;min-width:46px;padding:0 !important;justify-content:center}
.rd-ojo i{font-size:19px;margin:0 !important}
.rd-li-fila{display:flex;gap:8px;align-items:stretch}
.rd-li-fila .rd-li{flex:1;min-width:0}
.rd-li-ojo{flex-shrink:0;width:52px;border-radius:18px;border:1px solid #fff;background:rgba(255,255,255,.88);color:var(--t-ink);font-size:21px;cursor:pointer;
  box-shadow:0 14px 30px -24px rgba(16,38,72,.5);display:flex;align-items:center;justify-content:center}
.rd-li-ojo:active{transform:scale(.96)}
body.rki-visor-abierto{overflow:hidden}
.rki-visor{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;background:rgba(11,18,32,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .25s}
.rki-visor.abierto{opacity:1}
.rki-visor-cab{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,32px);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(18,30,52,.08)}
.rki-visor-tx{display:flex;flex-direction:column;min-width:0}
.rki-visor-tx span{display:flex;align-items:center;gap:8px;font:600 10.5px var(--t-label);letter-spacing:.24em;text-transform:uppercase;color:#5E6A7E}
.rki-visor-tx span i{display:block;width:22px;height:3px;border-radius:2px;background:var(--c)}
.rki-visor-tx b{margin-top:3px;font:800 20px/1.15 var(--font);letter-spacing:-.02em;color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rki-visor-acc{display:flex;align-items:center;gap:10px;flex-shrink:0}
.rki-visor-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(18,30,52,.1);background:#fff;color:var(--t-ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rki-visor-x:hover{background:#F2F5FA}
.rki-visor-x:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.rki-visor-cuerpo{flex:1;overflow:auto;padding:22px 16px 60px;-webkit-overflow-scrolling:touch}
.rki-visor-nota{max-width:794px;margin:0 auto 18px;color:#E7ECF4;font:500 14px/1.5 var(--font);text-align:center}
.rki-visor-hojas{display:flex;flex-direction:column;align-items:center}
.rki-visor-hojas > div{display:flex;flex-direction:column;align-items:center;gap:22px}
.rki-marco{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);flex-shrink:0}
.rki-marco > .rki-hoja{position:absolute;left:0;top:0;transform-origin:0 0}
.rki-visor-carga{display:flex;align-items:center;gap:12px;margin-top:60px;color:#fff;font:600 15px var(--font)}
.rki-visor-carga span{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:rkiGira .8s linear infinite}
@keyframes rkiGira{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .rki-visor-acc .rd-btn{display:none}
  .rki-visor-tx b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.rki-visor{transition:none}.rki-visor-carga span{animation:none}}
/* Evaluarme con muchos diagnósticos (más de 12): etiquetas algo más pequeñas, en dos columnas */
.rd-muchos .rd-et{font-size:12px;line-height:1.15;width:150px;padding:2px 4px}
/* ══ EVALUARME EN DOS NIVELES (2026-10-14): áreas y, dentro, sus diagnósticos ══════ */
.rd-marca{fill:color-mix(in srgb,var(--c) 18%,#fff);stroke:color-mix(in srgb,var(--c) 40%,#fff);stroke-width:1;transition:fill .3s,opacity .35s}
.rd-marca.hecho{fill:var(--c);stroke:var(--c)}
.rd-area-seg .rd-arco{fill:color-mix(in srgb,var(--c) 22%,#fff)}
.rd-area-seg:hover .rd-arco,.rd-area-seg.sel .rd-arco{fill:color-mix(in srgb,var(--c) 42%,#fff)}
.rd-et-area{width:170px;font:700 16px/1.2 var(--font);color:var(--t-ink)}
.rd-et-area::before{opacity:1;width:9px;height:9px}
.rd-et-area small{display:block;margin-top:3px;font:500 12.5px var(--font);color:#5E6A7E}
.rd-et-area.rd-et-izq small,.rd-et-area.rd-et-der small{padding-left:0}
.rd-centro em{margin-top:10px;font:600 10.5px var(--t-label);letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:#8A94A6}
.rd-en-area .rd-centro span{font:700 13px var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:#5E6A7E}
.rd-volver{position:absolute;left:0;top:0;z-index:2;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;
  border:1px solid rgba(18,30,52,.1);background:rgba(255,255,255,.9);font:600 13.5px var(--font);color:var(--t-ink);cursor:pointer;animation:rdFicha .4s both}
.rd-volver:hover{border-color:var(--t-ink)}
.rd-volver:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.rd-en-area svg{animation:rdAbre .55s cubic-bezier(.2,.9,.3,1) both}
@keyframes rdAbre{from{opacity:0;transform:scale(.86) rotate(-14deg)}to{opacity:1;transform:none}}
.rd-progreso{margin-top:16px}
.rd-progreso div{font:500 13.5px var(--font);color:#5A6577}
.rd-progreso div b{font-weight:800;color:var(--t-ink)}
.rd-progreso span{display:block;height:8px;margin-top:8px;border-radius:4px;background:color-mix(in srgb,var(--c) 14%,#fff);overflow:hidden}
.rd-progreso span i{display:block;height:100%;border-radius:4px;background:var(--c);transition:width .5s}
.rd-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.rd-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:15px;border:1px solid color-mix(in srgb,var(--c) 30%,#fff);
  background:#fff;font:600 12.5px var(--font);color:var(--t-ink);cursor:pointer;transition:border-color .2s,background .2s}
.rd-chip:hover{border-color:var(--c)}
.rd-chip.hecho{background:color-mix(in srgb,var(--c) 12%,#fff);border-color:transparent;color:var(--c)}
.rd-li-fila.apagado{display:none}
@media(prefers-reduced-motion:reduce){.rd-en-area svg,.rd-volver{animation:none}}
.rd-li-cab{display:none}
@media(max-width:768px){
  .rd-li-cab{display:flex;align-items:center;gap:9px;margin:14px 4px 2px;font:800 17px var(--font);color:var(--t-ink)}
  .rd-li-cab:first-child{margin-top:2px}
  .rd-li-cab small{margin-left:auto;font:500 12.5px var(--font);color:#5E6A7E}
  .rd-li-cab.apagado{display:none}
}

/* ══ LECCIONES CON EJERCICIOS, LAURELES Y VISTAS PREVIAS (2026-10-15) ══════════════
   CentroEntrenamiento.leccion y _practicar (los ejercicios de cada lección del templo, uno cada
   vez), _laurelSitio (el laurel de cada sitio, en su chincheta) y _verPrev (la tarjeta que sale
   al pasar por una chincheta). Todo en la piedra de la estela: mármol, el color del sitio (--ac)
   y Cinzel en los títulos. */

/* La lección: lo que viene después de leerla */
.ce-lec-practica{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;margin-top:18px;padding:14px 16px;border-radius:14px;
  background:#F3EDE2;box-shadow:inset 0 2px 7px rgba(80,60,30,.14),0 1px 0 #fff}
.ce-lec-ic{grid-row:span 2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:21px;color:var(--ac);
  background:radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 34%,#DCD3C3 75%,#BEB3A2 100%);
  box-shadow:inset -3px -4px 7px rgba(70,60,50,.25),inset 2px 2px 3px #fff,0 0 0 1.5px color-mix(in srgb,var(--ac) 55%,#fff)}
.ce-hoja-caja .ce-lec-practica p{margin:0;font-size:14px;line-height:1.45;color:#3A3F4A}
.ce-lec-mejor{justify-self:start;display:inline-flex;align-items:center;gap:5px;font:700 12.5px var(--font);color:var(--ac)}
.ce-lec-mejor.oro{color:#9A6B12}

/* La práctica: una estela centrada de alto fijo. Arriba el título y la barra, en medio el
   ejercicio (con su propio desplazamiento) y abajo la corrección, que se tiñe de verde, de oro o
   de terracota */
.ce-hoja-caja.ce-ej-hoja{width:min(560px,calc(100% - 40px));height:min(720px,calc(100% - 28px));max-height:none;padding:0;overflow:hidden;display:flex;flex-direction:column}
.ce-ej-hoja > .ce-hoja-x{display:none}
.ce-ej{flex:1;min-height:0;display:flex;flex-direction:column}
.ce-ej .ce-ej-tit{margin:0;padding:26px 64px 0;text-align:center;font:600 13px/1.3 'Cinzel',Georgia,serif;letter-spacing:.08em;color:var(--ac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce-ej-cab{display:flex;align-items:center;gap:12px;padding:14px 28px 6px}
.ce-ej-x{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;font-size:17px;color:var(--tinta);
  background:rgba(251,248,242,.95);box-shadow:0 0 0 1px #D7CCB8,0 4px 10px -6px rgba(20,15,10,.5)}
.ce-ej-x:hover{background:#fff}
.ce-ej-barra{flex:1;display:flex;gap:5px;height:12px}
.ce-ej-barra i{flex:1;border-radius:6px;background:var(--piedra);box-shadow:inset 0 1px 2px rgba(60,45,20,.2);transition:background .35s,box-shadow .35s}
.ce-ej-barra i.aqui{box-shadow:inset 0 1px 2px rgba(60,45,20,.2),0 0 0 2px color-mix(in srgb,var(--ac) 50%,#fff)}
.ce-ej-barra i.si{background:linear-gradient(180deg,#6FCB8E,#2F8A4F)}
.ce-ej-barra i.tarde{background:linear-gradient(180deg,#F2D27A,#C29431)}
.ce-ej-barra i.fallo{background:linear-gradient(180deg,#E79B7E,#C25A34);animation:ceTramo .5s ease-out}
@keyframes ceTramo{30%{transform:scaleY(1.7)}}
.ce-ej-racha{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:999px;background:#FFF1DA;color:#B2541B;font:800 13px var(--font);box-shadow:0 0 0 1px #F3CFA0}
.ce-ej-racha[hidden]{display:none}
.ce-ej-racha.sube{animation:ceLaurel .45s ease-out}
.ce-ej-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 28px 20px;scrollbar-width:thin}
.ce-ej-cuerpo.entra{animation:ceEjEntra .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes ceEjEntra{from{opacity:0;transform:translateX(18px)}}
.ce-ej [tabindex="-1"]:focus{outline:none}
.ce-ej-tipo{display:inline-flex;align-items:center;gap:6px;font:600 12px 'Cinzel',Georgia,serif;letter-spacing:.1em;color:var(--ac)}
.ce-ej-tipo i{font-size:16px}
.ce-ej .ce-ej-enun{margin:8px 0 0;font:600 18px/1.45 var(--font);color:var(--tinta)}
.ce-ej .ce-ej-tabla{margin:12px 0 0;padding:22px;border-radius:14px;background:#F3EDE2;box-shadow:inset 0 2px 7px rgba(80,60,30,.16),0 1px 0 #fff;
  font:italic 500 19px/1.5 Georgia,serif;color:var(--tinta);text-align:center}
/* Las respuestas: losas de mármol que se hunden al pulsarlas */
.ce-ej-ops{display:grid;gap:9px;margin-top:16px}
.ce-ej-op{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;border-radius:13px;cursor:pointer;text-align:left;
  font:600 15px/1.4 var(--font);color:var(--tinta);background:#FDFBF7;border:1.5px solid var(--piedra);box-shadow:0 3px 0 var(--piedra);
  transition:translate .12s,border-color .15s,background .15s,box-shadow .12s}
.ce-ej-op:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 50%,var(--piedra))}
.ce-ej-op:active:not(:disabled){translate:0 2px;box-shadow:0 1px 0 var(--piedra)}
.ce-ej-op.elegida{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,#fff);box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 45%,#fff)}
.ce-ej-op:disabled{cursor:default}
.ce-ej-op:disabled:not(.ok):not(.mal){opacity:.5}
.ce-ej-op.ok{border-color:#3E9B5E;background:#E7F4EA;color:#1F6B3A;box-shadow:0 3px 0 #A9D8B7;animation:ceLaurel .45s ease-out}
.ce-ej-op.mal{border-color:#C25A34;background:#FBEDE6;color:#8C3517;box-shadow:0 3px 0 #EBC1AF;animation:ceNego .4s}
.ce-ej-op.ok::after,.ce-ej-op.mal::after{margin-left:auto;padding-left:6px;font:700 17px Georgia,serif}
.ce-ej-op.ok::after{content:'✓'}
.ce-ej-op.mal::after{content:'✕'}
.ce-ej kbd{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font:700 12px var(--font);color:#7A7F8A;background:#fff;box-shadow:inset 0 0 0 1px var(--piedra)}
.ce-ej-op.elegida kbd{color:var(--ac);box-shadow:inset 0 0 0 1.5px var(--ac)}
@media(hover:none){.ce-ej kbd{display:none}}
.ce-ej-op:focus-visible,.ce-ficha:focus-visible,.ce-hueco:focus-visible,.ce-ej-x:focus-visible,.ce-ej-otro:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
/* Verdadero o falso: la afirmación en una tablilla y dos losas grandes */
.ce-ej-vf{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ce-ej-vf .ce-ej-op{flex-direction:column;justify-content:center;gap:4px;padding:18px 10px 16px;text-align:center;font:600 15px 'Cinzel',Georgia,serif;letter-spacing:.04em}
.ce-ej-vf .ce-ej-op > i{font-size:28px;color:var(--ac)}
.ce-ej-vf .ce-ej-op.ok > i,.ce-ej-vf .ce-ej-op.mal > i{color:inherit}
.ce-ej-vf kbd{position:absolute;top:8px;left:8px}
.ce-ej-vf .ce-ej-op::after{position:absolute;top:8px;right:10px}
/* Completar la frase: el hueco y sus fichas */
.ce-ej .ce-ej-frase{font:500 19px/1.95 Georgia,serif}
.ce-hueco{display:inline-block;min-width:112px;min-height:1.6em;margin:0 4px;padding:0 10px;vertical-align:baseline;border:0;border-bottom:2.5px dashed color-mix(in srgb,var(--ac) 60%,#fff);
  border-radius:8px 8px 2px 2px;background:color-mix(in srgb,var(--ac) 6%,transparent);font:600 17px/1.55 var(--font);color:var(--ac);cursor:pointer;text-align:center}
.ce-hueco.lleno{border-bottom-style:solid;background:#fff;box-shadow:0 2px 0 var(--piedra)}
.ce-hueco.ok{color:#1F6B3A;background:#E7F4EA;border-bottom-color:#3E9B5E}
.ce-hueco.mal{color:#8C3517;background:#FBEDE6;border-bottom-color:#C25A34;text-decoration:line-through}
.ce-hueco:disabled{cursor:default}
.ce-ej-fichas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.ce-ficha{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;cursor:pointer;font:600 15px/1.35 var(--font);color:var(--tinta);text-align:left;
  background:#FDFBF7;border:1.5px solid var(--piedra);box-shadow:0 3px 0 var(--piedra);transition:translate .12s,opacity .2s,border-color .15s,background .15s}
.ce-ficha:hover:not(:disabled){border-color:color-mix(in srgb,var(--ac) 50%,var(--piedra))}
.ce-ficha:active:not(:disabled){translate:0 2px;box-shadow:0 1px 0 var(--piedra)}
.ce-ficha:disabled{cursor:default}
.ce-ficha.usada{opacity:.35;box-shadow:none;pointer-events:none;background:var(--piedra);color:transparent}
.ce-ficha.usada kbd{visibility:hidden}
.ce-ficha.ok{border-color:#3E9B5E;background:#E7F4EA;color:#1F6B3A;box-shadow:0 3px 0 #A9D8B7}
.ce-ficha.mal{border-color:#C25A34;background:#FBEDE6;color:#8C3517;box-shadow:0 3px 0 #EBC1AF}
/* Poner en orden: tu orden arriba (numerado) y las piezas que quedan debajo */
.ce-ej-orden{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.ce-ficha-larga{display:flex;width:100%;padding:11px 14px}
.ce-ej-num{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px 'Cinzel',Georgia,serif;color:#fff;background:var(--ac)}
.ce-ficha.mal .ce-ej-num{background:#C25A34}.ce-ficha.ok .ce-ej-num{background:#2F8A4F}
.ce-ej-sitio{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--ac) 40%,var(--piedra));font:500 14px var(--font);color:#8A8F99}
.ce-ej-sitio .ce-ej-num{background:none;color:var(--ac);box-shadow:inset 0 0 0 1.5px currentColor}
.ce-ej-banco{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--piedra)}
.ce-ej-banco .ce-ficha.usada{display:none}
.ce-ej-banco:not(:has(.ce-ficha:not(.usada))){display:none}
/* Unir parejas: dos columnas; las unidas se quedan en verde, apagadas; las que no casan tiemblan */
.ce-ej-pares{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ce-ej-col{display:grid;gap:9px;align-content:start}
.ce-ej-pares .ce-ficha{width:100%;min-height:56px;justify-content:center;text-align:center;font-size:14.5px}
.ce-ficha.elegida{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,#fff);box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 45%,#fff)}
.ce-ficha.unida{border-color:#A9D8B7;background:#EEF8F1;color:#2F7A4A;box-shadow:none;opacity:.62;animation:ceLaurel .4s ease-out}
.ce-ficha.falla{animation:ceFalla .5s}
@keyframes ceFalla{0%,70%{border-color:#C25A34;background:#FBEDE6;color:#8C3517}15%,45%{translate:-5px 0}30%,60%{translate:5px 0}}
/* Encontrar el error: cada parte, entre comillas */
.ce-ej-partes .ce-ej-op span{font:italic 500 15.5px/1.45 Georgia,serif}
/* La pregunta del maestro */
.ce-ej-maestro{display:flex;align-items:center;gap:10px;margin-top:12px}
.ce-ej-maestro .ce-maestro-ret{width:44px;height:44px;background:radial-gradient(circle at 32% 28%,#fff,#E6DED0);box-shadow:0 0 0 2px #CBBFA8}
.ce-ej-maestro .ce-maestro-ret svg{width:42px;height:42px}
.ce-ej-maestro > span{font:italic 500 15px Georgia,serif;color:#4A4F5A}
.ce-ej-maestro b{font:600 15px 'Cinzel',Georgia,serif;color:var(--tinta)}
/* La corrección */
.ce-ej-pie[hidden]{display:none}
.ce-ej-pie{flex-shrink:0;display:grid;gap:12px;padding:14px 28px 22px;border-top:1px solid var(--piedra);background:rgba(255,255,255,.35);transition:background .25s,border-color .25s}
.ce-ej-pie.bien{background:#E3F2E7;border-color:#BFE0C8}
.ce-ej-pie.casi{background:#FBF1D9;border-color:#EBD6A3}
.ce-ej-pie.mal{background:#FBE9E1;border-color:#EFC7B6}
.ce-ej-ver{display:flex;gap:12px;align-items:flex-start;max-height:38vh;overflow-y:auto}
.ce-ej-ver:empty{display:none}
.ce-ej-pie.bien .ce-ej-ver,.ce-ej-pie.casi .ce-ej-ver,.ce-ej-pie.mal .ce-ej-ver{animation:ceEjVer .3s ease-out}
@keyframes ceEjVer{from{opacity:0;transform:translateY(10px)}}
.ce-ej-ver-ic{flex-shrink:0;font-size:30px;line-height:1}
.ce-ej-pie.bien .ce-ej-ver-ic,.ce-ej-pie.bien .ce-ej-ver b{color:#1F6B3A}
.ce-ej-pie.casi .ce-ej-ver-ic,.ce-ej-pie.casi .ce-ej-ver b{color:#8A5F0E}
.ce-ej-pie.mal .ce-ej-ver-ic,.ce-ej-pie.mal .ce-ej-ver b{color:#8C3517}
.ce-ej-ver b{display:block;font:600 19px/1.2 'Cinzel',Georgia,serif}
.ce-ej .ce-ej-ver p{margin:4px 0 0;font:500 14px/1.5 var(--font);color:#3A3F4A}
.ce-ej-sol{margin-top:4px;font:700 14px/1.45 var(--font);color:#8C3517}
.ce-ej-sol ol{margin:4px 0 0;padding-left:20px;font-weight:600}
.ce-ej-ver small{display:block;margin-top:5px;font:600 12px var(--font);color:#8C5A3A}
.ce-ej .ce-ej-aviso{margin:0;font:700 13.5px var(--font);color:#A11D22}
.ce-ej-pie .ce-cta{margin-top:0}
.ce-ej-pie.bien .ce-cta{--ac:#2F8A4F}
.ce-ej-pie.casi .ce-cta{--ac:#B07D1A}
.ce-ej-pie.mal .ce-cta{--ac:#C25A34}
.ce-ej-pie .ce-cta:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
/* El final de la lección */
.ce-ej-fin{position:relative;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 28px 24px;outline:none}
.ce-ej-fin .ce-sello{flex-shrink:0;margin:0 auto 12px;animation:ceSello 1s cubic-bezier(.2,1.6,.4,1) both}
/* La lección perfecta: el sello en mármol dorado, como un territorio superado en el mapa */
.ce-ej-fin.perfecta .ce-sello{color:#8A5F0E;background:radial-gradient(circle at 32% 28%,#FFFBEA 0,#FBE7A6 30%,#E9C25C 70%,#B98A2E 100%);
  box-shadow:inset -4px -5px 9px rgba(120,80,10,.35),inset 3px 3px 5px #fff,0 0 0 2px #C9A04A,0 0 0 6px #FBF8F2,0 0 26px 4px rgba(255,210,90,.5),0 10px 20px -6px rgba(30,25,20,.5)}
/* Las hojas que caen en una lección perfecta no tapan los botones */
.ce-ej-fin .ce-fi-caen{pointer-events:none;z-index:2}
.ce-ej-fin h2{margin:8px 0 0;font:600 30px/1.15 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-ej-fin.perfecta h2{color:#9A6B12}
.ce-ej .ce-ej-msg{max-width:38ch;margin:6px auto 0;text-align:center}
.ce-ej-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:18px}
.ce-ej-datos span{display:flex;flex-direction:column;gap:3px;padding:12px 6px;border-radius:14px;background:#F3EDE2;box-shadow:inset 0 2px 6px rgba(80,60,30,.13),0 1px 0 #fff}
.ce-ej-datos b{font:600 22px/1.1 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-ej-datos small{font:600 12px var(--font);color:#6B6F78}
.ce-ej-datos .record b,.ce-ej-datos .record small{color:#9A6B12}
.ce-ej .ce-ej-idea{display:flex;gap:10px;align-items:flex-start;width:100%;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fff;border-left:3px solid var(--ac);
  text-align:left;font:italic 500 15px/1.45 Georgia,serif;color:var(--tinta)}
.ce-ej-idea > i{font-size:20px;color:var(--ac)}
.ce-ej-idea small{display:block;margin-bottom:2px;font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:var(--ac)}
.ce-ej .ce-ej-pista{display:flex;gap:7px;align-items:center;justify-content:center;margin:12px 0 0;font:600 13px/1.4 var(--font);color:#6B5320}
.ce-ej .ce-ej-pista[hidden]{display:none}
.ce-ej-pista i{font-size:17px}
.ce-ej-acc{display:grid;gap:6px;width:100%;margin-top:auto;padding-top:16px}
.ce-ej-acc .ce-cta{margin-top:0}
.ce-ej-otro{padding:9px;border:0;background:none;cursor:pointer;font:700 14px var(--font);color:var(--ac)}
.ce-ej-otro:hover{text-decoration:underline}
/* La lista del templo: la mejor nota de cada lección y lo que falta para el siguiente laurel */
.ce-act-nota{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font:700 12px var(--font);color:var(--ac)}
.ce-act-nota.oro{color:#9A6B12}
.ce-act.perfecta .ce-act-ic{color:#9A6B12;background:#FBF0D2}
.ce-hoja-caja .ce-hoja-cab .ce-laurel-pista{display:flex;align-items:center;justify-content:center;gap:6px;max-width:44ch;margin:10px auto 0;font:600 13px/1.4 var(--font);color:#6B6F78}
.ce-laurel-pista i{flex-shrink:0;font-size:17px}
.ce-laurel-pista.bronce i{color:#A0652F}.ce-laurel-pista.plata i{color:#7D8796}.ce-laurel-pista.oro,.ce-laurel-pista.oro i{color:#9A6B12}
@media(max-width:768px){
  /* En el móvil la práctica ocupa la pantalla entera */
  .ce-hoja-caja.ce-hoja-centro.ce-ej-hoja{top:8px;bottom:8px;left:8px;right:8px;width:auto;height:auto;transform:none;animation:ceEstelaSube .45s cubic-bezier(.2,.9,.25,1) both}
  .ce-ej .ce-ej-tit{padding:20px 52px 0}
  .ce-ej-cab{padding:10px 16px 4px;gap:10px}
  .ce-ej-cuerpo{padding:10px 16px 16px}
  .ce-ej-pie{padding:12px 16px 16px}
  .ce-ej .ce-ej-enun{font-size:16.5px}
  .ce-ej .ce-ej-tabla{padding:16px;font-size:17px}
  .ce-ej .ce-ej-frase{font-size:17.5px}
  .ce-ej-op{padding:12px;font-size:14.5px}
  .ce-ej-pares .ce-ficha{font-size:13.5px;padding:9px 10px}
  .ce-ej-fin{padding:24px 16px 0}
  .ce-ej-fin .ce-sello{width:56px;height:56px;font-size:26px;margin-bottom:8px}
  .ce-ej-fin h2{font-size:25px}
  .ce-ej-datos{margin-top:14px}
  .ce-ej-datos span{padding:9px 4px}
  .ce-ej-datos b{font-size:19px}
  /* Los botones del final, siempre a la vista: lo de encima se desplaza por detrás */
  .ce-ej-acc{position:sticky;bottom:0;padding:14px 0 14px;background:linear-gradient(rgba(243,237,226,0),#F3EDE2 16px)}
  /* Mientras se practica, la mascota flotante no tapa el botón de abajo */
  body:has(.ce-ej-hoja) #reto-widget{display:none}
}

/* El laurel de cada sitio, en su chincheta: bronce, plata u oro */
.ce-pin-laurel{position:absolute;right:-6px;top:-8px;z-index:3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 3px 7px rgba(20,15,10,.45);animation:ceFlota 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.ce-pin-laurel[hidden]{display:none}
.ce-pin-laurel.bronce{background:radial-gradient(circle at 35% 30%,#F8DCC0,#C98A55 55%,#8A5528);color:#4A2A10}
.ce-pin-laurel.plata{background:radial-gradient(circle at 35% 30%,#fff,#D3D9E1 55%,#8E98A6);color:#38404D}
.ce-pin-laurel.oro{background:radial-gradient(circle at 35% 30%,#FFF6D0,#F2C94C 55%,#B07D1A);color:#5B3D0C;box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 12px 2px rgba(255,205,80,.65),0 3px 7px rgba(20,15,10,.45)}
.ce-pin.ce-con-prev .ce-pin-ic{scale:1.1}
/* La celebración de un laurel, en su color */
.ce-fiesta.ce-fi-bronce{--ac:#A0652F}.ce-fiesta.ce-fi-plata{--ac:#7D8796}.ce-fiesta.ce-fi-oro{--ac:#B8860B}
@media(max-width:768px){.ce-pin-laurel{width:20px;height:20px;font-size:13px;right:-5px;top:-6px}}

/* La vista previa de un sitio, junto a su chincheta (con el dedo, abajo o arriba, con «Entrar») */
.ce-prev{position:absolute;z-index:5;width:288px;border-radius:18px;pointer-events:none;color:var(--tinta);
  background:linear-gradient(170deg,#FDFBF7,#F3EDE2 75%,#EEE6D8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px #D7CCB8,0 0 0 5px rgba(251,248,242,.55),0 26px 50px -20px rgba(10,20,45,.65);
  opacity:0;transform:scale(.94);transition:opacity .18s ease-out,transform .22s cubic-bezier(.2,1.2,.4,1)}
.ce-prev.ver{opacity:1;transform:none}
.ce-prev.va{opacity:0;transform:scale(.97);transition-duration:.15s;pointer-events:none !important}
.ce-prev-esc{position:relative;height:96px;overflow:hidden;border-radius:18px 18px 0 0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 150% at 50% 0%,color-mix(in srgb,var(--ac) 42%,#fff),var(--ac) 70%,color-mix(in srgb,var(--ac) 75%,#000))}
.ce-prev-esc::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:10px;background:#fff;opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M0 .9H16M0 13.1H16M3 13.1V3.6H12V10H6.5V6.6H9' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center/12px 10px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M0 .9H16M0 13.1H16M3 13.1V3.6H12V10H6.5V6.6H9' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center/12px 10px}
.ce-prev-tx{padding:12px 16px 14px}
.ce-prev-tag{display:inline-flex;align-items:center;gap:6px;font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.1em;color:var(--ac)}
.ce-prev-tag i{font-size:14px}
.ce-prev-tx > b{display:block;margin-top:4px;font:600 18px/1.2 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-prev-tx > p{margin:3px 0 0;font:italic 500 14px/1.4 Georgia,serif;color:#4A4F5A}
.ce-prev-prog{display:flex;align-items:center;gap:9px;margin-top:10px;font:700 12.5px var(--font);color:var(--ac);white-space:nowrap}
.ce-prev-prog span{flex:1;height:6px;border-radius:6px;background:var(--piedra);box-shadow:inset 0 1px 2px rgba(60,45,20,.18);overflow:hidden}
.ce-prev-prog span i{display:block;height:100%;border-radius:6px;background:var(--ac)}
.ce-prev-prog.ce-prev-ok{gap:5px;color:#2F8A4F}
.ce-prev-tx .ce-prev-sig{margin:7px 0 0;font:600 13px/1.4 var(--font);font-style:normal;color:#3A3F4A}
.ce-prev-laurel{display:flex;align-items:flex-start;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--piedra);font:600 12.5px/1.4 var(--font);color:#6B6F78}
.ce-prev-laurel i{flex-shrink:0;font-size:16px}
.ce-prev-laurel.bronce{color:#8A5528}.ce-prev-laurel.plata{color:#5B6574}.ce-prev-laurel.oro{color:#9A6B12}
.ce-prev-entrar{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;padding:12px;border:0;border-radius:12px;cursor:pointer;color:#fff;
  font:700 15px 'Cinzel',Georgia,serif;letter-spacing:.05em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 80%,#fff),var(--ac) 50%,color-mix(in srgb,var(--ac) 80%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.ce-prev-entrar:active{translate:0 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.ce-prev-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;display:grid;place-items:center;font-size:16px;cursor:pointer;
  color:var(--tinta);background:rgba(251,248,242,.92);box-shadow:0 0 0 1px #D7CCB8}
.ce-prev-entrar:focus-visible,.ce-prev-x:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
/* Con el dedo: compacta, abajo (por encima de la mascota flotante, como el saludo del maestro)
   o arriba, donde no tape la chincheta tocada; la escena, pequeña a la izquierda */
.ce-prev.dedo{left:10px;right:10px;top:auto;bottom:62px;width:auto;max-width:440px;margin:0 auto;pointer-events:auto;cursor:pointer;transform:translateY(16px);
  display:grid;grid-template-columns:92px minmax(0,1fr);overflow:hidden}
.ce-prev.dedo.arriba{top:calc(var(--ce-cab,76px) + 8px);bottom:auto;transform:translateY(-16px)}
.ce-prev.dedo.ver{transform:none}
.ce-prev.dedo .ce-prev-esc{height:auto;min-height:0;padding:0;border-radius:0}
.ce-prev.dedo .ce-prev-esc::after{display:none}
.ce-prev.dedo .ce-prev-esc > *{flex-shrink:0;scale:var(--esc-m,.6)}
.ce-prev.dedo .ce-prev-cartas{--esc-m:.56}
.ce-prev.dedo .ce-prev-saltos{--esc-m:.78}
.ce-prev.dedo .ce-prev-saltos i:nth-child(n+3){display:none}
.ce-prev.dedo .ce-prev-libros{--esc-m:.5;margin-top:0}
.ce-prev.dedo .ce-prev-ondas{--esc-m:.46}
.ce-prev.dedo .ce-prev-arco{--esc-m:.64;margin-top:0}
.ce-prev.dedo .ce-prev-ret,.ce-prev.dedo .ce-prev-ins{--esc-m:1}
.ce-prev.dedo .ce-prev-ret .ce-maestro-ret{width:48px;height:48px}.ce-prev.dedo .ce-prev-ret .ce-maestro-ret svg{width:46px;height:46px}
.ce-prev.dedo .ce-prev-ins{width:28px;height:28px;margin:30px 0 0 -14px;font-size:14px}
.ce-prev.dedo .ce-prev-tx{padding:11px 44px 10px 14px}
.ce-prev.dedo .ce-prev-tx > b{font-size:16px}
.ce-prev.dedo .ce-prev-prog{margin-top:6px}
.ce-prev.dedo .ce-prev-laurel{margin-top:6px;padding-top:6px}
.ce-prev-dice-m{display:block;margin-top:3px;font:italic 500 13.5px/1.4 Georgia,serif;color:#4A3F6B;quotes:'«' '»'}
.ce-prev.dedo .ce-prev-entrar{grid-column:1 / -1;width:auto;margin:0 12px 12px}
/* Las escenas de cada sitio */
.ce-prev-cartas{position:relative;width:150px;height:74px}
.ce-prev-cartas i{position:absolute;left:50%;top:8px;width:46px;height:60px;margin-left:-23px;border-radius:8px;display:grid;place-items:center;font-size:22px;color:var(--ac);
  background:linear-gradient(160deg,#fff,#EFE8DA);box-shadow:0 0 0 1px rgba(255,255,255,.8),0 8px 14px -6px rgba(10,20,40,.55);transform-origin:50% 120%;
  transition:rotate .45s cubic-bezier(.2,1.3,.4,1) .08s,translate .45s cubic-bezier(.2,1.3,.4,1) .08s;animation:cePrevFlota 3s ease-in-out infinite}
.ce-prev-cartas i:nth-child(1){--r:-16deg;--x:-38px}
.ce-prev-cartas i:nth-child(2){--r:0deg;--x:0px;z-index:1;animation-delay:-.5s}
.ce-prev-cartas i:nth-child(3){--r:16deg;--x:38px;animation-delay:-1s}
.ce-prev.ver .ce-prev-cartas i{rotate:var(--r);translate:var(--x) 0}
@keyframes cePrevFlota{50%{transform:translateY(-5px)}}
.ce-prev-saltos{display:flex;gap:12px}
.ce-prev-saltos i,.ce-prev-ondas b,.ce-prev-arco b{display:grid;place-items:center;border-radius:50%;color:var(--ac);
  background:radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 34%,#DCD3C3 80%,#BEB3A2 100%);box-shadow:inset -3px -4px 7px rgba(70,60,50,.25),0 6px 12px -6px rgba(10,20,40,.6)}
.ce-prev-saltos i{width:44px;height:44px;font-size:22px;animation:cePrevSalto 1.6s ease-in-out infinite;animation-delay:calc(var(--n,0) * .18s)}
@keyframes cePrevSalto{0%,60%,100%{transform:none}30%{transform:translateY(-12px)}}
.ce-prev-libros{display:flex;align-items:flex-end;gap:4px;height:66px;padding:0 12px;margin-top:12px;border-bottom:5px solid rgba(255,255,255,.75)}
.ce-prev-libros i{width:14px;height:var(--h);border-radius:3px 3px 1px 1px;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%,rgba(0,0,0,.2)),var(--c)}
.ce-prev-libros i:nth-child(1){--c:#F4EBD9;--h:50px}.ce-prev-libros i:nth-child(2){--c:#7C3A2D;--h:58px}.ce-prev-libros i:nth-child(3){--c:#E2C27A;--h:44px}
.ce-prev-libros i:nth-child(4){--c:#FBF8F2;--h:60px;animation:cePrevLibro 3.2s ease-in-out infinite}
.ce-prev-libros i:nth-child(5){--c:#3E4C6B;--h:52px}.ce-prev-libros i:nth-child(6){--c:#C9A04A;--h:46px}.ce-prev-libros i:nth-child(7){--c:#6E7B52;--h:56px}
.ce-prev-libros i:nth-child(8){--c:#F1E4C8;--h:40px}.ce-prev-libros i:nth-child(9){--c:#8C4A2F;--h:54px}
@keyframes cePrevLibro{0%,35%,100%{transform:none}50%,80%{transform:translateY(-16px) rotate(-7deg)}}
.ce-prev-ondas{display:flex;align-items:center;gap:4px;height:60px}
.ce-prev-ondas b{width:44px;height:44px;margin-right:10px;font-size:22px}
.ce-prev-ondas > i{width:5px;height:42px;border-radius:3px;background:rgba(255,255,255,.88);transform:scaleY(.25);animation:cePrevOnda .9s ease-in-out infinite alternate}
.ce-prev-ondas > i:nth-child(4n+1){animation-delay:-.2s}.ce-prev-ondas > i:nth-child(4n+2){animation-delay:-.55s;animation-duration:.7s}
.ce-prev-ondas > i:nth-child(4n+3){animation-delay:-.35s;animation-duration:1.15s}.ce-prev-ondas > i:nth-child(4n){animation-delay:-.75s}
@keyframes cePrevOnda{to{transform:scaleY(1)}}
.ce-prev-esc.ce-prev-esc-dice{height:auto;min-height:96px;padding:18px 20px 22px}
.ce-prev-humo{position:absolute;inset:0}
.ce-prev-humo i{position:absolute;bottom:-34px;width:84px;height:84px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,232,255,.55),rgba(240,232,255,0));
  animation:cePrevHumo 6s ease-in infinite}
.ce-prev-humo i:nth-child(1){left:8%}.ce-prev-humo i:nth-child(2){left:40%;animation-delay:-2s}.ce-prev-humo i:nth-child(3){left:70%;animation-delay:-4s}
@keyframes cePrevHumo{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-110px) scale(1.8)}}
.ce-prev-dice{position:relative;z-index:1;font:italic 500 15px/1.45 Georgia,serif;color:#fff;text-align:center;text-shadow:0 1px 6px rgba(30,15,60,.55);quotes:'«' '»'}
.ce-prev-arco{position:relative;width:124px;height:76px;margin-top:16px}
.ce-prev-arco > i{position:absolute;bottom:0;width:16px;height:60px;border-radius:2px;background:linear-gradient(90deg,#E2D9C8,#fff 45%,#D3C8B4);box-shadow:0 4px 8px -4px rgba(0,0,0,.5)}
.ce-prev-arco > i:nth-child(1){left:12px}.ce-prev-arco > i:nth-child(2){right:12px}
.ce-prev-arco::before{content:'';position:absolute;left:4px;right:4px;top:0;height:12px;border-radius:3px;background:linear-gradient(180deg,#fff,#E2D9C8);box-shadow:0 3px 6px -3px rgba(0,0,0,.5)}
.ce-prev-arco b{position:absolute;left:50%;bottom:6px;translate:-50% 0;width:46px;height:46px;font-size:23px;animation:cePrevLuz 2.4s ease-in-out infinite}
@keyframes cePrevLuz{0%,100%{box-shadow:inset -3px -4px 7px rgba(70,60,50,.25),0 0 18px 4px rgba(255,230,160,.45)}50%{box-shadow:inset -3px -4px 7px rgba(70,60,50,.25),0 0 30px 10px rgba(255,230,160,.85)}}
.ce-prev-ret .ce-maestro-ret{width:64px;height:64px;background:radial-gradient(circle at 32% 28%,#fff,#E6DED0);box-shadow:0 0 0 3px rgba(255,255,255,.7),0 8px 16px -6px rgba(0,0,0,.5)}
.ce-prev-ret .ce-maestro-ret svg{width:62px;height:62px}
.ce-prev-ins{width:42px;height:42px;margin:30px 0 0 -10px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#5B3D0C;
  background:radial-gradient(circle at 35% 30%,#FFF1C4 0,#E9C46A 45%,#B98A2E 100%);box-shadow:0 0 0 2px #F6E3A8,0 6px 12px -4px rgba(0,0,0,.5);animation:cePrevSalto 2.6s ease-in-out infinite}

/* El bocadillo de un territorio en el mapa, como una postal: su vista de cerca en pequeño */
.ce-bocadillo.ce-boc-rico{width:236px;padding:0;gap:0;align-items:stretch;text-align:left;white-space:normal;overflow:hidden;border:0;border-radius:16px;
  background:linear-gradient(170deg,#FDFBF7,#F3EDE2);box-shadow:0 0 0 1px #D7CCB8,0 0 0 4px rgba(251,248,242,.6),0 18px 38px -14px rgba(10,20,45,.6)}
.ce-boc-img{position:relative;display:block;height:116px;overflow:hidden;background:#9CC8EA}
.ce-boc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 2.5s ease-out}
.ce-bocadillo.ver .ce-boc-img img{transform:scale(1.06)}
.ce-boc-img .ce-med{position:absolute;left:10px;top:10px;width:34px;height:34px;font-size:13px}
.ce-boc-img > i{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:#fff;background:rgba(20,25,40,.42);text-shadow:0 2px 8px rgba(0,0,0,.5)}
.ce-boc-rico.bloqueado .ce-boc-img img{filter:grayscale(.65) blur(1.5px)}
.ce-boc-tx{display:flex;flex-direction:column;gap:2px;padding:10px 14px 12px}
.ce-boc-rico .ce-boc-tx b{font:600 16px/1.2 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-boc-rico .ce-boc-tx small{font:italic 500 13.5px/1.35 Georgia,serif;color:#4A4F5A}
.ce-boc-mae{margin-top:2px;font:600 12px/1.35 var(--font);color:#6B6F78}
.ce-boc-rico .ce-boc-prog{display:flex;align-items:center;gap:5px;margin-top:5px;font:700 12px/1.35 var(--font);color:#8A6420}
.ce-boc-rico.bloqueado .ce-boc-prog{color:#5A6170}
.ce-boc-rico.superado .ce-boc-prog{color:#2F8A4F}
.ce-boc-barra{display:block;height:5px;margin-top:6px;border-radius:5px;background:var(--piedra);overflow:hidden}
.ce-boc-barra i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#E9C46A,#B98A2E)}
/* --ajy: lo que se corre si no cabe ni encima ni debajo de su territorio */
.ce-bocadillo.ce-boc-rico{transform:translate(calc(-50% + var(--ajx,0px)),calc(-100% - 12px + var(--ajy,0px)))}
.ce-bocadillo.ce-boc-rico.debajo{transform:translate(calc(-50% + var(--ajx,0px)),calc(12px + var(--ajy,0px)))}
/* En el móvil (solo sale al tocar un territorio cerrado), sin la miniatura: no cabe */
@media(max-width:768px){
  .ce-bocadillo.ce-boc-rico{width:216px}.ce-boc-img{display:none}
  .ce-boc-rico .ce-boc-tx b{font-size:15px}.ce-boc-rico .ce-boc-tx small{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .ce-ej-cuerpo.entra,.ce-ej-op.ok,.ce-ej-op.mal,.ce-ficha.unida,.ce-ficha.falla,.ce-ej-barra i.fallo,.ce-ej-racha.sube,.ce-ej-ver,.ce-ej-fin .ce-sello,
  .ce-pin-laurel,.ce-prev *,.ce-prev-cartas i{animation:none !important}
  .ce-prev,.ce-prev-cartas i,.ce-boc-img img{transition:none}
  .ce-ej-fin .ce-fi-caen{display:none}
}

/* La barra de desplazamiento de la estela (2026-10-15, CentroEntrenamiento._riel): la del navegador
   iba por todo el borde derecho y, arriba, asomaba fuera del arco. Esta va solo por el tramo recto */
.ce-hoja-caja{scrollbar-width:none}
.ce-hoja-caja::-webkit-scrollbar{display:none}
.ce-hoja-riel{position:absolute;z-index:2;width:5px;border-radius:3px;background:rgba(150,138,120,.14);pointer-events:none;opacity:.55;transition:opacity .3s}
.ce-hoja-riel[hidden]{display:none}
.ce-hoja .ce-hoja-riel.espera{opacity:0 !important;transition:none}
.ce-hoja-riel i{display:block;width:100%;border-radius:3px;background:rgba(104,92,74,.5);pointer-events:auto;cursor:grab;touch-action:none;transition:background .2s}
.ce-hoja:hover .ce-hoja-riel,.ce-hoja-riel.mueve,.ce-hoja-riel.arrastra{opacity:1}
.ce-hoja-riel i:hover,.ce-hoja-riel.arrastra i{background:rgba(104,92,74,.75)}
.ce-hoja-riel.arrastra i{cursor:grabbing}

/* ══ LA LLAMA DE HESTIA (2026-10-15) ════════════════════════════════════════════
   CentroEntrenamiento.llama, _pintarLlama y _llamaViva: la racha propia del Centro (días seguidos
   practicando en él), con sus ánforas de aceite. En la cabecera, un botón con la llama y el número. */
.ce-svg-llama{width:16px;height:20px;flex-shrink:0}
.ce-svg-llama .ll-f{fill:#F08A1C}.ce-svg-llama .ll-n{fill:#FDE68A}
.ce-btn-viaje.ce-btn-llama{gap:5px;padding:0 12px 0 10px}
.ce-btn-llama span{font:800 13.5px var(--font);color:#C2410C;font-variant-numeric:tabular-nums}
.ce-btn-llama.apagada .ll-f,.ce-ll-fuego.apagada .ll-f{fill:#B8B2A7}.ce-btn-llama.apagada .ll-n,.ce-ll-fuego.apagada .ll-n{fill:#E4DED3}
.ce-btn-llama.apagada span{color:#6B7280}
.ce-btn-llama.pendiente .ce-svg-llama,.ce-ll-fuego:not(.apagada) .ce-svg-llama,.ce-ll-aviso .ce-svg-llama{animation:ceLlamaBaila 1.5s ease-in-out infinite;transform-origin:50% 92%}
@keyframes ceLlamaBaila{0%,100%{transform:scale(1) skewX(0)}35%{transform:scale(1.05,1.08) skewX(-3deg)}70%{transform:scale(.97,1.03) skewX(2deg)}}
.ce-svg-anfora{width:22px;height:28px;flex-shrink:0}
.ce-svg-anfora .an-c{fill:#B9532E}.ce-svg-anfora .an-b{stroke:#F5D0A9;stroke-width:1.6;fill:none}.ce-svg-anfora .an-a{stroke:#B9532E;stroke-width:1.6;fill:none}
@media(max-width:768px){.ce-btn-viaje.ce-btn-llama{width:auto;padding:0 10px}.ce-btn-llama span{font-size:13px}}
/* La estela de la llama */
.ce-llama-hoja{display:grid;justify-items:center;gap:10px;text-align:center}
.ce-ll-fuego .ce-svg-llama{width:84px;height:105px;filter:drop-shadow(0 8px 14px rgba(240,138,28,.45))}
.ce-ll-fuego.apagada .ce-svg-llama{filter:none}
.ce-hoja-caja .ce-llama-hoja h2{margin:0;font:600 34px/1.1 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-hoja-caja .ce-llama-hoja > p{margin:0;max-width:36ch}
.ce-ll-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;margin-top:6px}
.ce-ll-dia{display:grid;justify-items:center;gap:5px;font:600 11.5px var(--font);color:#6B6F78}
.ce-ll-dia > span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#F3EDE2;box-shadow:inset 0 1px 3px rgba(80,60,30,.15)}
.ce-ll-dia .ce-svg-llama{width:17px;height:21px}.ce-ll-dia .ce-svg-anfora{width:16px;height:21px}
.ce-ll-dia.si > span{background:#FDEBD3}
.ce-ll-dia.anfora > span{background:#F6E2CF}
.ce-ll-dia.hoy > span{box-shadow:0 0 0 2px #E07A2E}
.ce-ll-dia.luego{opacity:.45}
.ce-ll-datos{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.ce-ll-datos span{display:grid;gap:2px;padding:10px;border-radius:12px;background:#F3EDE2;box-shadow:inset 0 2px 6px rgba(80,60,30,.12)}
.ce-ll-datos b{font:600 24px/1 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-ll-datos small{font:600 12px var(--font);color:#6B6F78}
.ce-hoja-caja .ce-llama-hoja .ce-ll-nota{display:flex;gap:10px;align-items:center;margin:0;text-align:left;font-size:13.5px;color:#4A4F5A}
.ce-hoja-caja .ce-llama-hoja .ce-ll-cultura{margin:0;font:italic 500 14.5px/1.45 Georgia,serif;color:#7A5A3A;max-width:42ch}
.ce-llama-hoja .ce-cta{margin-top:4px}
/* El aviso cuando la primera práctica del día la enciende */
.ce-ll-aviso{position:absolute;left:50%;top:clamp(14px,2vw,24px);z-index:8;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:9px 20px 9px 12px;border-radius:999px;
  background:rgba(251,248,242,.97);box-shadow:0 0 0 1px #E9C9A5,0 16px 34px -14px rgba(120,50,10,.5);animation:ceLlAviso .5s cubic-bezier(.2,1.3,.4,1) both;pointer-events:none}
.ce-ll-aviso .ce-svg-llama{width:26px;height:32px}
.ce-ll-aviso b{display:block;font:600 15px 'Cinzel',Georgia,serif;color:#9A3412}
.ce-ll-aviso small{font:500 12.5px var(--font);color:#6B4A2A}
.ce-ll-aviso.va{animation:ceSaludoVa .35s ease-in forwards}
@keyframes ceLlAviso{from{opacity:0;translate:-50% -14px;scale:.9}}
@media(max-width:768px){.ce-ll-aviso{top:calc(var(--ce-cab,76px) + 8px);max-width:calc(100% - 20px)}}
@media(prefers-reduced-motion:reduce){.ce-btn-llama.pendiente .ce-svg-llama,.ce-ll-fuego .ce-svg-llama,.ce-ll-aviso,.ce-ll-aviso .ce-svg-llama{animation:none}}

/* ══ LA FICHA DEL ORADOR: LOS CINCO CÁNONES (2026-10-15) ════════════════════════
   CentroEntrenamiento.ficha: inventio, dispositio, elocutio, memoria y actio, con su nivel, su
   barra hasta el siguiente y su maestro; el más flojo, en terracota, con qué hacer para reforzarlo */
.ce-ficha-hoja{--ac:#2C67AE}
.ce-canones{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--piedra)}
.ce-canones li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 4px;box-shadow:inset 0 -1px 0 var(--piedra),0 1px 0 #fff}
.ce-canon-ic{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--ac);
  background:radial-gradient(circle at 32% 28%,#fff 0,#F4F0E8 34%,#DCD3C3 80%,#BEB3A2 100%);box-shadow:inset -3px -4px 7px rgba(70,60,50,.22),0 0 0 1.5px color-mix(in srgb,var(--ac) 45%,#fff)}
.ce-canon-tx{display:grid;gap:2px;min-width:0}
.ce-canon-tx b{font:600 16px/1.2 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-canon-tx small{font:500 12.5px var(--font);color:#6B6F78}
.ce-canon-barra{display:block;height:8px;margin-top:5px;border-radius:8px;background:var(--piedra);box-shadow:inset 0 1px 2px rgba(60,45,20,.18);overflow:hidden}
.ce-canon-barra i{display:block;height:100%;border-radius:8px;background:var(--ac);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.ce-canon-nv{display:grid;justify-items:center;min-width:44px}
.ce-canon-nv b{font:600 24px/1 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-canon-nv small{font:600 11px var(--font);color:#6B6F78}
.ce-canones li.flojo{--ac:#B9532E}
.ce-canones li.flojo .ce-canon-tx b{color:#9A3E1E}
.ce-canon-rec{--ac:#B9532E;display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#F8ECE3;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #EFD3C2}
.ce-canon-rec > span:nth-child(2){flex:1;display:grid;gap:2px;min-width:0}
.ce-canon-rec b{font:600 15px 'Cinzel',Georgia,serif;color:#8C3517}
.ce-canon-rec small{font:500 13px/1.4 var(--font);color:#5A4A40}
.ce-hoja-caja .ce-canon-rec .ce-cta{width:auto;margin:0;padding:10px 18px;font-size:14px}
/* El aviso al subir de nivel un canon: como el de la llama, en azul */
.ce-canon-aviso{box-shadow:0 0 0 1px #BFD3EE,0 16px 34px -14px rgba(20,50,110,.45)}
.ce-canon-aviso .ce-canon-ic{width:32px;height:32px;font-size:16px;--ac:#2C67AE}
.ce-canon-aviso b{color:#1F4E8C}
.ce-canon-aviso small{color:#4A5A72}

/* ══ EL OSTRACISMO (2026-10-15) ═══════════════════════════════════════════════════
   El primer juego de la Arena: se destierra la peor de cuatro frases. La desterrada queda tachada,
   con su óstrakon (el trozo de vasija con el que votaban los atenienses) encima, como un sello */
.ce-ej-ostra .ce-ej-op span{font:500 15px/1.45 var(--font)}
.ce-ej-op.desterrada{border-color:#B9532E;background:#FBEDE6;color:#8C3517;box-shadow:0 3px 0 #EBC1AF;overflow:visible}
.ce-ej-op.desterrada span{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.75}
.ce-ej-op.desterrada::after{content:'Desterrada';margin-left:auto;padding:5px 12px 6px;rotate:-6deg;flex-shrink:0;
  font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#FBE7D8;background:#9A3E1E;
  clip-path:polygon(4% 18%,30% 2%,72% 6%,98% 24%,94% 82%,62% 100%,20% 94%,0 70%);animation:ceOstrakon .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes ceOstrakon{from{opacity:0;scale:1.8;rotate:-20deg}}
@media(prefers-reduced-motion:reduce){.ce-ej-op.desterrada::after{animation:none}}

/* ══ EL PÚBLICO (2026-10-15) ══════════════════════════════════════════════════════
   CentroEntrenamiento._publico: cuántos atenienses escuchan al alumno, con seis aforos. En la ficha,
   un teatro cuyas gradas se llenan hasta el siguiente aforo; al final de una práctica, los ganados */
.ce-publico{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:14px;align-items:center;margin:0 0 14px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(180deg,#EEF4FB,#F7F3EA);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #DCE4EE}
.ce-pub-teatro{display:block;width:100%;height:auto}
.ce-pub-teatro .esc{fill:#E4DBCB}
.ce-pub-teatro circle.si{fill:#17858A}
.ce-pub-teatro circle.no{fill:#F3EDE2;stroke:#D8CFBF;stroke-width:.8}
.ce-pub-tx{display:grid;gap:4px;min-width:0}
.ce-pub-cifra{font:500 14px/1.3 var(--font);color:#3A3F4A}
.ce-pub-cifra b{display:block;font:600 30px/1.05 'Cinzel',Georgia,serif;color:var(--tinta);font-variant-numeric:tabular-nums}
.ce-pub-tx small{font:italic 500 13.5px/1.35 Georgia,serif;color:#17707A}
.ce-pub-sig{font:600 12.5px var(--font);color:#4A4F5A}
.ce-pub-se{font:600 12px var(--font);color:#9A3E1E}
.ce-hoja-caja .ce-ficha-intro{margin:0 0 12px;font-size:13.5px;color:#4A4F5A}
@media(max-width:520px){.ce-publico{grid-template-columns:minmax(0,1fr)}.ce-pub-teatro{max-width:240px;margin:0 auto}}
.ce-ej .ce-ej-publico{display:flex;gap:7px;align-items:center;justify-content:center;margin:12px 0 0;font:700 14px var(--font);color:#17707A}
.ce-ej .ce-ej-publico[hidden]{display:none}
.ce-pub-aviso{box-shadow:0 0 0 1px #A9D6D2,0 16px 34px -14px rgba(10,80,80,.45)}
.ce-pub-aviso .ce-canon-ic{width:32px;height:32px;font-size:16px;--ac:#17858A}
.ce-pub-aviso b{color:#0F5F63}.ce-pub-aviso small{color:#3E5E60}

/* ══ LA MISIÓN DEL ORÁCULO (2026-10-15) ═══════════════════════════════════════════
   CentroEntrenamiento._misionHtml: arriba del Oráculo, el encargo para la vida real del día, en sus
   estados (oferta, aceptada, por contar y contada). Violeta de oráculo, con la frase en cursiva */
.ce-mh{display:grid;gap:8px;margin:0 0 16px;padding:16px 18px;border-radius:16px;text-align:left;
  background:radial-gradient(120% 140% at 50% 120%,color-mix(in srgb,var(--ac) 14%,#fff),#FDFBF7 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 26%,#fff),0 10px 24px -18px color-mix(in srgb,var(--ac) 70%,#000)}
.ce-mh-et{display:inline-flex;align-items:center;gap:6px;font:600 12.5px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:var(--ac)}
.ce-mh q{display:block;font:italic 500 17.5px/1.45 Georgia,serif;color:var(--tinta);quotes:'«' '»'}
.ce-hoja-caja .ce-mh .ce-mh-pie{margin:0;font-size:13px;color:#5A5F6A}
.ce-mh .ce-cta{margin-top:4px}
.ce-mh-ya{justify-self:start;padding:8px 14px;border-radius:10px;border:0;cursor:pointer;font:700 13px var(--font);color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ac) 40%,#fff)}
.ce-mh-preg{font:600 15px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-mh-botones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ce-mh-r{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:12px;cursor:pointer;font:700 13px var(--font);color:var(--tinta);
  background:#FDFBF7;border:1.5px solid var(--piedra);box-shadow:0 3px 0 var(--piedra);transition:translate .12s,border-color .15s}
.ce-mh-r i{font-size:20px;color:var(--ac)}
.ce-mh-r:hover:not(:disabled){border-color:var(--ac)}
.ce-mh-r:active:not(:disabled){translate:0 2px;box-shadow:0 1px 0 var(--piedra)}
.ce-mh-r:disabled{opacity:.6;cursor:wait}
.ce-mh-lab{font:600 12px var(--font);color:#5A5F6A}
.ce-mh-nota{width:100%;resize:vertical;padding:9px 11px;border-radius:10px;border:1px solid var(--piedra);background:#fff;font:500 14px/1.4 var(--font);color:var(--tinta)}
.ce-mh-nota:focus,.ce-mh-r:focus-visible,.ce-mh-ya:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-mh.hecha .ce-mh-et{color:#2F8A4F}
.ce-ap-nota{margin-top:4px !important;font-style:italic;color:#6A55A8 !important}
.ce-mis-aviso{box-shadow:0 0 0 1px #D2C9EC,0 16px 34px -14px rgba(60,40,120,.45)}
.ce-mis-aviso .ce-canon-ic{width:32px;height:32px;font-size:16px;--ac:#6A55A8}
.ce-mis-aviso b{color:#4A3A86}.ce-mis-aviso small{color:#5A5274}

/* ══ EL KAIRÓS (2026-10-15) ══════════════════════════════════════════════════════
   CentroEntrenamiento.kairos: la cita diaria con el reto relámpago. En la cabecera, un reloj de
   arena con la hora; al llegar, dorado y latiendo. En el reto, la cuenta atrás arriba */
.ce-btn-viaje.ce-btn-kairos{gap:5px;padding:0 12px 0 10px}
.ce-btn-kairos span{font:800 13px var(--font);font-variant-numeric:tabular-nums}
.ce-btn-kairos.abierto{background:linear-gradient(180deg,#FFE7A0,#F2C14E);border-color:#C99A2A;color:#5B3D0C;animation:ceKairos 1.2s ease-in-out infinite}
.ce-btn-kairos.hecho{color:#2F8A4F}
@keyframes ceKairos{50%{box-shadow:0 0 0 6px rgba(242,193,78,.35)}}
/* En el móvil, la cabecera va en una fila: el reloj del kairós, solo con su icono (dorado y latiendo
   cuando está abierto), y los números de la ficha y del cuaderno, en la esquina del botón; si no, el
   nombre del territorio no cabía */
@media(max-width:768px){
  .ce-btn-viaje.ce-btn-kairos{width:38px;padding:0}.ce-btn-kairos span{display:none}
  .ce-tit-acc{gap:4px}
  .ce-tit-acc .ce-btn-viaje{position:relative}
  .ce-tit-acc .ce-cuad-n{position:absolute;top:-5px;right:-6px;margin:0;min-width:17px;height:17px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px #fff}
  .ce-titulo .hub-ceja{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
.ce-ej-reloj{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#FBF0D2;color:#7A5410;font:800 13px var(--font);font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px #E8CF8E}
.ce-ej-reloj[hidden]{display:none}
.ce-ej-reloj.apura{background:#FBE1D5;color:#A33A16;box-shadow:0 0 0 1px #EFB79E;animation:ceLaurel .5s ease-in-out infinite}
.ce-kairos-hoja{display:grid;justify-items:center;gap:10px;text-align:center}
.ce-hoja-caja .ce-kairos-hoja h2{margin:0;font:600 30px/1.1 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-hoja-caja .ce-kairos-hoja > p{margin:0;max-width:38ch}
@media(prefers-reduced-motion:reduce){.ce-btn-kairos.abierto,.ce-ej-reloj.apura{animation:none}}

/* ══ LAS SIRENAS (2026-10-15) ═════════════════════════════════════════════════════
   CentroEntrenamiento._sirenas: la frase sale de la isla de las sirenas (a la derecha) y avanza
   por el mar hacia el barco del alumno (a la izquierda). Todas las palabras flotan igual, para que
   no se distingan las muletillas: la espantada salta y se hunde; la que llega al barco canta */
.ce-sir{margin-top:14px}
.ce-sir-mar{position:relative;height:clamp(150px,27vh,210px);border-radius:16px;overflow:hidden;outline:none;
  background:radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,.55),transparent 55%),linear-gradient(180deg,#BFE3EC 0%,#7CC0D4 22%,#2F89AC 52%,#1B5D85 100%);
  box-shadow:inset 0 2px 12px rgba(0,30,60,.35),0 1px 0 #fff}
.ce-sir-olas{position:absolute;left:0;right:-120px;bottom:0;height:70%;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22'%3E%3Cpath d='M0 11q15-9 30 0t30 0' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") repeat;
  background-size:60px 22px;animation:ceOlas 5s linear infinite}
@keyframes ceOlas{to{translate:-60px 0}}
.ce-sir-tira{position:absolute;left:0;top:44%;display:flex;align-items:center;gap:9px;white-space:nowrap;will-change:transform;z-index:2;translate:0 -50%}
.ce-sir-p{flex-shrink:0;padding:7px 12px 8px;border-radius:10px;border:0;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  font:600 17px/1.2 var(--font);color:#1E2B3A;background:#FDFBF7;box-shadow:0 3px 0 #BFD0DA,0 8px 14px -8px rgba(0,25,50,.6);
  animation:ceFlota 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s)}
@keyframes ceFlota{50%{translate:0 -5px}}
.ce-sir-p.espantada{pointer-events:none;animation:ceEspanta .55s cubic-bezier(.3,1.4,.5,1) forwards;background:#E7F4EA;color:#1F6B3A;box-shadow:0 3px 0 #A9D8B7}
@keyframes ceEspanta{25%{scale:1.22;translate:0 -14px}to{scale:.3;translate:0 40px;opacity:0;rotate:-14deg}}
.ce-sir-p.canta{position:relative;background:#F6D58E;color:#7A3A12;box-shadow:0 3px 0 #D9A84A,0 0 18px 4px rgba(246,213,142,.7);animation:none}
.ce-sir-p.canta::before,.ce-sir-p.canta::after{content:'♪';position:absolute;top:-6px;left:30%;font:700 16px Georgia,serif;color:#FFF3D4;text-shadow:0 1px 3px rgba(120,60,0,.6);animation:ceNotaSube 1.3s ease-out forwards}
.ce-sir-p.canta::after{content:'♫';left:62%;animation-delay:.2s}
@keyframes ceNotaSube{from{opacity:0}20%{opacity:1}to{opacity:0;translate:6px -34px}}
.ce-sir-p.falla{animation:ceFalla .5s}
.ce-sir-p:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-sir-isla{position:absolute;right:-6px;bottom:0;width:clamp(66px,7vw,84px);z-index:3;pointer-events:none}
.ce-sir-isla svg{display:block;width:100%;height:auto}
.ce-sir-isla text{font:700 15px Georgia,serif;fill:#FFF3D4}
.ce-sir-mar.navega .ce-sir-isla .n1{animation:ceNotaIsla 1.8s ease-in-out infinite}
.ce-sir-mar.navega .ce-sir-isla .n2{animation:ceNotaIsla 1.8s ease-in-out .6s infinite}
@keyframes ceNotaIsla{50%{opacity:.3;translate:0 -5px}}
.ce-sir-barco{position:absolute;left:4px;bottom:16px;width:clamp(80px,9vw,100px);z-index:3;pointer-events:none;transform-origin:50% 85%;animation:ceBalanceo 3.4s ease-in-out infinite}
.ce-sir-barco svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(0,25,50,.35))}
@keyframes ceBalanceo{50%{rotate:-3deg;translate:0 2px}}
.ce-sir-barco.atrapado{animation:ceAtrapado .7s ease-in-out}
@keyframes ceAtrapado{25%{rotate:8deg}55%{rotate:-6deg}80%{rotate:3deg}}
.ce-sir-zarpar{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:600 17px 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#fff;background:rgba(14,52,80,.42);text-shadow:0 1px 4px rgba(0,0,0,.4);transition:background .2s}
.ce-sir-zarpar i{font-size:24px}
.ce-sir-zarpar:hover{background:rgba(14,52,80,.3)}
.ce-sir-zarpar:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.ce-sir-mar.fin .ce-sir-tira{opacity:0;transition:opacity .3s}
.ce-sir-cuenta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:10px 2px 0;font:600 13.5px var(--font);color:#4A4F5A}
.ce-sir-cuenta b{font:700 17px 'Cinzel',Georgia,serif;color:var(--ac)}
.ce-sir-cuenta small{font:600 12px 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#8A8F99}
.ce-ej .ce-sir-ojo{display:block;margin-top:4px;font:italic 500 14.5px Georgia,serif;color:#9A3E1E}
.ce-ej .ce-sir-frase{position:absolute;left:50%;top:50%;z-index:5;width:calc(100% - 56px);max-width:440px;margin:0;padding:12px 16px;translate:-50% -50%;border-radius:12px;text-align:center;
  background:rgba(253,251,247,.97);box-shadow:0 10px 24px -10px rgba(0,25,50,.6);font:500 17px/1.7 Georgia,serif;color:var(--tinta);animation:ceTablilla .35s cubic-bezier(.2,1.3,.4,1) both}
@keyframes ceTablilla{from{opacity:0;scale:.85}}
.ce-sir-frase s{padding:1px 5px;border-radius:6px;text-decoration-thickness:2px}
.ce-sir-frase s.ok{color:#2F7A4A;background:#E1F1E6}
.ce-sir-frase s.mal{color:#9A3E1E;background:#F9DCCB;text-decoration:none;font-weight:700}
.ce-sir-frase u{text-decoration:underline wavy #C25A34;text-underline-offset:4px}
.ce-ej-ver b.largo{font-size:16px;line-height:1.3}
.ce-sir-limpia{display:block;margin-top:4px;font:italic 500 14px/1.4 Georgia,serif;color:#2F7A4A}
@media(max-width:520px){.ce-sir-limpia{display:none}}
@media(max-width:520px){.ce-ej-ver b{font-size:17px}.ce-ej-ver b.largo{font-size:15px}}
@media(max-width:520px){.ce-sir-mar{height:150px}.ce-sir-p{font-size:16px;padding:6px 10px 7px}.ce-sir-barco{width:76px}.ce-sir-isla{width:64px}.ce-ej .ce-sir-frase{width:calc(100% - 28px);font-size:16px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.ce-sir-p,.ce-sir-olas,.ce-sir-barco,.ce-sir-isla text{animation:none !important}}

/* ══ EL ORÁCULO AMBIGUO (2026-10-15) ═════════════════════════════════════════════
   El juego del Teatro: la historia de una profecía de doble sentido, en una tablilla oscura con
   el humo de Delfos, y debajo los cuatro mensajes de hoy, de los que hay que elegir el claro */
.ce-orac-mito{position:relative;margin:12px 0 0;padding:16px 18px 17px;border-radius:14px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#3B3350 0%,#272138 60%,#1E1A2C 100%);box-shadow:inset 0 0 0 1px rgba(232,206,140,.28),0 10px 22px -14px rgba(30,20,50,.8)}
.ce-orac-humo{position:absolute;inset:-40%;z-index:-1;opacity:.55;pointer-events:none;
  background:radial-gradient(40% 30% at 30% 70%,rgba(190,170,230,.35),transparent 70%),radial-gradient(35% 25% at 70% 40%,rgba(232,206,140,.22),transparent 70%);
  animation:ceHumo 9s ease-in-out infinite alternate}
@keyframes ceHumo{to{translate:6% -8%;rotate:8deg}}
.ce-orac-mito figcaption{display:flex;align-items:center;gap:7px;font:600 14px/1.3 'Cinzel',Georgia,serif;letter-spacing:.05em;color:#E8CE8C}
.ce-orac-mito figcaption i{font-size:18px}
.ce-ej .ce-orac-mito p{margin:7px 0 0;font:italic 500 15px/1.55 Georgia,serif;color:#EDE6F5}
.ce-ej-orac .ce-ej-op span{font:500 15px/1.45 var(--font)}
@media(max-width:520px){.ce-orac-mito{padding:13px 14px 14px}.ce-ej .ce-orac-mito p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.ce-orac-humo{animation:none}}

/* ══ EL PALACIO DE LA MEMORIA (2026-10-15) ═══════════════════════════════════════
   El juego del Olimpo: la planta de una casa griega, con sus salas en zigzag (numeradas en el orden
   en que se recorren) sobre los muros de piedra. En el paseo, la sala que se visita se enciende;
   al recordar, las salas vacías esperan con borde de trazos y la siguiente, resaltada */
.ce-pal-truco{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#FBF3DF;box-shadow:inset 0 0 0 1px #EBD9AE;
  font:italic 500 14px/1.45 Georgia,serif;color:#5B4A22}
.ce-pal-truco i{flex-shrink:0;font-size:19px;color:#B07D1A;margin-top:1px}
.ce-pal-casa{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:7px;margin:12px 0 0;padding:9px;list-style:none;border-radius:16px;
  background:linear-gradient(135deg,#D8C7A2,#C9B48C);box-shadow:inset 0 0 0 2px #B9A277,0 8px 18px -12px rgba(80,60,30,.6)}
.ce-pal-sala{position:relative;display:flex;flex-direction:column;gap:7px;min-height:96px;padding:9px 10px 11px;border-radius:9px;outline:none;
  background:#F8F1E2 repeating-linear-gradient(45deg,transparent 0 14px,rgba(176,150,100,.07) 14px 15px);box-shadow:inset 0 1px 0 #fff;
  transition:box-shadow .3s,background-color .3s,scale .3s}
.ce-pal-nom{display:flex;align-items:center;gap:6px;font:600 11px/1.2 'Cinzel',Georgia,serif;letter-spacing:.05em;color:#8A6A3A}
.ce-pal-nom b{flex-shrink:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 11px 'Cinzel',Georgia,serif;color:#fff;background:#B08A4E}
.ce-pal-idea{display:flex;gap:7px;align-items:flex-start;font:600 13.5px/1.35 var(--font);color:var(--tinta)}
.ce-pal-idea:not(:empty){animation:ceEjEntra .35s ease-out}
.ce-pal-idea i{flex-shrink:0;font-size:20px;color:var(--ac)}
.ce-pal-sala.paso{background-color:#FFF4D6;box-shadow:0 0 0 3px #E8B64A,0 0 22px rgba(232,182,74,.65);scale:1.03;z-index:1}
.ce-pal-sala.paso .ce-pal-nom b{background:#D9952A}
.ce-pal-guia{margin:11px 2px 0;font:italic 500 14px/1.45 Georgia,serif;color:#5A5F6A}
.ce-pal-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:12px}
.ce-pal-acc [hidden]{display:none}
.ce-pal-acc .ce-cta{margin:0}
.ce-pal[data-fase="recordar"] .ce-pal-sala{cursor:pointer;box-shadow:inset 0 0 0 1.5px #CDB78E}
.ce-pal[data-fase="recordar"] .ce-pal-sala:not(.llena){background:rgba(248,241,226,.55)}
.ce-pal[data-fase="recordar"] .ce-pal-sala.siguiente{box-shadow:inset 0 0 0 2px var(--ac),0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}
.ce-pal-sala:focus-visible{box-shadow:0 0 0 3px var(--t-blue) !important}
.ce-pal.corregida .ce-pal-sala{cursor:default}
.ce-pal-sala.ok{background:#E7F4EA;box-shadow:inset 0 0 0 2px #7CC294 !important}
.ce-pal-sala.mal{background:#FBEDE6;box-shadow:inset 0 0 0 2px #E2A285 !important}
.ce-pal-sala.mal .ce-pal-idea{color:#8C3517}
.ce-pal-era{margin-bottom:-3px;font:600 11px var(--font);color:#9A3E1E}
.ce-pal-banco{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ce-pal-banco[hidden]{display:none}
.ce-pal-ficha{padding:8px 11px;font-size:13.5px}
.ce-pal-ficha i{font-size:18px;color:var(--ac)}
.ce-pal-ficha.usada{display:none}
@media(max-width:520px){.ce-pal-sala{min-height:88px;padding:8px 8px 10px}.ce-pal-idea{font-size:13px}}
@media(prefers-reduced-motion:reduce){.ce-pal-sala{transition:none}.ce-pal-sala.paso{scale:none}}

/* ══ MAYÉUTICA (2026-10-15) ═══════════════════════════════════════════════════════
   El juego de los Jardines: una conversación con Sócrates, en bocadillos. Los suyos, a la izquierda
   con su retrato; los del alumno, a la derecha. Lo hablado en pasos anteriores, más tenue; las
   contrapreguntas, en tono terracota; las respuestas que no avanzan quedan tachadas */
.ce-may-tema{display:flex;align-items:center;gap:7px;margin:10px 0 0;font:600 15px/1.3 'Cinzel',Georgia,serif;color:var(--ac)}
.ce-may-chat{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ce-may-s,.ce-may-yo{display:flex;align-items:flex-end;gap:8px;max-width:88%;animation:ceBocadillo .3s ease-out both}
@keyframes ceBocadillo{from{opacity:0;translate:0 8px}}
.ce-may-s .ce-maestro-ret{flex-shrink:0;width:34px;height:34px;background:radial-gradient(circle at 32% 28%,#fff,#E6DED0);box-shadow:0 0 0 2px #CBBFA8}
.ce-may-s .ce-maestro-ret svg{width:32px;height:32px}
.ce-may-s p,.ce-may-yo p{margin:0;padding:10px 13px;border-radius:16px;font:500 15px/1.45 var(--font)}
.ce-may-s p{border-bottom-left-radius:5px;background:#FDFBF7;color:var(--tinta);box-shadow:0 0 0 1px var(--piedra),0 2px 0 var(--piedra)}
.ce-ej .ce-may-s .ce-ej-enun{margin:0;font:italic 500 16.5px/1.45 Georgia,serif}
.ce-may-yo{align-self:flex-end}
.ce-may-yo p{border-bottom-right-radius:5px;color:#fff;background:var(--ac);box-shadow:0 2px 0 color-mix(in srgb,var(--ac) 60%,#000)}
.ce-may-s.replica p{background:#FBEDE6;color:#8C3517;box-shadow:0 0 0 1px #EBC1AF,0 2px 0 #EBC1AF;font-style:italic}
.ce-may-chat .antes{opacity:.6;animation:none}
.ce-may-chat .antes p{font-size:13.5px;padding:7px 11px}
.ce-may-chat .ce-may-s.antes .ce-maestro-ret{width:26px;height:26px}
.ce-may-chat .ce-may-s.antes .ce-maestro-ret svg{width:24px;height:24px}
.ce-may-ops[hidden]{display:none}
.ce-may-ops{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--piedra)}
.ce-may-op{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border-radius:14px;cursor:pointer;text-align:left;
  font:600 15px/1.4 var(--font);color:var(--ac);background:#fff;border:1.5px solid color-mix(in srgb,var(--ac) 45%,var(--piedra));box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 30%,var(--piedra));
  transition:translate .12s,box-shadow .12s,opacity .2s}
.ce-may-op:hover:not(:disabled){background:color-mix(in srgb,var(--ac) 6%,#fff)}
.ce-may-op:active:not(:disabled){translate:0 2px;box-shadow:0 1px 0 color-mix(in srgb,var(--ac) 30%,var(--piedra))}
.ce-may-op:disabled{cursor:default;opacity:.55}
.ce-may-op.tachada span{text-decoration:line-through}
.ce-may-op:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-ej .ce-may-idea{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.6);font:italic 500 15px/1.45 Georgia,serif;color:var(--tinta)}
.ce-may-idea small{display:block;font:600 11px 'Cinzel',Georgia,serif;font-style:normal;letter-spacing:.06em;color:#2F7A4A}
@media(prefers-reduced-motion:reduce){.ce-may-s,.ce-may-yo{animation:none}}

/* ══ LA CLEPSIDRA (2026-10-15) ════════════════════════════════════════════════════
   El juego de la Academia, el Liceo y la Asamblea: el tema en una tablilla, el reloj de agua (el
   de arriba se vacía y el de abajo se llena en --dur, con gotas cayendo) y, al lado, la estructura,
   con el paso de ahora resaltado y cómo empezarlo. Al acabar, «¿Cómo te ha ido?» */
.ce-cle-tema{margin-top:12px;padding:13px 15px;border-radius:14px;background:#F3EDE2;box-shadow:inset 0 2px 7px rgba(80,60,30,.14),0 1px 0 #fff}
.ce-cle-tema small{display:block;font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.07em;color:var(--ac)}
.ce-ej .ce-cle-tema .ce-ej-enun{margin:4px 0 0;font:italic 500 18px/1.45 Georgia,serif}
.ce-cle{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;margin-top:14px}
.ce-cle-reloj{display:grid;justify-items:center;gap:4px}
.ce-cle-reloj svg{display:block;width:100%;height:auto}
.ce-cle-t{font:600 20px 'Cinzel',Georgia,serif;color:var(--tinta);font-variant-numeric:tabular-nums}
.ce-cle-agua{transform-box:fill-box;transform-origin:50% 100%}
.ce-cle-agua.abajo{transform:scaleY(0)}
.ce-cle.corre .ce-cle-agua.arriba{animation:ceVacia var(--dur,60s) linear forwards}
.ce-cle.corre .ce-cle-agua.abajo{animation:ceLlena var(--dur,60s) linear forwards}
@keyframes ceVacia{to{transform:scaleY(0)}}
@keyframes ceLlena{to{transform:scaleY(1)}}
.ce-cle-gota{opacity:0}
.ce-cle.corre:not(.parada) .ce-cle-gota{animation:ceGota .9s ease-in infinite}
.ce-cle.corre .g2{animation-delay:.3s !important}.ce-cle.corre .g3{animation-delay:.6s !important}
@keyframes ceGota{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:.8;transform:translateY(30px)}}
.ce-cle.parada .ce-cle-agua{animation-play-state:paused}
.ce-cle-pasos{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ce-cle-pasos li{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:12px;background:#FDFBF7;box-shadow:0 0 0 1px var(--piedra);transition:background .3s,box-shadow .3s,opacity .3s}
.ce-cle-n{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 12px 'Cinzel',Georgia,serif;color:var(--ac);box-shadow:inset 0 0 0 1.5px currentColor}
.ce-cle-pasos li > span:last-child{display:grid;gap:1px;min-width:0}
.ce-cle-pasos b{font:600 14px/1.25 var(--font);color:var(--tinta)}
.ce-cle-pasos em{font:italic 500 14px/1.3 Georgia,serif;color:#6A6F7A}
.ce-cle-pasos li.ahora{background:color-mix(in srgb,var(--ac) 10%,#fff);box-shadow:0 0 0 2px var(--ac),0 6px 14px -8px color-mix(in srgb,var(--ac) 70%,transparent);animation:ceLaurel .45s ease-out}
.ce-cle-pasos li.ahora .ce-cle-n{color:#fff;background:var(--ac);box-shadow:none}
.ce-cle-pasos li.ahora em{color:var(--ac);font-size:15.5px}
.ce-cle-pasos li.hecho{opacity:.6}
.ce-cle-pasos li.hecho .ce-cle-n{color:#fff;background:#3E9B5E;box-shadow:none}
.ce-cle-nota{display:flex;gap:7px;align-items:center;margin:12px 0 0;font:500 13px/1.4 var(--font);color:#6A6F7A}
.ce-cle-nota i{font-size:17px;color:var(--ac)}
.ce-cle-acc{display:flex;justify-content:center;margin-top:12px}
.ce-cle-acc[hidden]{display:none}
.ce-cle-acc .ce-cta{margin:0}
.ce-cle-eval{display:grid;gap:9px;margin-top:14px;padding:13px 14px;border-radius:14px;background:#F6F0E4;box-shadow:inset 0 0 0 1px var(--piedra);animation:ceEjEntra .3s ease-out}
.ce-cle-eval[hidden]{display:none}
.ce-cle-eval > b{font:600 15px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-cle-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ce-cle-res .ce-mh-r{flex-direction:column;justify-content:center;gap:5px;padding:11px 6px;text-align:center}
.ce-cle-res .ce-mh-r.elegida{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,#fff)}
@media(max-width:520px){.ce-cle{grid-template-columns:80px minmax(0,1fr);gap:12px}.ce-cle-t{font-size:17px}.ce-cle-pasos li{padding:7px 9px}.ce-cle-pasos em{font-size:13.5px}
  .ce-cle-res{grid-template-columns:minmax(0,1fr)}.ce-cle-res .ce-mh-r{flex-direction:row;justify-content:flex-start;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.ce-cle.corre .ce-cle-gota{animation:none}.ce-cle-pasos li.ahora{animation:none}}

/* ══ LAS COLECCIONES (2026-10-15) ═════════════════════════════════════════════════
   CentroEntrenamiento.coleccion: dentro de la ficha. Las cartas de oradores, con un medallón por
   época (Grecia en terracota sobre negro, como sus vasijas; Roma en rojo pompeyano y oro; los
   tiempos modernos en tinta azul); las que faltan, apagadas, con cómo se ganan. Las palabras con
   historia, con su rareza: común (piedra), rara (aguamarina) y legendaria (oro) */
.ce-ficha-n{margin-left:5px}
.ce-carta-med{flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:600 21px 'Cinzel',Georgia,serif;line-height:1;
  color:#F6D9B5;background:radial-gradient(circle at 35% 30%,#3A2C25,#15100D);box-shadow:inset 0 0 0 2px #C8693A,inset 0 0 0 4px #15100D,inset 0 0 0 5px rgba(200,105,58,.6),0 4px 10px -4px rgba(0,0,0,.5)}
.ce-carta-med.ro{color:#F4DFA0;background:radial-gradient(circle at 35% 30%,#A63A32,#5E1A16);box-shadow:inset 0 0 0 2px #D9B25A,inset 0 0 0 4px #5E1A16,inset 0 0 0 5px rgba(217,178,90,.6),0 4px 10px -4px rgba(0,0,0,.5)}
.ce-carta-med.mo{color:#fff;background:radial-gradient(circle at 35% 30%,#3D6FA3,#1D3D63);box-shadow:inset 0 0 0 2px #A9C4E3,inset 0 0 0 4px #1D3D63,inset 0 0 0 5px rgba(169,196,227,.6),0 4px 10px -4px rgba(0,0,0,.5)}
.ce-col-entrada{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:11px 14px;border-radius:14px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,#FBF6EC,#F3EADA);border:1.5px solid #E2D3B4;box-shadow:0 3px 0 #E2D3B4;transition:translate .12s,box-shadow .12s}
.ce-col-entrada:hover{border-color:#CDB78E}
.ce-col-entrada:active{translate:0 2px;box-shadow:0 1px 0 #E2D3B4}
.ce-col-entrada:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-col-pila{display:flex;flex-shrink:0}
.ce-col-pila .ce-carta-med{width:36px;height:36px;font-size:16px}
.ce-col-pila .ce-carta-med + .ce-carta-med{margin-left:-12px}
.ce-col-tx{flex:1;display:grid;gap:2px;min-width:0}
.ce-col-tx b{font:600 15px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-col-tx small{font:500 12.5px/1.35 var(--font);color:#5A5F6A}
.ce-col-nuevas{flex-shrink:0;padding:3px 9px;border-radius:999px;font:800 11.5px var(--font);font-style:normal;color:#5B3D0C;background:#F2C14E}
.ce-col-entrada > .ti{font-size:18px;color:#8A6A3A}
.ce-col-tabs{display:flex;gap:6px;margin:0 0 12px;padding:4px;border-radius:14px;background:#EFE7D8}
.ce-col-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border:0;border-radius:10px;cursor:pointer;background:none;font:700 14px var(--font);color:#5A5F6A}
.ce-col-tabs button small{font:700 11.5px var(--font);color:#8A8F99}
.ce-col-tabs button[aria-selected="true"]{background:#fff;color:var(--tinta);box-shadow:0 2px 6px -2px rgba(60,45,20,.3)}
.ce-col-tabs button:focus-visible{outline:3px solid var(--t-blue);outline-offset:1px}
.ce-col-panel[hidden]{display:none}
.ce-hoja-caja .ce-col-era{margin:16px 0 8px;font:600 13px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#8A6A3A}
.ce-cartas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.ce-carta{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;height:100%;padding:14px 8px 12px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,#FFFDF8,#F5ECDC);border:1.5px solid #E4D5B8;box-shadow:0 3px 0 #E4D5B8}
button.ce-carta{cursor:pointer;transition:translate .15s,box-shadow .15s}
button.ce-carta:hover{translate:0 -2px;box-shadow:0 5px 0 #E4D5B8,0 10px 18px -12px rgba(80,60,30,.5)}
button.ce-carta:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-carta b{font:600 13px/1.25 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-carta small{font:500 11.5px/1.35 var(--font);color:#7A7F8A}
.ce-carta-can{display:flex;gap:4px;color:#8A6A3A;font-size:15px}
.ce-carta.nueva{border-color:#E8B64A;box-shadow:0 3px 0 #E8B64A,0 0 0 3px rgba(242,193,78,.3)}
.ce-carta em{position:absolute;top:-7px;right:-5px;padding:2px 8px;border-radius:999px;font:800 10.5px var(--font);font-style:normal;color:#5B3D0C;background:#F2C14E;rotate:6deg}
.ce-carta.cerrada{background:#EFE9DE;border-style:dashed;box-shadow:none}
.ce-carta.cerrada .ce-carta-med{color:#A39B8C;background:#E2DACB;box-shadow:inset 0 0 0 2px #CFC5B3;font-size:18px}
.ce-carta.cerrada b{color:#8A8478}
.ce-pal-hoy{display:grid;gap:5px;margin:0 0 10px;padding:15px 16px;border-radius:16px;background:linear-gradient(160deg,#F7F2E8,#EDE3D1);box-shadow:inset 0 0 0 1.5px #D8C9AA}
.ce-pal-hoy small{font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.07em;color:#8A6A3A}
.ce-pal-hoy b{font:600 30px/1.1 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-pal-hoy span{font:italic 500 15px/1.45 Georgia,serif;color:#3A3F4A}
.ce-pal-hoy em{display:flex;align-items:center;gap:6px;font:700 13px var(--font);font-style:normal;color:#8A6A3A}
.ce-pal-hoy.r2{background:linear-gradient(160deg,#EEF7F6,#DDEFEC);box-shadow:inset 0 0 0 1.5px #9CCFC6}
.ce-pal-hoy.r3{background:linear-gradient(160deg,#FFF7DD,#F8E4A8);box-shadow:inset 0 0 0 1.5px #E2B648,0 0 0 3px rgba(242,193,78,.25)}
.ce-palabras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.ce-palabra{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-content:start;padding:11px 13px;border-radius:13px;background:#FDFBF7;box-shadow:inset 0 0 0 1.5px #E2DACB}
.ce-palabra b{font:600 17px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-pal-rar{align-self:center;padding:2px 8px;border-radius:999px;font:700 10.5px var(--font);color:#6A6F7A;background:#EEE9DF}
.ce-palabra small{grid-column:1/-1;font:600 12px var(--font);color:#8A6A3A}
.ce-hoja-caja .ce-palabra p{grid-column:1/-1;margin:3px 0 0;font:italic 500 14px/1.45 Georgia,serif;color:#3A3F4A}
.ce-palabra.r2{box-shadow:inset 0 0 0 1.5px #9CCFC6}.ce-palabra.r2 .ce-pal-rar{color:#14706A;background:#DDEFEC}
.ce-palabra.r3{background:linear-gradient(160deg,#FFFCF0,#FBEFC8);box-shadow:inset 0 0 0 1.5px #E2B648}.ce-palabra.r3 .ce-pal-rar{color:#7A5410;background:#F8E4A8}
.ce-pal-ic{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;font:700 14px 'Cinzel',Georgia,serif;color:#5A5F6A;background:#EEE9DF}
.ce-pal-ic.r2{color:#14706A;background:#DDEFEC}.ce-pal-ic.r3{color:#7A5410;background:#F8E4A8}
.ce-palabra-aviso b{color:#5A4A2A}
.ce-carta-aviso .ce-carta-med{width:34px;height:34px;font-size:15px}
.ce-carta-aviso b{color:#7A3A12}
.ce-carta-gr{display:grid;justify-items:center;gap:8px;text-align:center;padding:4px 4px 0}
.ce-carta-gr .ce-carta-med{width:84px;height:84px;font-size:38px}
.ce-carta-era{font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#8A6A3A}
.ce-hoja-caja .ce-carta-gr h2{margin:0;font:600 28px/1.15 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-carta-gr blockquote{margin:6px 0 0;padding:14px 16px;border-radius:14px;background:#F3EDE2;font:italic 500 17px/1.5 Georgia,serif;color:var(--tinta);box-shadow:inset 0 2px 7px rgba(80,60,30,.12)}
.ce-carta-gr cite{display:block;margin-top:6px;font:600 12px var(--font);font-style:normal;color:#8A6A3A}
.ce-hoja-caja .ce-carta-gr > p{margin:4px 0 0;max-width:46ch;font:500 15px/1.55 var(--font);color:#3A3F4A}
.ce-carta-cans{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ce-carta-cans span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font:700 12.5px var(--font);color:#2C67AE;background:#E8F0FA}
.ce-carta-como{display:flex;align-items:center;gap:6px;font:600 12.5px var(--font);color:#6A6F7A}
@media(max-width:520px){.ce-cartas{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.ce-palabras{grid-template-columns:1fr}.ce-pal-hoy b{font-size:26px}}

/* ══ TU DISCURSO (2026-10-15) ══════════════════════════════════════════════════════
   CentroEntrenamiento.discurso y .pergamino: la capa de cada territorio se escribe en un formulario
   sobrio (etiqueta, caja y cuenta de caracteres); el pergamino junta todo en el orden en que se
   diría, con el título en Cinzel, cada parte con su rótulo, lo que falta apagado y la firma al final */
.ce-dis-form{display:grid;gap:14px;margin-top:4px}
.ce-dis-campo{display:grid;gap:6px}
.ce-dis-campo > span{font:700 13.5px var(--font);color:var(--tinta)}
.ce-dis-campo textarea{width:100%;resize:vertical;padding:11px 13px;border-radius:12px;border:1.5px solid var(--piedra);background:#fff;
  font:500 15.5px/1.5 Georgia,serif;color:var(--tinta);transition:border-color .15s,box-shadow .15s}
.ce-dis-campo textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 20%,transparent)}
.ce-dis-cuenta{justify-self:end;font:600 11.5px var(--font);color:#8A8F99;font-variant-numeric:tabular-nums}
.ce-dis-form .ce-cta{justify-self:start;margin:2px 0 0}
.ce-dis-ver{display:block;margin:14px auto 0}
.ce-dis-ic{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:18px;color:#fff;background:linear-gradient(160deg,#B07D1A,#7A5410);box-shadow:0 3px 8px -3px rgba(80,50,0,.5)}
.ce-dis-aviso b{color:#6B4A0E}
.ce-dis-aviso .ce-dis-ic{width:32px;height:32px;font-size:16px}
.ce-pergamino{position:relative;margin:4px 0 0;padding:26px 24px 22px;border-radius:6px;
  background:radial-gradient(120% 80% at 50% 0%,#FFFBF0,#F6EAD0 70%,#EEDDB8);box-shadow:inset 0 0 0 1px #E3CFA4,inset 0 0 40px rgba(170,130,60,.18),0 10px 24px -14px rgba(80,60,20,.5)}
.ce-pergamino::before,.ce-pergamino::after{content:'';position:absolute;left:-6px;right:-6px;height:14px;border-radius:7px;background:linear-gradient(180deg,#E9D3A4,#C9A86A);box-shadow:0 2px 4px rgba(80,60,20,.35)}
.ce-pergamino::before{top:-7px}.ce-pergamino::after{bottom:-7px}
.ce-hoja-caja .ce-pergamino h2{margin:0 0 14px;text-align:center;font:600 24px/1.25 'Cinzel',Georgia,serif;color:#4A3410}
.ce-per-sec,.ce-per-preg{margin:0;padding:10px 0 12px;border-top:1px solid rgba(170,130,60,.3)}
.ce-hoja-caja .ce-per-sec h3,.ce-hoja-caja .ce-per-preg h3{margin:0 0 5px;font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#8A6A3A}
.ce-hoja-caja .ce-per-sec p,.ce-hoja-caja .ce-per-preg p{margin:0;font:500 16px/1.6 Georgia,serif;color:#2E2614;white-space:pre-line}
.ce-per-sec ol{margin:0;padding-left:22px;font:500 16px/1.6 Georgia,serif;color:#2E2614}
.ce-hoja-caja .ce-per-sec .ce-per-obj{font-style:italic;color:#6B4A2A;margin-bottom:6px}
.ce-per-sec.falta p,.ce-per-preg.falta p{font:italic 500 14px Georgia,serif;color:#A0896A}
.ce-per-sec.falta h3,.ce-per-preg.falta h3{color:#B9A27E}
.ce-per-sec.nueva,.ce-per-preg.nueva{margin:0 -10px;padding:10px 10px 12px;border-radius:10px;background:rgba(255,236,170,.55);animation:ceLaurel .6s ease-out}
.ce-per-preg{margin-top:6px;padding-top:12px;border-top-style:dashed}
.ce-hoja-caja .ce-per-firma{margin:16px 0 0;text-align:right;font:italic 500 14.5px Georgia,serif;color:#5B4A22}
.ce-per-firma b{font:600 16px 'Cinzel',Georgia,serif;font-style:normal;color:#4A3410}
.ce-pergamino.firmado{box-shadow:inset 0 0 0 1px #D9B25A,inset 0 0 40px rgba(170,130,60,.2),0 0 0 3px rgba(217,178,90,.25),0 10px 24px -14px rgba(80,60,20,.5)}
.ce-per-acc{display:flex;justify-content:center;margin-top:16px}
@media(max-width:520px){.ce-pergamino{padding:22px 16px 18px}.ce-hoja-caja .ce-pergamino h2{font-size:21px}}

/* ══ EL JUICIO (2026-10-15) ════════════════════════════════════════════════════════
   El juego del Liceo: el caso en una tablilla, el jurado en un hemiciclo (a la izquierda, en verde,
   los que te dan la razón; a la derecha, en terracota, los que no) con el cambio de cada turno */
.ce-jui-caso{margin-top:12px;padding:13px 15px;border-radius:14px;background:#F3EDE2;box-shadow:inset 0 2px 7px rgba(80,60,30,.14),0 1px 0 #fff}
.ce-jui-caso small{display:block;font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.07em;color:var(--ac)}
.ce-jui-caso b{display:block;margin-top:2px;font:600 17px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-ej .ce-jui-caso p{margin:5px 0 0;font:italic 500 15px/1.5 Georgia,serif;color:#3A3F4A}
.ce-ej .ce-jui-min{display:flex;align-items:center;gap:6px;margin:10px 0 0;font:600 13px 'Cinzel',Georgia,serif;color:var(--ac)}
.ce-jui-jurado{position:relative;display:grid;justify-items:center;margin-top:10px}
.ce-jui-svg{display:block;width:min(100%,300px);height:auto}
.ce-jui-svg .tri{fill:#E4DBCB}
.ce-jui-svg circle{transition:fill .5s}
.ce-jui-svg circle.si{fill:#2F8A6A}
.ce-jui-svg circle.no{fill:#D98B6A}
.ce-ej .ce-jui-n{margin:2px 0 0;font:500 13.5px var(--font);color:#4A4F5A}
.ce-jui-n b{font:600 20px 'Cinzel',Georgia,serif;color:var(--tinta);font-variant-numeric:tabular-nums}
.ce-jui-delta{position:absolute;top:30%;left:50%;translate:-50% 0;font:700 26px 'Cinzel',Georgia,serif;color:#8A8F99;text-shadow:0 2px 8px #fff;animation:ceDelta 1.4s ease-out forwards;pointer-events:none}
.ce-jui-delta.mas{color:#1F7A55}.ce-jui-delta.menos{color:#A33A16}
@keyframes ceDelta{from{opacity:0;translate:-50% 10px}20%{opacity:1}80%{opacity:1}to{opacity:0;translate:-50% -24px}}
.ce-jui-ops .ce-ej-op span{font:500 15px/1.45 var(--font)}
@media(prefers-reduced-motion:reduce){.ce-jui-delta{animation:none;opacity:0}}

/* ══ LAS ESCUELAS DE ATENAS (2026-10-15) ═════════════════════════════════════════
   CentroEntrenamiento.escuela: cada escuela, con su letra griega en un sello de su color (la
   Academia, azul; el Liceo, verde; la Estoa, ocre; el Jardín, violeta), la clasificación de la
   semana con sus barras y el test, pregunta a pregunta */
.ce-esc-letra{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font:600 22px Georgia,serif;color:#fff;
  background:#8A8F99;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 3px 8px -3px rgba(0,0,0,.4)}
.ce-esc-letra.academia{background:linear-gradient(160deg,#3F79BF,#24508A)}
.ce-esc-letra.liceo{background:linear-gradient(160deg,#3C9A6C,#22684A)}
.ce-esc-letra.estoa{background:linear-gradient(160deg,#CF8A3A,#93561C)}
.ce-esc-letra.jardin{background:linear-gradient(160deg,#9067BF,#5E3D88)}
.ce-esc-entrada .ce-esc-letra{width:36px;height:36px;font-size:19px}
.ce-esc-tuya{display:grid;justify-items:center;gap:6px;text-align:center;padding:16px 14px;border-radius:16px;background:#F6F1E7;box-shadow:inset 0 0 0 1.5px #E2D6BE}
.ce-esc-tuya .ce-esc-letra{width:72px;height:72px;border-radius:20px;font-size:40px}
.ce-hoja-caja .ce-esc-tuya h2{margin:2px 0 0;font:600 26px/1.15 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-hoja-caja .ce-esc-tuya p{margin:0;max-width:46ch;font:500 14.5px/1.55 var(--font);color:#3A3F4A}
.ce-hoja-caja .ce-esc-tuya .ce-esc-de{font:italic 500 14.5px Georgia,serif;color:#6A5A3A}
.ce-esc-tu{font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#8A6A3A}
.ce-esc-tabla{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ce-esc-tabla li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:13px;background:#FDFBF7;box-shadow:inset 0 0 0 1.5px #E7DECD}
.ce-esc-tabla li.tuya{box-shadow:inset 0 0 0 2px #D9B25A;background:#FFF9EA}
.ce-esc-pos{flex-shrink:0;width:20px;font:600 15px 'Cinzel',Georgia,serif;color:#8A6A3A;text-align:center}
.ce-esc-tabla .ce-esc-letra{width:34px;height:34px;border-radius:10px;font-size:18px}
.ce-esc-tx{flex:1;display:grid;gap:3px;min-width:0}
.ce-esc-tx b{font:600 14px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-esc-tx small{font:500 12px var(--font);color:#6A6F7A}
.ce-esc-barra{height:7px;border-radius:4px;background:#EEE7DA;overflow:hidden}
.ce-esc-barra i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#E8B64A,#C9922A);transition:width .6s}
.ce-esc-pts{flex-shrink:0;min-width:40px;text-align:right;font:600 17px 'Cinzel',Georgia,serif;color:var(--tinta);font-variant-numeric:tabular-nums}
.ce-esc-cambiar{display:block;margin:6px auto 0}
.ce-esc-test{margin-top:6px}
.ce-hoja-caja .ce-esc-n{margin:0;font:600 12px 'Cinzel',Georgia,serif;letter-spacing:.07em;color:#8A6A3A}
.ce-hoja-caja .ce-esc-q{margin:6px 0 0;font:600 18px/1.4 var(--font);color:var(--tinta)}
.ce-esc-test .ce-ej-op{animation:ceEjEntra .3s ease-out both}
.ce-esc-acc{display:flex;justify-content:center;margin-top:14px}
.ce-esc-acc .ce-cta{margin:0}
.ce-hoja-caja .ce-esc-otras{margin:12px 0 0;text-align:center;font:500 13px var(--font);color:#6A6F7A}
.ce-esc-otra{border:0;background:none;padding:2px;cursor:pointer;font:700 13px var(--font);color:var(--t-blue);text-decoration:underline;text-underline-offset:3px}
.ce-esc-otra:focus-visible{outline:3px solid var(--t-blue);outline-offset:2px}
.ce-esc-aviso .ce-esc-letra{width:32px;height:32px;font-size:17px}
.ce-esc-aviso b{color:#4A3A1A}

/* ══ ANTES Y DESPUÉS (2026-10-15) ══════════════════════════════════════════════════
   CentroEntrenamiento._evolucion, en la ficha: el nivel de cada canon en la primera foto y ahora
   (los que han subido, en verde) y la curva de la experiencia total, semana a semana */
.ce-evo{display:grid;gap:9px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#F4F8F3;box-shadow:inset 0 0 0 1.5px #D3E5D6}
.ce-evo-tit{display:flex;align-items:baseline;gap:7px;font:600 14px 'Cinzel',Georgia,serif;color:#24603F}
.ce-evo-tit small{font:500 12px var(--font);color:#5A6F60}
.ce-evo ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ce-evo li{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:3px 5px;padding:6px 4px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #E1ECE3}
.ce-evo li span{grid-column:1/-1;text-align:center;font:600 10.5px 'Cinzel',Georgia,serif;letter-spacing:.03em;color:#4A5A4F}
.ce-evo li em{font:600 14px 'Cinzel',Georgia,serif;font-style:normal;color:#8A8F99}
.ce-evo li i{font-size:12px;color:#A0A8A2}
.ce-evo li b{font:600 17px 'Cinzel',Georgia,serif;color:var(--tinta)}
.ce-evo li.sube b{color:#1F7A4A}
.ce-evo-curva{display:block;width:100%;height:46px}
.ce-evo-curva polyline{fill:none;stroke:#3E9B5E;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ce-evo-curva circle{fill:#fff;stroke:#3E9B5E;stroke-width:2}
@media(max-width:520px){.ce-evo ul{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ══ EL DESAFÍO DEL MAESTRO (2026-10-15) ═══════════════════════════════════════════
   En la Puerta de un territorio superado: volver a empezar, con todo el territorio mezclado y
   contra el reloj. Una franja con una llama, el texto, la mejor nota y el botón */
.ce-desafio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;border-radius:16px;
  background:linear-gradient(160deg,#FFF6E6,#FBE7C6);box-shadow:inset 0 0 0 1.5px #EFCB8A,0 6px 16px -10px rgba(150,90,10,.5)}
.ce-desafio-ic{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:22px;color:#fff;background:linear-gradient(160deg,#F08A2C,#B4501A);box-shadow:0 4px 10px -4px rgba(160,70,10,.6)}
.ce-desafio-tx{flex:1;display:grid;gap:3px;min-width:0}
.ce-desafio-tx b{font:600 15px 'Cinzel',Georgia,serif;color:#5B3510}
.ce-desafio-tx small{font:500 13px/1.4 var(--font);color:#6B4A2A}
.ce-desafio-tx em{font:700 12.5px var(--font);font-style:normal;color:#8A5F0E}
.ce-desafio-tx em.oro{color:#B07D1A}
.ce-hoja-caja .ce-desafio .ce-cta{width:auto;margin:0;padding-left:18px;padding-right:18px}
@media(max-width:520px){.ce-desafio{grid-template-columns:auto minmax(0,1fr)}.ce-hoja-caja .ce-desafio .ce-cta{grid-column:1 / -1;width:100%;justify-content:center}}

/* ══ EL AULA EN EL CENTRO (2026-10-15) ═════════════════════════════════════════════
   AulaCentro, para el profesor: tres cifras de la clase, la media de los cinco cánones en barras
   (el punto flojo, en terracota) y la tabla de alumnos con el nivel de cada canon, que se tiñe
   más cuanto más alto */
.ac-resumen{display:grid;gap:14px;margin-bottom:14px}
.ac-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ac-cifras span{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:#F4F7FC;box-shadow:inset 0 0 0 1px #E1E8F3}
.ac-cifras b{font:800 22px var(--font);color:var(--t-ink,#14213D)}
.ac-cifras small{font:600 12.5px var(--font);color:#5A6478}
.ac-canones{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ac-canones li{display:grid;grid-template-columns:22px minmax(110px,180px) minmax(0,1fr) auto;align-items:center;gap:10px}
.ac-canones li > i{font-size:19px;color:#2C67AE}
.ac-canones li span:not(.ac-barra){display:grid}
.ac-canones b{font:700 14px var(--font);color:var(--t-ink,#14213D)}
.ac-canones small{font:500 12px var(--font);color:#6A7385}
.ac-barra{height:9px;border-radius:5px;background:#E9EEF6;overflow:hidden}
.ac-barra i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#5B8FD6,#2C67AE)}
.ac-canones em{font:700 12.5px var(--font);font-style:normal;color:#2C67AE;white-space:nowrap}
.ac-canones li.flojo > i,.ac-canones li.flojo em{color:#B4501A}
.ac-canones li.flojo .ac-barra i{background:linear-gradient(90deg,#F0A06A,#C25A34)}
.ac-flojo{display:flex;gap:8px;align-items:flex-start;margin:0;padding:11px 13px;border-radius:12px;background:#FFF5EC;box-shadow:inset 0 0 0 1px #F6D9C2;font:500 14px/1.45 var(--font);color:#5A3A22}
.ac-flojo i{flex-shrink:0;font-size:18px;color:#B4501A;margin-top:1px}
.ac-tabla-envoltura{overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px #E1E8F3}
.ac-tabla{width:100%;border-collapse:collapse;font:500 14px var(--font);color:var(--t-ink,#14213D)}
.ac-tabla th,.ac-tabla td{padding:9px 10px;text-align:left;border-bottom:1px solid #EDF1F7;white-space:nowrap}
.ac-tabla thead th{font:700 12px var(--font);color:#5A6478;background:#F7F9FC}
.ac-tabla thead th i{font-size:16px;color:#2C67AE}
.ac-tabla tbody th{font-weight:700}
.ac-tabla td small{display:block;font-size:12px;color:#6A7385}
.ac-tabla td.viva{color:#C2410C;font-weight:700}
.ac-tabla td.ac-n{text-align:center;font-weight:800;border-radius:0}
.ac-n.n1{color:#8A93A5}.ac-n.n2{background:#EEF4FC}.ac-n.n3{background:#DDE9F8}.ac-n.n4{background:#C7DBF4;color:#1F4E8C}.ac-n.n5{background:#A9C7EE;color:#173F75}.ac-n.n6{background:#7FAAE3;color:#fff}
.ac-tabla tr.fuera th,.ac-tabla tr.fuera td{color:#8A93A5}
.ac-nota{margin-top:8px !important}
@media(max-width:640px){.ac-cifras{grid-template-columns:1fr}.ac-canones li{grid-template-columns:22px minmax(0,1fr) auto}.ac-canones .ac-barra{grid-column:2 / -1}}

/* El punto de partida de la ficha (2026-10-15): de dónde salió, o la invitación al diagnóstico */
.ce-hoja-caja .ce-partida{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:-4px 0 12px;padding:9px 12px;border-radius:12px;background:#EEF4FB;
  box-shadow:inset 0 0 0 1px #D6E3F3;font:500 13.5px/1.4 var(--font);color:#2B4A72}
.ce-partida i{font-size:17px;color:#2C67AE}
.ce-partida span{flex:1;min-width:200px}
.ce-partida .ce-ej-otro{margin:0;padding:4px 0}

/* La voz del compañero al final de cada práctica (2026-10-15): su retrato y un bocadillo */
.ce-voz{display:flex;align-items:flex-end;gap:10px;max-width:420px;margin:6px auto 0;text-align:left}
.ce-voz-ret{flex-shrink:0;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E6DED0);box-shadow:0 0 0 2px #D8CCB4}
.ce-voz-ret svg{width:44px;height:44px}
.ce-ej .ce-voz p{position:relative;margin:0;padding:10px 13px;border-radius:16px 16px 16px 5px;background:#fff;box-shadow:0 0 0 1px var(--piedra),0 3px 0 var(--piedra);
  font:italic 500 15px/1.45 Georgia,serif;color:var(--tinta)}
.ce-voz p b{display:block;margin-bottom:2px;font:600 11.5px 'Cinzel',Georgia,serif;font-style:normal;letter-spacing:.06em;color:var(--ac)}
.ce-per-acc{flex-wrap:wrap;gap:10px;align-items:center}
.ce-per-acc .ce-cta{margin:0}
.ce-hoja-caja .ce-per-nota{margin:8px 0 0;text-align:center;font:500 12.5px var(--font);color:#6A6F7A}

/* El reto de cada aforo del público, en la ficha (2026-10-15) */
.ce-pub-reto{grid-column:1 / -1;display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #DCE4EE}
.ce-pub-reto small{display:flex;align-items:center;gap:5px;font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.05em;color:#17707A}
.ce-hoja-caja .ce-pub-reto p{margin:0;font:500 14px/1.45 var(--font);color:#3A3F4A}
.ce-pub-reto .ce-ej-otro{justify-self:start;margin:0;padding:2px 0}
.ce-pub-reto em{display:flex;align-items:center;gap:5px;font:700 12.5px var(--font);font-style:normal;color:#2F8A4F}
.ce-pub-reto.hecho{background:#F1F8F3;box-shadow:inset 0 0 0 1px #CFE6D6}

/* ══ AHORA ENSÉÑALO TÚ (2026-10-15) ═══════════════════════════════════════════════
   La invitación, bajo «Practicar» en una lección ya practicada; la hoja para explicarla, con tres
   casillas para repasarla y, al guardar, la idea clave para comparar */
.ce-ensena-cta{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:14px;background:#F2F6FB;box-shadow:inset 0 0 0 1px #D6E3F3}
.ce-ensena-ic{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:19px;color:#fff;background:linear-gradient(160deg,#3F79BF,#24508A)}
.ce-hoja-caja .ce-ensena-cta p{flex:1;margin:0;font:500 13.5px/1.45 var(--font);color:#3A4A62}
.ce-ensena-cta p b{display:block;font:600 14.5px 'Cinzel',Georgia,serif;color:#24508A}
.ce-ensena-cta .ce-ej-otro{flex-shrink:0;margin:0}
.ce-ensena-rev{display:grid;gap:7px;margin:0;padding:11px 13px;border-radius:12px;border:1px solid var(--piedra);background:#FDFBF7}
.ce-ensena-rev legend{padding:0 6px;font:700 12.5px var(--font);color:#5A5F6A}
.ce-ensena-rev label{display:flex;align-items:center;gap:8px;font:500 14px var(--font);color:var(--tinta);cursor:pointer}
.ce-ensena-rev input{width:18px;height:18px;accent-color:#2C67AE}
.ce-ensena-clave{display:grid;gap:4px;margin-top:14px;padding:13px 15px;border-radius:14px;background:#FBF3DF;box-shadow:inset 0 0 0 1px #EBD9AE;animation:ceEjEntra .3s ease-out}
.ce-ensena-clave small{font:600 11.5px 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#8A6A3A}
.ce-ensena-clave q{font:italic 500 16px/1.5 Georgia,serif;color:var(--tinta)}
@media(max-width:520px){.ce-ensena-cta{flex-wrap:wrap}.ce-ensena-cta .ce-ej-otro{width:100%;text-align:center}}
.ce-ensena-clave q{quotes:'«' '»'}

/* ══ EL TEATRO QUE SE ILUMINA (2026-10-15) ══════════════════════════════════════════
   El juego de la voz del Ágora: la frase en una tablilla y un teatro de diez filas que se
   encienden en oro hasta donde llega la voz */
.ce-ej .ce-tea-frase{margin:10px 0 0;padding:14px 16px;border-radius:14px;background:#F3EDE2;text-align:center;font:italic 500 19px/1.5 Georgia,serif;color:var(--tinta);box-shadow:inset 0 2px 7px rgba(80,60,30,.14)}
.ce-tea{display:grid;justify-items:center;margin-top:12px}
.ce-tea-svg{display:block;width:min(100%,320px);height:auto}
.ce-tea-svg .esc{fill:#E4DBCB}
.ce-tea-svg .fila{fill:none;stroke:#E7DFD0;stroke-width:7;stroke-dasharray:6 3;transition:stroke .15s}
.ce-tea-svg .fila.luz{stroke:#E8B64A;filter:drop-shadow(0 0 3px rgba(232,182,74,.7))}
.ce-ej .ce-tea-n{margin:4px 0 0;font:500 14px var(--font);color:#4A4F5A}
.ce-tea-n b{font:600 22px 'Cinzel',Georgia,serif;color:var(--tinta);font-variant-numeric:tabular-nums}
.ce-tea.escucha .ce-tea-n::after{content:' · escuchando';color:#C2410C;font-weight:700}
.ce-cle-acc{gap:10px;flex-wrap:wrap;align-items:center}
.ce-hoja-caja .ce-tea-err,.ce-ej .ce-tea-err{margin:8px 0 0;text-align:center;font:600 13px var(--font)}
@media(prefers-reduced-motion:reduce){.ce-tea-svg .fila{transition:none}}

/* ══ SUPERADMIN › CURSOS (2026-10-19): portadas y cupones (saCursos en app.js) ══
   Con los colores del resto del panel: azul marino, azul apagado y el rosa de la acción. */
.sac-tarjeta{background:#fff;border:1px solid #c8e0fb;border-radius:14px;padding:16px;margin-bottom:16px}
.sac-tit{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:11px;font-weight:800;color:#4f7fb3;text-transform:uppercase;letter-spacing:.6px}
.sac-tit > i{color:#156fe7;font-size:15px}
.sac-intro{margin:0 0 14px;max-width:70ch;font-size:13.5px;line-height:1.55;color:#33507a}
.sac-intro b{color:#0d2a6e}
.sac-msg{margin:10px 0 0;font-size:13px;font-weight:600;line-height:1.4}
.sac-msg:empty{display:none}
.sac-msg.mal{color:#c0182f}
.sac-msg.bien{color:#047a43}
.sac-guardar{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border:0;border-radius:10px;background:linear-gradient(135deg,#ff3a72,#c0185a);color:#fff;font-weight:700;font-size:13.5px;font-family:inherit;cursor:pointer}
.sac-guardar:disabled{background:#e4ecf7;color:#8aa3c2;cursor:default}
.sac-secundario{padding:10px 14px;border:1px solid #c8e0fb;border-radius:10px;background:#fff;color:#0d2a6e;font-weight:700;font-size:13px;font-family:inherit;cursor:pointer}
.sac-secundario:hover{background:#f4f8ff}
.sac-enlace{display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;color:#156fe7;font-weight:700;font-size:13px;font-family:inherit;cursor:pointer}

/* Portadas: la tira de cursos */
.sac-cursos{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:14px;scrollbar-width:thin}
.sac-curso{flex:0 0 auto;display:flex;align-items:center;gap:9px;width:206px;padding:6px 10px 6px 6px;border:1.5px solid #dbe8f9;border-radius:12px;background:#fff;text-align:left;font-family:inherit;cursor:pointer}
.sac-curso:hover{border-color:#a9c9f2}
.sac-curso.on{border-color:#ff3a72;box-shadow:0 0 0 3px rgba(255,58,114,.15)}
.sac-mini{flex-shrink:0;width:64px;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#e3eaf5}
.sac-curso-tx{min-width:0;display:flex;flex-direction:column}
.sac-curso-tx b{font-size:12.5px;color:#0d2a6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sac-curso-tx small{font-size:11.5px;color:#4f7fb3}

/* Portadas: la tarjeta de verdad a un lado y los mandos al otro */
.sac-ed{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:28px;align-items:start}
.sac-vista .cv{max-width:380px;transform:none !important}
.sac-vista .cv-enlace{display:none}
.sac-vista .cv-cta{pointer-events:none}
.sac-vista .cv:hover .cv-foto .cv-encuadre{scale:1}
.sac-vista .cv-foto{touch-action:none;outline-offset:3px}
.sac-vista .cv-foto.sac-movible{cursor:grab}
.sac-vista .cv-foto.sac-arrastrando{cursor:grabbing}
.sac-vista .cv-foto:focus-visible{outline:3px solid #ff3a72}
.sac-pista{position:absolute;left:50%;bottom:12px;z-index:2;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:20px;
  background:rgba(13,42,110,.82);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;transition:opacity .2s}
.sac-arrastrando .sac-pista{opacity:0}
.sac-mandos h4{margin:0;font-size:18px;font-weight:800;color:#0d2a6e}
.sac-estado{margin:4px 0 16px;font-size:13px;color:#4f7fb3}
.sac-boton{position:relative;display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border:1.5px dashed #8fb5ea;border-radius:11px;background:#f4f8ff;color:#0d2a6e;font-size:13.5px;font-weight:700;cursor:pointer}
.sac-boton:hover{background:#e8f1ff;border-color:#156fe7}
.sac-boton:focus-within{outline:3px solid #ff3a72;outline-offset:2px}
.sac-boton input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.sac-ayuda{margin:8px 0 18px;max-width:46ch;font-size:12.5px;line-height:1.5;color:#4f7fb3}
.sac-zoom{display:flex;align-items:center;gap:12px;max-width:420px}
.sac-zoom label{font-size:13px;font-weight:800;color:#0d2a6e}
.sac-zoom input{flex:1;accent-color:#ff3a72}
.sac-zoom output{min-width:48px;text-align:right;font-size:13px;font-weight:700;color:#0d2a6e;font-variant-numeric:tabular-nums}
.sac-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e4eefb}

/* Cupones: el formulario */
.sac-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 14px;padding:14px;border-radius:12px;background:#f6f9fe;border:1px solid #e1ecfa}
.sac-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.sac-f > label{font-size:12px;font-weight:800;color:#0d2a6e}
.sac-f > label small{font-weight:600;color:#6b8bb3}
.sac-f-ancho{grid-column:1 / -1}
.sac-form input:not([type=radio]),.sac-form select{width:100%;min-width:0;box-sizing:border-box;padding:9px 10px;border:1px solid #c8e0fb;border-radius:9px;background:#fff;font-weight:600;font-size:13.5px;font-family:inherit;color:#0d2a6e}
.sac-form input:focus,.sac-form select:focus{outline:none;border-color:#156fe7;box-shadow:0 0 0 3px rgba(21,111,231,.15)}
#sac-c-codigo{text-transform:uppercase}
#sac-c-codigo::placeholder{text-transform:none}
.sac-desc{display:flex;gap:6px}
.sac-desc input{flex:1}
.sac-seg{display:flex;padding:3px;border-radius:9px;background:#e4ecf7}
.sac-seg label{position:relative;cursor:pointer}
.sac-seg input{position:absolute;opacity:0;pointer-events:none}
.sac-seg span{display:block;min-width:30px;padding:6px 0;border-radius:7px;text-align:center;font-size:14px;font-weight:800;color:#4f7fb3}
.sac-seg input:checked + span{background:#fff;color:#0d2a6e;box-shadow:0 1px 3px rgba(13,42,110,.18)}
.sac-seg input:focus-visible + span{outline:2px solid #ff3a72}
.sac-form-pie{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sac-resumen{margin:0;flex:1;min-width:220px;font-size:13px;line-height:1.45;color:#33507a}
.sac-form .sac-msg{grid-column:1 / -1;margin:0}

/* Cupones: los recién creados, para copiarlos */
.sac-hechos{margin-top:14px;padding:14px;border-radius:12px;background:#ecfbf3;border:1px solid #b3ebcd}
.sac-hechos-cab{display:flex;align-items:center;gap:10px}
.sac-hechos-cab > i{font-size:24px;color:#03a85a}
.sac-hechos-cab > div{flex:1;display:flex;flex-direction:column}
.sac-hechos-cab b{font-size:14px;color:#064e2c}
.sac-hechos-cab small{font-size:12.5px;color:#2f7a52}
.sac-cerrar{border:0;background:none;padding:6px;color:#2f7a52;cursor:pointer;font-size:16px}
.sac-hechos ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.sac-hechos li b{display:inline-block;padding:7px 12px;border-radius:9px;background:#fff;border:1px dashed #7fd3a6;color:#064e2c;font-size:15px;letter-spacing:.06em;user-select:all}
.sac-hechos p{margin:10px 0 0;font-size:12.5px;color:#2f7a52}

/* Cupones: la lista */
.sac-lista-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.sac-lista-cab h4{margin:0;font-size:14px;font-weight:800;color:#0d2a6e}
.sac-filtros{display:flex;gap:6px;flex-wrap:wrap}
.sac-filtros button{padding:6px 11px;border:1px solid #c8e0fb;border-radius:20px;background:#fff;color:#4f7fb3;font-weight:700;font-size:12px;font-family:inherit;cursor:pointer}
.sac-filtros button span{opacity:.7;font-variant-numeric:tabular-nums}
.sac-filtros button.on{background:#0d2a6e;border-color:#0d2a6e;color:#fff}
.sac-vacio{margin:0;padding:22px;border:1px dashed #c8e0fb;border-radius:12px;text-align:center;font-size:13px;color:#4f7fb3}
.sac-cups{list-style:none;margin:0;padding:0;border:1px solid #dbe8f9;border-radius:12px;overflow:hidden}
.sac-cup{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:14px;align-items:center;padding:11px 14px;background:#fff}
.sac-cup + .sac-cup{border-top:1px solid #edf3fb}
.sac-cup > div{min-width:0}
.sac-cup small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:#5d7ea8}
.sac-cup-cod{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
.sac-cup-cod b{font-size:14px;letter-spacing:.05em;color:#0d2a6e;overflow-wrap:anywhere}
.sac-cup-cod small{flex-basis:100%;font-style:italic}
.sac-cup-cod button{border:0;background:none;padding:3px;color:#4f7fb3;cursor:pointer;font-size:15px}
.sac-cup-cod button:hover{color:#156fe7}
.sac-cup-desc b{font-size:14px;color:#0d2a6e}
.sac-chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:800}
.sac-chip.libre{background:#e3f8ee;color:#047a43}
.sac-chip.pagando{background:#fff4dc;color:#9a5b00}
.sac-chip.usado{background:#e7eefb;color:#2c4f86}
.sac-chip.caducado,.sac-chip.desactivado{background:#f1f3f6;color:#69768a}
.est-usado .sac-cup-cod b,.est-caducado .sac-cup-cod b,.est-desactivado .sac-cup-cod b{color:#7c8ba1}
.est-caducado .sac-cup-cod b,.est-desactivado .sac-cup-cod b{text-decoration:line-through}
.sac-cup-acc{display:flex;gap:6px;justify-content:flex-end}
.sac-cup-acc button{padding:6px 10px;border:1px solid #c8e0fb;border-radius:8px;background:#fff;color:#0d2a6e;font-weight:700;font-size:12px;font-family:inherit;cursor:pointer}
.sac-cup-acc button:hover{background:#f4f8ff}
.sac-cup-acc .sac-borrar{color:#c0182f;font-size:14px;padding:5px 8px}
.sac-cup-acc .sac-borrar:hover{background:#fff1f2;border-color:#f5b5c0}

@media(max-width:1000px){
  .sac-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sac-form .sac-f:first-child{grid-column:1 / -1}
}
@media(max-width:820px){
  .sac-ed{grid-template-columns:1fr;gap:18px}
  .sac-vista .cv{max-width:none}
  .sac-cup{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .sac-cup-cod{grid-column:1 / -1}
  .sac-cup-desc{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .sac-cup-desc small{margin:0}
  .sac-cup-est{grid-column:1}
  .sac-cup-acc{grid-column:2;grid-row:2 / span 2;align-self:center}
}
@media(max-width:480px){
  .sac-tarjeta{padding:14px 12px}
  .sac-form{grid-template-columns:1fr;padding:12px}
  .sac-curso{width:180px}
  .sac-form-pie .sac-guardar{width:100%}
}

/* ══ CENTRO: LA BARRA DE ARRIBA (2026-10-19) ══
   Más baja (en el mapa ya no lleva la frase de debajo del título) y con color: cada botón lleva
   su medallón, .ce-btn-med (la llama naranja, el kairós violeta, la ficha dorada, la lista y el territorio
   azules, el cuaderno verde); uno solo late a la vez, el que más importa ahora (_pintarLatido);
   «Tu viaje» lleva el número dentro del aro y un tramo por territorio (o por espacio); y la
   primera vez, el recorrido por los botones (tour: un halo que late y una tarjetita). Ojo: .ce-med
   es otra cosa, la medalla de mármol con el número romano de las listas */
.ce-titulo{padding:10px 14px 11px 16px;background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,248,238,.76))}
.ce-titulo h1{font-size:clamp(22px,2.1cqw,32px)}
.ce-titulo #ce-sub:empty{display:none}
.ce-titulo p{margin-top:4px;font-size:13.5px}
.ce-tit-acc{gap:6px;margin-top:9px}
.ce-btn-llama{--c1:#FFB547;--c2:#EF5A24}
.ce-btn-kairos{--c1:#B3A3FF;--c2:#6A4DF4}
.ce-btn-ficha{--c1:#F8D06B;--c2:#D9930F}
.ce-btn-lista{--c1:#5AA2FF;--c2:#1D6DF0}
.ce-btn-cuaderno{--c1:#4ADE9C;--c2:#0E9F6E}
.ce-btn-viaje.ce-btn-sec{height:34px;padding:0 11px 0 4px;gap:6px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.9);color:var(--marino);
  box-shadow:0 2px 8px rgba(11,18,32,.08);transition:transform .18s,box-shadow .18s,opacity .25s}
.ce-btn-viaje.ce-btn-sec:hover{filter:none;transform:translateY(-1px);box-shadow:0 6px 14px rgba(11,18,32,.14)}
.ce-btn-viaje.ce-btn-llama,.ce-btn-viaje.ce-btn-kairos{padding:0 11px 0 4px;gap:6px}
.ce-btn-med{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--c1),var(--c2));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px color-mix(in srgb,var(--c2) 40%,transparent);transition:transform .25s}
.ce-btn-med i{font-size:15px}
.ce-btn-viaje.ce-btn-sec:hover .ce-btn-med{transform:scale(1.08) rotate(-6deg)}
.ce-btn-llama .ce-btn-med .ce-svg-llama{width:13px;height:16px}
.ce-btn-llama .ce-btn-med .ll-f{fill:#fff}.ce-btn-llama .ce-btn-med .ll-n{fill:#FFD27A}
.ce-btn-llama.apagada{--c1:#CFC9BE;--c2:#9C958A}
.ce-btn-llama.apagada .ce-btn-med .ll-f{fill:#fff}.ce-btn-llama.apagada .ce-btn-med .ll-n{fill:#ECE8E1}
.ce-btn-kairos.abierto{--c1:#FFE08A;--c2:#E3A92B}
.ce-btn-kairos.hecho{--c1:#7BE3AE;--c2:#2F8A4F}
/* El latido: el aro de su color se abre y el medallón da dos latidos */
.ce-btn-viaje.ce-late{animation:ceLatido 2.6s ease-out infinite}
.ce-btn-viaje.ce-late .ce-btn-med{animation:ceLatidoMed 2.6s ease-in-out infinite}
@keyframes ceLatido{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 55%,transparent),0 2px 8px rgba(11,18,32,.08)}
  36%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c2) 0%,transparent),0 2px 8px rgba(11,18,32,.08)}
  37%,100%{box-shadow:0 0 0 0 transparent,0 2px 8px rgba(11,18,32,.08)}}
@keyframes ceLatidoMed{0%,34%,100%{transform:scale(1)}9%{transform:scale(1.17)}18%{transform:scale(1)}26%{transform:scale(1.1)}}

/* Tu viaje: el número dentro del aro y un tramo por territorio (dorado el superado, azul el abierto) */
.ce-aro{position:relative;width:42px;height:42px;display:grid;place-items:center;background:none;-webkit-mask:none;mask:none}
.ce-aro::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#1D6DF0 0,#7C5CFF calc(var(--p) * 1%),#E2E9F4 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 72%,#000 74%);mask:radial-gradient(farthest-side,transparent 72%,#000 74%)}
.ce-progreso .ce-aro b{position:relative;margin:0;font:800 15px/1 var(--font);color:#2547C9;font-variant-numeric:tabular-nums}
.ce-tramos{display:flex;gap:3px;width:128px;margin-top:7px}
.ce-tramos i{flex:1;height:5px;border-radius:3px;background:#E2E9F4}
.ce-tramos i.si{background:linear-gradient(90deg,#F6CF63,#E3A317)}
.ce-tramos i.ahora{background:linear-gradient(90deg,#5AA2FF,#1D6DF0)}

/* El recorrido de la primera vez: lo cuenta el compañero y la escena se oscurece salvo lo que
   explica (.ce-tour-velo: un velo con un hueco de luz difuminado que se desliza de un botón a otro, como
   el foco de los territorios). El botón iluminado late, con su medallón y un aro de su color */
.ce-tour .ce-late,.ce-tour .ce-late .ce-btn-med{animation:none}
.ce-tour .ce-tour-foco .ce-btn-med{animation:ceLatidoMed 1.6s ease-in-out infinite}
/* La llama apagada se enseña encendida mientras se explica, para que se vea qué es */
.ce-tour .ce-btn-llama.apagada.ce-tour-foco{--c1:#FFB547;--c2:#EF5A24}
.ce-tour-halo{position:absolute;z-index:9;pointer-events:none;--lat:#1D6DF0;
  transition:left .35s cubic-bezier(.2,.9,.3,1),top .35s cubic-bezier(.2,.9,.3,1),width .35s cubic-bezier(.2,.9,.3,1),height .35s cubic-bezier(.2,.9,.3,1)}
.ce-tour-halo.late{animation:ceTourLate 1.6s ease-out infinite}
@keyframes ceTourLate{
  0%{box-shadow:0 0 0 2.5px var(--lat),0 0 0 0 color-mix(in srgb,var(--lat) 55%,transparent)}
  70%{box-shadow:0 0 0 2.5px var(--lat),0 0 0 16px color-mix(in srgb,var(--lat) 0%,transparent)}
  100%{box-shadow:0 0 0 2.5px var(--lat),0 0 0 0 transparent}}
@property --fx{syntax:'<length>';inherits:false;initial-value:0px}
@property --fy{syntax:'<length>';inherits:false;initial-value:0px}
@property --rw{syntax:'<length>';inherits:false;initial-value:60px}
@property --rh{syntax:'<length>';inherits:false;initial-value:40px}
.ce-tour-velo{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .45s,--fx .55s cubic-bezier(.3,.8,.3,1),--fy .55s cubic-bezier(.3,.8,.3,1),--rw .55s cubic-bezier(.3,.8,.3,1),--rh .55s cubic-bezier(.3,.8,.3,1);
  background:radial-gradient(var(--rw) var(--rh) at var(--fx) var(--fy),transparent 0 60%,rgba(9,13,30,.38) 78%,rgba(9,13,30,.66) 100%)}
.ce-tour-velo.ver{opacity:1}
#reto-widget .cp-boc{transition:translate .35s cubic-bezier(.3,.8,.3,1)}
#reto-widget .cp-boc.cp-boc-suelto::after{display:none}
@media(max-width:768px){
  /* En el móvil, una fila: el título y los botones, cada uno su medallón entero */
  .ce-titulo{padding:7px 7px 7px 13px}
  .ce-titulo .hub-ceja{display:none}
  .ce-titulo h1{margin:0;font-size:17px}
  .ce-tit-acc{gap:5px}
  .ce-btn-viaje.ce-btn-sec{width:36px;height:36px;padding:0;gap:0;justify-content:center;border:0;
    background:linear-gradient(145deg,var(--c1),var(--c2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px color-mix(in srgb,var(--c2) 35%,transparent)}
  .ce-btn-viaje.ce-btn-sec .ce-btn-med{width:auto;height:auto;background:none;box-shadow:none}
  .ce-btn-viaje.ce-btn-sec .ce-btn-med i{font-size:18px}
  .ce-btn-tx{display:none}
  .ce-btn-viaje.ce-btn-llama{width:auto;padding:0 10px 0 8px;gap:4px}
  .ce-btn-viaje.ce-btn-kairos{width:36px;padding:0}
  .ce-btn-llama #ce-llama-n,.ce-btn-llama.apagada #ce-llama-n{color:#fff}
  .ce-btn-llama .ce-btn-med .ce-svg-llama{width:14px;height:18px}
  /* El kairós, solo con su reloj (la regla de antes ocultaba todo lo que llevaba dentro) */
  .ce-btn-kairos #ce-kairos-t{display:none}
  .ce-btn-viaje.ce-btn-kairos .ce-btn-med{display:grid}
  /* El título, en una o dos líneas cortas al lado de los botones, en vez de cortado */
  .ce-titulo h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;font-size:16px;line-height:1.08;align-self:center}
  .ce-tit-acc{grid-row:1;align-self:center}
  .ce-btn-viaje.ce-btn-sec,.ce-btn-viaje.ce-btn-kairos{width:34px;height:34px}
  .ce-btn-viaje.ce-btn-llama{width:auto;height:34px}
  @keyframes ceLatido{
    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 60%,transparent)}
    36%{box-shadow:0 0 0 10px color-mix(in srgb,var(--c2) 0%,transparent)}
    37%,100%{box-shadow:0 0 0 0 transparent}}
}
@media(prefers-reduced-motion:reduce){
  .ce-btn-viaje.ce-late,.ce-btn-viaje.ce-late .ce-btn-med,.ce-tour .ce-tour-foco .ce-btn-med,.ce-tour-halo.late{animation:none}
  .ce-tour-velo,#reto-widget .cp-boc{transition:none}
  .ce-btn-viaje.ce-late{box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 45%,transparent)}
  .ce-tour-halo{transition:none;box-shadow:0 0 0 3px var(--lat)}
}

/* ══ SUPERADMIN › REGISTROS: RESULTADOS POR COLEGIO (2026-10-19) ══
   Como el informe que se da a los colegios: una tarjeta por pregunta de 1 a 5 con cuántos marcaron
   cada número (barras), las estrellas y la media, y cuántos respondieron; las de opciones, en barras
   horizontales. Encima, los colegios para filtrar. La misma hoja sale al imprimir (saRegistrosImprimir
   copia estas reglas .sar-) */
.sar-acc{display:flex;flex-wrap:wrap;gap:8px}
.sar-acc .rd-btn{display:inline-flex;align-items:center;gap:6px}
.sar-subir{position:relative;cursor:pointer}
.sar-subir input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.sar-subir:focus-within{outline:3px solid #156fe7;outline-offset:2px}
.sar-centros{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.sar-centros button{padding:7px 12px;border:1px solid #c8e0fb;border-radius:20px;background:#fff;color:#0d2a6e;font:700 12.5px var(--font);cursor:pointer}
.sar-centros button span{opacity:.6;font-variant-numeric:tabular-nums;margin-left:2px}
.sar-centros button.on{background:#1F4E9E;border-color:#1F4E9E;color:#fff}
.sar-graficos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:8px}
.sar-g{padding:16px 18px 14px;border:1px solid #e3ebf7;border-radius:12px;background:#fff}
.sar-g h4{margin:0 0 12px;font:700 14px/1.35 var(--font,system-ui);color:#0d1b3a}
.sar-g-et{font:700 10px var(--font,system-ui);letter-spacing:.08em;text-transform:uppercase;color:#7b8aa3}
.sar-g-val{text-align:right;margin-top:2px}
.sar-barras{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:150px;margin-top:6px}
.sar-col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;min-width:0}
.sar-col b{text-align:center;font:700 13px var(--font,system-ui);color:#0d1b3a;margin-bottom:6px}
.sar-col span{display:block;min-height:3px;border-radius:4px 4px 0 0;background:#1F4E9E}
.sar-col small{text-align:center;padding-top:6px;border-top:1px solid #e3ebf7;font-size:12px;color:#5d6f8c}
.sar-media{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.sar-estrellas{position:relative;display:inline-block;font-size:20px;line-height:1;letter-spacing:2px;color:#d8dfeb}
.sar-estrellas::before{content:'★★★★★'}
.sar-estrellas::after{content:'★★★★★';position:absolute;left:0;top:0;width:var(--p);overflow:hidden;white-space:nowrap;color:#1F4E9E}
.sar-media > b{font:800 28px/1 var(--font,system-ui);color:#0d1b3a;font-variant-numeric:tabular-nums}
.sar-media > small{font-size:14px;color:#7b8aa3}
.sar-total{margin:6px 0 0;font-size:12.5px;color:#5d6f8c}
.sar-total b{color:#0d1b3a}
.sar-tres{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid #e3ebf7;display:grid;gap:6px}
.sar-tres li{display:flex;align-items:center;gap:8px;font-size:13px;color:#33507a}
.sar-tres li i{width:14px;text-align:center;font-style:normal;font-weight:800;color:#1F4E9E;font-size:15px}
.sar-tres li b{margin-left:auto;color:#0d1b3a;font-variant-numeric:tabular-nums}
.sar-op{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(36px,.8fr) 26px 56px;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;color:#33507a}
.sar-op span{line-height:1.25;overflow-wrap:anywhere}
.sar-op i{display:block;height:8px;border-radius:4px;background:#eef3fb;overflow:hidden}
.sar-op i em{display:block;height:100%;border-radius:4px;background:#1F4E9E}
.sar-op b{text-align:right;color:#0d1b3a;font-variant-numeric:tabular-nums}
.sar-op small{text-align:right;color:#7b8aa3;font-variant-numeric:tabular-nums}
.sar-crm{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:10px;background:#eef3fb;color:#4f7fb3;font-size:10.5px;font-weight:800}
.sar-lotes{margin:0 0 10px;font-size:12.5px;color:#5d6f8c;line-height:1.7}
.sar-lotes button{border:0;background:none;padding:0;color:#c0182f;font-weight:700;text-decoration:underline;cursor:pointer}
.sar-imp{margin:0 0 14px;padding:14px 16px;border-radius:12px;background:#f4f8ff;border:1px solid #c8e0fb;font-size:13px;color:#0d2a6e}
.sar-imp.mal{background:#fff1f2;border-color:#f5b5c0;color:#b42318}
.sar-imp ul{margin:8px 0;padding-left:18px}
.sar-imp details{margin-top:6px}
.sar-imp summary{cursor:pointer;font-weight:700;color:#156fe7}
.sar-imp dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:4px 12px;margin:8px 0 0;font-size:12px}
.sar-imp dt{font-weight:700;overflow-wrap:anywhere}
.sar-imp dd{margin:0;color:#5d6f8c}
.sar-imp-aviso{margin:8px 0 0;color:#9a5b00}
.sar-imp-acc{display:flex;gap:8px;margin-top:12px}
@media(max-width:560px){ .sar-graficos{grid-template-columns:1fr} .sar-imp dl{grid-template-columns:1fr} }

/* ══ CENTRO: LA HORA CAMBIA SOLA (2026-10-20) ══
   La ilustración de la nueva hora entra encima de la de ahora y se funde en unos 4 s (_cambiarHora
   en app.js); sin la animación de entrada de .ce-mapa */
.ce-mapa.ce-img-hora{animation:none;opacity:0;transition:opacity 4s ease-in-out;pointer-events:none}
.ce-mapa.ce-img-hora.ver{opacity:1}
.ce-mapa.ce-img-hora.fuera{transition:opacity .5s}
.ce-boc-img img{transition:opacity .4s}

/* ══ CENTRO: «TU VIAJE» DENTRO DE LA CABECERA (2026-10-20) ══
   Antes era una tarjeta aparte a la derecha de la cabecera, tapando escena; ahora va en el hueco a
   la derecha del título, en la misma fila, separado por una línea fina. En el móvil sigue oculto
   (la cabecera va en una sola fila) */
@media(min-width:769px){
  /* Tres columnas: el título, el friso (el hueco que quede) y «Tu viaje» */
  .ce-titulo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:22px;align-items:center}
  .ce-titulo > .hub-ceja{grid-column:1 / 3;grid-row:1}
  .ce-titulo > h1{grid-column:1;grid-row:2}
  .ce-titulo > .ce-friso{grid-column:2;grid-row:2}
  .ce-titulo > #ce-sub{grid-column:1 / 3;grid-row:3}
  .ce-titulo > .ce-progreso{grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end;gap:10px;margin:0;padding:2px 2px 2px 18px;
    border-radius:0;border-left:1px solid rgba(19,40,94,.14);background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;animation:none}
  .ce-titulo > .ce-progreso:hover .ce-aro{transform:scale(1.06)}
  .ce-titulo > .ce-progreso .ce-aro{width:38px;height:38px;transition:transform .2s}
  .ce-titulo > .ce-progreso b{font-size:13.5px;white-space:nowrap}
  .ce-titulo .ce-tramos{width:118px;margin-top:6px}
  .ce-titulo > .ce-tit-acc{grid-column:1 / -1}
}

/* El friso (2026-10-20; .ce-friso, no .ce-greca, que es la franja de las ventanas): una greca dorada en el hueco entre el título y «Tu viaje». El meandro
   va de máscara sobre un degradado de oro, se difumina por los dos extremos y lo cruza un destello de
   luz de vez en cuando. El relieve, con sombras en la caja de fuera (la máscara las cortaría) */
.ce-friso{display:none}
@media(min-width:769px){
  .ce-friso{display:block;min-width:0;height:16px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 0 5px rgba(201,154,58,.28))}
  .ce-friso i{display:block;height:100%;
    /* Dos capas: el destello (una franja de luz estrecha que cruza) y debajo el oro, quieto */
    background:linear-gradient(100deg,transparent 0,rgba(255,246,214,.3) 28%,rgba(255,251,236,.95) 50%,rgba(255,246,214,.3) 72%,transparent 100%) -120% 0/60% 100% no-repeat,
      linear-gradient(100deg,#A97A26,#D9AE52 22%,#ECC874 48%,#C99A3B 74%,#A97A26) 0 0/100% 100%;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'%3E%3Cpath d='M0 1.3H20M0 16.7H20M3 16.7V4.3H16.7V13.4H7.4V8.3H12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0/auto 100% repeat-x,linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
    -webkit-mask-composite:source-in;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'%3E%3Cpath d='M0 1.3H20M0 16.7H20M3 16.7V4.3H16.7V13.4H7.4V8.3H12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0/auto 100% repeat-x,linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
    mask-composite:intersect;
    animation:ceFrisoBrillo 10s ease-in-out 2.9s infinite}
}
/* El destello entra por la izquierda, cruza en unos 3,5 s (se difumina en los extremos con la máscara del
   friso), sale por la derecha y, tras unos 6,5 s, vuelve. La capa del oro no se mueve */
@keyframes ceFrisoBrillo{0%{background-position:-120% 0,0 0}35%,100%{background-position:220% 0,0 0}}
@media(prefers-reduced-motion:reduce){.ce-friso i{animation:none}}

/* ══ LA ESTELA DE MÁRMOL (2026-10-20) ══
   Los paneles de texto del Centro (la ficha, los sitios, la puerta, la llama, el cuaderno…) son una
   estela griega hecha con las ilustraciones del equipo: el frontón arriba, el cuerpo de mármol (la
   caja, que es lo que se desplaza: el mármol va con el texto) y el pedestal abajo; todo junto sube al
   abrirse. Las medidas salen de las imágenes: el frontón mide el 22,6 % de su ancho de alto, el
   pedestal el 17,8 %, y el cuerpo ocupa el 86,8 % central, lo que mide el escalón de arriba del
   pedestal. Dentro, los títulos van tallados (Cinzel, con luz por debajo) y el texto, pintado en tinta
   (en Grecia las inscripciones se pintaban); en vez de tarjetas blancas, paneles hundidos en la piedra.
   Las centradas (.centro: la ficha, la colección, la llama…) van en columna y a la medida de lo que
   llevan; los ejercicios de las lecciones (.sin) no llevan estela */
.ce-estela{position:absolute;top:8px;right:14px;bottom:8px;width:min(560px,calc(100% - 28px));container-type:inline-size;pointer-events:none;
  animation:ceEstelaSube .55s cubic-bezier(.2,.9,.25,1) both}
.ce-estela.izq{right:auto;left:14px}
.ce-estela > *{pointer-events:auto}
.ce-estela.sin{display:contents}
.ce-estela.sin > .ce-estela-fronton,.ce-estela.sin > .ce-estela-pie{display:none}
/* Centrada: en columna, a la medida de lo que lleva y sin pasar del alto de la escena (centrada con
   márgenes automáticos y no con transform, para que la barra de desplazamiento se coloque bien) */
.ce-estela.centro{top:0;bottom:0;left:0;right:0;margin:auto;width:min(540px,calc(100% - 40px));height:fit-content;max-height:calc(100% - 16px);display:flex;flex-direction:column}
.ce-estela.centro > .ce-estela-fronton,.ce-estela.centro > .ce-estela-pie{position:relative;flex:none}
.ce-estela.centro > .ce-hoja-caja{position:relative;inset:auto;transform:none;width:auto;max-height:none;flex:0 1 auto;min-height:0;margin:-3px 6.6%}
.ce-estela-fronton,.ce-estela-pie{position:absolute;left:0;right:0;z-index:2;pointer-events:none;background:center/100% 100% no-repeat}
.ce-estela-fronton{top:0;height:22.6cqw;background-image:url(/assets/centro/estela-fronton.webp?v=1)}
.ce-estela-pie{bottom:0;height:17.8cqw;background-image:url(/assets/centro/estela-pie.webp?v=1)}
.ce-estela:not(.centro):not(.sin) > .ce-hoja-caja{position:absolute;top:calc(22.6cqw - 3px);bottom:calc(17.8cqw - 3px);left:6.6%;right:6.6%;width:auto}
.ce-estela:not(.sin) > .ce-hoja-caja{--tinta:#3A2C1E;padding:22px 44px 26px;border-radius:0;animation:none;color:var(--tinta);
  background:url(/assets/centro/estela-cuerpo.webp?v=1) 0 0/100% auto repeat-y local;
  box-shadow:0 30px 50px -28px rgba(10,20,45,.6)}
.ce-estela:not(.sin) > .ce-hoja-caja.con-ventana{padding-top:0}
/* La ventana al sitio: sin arco, encastrada bajo el frontón como un relieve */
.ce-estela:not(.sin) .ce-ventana{margin:0 -14px;border-radius:0;box-shadow:inset 0 0 0 3px rgba(150,112,62,.35),inset 0 14px 22px -12px rgba(30,20,10,.55)}
.ce-estela:not(.sin) .ce-greca{margin:0 -14px}
.ce-estela:not(.sin) .ce-hoja-x{top:14px;right:38px}
.ce-estela:not(.sin) .ce-hoja-caja.con-ventana .ce-hoja-x{top:12px;right:22px}
.ce-estela:not(.sin) .ce-hoja-caja.con-ventana .ce-volver{top:14px;left:22px}
/* La letra: títulos tallados, texto en tinta */
.ce-estela:not(.sin) .ce-hoja-caja :is(h2,h3,h4){text-shadow:0 1px 0 rgba(255,250,238,.85),0 -1px 0 rgba(90,60,25,.18)}
.ce-estela:not(.sin) .ce-hoja-caja .ce-hoja-cab h2{color:#3A2A16}
.ce-estela:not(.sin) .ce-hoja-caja p,.ce-estela:not(.sin) .ce-hoja-caja li{color:#46372A}
.ce-estela:not(.sin) .ce-hoja-caja .ce-hoja-cab p{color:#56473A}
/* Los paneles hundidos en la piedra (antes, tarjetas blancas) */
.ce-estela:not(.sin) .ce-hoja-caja :is(.ce-publico,.ce-pub-reto,.ce-evo,.ce-col-entrada,.ce-partida,.ce-canon-rec,.ce-mh,.ce-mh-r,.ce-mh-nota,.ce-chip,.ce-ciclo,.ce-mision li,.ce-pasos li,.ce-desafio,.ce-mini-prog,.ce-esc-tabla li){
  border:0;border-radius:8px;background:linear-gradient(180deg,rgba(122,88,44,.13),rgba(122,88,44,.05));
  box-shadow:inset 0 2px 4px rgba(85,58,25,.3),inset 0 -1px 0 rgba(255,250,238,.6),0 1px 0 rgba(255,250,238,.75)}
.ce-estela:not(.sin) .ce-hoja-caja :is(button.ce-col-entrada,.ce-col-entrada[data-col]):hover{background:linear-gradient(180deg,rgba(122,88,44,.18),rgba(122,88,44,.08))}
/* Las listas de sitios y actividades: losas con relieve en vez de botones blancos */
.ce-estela:not(.sin) .ce-hoja-caja :is(.ce-esp,.ce-act,.ce-terr-it,.ce-evo li){background:linear-gradient(180deg,rgba(255,252,244,.62),rgba(240,226,200,.42));border-color:rgba(150,112,62,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 0 rgba(150,112,62,.2),0 6px 12px -8px rgba(60,40,15,.35)}
/* Las notas (recomendaciones, el oráculo, la biblioteca) y los apuntes del cuaderno: en la hoja de
   papiro del equipo, con sus bordes rasgados y sus esquinas enrolladas */
.ce-estela:not(.sin) .ce-hoja-caja :is(.ce-perg,.ce-ap){border:solid transparent;border-width:22px 20px;border-radius:0;background:none;box-shadow:none;padding:4px 6px;
  border-image:url(/assets/centro/papiro-hoja.webp?v=1) 70 fill / 22px 20px stretch;filter:drop-shadow(0 6px 8px rgba(70,45,15,.25))}
.ce-estela:not(.sin) .ce-hoja-caja .ce-ap p,.ce-estela:not(.sin) .ce-hoja-caja .ce-ap ol{color:#3B2A14}
/* Tu discurso: en el rollo, entre sus dos rodillos */
.ce-estela:not(.sin) .ce-hoja-caja .ce-pergamino{border:solid transparent;border-width:44px 58px 20px;border-radius:0;background:none;box-shadow:none;padding:6px 10px 10px;
  border-image:url(/assets/centro/papiro-rollo.webp?v=1) 100 130 40 130 fill / 44px 58px 20px stretch;filter:drop-shadow(0 8px 10px rgba(70,45,15,.3))}
.ce-estela:not(.sin) .ce-hoja-caja .ce-pergamino::before,.ce-estela:not(.sin) .ce-hoja-caja .ce-pergamino::after{display:none}
@media(max-width:768px){
  .ce-estela,.ce-estela.izq{top:6px;right:6px;bottom:6px;left:6px;width:auto}
  .ce-estela:not(.sin) > .ce-hoja-caja{padding:18px 26px 22px}
  .ce-estela:not(.sin) .ce-hoja-x{top:10px;right:22px}
  .ce-estela:not(.sin) .ce-ventana,.ce-estela:not(.sin) .ce-greca{margin:0 -8px}
  .ce-estela:not(.sin) .ce-hoja-caja .ce-pergamino{border-width:34px 40px 16px;border-image-width:34px 40px 16px}
}
/* Con una estela centrada (y en el móvil, con cualquiera) la cabecera y los botones de arriba se
   apartan: asomaban detrás del frontón */
.ce-escena:has(.ce-estela.centro) > :is(.ce-arriba-izq,.ce-arriba-der){opacity:0;pointer-events:none;transition:opacity .3s}
@media(max-width:768px){ .ce-escena:has(.ce-estela:not(.sin)) > :is(.ce-arriba-izq,.ce-arriba-der){opacity:0;pointer-events:none;transition:opacity .3s} }
@media(prefers-reduced-motion:reduce){.ce-estela{animation:none}}
/* Las calificaciones de los tests (2026-10-20): tres cifras y una barra por módulo, sobre 10 */
.sar-g-cal{grid-column:1 / -1}
.sar-cal-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 12px}
.sar-cal-cifras span{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:#f4f8ff}
.sar-cal-cifras b{font:800 24px/1.1 var(--font,system-ui);color:#0d1b3a;font-variant-numeric:tabular-nums}
.sar-cal-cifras small{font-size:12px;color:#5d6f8c}
.sar-nota{grid-template-columns:minmax(0,1fr) minmax(60px,2fr) 40px 86px}
.sar-sin{margin:4px 0 0;padding:12px 14px;border-radius:10px;background:#f4f8ff;color:#33507a;font-size:13px}
@media(max-width:560px){ .sar-cal-cifras b{font-size:20px} .sar-nota{grid-template-columns:minmax(0,1fr) minmax(40px,1fr) 34px 70px} }

/* ══ CENTRO: EL ARCHIVO, LA BIBLIOTECA DE CADA TERRITORIO (2026-10-20; marco del 2026-10-21) ══
   Como la referencia del equipo: el marco de mármol con filete dorado (archivo-marco.webp, se estira
   solo por las zonas lisas: border-image con anchos en cqw, proporcionales al ancho del panel, así las
   esquinas y la muesca no se deforman) entre dos columnas (la del estandarte azul a la izquierda, la lisa
   con su resplandor a la derecha; se estiran por el fuste). En la franja de arriba, el medallón sobre la
   muesca, el nombre y la frase; en el cuerpo, las pestañas y las tarjetas a la izquierda y la ficha a la
   derecha. «Volver», fuera del marco, arriba a la izquierda. En el móvil, sin columnas, dos tarjetas por
   fila y la ficha encima (archivo() en app.js). Medidas del marco (en px de la imagen, 1422 × 986): la
   franja de arriba acaba en 229, los lados miden 96 y la base 80 */
.ce-hoja-caja.ce-archivo{--tinta:#2A2014;--navy:#1E3A86;--oro:#C9963A;container-type:inline-size;
  top:62px;bottom:16px;left:0;right:0;margin:0 auto;width:min(1080px,calc(100% - 104px));
  padding:0;overflow:visible;border-radius:0;background:none;box-shadow:none;color:var(--tinta);animation:none}
.ce-hoja .ce-hoja-caja.ce-archivo > .ce-hoja-x{z-index:4;top:calc(8.6cqw - 18px);right:calc(6.8cqw);translate:none}   /* .ce-hoja delante: otra regla más general lo llevaba a la columna */
.ce-arch{position:relative;height:100%}
.ce-arch-marco{position:absolute;inset:0;z-index:0;pointer-events:none;border-style:solid;border-color:transparent;
  border-width:calc(262 / 1422 * 100cqw) calc(96 / 1422 * 100cqw) calc(80 / 1422 * 100cqw);
  border-image:url(/assets/centro/archivo-marco.webp?v=1) 262 96 80 fill / calc(262 / 1422 * 100cqw) calc(96 / 1422 * 100cqw) calc(80 / 1422 * 100cqw) stretch;
  filter:drop-shadow(0 26px 30px rgba(8,14,30,.55))}
/* Las columnas, delante del marco y montadas sobre su canto (el fuste tapa el borde exterior, como en la
   referencia): todo en cqw, así crecen con el marco y no se separan. El capitel (y el estandarte) arriba
   y la basa abajo guardan su proporción; el fuste se estira. Medidas en px de cada imagen: la izquierda
   (328 de ancho) tiene el fuste hasta 211 y la derecha (232) desde 68; el canto del marco está en 31 */
.ce-arch-col{--w:9.6cqw;position:absolute;z-index:3;top:-2.6cqw;bottom:-1.2cqw;width:var(--w);pointer-events:none;border-style:solid;border-color:transparent}
.ce-arch-col.izq{left:calc(31 / 1422 * 100cqw + .6cqw - var(--w) * 211 / 328);border-width:calc(var(--w) * 600 / 328) 0 calc(var(--w) * 478 / 328);
  border-image:url(/assets/centro/archivo-columna-izq.webp?v=1) 600 0 478 fill / calc(var(--w) * 600 / 328) 0 calc(var(--w) * 478 / 328) stretch;filter:drop-shadow(6px 10px 10px rgba(8,14,30,.45))}
.ce-arch-col.der{--w:8.9cqw;right:calc(31 / 1422 * 100cqw + .6cqw - var(--w) * 164 / 232);border-width:calc(var(--w) * 230 / 232) 0 calc(var(--w) * 361 / 232);
  border-image:url(/assets/centro/archivo-columna-der.webp?v=1) 230 0 361 fill / calc(var(--w) * 230 / 232) 0 calc(var(--w) * 361 / 232) stretch;filter:drop-shadow(-4px 10px 10px rgba(8,14,30,.35))}
.ce-arch > .ce-volver{position:absolute;top:-50px;left:-40px;z-index:5;margin:0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:999px;
  background:rgba(255,252,245,.95);color:#1E1A14;font:700 14px var(--font);box-shadow:0 6px 16px -6px rgba(8,14,30,.55);cursor:pointer}
.ce-arch > .ce-volver i{font-size:17px}
/* Con el archivo abierto, la cabecera y los botones del Centro se apartan: asomaban por encima del marco */
.ce-escena:has(.ce-hoja-caja:is(.ce-archivo,.ce-arena,.ce-oraculo-hoja,.ce-estatua-hoja)) > :is(.ce-arriba-izq,.ce-arriba-der){opacity:0;pointer-events:none;transition:opacity .3s}
/* La cabecera, en la franja de arriba del marco, con el medallón sobre la muesca */
.ce-arch-cab{position:absolute;z-index:2;top:0;left:calc(96 / 1422 * 100cqw);right:calc(96 / 1422 * 100cqw);height:calc(229 / 1422 * 100cqw);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 60px calc(1.6cqw);text-align:center}
.ce-arch-sello{--s:clamp(62px,8.4cqw,88px);position:absolute;left:50%;top:calc(2.6cqw - var(--s) / 2);display:grid;place-items:center;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2)}
.ce-arch-sello svg.ce-laurel{position:absolute;inset:0;top:0;left:0;margin:0;width:100%;height:100%}   /* la corona de los pines lleva otras medidas */
.ce-arch-sello svg .lh{fill:url(#ce-lg-oro);stroke:rgba(120,80,20,.35)}
.ce-arch-sello i{position:relative;display:grid;place-items:center;width:calc(var(--s,88px) * .64);height:calc(var(--s,88px) * .64);border-radius:50%;font-size:calc(var(--s,88px) * .3);color:#7A5418;
  background:radial-gradient(circle at 32% 28%,#fff 0,#F6EFE2 34%,#E2D3B8 72%,#C9B48E 100%);
  box-shadow:inset -3px -4px 8px rgba(110,80,30,.3),inset 2px 2px 3px #fff,0 0 0 2.5px #C9963A,0 0 0 6px #FBF6EA,0 8px 16px -6px rgba(80,55,15,.5)}
/* Con el marco estrecho la franja de arriba es baja: sin la frase, y el nombre algo más pequeño */
@container (max-width: 900px){ .ce-arch-cab p{display:none} .ce-arch-cab{padding-bottom:2.4cqw} }
.ce-arch-cab h2{margin:0;font:700 clamp(24px,3.1cqw,38px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.005em;color:#1E1A14;text-shadow:0 1px 0 #fff}
.ce-arch-cab p{margin:5px auto 0;max-width:70ch;font:500 clamp(12.5px,1.3cqw,14.5px)/1.4 var(--font);color:#4A3E30}
/* El cuerpo, dentro del filete dorado: a la izquierda las pestañas y las tarjetas; a la derecha, la ficha */
.ce-arch-cuerpo{position:absolute;z-index:1;top:calc(250 / 1422 * 100cqw);left:calc(70 / 1422 * 100cqw);right:calc(70 / 1422 * 100cqw);bottom:calc(58 / 1422 * 100cqw);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,34%);gap:16px;padding:0 6px}
.ce-arch-lista{min-height:0;display:flex;flex-direction:column}
/* Las pestañas: una pastilla de mármol con la elegida en azul */
.ce-arch-tabs{flex:none;align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none;display:flex;gap:2px;margin:0 0 12px;padding:4px;border-radius:999px;background:rgba(232,222,204,.75);box-shadow:inset 0 1px 3px rgba(90,60,25,.2)}
.ce-arch-tabs button{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border:0;border-radius:999px;background:none;
  font:700 13.5px var(--font);color:#3A3024;cursor:pointer;transition:background .15s,color .15s}
.ce-arch-tabs button i{font-size:17px}
.ce-arch-tabs button span{min-width:20px;padding:1px 6px;border-radius:10px;background:rgba(150,112,62,.18);font-size:11.5px;text-align:center}
.ce-arch-tabs button:hover{background:rgba(255,255,255,.6)}
.ce-arch-tabs button.on{background:linear-gradient(180deg,#2C4FA8,var(--navy));color:#fff;box-shadow:0 4px 10px -4px rgba(30,58,134,.6)}
.ce-arch-tabs button.on span{background:rgba(255,255,255,.22)}
/* Detrás de las de base, para que manden: en portátil, más compactas; si aún no caben, las no elegidas
   se quedan en icono y número (el nombre sigue ahí para el lector de pantalla y como título) */
@container (max-width: 980px){ .ce-arch-tabs button{padding:7px 12px;font-size:12.5px} .ce-arch-tabs button i{display:none} }
@container (max-width: 900px){
  .ce-arch-tabs button{padding:6px 10px;gap:5px} .ce-arch-tabs button span{min-width:16px;padding:0 4px}
  .ce-arch-tabs button:not(.on) i{display:inline-block;font-size:16px}
  .ce-arch-tabs button:not(.on) em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} }
.ce-arch-tabs button em{font-style:normal}
.ce-arch-rejilla,.ce-arch-ficha{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(150,112,62,.4) transparent}
.ce-arch-rejilla{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px;align-content:start;padding:4px 6px 8px 4px}
/* Con el marco estrecho (portátil), dos tarjetas por fila en vez de una enorme */
@container (max-width: 860px){ .ce-arch-cuerpo{grid-template-columns:minmax(0,1fr) minmax(260px,36%)} .ce-arch-rejilla{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px} }
.ce-arch-vacio{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:10px;margin:30px auto;max-width:42ch;text-align:center;color:#6B5A42;font-size:14px;line-height:1.5}
.ce-arch-vacio i{font-size:34px;color:var(--oro)}
/* La losa de la cita, al final de los recomendados */
.ce-arch-cita{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 18px;text-align:center}
.ce-arch-cita svg.ce-laurel{position:static;margin:0;width:96px;height:96px;opacity:.75}
.ce-arch-cita svg .lh{fill:url(#ce-lg-oro)}
.ce-arch-cita q{font:italic 400 17px/1.4 Georgia,serif;color:#7A6A52;quotes:'«' '»'}
.ce-arch-cita i{display:block;width:38px;height:1px;background:rgba(122,106,82,.4)}
/* Una tarjeta */
.ce-libro{position:relative;border-radius:14px;background:#FFFCF5;box-shadow:0 0 0 1px rgba(150,112,62,.22),0 8px 16px -12px rgba(70,45,15,.45);transition:box-shadow .2s,transform .2s}
.ce-libro:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(150,112,62,.35),0 14px 22px -12px rgba(70,45,15,.5)}
.ce-libro.on{box-shadow:0 0 0 2.5px var(--navy),0 14px 22px -12px rgba(30,58,134,.45)}
.ce-libro-b{display:flex;flex-direction:column;width:100%;padding:8px 8px 10px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:14px}
.ce-libro-b:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.ce-libro-port{position:relative;display:grid;place-items:center;aspect-ratio:5/4;overflow:hidden;border-radius:9px;background:#E9DFCB;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ce-libro-fondo{position:absolute;inset:-24px;background:center/cover;filter:blur(14px) saturate(1.25) brightness(.8)}
.ce-libro-port img{position:absolute;inset:0;margin:auto;height:86%;width:auto;max-width:88%;object-fit:contain;display:block;border-radius:3px;box-shadow:0 10px 18px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.25)}
.ce-libro-port > i{font-size:42px;color:#A8875A}
.ce-libro-papiro{align-content:center;gap:2px;text-align:center;padding:8px;border:12px solid transparent;background:none;box-shadow:none;border-radius:0;overflow:visible;
  border-image:url(/assets/centro/papiro-hoja.webp?v=1) 60 fill / 12px stretch}   /* después de «border»: el atajo la borraba */
.ce-libro-papiro b{font:700 19px 'Cinzel',Georgia,serif;color:#4A3416}
.ce-libro-papiro small{font-size:12px;color:#6B5230}
.ce-libro-papiro i{font-size:30px;color:#8A6420;margin-top:6px}
.ce-libro-tipo{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin:-14px 0 0 8px;position:relative;z-index:1;padding:3px 10px 3px 8px;border-radius:999px;
  background:#FFFCF5;box-shadow:0 0 0 1px rgba(150,112,62,.28),0 2px 6px rgba(70,45,15,.15);font:700 11.5px var(--font);color:#5B4A35}
.ce-libro-tipo i{font-size:14px}
.ce-libro-tx{display:flex;flex-direction:column;gap:2px;padding:7px 4px 0}
.ce-libro-tx > b{font:700 16px/1.2 Georgia,'Times New Roman',serif;color:var(--tinta)}
.ce-libro-tx > small{font-size:12.5px;color:#6B5A42}
.ce-arch-nota{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:6px;padding:4px 10px;border-radius:999px;background:#F4EBDA;font-size:12px;color:#5B4A35}
.ce-arch-nota > i{color:#E6A817;font-size:15px}
.ce-arch-nota em{font-style:normal}
.ce-arch-nota > b{font-size:13px;color:var(--tinta)}
.ce-arch-nota small{margin-left:-3px;color:#8A7A62}
.ce-imdb{display:inline-block;padding:0 4px;border-radius:3px;background:#F5C518;color:#000;font:800 10.5px/1.5 Arial,sans-serif}
.ce-libro-ok{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:700 11.5px var(--font);font-style:normal;color:#B83E5C}
.ce-libro-marca{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(255,252,245,.94);color:#4A3A22;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:18px}
.ce-libro-marca[aria-pressed="true"]{background:var(--navy);color:#fff}
.ce-libro-marca:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* La ficha */
.ce-arch-ficha{border-radius:16px;background:#FFFCF5;box-shadow:0 0 0 1px rgba(150,112,62,.25),0 12px 26px -16px rgba(70,45,15,.5)}
.ce-arch-atras{display:none}
.ce-ficha-libro{padding:0 18px 18px}
.ce-ficha-libro > .ce-libro-tipo{margin:-13px 0 0}
.ce-ficha-port{position:relative;display:grid;place-items:center;height:250px;margin:0 -18px;overflow:hidden;border-radius:16px 16px 0 0;background:#E9DFCB}
.ce-ficha-fondo{position:absolute;inset:-30px;background:center/cover;filter:blur(18px) saturate(1.2) brightness(.82)}
.ce-ficha-port img{position:relative;height:210px;width:auto;max-width:80%;object-fit:contain;border-radius:6px;box-shadow:0 14px 28px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.3)}
.ce-ficha-libro h3{margin:10px 0 4px;font:700 25px/1.15 Georgia,'Times New Roman',serif;color:var(--tinta)}
.ce-ficha-quien{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:13.5px;color:#5B4A35}
.ce-ficha-quien span{display:inline-flex;align-items:center;gap:5px}
.ce-ficha-quien i{font-size:16px;color:#8A7A62}
.ce-ficha-nota{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:10px 12px;border-radius:12px;background:#F7F0E2;box-shadow:inset 0 0 0 1px rgba(150,112,62,.22);color:inherit;text-decoration:none}
.ce-ficha-nota > i:first-child{font-size:24px;color:#E6A817}
.ce-ficha-nota span{display:flex;flex-direction:column;flex:1}
.ce-ficha-nota b{font:800 20px/1.1 var(--font);color:var(--tinta)}
.ce-ficha-nota b small{font-size:13px;font-weight:600;color:#8A7A62}
.ce-ficha-nota em{font-style:normal;font-size:12px;color:#6B5A42}
.ce-ficha-nota > i:last-child{color:#8A7A62}
a.ce-ficha-nota:hover{background:#F2E8D4}
.ce-ficha-libro section{margin-top:14px}
.ce-ficha-libro h4{display:flex;align-items:center;gap:7px;margin:0 0 4px;font:700 14px 'Cinzel',Georgia,serif;letter-spacing:.02em;color:#5B4214}
.ce-ficha-libro h4 i{font-size:18px;color:var(--oro)}
.ce-ficha-libro section p{margin:0;font:500 14px/1.55 var(--font);color:#3F3424}
.ce-ficha-tec{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.ce-ficha-tec li{position:relative;padding:6px 10px 6px 28px;border-radius:9px;background:#F7F0E2;font:600 13.5px/1.35 var(--font);color:#3F3424}
.ce-ficha-tec li::before{content:'';position:absolute;left:10px;top:50%;width:8px;height:8px;margin-top:-4px;rotate:45deg;background:var(--oro)}
.ce-ficha-acc{display:grid;gap:8px;margin-top:18px}
.ce-arch-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--navy);background:#fff;
  color:var(--navy);font:700 14.5px var(--font);cursor:pointer}
.ce-arch-btn i{font-size:19px}
.ce-arch-btn.principal{background:linear-gradient(180deg,#2C4FA8,var(--navy));color:#fff;box-shadow:0 6px 14px -6px rgba(30,58,134,.7)}
.ce-arch-btn.principal.hecho{background:#fff;color:#B83E5C;border-color:#E3A5B6;box-shadow:none}
.ce-arch-btn:hover{filter:brightness(1.06)}
.ce-ficha-nota-col{margin:8px 0 0;font-size:12px;color:#8A7A62;text-align:center}
.ce-ficha-libro .ce-perg{margin-top:12px}
.ce-ficha-libro .ce-hecho-msg{margin-top:14px}
/* La apertura (2026-10-21): solo al entrar (.abre), no al cambiar de pestaña ni al guardar. El marco
   asoma, las columnas llegan de los lados y encajan contra él, el medallón gira como una moneda y se
   abre la corona, un destello dorado cruza el mármol de izquierda a derecha (como el del friso) y las
   tarjetas se colocan una tras otra, como libros en un estante. Todo en algo más de un segundo */
.ce-arch.abre{animation:ceArchAbre .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes ceArchAbre{from{opacity:0;scale:.95;translate:0 16px}}
.ce-hoja-caja.ce-archivo:has(.ce-arch.abre) > .ce-hoja-x{animation:ceArchAsoma .3s .55s both}
@keyframes ceArchAsoma{from{opacity:0}}
.ce-arch.abre .ce-arch-col{animation:ceArchColIzq .55s cubic-bezier(.3,1.35,.5,1) .12s both}
.ce-arch.abre .ce-arch-col.der{animation-name:ceArchColDer}
@keyframes ceArchColIzq{from{opacity:0;translate:-5cqw 0}}
@keyframes ceArchColDer{from{opacity:0;translate:5cqw 0}}
.ce-arch.abre .ce-arch-sello i{animation:ceArchMoneda .75s cubic-bezier(.3,1.3,.5,1) .3s both}
@keyframes ceArchMoneda{from{opacity:0;transform:perspective(320px) rotateY(-200deg) scale(.55)}}
.ce-arch.abre .ce-arch-sello svg.ce-laurel{animation:ceArchCorona .55s cubic-bezier(.3,1.4,.5,1) .5s both}
@keyframes ceArchCorona{from{opacity:0;scale:.5;rotate:-30deg}}
.ce-arch-brillo{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0}
@supports (-webkit-mask-box-image: none){
  .ce-arch.abre .ce-arch-brillo{background:linear-gradient(100deg,transparent 45.5%,rgba(240,200,110,.28) 48%,rgba(255,244,212,.85) 50%,rgba(240,200,110,.28) 52%,transparent 54.5%) 100% 0 / 260% 100% no-repeat;
    -webkit-mask-box-image:url(/assets/centro/archivo-marco.webp?v=1) 262 96 80 fill / calc(262 / 1422 * 100cqw) calc(96 / 1422 * 100cqw) calc(80 / 1422 * 100cqw) stretch;
    animation:ceArchBrillo 1.1s cubic-bezier(.45,0,.3,1) .55s both}
}
@keyframes ceArchBrillo{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
.ce-arch.abre :is(.ce-libro,.ce-arch-cita){animation:ceArchLibro .42s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:.42s}
.ce-arch.abre :is(.ce-libro,.ce-arch-cita):nth-child(2){animation-delay:.48s}
.ce-arch.abre :is(.ce-libro,.ce-arch-cita):nth-child(3){animation-delay:.54s}
.ce-arch.abre :is(.ce-libro,.ce-arch-cita):nth-child(4){animation-delay:.6s}
.ce-arch.abre :is(.ce-libro,.ce-arch-cita):nth-child(5){animation-delay:.66s}
.ce-arch.abre :is(.ce-libro,.ce-arch-cita):nth-child(n+6){animation-delay:.72s}
@keyframes ceArchLibro{from{opacity:0;translate:0 14px;rotate:-1.2deg}}
.ce-arch.abre .ce-arch-ficha{animation:ceArchFicha .5s cubic-bezier(.2,.9,.25,1) .38s both}
@keyframes ceArchFicha{from{opacity:0;translate:18px 0}}
@media (prefers-reduced-motion: reduce){ .ce-arch.abre,.ce-arch.abre *,.ce-hoja-caja.ce-archivo > .ce-hoja-x{animation:none !important} }
@media(max-width:900px){ .ce-arch-cuerpo{grid-template-columns:minmax(0,1fr) 280px} .ce-arch-rejilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
@media(max-width:768px){
  /* Sin columnas; el marco, a todo el ancho, con su franja de arriba algo más alta para el nombre */
  .ce-hoja .ce-hoja-caja.ce-archivo{top:6px;bottom:6px;width:calc(100% - 12px);padding:0}
  .ce-arch-col,.ce-arch > .ce-volver{display:none}
  .ce-arch-marco{border-width:74px 18px 22px;border-image-width:74px 18px 22px}
  .ce-arch.abre .ce-arch-brillo{-webkit-mask-box-image-width:74px 18px 22px}
  .ce-arch-cab{left:18px;right:18px;height:72px;flex-direction:row;justify-content:center;gap:8px;padding:12px 44px 4px}
  .ce-arch-sello{position:relative;left:auto;top:auto;flex:none;width:52px;height:52px;margin:0}
  .ce-arch-sello i{width:32px;height:32px;font-size:16px;box-shadow:inset -2px -3px 5px rgba(110,80,30,.3),0 0 0 2px #C9963A,0 0 0 4px #FBF6EA}
  .ce-arch-cab h2{font-size:18px;text-align:left}.ce-arch-cab p{display:none}
  .ce-hoja .ce-hoja-caja.ce-archivo .ce-hoja-x{top:20px;right:14px;translate:none;width:34px;height:34px}
  .ce-arch-cuerpo{top:80px;left:14px;right:14px;bottom:18px;display:block;padding:0}
  .ce-arch-lista{height:100%}
  .ce-arch-tabs{align-self:stretch;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
  .ce-arch-tabs button{flex:none;padding:7px 12px;font-size:12.5px}
  .ce-arch-tabs button i{display:none}
  .ce-arch-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ce-arch-cita{display:none}
  .ce-libro-tx > b{font-size:14.5px}
  /* La ficha, encima, al elegir una tarjeta */
  .ce-arch-ficha{position:absolute;inset:0;z-index:3;visibility:hidden;opacity:0;translate:0 14px;transition:opacity .25s,translate .25s,visibility 0s .25s}
  .ce-arch.ver-ficha .ce-arch-ficha{visibility:visible;opacity:1;translate:0 0;transition:opacity .25s,translate .25s}
  .ce-arch-atras{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:2;width:100%;padding:12px 14px;border:0;background:rgba(255,252,245,.96);
    font:700 14px var(--font);color:var(--navy);cursor:pointer;border-radius:16px 16px 0 0;box-shadow:0 1px 0 rgba(150,112,62,.2)}
  .ce-ficha-port{border-radius:0;height:220px}
}
@media(prefers-reduced-motion:reduce){ .ce-libro,.ce-arch-ficha{transition:none} .ce-hoja-caja.ce-archivo{animation:none} }

/* ══ CENTRO: LOS JUEGOS DE CADA TERRITORIO (2026-10-21) ══
   Como la referencia del equipo: un marco de mármol con antorchas, estandartes, el medallón azul y dos
   placas (arena-marco.webp, 1448 × 1060, ilustración del equipo) que se ve entero: se ajusta al hueco y
   solo se estira un 5 % de ancho o de alto. Lo de dentro va en % de la imagen; medidas en px de ella: el
   medallón, centrado en 348,184; la placa grande, de 470,153 a 870,263; la pequeña, de 925,183 a
   1235,270; el cuerpo, de 172,300 a 1272,993; las llamas, en 130,58 · 1310,58 · 83,682 · 1363,682; la
   X, en 1268,198. En el móvil, el marco del archivo y el medallón recortado (arena-medallon.webp) */
.ce-hoja-caja.ce-arena{--tinta:#2A2014;--navy:#1E3A86;--oro:#C9963A;container-type:size;top:62px;bottom:12px;left:12px;right:12px;width:auto;margin:0;
  padding:0;overflow:visible;border-radius:0;background:none;box-shadow:none;color:var(--tinta);animation:none}
.ce-ar{position:absolute;inset:0;margin:auto;container-type:inline-size;width:min(100cqw,1240px,143cqh);height:min(100cqh,min(100cqw,1240px,143cqh) / 1.3)}
.ce-ar-marco{position:absolute;inset:0;pointer-events:none;background:url(/assets/centro/arena-marco.webp?v=1) 0 0 / 100% 100% no-repeat;filter:drop-shadow(0 24px 28px rgba(8,14,30,.5))}
.ce-ar > .ce-volver{position:absolute;top:-50px;left:0;z-index:5;margin:0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:999px;
  background:rgba(255,252,245,.95);color:#1E1A14;font:700 14px var(--font);box-shadow:0 6px 16px -6px rgba(8,14,30,.55);cursor:pointer}
.ce-ar > .ce-volver i{font-size:17px}
.ce-hoja .ce-hoja-caja.ce-arena .ce-ar > .ce-hoja-x{position:absolute;z-index:4;left:87.57%;top:18.68%;right:auto;translate:-50% -50%}
/* Las llamas viven: un resplandor que parpadea encima de cada antorcha */
.ce-ar-llamas i{position:absolute;width:8%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,214,120,.62),rgba(255,150,50,.2) 55%,transparent);animation:ceArLlama 2.3s ease-in-out infinite}
.ce-ar-llamas i:nth-child(1){left:8.98%;top:5.5%}
.ce-ar-llamas i:nth-child(2){left:90.47%;top:5.5%;animation-delay:-.8s;animation-duration:2.6s}
.ce-ar-llamas i:nth-child(3){left:5.73%;top:64.3%;animation-delay:-1.4s;animation-duration:2.1s}
.ce-ar-llamas i:nth-child(4){left:94.13%;top:64.3%;animation-delay:-.4s;animation-duration:2.45s}
@keyframes ceArLlama{0%,100%{opacity:.55;scale:.92}18%{opacity:.9;scale:1.04}33%{opacity:.62;scale:.97}52%{opacity:1;scale:1.08}70%{opacity:.68;scale:.95}86%{opacity:.9;scale:1.02}}
/* El medallón azul de la imagen, con el mando en oro */
.ce-ar-sello{position:absolute;left:24.03%;top:17.36%;width:10.8%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;pointer-events:none}
.ce-ar-sello i{font-size:4.6cqw;color:#F4CE6E;filter:drop-shadow(0 1px 0 #7A5418) drop-shadow(0 0 6px rgba(244,206,110,.45))}
/* La placa grande: el nombre del sitio; la pequeña, su frase */
.ce-ar-placa{position:absolute;left:32.46%;top:14.43%;width:27.62%;height:10.38%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 1.6%;text-align:center}
.ce-ar-placa h2{margin:0;font:700 2.45cqw/1.05 Georgia,'Times New Roman',serif;color:#1E1A14;text-shadow:0 1px 0 #fff;text-wrap:balance}
.ce-ar-placa h2.largo{font-size:2.1cqw}
.ce-ar-placa p{margin:.45cqw 0 0;font:600 .98cqw 'Cinzel',Georgia,serif;letter-spacing:.14em;color:#8A6420}
.ce-ar > .ce-ar-lema{position:absolute;left:63.88%;top:17.26%;width:21.41%;height:8.21%;display:grid;place-items:center;margin:0;padding:0 1.4%;text-align:center;
  font:italic 400 1.42cqw/1.25 Georgia,serif;color:#6B5434;text-wrap:balance}
/* El cuerpo: las pestañas con lo hecho y las tarjetas */
.ce-ar-cuerpo{position:absolute;z-index:1;left:13%;width:73.8%;top:30%;height:62.6%;display:flex;flex-direction:column}
.ce-ar-barra{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 1.1cqw}
.ce-ar-tabs{margin:0}
.ce-ar-prog{display:flex;align-items:center;gap:8px;font:600 12.5px var(--font);color:#6B5A42;white-space:nowrap}
.ce-ar-prog > span{width:70px;height:6px;border-radius:3px;background:rgba(150,112,62,.2);overflow:hidden}
.ce-ar-prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#C9963A,#F2C462)}
.ce-ar-rejilla{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(150,112,62,.4) transparent;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:1.1cqw;align-content:start;padding:4px 6px 8px 4px}
/* Una tarjeta: el icono en su pedestal, el nombre, de qué va, su canon y el botón */
.ce-jg{--c:#2C4FA8;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"ic tx" "pie pie" "btn btn";gap:7px 12px;padding:11px 12px 12px;
  border-radius:14px;background:#FFFCF5;box-shadow:0 0 0 1px rgba(150,112,62,.22),0 8px 16px -12px rgba(70,45,15,.45);transition:box-shadow .2s,transform .2s}
.ce-jg:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(150,112,62,.35),0 14px 22px -12px rgba(70,45,15,.5)}
.ce-jg.t-herramienta{--c:#1F8A84}.ce-jg.t-duelo{--c:#B83E3E}
.ce-jg-ic{grid-area:ic;position:relative;width:60px;height:66px;display:grid;justify-items:center;align-content:start}
.ce-jg-ic > i{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:25px;color:#fff;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--c) 45%,#fff),var(--c) 62%,color-mix(in srgb,var(--c) 70%,#000));
  box-shadow:0 0 0 2px #E2BE6A,0 0 0 4px #FFF8E6,0 0 0 5px rgba(150,112,62,.35),0 8px 12px -6px rgba(0,0,0,.45)}
.ce-jg-ic::before{content:'';position:absolute;bottom:10px;left:50%;width:44px;height:7px;margin-left:-22px;border-radius:2px;background:linear-gradient(#FFFBF2,#E4D6BD);box-shadow:0 1px 0 rgba(150,112,62,.4)}
.ce-jg-ic::after{content:'';position:absolute;bottom:0;left:50%;width:54px;height:11px;margin-left:-27px;border-radius:3px 3px 5px 5px;background:linear-gradient(#F3EADA,#D3C1A2);box-shadow:inset 0 1px 0 #fff,0 4px 6px -3px rgba(80,55,20,.45)}
.ce-jg-ic > b{position:absolute;z-index:2;top:-2px;right:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2E9E5B;color:#fff;font-size:12px;box-shadow:0 0 0 2px #FFFCF5}
.ce-jg-ic > b.ti-star-filled{background:#E6A817}
.ce-jg-tx{grid-area:tx;display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:2px}
.ce-jg-tx > b{font:700 15.5px/1.2 Georgia,'Times New Roman',serif;color:var(--tinta)}
.ce-jg-tx > small{font-size:12.5px;line-height:1.4;color:#6B5A42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ce-jg-pie{grid-area:pie;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ce-jg-can{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:999px;font:700 11.5px var(--font);background:#FCE4E8;color:#A3354F}
.ce-jg-can i{font-size:14px}
.ce-jg-can.c-inventio{background:#FFF1D6;color:#8A5E0E}.ce-jg-can.c-dispositio{background:#E3ECFF;color:#2C4FA8}
.ce-jg-can.c-elocutio{background:#E2F4EA;color:#2E7D50}.ce-jg-can.c-memoria{background:#EEE6FF;color:#6A4BB5}
.ce-jg-est{display:inline-flex;align-items:center;gap:4px;font:600 11.5px var(--font);color:#6B5A42}
.ce-jg-est.oro{color:#A97A10}.ce-jg-est.oro i{color:#E6A817}.ce-jg-est.hecho{color:#2E7D50}
.ce-jg-btn{grid-area:btn;align-self:end;position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;margin-top:2px;padding:0 30px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg,#2C4FA8,var(--navy));color:#fff;font:700 14px var(--font);box-shadow:0 6px 14px -7px rgba(30,58,134,.75)}
.ce-jg-btn i{font-size:18px}
.ce-jg-btn i:last-child{position:absolute;right:10px;font-size:16px;opacity:.8}
.ce-jg-btn:hover{filter:brightness(1.08)}
.ce-jg-btn:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.ce-jg.hecho .ce-jg-btn{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
/* La apertura: el marco asoma, las antorchas se avivan, el mando gira como una moneda y las tarjetas se
   colocan una tras otra (como en el archivo) */
.ce-ar.abre{animation:ceArchAbre .5s cubic-bezier(.2,.9,.25,1) both}
.ce-ar.abre .ce-ar-sello i{animation:ceArchMoneda .75s cubic-bezier(.3,1.3,.5,1) .3s both}
.ce-ar.abre .ce-ar-llamas i{animation:ceArAviva .8s ease-out .3s both,ceArLlama 2.3s ease-in-out 1.1s infinite}
/* Cada antorcha a su ritmo también al abrir */
.ce-ar.abre .ce-ar-llamas i:nth-child(2){animation-delay:.38s,1.5s}.ce-ar.abre .ce-ar-llamas i:nth-child(3){animation-delay:.34s,.9s}.ce-ar.abre .ce-ar-llamas i:nth-child(4){animation-delay:.42s,1.3s}
@keyframes ceArAviva{0%{opacity:0;scale:.3}55%{opacity:1;scale:1.35}100%{opacity:.6;scale:.94}}
.ce-ar.abre .ce-jg{animation:ceArchLibro .42s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:.42s}
.ce-ar.abre .ce-jg:nth-child(2){animation-delay:.48s}.ce-ar.abre .ce-jg:nth-child(3){animation-delay:.54s}
.ce-ar.abre .ce-jg:nth-child(4){animation-delay:.6s}.ce-ar.abre .ce-jg:nth-child(n+5){animation-delay:.66s}
.ce-ar.abre .ce-hoja-x{animation:ceArchAsoma .3s .55s both}
@container (max-width: 900px){ .ce-ar-prog > span{display:none} .ce-ar-rejilla{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .ce-jg-ic{width:54px;height:62px} .ce-jg-ic > i{width:42px;height:42px;font-size:22px} }
@media (prefers-reduced-motion: reduce){ .ce-ar.abre,.ce-ar.abre *,.ce-ar-llamas i{animation:none !important} .ce-jg{transition:none} }
@media(max-width:768px){
  /* En el móvil, el marco del archivo (se estira por sus zonas lisas) con el medallón y el nombre arriba */
  .ce-hoja .ce-hoja-caja.ce-arena{top:6px;bottom:6px;left:6px;right:6px}
  .ce-ar{width:auto;height:auto;margin:0}
  .ce-ar-marco{background:none;border-style:solid;border-color:transparent;border-width:74px 18px 22px;
    border-image:url(/assets/centro/archivo-marco.webp?v=1) 262 96 80 fill / 74px 18px 22px stretch;filter:drop-shadow(0 14px 18px rgba(8,14,30,.45))}
  .ce-ar-llamas,.ce-ar > .ce-ar-lema,.ce-ar > .ce-volver{display:none}
  .ce-ar-sello{left:22px;top:14px;width:54px;translate:none;border-radius:50%;background:url(/assets/centro/arena-medallon.webp?v=1) center / 104% no-repeat;box-shadow:0 4px 8px -3px rgba(60,40,10,.45)}
  .ce-ar-sello i{font-size:22px}
  .ce-ar-placa{left:84px;right:54px;top:12px;width:auto;height:58px;align-items:flex-start;padding:0;text-align:left}
  .ce-ar-placa h2,.ce-ar-placa h2.largo{font-size:18px}
  .ce-ar-placa p{margin-top:3px;font-size:9.5px}
  .ce-hoja .ce-hoja-caja.ce-arena .ce-ar > .ce-hoja-x{left:auto;right:14px;top:20px;translate:none;width:34px;height:34px}
  .ce-ar-cuerpo{left:14px;right:14px;width:auto;top:82px;bottom:18px;height:auto}
  .ce-ar-barra{margin-bottom:10px}
  .ce-ar-tabs{flex:1;min-width:0}
  .ce-ar-tabs button{padding:7px 12px;font-size:12.5px}
  .ce-ar-prog{font-size:11.5px}
  .ce-ar-rejilla{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* ══ CENTRO: LA ESTATUA DE CADA TERRITORIO, SUS VÍDEOS (2026-10-21) ══
   Como la referencia del equipo: el marco de mármol con columnas, antorchas, estandartes y el busto de
   su ilustración (984 × 1556). El marco va sin el busto (estatua-marco.webp) como border-image: arriba,
   580 px (las antorchas, la cornisa y los estandartes enteros), a los lados 181 y 182, abajo 86; con
   --s (la escala de la imagen) fija en cada tamaño de pantalla, así se ensancha sin deformar columnas
   ni antorchas. El busto (estatua-busto.webp) va aparte, centrado; y la greca, aparte también
   (estatua-greca.webp, un periodo de 69 px) se repite entera sobre la del marco, que al ensanchar se
   estira. En px de la imagen: la greca, de 255 a 300; las llamas, en 105,92 y 879,92; lo de dentro,
   desde 322 arriba, 132 a los lados y 92 abajo */
.ce-hoja-caja.ce-estatua-hoja{--s:.62;--tinta:#2A2014;--navy:#1E3A86;--oro:#C9963A;top:6px;bottom:6px;left:0;right:0;margin:0 auto;width:min(980px,calc(100% - 32px));
  padding:0;overflow:visible;border-radius:0;background:none;box-shadow:none;color:var(--tinta);animation:none}
.ce-es{position:absolute;inset:0}
.ce-es-marco{position:absolute;inset:0;pointer-events:none;border-style:solid;border-color:transparent;
  border-width:calc(580px * var(--s)) calc(182px * var(--s)) calc(86px * var(--s)) calc(181px * var(--s));
  border-image:url(/assets/centro/estatua-marco.webp?v=1) 580 182 86 181 fill / calc(580px * var(--s)) calc(182px * var(--s)) calc(86px * var(--s)) calc(181px * var(--s)) stretch;
  filter:drop-shadow(0 22px 26px rgba(8,14,30,.45))}
.ce-es-greca{position:absolute;left:calc(181px * var(--s));right:calc(182px * var(--s));top:calc(255px * var(--s));height:calc(45px * var(--s));pointer-events:none;
  background:url(/assets/centro/estatua-greca.webp?v=1) 0 0 / auto 100% round}
.ce-es-busto{position:absolute;z-index:1;left:50%;top:0;width:calc(384px * var(--s));height:auto;translate:-50% 0;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(40,25,5,.35))}
.ce-es-llamas i{position:absolute;top:calc(92px * var(--s));width:calc(150px * var(--s));aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,214,120,.62),rgba(255,150,50,.2) 55%,transparent);animation:ceArLlama 2.3s ease-in-out infinite}
.ce-es-llamas i:first-child{left:calc(105px * var(--s))}
.ce-es-llamas i:last-child{left:auto;right:calc(105px * var(--s));translate:50% -50%;animation-delay:-.9s;animation-duration:2.6s}
.ce-es > .ce-volver{position:absolute;top:calc(150px * var(--s) - 20px);left:calc(200px * var(--s));z-index:5;margin:0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;
  border-radius:999px;background:rgba(255,252,245,.95);color:#1E1A14;font:700 14px var(--font);white-space:nowrap;box-shadow:0 6px 16px -6px rgba(8,14,30,.55);cursor:pointer}
.ce-es > .ce-volver i{font-size:17px}
.ce-hoja .ce-hoja-caja.ce-estatua-hoja .ce-es > .ce-hoja-x{position:absolute;z-index:6;top:calc(150px * var(--s) - 18px);right:calc(200px * var(--s));left:auto;translate:none}
/* Lo de dentro: el nombre, las pestañas y las tarjetas */
.ce-es-cuerpo{position:absolute;z-index:2;top:calc(322px * var(--s));left:calc(132px * var(--s));right:calc(132px * var(--s));bottom:calc(92px * var(--s));container-type:inline-size;display:flex;flex-direction:column;align-items:center}
.ce-es-cab{flex:none;text-align:center;padding:6px 20px 0}
.ce-es-cab h2{margin:0;font:700 clamp(24px,4.4cqw,36px)/1.05 Georgia,'Times New Roman',serif;color:#1E2A5E;text-shadow:0 1px 0 #fff;text-wrap:balance}
.ce-es-cinta{display:block;margin-top:4px;font:600 clamp(15px,2.3cqw,19px) var(--font);color:#B07A22}
.ce-es-cab p{margin:6px auto 0;max-width:60ch;font:400 clamp(13px,1.8cqw,15px)/1.4 var(--font);color:#5B4A35}
.ce-es-tabs{flex:none;margin:12px 0 12px}
/* Caben con su nombre (las reglas de las del archivo los quitan por debajo de 900) */
@container (min-width: 520px){ .ce-es-tabs.ce-arch-tabs button:not(.on) em{position:static;width:auto;height:auto;overflow:visible;clip-path:none} .ce-es-tabs.ce-arch-tabs button i{display:inline-block} }
.ce-es-tabs .ti-brand-youtube-filled{color:#E62117}
.ce-es-tabs button.on .ti-brand-youtube-filled{color:#fff}
.ce-es-rejilla{flex:1;align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(150,112,62,.4) transparent;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-content:start;padding:4px 8px 10px}
/* Una tarjeta: la miniatura con su número, lo que dura y el play; el título, quién y, si tiene candado, cómo verlo */
.ce-vid{border-radius:14px;background:#FFFCF5;box-shadow:0 0 0 1px rgba(150,112,62,.22),0 8px 16px -12px rgba(70,45,15,.45);transition:box-shadow .2s,transform .2s}
.ce-vid:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(150,112,62,.35),0 14px 22px -12px rgba(70,45,15,.5)}
.ce-vid-b{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"mini mini" "tx ir";align-items:start;gap:0 8px;width:100%;height:100%;padding:0 0 12px;border:0;background:none;
  text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:14px}
.ce-vid-b:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.ce-vid-mini{grid-area:mini;position:relative;display:grid;place-items:center;aspect-ratio:16/9;margin-bottom:10px;border-radius:14px 14px 0 0;overflow:hidden;background:#2B2A33 center / cover}
.ce-vid-mini::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,20,.35),transparent 30%,transparent 70%,rgba(10,10,20,.25))}
.ce-vid-num,.ce-vid-dur,.ce-vid-idioma{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font:700 12px var(--font)}
.ce-vid-num{top:8px;left:8px;background:rgba(255,253,248,.95);color:#1E1A14}
.ce-vid.visto .ce-vid-num{background:#2E9E5B;color:#fff}
.ce-vid-dur{top:8px;right:8px;background:rgba(15,15,25,.72);color:#fff}
.ce-vid-dur i{font-size:13px}
.ce-vid-idioma{bottom:8px;right:8px;background:rgba(15,15,25,.72);color:#fff;font-weight:600}
.ce-vid-play{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);color:#1E1A14;font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);transition:scale .2s}
.ce-vid-b:hover .ce-vid-play{scale:1.08}
.ce-vid-tx{grid-area:tx;display:flex;flex-direction:column;gap:5px;min-width:0;padding-left:14px}
.ce-vid-tx > b{font:700 16.5px/1.2 Georgia,'Times New Roman',serif;color:var(--tinta)}
.ce-vid-tx > small{display:flex;align-items:center;gap:6px;font:500 12.5px/1.3 var(--font);color:#6B5A42}
.ce-vid-tx > small > i{font-size:17px;flex:none}
.ce-vid-yt{color:#E62117}
.ce-vid-gratis{color:#2E7D50}
.ce-vid-ir{grid-area:ir;align-self:end;display:grid;place-items:center;width:38px;height:38px;margin-right:12px;border-radius:50%;background:#F3E3C3;color:#7A5418;font-size:19px}
/* Con candado: la miniatura en gris y el candado en su sitio */
.ce-vid.cerrado .ce-vid-mini{filter:grayscale(1) contrast(.85) brightness(1.08)}
.ce-vid.cerrado .ce-vid-play{color:#B07A22}
.ce-vid.cerrado .ce-vid-tx > b{color:#4A4038}
.ce-vid-candado{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:3px;padding:6px 12px;border-radius:999px;background:#EFE6D6;font:600 12px var(--font);color:#8A5E14}
.ce-vid-candado i{font-size:15px}
/* Ver un vídeo del curso, aquí mismo; y el aviso del candado */
.ce-es-ver{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:rgba(10,14,28,.62);backdrop-filter:blur(3px);animation:ceArchAsoma .25s both}
.ce-es-ver-caja{width:min(860px,100%);border-radius:18px;overflow:hidden;background:#FFFCF5;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:ceArchAbre .35s cubic-bezier(.2,.9,.25,1) both}
.ce-es-ver-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 18px}
.ce-es-ver-cab span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ce-es-ver-cab b{font:700 17px/1.2 Georgia,serif;color:var(--tinta)}
.ce-es-ver-cab small{font:500 12.5px var(--font);color:#6B5A42}
.ce-es-ver-x{flex:none;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#F3ECDF;color:#2A2014;font-size:19px;cursor:pointer}
.ce-es-ver-video{position:relative;aspect-ratio:16/9;background:#111;display:grid;place-items:center}
.ce-es-ver-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ce-es-ver-carga i{font-size:34px;color:#fff;opacity:.7;animation:ceGira 1s linear infinite;display:inline-block}
@keyframes ceGira{to{rotate:360deg}}
.ce-es-ver-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:12px 18px;font:500 13.5px var(--font);color:#5B4A35}
.ce-es-ver-pie button{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border:0;border-radius:999px;background:linear-gradient(180deg,#2C4FA8,var(--navy));color:#fff;font:700 13px var(--font);cursor:pointer}
.ce-es-pide-caja{width:min(400px,100%);display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 20px 18px;border-radius:18px;overflow:hidden;background:#FFFCF5;text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:ceArchAbre .35s cubic-bezier(.2,.9,.25,1) both}
.ce-es-pide-mini{display:grid;place-items:center;aspect-ratio:16/9;margin:0 -20px 4px;background:#2B2A33 center / cover;filter:grayscale(.9)}
.ce-es-pide-mini i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:#B07A22;font-size:28px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.ce-es-pide-caja h3{margin:0;font:700 19px/1.2 Georgia,serif;color:var(--tinta)}
.ce-es-pide-caja p{margin:0 0 4px;font:500 14px/1.45 var(--font);color:#5B4A35}
.ce-es-pide-no{border:0;background:none;padding:6px;font:600 13.5px var(--font);color:#6B5A42;cursor:pointer}
/* La apertura: el marco asoma, el busto sube a su pedestal, las antorchas se avivan y las tarjetas se colocan */
.ce-es.abre{animation:ceArchAbre .5s cubic-bezier(.2,.9,.25,1) both}
.ce-es.abre .ce-es-busto{animation:ceEsBusto .7s cubic-bezier(.3,1.3,.5,1) .25s both}
@keyframes ceEsBusto{from{opacity:0;translate:-50% 26px;scale:.92}}
.ce-es.abre .ce-es-llamas i{animation:ceArAviva .8s ease-out .3s both,ceArLlama 2.3s ease-in-out 1.1s infinite}
.ce-es.abre .ce-vid{animation:ceArchLibro .42s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(.4s + var(--n,0) * .06s)}
.ce-es.abre .ce-hoja-x{animation:ceArchAsoma .3s .55s both}
@media (prefers-reduced-motion: reduce){ .ce-es.abre,.ce-es.abre *,.ce-es-llamas i,.ce-es-ver,.ce-es-ver *{animation:none !important} .ce-vid{transition:none} }
@media(max-width:1100px){ .ce-hoja-caja.ce-estatua-hoja{--s:.55;width:calc(100% - 20px)} }
@media(max-width:768px){
  .ce-hoja .ce-hoja-caja.ce-estatua-hoja{--s:.4;top:4px;bottom:4px;width:calc(100% - 8px)}
  .ce-es > .ce-volver{display:none}
  .ce-hoja .ce-hoja-caja.ce-estatua-hoja .ce-es > .ce-hoja-x{top:calc(150px * var(--s) - 17px);right:calc(190px * var(--s));width:34px;height:34px}
  .ce-es-cab{padding:2px 6px 0}
  .ce-es-cab p{display:none}
  .ce-es-tabs{align-self:stretch;margin:8px 0}
  .ce-es-rejilla{grid-template-columns:minmax(0,1fr);gap:10px;padding:2px 2px 8px}
  .ce-es-ver{padding:8px}
}
/* La vista previa de la chincheta: tres miniaturas de sus vídeos */
.ce-prev-videos{position:relative;display:block;width:190px;height:78px}
.ce-prev-videos i{position:absolute;top:calc(8px + var(--n) * 4px);left:calc(var(--n) * 48px);width:96px;aspect-ratio:16/9;border-radius:7px;background:#333 center / cover;
  box-shadow:0 0 0 2px #fff,0 6px 12px -4px rgba(0,0,0,.4);rotate:calc((var(--n) - 1) * 5deg);display:grid;place-items:center}
.ce-prev-videos b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.92);color:#1E1A14;font-size:12px}
.ce-prev.dedo .ce-prev-videos{--esc-m:.5;scale:.6;margin:-14px -36px}

/* ══ CENTRO: EL ORÁCULO DE CADA TERRITORIO (2026-10-21) ══
   Como la referencia del equipo: el panel de mármol con el árbol, las antorchas, el medallón y la greca
   (oraculo-marco.webp, 870 × 1474, recortado de su ilustración) como border-image: arriba, 420 px (la
   corona y la placa del título); a los lados, 22; abajo, 24. Los anchos van en cqw, así la corona escala
   entera y sin deformarse, y solo se estiran los lados. El centro, del color del mármol de la imagen. En
   px de la imagen: el medallón, centrado en 426,227 (el hueco, de 104); la placa, de 32,295 a 838,400.
   Los pergaminos de colores (oraculo-perg-1…5.webp) son de la misma ilustración */
.ce-hoja-caja.ce-oraculo-hoja{--tinta:#2A2014;--navy:#1E3A86;--oro:#C9963A;--indigo:#3F3BA8;container-type:inline-size;top:62px;bottom:12px;left:0;right:0;margin:0 auto;
  width:min(600px,calc(100% - 32px));padding:0;overflow:visible;border-radius:0;background:none;box-shadow:none;color:var(--tinta);animation:none}
.ce-or{position:absolute;inset:0;display:flex;flex-direction:column;border-style:solid;border-color:transparent;
  border-width:calc(420 / 870 * 100cqw) calc(22 / 870 * 100cqw) calc(24 / 870 * 100cqw);
  border-image:url(/assets/centro/oraculo-marco.webp?v=1) 420 22 24 / calc(420 / 870 * 100cqw) calc(22 / 870 * 100cqw) calc(24 / 870 * 100cqw) stretch;
  background:linear-gradient(#FBEFDD,#F9EEDB 40%,#F6E7CF) padding-box;filter:drop-shadow(0 22px 26px rgba(8,14,30,.45))}
.ce-or > .ce-volver{position:absolute;top:calc(-48.28cqw - 50px);left:0;z-index:5;margin:0;display:inline-flex;white-space:nowrap;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:999px;
  background:rgba(255,252,245,.95);color:#1E1A14;font:700 14px var(--font);box-shadow:0 6px 16px -6px rgba(8,14,30,.55);cursor:pointer}
.ce-or > .ce-volver i{font-size:17px}
.ce-hoja .ce-hoja-caja.ce-oraculo-hoja .ce-or > .ce-hoja-x{position:absolute;z-index:6;top:calc(-48.28cqw + 26.4cqw - 46px);right:-2.5cqw;left:auto;translate:none}
/* El medallón de la corona, con la bola de cristal; la placa, con lo que es, el nombre y su frase
   (posiciones desde el borde de arriba de la caja, que es el de la imagen: van con margen negativo) */
.ce-or-sello{position:absolute;left:48.97%;top:calc(-48.28cqw + 26.09cqw);width:11.95cqw;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;pointer-events:none}
.ce-or-sello i{font-size:6.6cqw;color:var(--indigo);filter:drop-shadow(0 1px 0 #fff)}
.ce-or-cab{position:absolute;left:3.7%;right:3.7%;top:calc(-48.28cqw + 33.9cqw);height:12.1cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4%}
.ce-or-cinta{display:flex;align-items:center;gap:10px;font:600 clamp(9px,1.6cqw,11px) 'Cinzel',Georgia,serif;letter-spacing:.24em;color:#6B5A42}
.ce-or-cinta::before,.ce-or-cinta::after{content:'';width:clamp(18px,6cqw,44px);height:1px;background:rgba(107,90,66,.45)}
.ce-or-cab h2{margin:.5cqw 0 0;font:700 clamp(17px,4.3cqw,28px)/1.05 'Cinzel',Georgia,serif;letter-spacing:.02em;color:#1E2A5E;text-shadow:0 1px 0 #fff}
.ce-or-cab p{margin:.6cqw 0 0;font:400 clamp(11.5px,2.3cqw,15px)/1.3 Georgia,serif;color:#5B4A35}
/* La línea de lecturas: un punto por cada una (las leídas, en azul; la que toca, con aro) */
.ce-or-prog{flex:none;display:flex;align-items:center;justify-content:center;gap:0;margin:2.4cqw 4% 2cqw}
.ce-or-prog i{position:relative;width:clamp(14px,3.2cqw,20px);aspect-ratio:1;border-radius:50%;background:linear-gradient(#F1E9DC,#E2D6C2);box-shadow:inset 0 1px 2px rgba(80,60,30,.25),0 0 0 2px #fff}
.ce-or-prog i + i{margin-left:clamp(22px,7cqw,48px)}
.ce-or-prog i + i::before{content:'';position:absolute;right:calc(100% + 2px);top:50%;width:clamp(22px,7cqw,48px);height:3px;margin-top:-1.5px;background:#E4D8C4}
.ce-or-prog i.si{background:radial-gradient(circle at 35% 30%,#7C83F0,#3F3BA8 70%);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(63,59,168,.45)}
.ce-or-prog i.ahora{box-shadow:0 0 0 2px #fff,0 0 0 4px #9C97E6;animation:ceLate 1.8s ease-out infinite}
.ce-or-prog span{margin-left:14px;font:600 12.5px var(--font);color:#6B5A42;white-space:nowrap}
.ce-or-tabs{align-self:center;margin:0 0 1.6cqw}
/* Caben las tres con su nombre (las reglas de las del archivo las dejan en icono por debajo de 900) */
@container (min-width: 440px){ .ce-or-tabs.ce-arch-tabs button:not(.on) em{position:static;width:auto;height:auto;overflow:visible;clip-path:none} .ce-or-tabs.ce-arch-tabs button i{display:none} }
/* En pantallas anchas, «Volver» al lado del panel (no encima), y el panel sube: más sitio para las lecturas */
@media(min-width:1280px){
  .ce-hoja .ce-hoja-caja.ce-oraculo-hoja{top:16px}
  .ce-or > .ce-volver{top:calc(-48.28cqw + 27cqw);left:auto;right:calc(100% + 2.5cqw + 14px)}
}
.ce-or-lista{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(150,112,62,.4) transparent;display:flex;flex-direction:column;gap:12px;padding:4px 2.4cqw 14px}
/* Una lectura: el pergamino en su pedestal y, al lado, lo que dice */
.ce-orc{position:relative;display:grid;grid-template-columns:clamp(70px,17cqw,104px) minmax(0,1fr);align-items:center;gap:4px 12px;padding:12px 16px 12px 10px;border-radius:16px;
  background:rgba(255,253,249,.72);box-shadow:0 0 0 1px rgba(150,112,62,.16),0 6px 14px -10px rgba(70,45,15,.4)}
.ce-orc.nueva{background:#fff;box-shadow:0 0 0 1.5px rgba(124,120,230,.55),0 10px 22px -12px rgba(63,59,168,.45)}
.ce-orc-perg{width:100%;height:auto;align-self:center;filter:drop-shadow(0 4px 4px rgba(80,55,20,.25))}
.ce-orc.cerrada .ce-orc-perg{filter:saturate(.55) opacity(.8)}
.ce-orc-cuerpo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.ce-orc-et{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font);letter-spacing:.06em;color:var(--indigo)}
.ce-orc-et i{font-size:16px}
.ce-orc.cerrada .ce-orc-et{color:#7A6E5E}
.ce-orc-tx{display:block;font:italic 400 clamp(15px,2.9cqw,18px)/1.38 Georgia,serif;color:#1F1A30;quotes:'«' '»'}
.ce-orc.cerrada .ce-orc-tx{filter:blur(4px);user-select:none;color:#5B5048;opacity:.75}
.ce-orc-fuente{font:600 12px var(--font);color:#8A7A62}
.ce-orc-leer{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin-top:4px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#3D74F2,#1F4FD6);color:#fff;font:700 15px var(--font);box-shadow:0 8px 16px -8px rgba(31,79,214,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.ce-orc-leer i{font-size:20px}
.ce-orc-leer:hover{filter:brightness(1.07)}
.ce-orc-leer:focus-visible,.ce-orc-b:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.ce-orc-candado{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:8px 16px;border-radius:999px;background:rgba(226,220,210,.7);font:500 14px var(--font);color:#4A4038}
.ce-orc-candado i{font-size:18px;color:#5B5048}
.ce-orc-candado b{font-weight:800;color:#1E2A5E}
.ce-orc-corto{display:none}
@container (max-width: 440px){ .ce-orc-largo{display:none} .ce-orc-corto{display:inline} .ce-orc-candado{gap:5px;padding:6px 11px;font-size:13px;white-space:nowrap} }
.ce-orc-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.ce-orc-b{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;background:#F3ECDF;color:#4A3A22;font:700 13px var(--font);box-shadow:inset 0 0 0 1px rgba(150,112,62,.25)}
.ce-orc-b i{font-size:16px}
.ce-orc-b.on[data-col]{background:#FCE4E8;color:#B83E5C;box-shadow:inset 0 0 0 1px rgba(184,62,92,.3)}
.ce-orc-b.on[data-oir]{background:#E6E4FB;color:var(--indigo)}
.ce-orc-ok{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--font);color:#2E7D50}
/* El microhábito: un aro con su icono en vez de pergamino */
.ce-orc-perg-hab{display:grid;place-items:center;justify-self:center;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8FD1A8,#2E9E5B 70%);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(150,112,62,.3)}
.ce-orc-perg-hab i{font-size:30px;color:#fff}
.ce-or-lista > .ce-mh{margin:0}
/* Al leerla: el texto se desenrolla, el pergamino da un saltito y sube lo ganado */
.ce-orc.recien .ce-orc-tx{animation:ceOrDesenrolla .9s cubic-bezier(.3,.7,.3,1) both}
@keyframes ceOrDesenrolla{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.ce-orc.recien .ce-orc-perg{animation:ceOrSalta .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ceOrSalta{0%{scale:1}35%{scale:1.12;rotate:-4deg}70%{scale:.97;rotate:2deg}100%{scale:1;rotate:0deg}}
.ce-orc-premio{position:absolute;top:-6px;right:0;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;background:linear-gradient(180deg,#FFE7A0,#F2C462);
  color:#5B3E08;font:800 13px var(--font);box-shadow:0 6px 14px -6px rgba(140,95,10,.6);pointer-events:none;animation:ceOrPremio 2.4s ease-out both}
@keyframes ceOrPremio{0%{opacity:0;translate:0 10px;scale:.7}15%{opacity:1;translate:0 0;scale:1.08}25%{scale:1}75%{opacity:1;translate:0 -6px}100%{opacity:0;translate:0 -22px}}
/* La apertura, como la del archivo y la de los juegos */
.ce-or.abre{animation:ceArchAbre .5s cubic-bezier(.2,.9,.25,1) both}
.ce-or.abre .ce-or-sello i{animation:ceArchMoneda .75s cubic-bezier(.3,1.3,.5,1) .3s both}
.ce-or.abre .ce-orc{animation:ceArchLibro .42s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(.4s + var(--n,0) * .07s)}
.ce-or.abre .ce-hoja-x{animation:ceArchAsoma .3s .55s both}
@media (prefers-reduced-motion: reduce){ .ce-or.abre,.ce-or.abre *,.ce-orc.recien *,.ce-or-prog i.ahora{animation:none !important} }
@media(max-width:768px){
  .ce-hoja .ce-hoja-caja.ce-oraculo-hoja{top:6px;bottom:6px;width:calc(100% - 12px)}
  .ce-or > .ce-volver{display:none}
  .ce-hoja .ce-hoja-caja.ce-oraculo-hoja .ce-or > .ce-hoja-x{top:calc(-48.28cqw + 4px);right:4px;width:34px;height:34px}
  .ce-orc{grid-template-columns:64px minmax(0,1fr);padding:10px 12px 10px 8px;gap:4px 10px}
  .ce-or-prog span{font-size:11.5px;margin-left:10px}
  .ce-orc-candado{font-size:13px;padding:7px 12px}
}

/* ══ CENTRO: LA CHINCHETA DE LOS JUEGOS Y LAS MÁSCARAS DEL TEATRO (2026-10-21) ══
   Para reconocer de un vistazo el rincón de aventura de cada territorio, la chincheta de los juegos
   es de oro, algo más grande, con el mando en blanco y un halo dorado que la despega de cualquier
   fondo; cada 4 s da un brinco (se agacha, salta y rebota) y suelta cuatro destellos. Las máscaras
   (_svgMascaras), apoyadas en el muro bajo el Taller de Máscaras (DECO_MASCARAS) */
.ce-pin[data-id="arena"] .ce-chincheta{top:-4px;width:50px;height:50px;margin-left:-25px;
  background:
    linear-gradient(118deg,transparent 37%,rgba(150,105,20,.35) 39.5%,transparent 42%),
    linear-gradient(62deg,transparent 57%,rgba(170,120,30,.3) 59.5%,transparent 62%),
    radial-gradient(circle at 32% 28%,#FFF6D6 0,#F7D877 26%,#E2AE38 62%,#A8741C 100%);
  box-shadow:inset -4px -5px 8px rgba(120,75,5,.45),inset 3px 3px 4px rgba(255,255,255,.9),0 0 0 1.5px #A8741C,0 0 0 3.5px rgba(255,248,220,.95),
    0 0 22px 4px rgba(255,200,70,.6),0 9px 14px -4px rgba(60,40,0,.6);
  animation:ceBrinco 4s ease-in-out infinite}
.ce-pin[data-id="arena"] .ce-chincheta i{font-size:26px;color:#fff;text-shadow:0 1px 0 #8A5A10,0 0 6px rgba(120,70,0,.55)}
.ce-pin[data-id="arena"] .ce-sombra{width:26px;margin-left:-13px;animation:ceBrincoSombra 4s ease-in-out infinite}
@keyframes ceBrinco{0%,100%{translate:0 0;scale:1}30%{translate:0 -3px}62%{translate:0 0;scale:1}
  70%{translate:0 2px;scale:1.1 .86}78%{translate:0 -14px;scale:.94 1.08}86%{translate:0 0;scale:1.08 .92}92%{translate:0 -3px;scale:1}}
@keyframes ceBrincoSombra{0%,62%,100%{scale:1;opacity:1}78%{scale:.55;opacity:.45}86%{scale:1.1;opacity:1}}
/* Los destellos: cuatro estrellas de oro que saltan alrededor en lo alto del brinco */
.ce-chispas{position:absolute;z-index:2;left:50%;top:18px;width:0;height:0;pointer-events:none;filter:drop-shadow(0 0 2px rgba(255,190,40,.95)) drop-shadow(0 1px 1px rgba(110,65,0,.7))}   /* el filtro, aquí: en la estrella lo cortaría su clip-path */
.ce-chispas i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;background:radial-gradient(circle,#fff 0 16%,#FFE07A 34%,#FFC531 62%,#E89A10 100%);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:ceChispa 4s ease-out infinite}
.ce-chispas i:nth-child(1){--x:-40px;--y:-30px}
.ce-chispas i:nth-child(2){--x:38px;--y:-34px;animation-delay:.06s;width:16px;height:16px}
.ce-chispas i:nth-child(3){--x:-38px;--y:8px;animation-delay:.12s;width:15px;height:15px}
.ce-chispas i:nth-child(4){--x:40px;--y:4px;animation-delay:.03s}
@keyframes ceChispa{0%,74%{opacity:0;translate:calc(var(--x) * .55) calc(var(--y) * .55);scale:.3;rotate:0deg}80%{opacity:1;scale:1.15}90%{opacity:.9;translate:calc(var(--x) * .9) calc(var(--y) * .9)}97%{opacity:0;translate:var(--x) var(--y);scale:.4;rotate:90deg}100%{opacity:0}}
@media(max-width:768px){ .ce-pin[data-id="arena"] .ce-chincheta{width:43px;height:43px;margin-left:-21.5px;top:-3px} .ce-pin[data-id="arena"] .ce-chincheta i{font-size:22px} .ce-chispas{top:15px} }
@media (prefers-reduced-motion: reduce){ .ce-pin[data-id="arena"] .ce-chincheta,.ce-pin[data-id="arena"] .ce-sombra,.ce-chispas i{animation:none} }
.ce-deco-mascaras{position:absolute;z-index:1;width:54px;translate:-50% -50%;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(30,20,10,.45))}
.ce-deco-mascaras svg{display:block;width:100%;height:auto;overflow:visible}
.ce-deco-mascaras .msc-cinta{fill:none;stroke:#B8323A;stroke-width:2.4;stroke-linecap:round}
.ce-deco-mascaras .msc-hueco{fill:#3A2A18}
@media(max-width:768px){ .ce-deco-mascaras{width:44px} }