/* ==========================================================================
   Motor SCORM — estilos de los layouts
   El lienzo de autoría es 1280×720. En móvil (.es-movil) cada layout pasa a
   una columna con alturas naturales.
   ========================================================================== */

.layout {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--marca-esp-xl) var(--marca-margen-lateral);
  background: var(--marca-fondo);
}

.layout.con-fondo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.es-movil .layout {
  height: auto;
  min-height: 100%;
  padding: var(--marca-esp-lg) var(--marca-esp-md);
}

/* --------------------------------------------------------------- portada */

/* Panel claro a la izquierda (no un velo azul oscuro con texto blanco — eso era una
   invención sin la referencia real). La foto se confina a la derecha, se desvanece hacia
   blanco en la costura, y una diagonal roja decorativa marca la esquina inferior derecha. */
.layout-portada { display: grid; align-items: center; }

.portada-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--marca-fondo) 0%, var(--marca-fondo) 36%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 58%);
}

/* Dos franjas diagonales paralelas y finas (no una cuña sólida): gris del lado del panel
   de texto, roja del lado de la foto, con un hueco entre ambas. Aparecen con un fade propio
   de la lámina, no atadas a los cues de audio. Medidas exactas del panel de Storyline
   (lienzo 1280×720, «Tamaño y posición», esquina superior izquierda): el motor usa el mismo
   lienzo de autoría, así que se transcriben en px tal cual, sin reinterpretar a porcentaje. */
.portada-diagonal {
  position: absolute;
  transform-origin: center center;
  z-index: 0;
  opacity: 0;
  /* «Entrar flotando» de Storyline: 0,75 s, no un fade plano. */
  animation: flotarDiagonal 750ms var(--marca-mov-curva) forwards;
}

.portada-diagonal--gris {
  left: -216px;
  top: 153px;
  width: 742px;
  height: 86px;
  transform: rotate(315deg);
  background: var(--marca-fondo-alt);
  --op-diagonal: 0.64;
}

.portada-diagonal--rojo {
  left: 646px;
  top: 451px;
  width: 861px;
  height: 176px;
  transform: rotate(315deg);
  background: var(--marca-secundario);
  --op-diagonal: 0.3;
  animation-delay: 150ms;
}

@keyframes flotarDiagonal {
  from { opacity: 0; transform: translateY(50px) rotate(315deg); }
  to   { opacity: var(--op-diagonal, 1); transform: rotate(315deg); }
}

@media (prefers-reduced-motion: reduce) {
  .portada-diagonal { animation: none; opacity: var(--op-diagonal, 1); }
}

.portada-caja {
  position: relative;
  max-width: 620px;
  z-index: 1;
}

.portada-logo {
  display: block;
  width: 200px;
  max-width: 60%;
  height: auto;
  margin-bottom: var(--marca-esp-lg);
}

/* Portada (no cierre, que reusa la misma clase pero sigue en flujo dentro de `.portada-caja`):
   medidas exactas del panel «Tamaño y posición» de Storyline sobre el lienzo 1280×720. El
   logo se ancla directo al lienzo, no al bloque de texto, por eso se saca del flujo. */
.layout > .portada-logo {
  position: absolute;
  left: 250px;
  top: 78px;
  width: 262px;
  height: 152px;
  max-width: none;
  margin-bottom: 0;
  z-index: 1;
  /* El ancho y el alto son el ÁREA RESERVADA para la marca, medida del panel de Storyline —
     no las proporciones del logotipo. Sin `contain` el navegador rellena la caja estirando la
     imagen, y eso solo pasa desapercibido cuando el logotipo del cliente tiene justo esa
     proporción. Con un lockup horizontal (3,45:1 contra la caja de 1,72:1) el logotipo salía
     al doble de alto: la esfera se veía ovalada. Ahora entra completo, sin deformarse,
     cualquiera sea su forma. */
  object-fit: contain;
  object-position: left center;
}

.portada-titulo {
  margin: 0 0 var(--marca-esp-md);
  font-size: var(--marca-h1);
  line-height: 1.12;
  font-weight: 700;
  color: var(--marca-primario);
}

/* Portada (no cierre): caja de texto con posición, tamaño y color exactos del panel de
   Storyline. Igual truco que el logo — `.layout > .selector` solo alcanza al hijo directo del
   lienzo, no al de cierre que sigue anidado en `.portada-caja`.
   El alto es fijo a propósito: `ajustarAlaCaja()` (layouts.js) reduce el cuerpo de letra
   hasta que el texto entre, así un título más largo en otro curso se adapta en vez de
   desbordar. */
.layout > .portada-titulo {
  position: absolute;
  left: 55px;
  top: 238px;
  width: 585px;
  height: 274px;
  margin: 0;
  color: var(--marca-texto);
  line-height: 1.5;
  overflow: hidden;
  /* El ajuste automático escribe `--tam-titulo` en el elemento. Va por custom property y no
     por `style.fontSize` inline a propósito: un inline le ganaría a la regla móvil de abajo
     y el título quedaría encogido también en el teléfono, donde la caja fija no aplica. */
  font-size: var(--tam-titulo, var(--marca-h1));
}

/* Título y botón de portada entran con fade puro (sin el translateY que trae `.es-entrando`
   por defecto en el resto del motor) — las franjas ya aportan el movimiento de la lámina.
   Solo se pisa `animation-name`; duración y curva se heredan de `.es-entrando` por cascada. */
.layout > .portada-titulo.es-entrando,
.layout > .portada-cta.es-entrando {
  animation-name: apareceFade;
}

@keyframes apareceFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.portada-bajada {
  margin: 0 0 var(--marca-esp-lg);
  font-size: var(--marca-cuerpo-lg);
  line-height: 1.5;
  color: var(--marca-texto-fuerte);
}

/* El resaltado es TEXTO sobre fondo claro: su color sale de `--marca-resaltado`, no del
   secundario a secas. Con un secundario claro (verde) el término quedaba en 1,79:1. */
mark.resaltado { background: none; color: var(--marca-resaltado); font-weight: 700; }

/* `**frase**` del guion: cambia el PESO y conserva el color del párrafo. Es otra pregunta que
   `[[término]]`, que cambia el COLOR — hay material donde la frase de arranque de cada viñeta
   va en negrita del mismo color del cuerpo, y pintarla de acento diría algo que el original
   no dice. `<strong>` ya viene en negrita por el navegador; se escribe igual para que quede
   declarado y para blindar el color contra cualquier regla de acento que lo alcance. */
strong.enfasis { font-weight: 700; color: inherit; }

.portada-bajada mark.resaltado { color: var(--marca-resaltado); }

.portada-cta { background: var(--marca-primario); }
.portada-cta:hover { background: var(--marca-primario-claro); }

/* El botón de la lámina late cuando se puede usar, con el mismo criterio que «Siguiente»:
   acá el que avisa es este, porque el de la barra se retira (§0bg).
   El pulso es un halo y no un cambio de relleno: el botón ya es primario sólido y oscurecerlo
   lo apagaría en vez de destacarlo. El halo va en terciario, que es el acento de marca y el
   único de la paleta que se ve tanto sobre foto clara como sobre el navy del botón. */
@keyframes latido-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--marca-terciario-rgb), 0); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--marca-terciario-rgb), 0.45); }
}

.avance-libre .portada-cta:not(.es-oculto) {
  animation: latido-cta 1.6s var(--marca-mov-curva) infinite;
}

.portada-cta:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .avance-libre .portada-cta:not(.es-oculto) {
    animation: none;
    box-shadow: 0 0 0 4px rgba(var(--marca-terciario-rgb), 0.45);
  }
}

.layout > .portada-cta {
  position: absolute;
  left: 171px;
  top: 590px;
  width: 259px;
  height: 63px;
}

.es-movil .layout-portada { min-height: 70vh; }
.es-movil .portada-titulo,
.es-movil .portada-bajada { color: var(--marca-blanco); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
/* Único color de marca que no coincidía con ningún token: era rgb(0,20,56) literal. Pasa a
   `primario-oscuro` (rgb(0,27,70)) para que también se re-tematice — a 55% de alfa sobre una
   foto la diferencia es imperceptible, y deja de haber navy hardcodeado en el motor. */
.es-movil .portada-velo { background: rgba(var(--marca-primario-oscuro-rgb), 0.55); }
.es-movil .portada-diagonal { display: none; }

/* Las medidas exactas de Storyline son solo para el lienzo 1280×720 de escritorio; en móvil
   logo, título y botón de portada vuelven a fluir como bloques normales en vez de anclarse a
   coordenadas fijas. `order` restaura la secuencia visual correcta: al pasar a `static` se
   vuelven ítems del grid igual que `.portada-caja`, pero llegan después en el DOM porque el
   panel de Storyline los exige como hermanos del lienzo, no como hijos de la caja de texto. */
.es-movil .layout > .portada-logo {
  position: static;
  order: 1;
  width: 200px;
  max-width: 60%;
  height: auto;
  margin: 0 0 var(--marca-esp-lg);
}

.es-movil .layout > .portada-titulo {
  position: static;
  order: 2;
  width: auto;
  height: auto;
  max-width: none;
  overflow: visible;
  font-size: var(--marca-h1);   /* descarta el encogido que calculó el ajuste de escritorio */
  margin: 0 0 var(--marca-esp-md);
}

.es-movil .layout > .portada-caja { order: 3; }

.es-movil .layout > .portada-cta {
  position: static;
  order: 4;
  width: auto;
  height: auto;
}

/* --------------------------------------------------------------- descripción */

/* Medidas exactas del panel «Tamaño y posición» de Storyline sobre el lienzo 1280×720.
   El rectángulo rojo, el ícono y el texto forman UNA unidad (`.desc-banda`): se revelan
   juntos cuando la narración termina de leer la pregunta, no por separado. */
.layout-descripcion { padding: 0; }

.desc-pregunta {
  position: absolute;
  left: 55px;
  top: 168px;
  width: 585px;
  height: 211px;
  margin: 0;
  overflow: hidden;
  color: var(--marca-primario);
  font-size: var(--tam-pregunta, var(--marca-h1));
  line-height: 1.2;
}

.desc-banda {
  position: absolute;
  left: 0;
  top: 436px;
  width: var(--marca-lienzo-ancho);
  height: calc(var(--marca-lienzo-alto) - 436px);
  /* Panel sólido grande: usa `--marca-panel`, que por defecto ES el secundario. Una marca
     cuyo acento sea muy claro puede apuntar este bloque a otro color sin tocar los acentos
     chicos, que en un filete de 4px sí funcionan. */
  background: var(--marca-panel);
}

/* Coordenadas del panel de Storyline menos el origen de la banda (0, 436). */
.desc-icono {
  position: absolute;
  left: 101px;
  top: 58px;
  width: 153px;
  height: 157px;
  object-fit: contain;
  color: var(--marca-blanco);   /* el SVG pinta con currentColor */
}

.desc-cuerpo {
  position: absolute;
  left: 284px;
  top: 42px;
  width: 981px;
  height: 200px;
  overflow: hidden;
  font-size: var(--tam-cuerpo-desc, var(--marca-cuerpo-lg));
}

/* El fondo de la banda es el secundario, pero se declara en `.desc-banda` y el color acá: por
   eso este caso se escapó de la primera pasada del token y hubo que buscarlo aparte. */
.desc-banda .texto {
  color: var(--marca-panel-texto);
  font-weight: 700;
  font-size: inherit;
  line-height: 1.5;
}

/* En móvil no hay lienzo fijo: todo vuelve a fluir en una columna. */
.es-movil .layout-descripcion { padding: var(--marca-esp-lg) var(--marca-esp-md); }

.es-movil .desc-pregunta {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  font-size: var(--marca-h1);
  margin: 0 0 var(--marca-esp-md);
}

.es-movil .desc-banda {
  position: static;
  width: auto;
  height: auto;
  display: grid;
  gap: var(--marca-esp-md);
  margin: var(--marca-esp-lg) calc(-1 * var(--marca-esp-md)) 0;
  padding: var(--marca-esp-lg) var(--marca-esp-md);
}

.es-movil .desc-icono,
.es-movil .desc-cuerpo {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

.es-movil .desc-icono { width: 96px; height: 96px; }
.es-movil .desc-cuerpo { font-size: var(--marca-cuerpo-lg); }

/* --------------------------------------------------------------- acordeón */

/* Panel de navegación lateral navy fijo — no un acordeón que se expande en línea ni un popup.
   Al elegir una categoría, el contenido cambia en el mismo panel: la lista de categorías
   nunca se mueve ni desaparece. */
.layout-acordeon { display: flex; flex-direction: column; padding-bottom: 0; }

/* Alto FIJO de 464px, el de la foto de panel que entrega el cliente (432×464). Antes era
   `flex: 1`, o sea «todo lo que sobre», y el panel terminaba en y=732 — 12px fuera del lienzo,
   que el escenario recortaba en silencio. Ahora va de 216 a 680 y quedan 40px de margen. */
.acordeon-panel {
  position: relative;
  display: flex;
  height: 464px;
  flex: none;
  margin: var(--marca-esp-md) calc(-1 * var(--marca-margen-lateral)) 0;
  overflow: hidden;
}

/* Antes de elegir una categoría, alguien invita a hacerlo — no hay texto ni foto de ninguna
   categoría en particular todavía. */
.acordeon-presentador {
  position: absolute;
  inset: 0 0 0 33%;
  width: 67%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: var(--marca-fondo-alt);
  z-index: 2;
  pointer-events: none;
}

.acordeon-sidebar {
  display: flex;
  flex-direction: column;
  width: 33%;
  flex-shrink: 0;
  background: var(--marca-primario);
  overflow-y: auto;
}

/* Tres estados, tal como en la referencia: reposo navy (heredado del sidebar), hover celeste
   sólido, y una vez visitada vuelve al mismo navy — sin resaltado propio — y queda marcada
   con una insignia de check en la esquina superior izquierda. */
.acordeon-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--marca-esp-sm);
  flex: 1;
  min-height: 88px;
  padding: var(--marca-esp-sm) var(--marca-esp-lg);
  border: 0;
  background: transparent;
  color: var(--marca-blanco);
  font-family: inherit;
  font-size: var(--marca-cuerpo);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}

.acordeon-cabecera:hover:not(.es-apagada) { background: var(--marca-terciario); }
.acordeon-cabecera:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: -3px; }

/* Una pestaña bloqueada tiene que VERSE bloqueada — misma regla y misma razón que en las
   flipcards: un click sin efecto sobre un control idéntico a los demás se lee como una falla
   del curso. Cubre los dos casos: mientras corre la narración de entrada están las cuatro
   apagadas, y mientras narra una pestaña están apagadas las otras (la que suena nunca lo
   está, así que se lee sola cuál manda). */
/* Se apagan el TEXTO y el FONDO por separado, no con un `opacity` sobre el botón. La cabecera
   tiene fondo transparente —el navy lo pone el sidebar de atrás—, así que bajarle la opacidad
   apagaba solo las letras y el fondo quedaba idéntico al de una pestaña activa: no se leía
   como bloqueada. Con un velo oscuro propio, la pestaña entera se hunde contra el sidebar. */
.acordeon-cabecera.es-apagada {
  cursor: default;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.45);
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva),
              color var(--marca-mov-entrada) var(--marca-mov-curva);
}

/* La insignia de «visto» acompaña el apagado: si quedara en celeste pleno sobre una pestaña
   hundida, sería lo único encendido y tiraría el ojo justo a la que no se puede tocar. */
.acordeon-cabecera.es-apagada .acordeon-check { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .acordeon-cabecera.es-apagada { transition: none; }
}

.acordeon-etiqueta { flex: 1; }

/* Check de «visto»: insignia en la esquina, no un ícono en la fila — aparece la primera vez
   que se elige la categoría, igual que las variables vio_acord* de la referencia. */
.acordeon-check {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 8px 0;
  background: var(--marca-terciario);
  color: var(--marca-blanco);
  font-size: 12px;
  font-weight: 700;
}

.acordeon-cabecera.visto .acordeon-check { visibility: visible; }

/* El panel central va en ARENA (9043 C), no en el primario. Antes compartía el navy con el
   sidebar y las dos zonas se leían como un solo bloque: no se distinguía la lista de pestañas
   del contenido de la pestaña abierta. Pedido del cliente (§0ar).

   La elección no fue libre: el manual de marca del cliente admitía fondo blanco, el neutro o
   el primario, y nada más. De los tres, el blanco abre un hueco en la lámina y el primario es
   el que ya está en el sidebar. El neutro separa por valor sin sumar un color nuevo, y es la
   misma superficie que ya usan las casillas de `clasificar` y el fondo de `descripcion`. */
.acordeon-contenido {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Centrado vertical: con el texto ya ajustado a la caja, las categorías cortas tienen que
     verse centradas igual que las largas — si no, cambiar de pestaña mueve el bloque de sitio.
     Pedido de Pablo.
     El centrado NO se puede usar mientras se mide: un panel más alto que su caja se sale por
     arriba y por abajo a la vez, y encima queda invisible para el motor (`scrollHeight` sigue
     valiendo lo mismo que `clientHeight`). Por eso el ajuste se hace con `.es-midiendo`, que
     alinea arriba, y el centrado vuelve recién cuando el tamaño ya está decidido (§0az). */
  justify-content: center;
  padding: var(--marca-esp-md) var(--marca-esp-lg);
  overflow: hidden;
  background: var(--marca-fondo-alt);
  /* 17px y no 15: con las viñetas arregladas a 15 el bloque quedaba chico dentro del rectángulo
     y la distancia contra «¿Qué hacer?» se leía como un salto. A 17 el texto llena la caja y la
     diferencia entre viñeta y acción se lee como jerarquía, no como dos tamaños distintos. */
  font-size: var(--tam-acordeon-cuerpo, 17px);
  line-height: 1.35;
}

/* 432×464 exactos: es el tamaño en que el cliente entrega la foto de cada categoría. Antes era
   un 33% (422px) dentro de un panel de 516 de alto, así que el `cover` recortaba la imagen por
   los costados y por abajo. Con la caja igual a la foto, entra completa. */
.acordeon-foto {
  width: 432px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--marca-fondo-alt);
}

/* TODO el panel se mide en `em`, o sea en múltiplos del contenedor. Es la única forma de que el
   auto-ajuste no pueda romper la jerarquía: achicando un solo número —el del contenedor— el
   bloque entero encoge junto y las proporciones quedan intactas por construcción.
   Antes cada pieza resolvía su tamaño por su cuenta a partir de la variable, y bastaba con que
   una no la tomara para que la acción terminara MÁS CHICA que las viñetas. Eso le quita la
   fuerza justo a lo que el alumno se tiene que llevar de la categoría (§0ax). */

/* Mientras se busca el tamaño, el contenido se alinea arriba: es la única forma de que el
   desborde se pueda MEDIR. Centrado, lo que no entra se reparte entre los dos bordes y
   `scrollHeight` sigue valiendo lo mismo que `clientHeight`, así que el ajuste no se entera de
   nada. Dura lo que dura `igualarTexto()`; en pantalla nunca se ve este estado. */
.acordeon-contenido.es-midiendo { justify-content: flex-start; }

/* Y ESTA es la regla que hacía falta. Las viñetas y la intro llevan la clase `.texto`, que les
   fija `font-size: var(--marca-cuerpo)` —20px— con más peso que la herencia. O sea que el panel
   decía 15px, las viñetas se dibujaban a 20 y NO encogían con el auto-ajuste: el único que sí
   encogía era «¿Qué hacer?», y terminaba más chico que las viñetas. Exactamente al revés de la
   jerarquía, y perdiendo la fuerza justo donde está lo que el alumno se lleva.
   Con esto todo lo de adentro vuelve a ser un múltiplo del contenedor. */
.acordeon-contenido .texto { font-size: 1em; }

/* Sobre arena el texto va en primario, no en blanco. Medido: 11,51:1. */
.acordeon-intro { margin: 0 0 8px; font-weight: 600; color: var(--marca-primario); font-size: 1em; }

.acordeon-bullets { margin: 0 0 var(--marca-esp-sm); padding-left: 1.2em; font-size: 1em; }
.acordeon-bullets li { margin-bottom: 0; color: var(--marca-primario); }
.acordeon-bullets li::marker { color: var(--marca-secundario); }

/* La acción es lo que la persona se lleva de la categoría, así que conserva su jerarquía. El
   terciario celeste que tenía sobre navy acá NO sirve: contra el arena da 2,17:1 y desaparece.
   Se reparte según la escala de datos destacados del manual (§11): el rótulo «¿Qué hacer?» en
   Red 032 C —jerarquía muy alta, y a 22px bold cuenta como texto grande, así que le basta 3:1 y
   mide 3,38— y la frase en 281 C, que es donde está el contenido y llega a 11,51:1. */
/* EM del contenedor, no un cálculo propio sobre la variable: así la acción guarda SIEMPRE la
   misma proporción con las viñetas, achique lo que achique el auto-ajuste.
   1,3 y no 1,47: con el cuerpo en 17px la acción sigue dando sus ~22px de referencia, pero la
   distancia entre las dos deja de leerse como un salto. */
.acordeon-accion {
  margin: 0;
  font-size: 1.3em;
  line-height: 1.3;
  color: var(--marca-primario);
}

.acordeon-accion strong {
  display: block;
  margin-bottom: 2px;
  color: var(--marca-secundario);
}

.es-movil .acordeon-contenido { font-size: var(--marca-cuerpo); line-height: 1.5; overflow-y: auto; }

.es-movil .acordeon-panel { flex-direction: column; margin: var(--marca-esp-md) 0 0; }
.es-movil .acordeon-presentador { position: static; width: 100%; height: 200px; inset: auto; }
.es-movil .acordeon-sidebar,
.es-movil .acordeon-foto { width: 100%; }
.es-movil .acordeon-foto { height: 180px; }
.es-movil .acordeon-cabecera { min-height: 56px; }

/* ------------------------------------ botones (familia con cromo de lámina) */

/* Lámina de botones que abren capas — composición medida del Storyline publicado del
   cliente (ficha de la familia en `analisis/especificaciones-laminas/`), NO la base. Retícula:
   columna de título en x=109, contenido de x=399 a 1214. Las coordenadas Y del original
   incluían una franja de cromo de 78px dentro de la lámina que acá vive en el reproductor;
   se conservan las Y originales para respetar el aire del diseño.
   Todos los colores por ROL (§10): navy = primario, naranjo = secundario. */
.layout-botones { padding: 0; position: relative; }

/* ---- cromo de marca dentro de la lámina (verificado contra captura del original):
   franja naranja fina a lo ancho que se ENSANCHA a la derecha en un bloque con esquina
   inferior izquierda redondeada, donde van los dos logos en blanco. */
.botones-cromo { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* La banda del cliente, tal cual: corre fina desde la izquierda y se abre en una CURVA suave
   (no un ángulo, no una esquina redonda) hasta la altura completa del bloque derecho. Es el
   PNG que entrega el propio SCORM — dos rondas de correcciones de Pablo demostraron que la
   curva no se reproduce a ojo, y el criterio del proyecto es no reconstruir lo que el cliente
   ya entrega. */
.botones-cromo-banda {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* La banda tiene que SANGRAR hasta el filo, y el redondeo del contenedor se la estaba
   comiendo. En este modo no hay barra superior, así que el radio del marco cae justo encima
   de la franja: medido sobre la captura, las filas y=0..3 mostraban el fondo en vez del
   secundario en las DOS esquinas de arriba, y la banda se leía de 75px cuando mide 78.
   Va acotado a la clase que enciende el modo —la ponen solo los cursos con familia visual
   propia—, así que un cliente sin ella conserva sus cuatro esquinas redondeadas. Vive acá,
   y no junto al resto del contenedor, porque el motivo es la banda de esta familia. */
.motor.es-cromo-lamina {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Reserva para un curso que no traiga `cromo_banda`: aproximación angulosa, deliberadamente
   menos fiel. Si se ve esto en un curso de esta familia, falta el asset. */
.botones-cromo.es-banda-dibujada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  background: var(--marca-secundario);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 57.5% 20.5%, 0 20.5%);
}

/* Los logos van SOBRE la banda, cada uno en su coordenada exacta. 78px es el alto real de la
   banda del cliente a 1280 de ancho (2047×125 → 1280×78).

   Antes se repartían por `flex` desde el borde derecho (padding + gap): el error se ACUMULA
   —cada logo hereda el redondeo del anterior— y los dos terminaban corridos, el chico 4,5px
   y el grande 1,9px respecto del panel «Tamaño y posición» del original. Con la posición
   absoluta no hay acumulación posible: cada uno cae donde dice su medición y ninguno depende
   del ancho que el navegador le dé al otro. */
.botones-cromo-logos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  padding: 0;
  display: block;
}

/* Coordenadas y tamaños del panel del original. Se enumeran por `nth-child` y no por
   `:last-child`: con un solo logo declarado, `:last-child` también lo matchea y lo mandaba
   al SEGUNDO puesto — un curso que declare solo `marco.logo` debe quedarse en el primero. */
.botones-cromo-logo {
  position: absolute;
  left: 989px;
  top: 19px;
  width: 116px;
  height: 37px;
}
.botones-cromo-logo:nth-child(2) {
  left: 1133px;
  top: 12px;
  width: 136px;
  height: 52px;
}

/* Insignia «CURSO HABILITANTE»: círculo naranja con el engranaje, montado sobre una
   pastilla navy con el texto en blanco. Posición del original: (65,31)-(123,49). */
.botones-cromo-insignia {
  position: absolute;
  top: 31px;
  left: 65px;
  display: flex;
  align-items: center;
}

/* Medidas del original: círculo 61×61 en (65,31), engranaje 46×46 centrado en él (75 % del
   círculo), pastilla navy desde x=96 con el texto arrancando en x=123. El círculo sobresale
   por arriba y por abajo de la pastilla, que lleva la esquina inferior derecha muy
   redondeada — se abre como una coma. */
.botones-cromo-circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 61px;
  flex: none;
  border-radius: 50%;
  background: var(--marca-secundario);
  z-index: 1;
}
.botones-cromo-icono { width: 46px; height: auto; }

