/* ============================================================================
   EL MARCO · el menú vertical común (assets/marco.js) — 15 oct 2026
   ============================================================================

   Las tres formas del mismo menú, según el ancho, y el pie común. El contrato
   (cómo se pone en una página) está en db/plan-reorganizacion-web.md, §2, y
   en la cabecera de marco.js.

     · ≥1366  .marco-lateral entera (216 px de lienzo), fija a la izquierda.
     · 1024–1365  la misma, plegada en riel de 72 px; con `.desplegado` crece
       a 216 ENCIMA del contenido (el `padding` del body no cambia).
     · PLEGABLE (16 oct 2026): el botón de la cabeza cambia de una a otra en
       cualquier ancho ≥1024 y la elección se recuerda (`trufas.lateral`).
       Lo que manda no es el ancho sino la clase del <html> que escribe
       pantalla.js: `lateral-entero` o `lateral-riel`. Las medias de abajo
       son solo lo de serie, para el primer instante sin clase.
     · <1024  .marco-barra arriba, .marco-dock abajo y .marco-hoja al pulsar
       «Menú».

   EL LATERAL VA DENTRO DEL BODY ESCALADO. En las páginas con `pantallas` el
   <body> lleva `zoom:var(--u)` (pantalla.css), así que todo lo de aquí se
   mide en píxeles de LIENZO: 216 de ancho son 216 × --u en la pantalla, y
   pantalla.js cuenta el lienzo como 1440 + el lateral para que el contenido
   siga midiendo 1440. Desde la revisión final (15 oct 2026) el lateral
   lleva además `zoom:1/--u`, que le deshace el del body: se ve siempre a
   su tamaño real, y su alto es 100svh tal cual (--zl queda en 1).

   UN MENÚ DE VIDEOJUEGO, NO UNA LISTA DE ENLACES: los rótulos de sección
   llevan su número («01»), un solo cursor amarillo se desliza entre las
   entradas y descansa en la activa, la entrada se hunde al pulsarla y el
   logo da un salto. Con `prefers-reduced-motion`, todo quieto en su sitio.
   ========================================================================== */

/* --lateral-px es el ancho del lateral en píxeles de PANTALLA; --lateral,
   lo que ocupa medido en el lienzo del <body> (lo que leen el `padding` del
   body, el chip de fase o un panel fijo de una página). EL LATERAL NO SE
   ESCALA (revisión final, 15 oct 2026): es el mando, no la página. Escalado
   con ella, a 1024 px sus rótulos salían a 7 px y en un monitor grande no
   cabía de alto. Va siempre a su tamaño real y pantalla.js resta su ancho
   antes de calcular la escala del contenido. */
html.con-lateral{--lateral-px:0px;--lateral:var(--lateral-px);--zl:1;--dock-h:0px}
@media (min-width:1024px){
  html.con-lateral{--lateral-px:72px}
  html.con-lateral.lateral-entero{--lateral-px:216px}
}
@media (min-width:1366px){
  html.con-lateral{--lateral-px:216px}
  html.con-lateral.lateral-riel{--lateral-px:72px}
}
/* Solo donde de verdad hay zoom: pantalla.css lo pone desde 1024 en pantalla. */
@media screen and (min-width:1024px){
  html.pantallas.con-lateral{--lateral:calc(var(--lateral-px) / var(--u, 1))}
}
/* EL DOCK FLOTA (revisión del COO, 15 oct 2026): --dock-alto es la barra,
   --dock-margen el aire que la separa de los bordes, y --dock-h lo que
   ocupa DESDE EL SUELO con su aire de arriba incluido (lo leen el `padding`
   del body, el aviso de idioma, la barra de /aurea/ y quien se ponga encima). */
@media (max-width:1023.98px){
  html.con-lateral{
    --dock-alto:4.25rem;--dock-margen:.5rem;
    --dock-h:calc(var(--dock-alto) + var(--dock-margen) * 2 + env(safe-area-inset-bottom, 0px));
  }
}

html.con-lateral body{padding-left:var(--lateral);padding-bottom:var(--dock-h)}
/* Con la hoja abierta la página no se desplaza por debajo. */
html.marco-hoja-abierta,html.marco-hoja-abierta body{overflow:hidden}

/* ---------- SALTAR AL CONTENIDO ----------
   El primer Tab de la página: sin él, el teclado recorre dieciséis entradas
   de menú antes de llegar a lo que vino a leer. */
