/* GENERADO desde sistema/curso.css — no editar acá.
   Se regenera con: python3 motor/publicar_biblioteca.py <curso> */
/* ==========================================================================
   SISTEMA VISUAL FACTORÍA · V1
   El curso se dibuja una sola vez. Este archivo lo consumen los dos destinos:
   el paquete SCORM que se sube al LMS del cliente y la biblioteca del sitio.

   Antes había dos reproductores escritos por separado, con dos CSS y dos
   paletas, y ya se habían desincronizado (`retro` en uno, `feedback` en el
   otro). Un curso que se ve distinto según dónde se abra no es un producto:
   son dos.

   No hay tema oscuro. La superficie del curso es clara, los titulares son
   tinta y el color del cliente es acento — nunca fondo grande.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · TOKENS
   Nadie escribe un color en un componente. Todo cuelga de acá, porque el
   acento cambia por cliente y tiene que cambiar en un solo lugar.
   -------------------------------------------------------------------------- */
.curso{
  /* Acento por defecto: la lima de FACTORÍA. Un curso sin marca de cliente
     es un curso FACTORÍA, no un curso sin color. */
  --acento:#D4F70A;
  --acento-suave:#F7FDD9;
  --acento-borde:#E3F97A;
  --acento-hover:#C2E309;
  /* El color del texto SOBRE el acento sale de medir, no de elegir: por cada
     acento se usa el que da más contraste, y ninguno baja de 4,5:1. Por eso
     rojo y verde llevan tinta y no blanco, aunque blanco se vea más limpio:
     blanco sobre verde da 3,03:1 y no se lee. */
  --sobre-acento:#0E0E10;
  /* El acento como TEXTO o icono sobre fondo claro. No es el mismo color:
     la lima sobre blanco no se lee, y el amarillo del cliente tampoco. Cada
     acento declara su variante legible y los componentes usan esta, nunca
     --acento, para pintar letras. */
  --acento-texto:#5A6400;

  --fondo:#FFFFFF;
  --fondo-2:#FAFAF8;
  --superficie:#FFFFFF;
  --superficie-2:#F5F4EF;

  --tinta:#0E0E10;
  --tinta-2:#5D5D57;
  --tinta-3:#8A8880;
  --borde:#E4E4DE;
  --borde-fuerte:#CFCFC7;

  /* SEMÁNTICOS. No pertenecen a la marca y no cambian con el acento del
     cliente: un curso con acento rojo no puede tener un «Verificado» rojo,
     porque el rojo ya significa error en la misma pantalla. Lo que el color
     dice acá es lo que pasó, no de quién es el curso. */
  --ok:#2F7D42;
  --ok-suave:#EDF7EF;
  --ok-borde:#BFDFC6;
  --ok-claro:#9FD8A8;          /* el ok sobre fondo tinta */
  --error:#B3261E;
  --error-suave:#FBEAE8;
  --error-borde:#EFC7C3;
  --aviso:#8A6A00;
  --aviso-suave:#FFF8E1;
  --aviso-borde:#EEDD83;

  /* La evidencia es del sistema, no del cliente: «Verificado» se ve igual en
     los seis colores. Es un alias del semántico y no un color nuevo, para que
     no puedan separarse sin querer. */
  --verificado:var(--ok);
  --verificado-suave:var(--ok-suave);
  --verificado-borde:var(--ok-borde);

  /* Tipografías. Las del sitio primero; el stack de sistema detrás, porque
     dentro de un LMS no siempre hay red para traer una fuente. */
  --f-titulo:'Familjen Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto:'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --t-display:clamp(2.4rem, 5.4vw, 4rem);
  --t-h1:clamp(1.9rem, 3.5vw, 3.4rem);
  --t-h2:clamp(1.25rem, 2.2vw, 1.6rem);
  --t-h3:1.02rem;
  --t-body:1rem;
  --t-small:0.87rem;
  --t-label:0.68rem;

  --e1:4px;  --e2:8px;  --e3:12px; --e4:18px;
  --e5:26px; --e6:38px; --e7:56px; --e8:80px;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
  --sombra:0 1px 2px rgba(14,14,16,.04), 0 12px 32px -18px rgba(14,14,16,.22);

  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:var(--t-body);
  font-weight:500;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.curso *, .curso *::before, .curso *::after{ box-sizing:border-box; }

/* --------------------------------------------------------------------------
   2 · PALETA CERRADA
   Seis colores y nada más. No hay picker ni campo hexadecimal: el cliente
   elige de acá o se queda con la lima. Que la paleta viva en el CSS y no en
   el JS es a propósito — hay un solo lugar donde está escrita.
   -------------------------------------------------------------------------- */
.curso[data-acento="rojo"]{
  --acento:#E5484D; --acento-suave:#FDEBEC; --acento-borde:#F3B7BA;
  --acento-hover:#CF3E43; --sobre-acento:#0E0E10; --acento-texto:#B7343A; }
.curso[data-acento="verde"]{
  --acento:#42A846; --acento-suave:#EDF8EE; --acento-borde:#B9DEBB;
  --acento-hover:#39933D; --sobre-acento:#0E0E10; --acento-texto:#2E7A33; }
.curso[data-acento="amarillo"]{
  --acento:#D9B800; --acento-suave:#FFF9D8; --acento-borde:#EEDD83;
  --acento-hover:#BEA100; --sobre-acento:#0E0E10; --acento-texto:#8A7300; }
.curso[data-acento="naranjo"]{
  --acento:#F28C28; --acento-suave:#FFF0E1; --acento-borde:#F6C796;
  --acento-hover:#D9791F; --sobre-acento:#0E0E10; --acento-texto:#A85B10; }
.curso[data-acento="azul"]{
  --acento:#2F6FDB; --acento-suave:#EAF1FC; --acento-borde:#AFC7F1;
  --acento-hover:#285FBC; --sobre-acento:#FFFFFF; --acento-texto:#275FBD; }
.curso[data-acento="morado"]{
  --acento:#7B61D1; --acento-suave:#F1EDFB; --acento-borde:#C9BCEB;
  --acento-hover:#6951B5; --sobre-acento:#FFFFFF; --acento-texto:#5C46A8; }

/* --------------------------------------------------------------------------
   3 · SHELL
   -------------------------------------------------------------------------- */
.curso{ display:flex; flex-direction:column; min-height:0; }

/* Banda DEMO · persistente, sobria y no descartable. Va arriba de todo para
   que se lea antes que el contenido, y usa el rojo semántico y no el acento de
   marca: no es una decoración del curso, es una advertencia sobre él. */
.curso-demo{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:10px clamp(24px, 3.4vw, 54px); background:var(--aviso-suave);
  border-bottom:1px solid var(--aviso-borde); flex:none; }
.curso-demo b{ font-family:var(--f-mono); font-size:0.62rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--aviso); }
.curso-demo span{ font-size:0.8rem; line-height:1.45; color:var(--tinta-2); }
@media (max-width:640px){ .curso-demo{ padding:9px 18px; } }

.curso-top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e5);
  padding:22px clamp(24px, 3.4vw, 54px); border-bottom:1px solid var(--borde);
  background:var(--fondo); flex:none; }
.curso-marca{ display:flex; align-items:center; gap:var(--e5); min-width:0; }
/* El logo del cliente nunca se deforma ni crece: alto fijo, ancho libre,
   `contain`. Un logo estirado destruye más marca que la que aporta. */
.curso-logo{ height:30px; width:auto; max-width:170px; object-fit:contain;
  object-position:left center; display:block; flex:none; }
.curso-empresa{ font-family:var(--f-titulo); font-weight:700; font-size:1.32rem;
  letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.curso-sep{ width:1px; height:34px; background:var(--borde); flex:none; }
.curso-nombre{ font-size:0.72rem; font-family:var(--f-mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--tinta-2); line-height:1.5; max-width:30ch;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.curso-top-fin{ display:flex; align-items:center; gap:clamp(20px, 2.6vw, 40px); flex:none; }
.curso-firma{ font-family:var(--f-titulo); font-weight:700; font-size:0.72rem;
  letter-spacing:.04em; color:var(--tinta-3); }

/* Los controles del reproductor. Se dibujan porque son parte del chrome
   aprobado; van `disabled` porque detrás todavía no hay nada que hacer. Se
   pintan como los demás y no atenuados: atenuarlos sería decir «se activan
   más tarde», y eso tampoco está prometido. */
.curso-control{ display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; padding:0; color:var(--tinta); cursor:default;
  font:inherit; opacity:1; }
.curso-control span{ font-family:var(--f-mono); font-size:0.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-2); }
.curso-cerrar{ background:none; border:none; color:var(--tinta-3); font-size:1.4rem;
  line-height:1; cursor:pointer; padding:2px 8px; border-radius:var(--r-sm); }
.curso-cerrar:hover{ color:var(--tinta); background:var(--superficie-2); }

/* El contenido ocupa la pantalla en vez de flotar en ella: el tope es alto y
   el margen lateral corto. «Aireado» no es «vacío». */
.curso-cuerpo{ width:100%; max-width:1560px; margin-inline:auto;
  padding:clamp(26px, 3vw, 42px) clamp(24px, 3.4vw, 54px) clamp(24px, 2.6vw, 38px);
  flex:1; min-height:0; display:flex; flex-direction:column; }
.curso-cuerpo:focus{ outline:none; }

/* El pie es la navegación del reproductor: atrás a la izquierda, el avance de
   la lección al centro y el paso siguiente a la derecha, en el color del
   cliente. Liviano; nada de barra administrativa. */
.curso-pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e5);
  padding:18px clamp(24px, 3.4vw, 54px); border-top:1px solid var(--borde);
  background:var(--fondo); flex:none; }
.curso-avance{ display:flex; align-items:center; gap:clamp(14px, 1.4vw, 22px); flex:1;
  justify-content:center; min-width:0; }
.curso-avance .rotulo, .curso-cuenta{ font-family:var(--f-mono); font-size:0.66rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tinta-3); white-space:nowrap; }
.curso-avance .pct{ font-family:var(--f-mono); font-size:0.78rem; font-weight:600;
  letter-spacing:.04em; color:var(--acento-texto); }
.curso-avance .barra{ flex:1; max-width:430px; height:6px; border-radius:var(--r-full);
  background:var(--superficie-2); overflow:hidden; }
.curso-avance .barra i{ display:block; height:100%; width:0; background:var(--acento);
  border-radius:var(--r-full); transition:width .35s ease; }
.curso-cuenta b{ color:var(--tinta); font-weight:600; font-size:0.82rem; }

/* --------------------------------------------------------------------------
   4 · BOTONES
   -------------------------------------------------------------------------- */
/* En el pie los rótulos van en versalitas con tracking, como la referencia. */
.curso-pie .c-bt{ text-transform:uppercase; letter-spacing:.09em; font-size:0.78rem;
  padding:14px 26px; }
.c-bt{ display:inline-flex; align-items:center; gap:var(--e2); font:inherit;
  font-weight:600; font-size:var(--t-small);
  border-radius:var(--r-full); padding:12px 26px; cursor:pointer;
  border:1px solid var(--borde-fuerte); background:var(--superficie); color:var(--tinta);
  transition:background .15s, border-color .15s, color .15s; }
.c-bt:hover:not(:disabled){ border-color:var(--tinta); }
.c-bt.principal{ background:var(--tinta); border-color:var(--tinta); color:var(--fondo); }
.c-bt.principal:hover:not(:disabled){ background:#26262A; }
.c-bt.acento{ background:var(--acento); border-color:var(--acento); color:var(--sobre-acento); }
.c-bt.grande{ font-size:1rem; padding:15px 30px; }
.c-bt.acento:hover:not(:disabled){ background:var(--acento-hover); border-color:var(--acento-hover); }
.c-bt:disabled{ opacity:.38; cursor:default; }
.c-bt:focus-visible, .c-opcion:focus-visible, .curso-cerrar:focus-visible,
.c-ev-accion:focus-visible{ outline:3px solid var(--acento-texto); outline-offset:2px; }

/* --------------------------------------------------------------------------
   5 · TIPOGRAFÍA DE PANTALLA
   Titulares grandes en tinta. El acento nunca pinta un titular.
   -------------------------------------------------------------------------- */
/* El rótulo ahora dice módulo, lección y sus títulos: necesita envolver en dos
   líneas en vez de quedar en una sola cortada. */
.c-paso{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--acento-texto); font-weight:600;
  margin-bottom:var(--e4); max-width:74ch; line-height:1.7; }
/* El titular manda en la pantalla. Peso 500 de base y 700 en el arranque de la
   frase: la referencia entra en dos tonos, y ese contraste es lo que lo hace
   editorial en vez de un h1 de página web. El `<b>` lo pone el curso. */
.c-titulo{ font-family:var(--f-titulo); font-weight:500; font-size:var(--t-h1);
  line-height:1.02; letter-spacing:-.03em; margin:0 0 clamp(26px, 3vw, 42px);
  color:var(--tinta); max-width:30ch; }
.c-titulo b{ font-weight:700; }
.c-titulo.ancho{ max-width:none; }
.c-bajada{ font-size:1.08rem; line-height:1.6; color:var(--tinta-2);
  margin:calc(-1 * var(--e4)) 0 clamp(20px, 2.1vw, 30px); max-width:60ch; }
.curso-cuerpo p{ margin:0 0 var(--e5); max-width:62ch; font-size:1.02rem;
  line-height:1.68; color:var(--tinta-2); }
.c-cierre{ border-left:3px solid var(--acento); padding:var(--e2) 0 var(--e2) var(--e5);
  font-weight:600; font-size:1.06rem; line-height:1.6; color:var(--tinta);
  margin:var(--e6) 0 0; max-width:58ch; }

.c-lista{ list-style:none; padding:0; margin:0 0 var(--e6); max-width:62ch; }
.c-lista li{ position:relative; padding-left:var(--e5); margin-bottom:var(--e4);
  font-size:1.02rem; line-height:1.62; color:var(--tinta-2); }
.c-lista li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  background:var(--acento); border-radius:2px; }

/* --------------------------------------------------------------------------
   6 · TARJETAS DE CONCEPTO  (tipo: tarjetas)
   -------------------------------------------------------------------------- */
.c-tarjetas{ display:grid; gap:clamp(16px, 1.6vw, 26px); margin-bottom:clamp(20px, 2.4vw, 34px);
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
/* Las tarjetas conservan su altura y el aire sobrante se va al espacio entre
   ellas y el bloque de abajo: estirarlas dejaba media tarjeta hueca, que es el
   defecto contrario al que se quería arreglar. */
.curso-cuerpo > .c-tarjetas{ margin-bottom:auto; min-height:300px; }
.curso-cuerpo > .c-enfasis{ margin-top:clamp(22px, 2.6vw, 38px); }
/* La tarjeta de la referencia: el número ocupa la esquina, el icono respira
   debajo, el título va en versalitas y una línea corta de acento lo separa del
   texto. Borde suave, radio moderado y nada de sombra. */
.c-tarjeta{ position:relative; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-md);
  padding:clamp(26px, 4.4vw, 74px) clamp(26px, 3.2vw, 50px) clamp(26px, 2.3vw, 34px);
  padding-top:clamp(42px, 3.3vw, 50px); }
/* El número vive en su esquina, cuadrado y plano, fuera de la columna de
   texto. Es la marca de orden de la referencia, no una etiqueta. */
.c-tarjeta .num{ position:absolute; top:20px; left:20px;
  display:flex; align-items:center; justify-content:center; min-width:46px; height:44px;
  font-family:var(--f-mono); font-weight:600; font-size:1rem;
  background:var(--acento); color:var(--sobre-acento); border-radius:2px; }
.c-tarjeta .icono{ display:block; margin-bottom:clamp(18px, 1.7vw, 25px);
  color:var(--acento); }
/* El grosor va en unidades del viewBox, así que al agrandar el icono el trazo
   crece con él. A 58px, 1.6 se ve como un marcador; 1.15 lo deja como la
   referencia. */
.c-tarjeta .icono svg{ stroke-width:1.05; }
.c-tarjeta h3{ font-family:var(--f-titulo); font-weight:700; font-size:1.22rem;
  letter-spacing:.015em; text-transform:uppercase; margin:0 0 var(--e4); line-height:1.28; }
.c-tarjeta .regla{ width:40px; height:3px; background:var(--acento);
  margin-bottom:clamp(16px, 1.5vw, 22px); }
.c-tarjeta p{ font-size:1rem; line-height:1.75; color:var(--tinta-2); margin:0;
  max-width:34ch; }

/* Una idea memorable es una composición tipográfica, no un cartel de aviso: el
   fondo se queda blanco, la frase hace el trabajo y el acento aparece como
   marca, línea y borde. La verificación va dentro, a la derecha, pegada a la
   afirmación que respalda. */
.c-enfasis{ display:flex; align-items:stretch; gap:clamp(20px, 2.2vw, 34px);
  border:1px solid var(--acento-borde); background:var(--fondo);
  border-radius:var(--r-md); padding:clamp(22px, 2.2vw, 32px) clamp(24px, 2.8vw, 44px); }
.c-enfasis .marca-e{ flex:none; align-self:center; width:76px; height:76px;
  border-radius:50%; border:2px solid var(--acento); color:var(--acento);
  display:flex; align-items:center; justify-content:center; }
.c-enfasis .frase{ display:flex; align-items:center; font-family:var(--f-titulo);
  font-weight:700; font-size:clamp(1.7rem, 3.3vw, 3.35rem); line-height:.95;
  letter-spacing:-.05em; text-transform:uppercase; color:var(--tinta); flex:none;
  white-space:nowrap; padding-left:clamp(20px, 2.2vw, 34px);
  border-left:1px solid var(--borde); }
/* La explicación tiene piso propio: por debajo de ~28ch el texto se parte en
   palabras sueltas y deja de leerse. Si con ese piso ya no cabe todo en una
   fila, el bloque baja la verificación a un segundo nivel en vez de asfixiar
   la explicación. */
.c-enfasis .apoyo{ display:flex; align-items:center; font-size:0.97rem; line-height:1.6;
  color:var(--tinta-2); max-width:36ch; flex:1 1 auto; min-width:28ch;
  padding-left:clamp(20px, 2.2vw, 34px); border-left:1px solid var(--borde); }
/* Y la píldora deja de ser inencogible: antes reclamaba todo su ancho de una
   línea y se lo quitaba a la explicación. Acá puede envolver. */
.c-enfasis .apoyo p{ margin:0; font:inherit; color:inherit; max-width:none; }
.c-enfasis .sello{ flex:none; margin-left:auto; display:flex; align-items:center; }
.c-enfasis .sello .c-ev-sello{ flex-wrap:wrap; max-width:100%; }
.c-enfasis .sello .c-ev-sello span{ white-space:normal; overflow:visible;
  text-overflow:clip; }
@media (min-width:641px) and (max-width:1400px){
  .c-enfasis{ flex-wrap:wrap; }
  .c-enfasis .sello{ margin-left:0; width:100%; padding-top:var(--e4);
    border-top:1px solid var(--borde); } }
@media (max-width:760px){
  /* En angosto se apila. Sin `column` los dos flex-item se encogen en vez de
     envolver, y el apoyo queda en una columna de una palabra por línea. */
  .c-enfasis{ flex-direction:column; align-items:flex-start;
    padding:var(--e6) var(--e5); gap:var(--e5); }
  .c-enfasis .frase, .c-enfasis .apoyo{ max-width:100%; width:100%;
    padding-left:0; border-left:none; }
  .c-enfasis .apoyo{ border-top:1px solid var(--borde); padding-top:var(--e5); } }

.c-comparacion{ display:grid; gap:var(--e4); margin-bottom:var(--e5);
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.c-columna{ border:1px solid var(--borde); border-radius:var(--r-md);
  background:var(--superficie); padding:clamp(24px, 2.6vw, 38px); }
.c-columna h3{ font-family:var(--f-titulo); font-weight:700; font-size:1.12rem;
  letter-spacing:.015em; margin:0 0 var(--e5); display:flex; align-items:center;
  gap:var(--e3); flex-wrap:wrap; }
.c-columna .marca-col{ font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-sm);
  background:var(--superficie-2); color:var(--tinta-2); }
.c-columna.si{ border-color:var(--ok-borde); background:var(--ok-suave); }
.c-columna.si .marca-col{ background:#D7EEDC; color:var(--ok); }
.c-columna.no{ border-color:var(--error-borde); background:var(--error-suave); }
.c-columna.no .marca-col{ background:#F6D8D5; color:var(--error); }
.c-columna ul{ list-style:none; padding:0; margin:0; }
.c-columna li{ position:relative; padding-left:var(--e5); margin-bottom:var(--e4);
  font-size:0.98rem; line-height:1.6; color:var(--tinta-2); }
.c-columna li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px;
  border-radius:50%; background:var(--tinta-3); }
.c-columna.si li::before{ background:var(--ok); }
.c-columna.no li::before{ background:var(--error); }

/* --------------------------------------------------------------------------
   9 · PROCESO  (tipo: proceso) — etapas, plazos, responsables
   -------------------------------------------------------------------------- */
.c-proceso{ margin-bottom:var(--e5); }
.c-paso-p{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--e5);
  padding-bottom:var(--e6); }
.c-paso-p:last-child{ padding-bottom:0; }
.c-paso-p .bolita{ position:relative; width:38px; height:38px; border-radius:50%;
  background:var(--acento); color:var(--sobre-acento); font-family:var(--f-mono);
  font-weight:600; font-size:0.95rem; display:flex; align-items:center;
  justify-content:center; flex:none; z-index:1; }
/* La línea del proceso baja desde cada bolita, menos la última. */
.c-paso-p:not(:last-child)::before{ content:""; position:absolute; left:18px; top:38px;
  bottom:0; width:2px; background:var(--borde); }
.c-paso-p .cuando{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:var(--e1); }
.c-paso-p h3{ font-family:var(--f-titulo); font-weight:700; font-size:1.12rem;
  margin:0 0 var(--e3); }
.c-paso-p p{ font-size:0.98rem; line-height:1.6; color:var(--tinta-2); margin:0;
  max-width:58ch; }
.c-paso-p .quien{ display:inline-block; margin-top:var(--e2); font-family:var(--f-mono);
  font-size:var(--t-label); letter-spacing:.06em; background:var(--superficie-2);
  border-radius:var(--r-sm); padding:3px 9px; color:var(--tinta-2); }

/* --------------------------------------------------------------------------
   10 · ESCENARIO + QUIZ  (tipos: escenario, quiz)
   -------------------------------------------------------------------------- */
.c-dos{ display:grid; gap:clamp(18px, 1.9vw, 30px);
  grid-template-columns:minmax(0,0.53fr) minmax(0,1fr); align-items:start; }
@media (max-width:860px){ .c-dos{ grid-template-columns:minmax(0,1fr); } }
/* Las columnas no pueden crecer con su contenido: la píldora «Verificado»
   lleva `nowrap` y, sin esto, una referencia larga estira la grilla más allá
   de la pantalla del teléfono. */
.c-dos > *, .c-trazo > *, .c-tarjetas > *, .c-comparacion > *, .c-cols > *{ min-width:0; }

/* Escenario sin pregunta: una columna, con medida de lectura, para que el caso
   no se estire a lo ancho de la pantalla ni se exprima en un tercio. */
.c-solo{ max-width:72ch; }
.c-panel{ border:1px solid var(--borde); border-radius:var(--r-md);
  background:var(--superficie); padding:clamp(22px, 2.1vw, 32px); }
/* El rótulo del panel: pictograma y palabra en una fila, y una línea corta de
   acento debajo. La línea larga cruzando el panel lo partía en dos. */
.c-panel-tit{ display:flex; align-items:center; gap:var(--e3);
  font-family:var(--f-titulo); font-weight:700; font-size:1.02rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tinta); }