/* La pastilla del original mide 141×33 y arranca en (96,49) — no se centra contra el círculo
   ni se estira con el texto. Los cuatro radios de antes (5/8/22/5) eran una lectura a ojo de
   la captura: el path real es la «caja contenedora» del brandbook, esquina superior izquierda
   e inferior derecha redondeadas a la mitad del alto (16,67) y las otras dos RECTAS — la misma
   geometría de COMENZAR/CERRAR, escrita con el radio que le corresponde a ESTE alto.
   El cuerpo de letra viene en PUNTOS del panel de Storyline: 9,333 pt × 4/3 = 12,44px.

   Los tres números finos de acá salen de medir la TINTA de las dos piezas contra la del
   original, no del panel: la pastilla caía 2px arriba (49..81 contra 51..84) y el rótulo 5px
   a la izquierda y 3px arriba (129/54 contra 134/57), con un paso entre renglones de 15px
   contra los 16 del original. El alto declarado sigue en 33 y el `border-box` lo sostiene: el
   segundo renglón termina en y=80, cuatro píxeles antes del borde inferior de la pastilla, así
   que subir la interlínea no desborda nada visible. Cromo compartido — esto mueve las láminas
   de toda la familia, que es justo lo que corresponde: la insignia es la misma en todas. */
.botones-cromo-pastilla {
  align-self: flex-start;           /* deja de centrarse verticalmente contra el círculo */
  margin-top: 20px;                 /* la insignia arranca en y=31; la tinta de la pastilla en 51 */
  margin-left: -30px;               /* la pastilla nace en x=96, bajo el círculo (65..126) */
  padding: 2px 6px 1.5px 35px;      /* el texto arranca en x=134 */
  box-sizing: border-box;
  width: 141px;
  height: 33px;
  border-radius: 16.67px 0 16.67px 0;
  background: var(--marca-primario);
  color: var(--marca-blanco);
  font-size: 12.44px;
  font-weight: 800;
  line-height: 16px;
  /* Sin interletrado. El original no declara `characterSpacing` en NINGÚN objeto del módulo
     —verificado recorriendo los 14 slides: cero ocurrencias—, así que abrirlo era invención
     nuestra, y hacía que todas nuestras mayúsculas salieran más anchas que las de allá con la
     misma altura de mayúscula. Un juez a ciegas lo detectó como patrón, no como caso suelto. */
  letter-spacing: normal;
  text-transform: uppercase;
}

/* El ancho de la columna VARÍA por lámina en el original (la caja de texto se dimensiona
   contra su propio titular), así que se declara como variable con el valor más frecuente por
   defecto y cada lámina lo sobrescribe con su medida. Es lo que decide dónde quiebra el
   título: con un ancho único, dos láminas de la misma familia parten las líneas distinto que
   el original sin que nada falle. */
.botones-columna-titulo {
  position: absolute;
  left: 109px;
  top: 196px;
  width: var(--ancho-columna-titulo, 290px);
}

/* Las dos excepciones medidas, por lámina. Van acá y no sueltas en cada layout para que las
   medidas de la familia vivan todas en el mismo lugar; la clase la pone el layout. */
.layout-botones.es-clasificacion {
  --ancho-columna-titulo: 305px;
  /* Las DOS líneas del antetítulo van en negrita, pero no del mismo cuerpo: el original las
     tiene en cajas separadas, «Clasificación» a 36 pt (48 px) y «operativa:» a 32 pt (42,67).
     El bloque declara el cuerpo de la segunda y `::first-line` levanta la primera — es la
     única forma de dar dos cuerpos dentro de un mismo bloque de texto sin partirlo en dos
     elementos, y partirlo obligaría a que el guion escribiera dos campos para una sola frase. */
  --tam-antetitulo: 42.67px;
}
.layout-botones.es-clasificacion .botones-antetitulo::first-line { font-size: 48px; }
/* 45 px entre las dos líneas del antetítulo: es lo que separa la tinta de una y otra en el
   original (286 y 331). Con la interlínea de la familia daban 55, porque el paso lo fijaba el
   cuerpo mayor de la primera línea. Al acortarse el bloque, la bajada sube con él, así que su
   margen se compensa en la misma medida. */
.layout-botones.es-clasificacion .botones-antetitulo { line-height: 45px; padding-top: 6.5px; }
.layout-botones.es-clasificacion .botones-titulo-fuerte { margin-top: 2.4px; }
.layout-botones.es-caracteristicas {
  --ancho-columna-titulo: 270px;     /* fuerza el quiebre «espacio / confinado?» del original */
}

/* La flecha del isotipo REAL, extraída del logo del cliente y teñida al secundario
   (contenido.flecha). El glifo ❯ queda solo como reserva si un curso no la trae. */
/* 32×65 son las medidas del `svgimage` del original. El `height: auto` de antes lo estiraba a
   68 siguiendo la relación de aspecto del PNG, que no es la del dibujo colocado: hay que fijar
   los dos lados. Y el margen de 1px es real, no un ajuste — la columna está en x=109 y el
   isotipo del original en x=110. */
.botones-flecha-img {
  display: block;
  /* 32×65 es el tamaño de la mayoría de las láminas de la serie, pero no de todas: hay
     láminas donde el original lo coloca a 35×71 (misma proporción, un 9 % más grande). Lo
     declara el guion; sin declarar, el de siempre. */
  width: calc(var(--flecha-alto, 65px) * 32 / 65);
  height: var(--flecha-alto, 65px);
  margin-left: 1px;
  margin-bottom: var(--flecha-hueco, var(--marca-esp-md));
}
.botones-flecha {
  display: block;
  margin-bottom: var(--marca-esp-md);
  color: var(--marca-secundario);
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
}

/* Primera línea FUERTE, segunda fina — así lo pinta el original (captura 2026-08-11).

   Los dos cuerpos son constantes de la familia, confirmadas cruzando cinco láminas distintas
   del original: 37,333 pt y 32 pt, que en píxeles (×4/3) dan 49,78 y 42,67. Los 38/34 de antes
   venían de leer una captura y dejaban TODA la familia entre un 20 % y un 24 % más chica, que
   además cambia dónde quiebran los títulos largos.

   El `padding-left` es el inset de texto del shape de Storyline: la caja está en x=109 pero la
   tinta nace en x=119. Va acá y NUNCA en `.botones-columna-titulo`, porque el isotipo es un
   objeto aparte que en el original arranca en x=110, sin sangría — moverlo con la columna
   rompería lo único que ya estaba bien. */
.botones-titulo {
  margin: 0;
  padding-left: 10px;
  /* Un salto de línea escrito en el guion es parte de la composición, no una consecuencia del
     ancho: en el material del cliente estos títulos van partidos a mano. Sin esto, el motor
     los replegaba por ancho y partía las frases donde no correspondía. */
  white-space: pre-line;
  color: var(--marca-primario);
  line-height: 1.25;
}
.botones-antetitulo {
  display: block;
  font-size: var(--tam-antetitulo, 49.78px);
  font-weight: 800;
}
/* Peso 400, no 300: el original declara la variante Regular de la tipografía corporativa, y
   el 300 la afinaba de más. */
.botones-titulo-fuerte {
  display: block;
  /* 1,25 de interlínea sobre 49,78px da 62px de paso; el original pasa a 75. Los 13px que
     faltan van acá y no en el `line-height`, que también afectaría el quiebre interno de un
     antetítulo de dos líneas. */
  margin-top: 13px;
  font-size: var(--tam-titulo-fuerte, 42.67px);
  font-weight: 400;
}

/* ---- interlineado del bloque de título, medido contra el panel de posición del original.

   Tres jueces distintos marcaron este bloque en el juicio a ciegas: el aire entre líneas era
   más suelto que en el original y, con el título en tres líneas, DESPAREJO dentro de una misma
   frase. La causa es que `line-height: 1.25` no es el paso real de la tipografía corporativa:
   sus métricas dan ascendente 0,92em + descendente 0,298em = 1,218em, y ese es el paso que usa
   el original con su interlineado simple. Con 1,25 cada renglón interno sobraba ~1,4px y, sobre
   todo, el salto entre el antetítulo y el título quedaba gobernado por un margen de 13px
   pensado para el paso equivocado.

   Las tres láminas de la familia que ya caían bien —galería, normas y objetivos ajustan su
   propio `margin-top`— quedan intactas: esto está acotado a `.layout-botones`, que es el layout
   que los jueces miraron. Medido allá: la primera base cae en y=328 y la del título en 387 con
   una sola línea; las dos láminas con título de dos líneas cierran más apretado (50,3 y 41,9 de
   salto de base), porque en el original son DOS cajas de texto distintas y se superponen: la
   banda de descendentes de una comparte espacio con la de ascendentes de la otra. De ahí que el
   margen sea NEGATIVO — no es un truco, es la distancia que hay entre las dos cajas medidas.

   Y el isotipo: la tinta del antetítulo tiene que arrancar en y=282, así que el aire bajo la
   flecha se fija en 21,75px —verificado midiendo, no calculado— en vez del paso medio del
   sistema, que dejaba el bloque casi 3px más abajo. */
.layout-botones .botones-titulo { line-height: 1.218; }
.layout-botones .botones-flecha-img { margin-bottom: 21.75px; }
.layout-botones .botones-titulo-fuerte { margin-top: -3.75px; }

/* Intro alineada a la IZQUIERDA sobre la zona de tarjetas, en bold. El centrado venía de leer
   una captura; el shape del original mide 640 de ancho (no los 815 de la zona), va con
   `justification: left` y lleva el mismo inset de texto de 10px que la columna de título —
   centrarla dentro de 815 la corría 151px a la derecha. Cuerpo: 20 pt × 4/3 = 26,67px. */
.botones-intro {
  position: absolute;
  left: 399px;
  top: 127px;
  width: 640px;
  margin: 0;
  /* Los dos insets del cuadro de texto del original, igual que en el cuerpo de la capa: 5 px
     arriba y 10 al costado. Sin el de arriba la línea salía 5 px alta (medido: 130 contra 135). */
  padding: 5px 0 0 10px;
  font-size: 26.67px;
  font-weight: 700;
  text-align: left;
  color: var(--marca-primario);
}

/* Tres columnas de 239px con paso de 288 (gap 49). Con más de 3 botones la rejilla envuelve;
   esa variante no está cerrada todavía (el esquema avisa). */
.botones-rejilla {
  position: absolute;
  left: 399px;
  top: 225px;
  width: 815px;
  display: grid;
  grid-template-columns: repeat(3, 239px);
  column-gap: 49px;
  row-gap: var(--marca-esp-md);
}

/* La tarjeta ENTERA es un bloque navy redondeado con cabecera naranja — la composición de la
   captura del original, no una lista de texto sobre blanco. */
/* Las esquinas salen de los paths del original, no de mirar la captura: la cabecera
   (`commandset-41`) curva 13,625 SOLO en superior izquierda e inferior derecha —la diagonal
   de la familia— y el cuerpo (`commandset-39`) curva 19,313 en las cuatro. Leído sobre la
   tarjeta completa: arriba izquierda 13,6, arriba derecha RECTA, abajo 19,3 las dos. El
   `10px` parejo de antes era una aproximación. */
.botones-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 13.6px 0 19.3px 19.3px;
  background: var(--marca-primario);
  overflow: visible;
}

.botones-tarjeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  /* Sangría lateral de 10px: es la del cuadro de texto del original y deja 219px útiles, que
     es lo que hace que los tres títulos quiebren en DOS líneas como allá. Con los 16 de antes
     quedaban 207 y dos de los tres se iban a una tercera línea, estirando la tarjeta 16px por
     debajo de su borde medido. */
  padding: var(--marca-esp-xs) 10px;
  /* La esquina inferior derecha va redondeada y no recta: es la geometría diagonal de la
     familia —superior izquierda e inferior derecha redondeadas, las otras dos rectas— aplicada
     a la cabecera, y al levantarse deja asomar una cuña del cuerpo de la tarjeta. Medido en la
     captura del original: el borde inferior corre plano en y=299 y sube a 292 entre x=614 y
     x=622. Un juez a ciegas identificó el clon justamente por esto. */
  border-radius: 13.6px 0 13.6px 0;
  background: var(--marca-secundario);
}

/* 18 pt × 4/3. Con 22px el título más corto entraba en UNA línea mientras el original lo
   parte en dos, y las tres cabeceras quedaban desparejas entre sí. */
.botones-tarjeta-titulo {
  margin: 0;
  font-size: 24px;
  /* Paso real de la tipografía corporativa (0,92 de ascendente + 0,298 de descendente): es el
     mismo interlineado simple que usa el original en TODAS sus cajas de texto. */
  line-height: 1.218;
  font-weight: 800;
  text-align: center;
  color: var(--marca-blanco);
}

/* Cuerpo blanco centrado sobre el fondo de la tarjeta; tamaño único entre tarjetas
   (igualarTextos). Dos correcciones que salieron del juicio a ciegas, las dos medidas contra
   el panel de posición del original y no estimadas:

   · La SANGRÍA lateral era de 16px y el cuadro de texto del original usa 10, así que la medida
     útil quedaba en 207px contra los 219 de allá. Doce píxeles no se ven, pero deciden dónde
     quiebra cada renglón: con 207 la segunda tarjeta pasaba a una cuarta línea y dejaba una
     palabra sola, que es justo lo que un juez señaló como delator.
   · El INTERLINEADO era 1,35 (28,8px) contra los 26 exactos del original, que es el paso
     simple de la tipografía corporativa (1,218em).

   El texto se centra en la caja porque así lo compone el original (`valign: center` en las tres
   tarjetas); sin eso, apretar el interlineado dejaba el bloque colgado arriba con un hueco de
   40px debajo. El auto-ajuste sigue funcionando: aunque el centrado reparta el desborde para
   los dos lados, `scrollHeight` lo sigue acusando y el bucle achica de a 1px hasta que entra. */
.botones-tarjeta-cuerpo {
  height: 155px;
  overflow: hidden;
  /* El relleno inferior no es decorativo: sube el texto dentro de la caja, que va centrada.
     El original deja 20 px entre el pie de la cabecera y la primera línea, y el nuestro dejaba
     40 — medido, 14 px de desvío en el arranque del bloque.
     El alto es 155 y no 160 para que las tres piezas sumen los 306 px de la tarjeta del
     original: cabecera 82 + cuerpo 155 + botón 51 + 18 de aire. */
  padding: var(--marca-esp-sm) 10px 23px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--tam-boton-cuerpo, 21.33px);   /* 16 pt × 4/3 */
  line-height: 1.218;
  text-align: center;
  color: var(--marca-texto-inverso);
}
/* `pretty` le pide al navegador que no deje la última línea con una palabra suelta: rebalancea
   los dos últimos renglones en vez de partir donde caiga. Donde no esté soportado se ignora y
   el quiebre vuelve a ser el de siempre. */
.botones-tarjeta-parrafo { margin: 0 0 0.6em; font-size: 1em; }
/* Con el cuerpo centrado, el margen del último párrafo ya no colapsa y correría el bloque
   entero medio renglón hacia arriba. */
.botones-tarjeta-parrafo:last-child { margin-bottom: 0; }

/* «Ver más»: pastilla del MISMO navy con borde blanco, centrada. Medidas del original
   (`commandset-52`): 174×51, radio 8,5 en las cuatro, relleno transparente con trazo de 1px
   —no 2— y el texto en Regular a 16 pt × 4/3. Con borde de 2px y peso 600 el botón ponía casi
   el doble de tinta para el mismo rótulo.
   El margen inferior de 12px es aritmética, no gusto: la tarjeta tiene que totalizar 306px
   (borde inferior en y=531) y cabecera 83 + cuerpo 160 + botón 51 dejan justo esos 12. */
.botones-ver-mas {
  align-self: center;
  width: 174px;
  height: 51px;
  /* El original pone este botón en y=462 dentro de una tarjeta que termina en 531: son 18 px
     de aire abajo, no 12. */
  margin: 0 0 18px;
  border: 1px solid var(--marca-blanco);
  border-radius: 8.5px;
  background: transparent;
  color: var(--marca-texto-inverso);
  font-family: inherit;
  font-size: 21.33px;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}
.botones-ver-mas:hover:not(.es-apagada) { background: rgba(255, 255, 255, 0.16); }
.botones-ver-mas:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 2px; }

/* Un botón bloqueado tiene que VERSE bloqueado (§0ap) — misma regla que acordeón/tarjetas. */
.botones-ver-mas.es-apagada { cursor: default; opacity: 0.4; }

/* Check de visto: disco GRIS con tilde blanca colgando de la esquina inferior derecha, 49×49
   y sin aro (el aro blanco de antes no está en el original: compuesto sobre navy, el PNG real
   da un círculo pleno de un solo gris con la tilde en blanco).
   Cuelga 13px por fuera del borde derecho y 25px del inferior — de ahí los dos negativos.
   NO se pinta desde el montaje: en el original no está en la línea de tiempo, aparece por
   `OnStage` al visitar el botón. El layout lo emite con `.es-oculto` y le saca la clase al
   marcar `visto`; por eso ya no hay una regla `.visto → naranjo`: cuando el check se ve, el
   botón ya está visitado, así que el segundo color no distinguiría nada y además taparía el
   gris que el original sí pinta.
   El gris se deriva del rol NEUTRO en vez de escribirse a mano: es el mismo gris de superficie
   de la marca a un 58 % de intensidad, así que si el cliente cambia su neutro, este acompaña. */
.botones-check {
  position: absolute;
  bottom: -25px;
  right: -13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marca-neutro) 58%, var(--marca-negro));
  color: var(--marca-blanco);
  font-size: 24px;
  font-weight: 800;
}

/* Si el curso trae el isotipo del cliente como asset del check, la imagen ES el disco: llena
   la caja y el fondo derivado queda de reserva para un curso que no lo declare. */
.botones-check img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* ---- variante de CÍRCULOS: la otra composición de `botones`.

   No es la de tarjetas desajustada, es otra lámina: el original resuelve todo con tres discos
   naranjos planos que SON el botón —sin intro, sin resumen en la lámina base y sin «Ver más»,
   porque ese texto vive dentro de la capa—. La variante se declara en el guion
   (`contenido.forma: circulos`), nunca se deduce de la forma del contenido (§7: la intención va
   declarada). La capa, la narración propia, el gating y CERRAR quedan idénticos al contrato de
   la otra variante — lo que cambia es la pieza que se toca, no cómo se comporta.

   Posiciones del panel del original: 459, 618 y 777 en x (paso 159, hueco 48), y=277. */
.botones-rejilla--circulos {
  position: absolute;
  left: 459px;
  top: 277px;
  width: auto;
  display: flex;
  gap: 48px;
}

/* Relleno plano en el rol secundario: sin borde y sin sombra, tal cual el path del original.
   Cualquier realce de volumen acá lo aleja, no lo acerca. */
.botones-circulo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  height: 111px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-family: inherit;
  /* 20 pt × 4/3. Los 20px de antes eran los PUNTOS del panel leídos como píxeles: el rótulo
     salía un tercio más chico y el juicio a ciegas lo cantó —«el círculo se lee como una mancha
     naranja con una palabra chica adentro»—, que para una audiencia operativa es legibilidad,
     no estética. */
  font-size: 26.67px;
  font-weight: 800;
  text-align: center;
  line-height: 1.218;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}
.botones-circulo:hover:not(.es-apagada) { background: var(--marca-secundario-oscuro); }
.botones-circulo:focus-visible { outline: 3px solid var(--marca-blanco); outline-offset: 3px; }

/* Un botón bloqueado tiene que VERSE bloqueado (§0ap) — mismo tratamiento que «Ver más». */
.botones-circulo.es-apagada { cursor: default; opacity: 0.4; }

/* El rótulo va ADENTRO del disco, en dos líneas. Es un elemento propio y no el texto suelto
   del botón para que el check pueda convivir con él sin entrar en el centrado. */
/* El cuadro de texto del original mide 59px de ancho dentro de un disco de 111, y por eso
   «Tipo 1» cae en dos renglones: no es un desborde, es la medida de la caja. Se declara igual
   acá para que el quiebre sea el mismo; un rótulo más largo se reparte en más renglones, que es
   lo que haría también la herramienta de autor. */
.botones-circulo-rotulo {
  display: block;
  max-width: 59px;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* El check del disco: mismas 49×49 que en la tarjeta, pero anclado al cuadrante inferior
   derecho del propio círculo — borde derecho a ras (el original lo pone en x=521 con el disco
   en 459..570) y colgando 21px por debajo. Arranca oculto, igual que en la otra variante. */
.botones-circulo .botones-check {
  right: 0;
  bottom: -21px;
}

/* ---- la capa: pantalla completa sobre la lámina, con la imagen del botón de fondo. */
.botones-capa {
  position: absolute;
  inset: 0;
  z-index: 5;
  background-size: cover;
  background-position: center;
  background-color: var(--marca-primario);
}
.botones-capa.es-cerrada { display: none; }
/* Destapada pero invisible mientras igualarTextos() mide (mismo truco que .es-midiendo del
   acordeón: oculta con display no hay nada que medir). */
.botones-capa.es-midiendo { display: block; visibility: hidden; }

/* Velo de legibilidad: garantiza contraste del texto aunque la imagen no traiga el panel navy
   pintado (las del SCORM clonado lo traen; una foto generada no). Sobre un fondo ya navy es
   invisible. */
.botones-capa-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(var(--marca-primario-oscuro-rgb), 0.72) 0%,
    rgba(var(--marca-primario-oscuro-rgb), 0.55) 45%,
    rgba(var(--marca-primario-oscuro-rgb), 0) 75%);
}

/* Título de capa: (399,127) 815×109, 28pt→37,33px, en SECUNDARIO y alineado a la DERECHA —
   la foto ocupa la izquierda de la imagen, así que el texto se apoya en el borde opuesto.

   El relleno son los DOS insets del cuadro de texto del original (10 a los lados, 5 arriba):
   sin ellos el título arrancaba 5px más alto y se apoyaba 10px más a la derecha que allá. Es
   la mitad del «hueco muerto» que el juicio a ciegas marcó entre el título y el cuerpo; la otra
   mitad es que acá el título entra en una línea y en el original venía partido en dos. */
.botones-capa-titulo {
  position: absolute;
  left: 399px;
  top: 127px;
  width: 815px;
  box-sizing: border-box;
  margin: 0;
  padding: 5px 10px 0 0;
  font-size: 37.33px;
  line-height: 1.218;
  font-weight: 800;
  text-align: right;
  color: var(--marca-secundario);
  /* El quiebre que trae el guion (`capa_titulo: "Aberturas
limitadas"`) es parte de la
     composición, no una consecuencia del ancho: en el original estos títulos van partidos a
     mano y el nuestro los estiraba a una sola línea, del doble de ancho —medido: 328 px de
     tinta contra 164—. `pre-line` respeta el salto y sigue plegando lo que no entre. */
  white-space: pre-line;
}

/* Cuerpo de capa: 20pt→26,67px, blanco y JUSTIFICADO (así se compone en el original: los
   renglones llegan parejos a los dos bordes). Tamaño único entre capas (--tam-capa-cuerpo, lo
   fija igualarTextos()).

   Cuatro medidas que salieron del juicio a ciegas, todas leídas del panel de posición:

   · MEDIDA ÚTIL 795px, no 815: el cuadro de texto del original sangra 10px a cada lado. La
     diferencia decide dónde quiebra cada renglón, que es de donde salían las viudas.
   · INTERLINEADO 1,218em (32,5px), no 1,45 (39,2px). Un juez lo midió al píxel: 31 contra 38.
     1,218 es el paso simple de la tipografía corporativa (0,92 + 0,298 de sus métricas).
   · SALTO DE PÁRRAFO de un renglón entero: el original separa los párrafos con una línea
     vacía de verdad, no con un margen suelto, así que el salto vale exactamente un paso.
   · CENTRADO en el eje vertical del lienzo. El bloque estaba clavado arriba en y=288 y el
     original lo centra en una caja que va de 132 a 589 —centro 360,5—: con eso el texto de las
     capas largas dejaba de caer sobre la zona iluminada de la foto, donde el blanco pierde
     contraste. El tope de 275px es la mitad libre hasta el pie del título (223): así el bloque
     nunca se sube encima del titular, y si un guion trae más texto, el auto-ajuste lo achica
     igual que antes. */
/* El cuerpo de la capa, en la disposición de TARJETAS. En el original estas cajas están
   colocadas a mano, `valign: top`, cada una en su propia y —288, 299 y 324, con altos de 144,
   171 y 117—, así que no hay una regla que las explique a las tres. Pero DOS de las tres caen
   centradas en el mismo eje (384,5 y 382,5) y solo la tercera se sale, o sea que el eje sí
   existe y lo que falla es una caja mal colocada por quien la armó. Se centra en 383,5: deja
   dos capas dentro de 1 px y la tercera a 23 — pero MEDIDO da peor que anclar arriba, y el
   motivo importa: con `valign: top` el ancla es el borde superior, no el centro, así que
   compartir el eje solo sirve si nuestra caja mide exactamente lo mismo que la de allá, y no
   mide. Se ancla arriba, en el promedio de las tres (304), y cada capa puede correr ese ancla
   desde el guion con `desde_y` cuando el original la puso en otro lado.
   El centrado que había acá antes venía de la OTRA disposición: dejaba el bloque colgando
   arriba, con un hueco muerto antes de CERRAR que tres jueces a ciegas marcaron por separado. */
.botones-capa-cuerpo {
  position: absolute;
  left: 399px;
  top: var(--capa-desde-y, 304px);
  width: 815px;
  max-height: 275px;
  box-sizing: border-box;
  /* Los DOS insets del cuadro de texto del original: 5 px arriba y 10 a los lados. Sin el de
     arriba, la primera línea salía 5 px más alta que la de allá en las tres capas —medido
     banda por banda—, y como `desde_y` lleva la coordenada tal cual la declara el original,
     compensarlo en el número habría escondido el motivo dentro del guion.
     Va SIMÉTRICO arriba y abajo a propósito: la otra disposición centra el bloque, y un inset
     solo arriba le corría el centro 2,5 px —se vio al medirlo: las tres capas de allá
     empeoraron en cuanto se agregó—. Con los dos, anclar arriba usa el de arriba y centrar no
     se entera de ninguno. */
  padding: 5px 10px;
  overflow: hidden;
  font-size: var(--tam-capa-cuerpo, 26.67px);
  line-height: 1.218;
  text-align: justify;
  color: var(--marca-texto-inverso);
}
/* SIN `text-wrap: pretty`, y el motivo importa. `pretty` rebalancea los últimos renglones para
   que el párrafo no cierre con una palabra sola —que es una buena idea cuando uno compone— pero
   acá se está reproduciendo un original compuesto a mano, y esa ayuda toma decisiones de corte
   distintas de las suyas: bajaba una palabra que allá entraba, y la línea de arriba quedaba
   estirada con ríos entre palabras. Tres jueces a ciegas señalaron esos ríos por separado, y uno
   nombró la causa exacta: «acá hay un rebalanceo automático de la última línea». */