.marco-saltar{
  position:fixed;left:1rem;top:1rem;z-index:95;
  padding:.7rem 1rem;background:var(--yellow);color:var(--sobre-amarillo);
  font-size:var(--tipo-control);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  clip-path:var(--bevel-sm);transform:translateY(-200%);
}
.marco-saltar:focus-visible{transform:none;outline:none}

/* ---------- LOS ICONOS ---------- */
.marco-ico{
  width:1.25rem;height:1.25rem;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.marco-ico-lleno{fill:currentColor;stroke:none}

/* ===================== 1 · LA BARRA LATERAL ===================== */
.marco-lateral{display:none}
@media (min-width:1024px){
  .marco-lateral{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;z-index:70;
    width:var(--lateral-px);height:100svh;
    background:linear-gradient(180deg, var(--surface) 0%, var(--ink) 70%);
    box-shadow:inset -1px 0 0 var(--line);
    overflow:hidden;
    transition:width .22s cubic-bezier(.22,1,.36,1);
  }
  .marco-barra,.marco-dock,.marco-hoja{display:none!important}
  /* El riel desplegado encima (y el que se está fijando) mide 216 en
     cualquier modo. Mientras marco.js anima el plegado, el ancho lo lleva
     --lateral-px fotograma a fotograma: sin transición propia, que iría
     por detrás. */
  html.con-lateral .marco-lateral.desplegado{width:216px}
  html.lateral-animando .marco-lateral{transition:none}
  .marco-etq{transition:opacity .18s ease}
}
/* El lateral va dentro del <body> escalado: se le deshace el zoom. */
@media screen and (min-width:1024px){
  html.pantallas.con-lateral .marco-lateral{
    zoom:calc(1 / var(--u, 1));
    /* Ya a tamaño real: no necesita el suelo legible de pantalla.css. */
    --tipo-etiqueta:.625rem;--tipo-rotulo:.625rem;--tipo-leyenda:.6875rem;
    --tipo-control:.75rem;--tipo-antetitulo:.75rem;
  }
}

/* LA CABEZA: el imagotipo entero; en el riel plegado, el isotipo. A la
   derecha, el botón de plegar: el imagotipo cede 20 px (168 → 148) para que
   quepa sin tocarlo. */
.marco-cabeza{position:relative;flex:none;height:5.5rem;display:flex;align-items:center;padding:0 1rem 0 1.625rem}
.marco-logo{position:relative;display:block;height:2.25rem;width:9.25rem}
.marco-logo img{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .18s ease}
.marco-logo-imagotipo{width:9.25rem;height:auto}
.marco-logo-isotipo{width:2.25rem;height:auto;left:-.5rem!important;opacity:0}
.marco-logo:hover .marco-logo-imagotipo{filter:brightness(1.08)}
.marco-logo:focus-visible{outline-offset:6px}

/* EL SALTO del logo al elegir una entrada (marco.js añade `.salta`). */
@keyframes marco-salto{
  0%{translate:0 0;rotate:0deg}
  35%{translate:0 -5px;rotate:-4deg}
  70%{translate:0 1px;rotate:2deg}
  100%{translate:0 0;rotate:0deg}
}
.marco-logo.salta,.marco-barra-logo.salta{animation:marco-salto .42s var(--mov-rebote)}

/* EL BOTÓN DE PLEGAR (16 oct 2026). Un chip de 32 (bisel de 9 y su aro,
   que solo se enciende al pasar o con el foco) con el lateral dibujado: la
   caja de la marca, su columna y una flecha que apunta hacia donde va. En
   el riel plegado se apaga como los nombres y aparece al desplegarse
   encima; el foco del teclado lo despliega antes de llegar a él. */
.marco-plegar{
  position:absolute;right:.375rem;top:50%;margin-top:-1rem;z-index:1;
  display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;
  background:none;border:0;cursor:pointer;color:var(--texto-3);
  clip-path:var(--bevel-sm);--filo-color:transparent;
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color .15s ease, background .15s ease, opacity .18s ease;
}
.marco-plegar:hover{color:var(--yellow);background:rgba(242,232,220,.06);--filo-color:var(--line)}
.marco-plegar:active{transform:scale(.92)}
.marco-plegar:focus-visible{outline:none;color:var(--texto-1);--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .marco-plegar::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .marco-plegar:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.marco-plegar .marco-ico{width:1.125rem;height:1.125rem}
/* La flecha: «‹» con el lateral entero (plegar), «›» plegado (desplegar).
   Da la vuelta con el rebote de la marca. */
.marco-plegar-flecha{transform-box:fill-box;transform-origin:50% 50%;transition:transform .38s var(--mov-rebote)}
html.lateral-riel .marco-plegar-flecha{transform:rotate(180deg)}
.marco-plegar:hover .marco-plegar-flecha{translate:-1px 0}
html.lateral-riel .marco-plegar:hover .marco-plegar-flecha{translate:1px 0}

/* EL PREMIO AL PLEGAR: el isotipo entra girando, como una trufa que rueda
   a su sitio; al desplegar, el imagotipo da el salto de siempre. */
@keyframes marco-asoma{
  0%{scale:.35;rotate:-140deg}
  60%{scale:1.15;rotate:14deg}
  100%{scale:1;rotate:0deg}
}
.marco-logo.saluda .marco-logo-isotipo{animation:marco-asoma .55s var(--mov-rebote)}
.marco-logo.saluda .marco-logo-imagotipo{animation:marco-salto .42s var(--mov-rebote)}

/* LA LISTA. Lo que no cabe se desplaza dentro del lateral (pantallas bajas),
   con la barra fina de la marca; la cuenta y las herramientas no se mueven. */
.marco-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--yellow-bajo) transparent}
.marco-nav::-webkit-scrollbar{width:3px}
.marco-nav::-webkit-scrollbar-thumb{background:var(--yellow-bajo)}
.marco-nav-in{position:relative;padding-bottom:1rem}
.marco-lista{list-style:none;margin:0;padding:0}
.marco-seccion{margin-top:.9rem}

