/* CargoX · artículos · v2 (28-sep-2026). Dirección: DIRECCION-EDITORIAL-28 + GUION-1-v2 · referencias REFERENCIAS-28/ref1–ref4.
   Tema NOCHE de la app (#121316, tinta cálida #F7F7F4), rojo de acción rgb(229,36,63) sólo en flecha, sticker, óvalo, × y botón.
   Cada pieza es una animación EN PAUSA cuyo instante sale de --t (plano fijo) o --e (entrada) que escribe el motor:
   el estado BASE es el final (sin JS, reduced-motion y pantallas bajas se leen completos y quietos). */

:root {
  --fondo: #121316; --gris: #8A8B90; --blanco: #F7F7F4; --rojo: rgb(229, 36, 63); --sobre-rojo: #FFFFFF;
  --suave: #B9BAB6; --ret: rgba(247, 247, 244, .05); --selbg: rgba(247, 247, 244, .15); --tiro: #A6A7AB;
  --panel: #1A1B1F; --linea: rgba(247, 247, 244, .12);
  --f-disp: 'Space Grotesk', 'Inter', system-ui, sans-serif; --f-txt: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-marca: 'Michroma', 'Space Grotesk', system-ui, sans-serif; --f-mano: 'Caveat', 'Segoe Print', cursive; --cnl: rgba(247, 247, 244, .3);
  --xo: cubic-bezier(.16, 1, .3, 1); --io: cubic-bezier(.45, 0, .55, 1); --rb: cubic-bezier(.34, 1.56, .64, 1);
  --gut: 20px;
  --fs-arr: clamp(18px, min(5.2vw, 2.65svh), 24px);
  --fs-rem: clamp(36px, min(12vw, 6svh), 74px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fondo); color: var(--blanco); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--f-txt); background: var(--fondo); overflow-x: clip; }
.mueve { scroll-behavior: smooth; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; border-radius: 6px; }
p, h1, h2, h3 { margin: 0; }