.botones-capa-parrafo { margin: 0 0 1.218em; font-size: 1em; }
/* El último renglón de un párrafo justificado no se estira: sin esto, un párrafo de una sola
   línea sale con los espacios abiertos de borde a borde. */
.botones-capa-parrafo:last-child { margin-bottom: 0; }

/* En la disposición de CÍRCULOS el original sí centra: las tres capas comparten la caja
   (399,127) 815×467 con `valign: center`, cuyo eje cae en 360,5. */
.botones-capa--circulos .botones-capa-cuerpo {
  top: 360.5px;
  transform: translateY(-50%);
}

/* CERRAR: 191×51 centrado abajo (545,638 en el original).
   LA GEOMETRÍA SALE DEL PATH DE STORYLINE, no de mirar la captura: dos esquinas RECTAS y dos
   totalmente redondeadas, en diagonal (superior izquierda e inferior derecha, radio 25,33 =
   la mitad del alto). Es la «caja contenedora» del brandbook (p.36: «bordes rectos y
   curvos»), y las tres versiones que hice a ojo —bordes suaves, cuatro radios distintos—
   estaban todas mal. Ver `paths.js` → `Lib['commandset-16']`. */
.botones-capa-cerrar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* La forma declara 191×51 pero lo que se PINTA son 199×59: el objeto viene envuelto en una
     caja de (−4,−4) 199×59 y esa es la mancha naranja que se ve —medida sobre la captura
     nativa, el original va de x=542 a 739 y nosotros llegábamos a 734—. La caja crece 4 px en
     cada dirección desde el mismo centro, así que el rótulo no se mueve. El radio sigue siendo
     la mitad del alto propio, que es la regla de la forma de marca. */
  bottom: 27px;
  width: 199px;
  height: 59px;
  border: 0;
  border-radius: 29.5px 0 29.5px 0;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-family: inherit;
  /* 20 pt × 4/3. El panel de Storyline guarda los cuerpos en PUNTOS y este estaba leído como
     píxeles: la etiqueta salía un tercio más chica que la del original y quedaba nadando dentro
     de un botón que sí medía bien (191×51, igual que allá). */
  font-size: 26.667px;
  font-weight: 800;
  /* Sin interletrado. El original no declara `characterSpacing` en NINGÚN objeto del módulo
     —verificado recorriendo los 14 slides: cero ocurrencias—, así que abrirlo era invención
     nuestra, y hacía que todas nuestras mayúsculas salieran más anchas que las de allá con la
     misma altura de mayúscula. Un juez a ciegas lo detectó como patrón, no como caso suelto. */
  letter-spacing: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}
.botones-capa-cerrar:hover:not(.es-apagada) { background: var(--marca-secundario-oscuro); }
.botones-capa-cerrar:focus-visible { outline: 3px solid var(--marca-blanco); outline-offset: 3px; }
.botones-capa-cerrar.es-apagada { cursor: default; opacity: 0.45; }

/* CERRAR late en cuanto la capa termina de narrarse, que es justo cuando deja de estar
   apagado. Cuelga de `:not(.es-apagada)` y no de una clase nueva: «listo para cerrar» ya es
   un ESTADO que el DOM representa, y atarlo a la clase que lo gobierna hace imposible que
   los dos se desincronicen — mismo razonamiento que el latido infinito de §0as. */
.botones-capa-cerrar:not(.es-apagada) {
  animation: latido-cta-sync 1.6s var(--marca-mov-curva) infinite;
}
.botones-capa-cerrar:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .botones-capa-cerrar:not(.es-apagada) {
    animation: none;
    box-shadow: 0 0 0 5px rgba(var(--marca-secundario-rgb), 0.45);
  }
}

/* Los términos [[resaltados]] sobre la capa navy van en secundario, no en el rojo de texto
   sobre claro. */
.botones-capa-cuerpo .resaltado { color: var(--marca-resaltado); background: none; }

/* En portada la pastilla de la insignia se invierte: fondo claro con el texto navy. */
.es-insignia-clara .botones-cromo-pastilla {
  background: var(--marca-blanco);
  color: var(--marca-primario);
}

/* --------------------------- portada de la familia con cromo de lámina */

/* Foto a lienzo completo con velo navy (viene compuesto en el propio asset), curvas
   decorativas a la derecha y la pila de texto a la izquierda. Nada del panel claro ni de las
   diagonales de la portada base: es otra composición, no un ajuste de la misma.
   `background: var(--marca-primario)` es un RESPALDO, no el diseño: el navy siempre vino de
   la foto (el velo está horneado en el asset), nunca de un color plano acá. Sin él, un módulo
   sin fotografía todavía —la primera fase de cualquier curso nuevo, antes de generar
   imágenes— mostraba el blanco genérico de `--marca-fondo` detrás de texto BLANCO
   (`--marca-texto-inverso`): compilaba limpio y la lámina entera se veía en blanco sobre
   blanco, sin un solo error. Encontrado en el M1 de EPP, el primer curso Syncore sin fotos
   reales; se corrige acá y no en el guion porque cualquier curso en esa misma fase pisa el
   mismo hueco. Con una foto real declarada, `background-image` (inline, vía `fondo()`) la
   tapa igual que siempre — este color nunca se ve una vez que hay imagen. */
.layout-portada-sync { padding: 0; position: relative; overflow: hidden; background: var(--marca-primario); }

/* Las curvas del original: 492×720 ancladas al borde derecho (x=788). */
.portada-sync-curvas {
  position: absolute;
  left: 788px;
  top: 0;
  width: 492px;
  height: 720px;
  object-fit: cover;
  opacity: 0.9;
}

/* La caja no posiciona: cada pieza va en su coordenada exacta del original, igual que en
   `botones`. Así el texto puede ocupar todo el ancho útil mientras el filete naranja
   conserva su largo fijo de 332px. */
.portada-sync-caja { position: static; }

.portada-sync-flecha { position: absolute; left: 110px; top: 196px; width: 32px; height: 65px; }

/* Las tres piezas de texto arrancan en x=122 y no en 109: es un escalón DELIBERADO del
   original —la línea y el botón sí van en 109— y viene del inset de la caja de texto, que el
   ancho declarado ya descuenta. Por eso no se escribe como `padding-left`: sumaría dos veces.

   Los `top` de antes se habían derivado del `yPos` de la CAJA de Storyline, que trae su propio
   inset y su alineación vertical; acá se posicionan por baseline, que es lo que realmente se
   ve. Con `line-height: 1.15`, la baseline cae a 0,858 × el cuerpo desde el borde superior.

   El +17px de la 21.ª ronda («bajar el texto para que el ícono quede solo») se hizo sobre una
   etiqueta de 28px, que era el tamaño equivocado: con el cuerpo real (42,667px) la flecha
   termina en y=261 y la tinta arranca en 263 — el motivo del pedido desaparece solo. */
.portada-sync-etiqueta {
  position: absolute;
  left: 122px;
  top: 257px;
  width: 1048px;
  margin: 0;
  font-size: 42.667px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--marca-texto-inverso);
}

.portada-sync-titulo {
  position: absolute;
  left: 122px;
  top: 345px;
  width: 1048px;
  margin: 0;
  font-size: 42.667px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--marca-texto-inverso);
}

/* El filete es una pieza propia y no un `::after` del título: en el original es una línea de
   1px de LARGO FIJO colgada del lienzo, no un subrayado que siga al texto. Mientras dependía
   del ancho del título había que atarle el título con `fit-content`, y el filete quedaba 3px
   grueso y 27px arriba de su sitio. Suelto, cada uno vuelve a su medida. */
.portada-sync-filete {
  position: absolute;
  left: 109px;
  top: 425px;
  width: 332px;
  height: 1px;
  background: var(--marca-secundario);
}

.portada-sync-bajada {
  position: absolute;
  left: 122px;
  top: 437px;
  width: 711px;
  margin: 0;
  font-size: 35.556px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--marca-texto-inverso);
}

/* CTA: la misma caja contenedora que CERRAR, con la geometría del path de Storyline —
   esquinas superior izquierda e inferior derecha redondeadas al 50 % del alto, las otras dos
   rectas. (109,524) 191×51 en el original. */
.portada-sync-cta {
  position: absolute;
  left: 109px;
  top: 524px;
  display: block;
  width: 191px;
  height: 51.67px;
  border: 0;
  border-radius: 25px 0 25px 0;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-family: inherit;
  font-size: 24.889px;
  font-weight: 800;
  /* Sin interletrado. El original no declara `characterSpacing` en NINGÚN objeto del módulo
     —verificado recorriendo los 14 slides: cero ocurrencias—, así que abrirlo era invención
     nuestra, y hacía que todas nuestras mayúsculas salieran más anchas que las de allá con la
     misma altura de mayúscula. Un juez a ciegas lo detectó como patrón, no como caso suelto. */
  letter-spacing: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}
.portada-sync-cta:hover { background: var(--marca-secundario-oscuro); }
.portada-sync-cta:focus-visible { outline: 3px solid var(--marca-blanco); outline-offset: 3px; }

/* ---------------------------- cierre de la familia con cromo de lámina */

/* Fondo navy a lienzo completo (imagen, no color plano — trae su propio degradé) con las
   MISMAS curvas decorativas de `portada` (mismo asset, misma posición): es la lámina de
   cierre de la serie, no una composición nueva. Primera versión desde la captura que mandó
   Pablo (2026-08-12) — sin panel de Storyline propio para este slide, así que las medidas
   son una lectura de esa captura, no una extracción exacta; puede necesitar un ajuste fino
   contra el original. */
/* Mismo respaldo que `.layout-portada-sync` y por el mismo motivo: sin foto todavía, el navy
   tiene que venir de algún lado o el texto blanco desaparece contra el blanco genérico. */
.layout-cierre-sync { padding: 0; position: relative; overflow: hidden; background: var(--marca-primario); }
/* Las curvas van a plena opacidad: el objeto del original declara `alpha: 100`. El 0,5 era
   parte de la lectura a ojo de la captura. */
.layout-cierre-sync .portada-sync-curvas { opacity: 1; }
.layout-cierre-sync .portada-sync-flecha { top: 196px; }

.cierre-sync-caja { position: static; }

/* Desde acá y hasta la botonera, todas las medidas salen del panel «Tamaño y posición» del
   slide (`5zLiQ4AUxlE`), que apareció después de la primera versión: lo que había era una
   lectura de la captura que mandó Pablo, y así lo decía este mismo comentario. El escalón de
   x=122 para el texto contra x=109 para el resto es el mismo del original que en `portada`. */
/* Los cuerpos y las posiciones de esta lámina salen del panel del original —caja (109,292)
   565×73 para el título, (109,367) 1055×55 para la primera línea y (109,423) 929×73 para la
   segunda—, no de la lectura de una captura, que es como se habían fijado. Todos los cuerpos
   estaban en PUNTOS y se habían tomado por píxeles: 37,333 pt son 49,78 px, no 49.
   El `left` se queda en 122 y NO en los 119 que daría la cuenta de caja + inset: medida la
   tinta de las tres líneas sobre las dos capturas, el original la arranca en 122. */
.cierre-sync-titulo {
  position: absolute;
  left: 122px;
  top: 299px;
  margin: 0;
  font-size: 49.78px;
  font-weight: 800;
  color: var(--marca-secundario);
}

.cierre-sync-descripcion {
  position: absolute;
  left: 122px;
  width: 760px;
  margin: 0;
  color: var(--marca-texto-inverso);
  line-height: 1.3;
}
/* 32 pt y 37,333 pt del panel. La segunda línea es MÁS GRANDE que la primera, que es lo que
   hace que el nombre del módulo pese más que la frase que lo introduce. */
/* 363 y 428, medidos sobre las capturas nativas: la segunda línea salía 3 px baja y la tercera
   3 px alta, así que entre ellas quedaban 6 px menos de aire del que hay en el original y la
   pila dejaba de leerse como una unidad. */
.cierre-sync-descripcion--1 { top: 363px; font-size: 42.67px; font-weight: 400; }
.cierre-sync-descripcion--2 { top: 428px; font-size: 49.78px; font-weight: 800; }

/* La botonera NO se alinea con la columna de texto: va centrada en el lienzo. La cuenta cierra
   sola — 406 + 191 + 86 + 191 = 874, centro exacto en 640. */
.cierre-sync-botonera {
  position: absolute;
  left: 406px;
  top: 575px;
  display: flex;
  gap: 86px;
}

/* Misma geometría que COMENZAR/CERRAR/CTA de portada — la «caja contenedora» del brandbook
   (25px 0 25px 0), no un botón inventado. */
.cierre-sync-cta {
  position: static;
  display: block;
  width: 191px;
  height: 51px;
  border: 0;
  border-radius: 25px 0 25px 0;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-family: inherit;
  font-size: 24.89px;   /* 18,667 pt × 4/3 */
  font-weight: 800;
  /* Sin interletrado. El original no declara `characterSpacing` en NINGÚN objeto del módulo
     —verificado recorriendo los 14 slides: cero ocurrencias—, así que abrirlo era invención
     nuestra, y hacía que todas nuestras mayúsculas salieran más anchas que las de allá con la
     misma altura de mayúscula. Un juez a ciegas lo detectó como patrón, no como caso suelto. */
  letter-spacing: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}
.cierre-sync-cta:hover { background: var(--marca-secundario-oscuro); }
.cierre-sync-cta:focus-visible { outline: 3px solid var(--marca-blanco); outline-offset: 3px; }

.es-movil .layout-cierre-sync .portada-sync-curvas { display: none; }
.es-movil .cierre-sync-caja {
  position: static;
  padding: var(--marca-esp-lg) var(--marca-esp-md);
  display: flex;
  flex-direction: column;
  gap: var(--marca-esp-sm);
}
.es-movil .cierre-sync-titulo,
.es-movil .cierre-sync-descripcion,
.es-movil .cierre-sync-botonera {
  position: static;
  width: 100%;
  top: auto;
  left: auto;
}

/* El botón late cuando la narración terminó y ya se puede avanzar — mismo criterio y mismo
   ritmo que «Siguiente» (§0as). Acá el que avisa es este, porque en esta familia la
   navegación de la barra se retira en las láminas con CTA (§0bg).
   El halo va en SECUNDARIO y no en terciario: el botón ya es naranja pleno, y es el mismo
   pulso que usan los círculos de navegación — dos avisos distintos para el mismo mensaje se
   leerían como dos cosas distintas. */
@keyframes latido-cta-sync {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--marca-secundario-rgb), 0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(var(--marca-secundario-rgb), 0); }
}

.avance-libre .portada-sync-cta:not(.es-oculto) {
  animation: latido-cta-sync 1.6s var(--marca-mov-curva) infinite;
}
.portada-sync-cta:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .avance-libre .portada-sync-cta:not(.es-oculto) {
    animation: none;
    box-shadow: 0 0 0 5px rgba(var(--marca-secundario-rgb), 0.45);
  }
}

.es-movil .layout-portada-sync { padding: var(--marca-esp-lg) var(--marca-esp-md); }
.es-movil .portada-sync-curvas { display: none; }
.es-movil .portada-sync-caja { position: static; width: 100%; }
.es-movil .portada-sync-etiqueta,
.es-movil .portada-sync-titulo,
.es-movil .portada-sync-bajada { width: 100%; }
/* El filete es un largo FIJO pensado contra el lienzo: en 375px se saldría por la derecha, y
   en columna única no separa nada que no separe ya el propio salto de bloque. */
.es-movil .portada-sync-filete { display: none; }

/* ---------- objetivos con el marco de la familia (rejilla de la composición base) */

/* La rejilla numerada es la MISMA que la base —el número toma el rol primario, que con los
   tokens de esta marca ya sale navy— y solo cambia el marco: cromo arriba y columna de título
   a la izquierda, en la retícula 109/399 de la familia. */
.layout-objetivos.es-syncore { padding: 0; position: relative; }

/* Acá vivía un `top: 240px` para la columna de título, que existía solo para hacerle lugar a
   una intro que en el original no está (es texto agregado). Sin él hereda el 196 de la clase
   base, que es el valor real medido en los cinco slides de la familia — 44px de corrimiento
   menos en las dos láminas que usan esta composición. */

/* `height: auto` es la regla que hace falta: la intro de la composición base tiene alto fijo
   para su versión centrada, y heredarlo acá la estiraba 142px hasta pisar la rejilla. */
.layout-objetivos.es-syncore > .objetivos-intro {
  position: absolute;
  left: 399px;
  top: 112px;
  width: 815px;
  height: auto;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--marca-primario);
}

/* La rejilla base reparte el lienzo COMPLETO (celdas de 546px, número hacia el centro).
   Acá vive dentro de los 815px de la zona de contenido, así que las columnas se recalculan:
   sin esto los dos bloques de la derecha terminaban en x=1517, fuera del lienzo. */
.layout-objetivos.es-syncore > .objetivos-rejilla {
  position: absolute;
  left: 399px;
  top: 170px;
  width: 815px;
  height: 470px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 28px;
  row-gap: 26px;
}

.layout-objetivos.es-syncore .objetivo-bloque { width: auto; min-width: 0; }

/* El ícono del original ocupa 50px, no 34: la columna sólida mide 74, así que entra con 12px
   de aire a cada lado. Es el único ajuste que acerca la lámina al original sin tocar la
   rejilla, que ya está aprobada. El interlineado acompaña. */
.layout-objetivos.es-syncore .objetivo-icono { width: 50px; height: 50px; }
.layout-objetivos.es-syncore .objetivo-texto { line-height: 32px; }

/* ---------- `forma: filas` — una fila por ítem, de ancho completo.
   Disco de 78 en el rol secundario a la IZQUIERDA (con el ícono adentro) y píldora de texto a
   la derecha, apiladas de arriba abajo. No es la rejilla 2×2 estrechada: son cuatro barras que
   ocupan los 815px completos, con paso vertical de 107,667 (78 de alto + 29,667 de hueco).
   La cantidad de filas la decide el guion — `grid-auto-rows` y `height: auto`, así que la
   composición sirve igual con tres ítems o con cinco. */
.layout-objetivos.es-syncore.es-forma-filas > .objetivos-rejilla {
  left: var(--filas-x, 399px);
  top: var(--filas-y, 129px);
  width: var(--filas-ancho, 815px);
  height: auto;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  grid-auto-rows: var(--filas-alto, 78px);
  column-gap: 0;
  row-gap: var(--filas-hueco, 29.667px);
}

/* La fila no lleva tarjeta propia: el fondo lo pone la píldora del texto, y el disco queda
   suelto encima del collage. Los 15px de hueco son los que hay entre el borde del disco
   (termina en 477) y el arranque de la píldora (492). */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-bloque {
  /* El hueco va como MARGEN de la píldora y no como `gap` de la fila: puede ser NEGATIVO
     —en «Enriquecimiento de oxígeno» la píldora le pasa 36px por debajo al disco— y un `gap`
     negativo el navegador lo descarta en silencio, dejando las dos piezas contiguas sin que
     nada falle. */
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  align-items: stretch;
}
/* El hueco entre el disco y la píldora puede ser NEGATIVO: en la lámina «Enriquecimiento de
   oxígeno» del Módulo 2 la píldora arranca 36px a la izquierda del borde del disco y le pasa
   por DEBAJO — el mismo recurso de pieza superpuesta que el chip de `normas`. Por eso el
   disco necesita quedar por encima; con `gap` positivo esto no cambia nada. */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-numero { position: relative; z-index: 1; }
.layout-objetivos.es-syncore.es-forma-filas .objetivo-texto-col { position: relative; z-index: 0; }

/* Disco perfecto de 78, no la columna sólida de alto completo de la rejilla base. El color es
   el rol SECUNDARIO —el mismo que ya usan la flecha del isotipo y las cajas contenedoras— y
   por eso no hace falta escribir ningún valor a mano. */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-numero {
  flex: 0 0 var(--filas-alto, 78px);
  width: var(--filas-alto, 78px);
  height: var(--filas-alto, 78px);
  margin: 0;
  border-radius: 50%;
  background: var(--marca-secundario);
}

/* Píldora: radio = mitad del alto (39), o sea las puntas completamente redondeadas, y no el
   radio suave de una tarjeta. El relleno del original es el neutro a poco menos de la mitad de
   opacidad, así que se compone del rol en vez de fijar un gris. El `background` plano de la
   línea de arriba es la red por si `color-mix` no resolviera. */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-texto-col {
  flex: 1;
  margin-left: var(--filas-hueco-x, 15px);
  /* La sangría izquierda del texto dentro de la píldora la declara el guion: cuando la
     píldora pasa por debajo del disco, el original le mete una sangría de párrafo para que la
     primera palabra no quede tapada (`leadingMargin` en el cuadro de texto del Storyline). */
  padding: 6px 13px 6px var(--filas-sangria, 13px);
  border-radius: calc(var(--filas-alto, 78px) / 2);
  background: var(--marca-neutro);
  background: color-mix(in srgb, var(--marca-neutro) 49%, transparent);
  /* La píldora no siempre mide lo mismo que su disco: en «Enriquecimiento de oxígeno» del
     Módulo 2 el disco es de 116 y la caja de texto de 70, centrada contra él. El valor por
     defecto es `100%`, que dentro de una fila de alto fijo da exactamente lo mismo que el
     `stretch` de siempre — así el «Resumen», que no lo declara, no se mueve un píxel. */
  height: var(--filas-pastilla-alto, 100%);
  align-self: center;
}

/* ---------- `pastilla: primario` — la píldora deja de ser el gris translúcido y pasa a ser
   el bloque sólido de marca, con texto claro. No es un color nuevo: es el MISMO rol primario
   que ya pinta los destinos de `clasificar` y la idea de fuerza de `contenido`.
   Y con él cambia la forma: el original no usa acá el radio completo sino la geometría
   DIAGONAL de la familia (arriba-izquierda y abajo-derecha redondeadas, las otras dos
   rectas), la misma fórmula de COMENZAR/CERRAR con otro radio — 11,6px sobre una caja de
   70,6, o sea el 16,4 % del alto. Extraído del path del original, no deducido. */
.layout-objetivos.es-syncore.es-forma-filas.es-pastilla-primario .objetivo-texto-col {
  padding: 5px 10px 5px var(--filas-sangria, 10px);
  border-radius: 11.6px 0 11.6px 0;
  background: var(--marca-primario);
}

.layout-objetivos.es-syncore.es-forma-filas.es-pastilla-primario .objetivo-texto {
  color: var(--marca-texto-inverso);
}
/* Dentro del bloque navy el resalte no puede ser el secundario sobre fondo oscuro: los dos
   tramos son del mismo blanco y lo único que los separa es el peso, igual que en la píldora
   gris. */
.layout-objetivos.es-syncore.es-forma-filas.es-pastilla-primario .objetivo-texto strong {
  color: inherit;
}

/* Cuerpo real del original: 20 pt × 4/3. El punto de partida cambia, no el mecanismo — sigue
   colgado de `--tam-obj-item`, así que un módulo con textos más largos lo encoge igual. */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-texto {
  font-size: var(--tam-obj-item, 26.67px);
  /* Proporcional y no los 32px fijos de antes: 26,67 × 1,2 = 32,004, o sea que la lámina ya
     calibrada no se mueve, pero cuando el auto-ajuste encoge la letra el interlineado la
     acompaña. Con el valor fijo, encoger el cuerpo no ganaba un solo píxel de alto y el texto
     seguía sin entrar en su píldora. */
  line-height: 1.2;
  text-align: justify;
}

/* Dentro de la píldora, la frase marcada con `[[…]]` cambia de PESO y no de color: en el
   original los dos tramos son del mismo primario y lo único que los separa es la negrita. El
   peso lo pone la regla global de `mark.resaltado`, así que acá solo se devuelve el color. */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-texto mark.resaltado { color: inherit; }

/* ---------- `forma: tarjeta` — UNA caja translúcida con las viñetas adentro.
   No hay bloque por ítem: el ítem es el párrafo y la viñeta la pinta el CSS. La caja es la
   misma pieza que usa `contenido` con `forma: caja` —blanco a 80 %, borde fino en el rol
   secundario, radio 20— porque en el material del cliente es literalmente el mismo shape. */
.layout-objetivos.es-syncore.es-forma-tarjeta > .objetivos-tarjeta {
  position: absolute;
  left: 399px;
  top: 124px;
  width: 815px;
  height: 470px;
  box-sizing: border-box;
  /* 71 y 71 son la sangría del panel contra el borde de la caja; a la derecha no hay relleno
     porque el ancho de cada viñeta ya está declarado y el sobrante no se usa.
     La de ARRIBA la puede correr el guion (`vineta_desde`): la pila no va centrada —se probó
     centrarla y el «Objetivos» del Módulo 1, que ya estaba calibrado, subió de 2,6 % a 4,3 %—
     sino colocada, y dónde arranca es un dato del panel de posición del original. */
  padding: var(--vineta-desde, 71px) 0 0 71px;
  border: 1px solid var(--marca-secundario);
  border-radius: 20px;
  background: var(--marca-blanco);
  background: color-mix(in srgb, var(--marca-blanco) 80%, transparent);
}

/* Las viñetas van en FLUJO, no en coordenadas por índice: alto fijo de 70 más 16,67 de hueco
   dan el paso de 86,67 del original (71 / 157,7 / 244,3 / 331 contra 71 / 158 / 244 / 331), y
   así la composición no queda atada a que los ítems sean exactamente cuatro.
   Sangría francesa de 16px: el punto cuelga a la izquierda y las líneas siguientes alinean
   contra el texto, igual que la lista del original. */
.layout-objetivos.es-syncore .objetivo-vineta {
  box-sizing: border-box;
  width: 673px;
  /* El alto fijo de 70 son DOS líneas, que es lo que ocupan las cuatro viñetas de la lámina
     con la que se calibró la composición. Cuando una viñeta del original ocupa tres —pasa en
     el Módulo 2— el guion declara `vineta_alto: auto` y el alto lo decide el contenido: con
     el alto fijo, el auto-ajuste encogía la letra de TODA la lámina hasta que las tres líneas
     entraran en la caja de dos, y el texto salía un cuarto más chico que el del original sin
     que nada fallara. */
  height: var(--vineta-alto, 70px);
  margin: 0 0 var(--vineta-hueco, 16.67px);
  padding-left: 16px;
  overflow: hidden;
  font-size: var(--tam-obj-item, 26.67px);
  line-height: 32.5px;
  text-align: justify;
  color: var(--marca-primario);
}