/* EL RÓTULO DE SECCIÓN: «01 COMUNIDAD», el numeral en la E y en amarillo,
   el nombre a --tipo-rotulo. En el riel plegado se queda el número. */
.marco-rotulo{
  display:flex;align-items:baseline;gap:.6rem;white-space:nowrap;
  margin:0;padding:.5rem 1rem .4rem 1.625rem;
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-3);
}
.marco-num{
  font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-entradilla);
  letter-spacing:.01em;line-height:1;color:var(--yellow);min-width:1.25rem;
}

/* LA ENTRADA */
.marco-entrada{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:.8rem;height:2.5rem;
  padding:0 1rem 0 1.625rem;white-space:nowrap;
  font-size:var(--tipo-control);font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-2);
  transition:color .15s ease, transform .15s ease;
}
.marco-entrada .marco-ico{color:var(--texto-3);transition:color .15s ease, transform .25s var(--mov-rebote)}
.marco-entrada .marco-etq{transition:translate .2s ease, opacity .18s ease}
.marco-entrada:hover,.marco-entrada:focus-visible{color:var(--texto-1);outline:none}
.marco-entrada:hover .marco-ico,.marco-entrada:focus-visible .marco-ico{color:var(--yellow)}
/* El nombre se adelanta un paso, como la opción elegida de un menú. */
.marco-entrada:hover .marco-etq,.marco-entrada:focus-visible .marco-etq{translate:.25rem 0}
.marco-entrada:active{transform:scale(.97)}
.marco-entrada[aria-current="page"]{color:var(--texto-1)}
.marco-entrada[aria-current="page"] .marco-ico{color:var(--yellow)}
/* LA RAYA AMARILLA de la página en la que se está. El cursor que se desliza
   lleva la misma raya y en reposo se posa encima de ésta. */
.marco-entrada[aria-current="page"]::before{
  content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;background:var(--yellow);
}
/* EL FOCO, por dentro: la fila no lleva recorte, así que va un filo amarillo
   de 2px en todo su borde (el `outline` exterior quedaba cortado por el
   `overflow` del lateral). */
.marco-entrada:focus-visible{box-shadow:inset 0 0 0 2px var(--yellow)}
@keyframes marco-pulso{0%{transform:scale(1)}40%{transform:scale(.82) rotate(-8deg)}100%{transform:scale(1)}}
.marco-entrada.pulsada .marco-ico,.marco-dock-item.pulsada .marco-ico,.marco-ficha.pulsada .marco-ico{animation:marco-pulso .38s var(--mov-rebote)}

/* EL CURSOR QUE SE DESLIZA (marco.js lo mueve con `transform`). Una franja
   que se apaga hacia la derecha, la raya de 3px a la izquierda y un
   triangulito que parpadea al final, el de los menús de consola. */
