/* Fundamentos de IA · AI Talent 2G — tema claro
 *
 * Paleta AECODE en claro, la misma del panel de oportunidades: lienzo #F4F2EE,
 * papel #FFFFFF, tinta #1B1D2B, marca #4A3AC1. El lavanda #B9ADF7 y el verde
 * #19C356 del tema oscuro no tienen contraste sobre blanco: bajan a #4A3AC1 y
 * #12924C, y el ambar a #B45309.
 *
 * MOVIMIENTO SIN LIBRERIAS. Los reveals son `animation-timeline: view()`, las
 * entradas y salidas `@starting-style`, y el cambio de pestaña una View
 * Transition del navegador. Motivo concreto: son casi 200 personas con el wifi
 * del auditorio, y 50 kB de GSAP para un fade son 50 kB que pueden no llegar.
 * Todo sobre `transform` y `opacity`, que van al compositor y no provocan
 * reflow, con las duraciones y curvas de Material Motion 3.
 */
:root {
  color-scheme: light;
  --lienzo: #F4F2EE; --papel: #FFFFFF; --papel-2: #FBFAF8; --hundido: #EDEAE4;
  --tinta: #1B1D2B; --tinta-2: #3A4065; --tinta-3: #6B6F85; --tinta-4: #5F6376;
  --borde: #E4E1DA; --borde-2: #D8D4CC; --borde-pr: #CFC7EE;
  --marca: #4A3AC1; --marca-2: #3B2EA6;
  --verde: #12924C; --verde-2: #0E7A3F;
  --verde-solido: #0E7A3F; --verde-solido-2: #0B5F33;
  --ambar: #B45309; --rojo: #C62828;
  --marca-bg: #F2F0FC; --verde-bg: #EAF7EF; --ambar-bg: #FDF3E4; --rojo-bg: #FDEDED;
  --marca-bd: #D5CFF0; --verde-bd: #BFE6CD; --ambar-bd: #F0D9B4; --rojo-bd: #F3C9C9;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --r: 18px;
  --sombra: 0 1px 2px rgba(27,29,43,.04), 0 4px 14px -8px rgba(27,29,43,.10);
  --sombra-alta: 0 2px 4px rgba(27,29,43,.05), 0 18px 34px -18px rgba(74,58,193,.30);
  /* Material Motion 3 */
  --t1: 90ms; --t2: 170ms; --t3: 280ms; --t4: 440ms;
  --e-std: cubic-bezier(.2,0,0,1);
  --e-out: cubic-bezier(0,0,0,1);
  --e-enf: cubic-bezier(.3,0,0,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { margin: 0; color: var(--tinta); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background:
  radial-gradient(900px 520px at 6% -6%, rgba(74,58,193,.08), transparent 62%),
  radial-gradient(620px 400px at 100% 100%, rgba(18,146,76,.05), transparent 60%),
  var(--lienzo); background-attachment: fixed; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--marca); }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }
::selection { background: rgba(74,58,193,.16); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════ movimiento */

@keyframes surge { from { opacity: 0; transform: translateY(22px); } }
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes cae   { from { opacity: 0; transform: translateY(-10px); } }
@keyframes crece { from { transform: scaleX(0); } }
@keyframes late  { 50% { transform: scale(1.035); } }

/* Reveal por scroll, sin IntersectionObserver: lo resuelve el navegador. */
.rev {
  animation: surge var(--t4) var(--e-enf) both;
  animation-timeline: view();
  animation-range: entry 0% cover 26%;
}
/* Entrada de la portada de cada pestaña, al cargar y al cambiar de vista. */
.banda.portada > .dentro > .et { animation: cae var(--t3) var(--e-out) both; }
.banda.portada > .dentro > h1  { animation: surge var(--t4) var(--e-enf) both .04s; }
.banda.portada > .dentro > .intro,
.banda.portada > .dentro > .aviso { animation: surge var(--t4) var(--e-enf) both .09s; }
/* las bandas de más abajo entran por scroll, no al cargar */
.banda:not(.portada) > .dentro > .et,
.banda:not(.portada) > .dentro > h1,
.banda:not(.portada) > .dentro > .intro {
  animation: surge var(--t4) var(--e-enf) both;
  animation-timeline: view(); animation-range: entry 0% cover 22%;
}

::view-transition-old(root) { animation: none; opacity: 0; transition: opacity var(--t2); }
::view-transition-new(root) { animation: surge var(--t3) var(--e-enf); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .rev { animation: none; opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══════════════════════════════════════════════════ cabecera */

.cab { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.cab .logo { height: 17px; width: auto; display: block; }
.cab .der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 8px; border-radius: 999px;
  border: 1px solid var(--borde-2); background: var(--papel); font-size: 12.5px; color: var(--tinta-2);
  white-space: nowrap; }
.chip i { font: 800 9.5px/1.6 var(--mono); letter-spacing: .1em; font-style: normal;
  background: var(--marca); color: #fff; padding: 3px 9px; border-radius: 999px; }

.boton { border: 0; background: var(--marca); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 24px; border-radius: 999px; cursor: pointer; text-decoration: none;
  display: inline-block; box-shadow: 0 6px 18px -8px rgba(74,58,193,.55);
  transition: transform var(--t1) var(--e-std), box-shadow var(--t2) var(--e-std),
              background var(--t1) var(--e-std); }
.boton:hover { background: var(--marca-2); transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(74,58,193,.6); }
.boton:active { transform: translateY(0) scale(.98); }
.boton.sec { background: var(--papel); border: 1px solid var(--borde-2); color: var(--tinta);
  box-shadow: var(--sombra); }
.boton.sec:hover { background: var(--papel); border-color: var(--marca); color: var(--marca); }
.boton.chico { padding: 8px 17px; font-size: 13px; }
.boton.verde { background: var(--verde-solido); box-shadow: 0 6px 18px -8px rgba(18,146,76,.5); }
.boton.verde:hover { background: var(--verde-solido-2); box-shadow: 0 12px 26px -10px rgba(18,146,76,.55); }

nav.tabs { position: sticky; top: 53px; z-index: 19; display: flex; gap: 2px; padding: 0 14px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button { flex: none; border: 0; background: transparent; color: var(--tinta-3);
  font-size: 13.5px; font-weight: 600; padding: 13px 15px; cursor: pointer; position: relative;
  transition: color var(--t2) var(--e-std); }
nav.tabs button:hover { color: var(--tinta); }
nav.tabs button.on { color: var(--marca); }
nav.tabs button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--marca); transform: scaleX(0); transform-origin: center;
  transition: transform var(--t3) var(--e-enf); }
nav.tabs button.on::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════ base */

/* Cada sección es una BANDA a todo el ancho, con fondo alterno. Antes eran
 * bloques separados por una línea fina dentro del mismo contenedor y no se
 * distinguía dónde acababa una y empezaba la siguiente. */
.hoja { padding: 0 0 80px; }
.banda { padding: 52px 0; }
.banda.alt { background: var(--papel-2); border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde); }
.banda.portada { padding-top: 42px; }
.banda.cierre { text-align: center; background: var(--marca-bg);
  border-top: 1px solid var(--marca-bd); }
.banda.cierre .intro { margin: 0 auto 24px; }
.dentro { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.et { font: 600 10px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-4); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.et i { font-style: normal; background: var(--marca); color: #fff; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 6px; font-weight: 800; }
h1 { font-size: clamp(32px, 5.6vw, 50px); font-weight: 300; letter-spacing: -.04em; line-height: 1.02;
  margin: 0 0 14px; color: var(--tinta); }
h1 b { font-weight: 800; }
h1 .lav { color: var(--marca); } h1 .verde { color: var(--verde); }
.intro { color: var(--tinta-2); margin: 0 0 24px; max-width: 64ch; font-size: 17px; }
.sep { margin-top: 68px; padding-top: 38px; border-top: 1px solid var(--borde); }

.cifras { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.cifras > div { flex: 1 1 160px; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--sombra);
  transition: transform var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.cifras > div:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.cifras b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.035em;
  color: var(--marca); font-variant-numeric: tabular-nums; }
.cifras span { display: block; font-size: 12.5px; color: var(--tinta-3); margin-top: 3px; }

/* ═══════════════════════════════════════════════════ capas */

.capas { display: flex; flex-direction: column; }
.capa { border: 1px solid var(--borde); border-radius: var(--r); padding: 24px; background: var(--papel);
  box-shadow: var(--sombra); position: relative;
  transition: transform var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.capa:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.capa + .capa { margin: 12px 0 0 clamp(0px, 4.5vw, 52px); }
.capa .n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.capa h3 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.025em; }
.capa .desde { font: 700 10px/1.6 var(--mono); letter-spacing: .1em; color: var(--tinta-4); }
.capa .q { margin: 0 0 14px; color: var(--tinta-2); max-width: 74ch; }
.capa .ej, .capa .ojo { font-size: 14.5px; border-radius: 12px; padding: 13px 16px; margin: 0 0 8px; }
.capa .ej { background: var(--papel-2); border: 1px solid var(--borde); }
.capa .ojo { background: var(--ambar-bg); border: 1px solid var(--ambar-bd); margin-bottom: 0; }
.capa .ej i, .capa .ojo i { display: block; font: 800 9.5px/1.8 var(--mono); letter-spacing: .1em;
  font-style: normal; text-transform: uppercase; color: var(--tinta-4); }
.capa .ojo i { color: var(--ambar); }
.capa:nth-child(2) { border-color: var(--marca-bd); }
.capa:nth-child(3) { border-color: var(--marca-bd); box-shadow: var(--sombra), inset 3px 0 0 var(--marca-bd); }
.capa:nth-child(4) { border-color: var(--verde-bd); box-shadow: var(--sombra), inset 3px 0 0 var(--verde); }

/* ═══════════════════════════════════════════════════ conceptos */

.grupo-t { font: 800 10px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--marca); margin: 36px 0 12px; }
/* ── el mazo de conceptos: una tarjeta a la vez ── */
.mazo { max-width: 760px; }
.mazo-cab { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.mazo-g { font: 700 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--marca); margin: 0; }
.mazo-pos { font: 600 13px/1 var(--mono); color: var(--tinta-4); margin: 0 0 0 auto; }
.mazo-pos b { color: var(--tinta-2); font-size: 15px; }

.mazo-puntos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
/* `mz-pt` y no `pt` a secas: el mapa de embeddings ya usa `.pt` para sus puntos
 * y heredaba de aqui el ancho, el alto y el fondo */
.mz-pt { width: 20px; height: 5px; border-radius: 3px; border: 0; padding: 0; cursor: pointer;
  background: var(--borde-2);
  transition: background var(--t2) var(--e-std), transform var(--t2) var(--e-std); }
.mz-pt.abre { margin-left: 13px; }
.mz-pt.visto { background: var(--marca-bd); }
.mz-pt.on { background: var(--marca); transform: scaleY(1.8); }
.mz-pt:hover { background: var(--tinta-4); }
.mz-pt:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* las tres se superponen en la misma celda: las dos de atras dan el volumen */
.mazo-pila { display: grid; }
.mz { grid-area: 1 / 1; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 20px; box-shadow: var(--sombra); padding: clamp(22px, 3vw, 34px); }
.mz-fondo { pointer-events: none; box-shadow: none; border-color: var(--borde-2);
  background: var(--papel-2); }
.mz-fondo:nth-child(1) { transform: translateY(26px) scale(.93); }
.mz-fondo:nth-child(2) { transform: translateY(13px) scale(.965); }
#mz-viva { position: relative; cursor: pointer; border-color: var(--borde-pr);
  box-shadow: var(--sombra-alta); }

.mz-g { font: 700 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-4); margin: 0 0 10px; }
/* el termino tapado: el desenfoque va en el <span>, no en el <h3>, para no
 * emborronar de paso el resto de la tarjeta */
.mz-t { margin: 0 0 10px; }
.mz-t span { display: inline-block; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800;
  letter-spacing: -.035em; color: var(--tinta); filter: blur(13px); opacity: .5;
  transition: filter var(--t3) var(--e-out), opacity var(--t3) var(--e-out); }
#mz-viva:hover .mz-t span { filter: blur(7px); opacity: .66; }
.mz.abierto .mz-t span,
#mz-viva.abierto:hover .mz-t span { filter: none; opacity: 1; }

/* la figura manda: es lo primero que se ve y lo que se explica en voz alta */
.mz-fig { background: var(--papel-2); border: 1px solid var(--borde); border-radius: 15px;
  padding: 12px 14px; margin-bottom: 18px; display: grid; place-items: center; }
.mz-fig .fg { width: 100%; max-width: 420px; height: auto; display: block; }
/* el width/height del atributo reserva el hueco: sin eso la tarjeta pega un
 * salto cuando la imagen termina de bajar */
.mz-img { width: 100%; max-width: 560px; height: auto; display: block; border-radius: 10px; }

/* el caso del dia a dia: la pista de la que se tira para adivinar el termino */
.mz-dia { font-size: clamp(14.5px, 1.35vw, 17px); color: var(--tinta-2); line-height: 1.55;
  margin: 0 0 14px; padding-left: 14px; border-left: 3px solid var(--verde-bd); }
.mz-dia::before { content: 'En el día a día'; display: block;
  font: 800 9.5px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde-2); }

/* el hueco de las palabras tapadas. Ancho fijo y `overflow` para que ni el largo
 * de la palabra sea una pista; al destapar recupera su ancho y se lee. */
.mz-hueco { display: inline-block; width: 4.2em; overflow: hidden; white-space: nowrap;
  vertical-align: bottom; color: transparent; border-radius: 4px;
  background: repeating-linear-gradient(135deg, var(--borde-2) 0 5px, var(--papel-2) 5px 10px);
  transition: color var(--t3) var(--e-out); }
.mz.abierto .mz-hueco { width: auto; overflow: visible; color: var(--marca);
  font-weight: 800; background: none; }

.mz-corta { font-size: clamp(16px, 1.5vw, 20px); color: var(--marca); font-weight: 600;
  margin: 0 0 14px; line-height: 1.45; }
.mz-rel { font: 600 clamp(12.5px, 1.1vw, 15px)/1.6 var(--mono); color: var(--tinta-2); margin: 0;
  background: var(--papel-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 11px 14px; }
.mz-mas { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t4) var(--e-out); }
.mz.abierto .mz-mas { grid-template-rows: 1fr; }
.mz-mas > div { overflow: hidden; }
.mz-larga { font-size: 15.5px; color: var(--tinta-2); margin: 16px 0 12px; line-height: 1.6; }
.mz-aec { font-size: 15px; background: var(--verde-bg); border: 1px solid var(--verde-bd);
  border-radius: 13px; padding: 13px 15px; margin: 0; color: var(--tinta-2); }
.mz-aec::before { content: 'En obra'; display: block; font: 800 9.5px/1.8 var(--mono);
  letter-spacing: .1em; color: var(--verde-2); text-transform: uppercase; }

.mazo-mandos { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.mazo-b { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--borde-2);
  background: var(--papel); color: var(--tinta-2); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--sombra);
  transition: border-color var(--t1) var(--e-std), color var(--t1) var(--e-std),
              transform var(--t1) var(--e-std); }
.mazo-b:hover:not(:disabled) { border-color: var(--marca); color: var(--marca); transform: translateY(-2px); }
.mazo-b:disabled { opacity: .35; cursor: default; }
#mazo-destapa { margin-left: auto; }

/* la tarjeta entra por el lado hacia el que vas */
@keyframes mz-der { from { opacity: 0; transform: translateX(34px); } }
@keyframes mz-izq { from { opacity: 0; transform: translateX(-34px); } }
#mz-viva.entra-der { animation: mz-der var(--t3) var(--e-enf) both; }
#mz-viva.entra-izq { animation: mz-izq var(--t3) var(--e-enf) both; }