.layout-objetivos.es-syncore .objetivo-vineta::before {
  content: '\2022';
  display: inline-block;
  width: 16px;
  margin-left: -16px;
  /* Arial es la familia que el original declara para el carácter de viñeta, no la corporativa. */
  font-family: Arial, sans-serif;
}

/* Excepción de título medida en ESTA lámina: su panel declara 28 pt para la segunda línea, no
   los 32 que son constante en el resto de la familia — mismo mecanismo por lámina que ya usan
   las dos variantes de `botones`. Y el paso entre las dos líneas es de 4px, no de 13: la caja
   del antetítulo termina en y=348 y la del titular arranca en 352. El margen bajo el isotipo
   baja a 20 para que la tinta del antetítulo caiga en 281 en vez de 285. Va acotado a la
   forma, así que la otra lámina que usa este layout con el marco de la familia no se mueve. */
.layout-objetivos.es-syncore.es-forma-tarjeta { --tam-titulo-fuerte: 37.33px; }
.layout-objetivos.es-syncore.es-forma-tarjeta .botones-titulo-fuerte { margin-top: 4px; }
.layout-objetivos.es-syncore.es-forma-tarjeta .botones-flecha-img { margin-bottom: 20px; }

/* ---- móvil: columna única, capa en flujo. El cromo de lámina se oculta: en pantalla
   chica duplicaría la marca que ya lleva la barra del reproductor. */
.es-movil .layout-objetivos.es-syncore { padding: var(--marca-esp-lg) var(--marca-esp-md); }
.es-movil .layout-objetivos.es-syncore > .botones-columna-titulo,
.es-movil .layout-objetivos.es-syncore > .objetivos-intro,
.es-movil .layout-objetivos.es-syncore > .objetivos-tarjeta,
.es-movil .layout-objetivos.es-syncore > .objetivos-rejilla {
  position: static;
  width: 100%;
  height: auto;
}
/* La caja pierde su relleno de lienzo (71px de sangría contra un ancho de 375 no deja texto) y
   las viñetas sueltan el ancho y el alto declarados, o un ítem de tres líneas queda recortado. */
.es-movil .layout-objetivos.es-syncore > .objetivos-tarjeta { padding: var(--marca-esp-md); }
.es-movil .layout-objetivos.es-syncore .objetivo-vineta {
  width: auto;
  height: auto;
  overflow: visible;
  font-size: var(--marca-cuerpo-lg);
  line-height: 1.5;
}
/* El alto fijo de 78 por fila es una medida del lienzo: en columna angosta un texto de tres
   líneas se sale de su píldora. El reset general de móvil no alcanza acá porque el selector de
   la forma tiene más especificidad, así que se escribe explícito. */
.es-movil .layout-objetivos.es-syncore.es-forma-filas > .objetivos-rejilla {
  grid-auto-rows: auto;
  row-gap: var(--marca-esp-md);
}
.es-movil .botones-cromo { display: none; }
.es-movil .layout-botones { padding: var(--marca-esp-lg) var(--marca-esp-md); }
.es-movil .botones-columna-titulo,
.es-movil .botones-intro,
.es-movil .botones-rejilla,
.es-movil .botones-rejilla--circulos { position: static; width: 100%; }
.es-movil .botones-rejilla { grid-template-columns: 1fr; margin-top: var(--marca-esp-md); }
/* Los discos no se apilan en una columna: envuelven y se centran, que es lo único que cambia
   en pantalla chica — el disco ya es del porte de un objetivo táctil. */
.es-movil .botones-rejilla--circulos {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--marca-esp-md);
}
.es-movil .botones-tarjeta-cuerpo { height: auto; overflow: visible; }
.es-movil .botones-capa { position: fixed; inset: 0; }
/* En pantalla chica las dos piezas vuelven al flujo. Hay que apagar TAMBIÉN el centrado y el
   tope de alto: `position: static` no anula un `transform`, y un `max-height` heredado cortaría
   el texto en silencio. Va como selector DESCENDIENTE porque `es-movil` vive en el contenedor
   de la aplicación y estas clases mucho más adentro. */
.es-movil .botones-capa-titulo,
.es-movil .botones-capa-cuerpo {
  position: static;
  width: auto;
  padding: 0;
  transform: none;
  margin: var(--marca-esp-md);
}
.es-movil .botones-capa-cuerpo { height: auto; max-height: none; overflow-y: auto; }

/* --------------------------------- galería (familia con cromo de lámina) */

/* Imagen a lienzo completo, centrada y escalada a cubrir el lienzo entero — sin panel
   lateral y sin ningún velo (el pedido explícito de Pablo, 2026-08-12): esta lámina no llama
   a `diagonales()` ni agrega `.portada-velo` como sí hacen `portada`/`contenido`. La regla
   de abajo es una redundancia deliberada sobre `.con-fondo` (que ya hace lo mismo): así,
   aunque cambie la clase base, esta lámina nunca hereda un fade por accidente. */
.layout-galeria {
  padding: 0;
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

/* La etiqueta es el shape del original, clonado: rectángulo liso de un solo color, radio
   PAREJO de 11,845 en las cuatro esquinas, sin trazo y sin ninguna sombra (leído del path del
   material publicado, que declara `strokewidth: 0` y no trae ningún filtro). Antes acá vivía
   un rediseño deliberado —geometría diagonal, borde claro, sombra en tres capas, más angosta—
   que bajo el encargo de clonar sobra: el conjunto se ve más plano que aquella versión y esa
   planicie es la del original.
   SECUNDARIO, no primario: el relleno del shape es el naranjo de marca en las seis etiquetas.
   El navy venía de una ronda en que la idea de fuerza también era naranja y las dos piezas
   competían por el mismo acento; sin esa caja abajo, la competencia no existe.
   `max-width: none` no es cosmético: el guion declara el ancho de cada etiqueta (`et.w`), el
   layout lo escribe en línea y un `max-width` chico lo descartaba SIN UN SOLO AVISO —
   exactamente la fuga muda que el proyecto persigue. El relleno son el `xPos`/`yPos` del
   cuadro de texto dentro del shape (10 y 5), no un valor de gusto: con 14 de sangría lateral
   quedaban 8px menos de ancho útil y el rótulo más largo quebraba en tres líneas donde el
   original quiebra en dos. El alto es fijo, como el shape: así seis etiquetas de largos
   distintos se leen como la misma pieza repetida. */
.galeria-etiqueta {
  position: absolute;
  z-index: 2;
  max-width: none;
  height: 71px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 11.85px;
  background: var(--marca-secundario);
}

.galeria-etiqueta-texto {
  margin: 0;
  width: 100%;
  color: var(--marca-texto-sobre-secundario);
  font-size: 21.33px;   /* 16 pt × 4/3 */
  /* Peso 700: el original declara la variante Bold de la tipografía corporativa y nada más
     pesado. Con 800 el trazo ensancha y, sumado al relleno, empuja el quiebre de línea. */
  font-weight: 700;
  /* Paso de renglón medido en la tinta del original: 29-30px sobre un cuerpo de 21,33. */
  line-height: 1.36;
  text-align: center;
}

/* «Titile» al aparecer: un pulso de ATENCIÓN, no el latido infinito que el motor reserva
   para lo accionable (nav, CTAs — §0as). Esta etiqueta no se toca, así que un pulso sin fin
   mentiría sobre qué se puede hacer con ella. Dos vueltas y se asienta — se dispara solo
   cuando el cue la revela, porque recién ahí empieza a calzar `:not(.es-oculto)`. */
@keyframes galeria-destaque {
  0%   { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(var(--marca-secundario-rgb), 0.65); }
  60%  { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(var(--marca-secundario-rgb), 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--marca-secundario-rgb), 0); }
}

.galeria-etiqueta:not(.es-oculto) {
  animation: galeria-destaque 700ms var(--marca-mov-curva) 2;
}

@media (prefers-reduced-motion: reduce) {
  .galeria-etiqueta:not(.es-oculto) { animation: none; }
}

/* De vuelta abajo y centrada horizontal — no al medio del lienzo (se probó esa ronda y
   Pablo pidió volver: con las etiquetas ahora en navy, el naranjo de acá es el ÚNICO acento
   de ese color en toda la lámina, y abajo — separado de las etiquetas y del collage — es
   donde más se distingue, no compitiendo al centro contra las fotos). Tope de ancho para no
   tocar los círculos de navegación (arrancan en x≈1017): con 640px centrado, el borde
   derecho llega como mucho a 960. */
.galeria-cierre {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  max-width: 640px;
  margin: 0;
  padding: 16px 32px;
  border-radius: 10px 10px 26px 10px;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

/* Excepciones de la columna de título medidas en ESTA lámina, contra la tinta del original.
   El paso entre las dos líneas del titular es de 66px acá y de 75 en `botones`, así que los
   13px de compensación de la familia sobran 8; el bloque entero cae 3px bajo; y el isotipo se
   coloca a 35×71 en vez de los 32×65 del resto, o sea el trazo mide 33×68. Van acotadas al
   layout: las clases `.botones-*` de título las comparten cuatro láminas más, donde el valor
   de la familia sí es el correcto. */
.layout-galeria .botones-titulo-fuerte { margin-top: 5px; }
/* El isotipo crece 3px y el hueco bajo él cede los mismos 3: si se dejaba el margen de la
   familia, agrandar la pieza empujaba el titular hacia abajo y se comía la corrección. */
.layout-galeria .botones-flecha-img { width: 33px; height: 68px; margin-bottom: 18px; }

.es-movil .layout-galeria .botones-columna-titulo { position: static; width: 100%; margin-bottom: var(--marca-esp-sm); }
/* El alto fijo y el ancho declarado por etiqueta asumen el lienzo: en columna única se sueltan
   los dos, o un rótulo de dos líneas queda recortado. El `!important` del ancho es porque ese
   valor viene EN LÍNEA desde el guion (`et.w`) y no hay otra forma de ganarle. */
.es-movil .layout-galeria .galeria-etiqueta { position: static; max-width: 100%; width: 100% !important; height: auto; margin-bottom: var(--marca-esp-xs); }
.es-movil .layout-galeria .galeria-cierre { position: static; transform: none; max-width: 100%; margin-top: var(--marca-esp-md); }

/* ---------------------------------- normas (familia con cromo de lámina) */

/* Retícula estándar de la familia: título en x=109, contenido de x=399 a 1214. */
.layout-normas { padding: 0; position: relative; }

.layout-normas > .normas-columna {
  position: absolute;
  left: 399px;
  top: 127px;
  width: 815px;
}

/* Cada fila: la barra ocupa TODO el ancho de la fila, y el chip se dibuja ENCIMA, corrido
   hacia la izquierda hasta que se sale del borde — la superposición real del original
   (barra desde x=147/816 ≈ 18%, chip de 0 a 168/816 ≈ 21%: se pisan). El chip lleva su
   propia sombra para que la superposición se LEA como dos capas, no como un error de
   maquetación. */
.normas-fila {
  position: relative;
  height: 71px;
  margin-bottom: 18px;
}

.normas-barra {
  position: absolute;
  left: 18%;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  /* Justificado a la izquierda, casi pegado al chip — Pablo revirtió el centrado de la ronda
     anterior (2026-08-12): con el chip flotando encima del arranque de la barra, dejar el
     texto centrado alejaba las dos piezas en vez de leerse como una sola unidad. */
  justify-content: flex-start;
  /* Las cuatro esquinas redondeadas: el path del original tiene arcos de 7,79 en todas, no dos
     rectas del lado del chip. */
  border-radius: 8px;
  background: var(--marca-primario);
  /* Sangría izquierda en PÍXELES, no en porcentaje: el 26 % daba 212px de despeje contra los
     42 del original, y era lo que cambiaba el quiebre de línea de tres de las cuatro filas.
     El chip se superpone igual —flota encima— así que la barra no necesita cederle el ancho. */
  padding: 12px 10px 12px 42px;
}

.normas-texto {
  margin: 0;
  color: var(--marca-texto-inverso);
  /* 16 pt × 4/3 y peso normal: el original NO pone la descripción en negrita, y con 20px/700
     el renglón medía distinto y quebraba antes. El justificado también es del original — acá
     sí funciona (la barra es ancha y el texto corto: no abre ríos como en un párrafo de 532). */
  font-size: 21.33px;
  font-weight: 400;
  line-height: 1.25;
  text-align: justify;
}

/* Ancho mínimo en PÍXELES, que es como lo declara el shape: 168. El 21 % de antes daba 171,1
   sobre una fila de 815 y el chip sobresalía 3px justo del lado donde se superpone con la
   barra. Sigue siendo un mínimo, así que una etiqueta más larga lo hace crecer igual. */
.normas-chip {
  position: absolute;
  left: 0;
  /* Centrado en las dos direcciones: el rótulo es corto y el chip mide 50 de alto fijo, así
     que el relleno vertical fijo lo dejaba pegado arriba en cuanto el cuerpo creció a 24px. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Alineado ARRIBA, no centrado contra la barra: en el original el chip mide 50px de alto
     contra los 71 de la fila y cuelga desde el borde superior. Centrarlo lo bajaba 10px. */
  top: 0;
  transform: none;
  height: 50px;
  box-sizing: border-box;
  min-width: 168px;
  padding: 0 18px;
  /* Misma geometría diagonal que COMENZAR/CERRAR — Pablo pidió que el chip sea de la misma
     familia de botones, no una píldora pareja (2026-08-12). El radio es el 50 % del alto REAL
     del chip (50/2 = 19), no los 25 que le corresponden a un botón de 51. */
  border-radius: 19px 0 19px 0;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  /* 18 pt × 4/3, tomado del span del original — no los 18px que parecía decir el número. La
     diferencia se ve enseguida: el rótulo más ancho medía 87px de tinta contra los 114 reales. */
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  /* Sin sombra: el path del original es plano y la separación entre chip y barra la da solo el
     salto de color. La sombra hacía leer la superposición como un error de maquetación. */
  box-shadow: none;
  z-index: 1;
}

/* Zona libre bajo la última fila de la lista: de ahí hasta el borde del lienzo, ancho
   completo. `flex` centra a su hijo horizontal Y verticalmente DENTRO de ese espacio sin
   medir nada por JS ni asumir el alto real de la caja — pedido de Pablo, 2026-08-12: «que
   estén bien posicionadas verticalmente al centro de la línea horizontal de la lámina
   completa». El `top` lo fija JS (depende de cuántos ítems traiga el guion — ver
   layouts.js). */
/* La zona deja de posicionar: ahora es un pasamanos. El centrado en el espacio libre era una
   suposición de diseño razonable, pero el panel «Tamaño y posición» del original dice dónde
   va la caja y eso manda (D12). Al volverla estática, su hijo absoluto queda referido a
   `.layout-normas` —que es el lienzo— y las coordenadas de abajo se leen directo del panel,
   sin restarle el origen de ninguna columna. */
.normas-zona-inferior {
  position: static;
  display: block;
}

/* Coordenadas del panel del original, en el lienzo. El ancho sigue siendo FIJO por la misma
   razón de siempre: con `fit-content`, el ancho dependía de qué hijos ya se habían revelado
   (la caja y la idea de fuerza tienen cues distintos) y el texto saltaba de una línea a dos en
   cuanto aparecía el segundo. Lo que cambia es el número: 816px medidos, no 636 estimados, y
   el bloque va donde dice el panel en vez de centrarse en el espacio libre. */
.normas-envoltorio-tabla {
  position: absolute;
  left: 398px;
  top: 487px;
  width: 816px;
}

/* Caja gris comparativa: radio parejo (no la geometría diagonal — esa es de los botones de
   acción; acá el original usa un rectángulo redondeado normal, medido: 17,83px) y alto fijo,
   como el shape. */
/* El relleno lateral se va a cero: las tres columnas de abajo tienen posición propia medida
   contra el envoltorio (425 / 687,5 / 950), así que un relleno de caja las corría todas. */
.normas-comparacion {
  height: 107px;
  padding: 18px 0 0;
  border-radius: 17.83px;
  background: var(--marca-neutro);
}

/* La idea de fuerza del guion — mismo tratamiento que `galeria-cierre`: geometría diagonal,
   naranjo pleno. En flujo justo debajo de la caja comparativa (mismo envoltorio de arriba).

   El tope de ancho es por los círculos de navegación, exactamente igual que en `galeria`: la
   caja comparativa sí llega a los 816 del panel, pero esta pieza cae más abajo (y=614..670) y
   ahí los círculos ya ocupan de x=1017 a 1166. Con 602 el borde derecho queda en 1000, 17px
   antes. Ojo: esta caja NO existe en el original —es el agregado de la 14.ª ronda—, así que el
   panel no dice dónde va; si algún día molesta, lo que sobra es la caja, no el tope. */
.normas-cierre {
  max-width: 602px;
  margin: 20px 0 0;
  padding: 16px 32px;
  border-radius: 10px 10px 26px 10px;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* El shape del título no está centrado en la caja: arranca 13px más a la derecha, así que su
   centro cae en 812,5 y no en 806. El relleno lo corre sin tocar el `text-align`. */
.normas-comparacion-titulo {
  margin: 0 0 18px;
  padding-left: 13px;
  color: var(--marca-primario);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* Los tres conceptos son shapes de ancho FIJO (256 cada uno) en posiciones medidas, no tercios
   de la caja: el relleno de 27 a la izquierda los deja arrancando en 425, y `space-between`
   reparte los 13px que sobran en los dos huecos, con lo que caen en 425 / 687,5 / 950. Con
   `flex: 1` y sangría propia quedaban 205px útiles y «Control operacional» quebraba en dos
   líneas, que además se salían de la caja gris por abajo. */
.normas-comparacion-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 27px;
}

.normas-comparacion-item {
  position: relative;
  flex: 0 0 256px;
  padding: 0;
  color: var(--marca-primario);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
}

/* El divisor entre columnas es un TRAZO PROPIO de 54px, no un borde: un `border-left` mide lo
   que mide el texto de al lado, así que con descripciones de largos distintos las tres líneas
   salían desparejas. En el original es siempre la misma línea, más alta que la letra y
   centrada en la caja. Sigue siendo el primario a media intensidad (rol, no hex suelto). */
/* El trazo cae en el MEDIO del hueco entre dos columnas (6,5px de ancho), no pegado al borde
   izquierdo del ítem: así el primero queda en x=681, que es donde lo pone el panel. El segundo
   queda 25px corto porque en el original está corrido a mano hacia adentro del shape vecino, y
   eso no se deriva de ninguna regla — se deja en su sitio geométrico. La intensidad sube a
   0,72 para igualar el trazo del original sobre el gris de la caja, siempre desde el rol. */
.normas-comparacion-item::before {
  content: '';
  position: absolute;
  left: -6.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 54px;
  background: rgba(var(--marca-primario-rgb), 0.72);
}
.normas-comparacion-item:first-child::before { display: none; }

/* Excepciones de la columna de título medidas en ESTA lámina: el paso entre las dos líneas del
   titular es de 59px, no de 75, y el isotipo deja 21px de aire hasta el antetítulo en vez de
   24. Acotadas al layout, porque las clases `.botones-*` de título las comparten cuatro
   láminas más donde el valor de la familia es el correcto. */
.layout-normas .botones-flecha-img { margin-bottom: 21px; }
.layout-normas .botones-titulo-fuerte { margin-top: 4px; }

.es-movil .layout-normas > .normas-columna {
  position: static;
  width: 100%;
  margin-top: var(--marca-esp-md);
}
.es-movil .normas-fila { height: auto; padding-top: 26px; }
.es-movil .normas-barra { position: static; padding: 10px var(--marca-esp-sm); justify-content: flex-start; border-radius: 10px; }
.es-movil .normas-chip { position: absolute; top: 0; transform: none; }
.es-movil .normas-comparacion-fila { flex-direction: column; gap: var(--marca-esp-sm); padding: 0; }
/* Apiladas, el divisor vertical no separa nada: se apaga y lo reemplaza una línea horizontal. */
.es-movil .normas-comparacion-item::before { display: none; }
/* En columna, un `flex-basis` de 256 deja de ser ancho y pasa a ser ALTO: hay que soltarlo o
   cada concepto ocupa una pantalla entera. */
.es-movil .normas-comparacion-item { flex: 0 0 auto; border-top: 1px solid rgba(var(--marca-primario-rgb), 0.35); padding-top: var(--marca-esp-sm); }
.es-movil .normas-comparacion-item:first-child { border-top: 0; }
/* Las coordenadas del panel y los altos fijos asumen el lienzo 1280×720 — en columna única
   todo vuelve al flujo, después de la lista, a ancho completo y con el alto del contenido. */
.es-movil .normas-envoltorio-tabla {
  position: static;
  width: 100%;
  margin-top: var(--marca-esp-md);
}
.es-movil .normas-comparacion { height: auto; }
.es-movil .normas-chip { height: auto; }

/* --------------------------------------------------------------- pregunta */

/* La lámina se compone como una columna centrada en el lienzo: márgenes izquierdo y derecho
   iguales, en vez del bloque pegado a la izquierda que dejaba 277px muertos a la derecha.
   El texto sigue alineado a la izquierda DENTRO de la columna — lo que se centra es el bloque,
   no los renglones.

   `--hueco-pregunta` es el ritmo vertical único de la lámina: separa las alternativas entre sí
   y también la última del botón, así todo queda distribuido con el mismo aire. Cambiarlo acá
   los mueve a todos a la vez. */
.layout-pregunta {
  --hueco-pregunta: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.layout-pregunta > .titulo-seccion,
.layout-pregunta > .pregunta-grupo {
  width: 100%;
  max-width: 940px;
}

.pregunta-grupo {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}

.pregunta-enunciado {
  padding: 0;
  margin: 0 0 var(--marca-esp-lg);
  font-size: var(--marca-cuerpo-lg);
  line-height: 1.4;
  font-weight: 400;
  color: var(--marca-texto);
}

.pregunta-opciones { display: grid; gap: var(--hueco-pregunta); margin: 0; }

/* El botón queda a la misma distancia de la última alternativa que las alternativas entre sí:
   ese es el «distribuido uniformemente». */
.pregunta-enviar {
  display: flex;
  margin: var(--hueco-pregunta) auto 0;
  min-width: 220px;
  justify-content: center;
}

.opcion {
  display: flex;
  align-items: center;
  gap: var(--marca-esp-sm);
  width: 100%;
  min-height: 56px;
  padding: var(--marca-esp-sm) var(--marca-esp-md);
  border: 2px solid var(--marca-borde);
  /* «15% de redondeo» sobre una caja de 940×64: el 15% literal daría 141px de radio horizontal
     y 9,6 vertical — una lonja, no una tarjeta. Se toma el 15% del ALTO, que es la dimensión
     que gobierna la forma de la esquina en una caja ancha. */
  border-radius: 10px;
  /* Tarjeta translúcida: deja ver la foto y baja el contraste con el fondo. Va sobre el
     FONDO y no como `opacity` del elemento, que también desvanecería el texto — y esta
     audiencia necesita legibilidad (§10, contraste AA).

     El 50% no es una preferencia estética sino el PISO medido: componiendo blanco sobre los
     píxeles reales de la foto en la franja de las alternativas, a 30% el 6,3% del área queda
     bajo el mínimo AA (peor caso 2,73:1) y a 50% no queda nada (peor caso 4,94:1). Bajarlo
     vuelve a romper el contraste sobre las zonas claras de la foto — ver §0ag. */
  background: color-mix(in srgb, var(--marca-blanco) 50%, transparent);
  font-family: inherit;
  font-size: var(--marca-cuerpo);
  line-height: 1.4;
  color: var(--marca-texto-fuerte);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--marca-mov-entrada) var(--marca-mov-curva),
              background var(--marca-mov-entrada) var(--marca-mov-curva);
}

.opcion:hover:not(:disabled) { border-color: var(--marca-terciario); background: var(--marca-fondo-alt); }
.opcion:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 2px; }
.opcion:disabled { cursor: default; }

/* Mientras corre el enunciado hablado, la pregunta se ve inerte — la misma regla que en
   acordeón, flipcards y clasificar. Era la única lámina interactiva sin ella: se podía
   responder mientras la voz todavía estaba leyendo la pregunta.
   El apagado va en una clase propia y no en `:disabled`, porque `disabled` también se usa
   DESPUÉS de responder, y ahí las alternativas tienen que seguir viéndose: hay que poder leer
   cuál se eligió y su marca de acierto o error. Son dos estados distintos con el mismo atributo.
   Baja el 45 % la caja entera, texto incluido: acá la alternativa tiene fondo propio, así que
   no hace falta el velo aparte que sí necesitó la pestaña transparente del acordeón. */
.opcion.es-apagada {
  cursor: default;
  opacity: 0.45;
  transition: opacity var(--marca-mov-entrada) var(--marca-mov-curva);
}

/* El botón de responder no se puede pulsar hasta elegir una alternativa, así que ya se ve
   inerte por su propio estado: no necesita apagado extra. Lo que sí se oculta es la pista de
   interacción mientras corre la instrucción. */
.pregunta-grupo.esperando-intro .opcion { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .opcion.es-apagada { transition: none; }
}

/* Radio circular (aro + punto), no un botón con letra A/B/C/D: así se ve en el original. */
.opcion-marca {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--marca-borde);
  background: var(--marca-blanco);
}

.opcion-marca::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
}

/* El selector va en el rol PRIMARIO y el rojo se mudó a los puntos de avance (más abajo).
   El rojo lo pidió Pablo para darle dinamismo a una lámina que es navy sobre foto lavada, pero
   en el selector chocaba con `.es-incorrecta`: el mismo color significaba «esta elegí» antes de
   responder y «esta estaba mal» después. Intercambiándolo con los puntos, la lámina conserva el
   acento rojo y el rojo vuelve a significar una sola cosa dentro del ejercicio. */
.opcion.elegida .opcion-marca { border-color: var(--marca-primario); }
.opcion.elegida .opcion-marca::after { background: var(--marca-primario); }

/* El color no es el único indicador del resultado: se añade un glifo al final de la fila,
   por accesibilidad (WCAG 1.4.1, no depender solo del color). */
.opcion-texto { flex: 1; }

.opcion.es-correcta,
.opcion.es-incorrecta { padding-right: var(--marca-esp-sm); }