.marco-indicador{
  position:absolute;left:0;right:0;top:0;height:2.5rem;z-index:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,198,33,.14), rgba(255,198,33,.03) 70%, transparent);
  opacity:0;transition:opacity .2s ease;
}
.marco-indicador.listo{transition:opacity .2s ease, transform .38s var(--mov-rebote), height .2s ease}
.marco-indicador.visible{opacity:1}
.marco-indicador::before{content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;background:var(--yellow)}
.marco-indicador::after{
  content:'';position:absolute;right:.85rem;top:50%;width:.4rem;height:.6rem;margin-top:-.3rem;
  background:var(--yellow);clip-path:polygon(0 0,100% 50%,0 100%);
  animation:marco-parpadeo 1s steps(2, jump-none) infinite;
}
@keyframes marco-parpadeo{0%{opacity:1}100%{opacity:.15}}

/* LA BASE: la cuenta y las herramientas, siempre a la vista. */
.marco-base{
  flex:none;display:flex;flex-direction:column;gap:.75rem;
  padding:1rem .75rem 1.1rem;
  /* Opaca, así que repite el filo derecho del lateral además del de arriba. */
  box-shadow:inset 0 1px 0 var(--line), inset -1px 0 0 var(--line);
  background:var(--ink);
}
html.lateral-riel .marco-lateral.desplegado .marco-base{box-shadow:inset 0 1px 0 var(--line), inset -1px 0 0 var(--yellow-bajo)}
.marco-herramientas{display:flex;align-items:center;gap:.4rem}
.marco-herramientas .btn{height:2.25rem;padding:0 .6rem;flex:none}
.marco-herramientas .marco-ico{width:1.05rem;height:1.05rem}
.marco-donar{gap:.4rem;flex:1 1 auto!important;min-width:0;justify-content:center;letter-spacing:.06em}
.marco-donar .marco-ico{color:var(--yellow)}
.marco-donar:hover .marco-ico{animation:marco-latido .7s ease}
@keyframes marco-latido{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}60%{transform:scale(.95)}}
.marco-idioma{display:flex;flex:none}
.marco-idioma:empty{display:none}
.marco-idioma .lang-sw{margin-left:0}

/* ---------- PANTALLAS BAJAS (revisión final, 15 oct 2026) ----------
   El lateral entero mide ~1020 px de alto. En un portátil de 1440 × 900
   la lista se metía debajo de la cuenta y Media kit, Paquetes y Empleos
   quedaban escondidos sin pista de que hubiera más. Por debajo de 1000 px
   de alto las filas se aprietan (40 → 34) y el logo baja; por debajo de
   880, un paso más. Si aun así no cabe, la lista se desplaza dentro y un
   fundido abajo (`.con-mas`, lo pone marco.js) avisa de que sigue. */
@media (min-width:1024px) and (max-height:1000px){
  .marco-cabeza{height:4.25rem}
  .marco-entrada,.marco-indicador{height:2.125rem}
  .marco-seccion{margin-top:.5rem}
  .marco-rotulo{padding-top:.35rem;padding-bottom:.25rem}
  .marco-nav-in{padding-bottom:.5rem}
}
@media (min-width:1024px) and (max-height:880px){
  .marco-cabeza{height:3.75rem}
  .marco-entrada,.marco-indicador{height:2rem}
  .marco-seccion{margin-top:.25rem}
  .marco-base{gap:.5rem;padding-top:.75rem;padding-bottom:.75rem}
}
.marco-nav.con-mas{
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 3rem), transparent);
          mask-image:linear-gradient(180deg, #000 calc(100% - 3rem), transparent);
}

/* ---------- EL RIEL (html.lateral-riel: de serie entre 1024 y 1365, o
   plegado con el botón en cualquier ancho) ----------
   Plegado: solo iconos, centrados en sus 72 px (el relleno izquierdo de 26
   pone el centro del icono de 20 justo en 36). Desplegado: 216 por encima
   del contenido, con la misma disposición de la barra entera. Los textos no
   se quitan del árbol, solo se apagan: el lector de pantalla los sigue
   leyendo y el foco del teclado los alcanza (y al llegar, despliega). */