@media (max-width: 560px) {
  .mz-pt { width: 14px; }
  .mz-fig { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t span, .mz-mas, .mz-pt { transition: none; }
  #mz-viva.entra-der, #mz-viva.entra-izq { animation: none; }
}

/* ═══════════════════════════════════════════════════ tipos */

.eje { margin-bottom: 28px; }
.eje h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.02em; }
.eje-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.eje-lista div { background: var(--papel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--sombra);
  transition: transform var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.eje-lista div:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.eje-lista b { display: block; font-size: 15px; margin-bottom: 4px; }
.eje-lista span { font-size: 13.5px; color: var(--tinta-3); }

/* ═══════════════════════════════════════════════════ mercado */

.aviso { background: var(--ambar-bg); border: 1px solid var(--ambar-bd); border-radius: 14px;
  padding: 15px 18px; font-size: 14.5px; margin: 0 0 20px; color: var(--tinta-2); }
.labs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.lab { background: var(--papel); border: 1px solid var(--borde); border-radius: 16px; padding: 20px;
  box-shadow: var(--sombra);
  transition: transform var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std),
              border-color var(--t2) var(--e-std); }
.lab:hover { transform: translateY(-3px); border-color: var(--borde-pr); box-shadow: var(--sombra-alta); }
.lab .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lab h3 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.025em; }
.lab .tag { font: 700 10px/1.6 var(--mono); letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--borde-2); color: var(--tinta-3); background: var(--papel-2); }
.lab .prod { font-size: 13.5px; color: var(--marca); margin: 0 0 10px; font-weight: 600; }
.lab p { font-size: 14px; color: var(--tinta-2); margin: 0 0 9px; }
.lab .aec { font-size: 13.5px; background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 11px; padding: 11px 13px; margin: 0; }
.negocio { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 14px; margin-top: 24px; }
.negocio div { border-left: 3px solid var(--marca); padding-left: 15px; }
.negocio b { display: block; margin-bottom: 4px; font-size: 15.5px; }
.negocio span { font-size: 14.5px; color: var(--tinta-2); }

/* ═══════════════════════════════════════════════════ prompts */

.truco { background: var(--papel); border: 1px solid var(--borde); border-radius: 16px; padding: 22px;
  margin-bottom: 12px; box-shadow: var(--sombra);
  transition: transform var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.truco:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.truco .top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.truco .num { font: 800 12px/1 var(--mono); color: var(--marca); }
.truco h3 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.025em; }
.truco .d { font-size: 15px; color: var(--tinta-2); margin: 0 0 6px; }
.truco .porque { font-size: 14px; color: var(--tinta-3); margin: 0 0 15px; font-style: italic; }
.par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.par > div { border-radius: 12px; padding: 13px 15px; font-size: 14px; }
.par .mal { background: var(--rojo-bg); border: 1px solid var(--rojo-bd); }
.par .bien { background: var(--verde-bg); border: 1px solid var(--verde-bd); }
.par i { display: block; font: 800 9.5px/1.8 var(--mono); letter-spacing: .1em; font-style: normal;
  text-transform: uppercase; }
.par .mal i { color: var(--rojo); } .par .bien i { color: var(--verde-2); }
.anti { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.anti div { background: var(--papel); border: 1px solid var(--rojo-bd); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--sombra);
  transition: transform var(--t2) var(--e-std); }
.anti div:hover { transform: translateY(-2px); }
.anti b { display: block; margin-bottom: 4px; color: var(--rojo); font-size: 15px; }
.anti span { font-size: 13.5px; color: var(--tinta-2); }

/* ═══════════════════════════════════════════════════ demos */

.bloque-demo { background: var(--papel); border: 1px solid var(--borde-pr); border-radius: var(--r);
  padding: 24px; margin: 0 0 14px; box-shadow: var(--sombra); }
.bloque-demo > h3 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.025em; }
.bloque-demo > .sub { font-size: 14.5px; color: var(--tinta-3); margin: 0 0 18px; max-width: 74ch; }
.demo { display: flex; flex-direction: column; gap: 13px; }
.d-campo { width: 100%; background: var(--papel-2); border: 1px solid var(--borde-2); border-radius: 12px;
  padding: 13px 15px; font-size: 15px; resize: vertical;
  transition: border-color var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.d-campo:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-bg); outline: none; }
.d-fila { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.d-kpi { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--tinta-3); }
.d-kpi b { font-size: 22px; font-weight: 800; color: var(--marca); font-variant-numeric: tabular-nums; }
.d-et { font: 700 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-4); }
.d-rango { flex: 1 1 160px; min-width: 120px; accent-color: var(--marca); }
.d-fila > b { font-size: 20px; font-weight: 800; color: var(--marca); min-width: 46px;
  font-variant-numeric: tabular-nums; }
.d-ojo { font-size: 13.5px; color: var(--tinta-3); margin: 0; border-left: 2px solid var(--borde-2);
  padding-left: 13px; }
.d-tokens { display: flex; flex-wrap: wrap; gap: 3px; }
.tok { font: 500 13px/1.5 var(--mono); padding: 4px 6px; border-radius: 6px; white-space: pre;
  animation: entra var(--t2) var(--e-out) both; }