.opcion.es-correcta::after,
.opcion.es-incorrecta::after {
  flex-shrink: 0;
  width: 32px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.opcion.es-correcta { border-color: var(--marca-correcto); background: color-mix(in srgb, var(--marca-correcto) 8%, white); }
.opcion.es-correcta .opcion-marca { border-color: var(--marca-correcto); }
.opcion.es-correcta .opcion-marca::after { background: var(--marca-correcto); }
.opcion.es-correcta::after { content: '✓'; color: var(--marca-correcto); }

.opcion.es-incorrecta { border-color: var(--marca-secundario); background: color-mix(in srgb, var(--marca-secundario) 8%, white); }
.opcion.es-incorrecta .opcion-marca { border-color: var(--marca-secundario); }
.opcion.es-incorrecta .opcion-marca::after { background: var(--marca-secundario); }
.opcion.es-incorrecta::after { content: '✕'; color: var(--marca-secundario); }

/* --------------------------------------------------------------- capa de feedback */

/* Modal centrado, sólido en verde o rojo según el resultado: se siente correcto o incorrecto
   de un vistazo, no solo por un detalle de color en el borde. */
.capa-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--marca-esp-lg);
  background: rgba(0, 0, 0, 0.55);
  z-index: 20;
}

.capa-feedback-tarjeta {
  width: min(560px, 100%);
  padding: var(--marca-esp-xl) var(--marca-esp-lg);
  border-radius: var(--marca-radio-md);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: aparecerModal 0.25s var(--marca-mov-curva) both;
}

@keyframes aparecerModal {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}

.capa-feedback.es-correcta .capa-feedback-tarjeta { background: var(--marca-correcto); }
.capa-feedback.es-incorrecta .capa-feedback-tarjeta { background: var(--marca-secundario); }

.capa-feedback-titulo {
  margin: 0 0 var(--marca-esp-sm);
  font-size: var(--marca-h1);
  font-weight: 700;
  color: var(--marca-blanco);
}

.capa-feedback-texto {
  margin: 0 0 var(--marca-esp-lg);
  font-size: var(--marca-cuerpo-lg);
  line-height: 1.5;
  color: var(--marca-blanco);
}

.capa-feedback-boton {
  background: var(--marca-blanco);
  color: var(--marca-texto-fuerte);
  border-color: transparent;
}

.capa-feedback-boton:hover { background: var(--marca-fondo-alt); }

/* Bloqueado mientras se narra el resultado: mismo tratamiento «apagada» que el resto de las
   piezas que esperan una narración antes de poder tocarse (acordeón, flipcards, clasificar).
   Sin audio generado todavía, `mostrarFeedback()` nunca aplica esta clase — el botón se ve
   como siempre (§0bh). */
.capa-feedback-boton.es-apagada { cursor: default; opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .capa-feedback-boton.es-apagada { transition: none; }
}

.es-movil .capa-feedback-tarjeta { padding: var(--marca-esp-lg) var(--marca-esp-md); }

/* --------------------------------------------------------------- puntos de avance */

.grupo-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--marca-esp-lg);
}

/* En la lámina de pregunta los puntos NO van en el flujo, entre las alternativas y el botón:
   ahí partían el bloque justo donde tiene que leerse seguido. Van anclados abajo a la
   izquierda, como indicador de avance del grupo de preguntas y no como parte del ejercicio.
   `clasificar` es la otra lámina que viene en grupo y comparte la regla: son el mismo indicador
   cumpliendo el mismo papel, y tenerlo en dos posiciones distintas según el ejercicio hacía que
   el alumno tuviera que buscarlo de nuevo en cada bloque. */
.layout-pregunta .grupo-dots,
.layout-clasificar .grupo-dots {
  position: absolute;
  left: 55px;
  bottom: 40px;
  margin: 0;
  justify-content: flex-start;
  /* Los puntos van directo sobre la foto, sin tarjeta debajo. El rojo corporativo contra el
     piso claro de esa esquina da 2,85:1 y el mínimo para un componente de interfaz es 3:1: no
     pasa por poco. El anillo blanco lo resuelve sin tocar el color de marca — el punto pasa a
     recortarse contra blanco (4,22:1) en vez de contra la foto. Vale para los tres estados,
     así que además el indicador deja de depender de qué foto tenga la lámina. */
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--marca-blanco) 85%, transparent);
}

.es-movil .layout-pregunta .grupo-dots,
.es-movil .layout-clasificar .grupo-dots {
  position: static;
  margin-top: var(--marca-esp-md);
  justify-content: center;
}

.grupo-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--marca-borde);
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva),
              transform var(--marca-mov-entrada) var(--marca-mov-curva);
}

.grupo-dot.visto { background: var(--marca-terciario); }
/* El punto activo lleva el rojo corporativo: es el acento de color de la lámina de pregunta.
   Estaba en el selector de alternativa y se intercambió con estos, porque allá el rojo chocaba
   con el estado «incorrecta» (ver el comentario de `.opcion.elegida`). Acá no compite con
   nada: los puntos son indicador de avance, fuera del ejercicio. */
.grupo-dot.activo { background: var(--marca-secundario); transform: scale(1.35); }

/* --------------------------------------------------------------- pantalla final */

.layout-final { display: grid; place-content: center; text-align: center; gap: var(--marca-esp-md); }

.final-titulo { margin: 0; font-size: var(--marca-h1); color: var(--marca-primario); }

.final-resumen {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px var(--marca-esp-md);
  justify-content: center;
  margin: 0;
  padding: var(--marca-esp-md) var(--marca-esp-lg);
  border-radius: var(--marca-radio-md);
  background: var(--marca-neutro);
}

.final-resumen dt { font-weight: 600; color: var(--marca-texto-fuerte); text-align: right; }
.final-resumen dd { margin: 0; color: var(--marca-texto); text-align: left; }

/* --- repaso de lo que se falló al primer intento (§0bc) ---
   La pantalla final estaba centrada y con poco contenido; el repaso es una LISTA de lectura, así
   que va alineada a la izquierda y con ancho de lectura acotado. Centrarla, como el resto de la
   pantalla, haría que cada línea empiece en un sitio distinto. */
.final-repaso-titulo {
  margin: var(--marca-esp-md) 0 0;
  font-size: var(--marca-h3);
  color: var(--marca-primario);
}

.final-repaso-intro { margin: 0; color: var(--marca-texto); }

/* El peor caso son las 8 interacciones del módulo falladas al primer intento, y es el que manda
   el diseño: con una columna a 760px solo entraban DOS en pantalla y las otras seis quedaban
   detrás de un scroll interno. Para esta audiencia eso es lo peor posible — el refuerzo que más
   falta hace es el que no se ve (§0bd).

   Con 5 o más pasa a DOS columnas y a todo el ancho útil del lienzo. El reparto lo decide el
   layout, que sabe cuántas hay; el CSS solo lo aplica. */
.final-repaso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--columnas-repaso, 1), minmax(0, 1fr));
  gap: 10px;
  width: min(1168px, 100%);
  text-align: left;
  justify-self: center;
  font-size: 15px;
  /* El scroll queda como última red, no como el caso normal: con dos columnas las 8 entran.
     360 es lo que necesitan las 8 del peor caso medido, con el encabezado ya compactado. */
  max-height: 360px;
  overflow-y: auto;
}

/* Con una sola columna no hace falta todo el ancho: una línea de 1168px es incómoda de leer. */
.final-repaso:not([style*="--columnas-repaso: 2"]) { width: min(760px, 100%); }

.final-repaso li {
  padding: 8px var(--marca-esp-sm);
  border-radius: var(--marca-radio-md);
  background: var(--marca-neutro);
  /* Filete en el rol secundario: marca que ESTO es lo que hay que mirar, sin pintar de rojo un
     bloque entero que además lleva la respuesta correcta. */
  border-left: 4px solid var(--marca-secundario);
}

.final-repaso-pregunta {
  margin: 0 0 2px;
  font-weight: 600;
  color: var(--marca-texto-fuerte);
  line-height: 1.3;
}

.final-repaso-respuesta { margin: 0; color: var(--marca-texto); line-height: 1.3; }
.final-repaso-respuesta strong { color: var(--marca-primario); }

/* Con la lista larga, el encabezado de la pantalla tiene que ocupar menos: es la misma cantidad
   de píxeles repartida entre lo que informa y lo que enseña, y lo segundo importa más.
   El `max-height` de la lista no alcanza para ganar espacio —está limitada por lo que sobra en
   el lienzo, no por su tope—, así que hay que recortar arriba (§0bd). */
.layout-final.tiene-repaso { gap: var(--marca-esp-sm); }
.layout-final.tiene-repaso .final-titulo { font-size: var(--marca-h2); }
.layout-final.tiene-repaso .final-resumen { padding: var(--marca-esp-sm) var(--marca-esp-lg); }
.layout-final.tiene-repaso .final-repaso-titulo { margin-top: var(--marca-esp-xs); font-size: var(--marca-cuerpo-lg); }

.es-movil .final-repaso {
  max-height: none;
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------- objetivos (franja de columnas) */

/* Medidas exactas del panel de Storyline sobre el lienzo 1280×720. */
.layout-objetivos { padding: 0; }

.layout-objetivos > .titulo-seccion {
  position: absolute;
  left: 81px;
  top: 100px;
  width: 585px;
  height: 77px;
  margin: 0;
  overflow: hidden;
  font-size: var(--tam-obj-titulo, var(--marca-h2));
}

.objetivos-intro {
  position: absolute;
  left: 87px;
  top: 178px;
  width: 1178px;
  height: 142px;
  margin: 0;
  max-width: none;
  overflow: hidden;
  font-size: var(--tam-obj-intro, var(--marca-cuerpo));
  color: var(--marca-texto-fuerte);
}

/* Rejilla 2×2 con las medidas exactas. Storyline dio una sola celda —546×174 en (81,320)—
   y el resto se derivó por simetría: con 26px de hueco, los márgenes laterales dan 81 a
   ambos lados (81+546+26+546+81 = 1280) y el hueco vertical coincide con el margen inferior
   (320+174+26+174 = 694, y 720−694 = 26). Que las dos cuentas cierren solas confirma que el
   hueco es ése y no otro.
   El número va siempre hacia el centro del lienzo (`--izq` lo pone a la derecha del texto y
   `--der` a la izquierda), así los cuatro numerales forman el bloque navy del original. */
.objetivos-rejilla {
  position: absolute;
  left: 81px;
  top: 320px;
  width: 1118px;
  height: 374px;
  max-width: none;
  display: grid;
  grid-template-columns: 546px 546px;
  grid-template-rows: 174px 174px;
  gap: 26px;
}

/* Número y texto son un solo bloque: se ocultan, se revelan y se desplazan juntos — no un
   rectángulo azul fijo desde el inicio con el texto apareciendo por separado. Caja blanca
   translúcida detrás de cada objetivo completo, para que se destaque del fondo sin taparlo —
   así estaba en el Storyline original. */
.objetivo-bloque {
  display: flex;
  align-items: stretch;
  gap: var(--marca-esp-md);
  padding: var(--marca-esp-sm);
  border-radius: var(--marca-radio-md);
  background: rgba(255, 255, 255, 0.7);
}

/* El texto ocupa todo el espacio que le sobra al número (flex:1), en vez de encogerse a su
   contenido y empujarse con justify-content: eso hacía que el texto corto (ítem 1) y el
   texto largo (ítem 3) arrancaran en columnas X distintas, sin verse alineados entre sí. */

/* El número llega a los bordes de la caja en su lado largo: cancela con márgenes negativos
   el padding que sí conserva el texto, así ocupa el alto completo de la tarjeta. */
.objetivo-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 74px;
  margin-top: calc(-1 * var(--marca-esp-sm));
  margin-bottom: calc(-1 * var(--marca-esp-sm));
  background: var(--marca-primario);
  color: var(--marca-blanco);
  font-size: 32px;
  font-weight: 700;
  border-radius: 2px;
}

/* Ícono real (extraído del SCORM publicado, no generado) en vez del numeral — es blanco
   sobre transparente, igual tratamiento de color que el número al que reemplaza. */
.objetivo-icono { width: 34px; height: 34px; object-fit: contain; }

.objetivo-texto-col { display: flex; align-items: center; flex: 1; min-width: 0; }

/* Cada bloque entra desde su propio lado, número y texto juntos: 1 y 3 llegan desde la
   izquierda, 2 y 4 desde la derecha. */
.es-entrando.objetivo-bloque--izq { animation-name: entrarDesdeIzquierda; }
.es-entrando.objetivo-bloque--der { animation-name: entrarDesdeDerecha; }