/* ------------------------------------------------------------ marco: retícula (ref1), cabecera corrida y firma */
.esc {
  position: relative; overflow-x: clip;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - .5px), var(--ret) calc(10% - .5px) calc(10% + .5px), transparent calc(10% + .5px) 20%),
    var(--fondo);
}
.marco {
  min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0 max(var(--gut), calc((100% - 600px) / 2));
}
.cab, .pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 13px/1.3 var(--f-txt); color: var(--gris); }
.cab { min-height: 60px; padding-top: env(safe-area-inset-top); }
.cab-f { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cab-n { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: flex-end; color: var(--blanco);
  text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pie { min-height: 64px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.firma { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(247, 247, 244, .28); border-radius: 999px; padding: 6px 13px 6px 9px; color: var(--blanco); }
.iso { width: 15px; height: 13px; fill: var(--blanco); }
.marca { font: 400 10.5px/1 var(--f-marca); letter-spacing: .1em; }
.by { font: 500 11px/1 var(--f-txt); color: var(--suave); }
.pie-d { font-size: 12px; text-align: right; }

.cuerpo { display: flex; flex-direction: column; min-height: 0; }
.pila { margin: auto 0; width: 100%; padding: 8px 0 18px; }

/* ------------------------------------------------------------ titular: arranque con selección (ref1) + remate en dos tonos */
.tit { position: relative; font-weight: 400; }
.arr { display: block; font: 500 var(--fs-arr)/1.32 var(--f-txt); letter-spacing: -.012em; color: var(--blanco); margin-bottom: .6em; max-width: 23ch; }
.rem { display: block; font: 700 var(--fs-rem)/.98 var(--f-disp); letter-spacing: -.045em; }
.g { color: var(--gris); }
.b { color: var(--blanco); }
.sub { font: 400 clamp(16px, 4.2vw, 18px)/1.45 var(--f-txt); color: var(--suave); margin-top: 16px; max-width: 34ch; }

.sel { background: linear-gradient(var(--selbg), var(--selbg)) 0 0 / 100% 100% no-repeat; padding: .03em .06em .06em; border-radius: 2px; color: var(--blanco); }
.h { display: inline-block; position: relative; width: 1.5px; height: 1.22em; background: var(--tiro); vertical-align: -.26em; margin: 0 .07em; }
.h::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--tiro); }
.h1::after { top: -5px; }
.h2::after { bottom: -5px; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .02em .16em; margin: -.14em -.02em -.16em; }
.w > span { display: inline-block; }

/* gis (ref1): trazo áspero bajo la palabra clave, nunca encima del texto */
.tok { display: inline-block; white-space: nowrap; }
.gis-w { position: relative; display: inline-block; white-space: nowrap; }
.gis { position: absolute; left: -3%; width: 106%; top: 86%; height: .3em; overflow: visible; pointer-events: none; }
.gis path { fill: none; stroke: #CFCFCA; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: url(#grano); stroke-dasharray: 1 2; stroke-dashoffset: 0; }

/* sticker rojo ladeado (ref2) */
.stk { display: block; margin: 0; }
.stk > span { display: inline-block; background: var(--rojo); color: var(--sobre-rojo); font: 600 15px/1.15 var(--f-txt); letter-spacing: -.005em;
  padding: 11px 17px 12px; border-radius: 999px; transform: rotate(-4deg); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); white-space: nowrap; }

/* flecha gruesa roja (ref2) */
svg.fr { width: 40px; height: 40px; fill: none; stroke: var(--rojo); stroke-width: 8; stroke-linecap: butt; stroke-linejoin: miter; overflow: visible; }

/* etiquetas «+» en gris tenue (ref2) */
.etq { display: flex; flex-direction: column; gap: 2px; font: 500 14px/1.4 var(--f-txt); color: var(--gris); }
.etq span::before { content: "+"; display: inline-block; width: 18px; font: 400 21px/1 var(--f-txt); vertical-align: -2px; }

/* siluetas de la app: fantasma (trazo) y luz (relleno) */
.sil { display: block; width: 100%; height: auto; overflow: visible; }
.sim { fill: var(--cuerpo); stroke: var(--trazo); stroke-width: var(--sw, 2.6); stroke-linejoin: round; }
.sim .vid, .sim .rin { fill: var(--hueco); }
.fant { --cuerpo: none; --trazo: rgba(247, 247, 244, .42); --hueco: none; }
.luz { --cuerpo: rgba(247, 247, 244, .06); --trazo: var(--blanco); --hueco: none; --sw: 3.8; opacity: 0; filter: drop-shadow(0 0 4px rgba(247, 247, 244, .55)); }
.tar-caja { fill: var(--tc); stroke: var(--ts); stroke-width: 2; }
.tar-base { fill: var(--tb); }
.tr { display: block; width: 100%; height: auto; overflow: visible; --tc: var(--blanco); --ts: none; --tb: rgba(247, 247, 244, .62); }
.tr.o { --tc: none; --ts: rgba(247, 247, 244, .85); --tb: rgba(247, 247, 244, .38); }
.tw { display: grid; }
.tw > .tr { grid-area: 1 / 1; }
.flash { position: absolute; inset: -18% -8%; background: radial-gradient(closest-side, rgba(247, 247, 244, .55), rgba(247, 247, 244, 0)); opacity: 0; pointer-events: none; }
.flash.on { animation: destello 240ms ease-out 1 both; }
@keyframes destello { 0% { opacity: 0; transform: scale(.8); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }

/* ------------------------------------------------------------ portada */
.portada .pila { position: relative; }
.etq-ad { align-items: flex-end; margin-bottom: 18px; }
.etq-ai { margin-top: 26px; }
.portada .tit { padding-left: 50px; }
.portada svg.fr-arr { position: absolute; left: 0; top: .1em; width: 36px; height: 36px; }
.portada .rem { font-size: clamp(40px, min(13.4vw, 6.6svh), 84px); margin-left: -50px; }
.stk-p { position: relative; z-index: 2; margin: -8px 0 0 auto; width: max-content; max-width: 100%; }

/* ------------------------------------------------------------ 01 · cuatro camiones fantasma */
.disp { margin-top: 26px; }
.d01 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.d01-u { display: grid; gap: 6px; }
.etq1 { font: 500 13px/1.3 var(--f-txt); color: var(--gris); }
.etq1::before { content: "+ "; }

/* ------------------------------------------------------------ 02 · +1 */
.d02 { position: relative; height: 262px; }
.mas1 { position: absolute; left: -.04em; top: 0; font: 700 132px/.8 var(--f-disp); letter-spacing: -.06em; color: var(--blanco); transform-origin: 10% 90%; }
.curva { position: absolute; left: 140px; top: 8px; width: 104px; height: 78px; overflow: visible; fill: none; stroke: var(--rojo); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.curva .cv { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.stk-2 { position: absolute; right: 0; top: 98px; }
.d02-suelo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 6px; padding-bottom: 2px; border-bottom: 1px solid rgba(247, 247, 244, .3); }
.d02-suelo > .tr, .d02-suelo > .tw { width: 34px; flex: none; margin-bottom: 1px; }
.d02-cam, .d03-cam, .d05-cam { position: relative; }
.d02-cam { flex: 1; margin-left: 10px; display: grid; max-width: 230px; }
.d02-cam .sil, .d03-cam .sil { grid-area: 1 / 1; }
.d02 .luz, .d03 .luz, .d05 .luz, .d05-cam .luz { opacity: 1; }
.d02 .sa, .d03 .sa { opacity: 0; }
.d02 .t3 .o, .d03 .tw .o { opacity: 0; }

/* ------------------------------------------------------------ 03 · el peso también manda */
.d03 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px 14px; align-items: end; }
.d03-tar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 6px; max-width: 132px; }
.d03-cam { display: grid; }
.d03-fila { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pil { display: inline-grid; }
.pil > span { grid-area: 1 / 1; background: #24262B; border: 1px solid rgba(247, 247, 244, .16); color: var(--blanco); font: 600 15px/1.15 var(--f-txt);
  padding: 11px 16px 12px; border-radius: 999px; white-space: nowrap; justify-self: start; }
.pil .pa { opacity: 0; }
.nota { position: relative; display: inline-block; margin-left: 58px; padding: 14px 20px 15px; font: 500 16px/1.2 var(--f-disp); color: var(--blanco); transform: rotate(-3deg); }
.nota .ov { position: absolute; left: -6px; top: -5px; width: calc(100% + 12px); height: calc(100% + 10px); overflow: visible; fill: none; stroke: var(--rojo); stroke-width: 2.4; stroke-linecap: round; }
.nota .ov path, .nota .fl path { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.nota .fl { position: absolute; left: -40px; top: -26px; width: 36px; height: 34px; overflow: visible; fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ 04 · iceberg (ref3) + puntos (ref4) */
.xm { display: inline-block; width: .7em; height: .7em; vertical-align: -.02em; margin: 0 .08em 0 .02em; }
.xm svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--rojo); stroke-width: 5.5; stroke-linecap: round; }
.xm path { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.d04 { position: relative; width: 100%; max-width: 390px; aspect-ratio: 360 / 490; margin: 22px auto 0; isolation: isolate; }
.d04::before { content: ""; position: absolute; inset: -6% -8% -2%; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(247, 247, 244, .1) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 80%, transparent); mask: linear-gradient(transparent, #000 14%, #000 80%, transparent); }
.ice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.agua { fill: rgba(150, 160, 176, .075); }
.bajo path { fill: #DCDDD8; }
.bajo .m0 { opacity: .09; } .bajo .m1 { opacity: .13; } .bajo .m2 { opacity: .19; } .bajo .m3 { opacity: .07; }
.punta .f1 { fill: #C4C5C0; } .punta .f2 { fill: var(--blanco); } .punta .f3 { fill: #DEDFDA; } .punta .f4 { fill: #A3A4A0; }
.borde { fill: rgba(247, 247, 244, .6); }
.nivel { stroke: rgba(247, 247, 244, .3); stroke-width: 1; fill: none; }
.columna, .lin { fill: none; stroke: rgba(247, 247, 244, .5); stroke-width: 1.3; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.pto { fill: var(--blanco); transform-box: fill-box; transform-origin: center; }
.pl { position: absolute; display: flex; align-items: center; gap: 8px; margin: 0; max-width: 46.5%; translate: 0 -50%;
  background: #1C1E22; border: 1px solid rgba(247, 247, 244, .14); border-radius: 22px; padding: 8px 13px 8px 11px;
  font: 500 13px/1.22 var(--f-txt); color: var(--blanco); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.pl .ico { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-a { left: 0; top: calc(34 / 490 * 100%); max-width: 52%; }
.pl.izq { right: calc(100% - 162 / 360 * 100%); }
.pl.der { left: calc(198 / 360 * 100%); }
.pl0 { top: calc(214 / 490 * 100%); } .pl1 { top: calc(270 / 490 * 100%); } .pl2 { top: calc(326 / 490 * 100%); }
.pl3 { top: calc(382 / 490 * 100%); } .pl4 { top: calc(438 / 490 * 100%); }

/* ------------------------------------------------------------ 05 · ahora tú (ref4: tarjeta, número grande, brillo) */
.d05 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 22px; position: relative; }
.d05::before { content: ""; position: absolute; inset: -18px -24px; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(247, 247, 244, .09) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
#e05 .pila { isolation: isolate; }
.tj { background: var(--panel); border: 1px solid rgba(247, 247, 244, .1); border-radius: 18px; padding: 12px 14px 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.tj-e { font: 500 14px/1.3 var(--f-txt); color: var(--suave); padding: 2px 4px 10px; border-bottom: 1px solid rgba(247, 247, 244, .1); }
.tj-f { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.tj-n { display: inline-block; min-width: 1.7ch; text-align: center; font: 700 68px/1 var(--f-disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bt { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(247, 247, 244, .34); background: transparent; color: var(--blanco);
  font: 400 26px/1 var(--f-txt); cursor: pointer; display: inline-grid; place-items: center; padding: 0 0 2px; }
.bt[aria-disabled="true"] { opacity: .35; cursor: default; }
.itr { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 16px 7px 8px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(247, 247, 244, .5); background: var(--fondo); color: var(--blanco); font: 600 15px/1.2 var(--f-txt); text-align: left; transform: rotate(2.5deg); max-width: 100%; }
.itr-k { position: relative; width: 38px; height: 22px; border-radius: 999px; border: 1.5px solid rgba(247, 247, 244, .6); flex: none; }
.itr-k::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); transition: transform 180ms var(--xo); }
.itr[aria-pressed="true"] .itr-k { background: var(--blanco); }
.itr[aria-pressed="true"] .itr-k::after { transform: translateX(15px); background: var(--fondo); }
.rv { margin-top: 26px; font: 700 clamp(34px, min(10.6vw, 5.4svh), 62px)/1 var(--f-disp); letter-spacing: -.045em; min-height: 2em; }
.rv .b { text-shadow: 0 0 22px rgba(247, 247, 244, .35), 0 0 2px rgba(247, 247, 244, .2); }
.d05-res { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.d05-cam { width: 42%; max-width: 190px; flex: none; }
.d05-cam.asesor .luz { opacity: 0; }
.d05-cam.asesor .fant { --trazo: rgba(247, 247, 244, .6); }
.stk-5 { min-width: 0; }
.stk-5 > span { white-space: normal; }
.reb { animation: asentar 360ms var(--rb) 1 both; }
@keyframes asentar { from { transform: rotate(-4deg) scale(.84); } to { transform: rotate(-4deg) scale(1); } }
.tj-n.reb { animation-name: asentar-n; }
@keyframes asentar-n { from { transform: translateY(8px) scale(.9); } to { transform: none; } }
.leer { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 0 4px; border: 0; background: none; color: var(--blanco); font: 500 15px/1 var(--f-txt); cursor: pointer; }
.leer-m { font-size: 22px; transition: transform 200ms var(--xo); }
.leer[aria-expanded="true"] .leer-m { transform: rotate(45deg); }
.mas { margin-top: 12px; font: 400 14px/1.55 var(--f-txt); color: var(--suave); }
.mas-n { padding-left: 18px; margin: 0 0 12px; }
.mas h3 { font: 600 14px/1.4 var(--f-txt); color: var(--blanco); margin: 12px 0 4px; }
.est-l { list-style: none; padding: 0; margin: 0; columns: 2 150px; column-gap: 18px; }
.est-n { display: inline-block; min-width: 2ch; font-weight: 600; color: var(--blanco); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ cierre (ref2: mayúsculas apiladas) */
.caps .rem { font-size: clamp(44px, min(15.2vw, 7.4svh), 100px); line-height: .9; letter-spacing: -.025em; }
.ap { display: block; }
.caps .w { padding-top: .26em; margin-top: -.26em; }
.bn { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.bn li { display: flex; gap: 12px; font: 500 18px/1.38 var(--f-txt); color: var(--blanco); }
.bn-m { color: var(--gris); font: 400 24px/1 var(--f-txt); flex: none; width: 16px; margin-top: 1px; }
.acc { display: flex; align-items: flex-end; gap: 12px; margin-top: 30px; }
svg.fr-acc { width: 38px; height: 38px; flex: none; margin-bottom: 26px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 28px; border-radius: 999px; background: var(--rojo); color: var(--sobre-rojo);
  font: 600 18px/1 var(--f-txt); text-decoration: none; box-shadow: 0 14px 34px rgba(229, 36, 63, .22); }
.btn:focus-visible { outline-color: var(--blanco); border-radius: 999px; }
.alc { margin-top: 18px; font: 400 14px/1.55 var(--f-txt); color: #D2D3CF; max-width: 40ch; }

/* ------------------------------------------------------------ la sección (índice) */
.sec .tit { margin-bottom: 26px; }
.tja { position: relative; display: grid; gap: 14px; text-decoration: none; color: var(--blanco); background: var(--panel); border: 1px solid rgba(247, 247, 244, .12);
  border-radius: 24px; padding: 18px 18px 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); isolation: isolate; overflow: hidden; }
.tja::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(247, 247, 244, .08) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); }
.tja-k { display: flex; justify-content: space-between; font: 500 13px/1.3 var(--f-txt); color: var(--suave); }
.tja-k span:first-child { font: 700 13px/1.3 var(--f-disp); color: var(--blanco); letter-spacing: .06em; }
.tja-s { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; padding: 6px 0 2px; }
.tja-t { font: 700 clamp(34px, 10.4vw, 52px)/.98 var(--f-disp); letter-spacing: -.045em; }
.stk-t { margin: -4px 0 0 auto; }
.tja-d { font: 400 16px/1.45 var(--f-txt); color: var(--suave); }
.tja-l { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; font: 600 16px/1 var(--f-txt); border-top: 1px solid rgba(247, 247, 244, .1); }

/* ============================================================ EL MOVIMIENTO (sólo con .mueve; el motor lo pone) */
.fija #e00 { height: 210svh; } .fija #e01 { height: 230svh; } .fija #e02 { height: 250svh; }
.fija #e03 { height: 270svh; } .fija #e04 { height: 300svh; }
.fija .pin .marco { position: sticky; top: 0; height: 100svh; min-height: 0; }
.fija .pin .cuerpo { overflow-x: visible; overflow-y: clip; }
.pin { --p: var(--t); }
.ve { --p: var(--e); }

.mueve :is(.sel, .sel .h2, .w > span, .gis path, svg.fr, .stk > span, .etq, .pila, .d01-u, .d01-u .luz, .d02 .tw, .d02 .tw .o, .d02 .tw .s, .mas1, .curva .cv, .curva .cvp,
  .d02 .sa, .d02 .sb, .d03 .tw .o, .d03 .tw .s, .d03 .sa, .d03 .sb, .pil .pa, .pil .pb, .nota > span, .nota .ov path, .nota .fl path, .xm path,
  .columna, .lin, .pto, .pl, .bn li .sel, #e02 .sub, #e03 .sub, #e04 .sub) {
  animation-duration: 1s; animation-fill-mode: both; animation-play-state: paused; animation-iteration-count: 1;
  animation-delay: calc(clamp(0, (var(--p, 1) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1) * -1s);
}
@keyframes selx { from { background-size: 0% 100%; } }
@keyframes ver { from { opacity: 0; } }
@keyframes sube { from { transform: translateY(110%); } }
@keyframes traza { from { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } }
@keyframes cae { from { transform: translateY(-46px) rotate(-18deg) scale(1.1); opacity: 0; } 55% { opacity: 1; } }
@keyframes llega { from { transform: translate(-16px, -16px); opacity: 0; } }
@keyframes duda { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes alza { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@keyframes cae-t { from { transform: translateY(-96px); opacity: 0; } 40% { opacity: 1; } }
@keyframes crece { from { transform: scale(.3); opacity: 0; } }
@keyframes apaga { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-10px); } }
@keyframes entra-d { from { opacity: 0; transform: translateX(14px); } }
@keyframes pesa { from { opacity: 0; transform: translateY(-12px); } }
@keyframes suelta-p { from { opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: translateY(-10px); } }
@keyframes salta { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@keyframes pan { from { transform: none; } to { transform: translateY(calc(var(--pan, 0) * -1px)); } }
@keyframes deriva { from { transform: translateY(14px); } }
@keyframes izq { from { opacity: 0; transform: translateX(-18px); } }
@keyframes der { from { opacity: 0; transform: translateX(18px); } }
@keyframes punto { from { transform: scale(0); } }

.mueve .sel { animation-name: selx; animation-timing-function: var(--io); --a: .03; --b: .22; }
.mueve .sel .h2 { animation-name: ver; animation-timing-function: linear; --a: .21; --b: .24; }
.mueve .w > span { animation-name: sube; animation-timing-function: var(--xo); --p: var(--e); }
.w.i0 > span { --a: .30; --b: .62; } .w.i1 > span { --a: .33; --b: .65; } .w.i2 > span { --a: .36; --b: .68; } .w.i3 > span { --a: .39; --b: .71; }
.w.i4 > span { --a: .42; --b: .74; } .w.i5 > span { --a: .45; --b: .77; } .w.i6 > span { --a: .48; --b: .80; } .w.i7 > span { --a: .51; --b: .83; }
.w.i8 > span { --a: .54; --b: .86; } .w.i9 > span { --a: .57; --b: .89; } .w.i10 > span, .w.i11 > span, .w.i12 > span { --a: .60; --b: .92; }
.mueve .gis path { animation-name: traza; animation-timing-function: var(--io); }
.mueve .stk > span { animation-name: cae; animation-timing-function: var(--rb); }
.mueve svg.fr { animation-name: llega; animation-timing-function: var(--xo); }
.fija .pin .pila { animation-name: pan; animation-timing-function: var(--io); --a: .12; --b: .32; }

/* portada · la selección se arrastra, el gis se traza, el sticker cae y se asienta */
#e00 .sel { --a: .04; --b: .28; } #e00 .sel .h2 { --a: .27; --b: .30; }
#e00 .gis path { --a: .30; --b: .50; }
#e00 .stk > span { --a: .46; --b: .66; }
.mueve #e00 svg.fr { animation-name: none; }
.mueve #e00 .etq { animation-name: deriva; animation-timing-function: var(--io); --a: 0; --b: .7; }

/* 01 · la duda: los cuatro se encienden y se apagan */
.mueve .d01-u .luz { animation-name: duda; animation-timing-function: var(--io); }
.mueve .d01-u { animation-name: alza; animation-timing-function: var(--io); }
.d01-u.u0, .d01-u.u0 .luz { --a: .26; --b: .46; } .d01-u.u1, .d01-u.u1 .luz { --a: .38; --b: .58; }
.d01-u.u2, .d01-u.u2 .luz { --a: .50; --b: .70; } .d01-u.u3, .d01-u.u3 .luz { --a: .62; --b: .82; }

/* 02 · +1: la tercera cae, el número crece, la flecha se traza, el camión cambia */
#e02 .rem .b .w > span { --p: var(--t); --a: .50; --b: .64; }
.mueve #e02 .sub { animation-name: ver; animation-timing-function: linear; --a: .56; --b: .68; }
.mueve .d02 .t3 { animation-name: cae-t; animation-timing-function: var(--xo); --a: .16; --b: .32; }
.mueve .d02 .t3 .o { animation-name: suelta-p; animation-timing-function: linear; --a: .49; --b: .53; }
.mueve .d02 .t3 .s { animation-name: ver; animation-timing-function: linear; --a: .49; --b: .53; }
.mueve .mas1 { animation-name: crece; animation-timing-function: var(--xo); --a: .22; --b: .40; }
.mueve .curva .cv { animation-name: traza; animation-timing-function: var(--io); --a: .38; --b: .52; }
.mueve .curva .cvp { animation-name: ver; animation-timing-function: linear; --a: .51; --b: .53; }
#e02 .stk > span { --a: .50; --b: .66; }
.mueve .d02 .sa { animation-name: apaga; animation-timing-function: var(--io); --a: .48; --b: .54; }
.mueve .d02 .sb { animation-name: entra-d; animation-timing-function: var(--xo); --a: .50; --b: .60; }

/* 03 · pesan, salta el camión, se traza el óvalo, el gis subraya «Cambió» */
#e03 .rem .b .w > span { --p: var(--t); --a: .52; --b: .66; }
.mueve #e03 .sub { animation-name: ver; animation-timing-function: linear; --a: .58; --b: .70; }
.mueve .d03 .tw .o { animation-name: suelta-p; animation-timing-function: linear; }
.mueve .d03 .tw .s { animation-name: pesa; animation-timing-function: var(--rb); }
.d03 .p0 > * { --a: .20; --b: .28; } .d03 .p1 > * { --a: .24; --b: .32; } .d03 .p2 > * { --a: .28; --b: .36; }
.d03 .p3 > * { --a: .32; --b: .40; } .d03 .p4 > * { --a: .36; --b: .44; } .d03 .p5 > * { --a: .40; --b: .48; }
.mueve .d03 .sa { animation-name: apaga; animation-timing-function: var(--io); --a: .50; --b: .56; }
.mueve .d03 .sb { animation-name: entra-d; animation-timing-function: var(--xo); --a: .52; --b: .62; }
.mueve .pil .pa { animation-name: suelta-p; animation-timing-function: var(--io); --a: .50; --b: .55; }
.mueve .pil .pb { animation-name: salta; animation-timing-function: var(--rb); --a: .53; --b: .62; }
.mueve .nota > span { animation-name: ver; animation-timing-function: linear; --a: .58; --b: .66; }
.mueve .nota .ov path { animation-name: traza; animation-timing-function: var(--io); --a: .60; --b: .76; }
.mueve .nota .fl path { animation-name: traza; animation-timing-function: var(--io); --a: .74; --b: .82; }
#e03 .gis path { --a: .78; --b: .92; }

/* 04 · la × se traza, baja la cámara, sube el agua, aparecen las píldoras con su línea */
.mueve .xm path:first-of-type { animation-name: traza; animation-timing-function: var(--io); --a: .08; --b: .16; }
.mueve .xm path:last-of-type { animation-name: traza; animation-timing-function: var(--io); --a: .15; --b: .23; }
#e04 .rem .b .w > span { --p: var(--t); --a: .22; --b: .36; }
.mueve #e04 .sub { animation-name: ver; animation-timing-function: linear; --a: .28; --b: .40; }
#e04 .pila { --a: .18 !important; --b: .48 !important; }
.mueve .pl-a { animation-name: izq; animation-timing-function: var(--xo); --a: .06; --b: .18; }
.mueve .lin.la { animation-name: traza; animation-timing-function: var(--io); --a: .10; --b: .22; }
.mueve .pto.pa { animation-name: punto; animation-timing-function: var(--rb); --a: .20; --b: .25; }
.mueve .columna { animation-name: traza; animation-timing-function: var(--io); --a: .40; --b: .56; }
.mueve .pl.izq { animation-name: izq; animation-timing-function: var(--xo); }
.mueve .pl.der { animation-name: der; animation-timing-function: var(--xo); }
.mueve :is(.lin, .pto) { animation-timing-function: var(--io); }
.mueve .lin:not(.la) { animation-name: traza; }
.mueve .pto:not(.pa) { animation-name: punto; animation-timing-function: var(--rb); }
.pl0, .l0, .p0 { --a: .46; --b: .56; } .pl1, .l1, .p1 { --a: .53; --b: .63; } .pl2, .l2, .p2 { --a: .60; --b: .70; }
.pl3, .l3, .p3 { --a: .67; --b: .77; } .pl4, .l4, .p4 { --a: .74; --b: .84; }

/* 05 y cierre: cada bloque con su propia entrada (--e) */
#e05 .sel { --a: .18; --b: .42; } #e05 .sel .h2 { --a: .41; --b: .44; }
#cierre .tit .sel { --a: .14; --b: .34; } #cierre .tit .sel .h2 { --a: .33; --b: .36; }
#cierre .w.i0 > span { --a: .22; --b: .50; } #cierre .w.i1 > span { --a: .25; --b: .53; } #cierre .w.i2 > span { --a: .30; --b: .58; }
#cierre .w.i3 > span { --a: .33; --b: .61; } #cierre .w.i4 > span { --a: .38; --b: .66; } #cierre .w.i5 > span { --a: .41; --b: .69; }
#cierre .gis path { --a: .5; --b: .72; }
.bn li .sel { --a: .1; --b: .3; } .bn li .sel .h2 { --a: .29; --b: .32; }
#cierre svg.fr { --a: .02; --b: .16; }

@media (min-width: 900px) {
  :root { --fs-arr: clamp(20px, 2.5svh, 26px); }
  .d02 { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* el sticker del 05 no se anima con el scroll: rebota sólo con el gesto del lector */
.mueve #e05 .stk > span { animation: none; }
.mueve #e05 .stk > span.reb { animation: asentar 360ms var(--rb) 1 both; }
/* 320 px: la firma no se parte; el lema del pie cede su lugar */
.firma { white-space: nowrap; }
@media (max-width: 359px) { .pie-d { display: none; } }

/* ============================================================ PULIDO · 28-sep (crítica fotos-v2, arreglos 1–14) */
/* portada (3, 12): la flecha vive en el arranque; el sticker cae DEBAJO del remate, nunca sobre «tarimas»; los «+» en columna (ref2) */
.portada .tit { padding-left: 0; }
.portada .arr { position: relative; margin-left: 50px; }
.portada svg.fr-arr { position: absolute; left: -50px; top: .1em; }
.portada .rem { margin-left: 0; }
.stk-p { margin: 18px 0 0 auto; }
.etq-ad { align-items: flex-start; margin-left: auto; width: max-content; }

/* 01 (8, 9): cierra con una pregunta, no con un catálogo */
.preg { margin-top: 24px; font: 700 clamp(32px, min(10vw, 5svh), 60px)/1 var(--f-disp); letter-spacing: -.045em; color: var(--blanco);
  text-shadow: 0 0 24px rgba(247, 247, 244, .35), 0 0 2px rgba(247, 247, 244, .25); }
.d01 { margin-top: 20px; }

/* 02 (9): el +1 ya está, tenue, desde el arranque */
@keyframes crece-t { from { transform: scale(.74); opacity: .16; } }
.mueve .mas1 { animation-name: crece-t; }

/* mayúsculas apiladas (2, 14): acentos con aire; la máscara esconde también el acento */
.caps .rem { line-height: 1; }
.caps .w { padding-top: .38em; margin-top: -.38em; }
@keyframes sube-c { from { transform: translateY(175%); } }
.mueve .caps .w > span { animation-name: sube-c; }
#e03 .caps .rem { font-size: clamp(42px, min(14vw, 6.8svh), 96px); letter-spacing: -.03em; }

/* 03 (7): el peso se VE: tarimas macizas, base aplastada, «1 t», el 5t se hunde y el Rabón llega con su sticker */
.d03 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px 16px; }
.d03-tar { position: relative; max-width: none; gap: 8px 6px; margin-top: 1.1em; }
.d03 .tr.o { --tc: var(--blanco); --ts: none; --tb: rgba(247, 247, 244, .62); }
.tarp-c { fill: #454850; stroke: var(--blanco); stroke-width: 2.4; }
.tarp-f { fill: none; stroke: rgba(247, 247, 244, .5); stroke-width: 1.6; }
.tarp-b { fill: #D6D7D2; }
.tarp-s { fill: rgba(247, 247, 244, .28); }
.d03 .tr.s { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .85)); transform-origin: 50% 100%; }
.unot { position: absolute; left: 50%; top: -1.05em; translate: -50% 0; font: 700 34px/1 var(--f-disp); letter-spacing: -.03em; color: var(--blanco); white-space: nowrap;
  text-shadow: 0 0 18px rgba(247, 247, 244, .35); }
.d03-cam { position: relative; }
.d03 .sa { transform-origin: 50% 92%; }
.pil { position: absolute; right: -6px; top: -34px; z-index: 2; display: inline-grid; }
.pil > span { background: var(--rojo); border: 0; color: var(--sobre-rojo); font: 600 15px/1.15 var(--f-txt); padding: 10px 16px 11px; border-radius: 999px;
  transform: rotate(-4deg); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); justify-self: end; }
.nota { font: 600 26px/1 var(--f-mano); letter-spacing: 0; padding: 12px 22px 14px; margin-left: 62px; }
@keyframes hunde { 0% { transform: none; opacity: 1; } 70% { transform: translateY(7px) scaleY(.94); opacity: 1; } 100% { transform: translateY(9px) scaleY(.94); opacity: 0; } }
@keyframes suelta-s { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px) rotate(-9deg); } }
@keyframes pesa-t { 0% { opacity: 0; transform: translateY(-14px); } 60% { opacity: 1; transform: translateY(0) scaleY(1); } 80% { transform: scaleY(.86); } 100% { transform: none; } }
.mueve .d03 .tw .s { animation-name: pesa-t; animation-timing-function: var(--io); }
.mueve .d03 .sa { animation-name: hunde; animation-timing-function: var(--io); --a: .40; --b: .56; }
.mueve .pil .pa { animation-name: suelta-s; }

/* 04 (10, 11): la cámara nunca corta el titular; íconos con disco rojo (ref3); hielo con luz y facetas; agua sin escalón */
.d04 { width: var(--ice-w, 100%); }
.agua { fill: url(#agua-g); }
.bajo .m0 { opacity: .12; } .bajo .m1 { opacity: .2; } .bajo .m2 { opacity: .28; } .bajo .m3 { opacity: .1; }
.bajo .luzh { fill: url(#hielo-g); opacity: 1; }
.bajo .arista { fill: none; stroke: rgba(247, 247, 244, .22); stroke-width: 1; opacity: 1; }
.ico-d { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(229, 36, 63, .16); color: var(--rojo); flex: none; }
.ico-d .ico, .pl .ico-d .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl { padding: 6px 13px 6px 7px; }
.pl-a { white-space: nowrap; max-width: none; }

/* 05 (4, 5): retícula de NODOS (ref4) — el número es el nodo, conectores en ángulo, la tarjeta que toca se enciende */
.rv { margin-top: 18px; font-size: clamp(28px, min(8.4vw, 4.6svh), 52px); line-height: 1.04; min-height: 2.08em; }
.nd5 { position: relative; margin-top: 22px; isolation: isolate; }
.nd5::before, .ndx::before { content: ""; position: absolute; inset: -20px -24px; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(247, 247, 244, .1) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
.nd5-c { display: flex; align-items: center; justify-content: center; gap: 18px; }
.nodo { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; width: 124px; height: 124px; border-radius: 26px;
  background: var(--panel); border: 1px solid rgba(247, 247, 244, .22);
  box-shadow: 0 0 36px rgba(247, 247, 244, .14), inset 0 0 0 1px rgba(247, 247, 244, .03), 0 16px 34px rgba(0, 0, 0, .5); }
.nodo .tj-n { font: 700 66px/.9 var(--f-disp); min-width: 0; text-shadow: 0 0 22px rgba(247, 247, 244, .6), 0 0 3px rgba(247, 247, 244, .45); }
.nodo-e { font: 500 13px/1 var(--f-txt); color: var(--suave); }
.cn { position: relative; height: 34px; }
.cn::before { content: ""; position: absolute; left: calc((100% - 14px) / 4); right: calc((100% - 14px) / 4); top: 50%; bottom: 0;
  border: 1.3px solid var(--cnl); border-bottom: 0; border-radius: 14px 14px 0 0; }
.cn::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.3px solid var(--cnl); }
.cn2::after, .cnx2::after { bottom: 50%; }
.cnx2::after { bottom: 0; }
.cn1 { height: 64px; }
.nd5-f, .ndx-f, .ndx-u { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cn1 + .nd5-f::before, .cnx + .ndx-f::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.3px solid var(--cnl); }
.stk-5 { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; margin: 0; }
.stk-5 > span { white-space: nowrap; }
.nt { display: grid; gap: 8px; align-content: start; background: var(--panel); border: 1px solid rgba(247, 247, 244, .1); border-radius: 16px; padding: 10px 12px 12px;
  transition: border-color 200ms, box-shadow 200ms; }
.nt-e { font: 500 13px/1.25 var(--f-txt); color: var(--gris); padding-bottom: 8px; border-bottom: 1px solid rgba(247, 247, 244, .1); min-height: 2.5em; }
.nt .sil { max-width: 160px; justify-self: center; opacity: .5; transition: opacity 200ms; }
.nt.on { border-color: rgba(247, 247, 244, .5); box-shadow: 0 0 30px rgba(247, 247, 244, .16), 0 14px 30px rgba(0, 0, 0, .5); }
.nt.on .nt-e { color: var(--blanco); }
.nt.on .sil { opacity: 1; }
.nt.on .luz { opacity: 1; }
.nt.reb { animation: asentar-n 320ms var(--rb) 1 both; }
.itr { transform: none; margin: 22px auto 0; display: flex; width: max-content; max-width: 100%; }
.nd5 ~ .sub { text-align: center; margin-left: auto; margin-right: auto; }
.leer { display: flex; margin: 10px auto 0; }
#e05 .pie { display: none; }

/* cierre (1, 13): una sola selección, remate en versales, NODOS (ref4) con lo que viaja con el camión */
#cierre .cab { visibility: hidden; }
.ndx { position: relative; margin-top: 30px; isolation: isolate; }
.nodo-x { width: 78px; height: 78px; margin: 0 auto; border-radius: 22px; }
.nodo-x .iso { width: 36px; height: 32px; filter: drop-shadow(0 0 8px rgba(247, 247, 244, .6)); }
.cnx2 { height: 22px; }
.cnx2::before { display: none; }
.ndx-u { grid-template-columns: 1fr; }
.nc { display: grid; gap: 8px; align-content: start; background: var(--panel); border: 1px solid rgba(247, 247, 244, .12); border-radius: 16px; padding: 12px 14px 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.nc-e { display: flex; align-items: center; gap: 9px; font: 500 14px/1.2 var(--f-txt); color: var(--suave); padding-bottom: 10px; border-bottom: 1px solid rgba(247, 247, 244, .1); }
.nc-g { font: 700 clamp(26px, 8vw, 34px)/1 var(--f-disp); letter-spacing: -.035em; color: var(--blanco); }
.nc2 .nc-g { font-size: clamp(22px, 6.4vw, 30px); line-height: 1.08; }
.nc-n { font: 400 14px/1.35 var(--f-txt); color: var(--suave); }
.acc { justify-content: center; }

/* el movimiento de lo nuevo (mismo contrato: animación en pausa, instante = --p) */
.mueve :is(.preg, .unot, .ndx .nodo-x, .ndx .cn, .ndx .nc, .d03 .sa) {
  animation-duration: 1s; animation-fill-mode: both; animation-play-state: paused; animation-iteration-count: 1;
  animation-delay: calc(clamp(0, (var(--p, 1) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1) * -1s);
}
@keyframes pregunta { from { opacity: 0; transform: translateY(18px); } }
.mueve .preg { animation-name: pregunta; animation-timing-function: var(--xo); --a: .82; --b: .95; }
.mueve .unot { animation-name: pesa; animation-timing-function: var(--rb); --a: .44; --b: .52; }
.mueve .ndx .nodo-x { animation-name: crece; animation-timing-function: var(--rb); --a: .04; --b: .2; }
.mueve .ndx .cn { animation-name: ver; animation-timing-function: linear; --a: .14; --b: .26; }
.mueve .ndx .nc0 { animation-name: izq; animation-timing-function: var(--xo); --a: .18; --b: .34; }
.mueve .ndx .nc1 { animation-name: der; animation-timing-function: var(--xo); --a: .22; --b: .38; }
.mueve .ndx .nc2 { animation-name: salta; animation-timing-function: var(--xo); --a: .28; --b: .44; }

/* escritorio (12): titulares grandes y composición centrada como ref1; una columna de lectura */
@media (min-width: 900px) {
  :root { --fs-rem: clamp(56px, min(6.4vw, 9svh), 100px); --fs-arr: clamp(20px, 2.6svh, 27px); }
  .marco { padding: 0 max(var(--gut), calc((100% - 1040px) / 2)); }
  .portada .pila { text-align: center; }
  .portada .arr { display: inline-block; margin-left: 0; max-width: none; }
  .portada .rem { font-size: clamp(64px, min(9.4vw, 13svh), 132px); }
  .portada .sub { margin: 20px auto 0; max-width: none; }
  .stk-p { margin: 22px 6% 0 auto; }
  .etq-ai { align-items: flex-start; }
  .caps .rem { font-size: clamp(64px, min(8.4vw, 10.5svh), 124px); }
  #e03 .caps .rem { font-size: clamp(56px, min(7vw, 8svh), 104px); }
  .d01 { grid-template-columns: repeat(4, 1fr); gap: 20px 26px; }
  .d02 { max-width: 640px; }
  .d03 { max-width: 640px; }
  .nd5, .ndx { max-width: 620px; margin-left: auto; margin-right: auto; }
  .rv { font-size: clamp(40px, 5svh, 56px); }
}
.nota { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
.mueve .xm svg { animation-duration: 1s; animation-fill-mode: both; animation-play-state: paused; animation-iteration-count: 1;
  animation-delay: calc(clamp(0, (var(--p, 1) - var(--a, 0)) / (var(--b, 1) - var(--a, 0)), 1) * -1s);
  animation-name: crece; animation-timing-function: var(--rb); --a: .08; --b: .2; }
.mueve .xm path:first-of-type, .mueve .xm path:last-of-type { animation-name: none; }

/* pantallas bajas (el motor pone .apr cuando el plano no cabe ni sacando el arranque): el dibujo se aprieta, el remate nunca sale */
.marco { grid-template-columns: minmax(0, 1fr); }
.itr { width: fit-content; }
.apr .sub { margin-top: 10px; }
.apr .disp { margin-top: 14px; }
.apr .d01 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 8px; }
.apr .etq1 { font-size: 11px; line-height: 1.2; }
.apr .preg { margin-top: 12px; font-size: clamp(26px, 8vw, 40px); }
.apr .d02 { height: 196px; }
.apr .mas1 { font-size: 96px; }
.apr .curva { left: 104px; width: 84px; height: 62px; }
.apr .stk-2 { top: 64px; }
.apr .d02-cam { max-width: 170px; }
.apr .d02-suelo > .tr, .apr .d02-suelo > .tw { width: 28px; }
.apr .d03 { gap: 12px 12px; }
.apr .d03-tar { gap: 5px 5px; }
.apr .unot { font-size: 26px; }
.apr .nota { font-size: 21px; padding: 8px 18px 10px; }
.apr .etq1::before { content: none; }

/* verdad (28-sep): el peso que supone el ejemplo, siempre a la vista; sin JS los controles inertes no se ven
   (sólo .bt/.itr/.leer: el contenido con hidden="until-found" no se toca) */
.peso { margin: 10px auto 0; max-width: 34ch; text-align: center; font: 400 13px/1.45 var(--f-txt); color: var(--gris); }
.bt[hidden], .itr[hidden], .leer[hidden] { display: none; }

/* ============================================================ SECCIÓN · tres tarjetas (28-sep): 03 insignia primero y más grande, luego 01 y 02.
   Mismo lenguaje que la tarjeta del 01: número, rótulo, dibujo, titular en dos tonos, píldora roja ladeada y «Leer». Todo quieto. */
.tjs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tjs > li { display: grid; min-width: 0; }
.tja { min-width: 0; }
.tja:hover { border-color: rgba(247, 247, 244, .26); }
.tja:focus-visible { outline-offset: 4px; border-radius: 24px; }
.tja-dib { display: block; min-width: 0; }
.tjd { display: block; width: 100%; height: auto; overflow: visible; }
/* 03 · el hilo de gis que se vuelve la recta A–B, con la X encima */
.tjd-hilo { fill: none; stroke: rgba(247, 247, 244, .3); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: url(#grano); }
.tjd-recta { fill: none; stroke: var(--blanco); stroke-width: 1.6; }
.tjd-x path { fill: var(--blanco); }
.tjd-a { fill: var(--panel); stroke: var(--blanco); stroke-width: 2; }
.tjd-b { fill: var(--rojo); }
.tjd-t { font: 700 14px/1 var(--f-disp); fill: var(--blanco); text-anchor: middle; }
.tjd-tb { fill: var(--sobre-rojo); }
/* 02 · el «$» con su raya vacía y la flecha roja que la señala */
.tjd-s { font: 700 92px/1 var(--f-disp); fill: var(--blanco); letter-spacing: -.04em; }
.tjd-r { fill: none; stroke: #CFCFCA; stroke-width: 4.5; stroke-linecap: round; filter: url(#grano); }
.tjd-f, .tjd-fp { fill: none; stroke: var(--rojo); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
/* la insignia: más aire, dibujo y titular más grandes, borde un punto más claro */
.tja-3 { gap: 16px; padding: 22px 20px 12px; border-color: rgba(247, 247, 244, .2); }
.tja-3 .tja-t > span { display: block; }
.tja-3 .tja-t { font-size: clamp(42px, 13.2vw, 76px); }
.tja-3 .tjd { margin: 6px 0 4px; }
.tja-2 .tjd { max-width: 300px; }
@media (min-width: 900px) {
  .tjs { grid-template-columns: 1fr 1fr; gap: 22px; }
  .tjs > li:first-child { grid-column: 1 / -1; }
  .tja-3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; padding: 28px 30px 14px; }
  .tja-3 > .tja-k, .tja-3 > .tja-l { grid-column: 1 / -1; }
  .tja-3 > .tja-dib { grid-column: 2; grid-row: 2 / span 3; }
  .tja-3 > .tja-t, .tja-3 > .stk-t, .tja-3 > .tja-d { grid-column: 1; }
  .tja-3 .tja-t { font-size: clamp(56px, 6vw, 84px); }
  .tja-3 .stk-t { margin: 0 0 0 auto; }
  .tja:not(.tja-3) .tja-t { font-size: clamp(34px, 3.4vw, 46px); }
  .tja:not(.tja-3) { grid-template-rows: auto 96px auto auto 1fr auto; }
  .tja:not(.tja-3) .tja-dib { display: flex; align-items: flex-end; }
  .tja:not(.tja-3) .tja-dib > * { width: 100%; }
  .tja:not(.tja-3) .tja-l { align-self: end; }
}

/* ============================================================ ARTÍCULO 1 · dos arreglos (28-sep)
   e03: la nota a mano nunca pasa el borde derecho. Con Caveat cabe en un renglón como siempre; si Caveat no llega (la app sólo
   carga Inter/Space Grotesk/Michroma y el respaldo cursivo es más ancho) la nota se parte en dos renglones dentro de su óvalo. */
.d03 .nota { max-width: calc(100% - 62px); white-space: normal; text-wrap: balance; }
.apr .d03 .nota { max-width: calc(100% - 62px); }
/* portada en pantallas bajas (320×568): las etiquetas de abajo suben lo que bajan al entrar; «+ El Marqués» nunca bajo la firma */
@media (max-width: 899px) and (max-height: 600px) {
  .portada .etq-ai { margin-top: 10px; }
}

/* ============================================================ r9 · ART1 (28-sep): tres mejoras incrementales, nada se rehace */
/* sin JS no hay botones: la invitación «Súmale una y mira.» no se muestra (el lector queda como ejemplo fijo, con su peso a la vista) */
.nd5:has(.bt-p[hidden]) ~ #e05-s { display: none; }
/* sección a 1280: el sticker «Jala el hilo» se pega al titular (queda bajo «sin rodeos.», sobre su renglón), ya no flota entre título y dibujo */
@media (min-width: 900px) {
  .tja-3 .stk-t { margin: -22px 0 0 8px; justify-self: start; position: relative; z-index: 1; }
}
/* portada en móvil alto: las dos etiquetas enmarcan la composición (arriba junto al encabezado, abajo junto a la firma)
   y el titular queda centrado entre ambas, en vez de dejar el cuarto inferior vacío */
@media (max-width: 899px) and (min-height: 700px) {
  .portada .cuerpo { flex: 1 1 auto; }
  .portada .pila { margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
  .portada .etq-ad { margin-bottom: auto; }
  .portada .etq-ai { margin-top: auto; padding-top: 26px; }
  .portada .stk-p { align-self: flex-start; }
}
/* pantallas bajas (320×568): con tres etiquetas van en fila que se parte, para que ninguna baje bajo la firma */
@media (max-width: 899px) and (max-height: 600px) {
  .portada .etq-ai { flex-direction: row; flex-wrap: wrap; gap: 0 14px; }
  .portada .etq-ai span::before { width: 15px; }
}