@media (min-width:1024px){
  html.lateral-riel .marco-lateral.desplegado{box-shadow:inset -1px 0 0 var(--yellow-bajo)}
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-etq{opacity:0}
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-plegar{opacity:0;pointer-events:none}
  /* El triangulito parpadea con una animación de opacidad, que le ganaría a
     un `opacity:0`: se apaga quitándole la animación. */
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-indicador::after{animation:none;visibility:hidden}
  /* Las herramientas no caben en 72: fuera del todo (el foco del teclado
     despliega el riel al entrar en él, antes de llegar aquí). */
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-herramientas{display:none}
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-logo-imagotipo{opacity:0}
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-logo-isotipo{opacity:1}
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-rotulo{padding-left:1.4rem}
  html.lateral-riel .marco-lateral:not(.desplegado) .marco-base{padding-left:.75rem}
}

/* ===================== 2 · MÓVIL ===================== */
/* LA BARRA FINA de arriba: logo y cuenta. No es fija: el dock de abajo ya
   está siempre a mano, y arriba se le devuelve el alto al contenido. */
.marco-barra{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:3.5rem;padding:0 1rem;
  box-shadow:inset 0 -1px 0 var(--line);background:var(--ink);
}
.marco-barra-logo{display:block;flex:none}
.marco-barra-logo img{height:1.375rem;width:auto}
.marco-cuenta-mini{display:flex;align-items:center;flex:none}

/* EL DOCK: seis casillas que flotan sobre la página, separadas de los
   bordes (la referencia fue nephyx.lat, sin copiarla). Es una `.caja` (capa
   doble: el contorno da la vuelta entera, chaflanes incluidos) con el
   relleno de --surface, opaco: con alfa, el fondo del contorno se vería a
   través. Va pegada al margen de seguridad del iPhone (`bottom`) y su aire
   es un `margin-bottom`, que es como lo miden fase.js e indice.js para
   ponerse encima (alto + margen = lo que ocupa desde el suelo). */
.marco-dock{
  position:fixed;left:var(--dock-margen);right:var(--dock-margen);z-index:75;
  bottom:env(safe-area-inset-bottom, 0px);margin-bottom:var(--dock-margen);
  height:var(--dock-alto);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  --caja-fondo:var(--surface);
}
/* Con una hoja abierta, el dock queda por encima de su velo: sigue a mano. */
html.marco-hoja-abierta .marco-dock{z-index:131}
.marco-dock-item{
  position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:.5rem .125rem .4rem;
  background:none;border:0;cursor:pointer;color:var(--texto-3);
  -webkit-tap-highlight-color:transparent;
  transition:color .15s ease, transform .15s ease;
}
/* LA ETIQUETA en la Dharma E 700: a 13 px «CALENDARIO» mide ~44 px y cabe
   en la casilla de 56 de un móvil de 360 (en Poppins versal medía 68). */
.marco-dock-etq{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-descripcion);
  letter-spacing:.06em;line-height:1;text-transform:uppercase;
}
.marco-dock-item .marco-ico{width:1.5rem;height:1.5rem;transition:transform .25s var(--mov-rebote)}
/* La casilla viva (la de la página o la de la hoja abierta): amarilla. */
.marco-dock-item.es-activo{color:var(--yellow)}
.marco-dock-item:active{transform:scale(.92)}
.marco-dock-item:focus-visible{outline:none}
.marco-dock-item:focus-visible::after{
  content:'';position:absolute;inset:.35rem .2rem;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--yellow);
}
/* EL CURSOR: una raya amarilla arriba, centrada en la casilla viva, que se
   desliza a la siguiente con el rebote de la marca (marco.js la mueve). Va
   pegada al contorno de dentro, 1 px por debajo del filo. */