.c-panel-tit .ico{ color:var(--acento); flex:none; }
.c-panel-regla{ width:30px; height:2px; background:var(--acento);
  margin:var(--e3) 0 clamp(18px, 1.7vw, 24px) 42px; }
.c-caso{ font-size:1.06rem; line-height:1.78; color:var(--tinta); }
.c-etiqueta-caso{ display:inline-flex; align-items:center; gap:var(--e2);
  margin-top:clamp(18px, 1.9vw, 28px); border:1px solid var(--borde);
  border-radius:var(--r-full); padding:9px 16px; font-size:0.9rem;
  color:var(--tinta-2); }
.c-etiqueta-caso .ico{ color:var(--tinta-3); }
/* La columna del caso: el panel y, debajo, su verificación. */
.c-caso-col{ display:flex; flex-direction:column; gap:var(--e3); }
.c-caso-sello{ display:flex; }

/* Compactado propio del escenario: el shell no se toca, se ajusta lo que es
   del layout del quiz para que la pantalla entre completa en el viewport. */
.c-dos .c-panel{ padding:clamp(20px, 1.9vw, 28px); }
.c-dos .c-opcion{ padding:12px 16px; margin-bottom:8px; font-size:0.95rem; }
.c-dos .c-opcion .letra{ width:30px; height:30px; }
.c-dos .c-pregunta{ font-size:1.12rem; margin-bottom:var(--e3); }
.c-dos .c-fb{ padding:16px 20px; font-size:0.95rem; }
.c-dos .c-panel-regla{ margin:var(--e2) 0 var(--e3) 42px; }
.c-dos .c-caso{ font-size:1.02rem; line-height:1.7; }
/* El bloque de entrada se aprieta un punto solo en la pantalla de escenario,
   que es la que tiene que caber entera con sus cuatro alternativas y su
   retroalimentación. El tipo lo declara el reproductor en `data-pantalla`, no
   se infiere del DOM: dentro del LMS de un cliente no elegimos el navegador. */