@keyframes entrarDesdeIzquierda {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes entrarDesdeDerecha {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}
.objetivo-texto {
  margin: 0;
  font-size: var(--tam-obj-item, var(--marca-cuerpo));
  color: var(--marca-texto-fuerte);
}

/* Las medidas exactas valen para el lienzo de escritorio; en móvil todo vuelve a fluir. */
.es-movil .layout-objetivos { padding: var(--marca-esp-lg) var(--marca-esp-md); display: flex; flex-direction: column; }

.es-movil .layout-objetivos > .titulo-seccion,
.es-movil .objetivos-intro,
.es-movil .objetivos-rejilla {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

.es-movil .layout-objetivos > .titulo-seccion { font-size: var(--marca-h2); margin: 0 0 var(--marca-esp-sm); }
.es-movil .objetivos-intro { font-size: var(--marca-cuerpo); margin: 0 0 var(--marca-esp-lg); }

.es-movil .objetivos-rejilla {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: var(--marca-esp-md);
  text-align: center;
}

.es-movil .objetivo-texto { font-size: var(--marca-cuerpo); }

.es-movil .objetivo-bloque,
.es-movil .objetivo-bloque--izq,
.es-movil .objetivo-bloque--der { flex-direction: column; justify-content: center; }
.es-movil .objetivo-numero { width: 100%; height: 56px; margin: 0; }

/* --------------------------------------------------------------- texto (título + párrafo) */

/* Mismo patrón que portada/cierre: panel claro a un lado (título navy, cuerpo gris) + foto al
   otro + las dos franjas diagonales. Medidas exactas del panel «Tamaño y posición» de
   Storyline sobre el lienzo 1280×720, transcritas en px tal cual (mismo criterio que portada).

   Vertical: título 131→342, caja de texto 359→676, margen inferior 44px.
   Horizontal: título en x=55 y caja en x=63 — los 8px de diferencia son del propio panel de
   Storyline, no un error de transcripción (en `objetivos` pasa lo mismo entre título e intro). */
.layout-contenido { position: relative; }

.layout-contenido .contenido-titulo,
.layout-contenido .contenido-caja {
  position: absolute;
  z-index: 1;
}

/* El título usa el cuerpo de h1, no el h2 que trae `.titulo-seccion` por defecto: la caja es
   la misma 585×211 de `descripcion` y con interlineado 1,5 (§0o) entran exactamente 3 líneas
   de 66px. Alto fijo + `ajustarAlaCaja()`: un título más largo encoge en vez de desbordar. */
/* Isotipo del cliente sobre el título — pedido de Pablo (2026-08-12), lo notó ausente
   comparando contra el resto de la familia. Tamaño reducido frente a columnaTitulo (34px):
   el hueco real entre la banda de cromo (termina en y=78) y el título (top:131) mide 53px,
   contra los ~95px que tiene columnaTitulo — verificado con valores computados. */
.contenido-flecha {
  position: absolute;
  left: 55px;
  top: 83px;
  width: 20px;
  height: auto;
}
.layout-contenido--espejo .contenido-flecha { left: 640px; }

.layout-contenido .contenido-titulo {
  left: 55px;
  top: 131px;
  width: 585px;
  height: 211px;
  margin: 0;
  overflow: hidden;
  font-size: var(--tam-contenido-titulo, var(--marca-h1));
  line-height: 1.5;
  color: var(--marca-primario);
}

/* La caja medida contiene los párrafos Y la frase de fuerza — en Storyline son un solo cuadro
   de texto. Acá se reparte en dos sub-cajas porque cada mitad se comporta distinto:
     · cuerpo (201px): alto fijo, la letra encoge si el guion trae texto largo.
     · cierre: anclado al fondo de la caja, SIN encoger. Le quedan 96px, que es lo que ocupan
       2 líneas de --marca-h3 con su relleno; el presupuesto de `cajas.js` lo garantiza y el
       compilador falla si se pasa.
   Anclar uno arriba y otro abajo deja la composición estable por los dos extremos: lo único
   que varía es el hueco del medio. */
.contenido-caja {
  left: 63px;
  top: 359px;
  width: 532px;
  height: 317px;
}

.contenido-cuerpo {
  height: 201px;
  overflow: hidden;
  font-size: var(--tam-contenido-cuerpo, var(--marca-cuerpo-lg));
}

/* Los párrafos HEREDAN el tamaño del contenedor. Sin esto, `.texto-lg` les fija 22px propios y
   el auto-ajuste queda mudo: `ajustarAlaCaja()` encoge el contenedor de 22 a 14px, los <p> no
   se enteran, el `scrollHeight` no baja un píxel y el texto se corta igual. La función se
   dispara, gira sus ocho vueltas y no hace nada — que es peor que no llamarla, porque se ve
   idéntico a que no hiciera falta. `descripcion` ya lo tenía resuelto así desde siempre. */
.contenido-cuerpo .texto { font-size: inherit; }

/* Frase de fuerza: bloque sólido en el rol secundario con letra blanca, no texto rojo suelto.
   Rima visualmente con el rectángulo rojo de `descripcion` — en todo el curso, «bloque rojo»
   significa «esto es lo que te tienes que llevar». El ancho se ajusta al contenido para que
   siga leyéndose como un acento y no como un fondo dominante (el manual pide usar los
   secundarios «en su justa medida»), y el cuerpo es mayor que el del párrafo porque es lo que
   el alumno tiene que llevarse: si pesara igual que el cuerpo, no destacaría nada. */
.contenido-cierre {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  margin: 0;
  padding: 0.5em 0.75em;
  border-radius: var(--marca-radio-sm);
  /* Bloque de énfasis: `--marca-destacado`, que por defecto ES el secundario. Se separó del
     acento porque no son la misma pregunta — ver el comentario en tokens-css.js. */
  background: var(--marca-destacado);
  color: var(--marca-destacado-texto);
  font-size: var(--marca-h3);
  font-weight: 700;
  line-height: 1.3;
}

/* Dentro del bloque rojo, un `[[término]]` resaltado no puede volver a pintarse de rojo. */
/* El resaltado va DENTRO de la caja de idea de fuerza, así que su fondo es el secundario:
   hereda el mismo color de texto que la caja, no el de «sobre primario». */
.contenido-cierre mark.resaltado { color: var(--marca-destacado-texto); text-decoration: underline; }

/* Variante `--flujo`: la idea de fuerza queda en MEDIO del texto (párrafo, caja, párrafo),
   no anclada abajo — pedido de Pablo, 2026-08-12 («Principio rector»). Las dos sub-cajas de
   alto fijo se sueltan: todo pasa a flujo normal, uno debajo del otro, alto según contenido.
   El resto de la anulación para el modo `cromo:lamina` + espejo está más abajo, DESPUÉS de
   la regla de 263px que ese modo aplica — con especificidad igual (mismos 3 selectores de
   ancestro), gana la que viene última en el archivo, así que no puede ir acá arriba. */
/* Sube de 359 a 230: el título reserva una caja de 211px por el auto-ajuste de letra (§0z),
   pero el TEXTO real de un título de una línea termina en ~190 — 169px de aire que nadie usa.
   Pablo lo pidió expresamente («colocar el párrafo más arriba, cercano al título») y de paso
   es lo que le da lugar al remate sin pisar los círculos de navegación (ver más abajo). */
.contenido-caja--flujo { top: 220px; height: auto; }
.contenido-caja--flujo .contenido-cuerpo { height: auto; overflow: visible; }
.contenido-caja--flujo .contenido-cierre { position: static; margin: var(--marca-esp-md) 0; }
.contenido-remate { margin: 0; }

/* Espejo: la segunda lámina de contenido (y la cuarta, y la sexta…) se da vuelta para que dos
   seguidas no se vean iguales. Se refleja TODO el eje horizontal —panel, degradado del velo y
   las dos franjas— porque dar vuelta solo el texto dejaría el panel claro encima de la foto.
   Las coordenadas espejadas salen de `1280 − x − ancho`, no de un `scaleX(-1)` sobre el
   lienzo: un `scaleX` también daría vuelta las letras. */
.layout-contenido--espejo .contenido-titulo { left: 640px; }   /* 1280 − 55 − 585 */
.layout-contenido--espejo .contenido-caja   { left: 685px; }   /* 1280 − 63 − 532 */

/* En modo `cromo:lamina` la navegación son dos círculos flotantes abajo a
   la derecha (x:1118-1240, y:642-696 medido) — el panel espejado (685-1217) los tapa a menos
   que la caja termine antes. Pablo lo notó: la esquina inferior derecha del bloque naranjo
   quedaba detrás de los círculos (2026-08-12). La caja se acorta 54px (317→263, termina en
   622 en vez de 676, 20px de aire sobre el círculo).
   El reparto interno de esos 263px NO es el mismo que el de la caja base (201/96): Pablo
   pidió que la idea de fuerza («CERO INGRESO…») sea la frase larga y quede destacada
   completa, así que `cierre` se lleva más (118px, 3 líneas — medido por búsqueda binaria,
   entran hasta 125 caracteres, ver `cajas.js` → `cierreEspejoLamina`) y `cuerpo` cede el
   resto (125px, tiene auto-ajuste de letra — `cierre` no lo tiene, tope duro §0z). */
.es-cromo-lamina .layout-contenido--espejo .contenido-caja { height: 263px; }
.es-cromo-lamina .layout-contenido--espejo .contenido-cuerpo { height: 125px; }
/* En móvil no hay círculos flotantes que esquivar (el reflow ya cae en columna): el reset de
   abajo (`.es-movil .contenido-caja/-cuerpo { height:auto }`) tiene MENOS especificidad que
   las dos reglas de arriba, así que sin este empate explícito el recorte ganaba igual en
   móvil. `es-movil` vive en `.app` y `es-cromo-lamina` en `.motor` (un descendiente) — dos
   clases en selectores DISTINTOS, no un compuesto en el mismo elemento. */
.es-movil .es-cromo-lamina .layout-contenido--espejo .contenido-caja,
.es-movil .es-cromo-lamina .layout-contenido--espejo .contenido-cuerpo { height: auto; }

/* `--flujo` (contenido.remate) vs. el recorte de 263/125px de arriba: mismos 3 selectores de
   ancestro en los dos, especificidad empatada — como ESTA regla viene DESPUÉS en el archivo,
   gana ella. El reparto fijo de esa lámina no aplica cuando la caja pasa a flujo normal. */
.es-cromo-lamina .layout-contenido--espejo .contenido-caja--flujo { height: auto; }
.es-cromo-lamina .layout-contenido--espejo .contenido-caja--flujo .contenido-cuerpo { height: auto; }

/* ---- `contenido` dentro de la familia con cromo de lámina.
   Todo lo de acá abajo va acotado a `.es-cromo-lamina`: un cliente sin familia visual propia
   no toca ni una de estas reglas. */

/* El título en dos pesos, igual que el resto de la familia — pero con la proporción del
   original (37,33/32) escalada a la caja de 585px del panel, que es más ancha que la columna
   de 290. Los spans los emite el layout cuando el guion declara `antetitulo`: si no lo trae,
   el título sigue saliendo entero como hasta ahora. */
.es-cromo-lamina .contenido-antetitulo {
  display: block;
  font-size: 44px;
  font-weight: 700;
}
.es-cromo-lamina .contenido-titulo-fino {
  display: block;
  font-size: 38px;
  font-weight: 400;
}

/* La flecha pisaba la insignia del cromo: en (55,83) 20×40 se metía 10×9px dentro del círculo
   (65-126 × 31-92). Es el mismo hallazgo de la 21.ª ronda en `portada` y `cierre` — la caja
   del PNG ES el dibujo, así que no hay margen invisible que la salve.

   El hueco real es de 45px: la insignia termina en y=92 y la TINTA del título empieza en 137
   (medida con un Range sobre el nodo, no con la caja de 211px que reserva el auto-ajuste).
   Ahí no entra un isotipo del porte del de `columnaTitulo` —61px de alto se comen 24 de la
   primera línea del titular—, así que la pieza se queda en su tamaño chico y lo que se corrige
   es la posición: 96..137 deja 4px de aire bajo la insignia y llega justo al título.
   El `height` va explícito porque el `auto` lo deducía de la relación de aspecto del PNG, que
   no es la del dibujo colocado. La proporción se conserva (20/41 contra 30/61). */
.es-cromo-lamina .contenido-flecha {
  top: 96px;
  width: 20px;
  height: 41px;
}

/* Interlínea del original. `contenido` hereda 1,5 de la hoja base; acá la columna es ancha
   (532px) y el texto respira distinto. */
.es-cromo-lamina .contenido-cuerpo p { line-height: 1.64; }

/* La caja de idea de fuerza toma la geometría diagonal que la familia ya fijó para ese rol —
   la misma de `galeria-cierre` y `normas-cierre`— en vez del radio parejo de la composición
   base. */
.es-cromo-lamina .contenido-cierre { border-radius: 10px 10px 26px 10px; }

/* En móvil la flecha vuelve al flujo y no hay insignia que esquivar (el cromo no se dibuja).
   `es-movil` vive en `.app` y `es-cromo-lamina` en `.motor`: selector DESCENDIENTE, nunca
   compuesto — es la trampa que ya cobró tres veces. */
.es-movil .es-cromo-lamina .contenido-flecha { width: 20px; height: auto; }

/* ================================================================================
   `contenido` — las dos VARIANTES de composición de la familia con cromo de lámina.

   Las dos se eligen desde el guion (`contenido.forma`) y ninguna reemplaza a la retícula base:
   una lámina que no declara `forma` se ve exactamente igual que antes, dentro y fuera de la
   familia. Van todas acotadas a `.es-cromo-lamina` + la clase de la variante, o sea tres
   clases de ancestro, y quedan DESPUÉS de las reglas de espejo con la misma especificidad
   (`.es-cromo-lamina .layout-contenido--espejo .contenido-caja`, más arriba en este archivo) a
   propósito: con el empate, gana la última escrita. No mover este bloque hacia arriba.
   ================================================================================ */

/* Ni velo ni cuñas: el layout ya deja de emitirlos en toda la familia, y esto es la red por si
   alguna vez volvieran por otro camino. El fondo de estas láminas es un asset del cliente que
   ya trae su degradado horneado. */
.layout-contenido--lista .portada-velo,
.layout-contenido--lista .portada-diagonal,
.layout-contenido--caja .portada-velo,
.layout-contenido--caja .portada-diagonal { display: none; }

/* ---------------------------------------------------------------- `forma: lista`

   Columna de texto en la mitad derecha del lienzo, con las viñetas colgadas, y el título abajo
   a la izquierda. El fondo es la foto con el degradado ya horneado, a lienzo completo. */

/* La columna arranca en x=399 —la misma retícula que el resto de la familia— y termina en 751:
   ese es el margen contra el que justifica el texto. Alto libre: los cuatro bloques mandan. */
.es-cromo-lamina .layout-contenido--lista .contenido-caja {
  left: 399px;
  /* 153 → 161: medidas las bandas de tinta de las dos capturas fila por fila, la columna
     entera estaba 8 px más arriba que la del original, con la interlínea ya correcta (las
     cuatro bandas separadas por la misma distancia en las dos). Un bloque bien compuesto y
     mal ubicado: se corrige el ancla, no el reparto interno. */
  top: 161px;
  width: 352px;
  height: auto;
}

.es-cromo-lamina .layout-contenido--lista .contenido-cuerpo {
  height: auto;
  overflow: visible;
  font-size: 24px;
}

/* Sangría francesa: la viñeta cuelga en x=409 y el texto arranca en 425,4, también en la
   primera línea. La interlínea va en píxeles porque así viene medida entre líneas base
   consecutivas del original (29,232), no como un múltiplo del cuerpo. */
.es-cromo-lamina .layout-contenido--lista .contenido-cuerpo p {
  position: relative;
  margin: 0 0 var(--lista-hueco, 32px);
  padding-left: 26.4px;
  line-height: 29.232px;
  text-align: justify;
}

.es-cromo-lamina .layout-contenido--lista .contenido-cuerpo p::before {
  content: '\2022';
  position: absolute;
  left: 10px;
  top: 0;
  /* La familia del carácter de viñeta la declara el original, y no es la corporativa. */
  font-family: Arial, sans-serif;
}

/* El primer bloque es la línea de entrada, no un ítem de la lista: sin viñeta, sin sangría y
   con un hueco mayor hasta la primera. */
.es-cromo-lamina .layout-contenido--lista .contenido-cuerpo p:first-child {
  margin-bottom: var(--lista-hueco-intro, 57px);
  padding-left: 10px;
}
.es-cromo-lamina .layout-contenido--lista .contenido-cuerpo p:first-child::before { content: none; }
.es-cromo-lamina .layout-contenido--lista .contenido-cuerpo p:last-child { margin-bottom: 0; }

/* La idea de fuerza en `forma: lista` va en FLUJO, debajo del último ítem, y no anclada al pie
   de la caja. La caja de esta variante tiene alto automático, así que el anclaje `bottom: 0`
   la dejaba encima del propio texto: el último ítem quedaba tapado y el anterior, cortado.
   El hueco es el que mide el original entre el final de la última viñeta y el borde de la
   caja (53px). */
.es-cromo-lamina .layout-contenido--lista .contenido-cierre {
  position: static;
  margin: var(--lista-hueco-cierre, 53px) 0 0;
  max-width: none;
}

/* ---------- `pastilla: primario` — la idea de fuerza como bloque NAVY de ancho completo.
   No es un color nuevo ni una caja nueva: es el mismo bloque con el otro rol de marca, que es
   como lo pinta el material del cliente en esta lámina. Ancho completo de la columna, texto
   centrado en las dos direcciones y radio parejo —acá el original no usa la geometría diagonal
   que sí usa la caja naranja—. */
/* Selector DESCENDIENTE y no compuesto: `es-cromo-lamina` vive en `.motor` y
   `es-pastilla-primario` en el `<section>` del layout, que es su descendiente. Escrito junto
   no casa con nada, y la caja se queda naranja sin que nada falle — es la cuarta vez que esta
   trampa cobra en este archivo. */
.es-cromo-lamina .es-pastilla-primario .contenido-cierre {
  /* El ancho por defecto es el de la columna de texto, pero el original le da a esta caja su
     propia medida —338 contra los 328 de la columna—, así que el guion la puede declarar. Un
     juez a ciegas marcó justamente esos 9px como el delator de la lámina. */
  width: var(--cierre-ancho, 100%);
  box-sizing: border-box;
  /* 24px = los 18 pt del original × 4/3, con la misma interlínea del cuerpo. Heredaba
     `--marca-h3`, que es mayor, y con eso el texto entraba en TRES líneas donde el original
     usa dos: la caja crecía 13px y el bloque entero se leía más pesado. Es el error de los
     puntos leídos como píxeles, del otro lado. */
  padding: 25px 10px;
  /* 18px parejo, EXTRAÍDO del path del original (`commandset-137`, 338×108). Los 10 que había
     acá eran una lectura de la captura, y un juez a ciegas los midió como delator. */
  border-radius: 18px;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  font-size: 24px;
  line-height: 29.232px;
  text-align: center;
}
.es-cromo-lamina .es-pastilla-primario .contenido-cierre mark.resaltado {
  color: inherit;
  text-decoration: none;
}

/* Título en la columna izquierda, mucho más abajo que en la retícula base (la tinta empieza en
   ~292) y con los dos cuerpos de la familia. La caja de 120 alcanza para las dos líneas, así
   que el auto-ajuste sigue disponible sin encoger nada. */
.es-cromo-lamina .layout-contenido--lista .contenido-titulo {
  left: 119px;
  /* 278 → 288: la tinta de «Peligro» arrancaba en 276 de captura contra 286 del original. */
  top: 288px;
  width: 262px;
  height: 120px;
}
.es-cromo-lamina .layout-contenido--lista .contenido-antetitulo {
  font-size: 49.778px;
  line-height: 1;
}
.es-cromo-lamina .layout-contenido--lista .contenido-titulo-fino {
  font-size: 42.667px;
  line-height: 1.39;
  /* El aire entre las dos líneas del título salía 7 px menor que en el original. Va como
     margen y no como interlínea: la interlínea reparte el aire ARRIBA Y ABAJO de la línea, así
     que para bajar la tinta 7 px habría que agregar 14, y de paso se estiraría la caja por
     debajo sin que nadie lo pida. */
  margin-top: 7.2px;
}

/* Con el título en y=278 ya no hay insignia que esquivar (termina en 92), que era el motivo por
   el que esta pieza se había encogido a 20×41. Vuelve a su tamaño real, coronando el bloque. */
.es-cromo-lamina .layout-contenido--lista .contenido-flecha {
  left: 109px;
  top: 195px;
  width: 35px;
  height: 71px;
}

/* ---------------------------------------------------------------- `forma: caja`

   Todo el texto dentro de UNA caja translúcida de borde fino, sobre un fondo desvaído a lienzo
   completo. Es el mismo shape que `objetivos` con `forma: tarjeta`: blanco a 80 %, borde de
   1px en el rol secundario, radio 20. */
.es-cromo-lamina .layout-contenido--caja .contenido-caja {
  left: 399px;
  top: 124px;
  width: 815px;
  height: 470px;
  box-sizing: border-box;
  border: 1px solid var(--marca-secundario);
  border-radius: 20px;
  background: var(--marca-blanco);
  background: color-mix(in srgb, var(--marca-blanco) 80%, transparent);
}

/* El fondo de esta lámina no es una foto a sangre sino un asset lavado que arranca 9px abajo y
   mide 1280×711; el resto del lienzo es blanco. Por eso no va `cover`, que lo recortaría. */
.es-cromo-lamina .layout-contenido--caja {
  background-color: var(--marca-blanco);
  background-position: 0 9px;
  background-size: 1280px 711px;
  background-repeat: no-repeat;
}

/* Los tres bloques van en posiciones ABSOLUTAS dentro de la caja: los huecos del original son
   desiguales (52px entre la entrada y la idea de fuerza, 165 entre ésta y el remate) y no
   salen de apilar con márgenes parejos. Los anchos útiles también difieren entre bloques. */
.es-cromo-lamina .layout-contenido--caja .contenido-cuerpo {
  position: absolute;
  left: 37px;
  /* 92 y no 94: la primera línea de tinta salía 2 px más abajo que la del original (220 contra
     218). Los 2 px son el corrimiento entre el borde de la caja de línea y donde empieza el
     trazo, que depende de las métricas de la tipografía y no del número declarado. */
  top: 92px;
  width: 715px;
  height: auto;
  overflow: visible;
  font-size: 24px;
  font-weight: 700;
}
.es-cromo-lamina .layout-contenido--caja .contenido-cuerpo p { line-height: 1.3; }

/* Acá la idea de fuerza NO es un bloque de color con letra blanca: es texto del rol secundario
   sobre la caja clara, con la primera frase grande y subrayada y el resto en un cuerpo menor.
   Se apaga todo lo que la convertía en caja —fondo, relleno, radio— y se anula el anclaje al
   pie que trae la composición base. */
.es-cromo-lamina .layout-contenido--caja .contenido-cierre {
  position: absolute;
  left: 37px;
  /* 143 y no 146: el bloque salía 3 px más abajo que el del original, y con él el remate que
     lo sigue (medido: 319 contra 316, y 434 contra 430 al final del bloque). */
  top: 143px;
  bottom: auto;
  width: 739px;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--marca-secundario);
  font-size: 42.67px;
  font-weight: 700;
  line-height: 1.25;
  text-align: justify;
}
.es-cromo-lamina .layout-contenido--caja .contenido-cierre-lead {
  font-size: 42.67px;
  text-decoration: underline;
}
.es-cromo-lamina .layout-contenido--caja .contenido-cierre-resto {
  display: block;
  font-size: 26.67px;
  text-decoration: none;
}
/* Sin fondo de color detrás, un `[[término]]` resaltado se pinta del mismo secundario que ya
   tiene el bloque entero: hereda y listo. */
.es-cromo-lamina .layout-contenido--caja .contenido-cierre mark.resaltado {
  color: inherit;
  text-decoration: none;
}

.es-cromo-lamina .layout-contenido--caja .contenido-remate {
  position: absolute;
  left: 37px;
  /* 307 y no 311: la línea salía 4 px más abajo que la del original (434 contra 430). */
  top: 307px;
  width: 715px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* Título en la columna izquierda, fuera de la caja: las dos piezas dejan de tocarse y el
   solape que había entre el titular y el primer párrafo desaparece por composición, no por un
   ajuste de altura. Alto libre, así que el auto-ajuste no tiene nada que recortar. */
/* Las tres medidas de abajo salieron del juicio a ciegas y están leídas del panel de posición
   del original: la primera base del título cae en y=328 y la segunda en 387, o sea 59,3px de
   salto. El bloque estaba 6px más arriba y 6px más apretado —un juez lo midió al píxel, 18
   contra 24 de aire entre las dos palabras—, así que se descolgaba de la flecha y se leía como
   un lockup rearmado. El interlineado pasa al paso simple de la tipografía corporativa (1,218
   = 0,92 de ascendente + 0,298 de descendente) y el aire que falta va como margen entre las dos
   líneas: así, si alguna vez el antetítulo envuelve, su quiebre interno queda parejo en vez de
   heredar el salto entre bloques. */
.es-cromo-lamina .layout-contenido--caja .contenido-titulo {
  /* 119 y no 109: la caja del original está en x=109 pero su texto lleva el inset de 10 px,
     así que la TINTA nace en 119 —medida en las dos líneas: 119 y 120—. La variante de lista
     ya lo tenía; esta se había quedado con el borde de la caja. */
  left: 119px;
  top: 283px;
  width: 232px;
  height: auto;
  overflow: visible;
}
.es-cromo-lamina .layout-contenido--caja .contenido-antetitulo {
  font-size: 49.78px;
  line-height: 1.218;
}
.es-cromo-lamina .layout-contenido--caja .contenido-titulo-fino {
  margin-top: 5.3px;
  font-size: 42.67px;
  line-height: 1.218;
  font-weight: 400;
}

/* Mismo caso que en `lista`: con el título en y=277 la insignia (que termina en 92) deja de
   estar en el camino y el isotipo vuelve a su tamaño real. */
.es-cromo-lamina .layout-contenido--caja .contenido-flecha {
  left: 110px;
  top: 196px;
  width: 32px;
  height: 65px;
}

.layout-contenido--espejo .portada-velo {
  background: linear-gradient(260deg, var(--marca-fondo) 0%, var(--marca-fondo) 36%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 58%);
}

.layout-contenido--espejo .portada-diagonal { transform: rotate(45deg); }
.layout-contenido--espejo .portada-diagonal--gris { left: auto; right: -216px; }
.layout-contenido--espejo .portada-diagonal--rojo { left: auto; right: 646px; }

/* El `@keyframes` compartido fija `rotate(315deg)` en ambos fotogramas, así que en espejo hay
   que reescribirlo con el ángulo reflejado o la franja gira al terminar la animación. */
.layout-contenido--espejo .portada-diagonal { animation-name: flotarDiagonalEspejo; }

@keyframes flotarDiagonalEspejo {
  from { opacity: 0; transform: translateY(50px) rotate(45deg); }
  to   { opacity: var(--op-diagonal, 1); transform: rotate(45deg); }
}

/* En móvil las coordenadas exactas no aplican: todo vuelve a fluir en una columna, y el
   espejo deja de tener sentido porque no hay dos lados que alternar. */
.es-movil .layout-contenido {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--marca-esp-lg);
}

.es-movil .contenido-flecha { position: static; width: 20px; margin-bottom: var(--marca-esp-xs); }

.es-movil .layout-contenido .contenido-titulo,
.es-movil .layout-contenido .contenido-caja {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  font-size: var(--marca-h2);
}

.es-movil .contenido-cuerpo { height: auto; font-size: var(--marca-cuerpo-lg); }

.es-movil .contenido-cierre {
  position: static;
  display: inline-block;
  margin-top: var(--marca-esp-md);
  font-size: var(--marca-cuerpo-lg);
}

/* Las dos variantes de la familia en columna única. Los resets generales de arriba no alcanzan:
   sus selectores tienen dos clases y los de las variantes tres, así que hay que repetirlos con
   la variante adentro. Y van como selector DESCENDIENTE (`es-movil` vive en `.app` y
   `es-cromo-lamina` en `.motor`, que es un descendiente), nunca como compuesto — es la trampa
   de especificidad que ya cobró tres veces en este archivo. */
.es-movil .es-cromo-lamina .layout-contenido--lista .contenido-caja,
.es-movil .es-cromo-lamina .layout-contenido--lista .contenido-titulo,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-caja,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-titulo,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-cuerpo,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-cierre,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-remate {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
}

/* En columna, la caja translúcida deja de ser una pieza en coordenadas y pasa a ser un panel:
   conserva el borde y el relleno, y lo que se suelta son las medidas del lienzo. */
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-caja { padding: var(--marca-esp-md); }
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-cierre,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-cierre-lead {
  font-size: var(--marca-h3);
}
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-cierre-resto { font-size: var(--marca-cuerpo-lg); }
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-cuerpo,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-remate,
.es-movil .es-cromo-lamina .layout-contenido--lista .contenido-cuerpo { font-size: var(--marca-cuerpo-lg); }

/* Los dos cuerpos del título vuelven a la escala de pantalla chica: los de la variante son
   medidas del lienzo (49,8 y 42,7) y en 375px de ancho no entra ni la primera línea. */
.es-movil .es-cromo-lamina .layout-contenido--lista .contenido-antetitulo,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-antetitulo { font-size: var(--marca-h2); }
.es-movil .es-cromo-lamina .layout-contenido--lista .contenido-titulo-fino,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-titulo-fino { font-size: var(--marca-h3); }

/* El encaje del fondo está medido contra el lienzo de 1280: en columna única vuelve a cubrir. */
.es-movil .es-cromo-lamina .layout-contenido--caja {
  background-size: cover;
  background-position: center;
}

/* El isotipo vuelve al flujo con el resto: sin coordenadas, la posición absoluta lo dejaba
   flotando sobre el título. */
.es-movil .es-cromo-lamina .layout-contenido--lista .contenido-flecha,
.es-movil .es-cromo-lamina .layout-contenido--caja .contenido-flecha {
  position: static;
  left: auto;
  top: auto;
  width: 20px;
  height: auto;
}

/* --------------------------------------------------------------- cierre (lámina final)

   Medidas exactas del panel «Tamaño y posición» de Storyline sobre el lienzo 1280×720.
   `cierre` comparte el marcado de `portada` (mismas clases `.portada-*`), así que TODAS las
   reglas de acá van prefijadas con `.layout-cierre`: las de portada usan el combinador de hijo
   directo `.layout > .portada-*` y no alcanzan a estas, que siguen anidadas en `.portada-caja`
   (mismo truco de §0l, al revés).

   Vertical: logo 78→230, título 229→306, caja de texto 320→525, botón 608→671. */
.layout-cierre .portada-caja {
  position: static;
  max-width: none;
}

.layout-cierre .portada-logo,
.layout-cierre .portada-titulo,
.layout-cierre .cierre-caja,
.layout-cierre .cierre-cta {
  position: absolute;
  z-index: 1;
}

.layout-cierre .portada-logo {
  left: 250px;
  top: 78px;
  width: 262px;
  height: 152px;
  max-width: none;
  margin: 0;
  object-fit: contain;
}

.layout-cierre .portada-titulo {
  left: 55px;
  top: 229px;
  width: 585px;
  height: 77px;
  margin: 0;
  overflow: hidden;
  font-size: var(--tam-cierre-titulo, var(--marca-h1));
  line-height: 1.15;
  color: var(--marca-primario);
}

/* La caja medida contiene los párrafos Y la idea de fuerza — en Storyline es un solo cuadro
   con la última frase en rojo. Mismo reparto que en `contenido`, y por la misma razón: el
   cuerpo encoge la letra si hace falta, la idea de fuerza NO (encogerla la haría entrar y
   dejaría de destacar, en silencio).
   Ampliada de 205 a 304px (M3, §0): con un `texto` de dos oraciones el cuerpo de 101px
   cortaba la segunda a la mitad — no hay auto-ajuste de ALTURA para `cierre.texto`, solo de
   letra, y la idea de fuerza tampoco se achica. Medido en el navegador: este texto necesita
   ~165px de cuerpo y ~118px de idea de fuerza (a veces envuelve 3 líneas, no 2). Para que
   entren los dos sin pisar nada, la caja sube 8px (320→312) y el CTA baja 22px (608→630) —
   quedaba con 49px libres hasta el borde del lienzo, sobraba margen.*/
.layout-cierre .cierre-caja {
  left: 69px;
  top: 312px;
  width: 473px;
  height: 304px;
}

.layout-cierre .cierre-cuerpo {
  height: 175px;
  overflow: hidden;
  font-size: var(--tam-cierre-cuerpo, var(--marca-cuerpo-lg));
}

.layout-cierre .cierre-cuerpo .portada-bajada {
  margin: 0;
  font-size: inherit;
}

.layout-cierre .cierre-cta {
  left: 162px;
  top: 630px;
  width: 259px;
  height: 63px;
  margin: 0;
}

/* En móvil las coordenadas exactas no aplican: todo vuelve a fluir en una columna. */
.es-movil .layout-cierre .portada-caja { position: static; }

.es-movil .layout-cierre .portada-logo,
.es-movil .layout-cierre .portada-titulo,
.es-movil .layout-cierre .cierre-caja,
.es-movil .layout-cierre .cierre-cta {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
}

.es-movil .layout-cierre .portada-titulo { font-size: var(--marca-h2); }
.es-movil .layout-cierre .cierre-cuerpo { height: auto; font-size: var(--marca-cuerpo-lg); }
.es-movil .layout-cierre .cierre-frase { position: static; margin-top: var(--marca-esp-md); }

/* --------------------------------------------------------------- tarjetas (flip cards) */

/* El fondo es el patrón compartido —foto + velo + las dos franjas diagonales— igual que
   portada, contenido y cierre. Antes esta lámina tenía un fondo plano con una cuña roja propia,
   que la dejaba fuera del sistema: no era una decisión, era que nunca llamó a los helpers. */
.layout-tarjetas {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-tarjetas > .titulo-seccion,
.layout-tarjetas > .instruccion,
.layout-tarjetas > .tarjetas-fila { position: relative; z-index: 1; }

/* La tarjeta mide SIEMPRE 274px de ancho, venga la lámina con 2, 3 o 4. Lo que cambia es la
   distribución, no el tamaño: la fila se centra en el lienzo y las tarjetas quedan simétricas
   respecto del eje. Es regla de Pablo y tiene sentido de sistema — una tarjeta que cambia de
   porte según cuántas la acompañan deja de leerse como la misma pieza de un módulo a otro.

   Antes eran 4 columnas fijas: con 3 tarjetas quedaba una columna muerta a la derecha y el
   bloque descentrado. Y una primera corrección mía las estiraba a 320px, que es justo lo que
   esta regla prohíbe. */
.tarjetas-fila {
  display: grid;
  grid-template-columns: repeat(var(--n-tarjetas, 4), 274px);
  justify-content: center;
  gap: var(--marca-esp-md);
  flex: 1;
  align-items: stretch;
  perspective: 1400px;
}

.tarjeta-flip {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  min-height: 220px;
}

.tarjeta-flip:focus-visible .tarjeta-cara { outline: 3px solid var(--marca-terciario); outline-offset: 2px; }

/* Una tarjeta bloqueada tiene que VERSE bloqueada. Antes quedaban `disabled` pero idénticas,
   así que un click que no hacía nada se leía como una falla del curso. Cubre los dos casos con
   una sola regla: durante la narración de entrada están las cuatro apagadas, y mientras una
   tarjeta narra están apagadas las otras tres —la que suena nunca está `disabled`, así que se
   queda encendida y se lee como la que manda. */
.tarjeta-flip.es-apagada {
  cursor: default;
  opacity: 0.45;
  transition: opacity var(--marca-mov-entrada) var(--marca-mov-curva);
}

/* Mientras corre la instrucción, además baja la pista de «Haz click»: todavía no toca. */
.tarjetas-fila.esperando-intro .tarjeta-pista { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-flip.es-apagada { transition: none; }
}

.tarjeta-flip-interior {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transition: transform var(--marca-mov-feedback) var(--marca-mov-curva);
  transform-style: preserve-3d;
}

.tarjeta-flip.volteada .tarjeta-flip-interior { transform: rotateY(180deg); }

.tarjeta-cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--marca-radio-md);
  backface-visibility: hidden;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(var(--marca-primario-rgb), 0.15);
}

/* Frente: base en el rol primario + foto a sangre + capa oscura + rótulo blanco centrado.
   La base navy no es decorativa: es lo que se ve mientras el cliente no entregue las fotos,
   y el rótulo sigue legible igual. */
.tarjeta-frente {
  justify-content: center;
  padding: var(--marca-esp-md);
  background: var(--marca-primario);
}

.tarjeta-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa oscura sobre la foto: deja verla y sostiene el blanco del rótulo. El valor está medido
   contra las cuatro fotos reales, no elegido a ojo. El rótulo es 20px bold, o sea «texto
   grande» para WCAG (mínimo 3:1), y a 45% ya pasaba ese piso — pero con un tercio del área
   bajo el 4.5:1 del texto normal, o sea sin margen. A 55% no queda nada bajo 4.5:1 en ninguna
   de las cuatro, y la foto se sigue viendo. Las fotos son de clave alta a propósito (§0ab), y
   eso es justamente lo que obliga a un velo más denso que el que pediría una foto oscura. */
.tarjeta-velo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.tarjeta-frente-texto {
  position: relative;
  margin: 0;
  font-weight: 700;
  color: var(--marca-blanco);
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.tarjeta-pista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.tarjeta-voltear {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}

/* Reverso: fondo navy sólido, texto blanco grande y bien espaciado — el problema reportado
   era justo este lado: texto chico, pegado arriba, sin centrar. */
.tarjeta-reverso {
  justify-content: center;
  padding: var(--marca-esp-lg);
  background: var(--marca-primario);
  transform: rotateY(180deg);
}

.tarjeta-reverso-texto {
  margin: 0;
  color: var(--marca-blanco);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.es-movil .tarjetas-fila { grid-template-columns: 1fr 1fr; }

/* --------------------------------------------------------------- clasificar (arrastrar y soltar) */

.layout-clasificar { display: flex; flex-direction: column; }

/* Con el cromo de la familia dentro de la lámina, el contenido tiene que arrancar DEBAJO de
   la banda (78px). Los dos layouts de actividad centran su contenido con flex, así que un
   padding superior lo empuja sin tocar ninguna coordenada: sin esto el título se metía 22px
   dentro de la banda (medido). Acotado a `.es-cromo-lamina`, así que la composición sin
   familia visual no se mueve. */
.es-cromo-lamina .layout-clasificar,
.es-cromo-lamina .layout-pregunta { padding-top: 94px; }
/* En móvil el cromo no se dibuja (`.es-movil .botones-cromo { display:none }`), así que ese
   despeje sobraría. `es-movil` vive en `.app` y `es-cromo-lamina` en `.motor`, un
   descendiente: van como selector descendiente, no compuesto. */
.es-movil .es-cromo-lamina .layout-clasificar,
.es-movil .es-cromo-lamina .layout-pregunta { padding-top: var(--marca-esp-md); }

/* Las dos medidas del ejercicio salen de una sola cuenta, acá arriba, porque tienen que
   coincidir: la tarjeta que se arrastra mide lo mismo que una casilla de destino. Antes la
   tarjeta estaba fija en 520 px y con 3 casillas —que dan 373— quedaba más ancha que su
   destino: se veía como una pieza de otro juego.

   `--ancho-fila` es «lo que ocuparían N casillas de 520 px», topado por el ancho disponible.
   Con 2 casillas caben a 520 y la fila se centra; con 3 o 4 se reparten el ancho del contenido.
   El 100 % es literal: la zona ya mide el ancho útil del lienzo, así que no hay ningún 1168
   escrito a mano que se desincronice si cambian los márgenes. */
.clasificar-zona {
  --n-categorias: 2;
  --ancho-fila: min(100%, calc(var(--n-categorias) * 520px +
                (var(--n-categorias) - 1) * var(--marca-esp-md)));
  --ancho-pieza: calc((var(--ancho-fila) - (var(--n-categorias) - 1) * var(--marca-esp-md))
                / var(--n-categorias));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--marca-esp-lg);
  flex: 1;
  justify-content: center;
}

/* La pieza que se mueve va en el rol PRIMARIO y las casillas de destino en arena: así el ojo
   distingue de un vistazo quién viaja y quién recibe, sin depender del texto. Antes era al
   revés —tarjeta arena, casillas sólidas— y las tres piezas competían por el mismo peso.
   Dirección de diseño de Pablo (§0an).

   OJO: esa dirección vale para la composición SIN familia visual propia. En la familia con
   cromo de lámina el original invierte los dos roles —la pieza que viaja es la clara y el
   destino el sólido— y esa inversión está más abajo, acotada a `.es-cromo-lamina`. No es una
   contradicción: son dos diseños distintos, y cada uno manda en el suyo. */
.clasificar-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* El mismo ancho que una casilla de destino: son las dos caras del ejercicio y tienen que
     leerse como piezas del mismo juego. Ver la cuenta en `.clasificar-zona`. */
  width: var(--ancho-pieza, 520px);
  max-width: 100%;
  /* Alto mínimo = el de una situación de DOS líneas, que es el porte de referencia. Sin esto,
     una situación corta entra en una línea, la tarjeta encoge 30 px y el bloque entero se
     re-centra: recorriendo las 5 láminas del ejercicio, una se corría 15 px respecto de las
     otras. Misma regla que Pablo fijó para las flipcards — las piezas de un mismo bloque no
     cambian de tamaño, solo se distribuyen. Con textos más largos sigue creciendo. */
  min-height: 133px;
  box-sizing: border-box;
  padding: var(--marca-esp-md) var(--marca-esp-lg);
  border-radius: var(--marca-radio-md);
  background: var(--marca-primario);
  border: 2px solid var(--marca-primario);
  box-shadow: 0 10px 28px rgba(var(--marca-primario-rgb), 0.28);
  cursor: grab;
  text-align: center;
}