.marco-dock-cursor{
  position:absolute;z-index:2;top:1px;left:0;width:1.75rem;height:3px;margin-left:-.875rem;
  background:var(--yellow);opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.marco-dock-cursor.visible{opacity:1}
.marco-dock-cursor.listo{transition:opacity .2s ease, transform .38s var(--mov-rebote)}
/* El avatar sustituye al icono de Perfil cuando hay sesión (cuenta.js). */
.marco-dock-avatar{width:1.5rem;height:1.5rem;border-radius:50%;display:block;object-fit:cover;flex:none;
  box-shadow:0 0 0 1.5px currentColor}

/* LA HOJA: flota encima del dock, con su mismo aire a los lados, y enseña
   solo lo que se pidió: es compacta y nunca tapa la pantalla entera. Detrás,
   un velo que cierra al tocarlo (el dock queda por encima de él). */
.marco-hoja{position:fixed;inset:0;z-index:130}   /* sobre el aviso de idioma (120), bajo el asistente (1000) */
.marco-hoja[hidden]{display:none}
.marco-hoja-velo{position:absolute;inset:0;background:rgba(23,17,13,.72);opacity:0;transition:opacity .26s ease}
.marco-hoja.abierta .marco-hoja-velo{opacity:1}
/* CAPA DOBLE, como `.caja`: el fondo es el filo y el `::before` pone el
   relleno 1 px por dentro, así que la raya da la vuelta entera, chaflanes
   incluidos. No se le pone `.caja` porque el panel se desplaza dentro y el
   relleno tiene que quedarse quieto detrás. */
.marco-hoja-panel{
  position:absolute;left:var(--dock-margen);right:var(--dock-margen);bottom:var(--dock-h);
  display:flex;flex-direction:column;max-height:calc(100svh - var(--dock-h) - 5rem);
  isolation:isolate;background:var(--line);clip-path:var(--bevel);
  opacity:0;transform:translateY(1.5rem);transform-origin:50% 100%;
  transition:transform .32s var(--mov-rebote), opacity .2s ease;
}
.marco-hoja-panel::before{
  content:'';position:absolute;inset:1px;z-index:-1;background:var(--surface);clip-path:var(--bevel);
}
.marco-hoja.abierta .marco-hoja-panel{opacity:1;transform:none}
.marco-hoja-panel:focus{outline:none}
.marco-hoja-panel.arrastrando{transition:none}
.marco-hoja-asa{
  flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem .5rem .35rem 1rem;touch-action:none;cursor:grab;
}
.marco-hoja-tirador{position:absolute;left:50%;top:.4rem;width:2.5rem;height:3px;margin-left:-1.25rem;background:var(--line)}
/* EL TÍTULO es el rótulo de la sección, con su número en la E. */
.marco-hoja-titulo{
  margin:0;display:flex;align-items:baseline;gap:.6rem;
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-2);
}
.marco-hoja-cerrar{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;background:none;border:0;cursor:pointer;color:var(--texto-2);
}
.marco-hoja-cerrar:hover{color:var(--texto-1)}
.marco-hoja-cerrar:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.marco-hoja-cuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:.25rem 1rem 1rem;
}
.marco-hoja-grupo{display:flex;flex-direction:column;gap:1rem}
.marco-hoja-grupo[hidden]{display:none}
.marco-hoja-grupo .marco-rotulo{padding:0 0 .55rem}
.marco-fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
/* Una ficha suelta al final (Comunidad tiene cinco) ocupa la fila entera:
   un hueco vacío a su lado se leía como una entrada que faltaba. */
.marco-fichas > .marco-ficha:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:600px){
  .marco-fichas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .marco-fichas > .marco-ficha:last-child:nth-child(odd){grid-column:auto}
}