.curso-cuerpo[data-pantalla="escenario"] .c-titulo{ margin-bottom:var(--e5); }
.curso-cuerpo[data-pantalla="escenario"] .c-bajada{ margin-bottom:var(--e5); }
.c-dos .c-panel{ padding:clamp(18px, 1.35vw, 21px); }
.c-dos .c-opcion{ padding:10px 16px; margin-bottom:6px; }
.c-dos .c-fb{ padding:13px 18px; }

/* El quiz suelto pone la explicación al lado cuando hay ancho. */
.c-quiz{ display:grid; gap:var(--e5); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1040px){
  .c-quiz{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); } }

.c-pregunta{ font-family:var(--f-titulo); font-weight:700; font-size:1.18rem;
  line-height:1.35; letter-spacing:-.005em; margin:0 0 var(--e4); }
.c-opcion{ display:flex; align-items:center; gap:var(--e4); width:100%; text-align:left;
  font:inherit; font-size:0.97rem; border:1px solid var(--borde);
  background:var(--superficie); border-radius:var(--r-md); padding:13px 18px;
  margin-bottom:9px; cursor:pointer;
  transition:border-color .15s, background .15s; }
.c-opcion .letra{ flex:none; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--borde-fuerte); display:flex; align-items:center;
  justify-content:center; font-family:var(--f-mono); font-size:0.8rem;
  font-weight:600; color:var(--tinta-2); }