.clasificar-tarjeta .texto { margin: 0; font-weight: 700; color: var(--marca-blanco); }
/* Sobre navy la pista tiene que aclararse: en gris quedaba en 2,1:1 contra el fondo. */
.clasificar-pista { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
/* El realce de «esta elegí» va en el rol TERCIARIO, no en el secundario: el rojo significa
   «incorrecta» en el modal de feedback y usarlo acá le daría dos sentidos al mismo color, que
   es justo la colisión que ya se resolvió en «opcion_multiple». */
.clasificar-tarjeta.clasificar-seleccionada {
  border-color: var(--marca-terciario);
  box-shadow: 0 0 0 4px rgba(var(--marca-terciario-rgb), 0.35);
}
.clasificar-tarjeta:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 3px; }

/* Mismo «porte» que la tarjeta que se arrastra: mismo ancho de columna y una altura
   comparable, para que se lean como el mismo tipo de pieza, no una tarjeta cayendo en una
   ranura delgada.
   El alto NUNCA cambia: lo que se reparte es el ancho de la fila entre las casillas que traiga
   el guion. Con 2 dan 520 cada una —la medida aprobada—, con 3 dan 373 y con 4, 274. El
   `max-width` es esa cuenta: si las casillas cupieran a 520 se quedan en 520, y si no, se
   reparten el ancho disponible. Misma idea que la rejilla de flipcards. */
.clasificar-categorias {
  display: grid;
  grid-template-columns: repeat(var(--n-categorias), minmax(0, 1fr));
  gap: var(--marca-esp-md);
  width: var(--ancho-fila);
  justify-content: center;
}

/* Las dos casillas son IDÉNTICAS entre sí: arena con marco en el rol primario. Antes la
   segunda era roja —clonado del Storyline publicado— y el rojo ya significa «incorrecta» en el
   modal de feedback, así que una de las dos categorías se leía como la mala antes de responder.
   Idénticas, además, es lo correcto: la diferencia entre ellas la tiene que hacer el alumno
   leyendo, no el color. */
.clasificar-categoria {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 130px;
  box-sizing: border-box;
  padding: var(--marca-esp-md) var(--marca-esp-lg);
  border: 2px solid var(--marca-primario);
  border-radius: var(--marca-radio-md);
  background: var(--marca-fondo-alt);
  color: var(--marca-primario);
  font-family: inherit;
  font-size: var(--marca-cuerpo);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* NO lleva `cursor: pointer`: no se resuelve haciendo clic acá, y un cursor de mano sería
     prometer una interacción que la lámina no acepta. Ver el comentario del layout. */
  cursor: default;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform var(--marca-mov-entrada) var(--marca-mov-curva),
              box-shadow var(--marca-mov-entrada) var(--marca-mov-curva),
              background var(--marca-mov-entrada) var(--marca-mov-curva);
}

/* Al pasar por encima con la tarjeta, la casilla se «enciende» tiñéndose del primario en
   transparencia. No se rellena de navy sólido a propósito: eso la dejaría igual que la tarjeta
   que viaja y por un instante habría dos piezas idénticas en pantalla.
   El realce va solo en `.sobre-drop` —cuando hay algo encima— y no en `:hover`: encender la
   casilla con el mouse quieto invitaba a hacerle clic, que es justo lo que no resuelve nada. */
.clasificar-categoria.sobre-drop {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  background: color-mix(in srgb, var(--marca-primario) 12%, var(--marca-fondo-alt));
}
.clasificar-categoria:focus-visible { outline: 3px solid var(--marca-terciario); outline-offset: 2px; }

/* El ejercicio se ve inerte hasta que termina la instrucción hablada. Acá alcanza con bajar la
   opacidad de la pieza entera —a diferencia de la pestaña del acordeón, que era transparente y
   solo se le apagaban las letras—: tanto la tarjeta como los botones tienen fondo propio, así
   que baja el fondo Y el texto, que es lo que hace que se lea como bloqueado. */
.clasificar-zona.esperando-intro .clasificar-tarjeta { cursor: default; opacity: 0.45; }
.clasificar-zona.esperando-intro .clasificar-pista { visibility: hidden; }

.clasificar-categoria.es-apagada {
  cursor: default;
  opacity: 0.45;
  transition: opacity var(--marca-mov-entrada) var(--marca-mov-curva);
}

.clasificar-categoria.es-apagada { pointer-events: none; }

/* Mientras la tarjeta viaja bajo el dedo. `touch-action: none` es lo que evita que el navegador
   interprete el gesto como scroll y se lleve el arrastre puesto. */
.clasificar-tarjeta { touch-action: none; }
.clasificar-tarjeta.clasificar-arrastrando {
  opacity: 0.9;
  z-index: 5;
  cursor: grabbing;
}

/* ---- `clasificar` en la familia con cromo de lámina: emparejamiento en UNA sola lámina.

   No es la composición de arriba reordenada: el original resuelve el ejercicio completo en una
   pantalla, con las N descripciones enfrentadas a los N destinos en dos columnas alineadas fila
   a fila, y se confirma con un botón ENVIAR. La composición base parte el mismo ejercicio en N
   láminas de una tarjeta con las casillas al pie.

   CONTRATO CON EL LAYOUT: la zona lleva `clasificar-zona clasificar-zona--pares` y sus hijos
   van DIRECTOS en la rejilla, en orden de lectura —descripción, destino, descripción, destino…—
   sin envoltorio de fila. Así una fila es una fila de la rejilla y no hay una caja intermedia
   cuyo alto haya que mantener sincronizado a mano.

   Retícula del panel del original: columna izquierda en x=399 y derecha en x=819, las dos de
   392×90; filas en y=172 / 294 / 417. De ahí salen el hueco de 28px entre columnas, el de 32px
   entre filas y los 812 de ancho total. */
.es-cromo-lamina .clasificar-zona--pares {
  position: absolute;
  left: 399px;
  top: 172px;
  width: 812px;
  display: grid;
  grid-template-columns: 392px 392px;
  grid-auto-rows: 90px;
  /* Un solo `gap` (fila, columna) y no dos declaraciones sueltas: el ancho de cada pieza acá es
     fijo, no la cuenta contra la cantidad de categorías que hace la composición base. */
  gap: 32px 28px;
  flex: none;
  justify-content: start;
  align-items: stretch;
}

/* Cuerpos de la columna de título de esta lámina. Los dos estaban leídos como PÍXELES cuando
   el panel del original los declara en PUNTOS: «Actividad» son 37,333 pt (= 49,78 px, la misma
   constante de la familia, no un cuerpo más chico) y la consigna 24 pt (= 32 px). Lo confirma
   la tinta medida sobre las dos capturas: el original marca 34 px de alto en «Actividad» y
   20 px en cada línea de la consigna; con los valores viejos dábamos 25 y 14. */
.es-cromo-lamina .layout-clasificar {
  --ancho-columna-titulo: 280px;
  --tam-antetitulo: 49.78px;
  --tam-titulo-fuerte: 32px;
}
/* El aire entre el antetítulo y la consigna es el de la composición base y acá sobra: el
   original deja 23 px entre la tinta de uno y la del otro, y con el margen heredado dábamos
   36. El bloque entero además arrancaba 3 px abajo. */
/* Los 3 px van en el TÍTULO y no en la columna: el isotipo es hermano suyo y con la columna
   se movía él también, que era lo único que ya estaba en su sitio. */
.es-cromo-lamina .layout-clasificar .botones-titulo { margin-top: -3px; }
.es-cromo-lamina .layout-clasificar .botones-titulo-fuerte { margin-top: 0; }

/* Colores INVERTIDOS respecto de la composición base (ver la nota de arriba): la descripción
   que viaja es la pieza clara y el destino el bloque sólido. Sin bordes y sin sombras — los
   paths del original son rectángulos limpios de radio 15, y cualquier realce de volumen acá
   inventa una jerarquía que el diseño no tiene. */
.es-cromo-lamina .clasificar-zona--pares .clasificar-tarjeta {
  width: auto;
  min-height: 0;
  height: 90px;
  /* valign `top` del original: el texto se apoya arriba, no al medio de la caja. */
  justify-content: flex-start;
  /* Los insets del cuadro de texto del original son 10 a los lados y 5 arriba, no al revés.
     Con 10/5 la medida útil bajaba de 372 a 382 y el texto quebraba distinto. Arriba van los 5
     que declara el panel: el 3 de antes venía de medir sobre la rejilla vieja de 1250, donde
     todo estaba remuestreado.
     NOTA sobre el original: sus fichas muestran barra de scroll y en la tercera el texto sale
     cortado, porque allá el bloque no entra en su caja. Acá entra con la misma interlínea, así
     que se reproduce la composición sin heredar el recorte. */
  padding: 5px 10px;
  border: none;
  border-radius: 15px;
  background: var(--marca-fondo-alt);
  box-shadow: none;
}
.es-cromo-lamina .clasificar-zona--pares .clasificar-tarjeta .texto {
  color: var(--marca-primario);
  /* 18 pt × 4/3. Estaba en 18 px —los puntos del panel leídos como píxeles otra vez— y con eso
     el texto entraba en DOS líneas donde el original usa TRES: la ficha se veía medio vacía y
     el cuerpo, un tercio más chico que el de los destinos, que sí estaban bien. */
  font-size: 24px;
  /* 29 px, que es el paso real del original medido en la rejilla nativa: sus tres líneas de
     tinta arrancan en 183, 212 y 241. Con el interlineado por defecto daban 36 y la tercera
     línea se salía de la caja, donde el recorte la habría escondido sin avisar. */
  line-height: 29px;
  font-weight: 400;
}

.es-cromo-lamina .clasificar-zona--pares .clasificar-categoria {
  min-height: 0;
  height: 90px;
  padding: 10px 5px;
  border: none;
  border-radius: 15px;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  /* 18 pt × 4/3. Los 18px eran los PUNTOS del panel leídos como píxeles —el mismo desliz que
     tenía el rótulo de los discos—, y el juicio a ciegas lo leyó como «peso liviano»: las tres
     cajas de destino, que son lo más accionable de la lámina, pesaban menos que el título. */
  font-size: 24px;
  font-weight: 400;
  letter-spacing: normal;
  box-shadow: none;
}

/* Sobre el destino navy, el realce de «tienes algo encima» no puede ser un teñido del mismo
   primario: se aclara hacia el fondo de la lámina para que el cambio se lea. */
.es-cromo-lamina .clasificar-zona--pares .clasificar-categoria.sobre-drop {
  background: color-mix(in srgb, var(--marca-primario) 82%, var(--marca-blanco));
}

/* ENVIAR: el ejercicio del original se confirma, no se resuelve al soltar. Misma «caja
   contenedora» de la marca que COMENZAR y CERRAR, en su coordenada del panel (1021,634).
   Arranca apagado y se habilita cuando están soltadas las N descripciones — mismo contrato de
   gating que el resto de la familia (§0ap/§0bh). */
.es-cromo-lamina .clasificar-enviar {
  position: absolute;
  left: 1021px;
  top: 634px;
  width: 191px;
  height: 51px;
  border: 0;
  border-radius: 25px 0 25px 0;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-family: inherit;
  /* 18,667 pt × 4/3 = 24,89px. Mismo desliz de puntos leídos como píxeles que las cajas de
     destino; la caja del botón no se mueve, solo su rótulo recupera el cuerpo del original. */
  font-size: 24.89px;
  font-weight: 800;
  /* Sin interletrado. El original no declara `characterSpacing` en NINGÚN objeto del módulo
     —verificado recorriendo los 14 slides: cero ocurrencias—, así que abrirlo era invención
     nuestra, y hacía que todas nuestras mayúsculas salieran más anchas que las de allá con la
     misma altura de mayúscula. Un juez a ciegas lo detectó como patrón, no como caso suelto. */
  letter-spacing: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--marca-mov-entrada) var(--marca-mov-curva);
}
.es-cromo-lamina .clasificar-enviar:hover:not(.es-apagada) { background: var(--marca-secundario-oscuro); }
.es-cromo-lamina .clasificar-enviar:focus-visible { outline: 3px solid var(--marca-blanco); outline-offset: 3px; }
.es-cromo-lamina .clasificar-enviar.es-apagada { cursor: default; opacity: 0.45; }

/* Late en cuanto se puede enviar, colgado de `:not(.es-apagada)` — el mismo estado que ya
   gobierna el botón, sin una clase nueva que se pueda desincronizar (§0as). */
.es-cromo-lamina .clasificar-enviar:not(.es-apagada) {
  animation: latido-cta-sync 1.6s var(--marca-mov-curva) infinite;
}
.es-cromo-lamina .clasificar-enviar:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .es-cromo-lamina .clasificar-enviar:not(.es-apagada) {
    animation: none;
    box-shadow: 0 0 0 5px rgba(var(--marca-secundario-rgb), 0.45);
  }
}

/* Móvil: la retícula de dos columnas y las coordenadas asumen el lienzo. En columna única el
   par se apila —descripción arriba, destino abajo— y el botón vuelve al flujo.
   Selector DESCENDIENTE, no compuesto: `es-movil` vive en `.app` y `es-cromo-lamina` en
   `.motor`, que es un descendiente suyo. */
.es-movil .es-cromo-lamina .clasificar-zona--pares {
  position: static;
  width: 100%;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}
.es-movil .es-cromo-lamina .clasificar-zona--pares .clasificar-tarjeta,
.es-movil .es-cromo-lamina .clasificar-zona--pares .clasificar-categoria { height: auto; min-height: 64px; }
.es-movil .es-cromo-lamina .clasificar-enviar {
  position: static;
  width: 100%;
  margin-top: var(--marca-esp-md);
}

@media (prefers-reduced-motion: reduce) {
  .clasificar-categoria.es-apagada { transition: none; }
}

/* En móvil las casillas se apilan a ancho completo, así que la tarjeta tiene que hacer lo
   mismo: `--ancho-pieza` es «una casilla de la fila» y en columna única esa cuenta daría 93px
   con 3 categorías. La regla de que tarjeta y casilla midan igual se mantiene — cambia cuánto
   mide una casilla. */
.es-movil .clasificar-categorias { grid-template-columns: 1fr; }
.es-movil .clasificar-tarjeta { width: 100%; }

/* --------------------------------------------------------------- video (cápsula) */

/* El video manda en la lámina: ocupa el ancho útil y se centra. Fondo navy para que las
   franjas negras de un clip con otra relación de aspecto no se lean como un error. */
.layout-video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--marca-esp-md);
}

.video-marco {
  position: relative;
  width: 100%;
  max-width: 1168px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--marca-radio-md);
  overflow: hidden;
  background: var(--marca-primario);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.video-medio {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--marca-primario);
}

/* Capa de arranque: el póster se ve por debajo (es el `poster` del propio <video>) y encima
   va un botón grande. Vuelve a aparecer al terminar, así repetir el video es el mismo gesto
   que empezarlo — y se puede repetir sin límite (D22). */
.video-arranque {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(var(--marca-primario-rgb), 0.35);
  cursor: pointer;
  border: 0;
}

.video-play {
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 50%;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario);
  font-size: 38px;
  line-height: 1;
  padding-left: 6px;            /* el glifo ▶ no está centrado ópticamente */
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform var(--marca-mov-entrada) var(--marca-mov-curva);
}

/* Rótulo bajo el botón: «Reproducir» y, una vez visto, «Volver a reproducir». Un ícono solo
   no alcanza para esta audiencia. */
.video-rotulo {
  margin: var(--marca-esp-sm) 0 0;
  color: var(--marca-blanco);
  font-size: var(--marca-cuerpo);
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Barra de avance del video: INFORMA cuánto falta, no es un control. Sin escuchas de click ni
   arrastre y con `pointer-events: none`, para que ni siquiera parezca manipulable — el alumno
   no puede adelantar el video, igual que no puede adelantar el audio del resto del curso. */
.video-progreso {
  position: absolute;
  left: 0;
  bottom: 0;
  /* Ancho explícito, no `left:0; right:0`: el relleno de adentro se dimensiona en porcentaje y
     hay motores que no resuelven el porcentaje de un hijo contra un padre sizado por
     left/right — la barra quedaba en 0 y no se movía nunca. */
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* El relleno se dibuja con `scaleX`, no con un `width` en porcentaje. El porcentaje se
   resuelve contra el ancho del padre, y este padre se dimensiona con `left/right` — hay
   motores que ahí devuelven 0 y la barra no se movía nunca. `scaleX` no depende de eso. */
.video-progreso-relleno {
  width: 0;
  height: 100%;
  background: var(--marca-secundario);
  transition: width 200ms linear;
}

/* Cuánto FALTA, que es lo que la persona quiere saber. */
.video-tiempo {
  position: absolute;
  right: 12px;
  bottom: 16px;
  padding: 2px 8px;
  border-radius: var(--marca-radio-sm);
  background: rgba(0, 0, 0, 0.55);
  color: var(--marca-blanco);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .video-progreso-relleno { transition: none; }
}

/* En pantalla completa el marco ocupa el monitor entero: sin relación de aspecto fija, sin
   bordes redondeados y sin sombra. El video se ajusta con `contain`, así una cápsula que no
   sea 16:9 no se recorta — se enmarca en negro, como cualquier reproductor. */
.video-marco:fullscreen,
.video-marco:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}

.video-marco:fullscreen .video-medio,
.video-marco:-webkit-full-screen .video-medio { background: #000; }

/* La barra de avance crece un poco en pantalla completa: a dos metros de un monitor, 6px no
   se ven. Y los subtítulos, que el reproductor muda acá adentro, se anclan sobre el video. */
.video-marco:fullscreen .video-progreso,
.video-marco:-webkit-full-screen .video-progreso { height: 10px; }

.video-marco:fullscreen .video-tiempo,
.video-marco:-webkit-full-screen .video-tiempo { bottom: 24px; font-size: 18px; }

.video-marco:fullscreen .subtitulos,
.video-marco:-webkit-full-screen .subtitulos {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px;
  z-index: 3;
}

.video-play:hover { transform: scale(1.06); }
.video-play:focus-visible { outline: 3px solid var(--marca-blanco); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .video-play { transition: none; }
}

.es-movil .video-marco { max-width: 100%; }
.es-movil .video-play { width: 68px; height: 68px; font-size: 28px; }

/* --------------------------------------------------------------- error de autoría */

.layout-error { display: grid; place-content: center; text-align: center; }
.layout-error .titulo-seccion { color: var(--marca-secundario); }

/* ================================================================================
   `botones · forma: barras` — la lista VERTICAL de disparadores.

   No es un layout nuevo: el contrato es el mismo del `botones` de tarjetas y de discos —cada
   disparador abre una capa con narración propia, gating al terminar la narración de entrada,
   marca de «ya lo viste», y la navegación se libera cuando se vieron todas—. Lo único que
   cambia es la composición: N barras apiladas en vez de tarjetas en fila, y la capa como
   PANEL LATERAL en vez de pantalla completa.

   Toda la geometría está EXTRAÍDA del SCORM publicado y no deducida de una captura:
   barra 352×107 en x=408 con paso 120 · disco `commandset-65`, círculo de 107 relleno
   #FF4D00 · rótulo `commandset-63`, 272×57 con radio DIAGONAL de 9,33 · capa
   `commandset-84`, 408×416 en (806,149), blanco al 89 % y radio 12 parejo · punta
   `commandset-86`, triángulo de 35×39.
   ================================================================================ */

.layout-botones--barras > .botones-rejilla--barras {
  position: absolute;
  left: var(--barras-x, 408px);
  top: var(--barras-y, 125px);
  width: var(--barras-ancho, 352px);
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: var(--barras-alto, 107px);
  /* El hueco sale del PASO declarado (120 − 107): el guion escribe la distancia de arranque a
     arranque, que es lo que se lee del panel de posición, no el hueco. */
  row-gap: var(--barras-hueco, 13px);
  gap: var(--barras-hueco, 13px) 0;
}

/* La barra ENTERA es el botón: se toca el disco, el rótulo o el aire entre los dos. */
.botones-barra {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* La transición es la misma que usan las otras dos disposiciones; el `transform` se aplica
     al disco y al rótulo por separado para que el conjunto no «respire» como un bloque. */
  -webkit-tap-highlight-color: transparent;
}

/* Disco perfecto del alto de la fila, en el rol secundario. Va ENCIMA del rótulo: el rótulo
   le pasa por debajo, igual que la píldora de `objetivos · forma: filas`. */
.botones-barra-disco {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--barras-alto, 107px);
  height: var(--barras-alto, 107px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--marca-secundario);
}
.botones-barra-icono { display: block; width: 71px; height: 71px; }

/* Rótulo: bloque sólido con la geometría diagonal de la familia —arriba-izquierda y
   abajo-derecha redondeadas, las otras dos rectas—, centrado verticalmente contra el disco.
   Arranca 81px desde el borde de la barra, o sea 26px DENTRO del disco. */
.botones-barra-rotulo {
  position: absolute;
  left: var(--barras-rotulo-x, 81px);
  top: 50%;
  transform: translateY(-50%);
  width: var(--barras-rotulo-ancho, 272px);
  /* Alto MÍNIMO y no fijo: el rótulo de dos líneas del original mide 59 y no 57 —la caja
     crece con su texto—, y con el alto clavado la segunda línea se salía de la barra. */
  min-height: var(--barras-rotulo-alto, 57px);
  z-index: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Los insets del cuadro de texto del original —10 a los lados, 5 arriba— MÁS la sangría de
     párrafo de 32px que el original le mete por la izquierda (`leadingMargin`), la misma que
     lleva la píldora de `objetivos · forma: filas`. Sin ella el rótulo queda centrado en la
     barra y en el original está centrado en el LIENZO: 16px de corrimiento en las tres barras
     de las tres láminas. */
  padding: 5px 10px 5px var(--barras-sangria, 42px);
  border-radius: 9.33px 0 9.33px 0;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  /* 18 pt × 4/3. */
  font-size: var(--barras-texto, 24px);
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
}
.botones-barra-texto { display: block; width: 100%; }
.botones-barra-rotulo strong { font-weight: 800; }

/* El check cuelga del borde derecho del rótulo, superpuesto ~24px, no de la esquina de una
   tarjeta. Mismas medidas que el original: 49×49 en x=736 (o sea 328 desde el borde de la
   barra) y 62px desde el borde superior de la fila. */
.botones-barra .botones-check {
  position: absolute;
  left: var(--barras-check-x, 328px);
  top: var(--barras-check-y, 62px);
  right: auto;
  bottom: auto;
  width: 49px;
  height: 49px;
  z-index: 2;
}
.botones-barra .botones-check img { width: 100%; height: 100%; }

/* Realce del disparador al pasar por encima: se sube el disco, sin mover la barra entera.
   La barra ABIERTA no se marca de ninguna otra forma —el original no lo hace: las tres se ven
   idénticas con el panel abierto, y quien indica cuál está abierta es la punta del panel—. La
   primera versión le aclaraba el fondo al rótulo activo y eso era un bloque de 272×57 de color
   inventado. */
.botones-barra:not(.es-apagada):hover .botones-barra-disco,
.botones-barra:not(.es-apagada):focus-visible .botones-barra-disco { transform: scale(1.04); }

/* ---------------------------------------------------------------- la capa como PANEL
   408×416 en (806,149), no el lienzo entero: la lámina de abajo sigue a la vista y por eso
   esta capa no dibuja cromo ni lleva CERRAR. */
.botones-capa--barras {
  inset: auto;
  left: var(--capa-barras-x, 806px);
  top: var(--capa-barras-y, 149px);
  width: var(--capa-barras-ancho, 408px);
  height: var(--capa-barras-alto, 416px);
  border-radius: 12px;
  background-color: var(--marca-blanco);
  background-color: color-mix(in srgb, var(--marca-blanco) 89%, transparent);
  background-image: none !important;
}

/* La punta que señala a la barra abierta. Es un triángulo de 35×39 pegado al borde izquierdo
   del panel; su `top` lo escribe el layout con el centro de la barra activa. */
.botones-capa-punta {
  position: absolute;
  left: -35px;
  width: 0;
  height: 0;
  margin-top: -19.5px;
  border-style: solid;
  border-width: 19.5px 35px 19.5px 0;
  border-color: transparent;
  border-right-color: var(--marca-blanco);
  opacity: 0.89;
}

/* El texto del panel: todo el ancho, centrado vertical, justificado, con los insets del
   cuadro de texto del original. Sin título aparte —el original no lo tiene: la capa arranca
   directo con su párrafo—. */
.botones-capa--barras .botones-capa-titulo { display: none; }
.botones-capa--barras .botones-capa-cuerpo {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* El panel SE DESPLAZA cuando el texto no entra, igual que el del original —el suyo muestra
     barra de desplazamiento en la capa más larga—. La alternativa era encoger la letra hasta
     que entrara, y eso la llevaba a 14,67px contra los 18 pt del diseño: la lámina entraba
     pero dejaba de leerse. */
  overflow-y: auto;
  color: var(--marca-primario);
}

/* El canal de la barra de desplazamiento OCUPA ancho, y solo en la capa que se desplaza —el
   layout le pone `es-desplazable` cuando mide que el texto no entra—. No es cosmético: en el
   original la barra le come 14px al ancho del texto, y eso cambia dónde quiebra cada línea de
   las catorce. Sin esto nuestro bloque entraba más ancho y a partir de la octava línea los dos
   dejaban de coincidir. Reservarlo SIEMPRE tampoco sirve: angostaría las diez capas que hoy
   calzan al píxel. */
.botones-capa--barras .botones-capa-cuerpo.es-desplazable { padding-right: 24px; }
.botones-capa--barras .botones-capa-cuerpo::-webkit-scrollbar { width: 14px; }
.botones-capa--barras .botones-capa-cuerpo::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--marca-neutro) 30%, transparent);
  border-radius: 7px;
}
.botones-capa--barras .botones-capa-cuerpo::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--marca-neutro) 85%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 7px;
}