/* LA FICHA de la hoja: un chip (≥44 px de alto, el bisel de 9 y su aro). */
.marco-ficha{
  position:relative;display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:.4rem .75rem;
  /* En minúsculas y no en versal como el lateral: a 360 px la ficha mide
     160 y «SALÓN DE LA FAMA» en versal no cabía (se cortaba con «…»). */
  font-size:var(--tipo-descripcion);font-weight:500;line-height:1.25;
  color:var(--texto-2);background:rgba(242,232,220,.04);
  clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  -webkit-tap-highlight-color:transparent;transition:background .15s ease, color .15s ease;
}
.marco-ficha .marco-etq{min-width:0}
.marco-ficha .marco-ico{color:var(--texto-3)}
.marco-ficha:active{background:var(--surface-2);transform:scale(.97)}
.marco-ficha[aria-current="page"]{color:var(--texto-1);--filo-color:var(--yellow)}
.marco-ficha[aria-current="page"] .marco-ico{color:var(--yellow)}
.marco-ficha:focus-visible{outline:none;--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .marco-ficha::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .marco-ficha:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
/* LA ENTRADA: las fichas suben escalonadas cada vez que se abre una hoja
   (marco.js pone `.entra`). Con menos movimiento, quietas. */
@keyframes marco-ficha-entra{from{opacity:0;translate:0 .6rem}to{opacity:1;translate:0 0}}
.marco-hoja-panel.entra .marco-ficha,
.marco-hoja-panel.entra .marco-hoja-grupo .marco-herramientas,
.marco-hoja-panel.entra .mc-menu .cuenta-item{
  animation:marco-ficha-entra .34s var(--mov-rebote) both;animation-delay:calc(var(--i, 0) * 35ms + 40ms);
}
.marco-hoja .marco-herramientas{padding-top:1rem;box-shadow:inset 0 1px 0 var(--line)}
.marco-hoja .marco-herramientas .btn{height:2.75rem}
.marco-hoja .marco-idioma .lang-sw button{min-height:2.75rem;padding:0 .9rem}

/* ===================== 3 · LA CUENTA EN EL MARCO (cuenta.js) ===================== */
.marco-cuenta{position:relative}
.marco-cuenta:empty{display:none}

/* SIN SESIÓN: la acción amarilla del bloque y, debajo, lo legal. */
.mc-entrar{width:100%;justify-content:flex-start;gap:.7rem;padding:.55rem .9rem;text-align:left}
.mc-entrar .marco-ico{width:1.35rem;height:1.35rem}
.mc-entrar-t{display:flex;flex-direction:column;line-height:1.15;min-width:0;white-space:nowrap}
.mc-legal{margin:.55rem 0 0;font-size:var(--tipo-leyenda);line-height:1.45;color:var(--texto-3)}
.mc-legal a{color:var(--texto-2);text-decoration:underline;text-underline-offset:2px}
.mc-legal a:hover{color:var(--texto-1)}

/* CON SESIÓN: un chip grande (bisel de 9 y su aro) con avatar, nombre,
   saldo, nivel y la barra de XP. Al pulsarlo, el menú de la cuenta. */
.mc-boton{
  position:relative;display:flex;align-items:center;gap:.65rem;width:100%;
  padding:.55rem .6rem;background:rgba(242,232,220,.04);border:0;cursor:pointer;
  font-family:inherit;color:var(--texto-1);text-align:left;
  clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:background .15s ease;
}
.mc-boton:hover,.mc-boton[aria-expanded="true"]{background:rgba(242,232,220,.08);--filo-color:var(--yellow-bajo)}
.mc-boton.es-actual{--filo-color:var(--yellow)}
.mc-boton:focus-visible{outline:none;--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .mc-boton::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .mc-boton:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.mc-retrato{position:relative;flex:none;width:2.25rem;height:2.25rem}
.mc-retrato .cuenta-avatar{width:100%;height:100%}
/* EL NIVEL, colgado del avatar como en el retrato de un jugador. */
.mc-nv{
  position:absolute;right:-.35rem;bottom:-.3rem;
  padding:.1rem .25rem;min-width:1.1rem;text-align:center;
  font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-descripcion);line-height:1;letter-spacing:.01em;
  background:var(--yellow);color:var(--sobre-amarillo);clip-path:var(--bevel-xs);
}
.mc-texto{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1 1 auto}
.mc-nombre{font-size:var(--tipo-descripcion);font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-datos{display:flex;align-items:center;gap:.5rem;font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1;white-space:nowrap}
.mc-saldo{display:inline-flex;align-items:center;gap:.25rem;color:var(--yellow);font-weight:600}
.mc-moneda{width:.95rem;height:.95rem;flex:none}
.mc-cargando{display:inline-block;width:3rem;height:.6rem;background:var(--line);opacity:.6}
.mc-xp{display:block;height:3px;background:var(--line);overflow:hidden}
.mc-xp i{display:block;height:100%;width:calc(var(--xp, 0) * 100%);background:var(--yellow);transition:width .6s var(--mov-rebote)}
.mc-boton .cuenta-chevron{flex:none;transform:rotate(180deg)}
.mc-boton[aria-expanded="true"] .cuenta-chevron{transform:none}
/* El menú: en el lateral se abre HACIA ARRIBA, a lo ancho del bloque. */
.marco-lateral .mc-menu{top:auto;bottom:calc(100% + .5rem);left:0;right:0;min-width:0}
/* En la hoja de la cuenta no se despliega nada: el retrato va de cabecera
   (quieto, sin aspecto de botón) y las acciones debajo, en el flujo. */
.marco-hoja .mc-cabecera{cursor:default}
.marco-hoja .mc-cabecera:hover{background:rgba(242,232,220,.04);--filo-color:var(--line)}
.marco-hoja .mc-menu{position:static;margin-top:.5rem;min-width:0}

/* El riel plegado: solo el retrato o el logo de Discord. */
@media (min-width:1024px){
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-boton{width:3rem;padding:.4rem .375rem;background:none;box-shadow:none}
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-boton::after{opacity:0}
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-texto,
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-boton .cuenta-chevron,
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-legal,
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-entrar-t{opacity:0}
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-entrar{width:3rem;padding:.55rem 0;justify-content:center;gap:0}
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-entrar-t{width:0;overflow:hidden}
  html.lateral-riel .marco-lateral:not(.desplegado) .mc-legal{height:0;margin:0;overflow:hidden}
}

/* LA CUENTA EN LA BARRA MÓVIL: solo el saldo de Trufas, con sesión. Abre
   la hoja de la cuenta, como la casilla Perfil del dock. Sin sesión, nada:
   «Entrar» ya está abajo. */
.mc-mini-saldo{
  display:flex;align-items:center;height:2.75rem;padding:0 .25rem 0 .5rem;
  background:none;border:0;cursor:pointer;font-family:inherit;font-size:var(--tipo-descripcion);
  -webkit-tap-highlight-color:transparent;
}
.mc-mini-saldo .mc-moneda{width:1.25rem;height:1.25rem}
.mc-mini-saldo:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ===================== 4 · EL PIE COMÚN ===================== */
.marco-pie{margin-top:var(--esp-bloque);box-shadow:inset 0 1px 0 var(--line);padding:2rem 0 1.5rem}
.marco-pie-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.marco-pie-marca{display:flex;align-items:center;gap:1rem;min-width:0;flex:1 1 22rem}
.marco-pie-marca img{width:7.5rem;height:auto;flex:none}
.marco-pie-marca p{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);max-width:34ch;line-height:1.45}
.marco-pie-contacto{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.marco-pie-contacto a,.marco-pie-legal a{font-size:var(--tipo-descripcion);color:var(--texto-3);transition:color .15s}
.marco-pie-contacto a:hover,.marco-pie-legal a:hover{color:var(--texto-1)}
.marco-pie-redes{display:flex;flex-wrap:wrap;gap:.4rem}
.marco-pie-redes a{
  position:relative;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
  color:var(--texto-2);background:rgba(242,232,220,.05);clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color .15s ease, background .15s ease, transform .15s ease;
}
.marco-pie-redes a:hover{color:var(--sobre-amarillo);background:var(--yellow);--filo-color:var(--yellow);transform:translateY(-2px)}
.marco-pie-redes a:focus-visible{outline:none;--filo-color:var(--yellow)}
.marco-pie-redes svg{width:1rem;height:1rem;fill:currentColor;display:block}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .marco-pie-redes a::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .marco-pie-redes a:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.marco-pie-bajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;margin-top:1.25rem;
  font-size:var(--tipo-leyenda);color:var(--texto-3)}
.marco-pie-bajo .marco-pie-legal a{font-size:var(--tipo-leyenda)}

/* ===================== 5 · LO QUE CONVIVE CON EL MARCO ===================== */
/* El chip de fase (fase.js) va abajo a la izquierda: con lateral, a la
   derecha de él. En móvil ya sube solo encima del dock (data-indice-evita). */
@media (min-width:1024px){ html.con-lateral .fase{left:calc(var(--lateral) + 16px)} }
/* El aviso de idioma no se queda debajo del dock (--dock-h ya trae su aire). */
@media (max-width:1023.98px){ html.con-lateral .lang-tip{bottom:var(--dock-h)!important} }

@media (prefers-reduced-motion: reduce){
  .marco-lateral,.marco-indicador.listo,.marco-hoja-panel,.marco-hoja-velo,.mc-xp i,.marco-dock-cursor.listo{transition:none}
  .marco-hoja-panel.entra .marco-ficha,.marco-hoja-panel.entra .marco-hoja-grupo .marco-herramientas,
  .marco-hoja-panel.entra .mc-menu .cuenta-item{animation:none}
  .marco-indicador::after{animation:none}
  .marco-logo.salta,.marco-barra-logo.salta,.marco-ico,.marco-logo.saluda img{animation:none!important}
  .marco-plegar-flecha{transition:none}
  .marco-plegar:active{transform:none}
  .marco-entrada .marco-etq{transition:none}
  .marco-entrada:hover .marco-etq,.marco-entrada:focus-visible .marco-etq{translate:none}
  .marco-entrada:active,.marco-dock-item:active,.marco-ficha:active{transform:none}
}

@media print{
  .marco,.marco-pie-redes{display:none!important}
  html.con-lateral body{padding:0}
}

/* Por debajo de 1152 el lateral no se puede fijar abierto (ver modo() en
   pantalla.js): sin botón, para no ofrecer algo que no hace nada. */
@media (max-width:1151px){ .marco-plegar{display:none} }