/* La marca del resultado va al final de la alternativa, como en la referencia. */
.c-opcion .marca{ margin-left:auto; flex:none; display:flex; align-items:center;
  justify-content:center; width:26px; height:26px; border-radius:50%; color:#fff; }
.c-opcion.bien .marca{ background:var(--ok); }
.c-opcion.mal .marca{ background:var(--error); }
.c-opcion:hover:not(:disabled){ border-color:var(--tinta-3); background:var(--fondo-2); }
/* Respondida, la pregunta se bloquea pero se sigue leyendo: el alumno todavía
   tiene que poder comparar su respuesta con las otras. El gris del navegador
   para botones deshabilitados deja las alternativas ilegibles. */
.c-opcion:disabled{ cursor:default; color:var(--tinta); opacity:1; }
.c-opcion:disabled .letra{ color:var(--tinta-2); }
.c-opcion.bien:disabled .letra, .c-opcion.mal:disabled .letra{ color:#fff; }
.c-opcion.elegida{ border-color:var(--acento); background:var(--acento-suave); }
.c-opcion.elegida .letra{ border-color:var(--acento); color:var(--acento-texto); }
.c-opcion.bien{ border-color:var(--ok); background:var(--ok-suave); font-weight:600; }
.c-opcion.bien .letra{ background:var(--ok); border-color:var(--ok); color:#fff; }
.c-opcion.mal{ border-color:var(--error); background:var(--error-suave); }
.c-opcion.mal .letra{ background:var(--error); border-color:var(--error); color:#fff; }

/* La semántica del resultado se dice con un borde, un rótulo y un punto de
   color; la explicación se lee sobre superficie neutra. Medio panel pintado de
   rosado grita el error y esconde lo único que sirve, que es el porqué. */
.c-fb{ display:none; border-radius:var(--r-md); padding:clamp(18px, 1.8vw, 24px);
  border:1px solid var(--borde); border-left:3px solid var(--borde-fuerte);
  background:var(--fondo-2); font-size:0.98rem; line-height:1.65; }
.c-fb.ver{ display:flex; gap:var(--e4); align-items:flex-start; }
.c-fb > .ico{ flex:none; color:var(--tinta-3); }
.c-fb.bien > .ico{ color:var(--ok); }
.c-fb.mal > .ico{ color:var(--error); }
.c-fb p{ margin:0; font-size:inherit; line-height:inherit; color:var(--tinta-2);
  max-width:none; }
.c-fb .sello{ margin-top:var(--e4); }
.c-fb.bien{ border-left-color:var(--ok); }
.c-fb.mal{ border-left-color:var(--error); }
.c-fb b{ display:block; font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--e3);
  color:var(--tinta-2); }
.c-fb.bien > div > b{ color:var(--ok); }
.c-fb.mal > div > b{ color:var(--error); }
.c-fb .correcta{ display:block; margin-top:var(--e4); padding-top:var(--e4);
  border-top:1px solid var(--borde); }
.c-fb .correcta p{ margin-top:var(--e2); }
.c-fb .correcta > b{ color:var(--tinta-3); }
/* En el quiz de dos columnas el feedback no se pega al borde de arriba. */
@media (min-width:1040px){ .c-quiz > .c-fb{ position:sticky; top:var(--e5); } }

/* --------------------------------------------------------------------------
   11 · EVIDENCIA — el diferencial. No es metadata escondida al pie.
   -------------------------------------------------------------------------- */
.c-ev-sello{ display:inline-flex; align-items:center; gap:var(--e2); min-width:0;
  border:1px solid var(--verificado-borde); background:var(--verificado-suave);
  border-radius:var(--r-full); padding:6px 14px; font-size:var(--t-small);
  color:var(--tinta); max-width:100%; }
.c-ev-sello .tick{ flex:none; color:var(--verificado); }
.c-ev-sello b{ font-weight:700; }
.c-ev-sello span{ color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

/* El nivel por defecto: una línea que dice que está verificado y ofrece ver la
   fuente. Ocupa lo que ocupa una garantía, no lo que ocupa un capítulo. */
.c-ev-compacta{ margin-top:var(--e6); padding-top:var(--e4);
  border-top:1px solid var(--borde); }
.c-ev-linea{ display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap; }
.c-ev-linea .c-ev-frag{ margin-left:calc(-1 * var(--e2)); }
.c-ev-accion.abrir{ margin-left:auto; font-weight:600; color:var(--tinta); }
.c-ev-accion.abrir .ico{ transition:transform .2s ease; }
.c-ev-compacta.abierta .c-ev-accion.abrir .ico{ transform:rotate(90deg); }
.c-ev-detalle{ display:none; margin-top:var(--e4); }
.c-ev-compacta.abierta .c-ev-detalle{ display:block; }

.c-ev-carta{ border:1px solid var(--borde); border-radius:var(--r-lg);
  background:var(--superficie); padding:var(--e6); }
.c-ev-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  flex-wrap:wrap; margin-bottom:var(--e4); }
.c-ev-frag{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em;
  color:var(--tinta-3); }
.c-ev-cita{ background:var(--fondo-2); border:1px solid var(--borde);
  border-radius:var(--r-md); padding:var(--e5) var(--e5); font-size:0.95rem;
  line-height:1.72; color:var(--tinta-2); }
/* El resaltado marca el trozo que sostiene la afirmación: es evidencia, no
   marca. Va en el color de verificado, igual en los seis acentos. */
.c-ev-cita mark{ background:var(--verificado-suave); border-bottom:2px solid var(--verificado);
  color:inherit; padding:1px 0; }
.c-ev-acciones{ display:flex; gap:var(--e4); flex-wrap:wrap; margin-top:var(--e4);
  padding-top:var(--e3); border-top:1px solid var(--borde); }
.c-ev-accion{ display:inline-flex; align-items:center; gap:var(--e2); background:none;
  border:none; padding:0; font:inherit; font-size:var(--t-small); color:var(--tinta-2);
  cursor:pointer; }
.c-ev-accion:hover{ color:var(--tinta); }
.c-ev-contexto{ display:none; margin-top:var(--e4); font-size:var(--t-small);
  color:var(--tinta-2); }
.c-ev-contexto.ver{ display:block; }

/* La trazabilidad: afirmación → fuente. El conector explica la relación. */
.c-trazo{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);
  gap:var(--e5); align-items:center; }
.c-trazo .afirma{ border:1px solid var(--borde); border-radius:var(--r-md);
  background:var(--superficie); padding:var(--e5); }
.c-trazo .afirma p{ font-family:var(--f-titulo); font-weight:700; font-size:var(--t-h2);
  line-height:1.25; margin:0; max-width:none; }
.c-trazo .flecha{ text-align:center; color:var(--verificado); }
.c-trazo .flecha .rotulo{ display:block; font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); margin-top:var(--e2); }
@media (max-width:860px){
  .c-trazo{ grid-template-columns:minmax(0,1fr); gap:var(--e4); }
  .c-trazo .flecha svg{ transform:rotate(90deg); } }

.c-garantias{ display:grid; gap:var(--e4); margin-top:var(--e5); padding-top:var(--e5);
  border-top:1px solid var(--borde);
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.c-garantia{ display:flex; gap:var(--e3); align-items:flex-start; }
.c-garantia .ico{ flex:none; color:var(--verificado); }
.c-garantia b{ display:block; font-size:var(--t-small); margin-bottom:2px; }
.c-garantia span{ font-size:var(--t-small); color:var(--tinta-2); }

/* Pie de fuente: cuando no hay evidencia estructurada, solo la referencia. */
/* Cuando la pantalla no trae evidencia estructurada, la referencia se dibuja
   con el mismo peso y en el mismo lugar que la evidencia compacta: el pie de
   la pantalla se ve igual traiga fragmento o solo la cita. */
.c-fuente{ display:block; font-family:var(--f-mono); font-size:0.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3);
  margin-top:var(--e6); padding-top:var(--e4); border-top:1px solid var(--borde); }

/* --------------------------------------------------------------------------
   12 · PRESENTADOR
   Acompaña. Si el curso no declara presentador, no se dibuja nada: no hay
   marco vacío ni silueta de relleno.
   -------------------------------------------------------------------------- */
/* La columna del presentador tiene tope en píxeles, no una fracción: con una
   fracción crecía con la pantalla y en 1280 se comía media pantalla, dejando
   la evidencia fuera de cuadro. El contenido manda y el presentador acompaña,
   y eso tiene que ser cierto en la grilla, no solo en el documento. */
.c-con-presentador{ display:grid; gap:var(--e6);
  grid-template-columns:minmax(0,1fr) minmax(180px, 260px); align-items:start; }
@media (max-width:860px){
  /* En pantalla chica el presentador cede antes que el contenido. */
  .c-con-presentador{ grid-template-columns:minmax(0,1fr); }
  .c-presentador{ order:-1; max-width:240px; max-height:300px; } }
.c-presentador{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--superficie-2); aspect-ratio:4/5; max-height:380px; margin:0; }
.c-presentador img{ display:block; width:100%; height:100%; object-fit:cover; }
.c-presentador .quien{ position:absolute; left:var(--e3); bottom:var(--e3);
  max-width:calc(100% - 2 * var(--e3)); background:rgba(14,14,16,.82); color:#fff;
  font-size:var(--t-label); font-family:var(--f-mono); letter-spacing:.06em;
  padding:5px 10px; border-radius:var(--r-sm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* El PiP va arriba a la derecha, no abajo: anclado al final del contenido caía
   justo encima de la Evidence Card en las pantallas largas. Arriba queda en la
   zona que el texto no usa —los titulares y el cuerpo miden 66ch— y acompaña
   sin taparle nada al alumno. */
.c-pip{ position:absolute; right:0; top:0; width:120px; height:120px;
  border-radius:50%; overflow:hidden; border:3px solid var(--fondo);
  box-shadow:var(--sombra); background:var(--superficie-2); margin:0; }
.c-pip img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:700px){ .c-pip{ display:none; } }

/* --------------------------------------------------------------------------
   13 · PORTADA
   -------------------------------------------------------------------------- */
.c-portada{ position:relative; }
/* El hero manda: el título ocupa el ancho que le corresponde y lo secundario
   viene después, no al lado. Sin marco ni fondo propio, para que la pantalla
   no arranque pareciendo un panel de administración. */
.c-hero{ position:relative; padding:var(--e5) 0 var(--e7); margin-bottom:var(--e6);
  border-bottom:1px solid var(--borde); }
.c-hero.con-figura{ display:grid; gap:var(--e7); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(200px, 300px); }
.c-hero .c-titulo{ font-size:var(--t-display); max-width:15ch; margin-bottom:var(--e5); }
.c-hero .resumen{ font-size:1.12rem; line-height:1.6; color:var(--tinta-2);
  max-width:50ch; margin-bottom:var(--e6); }
.c-hero-fuente{ display:flex; align-items:flex-start; gap:var(--e2); margin:var(--e6) 0 0;
  line-height:1.7;
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.06em;
  color:var(--tinta-3); }
.c-presentador.hero{ max-height:none; aspect-ratio:4/5; }
@media (max-width:860px){
  .c-hero.con-figura{ grid-template-columns:minmax(0,1fr); }
  .c-presentador.hero{ order:-1; max-width:220px; } }
.c-etiqueta{ display:inline-flex; align-items:center; gap:var(--e2);
  background:var(--acento); color:var(--sobre-acento); font-family:var(--f-mono);
  font-size:var(--t-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--r-full); margin-bottom:var(--e5); }
.c-datos{ display:flex; gap:var(--e7); flex-wrap:wrap; margin-bottom:var(--e6); }
.c-dato .k{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:var(--e1); }
.c-dato .v{ font-family:var(--f-titulo); font-weight:700; font-size:1.35rem;
  letter-spacing:-.01em; }

.c-cols{ display:grid; gap:var(--e6);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.c-bloque{ border:1px solid var(--borde); border-radius:var(--r-lg);
  background:var(--superficie); padding:var(--e6) var(--e5); }
.c-bloque h3{ font-family:var(--f-mono); font-weight:600; font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
  margin:0 0 var(--e5); }
.c-objetivos{ list-style:none; padding:0; margin:0; }
.c-objetivos li{ position:relative; padding-left:var(--e5); margin-bottom:var(--e4);
  font-size:0.97rem; line-height:1.55; color:var(--tinta-2); }
.c-objetivos li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px;
  border-radius:2px; background:var(--acento); }
.c-temario{ list-style:none; padding:0; margin:0; }
.c-temario li{ display:flex; gap:var(--e3); align-items:baseline;
  padding:var(--e3) 0; border-bottom:1px solid var(--borde); font-size:var(--t-small); }
.c-temario li:last-child{ border-bottom:none; }
/* Una lección cuelga de su módulo: con sangría, sin número propio y en menor
   jerarquía, para que el índice se lea como módulos y no como una lista plana. */
.c-temario li.sub{ padding:2px 0 2px calc(24px + var(--e3)); border-bottom:none;
  font-size:var(--t-label); color:var(--tinta-3); }
.c-temario li.sub + li:not(.sub){ border-top:1px solid var(--borde); }
.c-temario .n{ flex:none; width:24px; height:24px; border-radius:var(--r-sm);
  background:var(--acento-suave); border:1px solid var(--acento-borde);
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
  display:flex; align-items:center; justify-content:center; }
.c-temario .cuantas{ margin-left:auto; font-family:var(--f-mono); font-size:var(--t-label);
  color:var(--tinta-3); flex:none; }
.c-recursos{ list-style:none; padding:0; margin:0; }
.c-recursos li{ display:flex; gap:var(--e3); align-items:center; padding:var(--e3) 0;
  border-bottom:1px solid var(--borde); font-size:var(--t-small); }
.c-recursos li:last-child{ border-bottom:none; }
.c-recursos .fmt{ margin-left:auto; font-family:var(--f-mono); font-size:var(--t-label);
  color:var(--tinta-3); text-transform:uppercase; }

/* --------------------------------------------------------------------------
   14 · CIERRE DEL CURSO
   -------------------------------------------------------------------------- */
.c-final{ text-align:center; padding:var(--e6) 0; }
.c-nota{ font-family:var(--f-mono); font-weight:600; font-size:clamp(3rem,9vw,4.6rem);
  letter-spacing:-.03em; line-height:1; }
/* «Curso aprobado» dice un resultado, no de quién es el curso: va en el
   semántico. Se conserva la píldora negra de la dirección aprobada, con la
   versión clara del verde para que se lea sobre tinta. */
.c-veredicto{ display:inline-block; background:var(--tinta); color:var(--ok-claro);
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 18px; border-radius:var(--r-full);
  margin-top:var(--e4); }
.c-veredicto.no{ background:var(--error); color:#fff; }
.c-final-acciones{ display:flex; gap:var(--e3); justify-content:center; flex-wrap:wrap;
  margin-top:var(--e5); }

/* --------------------------------------------------------------------------
   15 · RESPONSIVE Y ACCESIBILIDAD
   -------------------------------------------------------------------------- */
/* Las fichas de pantalla se dibujan en motor/fichas_comun.py, que las comparte
   con la grabación en 1920×1080. Ese módulo no sabe de marcas de cliente ni
   tiene por qué: define su acento como `--lima` y punto. Dentro de un curso,
   quien manda es el curso, y esa decisión de presentación se toma acá. */
.curso .fichas{ --lima:var(--acento); }

/* --------------------------------------------------------------------------
   GOLDEN MOBILE · 390
   El teléfono no es la pantalla grande apilada. El chrome se simplifica en vez
   de encogerse, el número y el pictograma comparten banda para que la tarjeta
   se entienda de una mirada, y el bloque de énfasis se recompone en vertical.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .curso{ --t-h1:2rem; --t-display:2rem; }

  /* CHROME · marca a la izquierda, un solo acceso a la derecha. Guardar y
     ayuda no se encogen: se van, y más adelante viven dentro del menú. */
  .curso-top{ padding:12px 18px; gap:var(--e3); }
  .curso-empresa{ font-size:1.08rem; }
  .curso-nombre, .curso-sep{ display:none; }
  .curso-top-fin{ gap:0; }
  .curso-control{ display:none; }
  .curso-control:first-child{ display:flex; width:44px; height:44px;
    align-items:center; justify-content:center; }
  .curso-control:first-child span{ display:none; }

  .curso-cuerpo{ padding:22px 18px 26px; }
  .curso-cuerpo p, .c-lista li{ font-size:0.98rem; line-height:1.6; }
  .c-paso{ font-size:0.68rem; letter-spacing:.15em; margin-bottom:10px; }
  .c-titulo{ line-height:1.06; letter-spacing:-.025em; max-width:none;
    margin-bottom:22px; }
  .c-bajada{ font-size:1rem; margin-bottom:24px; }

  /* TARJETAS · número y pictograma en la misma banda; el resto debajo. Así la
     tarjeta se lee entera sin ocupar un viewport. */
  .c-tarjetas{ gap:14px; margin-bottom:24px; }
  .curso-cuerpo > .c-tarjetas{ margin-bottom:24px; min-height:0; }
  .c-tarjeta{ padding:16px 20px 22px; border-radius:14px; }
  .c-tarjeta .num{ top:16px; left:16px; min-width:42px; height:38px; font-size:0.9rem; }
  .c-tarjeta .icono{ margin:-3px 0 12px 52px; }
  .c-tarjeta .icono svg{ width:46px; height:46px; stroke-width:1.2; }
  .c-tarjeta h3{ font-size:1.02rem; margin-bottom:10px; }
  .c-tarjeta .regla{ width:32px; height:2px; margin-bottom:12px; }
  .c-tarjeta p{ font-size:0.95rem; line-height:1.6; max-width:none; }

  /* ÉNFASIS · vertical y en orden: indicador, mensaje, explicación, garantía. */
  .c-enfasis{ display:block; padding:22px 20px 20px; border-radius:14px; }
  .c-enfasis .marca-e{ width:52px; height:52px; margin-bottom:16px; }
  .c-enfasis .frase{ display:block; white-space:normal; max-width:none;
    padding-left:0; border-left:none; font-size:2.1rem; line-height:.98;
    margin-bottom:14px; }
  .c-enfasis .apoyo{ display:block; max-width:none; min-width:0; padding-left:0;
    border-left:none; padding-top:14px; border-top:1px solid var(--borde);
    font-size:0.95rem; }
  .c-enfasis .sello{ display:block; margin:16px 0 0; }

  /* EVIDENCIA · antes de truncar con puntos suspensivos, se deja envolver: una
     referencia cortada a la mitad no verifica nada. */
  .c-ev-sello{ flex-wrap:wrap; align-items:flex-start; border-radius:14px;
    padding:10px 14px; }
  .c-ev-sello .tick{ margin-top:2px; }
  /* La referencia baja a su propia línea en vez de arrancar pegada al sello:
     así se lee como un dato y no como el final de una frase cortada. */
  .c-ev-sello span{ flex:1 0 100%; white-space:normal; overflow:visible;
    text-overflow:clip; margin-top:4px; }
  .c-ev-compacta{ margin-top:26px; }
  .c-ev-linea{ gap:12px; }
  .c-ev-accion.abrir{ margin-left:0; }

  /* NAVEGACIÓN · dos filas y objetivos de dedo. Pegada abajo: en una pantalla
     que scrollea, el paso siguiente no puede quedar a tres pantallazos. */
  .curso-pie{ position:sticky; bottom:0; z-index:5; flex-wrap:wrap;
    gap:12px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .curso-avance{ order:-1; flex:1 0 100%; justify-content:flex-start; gap:12px; }
  .curso-avance .rotulo{ display:none; }
  .curso-avance .barra{ max-width:none; }
  .curso-pie .c-bt{ flex:1; justify-content:center; min-height:48px;
    font-size:0.74rem; padding:12px 18px; }

  .c-comparacion, .c-cols{ grid-template-columns:minmax(0,1fr); gap:14px; }

  /* ESCENARIO EN 390 · la secuencia ya es la correcta —caso, garantía,
     pregunta, alternativas, respuesta—; lo que cambia es la medida de cada
     pieza. El número de la alternativa se alinea con la primera línea y no
     flota en el medio de un texto de cuatro renglones, y la retroalimentación
     suelta su icono para devolverle ancho a la explicación: el borde y el
     rótulo ya dicen de qué color es la respuesta. */
  .c-dos{ gap:12px; }
  .c-dos .c-panel{ padding:20px 18px 22px; }
  .c-dos .c-panel-tit{ font-size:0.96rem; }
  .c-dos .c-panel-tit .ico{ width:24px; height:24px; }
  .c-dos .c-panel-regla{ margin:10px 0 16px 36px; }
  .c-dos .c-caso{ font-size:1rem; line-height:1.68; }
  .c-caso-col{ gap:10px; }
  .c-etiqueta-caso{ margin-top:16px; padding:8px 14px; font-size:0.87rem; }
  .c-dos .c-pregunta{ font-size:1.14rem; line-height:1.35; margin-bottom:14px; }
  .c-dos .c-opcion{ align-items:flex-start; gap:12px; padding:12px 14px;
    margin-bottom:8px; font-size:0.95rem; line-height:1.5; min-height:52px; }
  .c-dos .c-opcion .letra{ width:28px; height:28px; margin-top:1px; }
  .c-dos .c-opcion .marca{ align-self:flex-start; margin-top:1px;
    width:24px; height:24px; }
  .c-dos .c-fb{ padding:14px 16px; font-size:0.94rem; }
  .c-dos .c-fb > .ico{ display:none; }
  .c-cierre{ font-size:1rem; padding-left:var(--e4); margin-top:var(--e5); }
  .c-columna{ padding:18px 20px 22px; border-radius:14px; }
  .c-columna h3{ font-size:1.02rem; margin-bottom:14px; }
  .c-columna li{ font-size:0.95rem; margin-bottom:10px; }
  .c-paso-p{ gap:16px; padding-bottom:22px; }
  .c-paso-p .bolita{ width:32px; height:32px; font-size:0.88rem; }
  .c-paso-p:not(:last-child)::before{ left:15px; top:32px; }
  .c-paso-p h3{ font-size:1.02rem; }
  .c-paso-p p{ font-size:0.95rem; }
  .c-fuente{ margin-top:26px; }
  .c-hero{ padding:var(--e4) 0 var(--e6); }
}

@media (prefers-reduced-motion:reduce){
  .curso *{ transition:none !important; animation:none !important; }
}
@media print{
  .curso-pie, .curso-cerrar{ display:none; }
}

.fichas{ --tinta:#0E0E10; --papel:#FAFAF8; --lima:#D4F70A; --gris:#6B6B70; --linea:#E4E4DE;
         color:var(--tinta); }
.fichas .titulo{ font-family:'Familjen Grotesk',system-ui,sans-serif; font-weight:700;
                 font-size:2.75em; letter-spacing:-.01em; margin-bottom:.15em; }
.fichas .leccion{ font-family:'IBM Plex Mono',monospace; font-size:1.19em;
                  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
                  margin-bottom:2.6em; }

.fichas .ficha{ background:#fff; border:1px solid var(--linea); border-radius:1.12em;
                padding:2.12em 2.5em; margin-bottom:1.37em;
                box-shadow:0 1.1em 2.5em rgba(14,14,16,.07);
                opacity:0; transform:translateY(1.6em);
                transition:opacity .5s cubic-bezier(.2,.7,.3,1),
                            transform .5s cubic-bezier(.2,.7,.3,1); }
.fichas .ficha.entra{ opacity:1; transform:none; }
.fichas .ficha.atras, .fichas .cita.atras, .fichas .pildora.atras{
  opacity:.28; filter:blur(1.6px); transform:scale(.985); }
.fichas .ficha.foco, .fichas .cita.foco{
  transform:scale(1.035); box-shadow:0 1.6em 3.75em rgba(14,14,16,.16);
  z-index:2; position:relative; }

.fichas .dato{ font-family:'IBM Plex Mono',monospace; font-weight:600;
               font-size:2.12em; letter-spacing:.02em; }
.fichas .dato .sep{ color:var(--gris); font-weight:400; padding:0 .3em; }
.fichas .rotulo{ font-family:'IBM Plex Mono',monospace; font-size:1.06em;
                 letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
                 margin-bottom:.87em; }
.fichas .numero{ display:inline-block; min-width:2.75em; height:2.75em; line-height:2.75em;
                 text-align:center; border-radius:.75em; background:var(--lima);
                 font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.37em;
                 margin-right:.9em; vertical-align:middle; }
.fichas .contenido{ font-size:1.94em; font-weight:500; vertical-align:middle; }

.fichas .sectores{ display:flex; flex-wrap:wrap; gap:.75em; margin-top:1.25em; }
.fichas .sector{ font-family:'IBM Plex Mono',monospace; font-size:1.31em;
                 background:var(--papel); border:1px solid var(--linea);
                 border-radius:.62em; padding:.52em .86em; }

.fichas .cita{ background:var(--tinta); color:var(--papel); border-radius:1.12em;
               padding:2.5em 2.87em; margin-bottom:1.37em;
               opacity:0; transform:translateY(1.6em);
               transition:opacity .5s cubic-bezier(.2,.7,.3,1),
                           transform .5s cubic-bezier(.2,.7,.3,1); }
.fichas .cita.entra{ opacity:1; transform:none; }
.fichas .cita .fuente{ font-family:'IBM Plex Mono',monospace; font-size:1em;
                       letter-spacing:.14em; text-transform:uppercase;
                       color:var(--lima); margin-bottom:1.12em; }
.fichas .cita p{ font-size:1.69em; line-height:1.5; }
.fichas .cita mark{ background:var(--lima); color:var(--tinta);
                    padding:.05em .2em; border-radius:.25em; }

.fichas .pildora{ display:inline-block; background:var(--tinta); color:var(--papel);
                  border-radius:999px; padding:1.37em 2.5em;
                  font-family:'IBM Plex Mono',monospace; font-weight:600;
                  font-size:1.87em; letter-spacing:.04em;
                  opacity:0; transform:translateY(1.6em) scale(.96);
                  transition:opacity .5s cubic-bezier(.2,.7,.3,1),
                              transform .5s cubic-bezier(.2,.7,.3,1); }
.fichas .pildora.entra{ opacity:1; transform:none; }
.fichas .pildora b{ color:var(--lima); font-weight:600; }

.fichas .linea-tiempo{ display:flex; align-items:stretch; margin-top:.75em; }
.fichas .tramo{ flex:1; border:1px solid var(--linea); background:#fff;
                padding:1.87em 2.12em; opacity:0; transform:translateY(1.6em);
                transition:opacity .5s cubic-bezier(.2,.7,.3,1),
                            transform .5s cubic-bezier(.2,.7,.3,1), background .4s; }
.fichas .tramo.entra{ opacity:1; transform:none; }
.fichas .tramo:first-child{ border-radius:1.12em 0 0 1.12em; }
.fichas .tramo:last-child{ border-radius:0 1.12em 1.12em 0; }
.fichas .tramo.mio{ background:var(--lima); border-color:var(--lima); }
.fichas .tramo.ajeno.entra{ opacity:.4; }
.fichas .tramo .cuando{ font-family:'IBM Plex Mono',monospace; font-weight:600;
                        font-size:1.87em; margin-bottom:.33em; }
.fichas .tramo .quien{ font-size:1.31em; color:var(--gris); }
.fichas .tramo.mio .quien{ color:var(--tinta); font-weight:600; }

@media (max-width:760px){
  .fichas .linea-tiempo{ display:block; }
  .fichas .tramo{ border-radius:1.12em !important; margin-bottom:.6em; }
}