.botones-capa--barras .botones-capa-parrafo {
  margin: 0;
  color: var(--marca-primario);
  /* 18 pt × 4/3, con la interlínea del original. */
  font-size: var(--capa-barras-texto, 24px);
  line-height: 1.22;
  text-align: justify;
}
/* Una LÍNEA entera de separación, no un `1em` cualquiera: en el original los dos párrafos de
   la capa están separados por un párrafo VACÍO, y eso mide exactamente un interlineado. Con
   1em quedaban 5px más juntos, y como el bloque va centrado ese error se reparte en los dos
   extremos: las diez líneas salían 3px altas. */
.botones-capa--barras .botones-capa-parrafo + .botones-capa-parrafo { margin-top: 1.22em; }
.botones-capa--barras .botones-capa-parrafo strong { font-weight: 800; }

/* En móvil el panel vuelve al flujo, a ancho completo y con el alto del contenido: las
   coordenadas del lienzo no significan nada en una columna de 375px. */
.es-movil .layout-botones--barras > .botones-rejilla--barras {
  position: static;
  width: 100%;
  grid-auto-rows: auto;
}
.es-movil .botones-barra { height: auto; min-height: 88px; }
.es-movil .botones-capa--barras {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: var(--marca-esp-md);
}
.es-movil .botones-capa--barras .botones-capa-cuerpo {
  position: static;
  height: auto;
  padding: 0;
}
.es-movil .botones-capa-punta { display: none; }

/* ================================================================================
   `cifras` — dato numérico en disco + lista (familia Syncore).

   Geometría EXTRAÍDA del SCORM: caja `commandset-29` 815×470 en (399,124), blanco al 80 % con
   borde #FF4D00 de 1px y radio 20 · disco `commandset-45`, círculo de 127 relleno #FF4D00 ·
   etiqueta `commandset-55`, 145×45 navy con radio 7,5 PAREJO, montada 35px sobre el borde
   inferior del disco · encabezado en (608,312) · filas `commandset-50`, 435×45 desde (608,368)
   con paso 54. Cuerpos: 20 pt (= 26,67px) en todo.
   ================================================================================ */

.layout-cifras { padding: 0; position: relative; }

.cifras-caja {
  position: absolute;
  left: var(--cifras-x, 399px);
  top: var(--cifras-y, 124px);
  width: var(--cifras-ancho, 815px);
  height: var(--cifras-alto, 470px);
  box-sizing: border-box;
  border: 1px solid var(--marca-secundario);
  border-radius: 20px;
  background: var(--marca-blanco);
  background: color-mix(in srgb, var(--marca-blanco) 80%, transparent);
}

/* Los discos van en una fila centrada sobre el eje que declara el guion. El bloque de cada uno
   es el disco MÁS su etiqueta, así se revelan juntos con un solo cue. */
.cifras-fila {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cifras-discos-y, 28px);
  display: flex;
  justify-content: center;
  gap: var(--cifras-discos-hueco, 95px);
}
.cifra-bloque { position: relative; width: var(--cifras-disco, 127px); }

.cifra-disco {
  width: var(--cifras-disco, 127px);
  height: var(--cifras-disco, 127px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--marca-secundario);
  color: var(--marca-texto-inverso);
  /* 20 pt × 4/3, con la interlínea del original (pitch medido: 32px). */
  font-size: 26.67px;
  line-height: 32px;
  font-weight: 800;
  text-align: center;
}

/* La etiqueta MONTA sobre el borde inferior del disco — el mismo recurso de pieza superpuesta
   que el chip de `normas` y la píldora de `objetivos · forma: filas`. Su radio es PAREJO: acá
   el original no usa la geometría diagonal. */
.cifra-etiqueta {
  position: absolute;
  left: 50%;
  top: var(--cifras-etiqueta-y, 92px);
  transform: translateX(-50%);
  width: var(--cifras-etiqueta-ancho, 145px);
  height: 45px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 7.5px;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  font-size: 26.67px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

/* Encabezado de la lista: sin relleno, centrado, en el rol primario. */
.cifras-intro {
  position: absolute;
  left: var(--cifras-lista-x, 209px);
  top: var(--cifras-intro-y, 193px);
  width: var(--cifras-intro-ancho, 444px);
  margin: 0;
  padding: 5px 10px;
  box-sizing: border-box;
  color: var(--marca-primario);
  font-size: 26.67px;
  line-height: 1.2;
  text-align: center;
}

.cifras-lista {
  position: absolute;
  left: var(--cifras-lista-x, 209px);
  top: var(--cifras-lista-y, 244px);
  width: var(--cifras-lista-ancho, 435px);
  display: grid;
  grid-auto-rows: var(--cifras-item-alto, 45px);
  row-gap: var(--cifras-item-hueco, 9px);
}

/* Cada fila: píldora navy de radio parejo con la viñeta pintada por el CSS, igual que la lista
   de `contenido · forma: lista`. El carácter de viñeta lo declara el original en Arial. */
.cifras-item {
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 7.5px;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  font-size: var(--tam-cifras-item, 26.67px);
  line-height: 1.2;
  font-weight: 800;
  overflow: hidden;
}
.cifras-item::before {
  content: '\2022';
  display: inline-block;
  width: 14px;
  flex: 0 0 14px;
  font-family: Arial, sans-serif;
}
.cifras-item mark.resaltado { color: inherit; }

/* En móvil todo vuelve al flujo: las coordenadas del lienzo no significan nada en 375px. */
.es-movil .cifras-caja {
  position: static;
  width: 100%;
  height: auto;
  padding: var(--marca-esp-md);
}
.es-movil .cifras-fila { position: static; flex-wrap: wrap; gap: var(--marca-esp-lg); }
.es-movil .cifra-bloque { margin-bottom: 28px; }
.es-movil .cifras-intro,
.es-movil .cifras-lista { position: static; width: 100%; margin-top: var(--marca-esp-md); }
.es-movil .cifras-lista { grid-auto-rows: auto; }
.es-movil .cifras-item { height: auto; min-height: 45px; }

/* ================================================================================
   `clasificar · forma: sobre_imagen` — los destinos son zonas TRANSPARENTES sobre una figura.

   El ejercicio no cambia —arrastrar cada ficha a su fila y confirmar con ENVIAR— y tampoco su
   contrato de gating. Lo que cambia es la composición: en vez de la rejilla de dos columnas,
   cada pieza va en las coordenadas que declara el guion, porque dependen de la foto.

   EXTRAÍDO del SCORM: figura `621jPNrcuyC.png` 295×669 en (399,51) · destinos
   `commandset-162`, círculos de 164 en (515,59)/(515,244)/(515,419) con `fill-opacity: 0` ·
   fichas `commandset-158`, 273×89 en x=812 con radio 14,83 PAREJO, relleno #001E5A · ENVIAR
   `commandset-163`, 274×56 en (812,600) con radio 9,17 diagonal.
   ================================================================================ */

.clasificar-figura { position: absolute; z-index: 0; pointer-events: none; }

.es-cromo-lamina .clasificar-zona--sobre-imagen {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* El destino es una zona INVISIBLE: no lleva relleno, ni borde, ni texto. El rótulo sigue en
   el DOM para el lector de pantalla, así que se esconde con `font-size: 0` y no con
   `display: none` —que lo sacaría del árbol de accesibilidad junto con el elemento—. */
.es-cromo-lamina .clasificar-zona--sobre-imagen .clasificar-categoria {
  position: absolute;
  min-height: 0;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  font-size: 0;
}
/* «Tienes algo encima» sí tiene que verse, o arrastrar a ciegas: un halo del rol secundario,
   que es lo único que se dibuja de estas zonas en toda la lámina. */
.es-cromo-lamina .clasificar-zona--sobre-imagen .clasificar-categoria.sobre-drop {
  background: rgba(var(--marca-secundario-rgb), 0.28);
  box-shadow: 0 0 0 4px rgba(var(--marca-secundario-rgb), 0.75);
}

/* Las fichas: bloque sólido de radio PAREJO —acá el original no usa la geometría diagonal—,
   con el texto centrado en las dos direcciones. */
.es-cromo-lamina .clasificar-zona--sobre-imagen .clasificar-tarjeta {
  position: absolute;
  width: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Los insets del cuadro de texto del original: 10 a los lados, 5 arriba. */
  padding: 5px 10px;
  border: none;
  border-radius: 14.83px;
  background: var(--marca-primario);
  box-shadow: none;
}
.es-cromo-lamina .clasificar-zona--sobre-imagen .clasificar-tarjeta .texto {
  margin: 0;
  /* 18 pt × 4/3, con la interlínea del original. */
  color: var(--marca-texto-inverso);
  font-size: 24px;
  line-height: 29px;
  font-weight: 400;
  text-align: center;
}

/* En móvil la figura y las coordenadas de lienzo no sirven: la zona vuelve al flujo y los
   destinos recuperan un cuerpo visible, o no habría dónde soltar. */
.es-movil .clasificar-figura { display: none; }
.es-movil .clasificar-zona--sobre-imagen {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--marca-esp-sm);
}
.es-movil .clasificar-zona--sobre-imagen .clasificar-tarjeta,
.es-movil .clasificar-zona--sobre-imagen .clasificar-categoria {
  position: static;
  width: 100%;
  height: auto;
  min-height: 56px;
}
.es-movil .clasificar-zona--sobre-imagen .clasificar-categoria {
  border-radius: 15px;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  font-size: var(--marca-cuerpo);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ENVIAR de `forma: sobre_imagen`: el original lo coloca al pie de la COLUMNA DE FICHAS
   (812,600) 273×55, no abajo a la derecha del lienzo como en la retícula de dos columnas. Un
   juez a ciegas lo marcó como el único defecto grave de la lámina: «descolgado de la columna
   de cajas, 127px de desalineación, sin ningún otro elemento con el que alinearse».

   EXTRAÍDO: `commandset-163`, 274×56, relleno #FF4D00, radio DIAGONAL de 9,17 —no los 25 de
   los botones de la familia— y el rótulo a 20 pt en capitalización normal («Enviar»), no en
   versales: es lo que dice el original. */
.es-cromo-lamina .layout-clasificar:has(.clasificar-zona--sobre-imagen) .clasificar-enviar {
  left: var(--enviar-x, 812px);
  top: var(--enviar-y, 600px);
  width: var(--enviar-ancho, 273px);
  height: var(--enviar-alto, 55px);
  border-radius: 9.17px 0 9.17px 0;
  /* 20 pt × 4/3. */
  font-size: 26.67px;
  text-transform: none;
}

/* ---------- `forma: filas` con DESCRIPCIÓN: la píldora y su renglón de explicación se apilan.
   Medido en «Documentación mínima» (Módulo 3): disco de 116 en x=546 · píldora 324×54 en
   x=632, o sea 30px DENTRO del disco · descripción 552×58 en x=662, justo donde termina el
   disco · paso de fila 142. El disco se alinea con la PÍLDORA y no con la columna entera:
   su centro cae en 152 y el de la píldora en 155, mientras el de la columna está en 187. */
.layout-objetivos.es-syncore.es-forma-filas .objetivo-bloque.es-con-descripcion {
  align-items: flex-start;
}
.objetivo-columna {
  flex: 1;
  min-width: 0;
  margin-left: var(--filas-hueco-x, 15px);
  /* Dónde arranca la píldora dentro de su fila. Por defecto queda centrada contra el disco,
     que es lo que hace el original —su píldora de 54 en una fila de 116 cae en +34—; el guion
     lo puede correr cuando el original la colocó en otro lado. */
  padding-top: var(--filas-pastilla-desde,
    calc((var(--filas-alto, 78px) - var(--filas-pastilla-alto, 0px)) / 2));
  display: flex;
  flex-direction: column;
}
/* El margen ya lo pone la columna: la píldora de adentro no lo repite. Y `align-self` vuelve a
   `flex-start`: en la fila normal el eje cruzado es vertical y `center` centra la píldora
   contra el disco, pero DENTRO de la columna el eje cruzado es horizontal y esa misma
   declaración la encogía al ancho del texto —las tres píldoras salían de distinto largo donde
   el original las tiene todas de 324—. */
.layout-objetivos.es-syncore.es-forma-filas .es-con-descripcion .objetivo-texto-col {
  flex: none;
  margin-left: 0;
  align-self: flex-start;
  width: var(--filas-pastilla-ancho, 100%);
  height: var(--filas-pastilla-alto, auto);
}
/* Con descripción, la píldora es un RÓTULO —una o dos palabras— y va centrada. Sin ella es un
   párrafo y se justifica, que es lo que hacen el «Resumen» y «Enriquecimiento». */
.layout-objetivos.es-syncore.es-forma-filas .es-con-descripcion .objetivo-texto {
  width: 100%;
  text-align: center;
}

.objetivo-descripcion {
  margin: var(--filas-descripcion-hueco, 6px) 0 0;
  /* La descripción arranca donde TERMINA el disco, no donde arranca la píldora: el original la
     saca de debajo del disco para que se lea completa. */
  margin-left: var(--filas-descripcion-x, 30px);
  padding: 5px 10px;
  box-sizing: border-box;
  color: var(--marca-primario);
  /* 18 pt × 4/3. */
  font-size: var(--filas-descripcion-tam, 24px);
  line-height: 1.22;
  text-align: justify;
  /* El original la recorta cuando no entra —su caja de 58 muestra barra de desplazamiento— y
     acá se deja crecer: el encargo es reproducir la composición, no heredar el recorte. */
}

/* ---------- idea de fuerza de `objetivos`: texto en el rol de acento, SIN caja.
   Es distinta de la de `galeria` y `normas`, que sí son un bloque de color. Medida en
   «Documentación mínima»: (399,531) 815×82, 18 pt, con el inset de 10 del cuadro de texto. */
.layout-objetivos.es-syncore > .objetivos-cierre {
  position: absolute;
  left: var(--objetivos-cierre-x, 399px);
  top: var(--objetivos-cierre-y, 531px);
  width: var(--objetivos-cierre-ancho, 815px);
  box-sizing: border-box;
  margin: 0;
  padding: 5px 10px;
  color: var(--marca-secundario);
  font-size: var(--objetivos-cierre-tam, 24px);
  line-height: 1.22;
  font-weight: 800;
}
.es-movil .layout-objetivos.es-syncore > .objetivos-cierre {
  position: static;
  width: 100%;
  margin-top: var(--marca-esp-md);
}

/* ================================================================================
   `contenido · forma: velo` — foto a lienzo completo + FRANJA translúcida + pila centrada.

   No es `forma: caja` con otras medidas: allá el texto vive en un recuadro con filete, centrado
   en la lámina; acá la franja va de borde a borde vertical, sin recuadro, y los párrafos van
   CENTRADOS y en cuerpos DECRECIENTES —el primero en el rol de acento—.

   Medido en «Autoexclusión» (Módulo 3): franja `commandset-123`, 427×715 en (433,2), blanco al
   52 % · párrafos en (452, 202/308/427) de 390×127, a 24, 20 y 18 pt.
   ================================================================================ */

/* Ni velo diagonal ni cuñas: el fondo es la foto del cliente a lienzo completo. */
.layout-contenido--velo .portada-velo,
.layout-contenido--velo .portada-diagonal { display: none; }

.contenido-franja {
  position: absolute;
  left: var(--franja-x, 433px);
  top: var(--franja-y, 2px);
  width: var(--franja-ancho, 427px);
  height: var(--franja-alto, 715px);
  z-index: 0;
  background: var(--marca-blanco);
  background: color-mix(in srgb, var(--marca-blanco) 52%, transparent);
}

.es-cromo-lamina .layout-contenido--velo .contenido-caja {
  left: var(--velo-x, 452px);
  top: var(--velo-y, 197px);
  width: var(--velo-ancho, 390px);
  height: auto;
  z-index: 1;
}
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo {
  height: auto;
  overflow: visible;
}
/* La pila: párrafos centrados, sin viñeta, y con el inset del cuadro de texto del original. */
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo p {
  margin: 0 0 var(--velo-hueco, 22px);
  padding: 5px 10px;
  line-height: 1.22;
  text-align: center;
}
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo p::before { content: none; }
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo p:last-child { margin-bottom: 0; }

/* Cuerpos DECRECIENTES: el original le da 24, 20 y 18 pt a los tres párrafos, y el primero va
   en el rol de acento. No es una jerarquía inventada: está en el panel de posición. Se declara
   por posición y no por campo porque los tres son el mismo bloque de texto del guion. */
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo p:nth-child(1) {
  color: var(--marca-secundario);
  font-size: var(--velo-tam-1, 32px);
  font-weight: 800;
}
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo p:nth-child(2) {
  font-size: var(--velo-tam-2, 26.67px);
  font-weight: 800;
}
.es-cromo-lamina .layout-contenido--velo .contenido-cuerpo p:nth-child(3) {
  font-size: var(--velo-tam-3, 24px);
}

.es-movil .contenido-franja { display: none; }
.es-movil .es-cromo-lamina .layout-contenido--velo .contenido-caja {
  position: static;
  width: 100%;
}

/* ================================================================================
   `comparacion` — dos columnas enfrentadas con distinta cantidad de filas.

   EXTRAÍDO de «Capacitado no es lo mismo que habilitado» (Módulo 3): cabeceras
   `commandset-42` de 302×61 en (479,160) y (912,160), navy · filas `commandset-46` de 302×72,
   gris #D9D9D9, texto 20 pt navy apoyado arriba · separador 109×120 en (796,118) · idea de
   fuerza `commandset-51` 735×80 en (479,498), naranja, con ícono de 70×70 adentro.
   ================================================================================ */

.layout-comparacion { padding: 0; position: relative; }

.comparacion-zona {
  position: absolute;
  left: var(--comp-x, 479px);
  top: var(--comp-y, 160px);
  width: var(--comp-ancho, 735px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--comp-hueco, 131px);
}
.comparacion-columna { display: flex; flex-direction: column; }

/* El separador va entre las dos cabeceras, montado sobre el hueco de la rejilla. */
.comparacion-separador {
  position: absolute;
  left: 50%;
  top: var(--comp-separador-y, -42px);
  width: var(--comp-separador-ancho, 109px);
  height: var(--comp-separador-alto, 120px);
  transform: translateX(-50%);
  z-index: 1;
}

.comparacion-cabecera {
  box-sizing: border-box;
  height: var(--comp-cabecera-alto, 61px);
  margin-bottom: var(--comp-cabecera-hueco, 13px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 7.5px;
  background: var(--marca-primario);
  color: var(--marca-texto-inverso);
  /* 20 pt × 4/3. */
  font-size: var(--comp-cabecera-tam, 26.67px);
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}

/* Las filas: gris, texto apoyado ARRIBA —lo declara el original— y con el inset del cuadro. */
.comparacion-fila {
  box-sizing: border-box;
  min-height: var(--comp-fila-alto, 72px);
  margin: 0 0 var(--comp-fila-hueco, 10px);
  padding: 5px 10px;
  border-radius: 7.5px;
  background: var(--marca-neutro);
  color: var(--marca-primario);
  /* 20 pt × 4/3. */
  font-size: var(--comp-fila-tam, 26.67px);
  line-height: 1.2;
}
.comparacion-fila:last-child { margin-bottom: 0; }

/* Idea de fuerza al pie: bloque de acento con su ícono a la izquierda. */
.comparacion-cierre {
  position: absolute;
  left: var(--comp-cierre-x, 479px);
  top: var(--comp-cierre-y, 498px);
  width: var(--comp-cierre-ancho, 735px);
  min-height: var(--comp-cierre-alto, 80px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--comp-cierre-hueco, 18px);
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--marca-secundario);
  color: var(--marca-texto-sobre-secundario, var(--marca-texto-inverso));
}
.comparacion-cierre-icono { flex: 0 0 auto; width: 70px; height: 70px; }
.comparacion-cierre-texto {
  margin: 0;
  /* 20 pt × 4/3. */
  font-size: var(--comp-cierre-tam, 26.67px);
  line-height: 1.2;
  font-weight: 800;
}

.es-movil .comparacion-zona,
.es-movil .comparacion-cierre { position: static; width: 100%; }
.es-movil .comparacion-zona { grid-template-columns: 1fr; row-gap: var(--marca-esp-md); }
.es-movil .comparacion-separador { display: none; }

/* ================================================================================
   `fichas` — rejilla de fichas ilustradas: foto arriba, rótulo abajo. Sin volteo ni capa.

   EXTRAÍDO de «Requisitos obligatorios» (Módulo 3): `commandset-54`, 196×303 en
   x = 399/608/818/1027 con y=200 (paso 209,33), relleno gris #D9D9D9 · foto de 180×168 pegada
   al borde superior · rótulo 18 pt navy apoyado ABAJO.
   ================================================================================ */

.layout-fichas { padding: 0; position: relative; }

.fichas-rejilla {
  position: absolute;
  left: var(--fichas-x, 399px);
  top: var(--fichas-y, 200px);
  width: var(--fichas-ancho, 815px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ficha {
  box-sizing: border-box;
  width: var(--ficha-ancho, 196px);
  min-height: var(--ficha-alto, 303px);
  display: flex;
  flex-direction: column;
  /* El rótulo se apoya abajo: la foto queda pegada al borde superior y el aire sobrante cae en
     el medio, que es como lo compone el original (`valign: bottom` en su cuadro de texto). */
  justify-content: flex-start;
  padding: var(--ficha-relleno, 8px 8px 14px);
  border-radius: 10px;
  background: var(--marca-neutro);
}
.ficha-imagen {
  display: block;
  width: var(--ficha-imagen-ancho, 180px);
  height: var(--ficha-imagen-alto, 168px);
  margin: var(--ficha-imagen-desde, 12px) auto 0;
  object-fit: cover;
  border-radius: 6px;
}
.ficha-rotulo {
  margin: auto 0 0;
  padding: 5px 10px;
  color: var(--marca-primario);
  /* 18 pt × 4/3. */
  font-size: var(--ficha-tam, 24px);
  line-height: 1.2;
  text-align: center;
}

.es-movil .fichas-rejilla {
  position: static;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--marca-esp-md);
}
.es-movil .ficha { width: 100%; min-height: 0; }

/* ================================================================================
   `clasificar · forma: tablero` — varias fichas arriba, pocos destinos abajo.

   EXTRAÍDO de «Actividad» (Módulo 3): fichas `commandset-148` de 255×89 en y=197,
   x = 399/679/959 —paso 280— · destinos 402×105 en y=380, x = 399 y 812 · ENVIAR
   `commandset-152` de 273×55 en (676,588).

   Los colores de los destinos salen del ROL que declara el guion (`correcto`, `incorrecto`),
   nunca de un hex escrito acá (§10).
   ================================================================================ */

.es-cromo-lamina .clasificar-zona--tablero {
  position: absolute;
  left: var(--tablero-x, 399px);
  top: var(--tablero-y, 197px);
  width: var(--tablero-ancho, 815px);
  display: block;
}

.tablero-fichas {
  display: flex;
  justify-content: space-between;
  gap: var(--tablero-ficha-hueco, 25px);
  min-height: var(--tablero-ficha-alto, 89px);
}

.es-cromo-lamina .clasificar-zona--tablero .tablero-ficha {
  flex: 1;
  width: auto;
  min-height: var(--tablero-ficha-alto, 89px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Los insets del cuadro de texto del original: 10 a los lados, 5 arriba. */
  padding: 5px 10px;
  border: none;
  border-radius: 14.83px;
  background: var(--marca-primario);
  box-shadow: none;
  cursor: grab;
}
.es-cromo-lamina .clasificar-zona--tablero .tablero-ficha .texto {
  margin: 0;
  color: var(--marca-texto-inverso);
  /* 18 pt × 4/3. */
  font-size: var(--tablero-ficha-tam, 24px);
  line-height: 29px;
  font-weight: 400;
  text-align: center;
}

.tablero-destinos {
  margin-top: var(--tablero-destinos-desde, 94px);
  display: flex;
  justify-content: space-between;
  gap: var(--tablero-destino-hueco, 11px);
}

.tablero-caja {
  flex: 1;
  box-sizing: border-box;
  min-height: var(--tablero-destino-alto, 105px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  /* Sin rol declarado, el neutro: un destino tiene que verse aunque el guion no le dé color. */
  background: var(--marca-neutro);
  color: var(--marca-primario);
}
/* Los dos roles funcionales que la marca declara. El valor vive en `marca.json`, acá solo se
   nombra el rol — cambiar el verde de un cliente no puede obligar a tocar el motor. */
.tablero-caja.es-rol-correcto {
  background: var(--marca-correcto);
  color: var(--marca-texto-inverso);
}
.tablero-caja.es-rol-incorrecto {
  background: var(--marca-incorrecto);
  color: var(--marca-texto-inverso);
}
.tablero-caja-rotulo {
  margin: 0;
  /* 20 pt × 4/3. */
  font-size: var(--tablero-destino-tam, 26.67px);
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}
/* Las fichas soltadas se apilan sin empujar el rótulo fuera de la caja. */
.tablero-caja-piezas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tablero-caja-piezas:empty { display: none; }
.tablero-caja .tablero-ficha { min-height: 0; }

.tablero-caja.sobre-drop {
  box-shadow: 0 0 0 4px rgba(var(--marca-secundario-rgb), 0.75);
}

/* ENVIAR: al pie del tablero y centrado, no abajo a la derecha del lienzo. */
.es-cromo-lamina .layout-clasificar--tablero .clasificar-enviar {
  left: var(--tablero-enviar-x, 676px);
  top: var(--tablero-enviar-y, 588px);
  width: var(--tablero-enviar-ancho, 273px);
  height: var(--tablero-enviar-alto, 55px);
  border-radius: 9.17px 0 9.17px 0;
  font-size: 26.67px;
  text-transform: none;
}

.es-movil .clasificar-zona--tablero { position: static; width: 100%; }
.es-movil .tablero-fichas,
.es-movil .tablero-destinos { flex-direction: column; }
.es-movil .tablero-destinos { margin-top: var(--marca-esp-md); }