.tok.t0 { background: #EAE6FA; } .tok.t1 { background: #DFF2E7; }
.tok.t2 { background: #FBEBD2; } .tok.t3 { background: #FBE0E0; }
.tok.t4 { background: var(--hundido); }

.d-chip { border: 1px solid var(--borde-2); background: var(--papel); color: var(--tinta-3);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; cursor: pointer; font-weight: 600;
  transition: all var(--t2) var(--e-std); }
.d-chip:hover { border-color: var(--marca); color: var(--marca); }
.d-chip.on { border-color: var(--marca); background: var(--marca); color: #fff; }
.d-chip.fija { cursor: default; }
.d-frase { background: var(--papel-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 15px 17px; font-size: 16.5px; margin: 0; }
.d-frase .cursor { display: inline-block; width: 8px; height: 17px; background: var(--verde);
  vertical-align: -3px; margin-left: 3px; animation: par 1s steps(2) infinite; }
@keyframes par { 50% { opacity: 0; } }
.d-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 7px; }
.d-op { display: grid; grid-template-columns: minmax(0, 1fr) 60px 38px; gap: 9px; align-items: center;
  background: var(--papel-2); border: 1px solid var(--borde); border-radius: 11px; padding: 10px 13px;
  cursor: pointer; text-align: left; animation: entra var(--t2) var(--e-out) both;
  transition: border-color var(--t1) var(--e-std), transform var(--t1) var(--e-std); }
.d-op:hover { border-color: var(--marca); transform: translateX(2px); }
.d-op .pal { font-size: 14px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.d-op .bar { height: 7px; background: var(--hundido); border-radius: 999px; overflow: hidden; }
.d-op .bar i { display: block; height: 100%; background: var(--marca);
  animation: crece var(--t4) var(--e-enf) both; transform-origin: left; }
.d-op b { font-size: 12px; text-align: right; color: var(--tinta-3); }
.d-reset { align-self: flex-start; background: var(--papel); border: 1px solid var(--borde-2);
  color: var(--tinta-2); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; cursor: pointer;
  font-weight: 600; transition: all var(--t2) var(--e-std); }
.d-reset:hover { border-color: var(--marca); color: var(--marca); }
.d-fin { font-size: 13.5px; color: var(--tinta-3); margin: 0; }

.d-mapa { position: relative; height: 480px; background: var(--papel-2); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden; }
.d-mapa .pt { position: absolute; transform: translate(-50%, -50%); background: var(--papel);
  border: 1px solid var(--borde-2); border-radius: 999px; padding: 5px 11px; font-size: 11.5px;
  cursor: pointer; white-space: nowrap; color: var(--tinta-2); font-weight: 600;
  box-shadow: 0 1px 3px rgba(27,29,43,.06);
  transition: transform var(--t2) var(--e-std), background var(--t2) var(--e-std),
              color var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.d-mapa .pt:hover { transform: translate(-50%, -50%) scale(1.09); box-shadow: var(--sombra-alta); z-index: 4; }
.d-mapa .pt.f-e { border-color: #B9ADF7; } .d-mapa .pt.f-g { border-color: #E0A33C; }
.d-mapa .pt.f-b { border-color: #5BB8E8; } .d-mapa .pt.f-o { border-color: #55C083; }
.d-mapa .pt.f-i { border-color: #E88FBF; }
.d-mapa .pt.on { background: var(--verde-solido); color: #fff; border-color: var(--verde-solido); z-index: 3;
  transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 8px 20px -6px rgba(18,146,76,.5);
  animation: late var(--t4) var(--e-std); }
.d-mapa .pt.cerca { background: var(--marca); color: #fff; border-color: var(--marca); z-index: 2;
  transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 6px 16px -6px rgba(74,58,193,.45); }
.f-e { color: #7B68D9; } .f-g { color: var(--ambar); } .f-b { color: #2A87BD; }
.f-o { color: var(--verde); } .f-i { color: #C4527F; }
.d-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tinta-3); }
.d-leyenda span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.d-leyenda i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.d-vecinos { background: var(--papel-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 15px 17px; }
.d-vec-tit { margin: 0 0 8px; font-size: 14px; }
.d-vec-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 5px 0;
  border-bottom: 1px solid var(--borde); animation: entra var(--t3) var(--e-out) both; }
.d-vec-fila:nth-child(3) { animation-delay: .05s; }
.d-vec-fila:nth-child(4) { animation-delay: .1s; }
.d-vec-fila em { font-style: normal; color: var(--tinta-4); font-size: 12px; }
.d-prompt { background: var(--papel-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 13px 15px; font-size: 14.5px; margin: 0; color: var(--tinta-2); }
.d-salida { background: var(--verde-bg); border: 1px solid var(--verde-bd); border-radius: 12px;
  padding: 15px 17px; font-size: 15.5px; margin: 0; min-height: 62px; }
.d-ventanas { display: flex; flex-direction: column; gap: 8px; }
.d-vent { display: grid; grid-template-columns: 160px minmax(0, 1fr) 96px; gap: 11px; align-items: center; }
.d-vent .et { font: 600 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--tinta); margin: 0; }
.d-vent .et em { display: block; font-style: normal; font-size: 11px; color: var(--tinta-4); font-weight: 400; }
.d-vent .bar { height: 10px; background: var(--hundido); border-radius: 999px; overflow: hidden; }
.d-vent .bar i { display: block; height: 100%; background: var(--verde); border-radius: 999px;
  transition: width var(--t3) var(--e-std), background var(--t2) var(--e-std); }
.d-vent.no .bar i { background: var(--rojo); }
.d-vent b { font-size: 12px; text-align: right; color: var(--verde-2); font-weight: 700; }
.d-vent.no b { color: var(--rojo); }
.d-partes { display: flex; flex-wrap: wrap; gap: 7px; }
.d-prompt-final { background: var(--papel-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 16px 18px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 0;
  font-family: var(--sans); max-height: 320px; overflow: auto; color: var(--tinta-2); }
.d-copiar { background: var(--verde-solido); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(18,146,76,.5);
  transition: transform var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.d-copiar:hover { background: var(--verde-solido-2); transform: translateY(-2px); }
.d-copiar:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════ el reto */

.reto { max-width: 800px; margin: 0 auto; padding: 30px 20px 80px; }
.marcador { position: sticky; top: 53px; z-index: 15; display: flex; align-items: center; gap: 10px;
  justify-content: space-between; background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde); padding: 10px 20px; }
.marcador .p { display: flex; align-items: baseline; gap: 7px; }
.marcador .p b { font-size: 24px; font-weight: 800; color: var(--verde); font-variant-numeric: tabular-nums;
  transition: transform var(--t2) var(--e-enf); }
.marcador .p b.sube { animation: late var(--t3) var(--e-enf); }
.marcador .p span, .marcador .teclas { font-size: 12px; color: var(--tinta-4); }

.j-reloj { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.j-reloj .pista { flex: 1; height: 7px; background: var(--hundido); border-radius: 999px; overflow: hidden; }
.j-reloj .pista i { display: block; height: 100%; background: var(--verde); border-radius: 999px;
  transition: width .1s linear, background var(--t3) var(--e-std); }
.j-reloj .pista i.poco { background: var(--rojo); }
.j-reloj b { font: 800 15px/1 var(--mono); min-width: 26px; text-align: right; color: var(--tinta-2);
  font-variant-numeric: tabular-nums; }

.j-cab { display: flex; justify-content: space-between; gap: 10px; font: 700 10px/1.6 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-4); margin-bottom: 10px; }
.j-enunciado { font-size: clamp(21px, 3.4vw, 28px); font-weight: 300; letter-spacing: -.03em;
  line-height: 1.25; margin: 0 0 22px; animation: surge var(--t4) var(--e-enf) both; }

.j-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.j-opciones.cortas { grid-template-columns: minmax(0, 1fr); }
.j-opciones .op { text-align: left; background: var(--papel); border: 1px solid var(--borde-2);
  border-radius: 15px; padding: 17px 19px; cursor: pointer; box-shadow: var(--sombra);
  animation: surge var(--t3) var(--e-enf) both;
  transition: border-color var(--t1) var(--e-std), transform var(--t1) var(--e-std),
              box-shadow var(--t2) var(--e-std), background var(--t2) var(--e-std); }
.j-opciones .op:nth-child(2) { animation-delay: .05s; }
.j-opciones .op:nth-child(3) { animation-delay: .1s; }
.j-opciones .op:nth-child(4) { animation-delay: .15s; }
.j-opciones .op:hover { border-color: var(--marca); transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.j-opciones .op:active { transform: translateY(-1px) scale(.99); }
.j-opciones .op b { display: block; font-size: 16.5px; font-weight: 700; margin-bottom: 3px; }
.j-opciones .op span { font-size: 13px; color: var(--tinta-3); }
.op.quieto, .frag.quieto { pointer-events: none; }
.op.bien, .frag.bien { border-color: var(--verde); background: var(--verde-bg);
  box-shadow: 0 0 0 3px rgba(18,146,76,.16); animation: late var(--t4) var(--e-enf); }
.op.mal, .frag.mal { border-color: var(--rojo); background: var(--rojo-bg); }

.j-numero .frase { background: var(--papel); border: 1px solid var(--borde); border-radius: 15px;
  padding: 18px 20px; font-size: 17px; margin: 0 0 18px; box-shadow: var(--sombra); }
.j-numero .fila { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.j-numero input { flex: 1; accent-color: var(--marca); }
.j-numero .fila b { font-size: 34px; font-weight: 800; color: var(--marca); min-width: 60px;
  text-align: right; font-variant-numeric: tabular-nums; }

.j-cazar { display: block; font-size: 18px; line-height: 2.2; }
.j-cazar .frag { display: inline; background: var(--papel); border: 1px solid var(--borde-2);
  border-radius: 9px; padding: 6px 9px; cursor: pointer; font: inherit; margin: 0 2px;
  transition: border-color var(--t1) var(--e-std), background var(--t1) var(--e-std); }
.j-cazar .frag:hover { border-color: var(--marca); background: var(--marca-bg); }

.j-porque { border-radius: 15px; padding: 18px 20px; margin: 22px 0 0; position: relative;
  transition: opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out),
              display var(--t3) allow-discrete; }
.j-porque.bien { background: var(--verde-bg); border: 1px solid var(--verde-bd); }
.j-porque.mal { background: var(--rojo-bg); border: 1px solid var(--rojo-bd); }
.j-porque[hidden] { opacity: 0; transform: translateY(12px); display: none; }
@starting-style { .j-porque:not([hidden]) { opacity: 0; transform: translateY(12px); } }
.j-porque b { font-size: 17px; }
.j-porque .mas { position: absolute; top: 16px; right: 18px; font: 800 17px/1 var(--mono);
  color: var(--verde); animation: surge var(--t4) var(--e-enf) both .12s; }
.j-porque p { margin: 9px 0 0; font-size: 14.5px; color: var(--tinta-2); }
#j-seguir { margin-top: 18px; width: 100%; }

.r-portada { text-align: center; padding: 46px 0 20px; }
.r-portada .num { font: 800 11px/1.6 var(--mono); letter-spacing: .2em; color: var(--marca);
  text-transform: uppercase; animation: cae var(--t3) var(--e-out) both; }
.r-portada h2 { font-size: clamp(32px, 6.2vw, 48px); font-weight: 300; letter-spacing: -.04em;
  margin: 8px 0 10px; animation: surge var(--t4) var(--e-enf) both .04s; }
.r-portada .baj { font-size: 17.5px; color: var(--tinta-2); margin: 0 auto 24px; max-width: 46ch;
  animation: surge var(--t4) var(--e-enf) both .09s; }
.r-portada .ensena { background: var(--papel); border: 1px solid var(--borde-pr); border-radius: 15px;
  padding: 17px 19px; font-size: 14.5px; text-align: left; max-width: 52ch; margin: 0 auto 24px;
  color: var(--tinta-2); box-shadow: var(--sombra);
  animation: surge var(--t4) var(--e-enf) both .14s; }
.r-portada .cuantas { font-size: 13px; color: var(--tinta-4); margin-bottom: 20px; }

.i-lista { list-style: none; padding: 0; margin: 26px 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; counter-reset: r; }
.i-lista li { background: var(--papel); border: 1px solid var(--borde); border-radius: 15px;
  padding: 16px 18px; counter-increment: r; box-shadow: var(--sombra);
  animation: surge var(--t4) var(--e-enf) both;
  transition: transform var(--t2) var(--e-std), box-shadow var(--t2) var(--e-std); }
.i-lista li:nth-child(2) { animation-delay: .06s; } .i-lista li:nth-child(3) { animation-delay: .12s; }
.i-lista li:nth-child(4) { animation-delay: .18s; } .i-lista li:nth-child(5) { animation-delay: .24s; }
.i-lista li:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.i-lista li::before { content: counter(r); font: 800 10px/1 var(--mono); color: var(--marca);
  display: block; margin-bottom: 7px; }
.i-lista b { display: block; font-size: 15px; margin-bottom: 3px; }
.i-lista span { font-size: 13px; color: var(--tinta-3); }

.f-anillo { --p: 0; width: 176px; height: 176px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--verde) calc(var(--p) * 1%), var(--hundido) 0);
  transition: --p 1.1s var(--e-enf);
  animation: entra var(--t4) var(--e-enf) both; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.f-anillo::after { content: ''; position: absolute; inset: 12px; border-radius: 50%;
  background: var(--lienzo); box-shadow: inset 0 2px 10px rgba(27,29,43,.05); }
.f-anillo span { position: relative; z-index: 1; font-size: 40px; font-weight: 800; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; }
.f-nivel { font-size: clamp(28px, 5.2vw, 38px); font-weight: 300; letter-spacing: -.035em; margin: 0 0 8px;
  animation: surge var(--t4) var(--e-enf) both .1s; }
.f-record { display: inline-block; background: var(--verde-solido); color: #fff; font-weight: 800; font-size: 12px;
  padding: 6px 15px; border-radius: 999px; margin-bottom: 14px; animation: late 1.4s var(--e-std) 2; }
.f-fallos { margin: 34px 0 26px; text-align: left; }
.f-tit { font: 800 10px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-4); margin: 0 0 10px; }
.f-fallo { background: var(--papel); border: 1px solid var(--borde); border-radius: 15px; padding: 17px 19px;
  margin-bottom: 8px; box-shadow: var(--sombra); animation: surge var(--t3) var(--e-enf) both; }
.f-fallo:nth-child(3) { animation-delay: .05s; } .f-fallo:nth-child(4) { animation-delay: .1s; }
.f-fallo:nth-child(5) { animation-delay: .15s; } .f-fallo:nth-child(6) { animation-delay: .2s; }
.f-fallo h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 6px; display: flex;
  justify-content: space-between; gap: 10px; }
.f-fallo em { font-style: normal; font-size: 11.5px; color: var(--rojo); font-weight: 700; }
.f-fallo p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.f-limpio { background: var(--verde-bg); border: 1px solid var(--verde-bd); border-radius: 15px;
  padding: 17px 19px; font-size: 15px; margin: 0; }

/* modo aula: para proyectar */
html.aula .reto { max-width: 1120px; }
html.aula .j-enunciado { font-size: clamp(30px, 4.6vw, 46px); }
html.aula .j-opciones .op b { font-size: 23px; }
html.aula .j-opciones .op span { font-size: 16px; }
html.aula .j-cazar { font-size: 27px; line-height: 2.3; }
html.aula .j-porque b { font-size: 22px; }
html.aula .j-porque p { font-size: 18px; }
html.aula .j-numero .frase { font-size: 25px; }

@media (max-width: 620px) {
  nav.tabs, .marcador { top: 49px; }
  .marcador .teclas { display: none; }
  .banda { padding: 40px 0; }
  .dentro { padding: 0 14px; }
  .reto { padding: 22px 14px 64px; }
  .capa + .capa { margin-left: 14px; }
  .d-vent { grid-template-columns: 108px minmax(0, 1fr) 74px; gap: 8px; }
  .d-op { grid-template-columns: minmax(0, 1fr) 44px 34px; }
  .d-mapa { height: 420px; }
  .d-mapa .pt { font-size: 10px; padding: 4px 7px; }
}

/* ═══════════════════════════════ efectos del reto */

@keyframes tiembla {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-7px); } 30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); } 60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
@keyframes destello { to { transform: translateX(230%); } }
@keyframes brota { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* el fallo se sacude; el acierto se barre con un brillo que cruza la tarjeta */
.op.mal, .frag.mal { animation: tiembla 480ms var(--e-std); }
.op.bien { position: relative; overflow: hidden; }
.op.bien::after {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(18,146,76,.28), transparent);
  animation: destello 750ms var(--e-out) 120ms both;
}

/* avance: un segmento por pregunta, se rellena al responder */
.pasos { display: flex; gap: 3px; margin-bottom: 16px; }
.pasos i { flex: 1; height: 4px; border-radius: 999px; background: var(--borde-2);
  transition: background var(--t3) var(--e-std), transform var(--t3) var(--e-enf);
  transform-origin: left; }
.pasos i.ok   { background: var(--verde); }
.pasos i.fallo{ background: var(--rojo-bd); }
.pasos i.aqui { background: var(--marca); transform: scaleY(2.2); }

/* las tarjetas de fallo del cierre entran escalonadas */
.f-fallo { animation: brota var(--t4) var(--e-enf) both; }

/* ══════════════════════════════════════════════════════════ diagramas */
.fig { margin: 0 0 26px; background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--r); padding: 24px; box-shadow: var(--sombra);
  animation: surge var(--t4) var(--e-enf) both;
  animation-timeline: view(); animation-range: entry 0% cover 26%; }
.d-svg { display: block; width: 100%; max-width: 100%; height: auto; color: var(--tinta); }
.fig figcaption { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde);
  font-size: 14.5px; color: var(--tinta-2); max-width: 80ch; }
.fig figcaption b { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .fig { animation: none; opacity: 1; } }
@media (max-width: 620px) { .fig { padding: 16px; } .fig figcaption { font-size: 13.5px; } }

/* ════════════════════════════════════════════════════════════════════
 * CAPA DE IMPACTO · 12-sep-2026
 *
 * Diagnóstico de Emanuel: «lo veo igual de aburrido». Tenía razón y el
 * problema no era que faltara contenido, era que TODO pesaba lo mismo:
 * tarjeta blanca, borde, sombra, repetido cuarenta veces. Sin contraste de
 * escala, sin contraste de densidad y sin una sola banda oscura, una página
 * se lee plana por muy correcta que esté.
 *
 * Lo que cambia: un héroe que ocupa la pantalla, bandas que alternan claro /
 * tinta / marca, números a tamaño de titular, y momentos tipográficos entre
 * secciones. Los diagramas ya iban en `currentColor`, así que sobre banda
 * oscura se invierten solos.
 * ════════════════════════════════════════════════════════════════════ */

/* ── el héroe ocupa la pantalla ── */
.banda.portada.hero {
  min-height: calc(100dvh - 106px);
  display: grid; align-content: center;
  position: relative; overflow: hidden; padding: 40px 0;
}
.banda.portada.hero::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(38% 44% at 22% 28%, rgba(74,58,193,.22), transparent 70%),
    radial-gradient(32% 38% at 78% 22%, rgba(14,122,63,.16), transparent 70%),
    radial-gradient(34% 40% at 62% 82%, rgba(180,83,9,.12), transparent 70%);
  filter: blur(26px);
  animation: deriva 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes deriva {
  50% { transform: translate3d(3%, -3%, 0) scale(1.09) rotate(4deg); }
}
.hero .dentro { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(56px, 11vw, 168px); line-height: .88; letter-spacing: -.055em;
  font-weight: 200; margin: 0 0 clamp(18px, 3vh, 34px);
}
.hero h1 b { font-weight: 800; }
.hero .intro { font-size: clamp(19px, 2.1vw, 30px); max-width: 30ch; line-height: 1.35;
  color: var(--tinta-2); }

/* las cifras del héroe dejan de ser tarjetas y se vuelven tipografía */
.hero .cifras { gap: clamp(26px, 5vw, 80px); margin-top: clamp(28px, 5vh, 60px); }
.hero .cifras > div {
  background: none; border: 0; box-shadow: none; padding: 0;
  flex: 0 1 auto; border-left: 2px solid var(--marca-bd); padding-left: clamp(14px, 1.6vw, 22px);
}
.hero .cifras > div:hover { transform: none; box-shadow: none; }
.hero .cifras b { font-size: clamp(44px, 6.4vw, 96px); letter-spacing: -.05em; line-height: .9; }
.hero .cifras span { font-size: clamp(12px, 1vw, 15px); max-width: 16ch; margin-top: 10px; }

/* ── bandas con carácter ── */
.banda.tinta {
  background: #16182B; color: #EDEBF5;
  --tinta: #EDEBF5; --tinta-2: #BFBED2; --tinta-3: #9A9AB4; --tinta-4: #85859E;
  --papel: #1E2137; --papel-2: #232741; --borde: #333757; --borde-2: #3E4266;
  --marca: #A99BF5; --marca-bg: rgba(169,155,245,.13); --marca-bd: rgba(169,155,245,.32);
  --verde: #5FD08B; --verde-2: #5FD08B; --verde-bg: rgba(95,208,139,.14); --verde-bd: rgba(95,208,139,.34);
  --ambar: #F0B454; --ambar-bg: rgba(240,180,84,.14); --ambar-bd: rgba(240,180,84,.32);
  --rojo: #FF8B8B; --rojo-bg: rgba(255,139,139,.13); --rojo-bd: rgba(255,139,139,.33);
  --hundido: #2A2E4A;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --sombra-alta: 0 2px 6px rgba(0,0,0,.34), 0 22px 42px -20px rgba(0,0,0,.7);
  border: 0;
}
.banda.tinta .et { color: #9A9AB4; }
.banda.tinta .et i { background: #A99BF5; color: #16182B; }
.banda.tinta h1 .lav { color: #A99BF5; }
.banda.tinta h1 .verde { color: #5FD08B; }
.banda.tinta .fig { background: #1E2137; border-color: #333757; }
.banda.tinta .fig figcaption { border-top-color: #333757; }

/* ── número de sección como marca de agua ── */
.banda:not(.portada) > .dentro { position: relative; }
.banda:not(.portada) > .dentro::before {
  content: attr(data-n);
  position: absolute; top: -14px; right: 0;
  font: 800 clamp(90px, 13vw, 190px)/1 var(--sans);
  letter-spacing: -.06em; color: var(--marca); opacity: .07;
  pointer-events: none; user-select: none; z-index: 0;
}
.banda:not(.portada) > .dentro > * { position: relative; z-index: 1; }

/* ── momento tipográfico entre secciones ── */
.grito { font-size: clamp(30px, 4.4vw, 62px); font-weight: 200; letter-spacing: -.04em;
  line-height: 1.08; max-width: 20ch; margin: 0; }
.grito b { font-weight: 800; }
.grito .lav { color: var(--marca); } .grito .verde { color: var(--verde-2); }
.banda.grito-banda { padding: clamp(56px, 9vh, 104px) 0; }

/* ── variedad en las tarjetas: ya no son todas la misma caja ── */
.labs .lab:nth-child(3n+2) { background: var(--marca-bg); border-color: var(--marca-bd); }
.anti div:nth-child(odd) { background: var(--rojo-bg); }

/* ── el diagrama de capas se dibuja al entrar ── */
.fig .d-svg rect { animation: traza var(--t4) var(--e-enf) both;
  animation-timeline: view(); animation-range: entry 0% cover 34%; }
@keyframes traza { from { opacity: 0; transform: scale(.97); } }
.fig .d-svg { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .banda.portada.hero::before { animation: none; }
  .fig .d-svg rect { animation: none; opacity: 1; }
}
@media (max-width: 620px) {
  .banda.portada.hero { min-height: auto; padding: 44px 0 52px; }
  .hero .cifras { gap: 20px; }
  .hero .cifras > div { flex: 1 1 40%; }
  .banda:not(.portada) > .dentro::before { font-size: 90px; top: -8px; opacity: .06; }
}

/* ── remates de contraste de la capa de impacto ── */
:root { --tinta-3: #63677C; }                    /* 4.43 sobre el lienzo, no llegaba */
.banda.tinta { --tinta-4: #A2A2BC; }             /* 4.07 sobre #232741, tampoco */
.banda.tinta .d-chip.on { color: #16182B; }      /* blanco sobre lavanda claro daba 2.42 */
.banda.tinta .chip i, .banda.tinta .et i { color: #16182B; }

/* ── remates finales ── */
/* las cuatro cifras del héroe no entraban en una fila de 1000px */
.hero .dentro { max-width: 1240px; }
.hero .cifras { gap: clamp(18px, 2.6vw, 44px); }
.hero .cifras > div { flex: 1 1 0; min-width: 0; }

/* la marca de agua chocaba con el titular: baja al centro de la banda */
.banda:not(.portada) > .dentro::before {
  top: 50%; transform: translateY(-50%); opacity: .055;
}
.banda.tinta > .dentro::before { opacity: .10; }

/* ══════════════════════════════════ scrollytelling de las cuatro capas
 *
 * El diagrama se queda fijo y el texto avanza. Lo mueve una LÍNEA DE TIEMPO DE
 * SCROLL con nombre (`view-timeline-name` en la pista, `animation-timeline` en
 * las piezas), así que no hay ni un listener de scroll en JS: lo calcula el
 * compositor del navegador y no se pierde ni un fotograma.
 *
 * Cada anillo y cada bloque de texto se encienden en su tramo del recorrido.
 * Donde no haya soporte, las animaciones corren por tiempo y todo termina
 * visible: se pierde el efecto, no el contenido.
 */
.pista {
  view-timeline-name: --capas;
  view-timeline-axis: block;
  height: 360vh;                  /* el recorrido que dura la explicación */
  position: relative;
}
.pista-fija {
  position: sticky; top: 92px;
  /* el escenario no ocupa toda la altura: centrado en 100vh dejaba 270px de
   * vacío arriba y otro tanto abajo, y sobre banda oscura eso se nota mucho */
  height: min(560px, calc(100vh - 150px)); min-height: 420px;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.pista-dibujo { display: grid; place-items: center; }
.d-svg.redondo { max-width: min(46vh, 430px); }

/* el texto de los cuatro pasos se apila en el mismo sitio */
.pista-texto { position: relative; min-height: 340px; }
.pista-texto .paso {
  position: absolute; inset: 0; align-content: center;
  display: grid; gap: 10px;
}
.pista-texto .paso .n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pista-texto .paso h3 { font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; margin: 0;
  letter-spacing: -.03em; }
.pista-texto .paso .desde { font: 700 11px/1.6 var(--mono); letter-spacing: .1em; color: var(--tinta-4); }
.pista-texto .paso .q { font-size: clamp(16px, 1.35vw, 20px); color: var(--tinta-2); margin: 0; }
.pista-texto .paso .ej,
.pista-texto .paso .ojo { font-size: 14.5px; border-radius: 12px; padding: 12px 15px;
  background: var(--papel-2); border: 1px solid var(--borde); color: var(--tinta-2); }
.pista-texto .paso .ojo { background: var(--ambar-bg); border-color: var(--ambar-bd); }
.pista-texto .paso i { display: block; font: 800 9.5px/1.8 var(--mono); letter-spacing: .1em;
  font-style: normal; text-transform: uppercase; color: var(--tinta-4); }
.pista-texto .paso .ojo i { color: var(--ambar); }

/* ── los cuatro tramos del recorrido ──
 *
 * OJO: van en propiedades sueltas y NO con el atajo `animation:`. El atajo
 * reinicia `animation-timeline` a `auto`, así que la línea de tiempo con nombre
 * se perdía, las animaciones corrían por tiempo, terminaban en 1ms y todo
 * quedaba encendido a la vez. Costó una vuelta encontrarlo. */
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes entra-sale { 0% { opacity: 0; } 14%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes brinca { from { opacity: 0; transform: translateY(22px) scale(.94); }
                    to   { opacity: 1; transform: none; } }

.pista .pz {
  animation-duration: 1ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --capas;
}
/* CINCO tramos. Los anillos se quedan una vez encendidos (la contención se
 * construye); el texto se releva, uno cada vez. */
.pista-dibujo .pz:nth-child(1) { animation-name: aparece; animation-range: cover 1% cover 7%; }
.pista-dibujo .pz:nth-child(2) { animation-name: brinca;  animation-range: cover 19% cover 26%; }
.pista-dibujo .pz:nth-child(3) { animation-name: brinca;  animation-range: cover 38% cover 45%; }
.pista-dibujo .pz:nth-child(4) { animation-name: brinca;  animation-range: cover 57% cover 64%; }
.pista-dibujo .pz:nth-child(5) { animation-name: brinca;  animation-range: cover 76% cover 83%; }

.pista-texto .paso:nth-child(1) { animation-name: entra-sale; animation-range: cover 0% cover 20%; }
.pista-texto .paso:nth-child(2) { animation-name: entra-sale; animation-range: cover 19% cover 39%; }
.pista-texto .paso:nth-child(3) { animation-name: entra-sale; animation-range: cover 38% cover 58%; }
.pista-texto .paso:nth-child(4) { animation-name: entra-sale; animation-range: cover 57% cover 77%; }
.pista-texto .paso:nth-child(5) { animation-name: entra-sale; animation-range: cover 76% cover 97%; }

/* el anillo encendido respira, para saber cuál se está explicando */
.pista-dibujo circle { transition: filter var(--t3) var(--e-std); }

/* sin soporte de líneas de tiempo, o con movimiento reducido: todo a la vez */
@supports not (animation-timeline: view()) {
  .pista { height: auto; }
  .pista-fija { position: static; height: auto; grid-template-columns: minmax(0, 1fr); }
  .pista-texto { min-height: 0; }
  .pista-texto .paso { position: static; margin-bottom: 20px; }
  .pista .pz { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pista { height: auto; }
  .pista-fija { position: static; height: auto; grid-template-columns: minmax(0, 1fr); }
  .pista-texto { min-height: 0; }
  .pista-texto .paso { position: static; margin-bottom: 20px; opacity: 1 !important; animation: none !important; }
  .pista .pz { animation: none !important; opacity: 1 !important; }
}
@media (max-width: 820px) {
  .pista { height: auto; }
  .pista-fija { position: static; height: auto; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pista-texto { min-height: 0; }
  .pista-texto .paso { position: static; margin-bottom: 18px; opacity: 1 !important; animation: none !important; }
  .pista .pz { animation: none !important; opacity: 1 !important; }
  .d-svg.redondo { max-width: 320px; }
}

/* ════════════════════════════════════════════════════════════════════
 * CORRECCIÓN · 12-sep-2026
 * «el dark no se ve bien y las letras muy grandes».
 *
 * Fuera el casi negro. El contraste entre secciones se consigue igual con una
 * banda tintada de lavanda, que rompe la monotonía sin cambiar de tema a media
 * página. Y toda la escala tipográfica baja un escalón: el titular pasa de
 * 168px a 104px y los de sección de 50 a 38.
 * ════════════════════════════════════════════════════════════════════ */

/* ── la banda deja de ser oscura y pasa a lavanda ── */
.banda.tinta {
  background: linear-gradient(180deg, #F1EEFB 0%, #EDE9FA 100%);
  color: var(--tinta);
  --papel: #FFFFFF; --papel-2: #F7F5FD;
  --borde: #DED8F3; --borde-2: #CFC7EE;
  --tinta: #1B1D2B; --tinta-2: #3A4065; --tinta-3: #63677C; --tinta-4: #5F6376;
  --marca: #4A3AC1; --marca-bg: rgba(74,58,193,.08); --marca-bd: #D5CFF0;
  --verde: #12924C; --verde-2: #0E7A3F; --verde-bg: #EAF7EF; --verde-bd: #BFE6CD;
  --ambar: #B45309; --ambar-bg: #FDF3E4; --ambar-bd: #F0D9B4;
  --rojo: #C62828; --rojo-bg: #FDEDED; --rojo-bd: #F3C9C9;
  --hundido: #E3DDF6;
  --sombra: 0 1px 2px rgba(27,29,43,.04), 0 4px 14px -8px rgba(27,29,43,.10);
  --sombra-alta: 0 2px 4px rgba(27,29,43,.05), 0 18px 34px -18px rgba(74,58,193,.28);
  border-top: 1px solid #DED8F3; border-bottom: 1px solid #DED8F3;
}
.banda.tinta .et { color: var(--tinta-4); }
.banda.tinta .et i { background: var(--marca); color: #fff; }
.banda.tinta h1 .lav { color: var(--marca); }
.banda.tinta h1 .verde { color: var(--verde-2); }
.banda.tinta .fig { background: #fff; border-color: #DED8F3; }
.banda.tinta .fig figcaption { border-top-color: #DED8F3; }
.banda.tinta .d-chip.on { color: #fff; }
.banda.tinta .chip i { color: #fff; }
.banda.tinta > .dentro::before { opacity: .07; }

/* ── toda la tipografía baja un escalón ── */
.hero h1 { font-size: clamp(44px, 7.2vw, 104px); letter-spacing: -.045em; line-height: .94; }
.hero .intro { font-size: clamp(17px, 1.5vw, 22px); max-width: 40ch; }
.hero .cifras b { font-size: clamp(32px, 4vw, 60px); }
.hero .cifras span { font-size: clamp(12px, .92vw, 14px); }

h1 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.032em; line-height: 1.06; }
.intro { font-size: 16.5px; max-width: 70ch; }
.grito { font-size: clamp(24px, 3.1vw, 42px); max-width: 26ch; }

.pista-texto .paso h3 { font-size: clamp(21px, 2vw, 29px); }
.pista-texto .paso .q { font-size: clamp(15px, 1.15vw, 17.5px); }
.pista-texto .paso .ej, .pista-texto .paso .ojo { font-size: 14px; }

.capa h3, .lab h3, .truco h3 { font-size: 17.5px; }
.con h3 { font-size: 17px; }
.bloque-demo > h3 { font-size: 18.5px; }
.eje h3 { font-size: 16.5px; }

/* la marca de agua también era enorme */
.banda:not(.portada) > .dentro::before { font-size: clamp(64px, 8vw, 120px); }

/* ═══════════════════════════════════════════ registro y ranking del reto */

.reg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px; max-width: 620px; margin: 0 auto 6px; }
.reg-c { display: block; }
.reg-c span { display: block; font: 700 10px/1.8 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-4); margin-bottom: 5px; }
.reg-c input { width: 100%; box-sizing: border-box; font: 500 16px/1.4 inherit;
  color: var(--tinta); background: var(--papel); border: 1px solid var(--borde-2);
  border-radius: 12px; padding: 12px 14px;
  transition: border-color var(--t1) var(--e-std), box-shadow var(--t1) var(--e-std); }
.reg-c input::placeholder { color: var(--tinta-4); }
.reg-c input:focus { outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(74,58,193,.14); }
.reg-mal { text-align: center; font-size: 13.5px; color: var(--rojo); margin: 4px 0 0; }

.f-envio { font: 600 13px/1.5 var(--mono); color: var(--tinta-4); margin: 10px 0 0; }
.f-envio.ok { color: var(--verde-2); }
.f-envio.mal { color: var(--ambar); }

.rk { list-style: none; margin: 18px auto 0; padding: 0; max-width: 620px;
  display: flex; flex-direction: column; gap: 6px; }
.rk-f { display: flex; align-items: center; gap: 14px; background: var(--papel);
  border: 1px solid var(--borde); border-radius: 13px; padding: 11px 16px;
  box-shadow: var(--sombra); }
.rk-n { flex: none; width: 30px; font: 800 15px/1 var(--mono); color: var(--tinta-4);
  text-align: right; }
.rk-f.podio .rk-n { color: var(--marca); font-size: 18px; }
.rk-q { flex: 1; min-width: 0; }
.rk-q em { display: block; font-style: normal; font-weight: 700; font-size: 15.5px;
  color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-q i { font-style: normal; font-size: 12.5px; color: var(--tinta-4); }
.rk-p { flex: none; text-align: right; font: 800 17px/1.1 var(--mono); color: var(--tinta-2); }
.rk-p i { display: block; font: 600 11px/1.4 var(--mono); font-style: normal; color: var(--tinta-4); }
/* la tuya, para encontrarte sin leer los cuarenta */
.rk-f.mio { background: var(--marca-bg); border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(74,58,193,.12), var(--sombra); }
.rk-f.mio .rk-q em, .rk-f.mio .rk-p { color: var(--marca); }
.rk-estado { text-align: center; color: var(--tinta-3); font-size: 15px; margin: 26px 0; }

/* en modo aula todo crece para que se lea desde el fondo */
html.aula .rk-q em { font-size: 20px; }
html.aula .rk-p { font-size: 21px; }
html.aula .rk-n { font-size: 19px; width: 36px; }

/* ═══════════════════════════════════════════════ barra lateral */
/* Sustituye a la cabecera y a las pestañas: el logo, las cinco vistas y los dos
 * accesos de la sesión viven aquí. En pantalla estrecha se vuelve una tira
 * horizontal arriba, que es como funcionaban las pestañas antes. */

.app { display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.lienzo { min-width: 0; }

.lateral { position: sticky; top: 0; align-self: start; height: 100dvh;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 14px;
  box-sizing: border-box; background: var(--papel);
  border-right: 1px solid var(--borde); z-index: 20; }

.lat-marca { display: block; text-decoration: none; padding: 0 10px 18px; }
.lat-marca .logo { height: 17px; width: auto; display: block; margin-bottom: 9px; }
.lat-marca span { font-size: 13px; font-weight: 700; color: var(--tinta-3); letter-spacing: -.01em; }

.menu { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.menu-t { font: 700 9.5px/1.8 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-4); margin: 16px 0 6px; padding: 0 10px; }
.menu-t:first-child { margin-top: 0; }

.menu button, .men-en { display: flex; align-items: center; gap: 10px; width: 100%;
  box-sizing: border-box; text-align: left; border: 0; background: transparent;
  color: var(--tinta-2); font: 600 14.5px/1.3 inherit; padding: 10px 10px; border-radius: 11px;
  cursor: pointer; text-decoration: none; position: relative;
  transition: background var(--t1) var(--e-std), color var(--t1) var(--e-std); }
.menu button i, .men-en i { flex: none; font-style: normal;
  font: 700 10px/1 var(--mono); color: var(--tinta-4); width: 16px; }
.menu button:hover, .men-en:hover { background: var(--papel-2); color: var(--tinta); }
.menu button.on { background: var(--marca-bg); color: var(--marca); font-weight: 700; }
.menu button.on i { color: var(--marca); }
.men-en.verde { color: var(--verde-2); }
.men-en.verde i { color: var(--verde-2); }
.men-en.verde:hover { background: var(--verde-bg); }
.menu button:focus-visible, .men-en:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center;
    gap: 10px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--borde);
    overflow-x: auto; scrollbar-width: none; }
  .lateral::-webkit-scrollbar { display: none; }
  .lat-marca { padding: 0 8px 0 0; flex: none; border-right: 1px solid var(--borde); }
  .lat-marca span { display: none; }
  .lat-marca .logo { margin-bottom: 0; }
  .menu { flex-direction: row; align-items: center; gap: 2px; overflow: visible; }
  .menu-t { display: none; }
  .menu button, .men-en { width: auto; flex: none; padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }
  .menu button i, .men-en i { display: none; }
}

/* ── la predicción como apuesta: el % no se ve hasta después de elegir ── */
.d-pide { font-size: 15px; font-weight: 700; color: var(--tinta-2); margin: 4px 0 10px; }
.d-pide.bien { color: var(--verde-2); }
.d-pide.otra { color: var(--ambar); }
/* mientras se elige, la barra y el número ocupan su sitio pero no se ven:
   si se quitaran del todo, el botón daría un salto al revelarse */
.d-opciones:not(.revelado) .d-op .bar,
.d-opciones:not(.revelado) .d-op b { visibility: hidden; }
.d-opciones:not(.revelado) .d-op { cursor: pointer; }
.d-opciones.revelado .d-op { opacity: .55; }
.d-opciones.revelado .d-op.top { opacity: 1; border-color: var(--marca); background: var(--marca-bg); }
.d-opciones.revelado .d-op.tuya { opacity: 1; box-shadow: 0 0 0 2px var(--tinta-4); }
.d-opciones.revelado .d-op.tuya.top { box-shadow: 0 0 0 2px var(--verde-solido); }
.d-tras { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.d-marca { font: 700 13px/1 var(--mono); color: var(--tinta-4); }

/* ── ilustraciones de seccion ── */
/* El width/height del atributo reserva el hueco mientras baja la imagen; sin
 * eso la pagina pega un salto al terminar de cargar cada una. */
.ilu { width: 100%; height: auto; display: block; border-radius: 14px;
  background: var(--papel-2); }
.ilu.ancha { max-width: 620px; margin: 0 0 22px; }

/* en las tarjetas de tipos, la ilustracion encabeza */
.eje-lista .con-ilu { padding-top: 10px; }
.eje-lista .con-ilu .ilu { margin-bottom: 12px; }

/* en los trucos va al lado, que la tarjeta es ancha y apilada */
.tr-cab { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px;
  align-items: center; margin-bottom: 15px; }
.truco:not(.con-ilu) .tr-cab { grid-template-columns: minmax(0, 1fr); }
.tr-txt { min-width: 0; }
.tr-txt .porque { margin-bottom: 0; }
.tr-ilu { width: 100%; height: auto; display: block; border-radius: 12px;
  background: var(--papel-2); }

@media (max-width: 700px) {
  .tr-cab { grid-template-columns: minmax(0, 1fr); }
  .tr-ilu { max-width: 320px; }
}