/* HyperPowers · escenas animadas (de la guía del plugin, 2026-11-03). Generado por extraer_escenas.py.
   Motor: assets/js/escenas.js. Cada .escena[data-pasos] avanza data-paso 0…n-1 en bucle mientras se ve; los hijos con
   data-en="0,2" o data-desde="1" reciben la clase .on en esos pasos. Con movimiento reducido se quedan en data-final.
   Tokens propios (--e-*, --linea…) acotados a .escena, con variante Papel (html[data-tema="papel"]). */
:root { --img-demo-cabeza: url(/assets/demo/head.webp); --img-demo-calle: url(/assets/demo/street.webp); --img-demo-podcast: url(/assets/demo/podcast.webp); }
.escena {
  --bg: #020408;
  --card: #0D0E11;
  --card-2: #121418;
  --text: #EAF0FF;
  --text-2: #9AA1AB;
  --plata: #DADFE6;
  --plata-2: #A7AEB8;
  --linea: rgba(200, 206, 214, .13);
  --linea-2: rgba(200, 206, 214, .24);
  --corte: #C25A72;
  --corte-suave: rgba(194, 90, 114, .2);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --snap: cubic-bezier(.34, 1.4, .64, 1);
  --move: cubic-bezier(.65, 0, .35, 1);
  --r-s: 8px; --r-m: 12px; --r-l: 14px; --r-xl: 18px;
  --font-d: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-b: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cromo: linear-gradient(165deg, #FFFFFF 0%, #F1F3F6 12%, #CDD2D8 30%, #8C939C 41%, #2A2D33 47%, #0F1114 50%, #3B3F46 53%, #9EA5AD 60%, #E6E9ED 72%, #FFFFFF 82%, #B7BDC4 92%, #E9ECEF 100%);
  --saten: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 48%, #B3BBC5 100%);
  --plata-g: linear-gradient(115deg, #FFFFFF, #CDD2D9 45%, #8E969F);
  --destello: linear-gradient(115deg, transparent 41%, rgba(255,255,255,.9) 48.5%, rgba(170,200,255,.8) 50%, rgba(255,255,255,.9) 51.5%, transparent 59%);
  --barrido: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.03) 45%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.03) 55%, transparent 62%);
  --filo: conic-gradient(from 210deg, rgba(255,255,255,.55), rgba(128,136,146,.18) 16%, rgba(255,255,255,.06) 33%, rgba(214,220,227,.36) 52%, rgba(86,92,100,.14) 72%, rgba(255,255,255,.55));
  --filo-f: conic-gradient(from 210deg, #F5F7FA, #7C848D 16%, #2B2F35 33%, #CDD3DA 52%, #545B63 72%, #F5F7FA);
  --cepillado: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px), radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.06), transparent 50%), linear-gradient(180deg, #17191D, #0B0C0F);
  --bisel: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.55);
  --sombra: 0 24px 50px -28px rgba(0,0,0,.95);
  --sombra-l: 0 50px 90px -46px rgba(0,0,0,.95);
  --e-bg: #07080B;
  --e-pista: #101216;
  --e-clip: linear-gradient(180deg, #2B2F36, #1A1D22);
  --e-clip-b: rgba(214, 220, 227, .26);
  --e-clip-on: linear-gradient(180deg, #4A5059, #2A2E35);
  --e-txt: #DADFE6;
  --e-tenue: #8A919B;
  --e-ola: #C9CFD7;
  --e-ola-2: #3A3F47;
  --e-aj: repeating-linear-gradient(135deg, rgba(218,223,230,.22) 0 6px, rgba(218,223,230,.07) 6px 12px);
  --e-raya: #DADFE6;
  --e-brillo: 0 0 18px rgba(220, 226, 234, .28);
}
html[data-tema="papel"] .escena {
  --bg: #FFFFFF;
  --card: #F4F5F7;
  --card-2: #ECEEF1;
  --text: #0D0E11;
  --text-2: #5B626C;
  --plata: #2A2E35;
  --plata-2: #5E656E;
  --linea: #D6DBE1;
  --linea-2: #BEC5CD;
  --corte: #A8435A;
  --corte-suave: rgba(168, 67, 90, .14);
  --cromo: linear-gradient(165deg, #1B1E23 0%, #3E4248 40%, #0D0E11 50%, #5D636B 58%, #1B1E23 100%);
  --saten: linear-gradient(165deg, #1B1E23 0%, #3E4248 40%, #0D0E11 50%, #5D636B 58%, #1B1E23 100%);
  --plata-g: linear-gradient(115deg, #0D0E11, #3E4248 45%, #6A717A);
  --destello: none;
  --barrido: none;
  --filo: linear-gradient(#D6DBE1, #D6DBE1);
  --filo-f: linear-gradient(#9AA1AB, #9AA1AB);
  --cepillado: linear-gradient(180deg, #FFFFFF, #F1F3F6);
  --bisel: none;
  --sombra: none;
  --sombra-l: none;
  --e-bg: #F4F5F7;
  --e-pista: #E8EBEF;
  --e-clip: linear-gradient(180deg, #FFFFFF, #E7EAEE);
  --e-clip-b: #AEB5BE;
  --e-clip-on: linear-gradient(180deg, #DADFE6, #C3C9D1);
  --e-txt: #0D0E11;
  --e-tenue: #626973;
  --e-ola: #2A2E35;
  --e-ola-2: #B9C0C8;
  --e-aj: repeating-linear-gradient(135deg, rgba(13,14,17,.16) 0 6px, rgba(13,14,17,.04) 6px 12px);
  --e-raya: #0D0E11;
  --e-brillo: none;
}
@keyframes parpadeo { 50% { opacity: 0; } }
/* Revelado suave al entrar (una sola vez; sin JS o con movimiento reducido se ve todo) */
.ja-js .revela { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ja-ease), transform .45s var(--ja-ease); }
.ja-js .revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ja-js .revela { opacity: 1; transform: none; transition: none; } }
.escena { margin: 0; }

/* ═══ Contenedor ═══ */
.escena { position: relative; border-radius: var(--r-l); border: 1px solid transparent; background: linear-gradient(var(--e-bg), var(--e-bg)) padding-box, var(--filo) border-box; box-shadow: var(--bisel), var(--sombra); overflow: hidden; }
html[data-tema="papel"] .escena { border-color: var(--linea); background: var(--e-bg); }
.esc-lienzo { position: relative; padding: 18px; }
.esc-pie { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linea); font: 500 .84rem/1.45 var(--font-b); color: var(--text-2); background: rgba(255, 255, 255, .012); }
html[data-tema="papel"] .esc-pie { background: #FFFFFF; }
.esc-num { flex: none; font: italic 500 .8rem/1 var(--font-d); color: var(--plata); min-width: 3.2em; font-variant-numeric: tabular-nums; }
.esc-txt { flex: 1; min-height: 1.45em; }
.esc-ctrl { flex: none; appearance: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--linea-2); background: transparent; color: var(--text-2); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.esc-ctrl:hover { color: var(--text); border-color: var(--plata-2); }
.esc-ctrl:active { transform: scale(.94); }
.esc-ctrl svg { width: 12px; height: 12px; }
.escena .on { }
.golpe { transform: scale(.94) !important; filter: brightness(1.25); }
.e-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font: 600 .68rem/1.2 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--e-tenue); }
.e-tit b { color: var(--e-txt); font-weight: 600; }

/* ═══ Kit de timeline ═══ */
.tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pista { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; }
.pista::before { content: attr(data-n); font: 600 .62rem/1 var(--font-b); letter-spacing: .08em; color: var(--e-tenue); text-align: right; white-space: nowrap; }
.carril { position: relative; height: 32px; border-radius: 6px; background: var(--e-pista); }
.pista.alta .carril { height: 46px; }
.pista.baja .carril { height: 22px; }
.clip { position: absolute; top: 3px; bottom: 3px; left: calc(var(--x, 0) * 1%); width: calc(var(--w, 10) * 1%); border-radius: 5px; background: var(--e-clip); border: 1px solid var(--e-clip-b); overflow: hidden; display: flex; align-items: center; gap: 5px; padding: 0 6px; font: 600 .64rem/1 var(--font-b); font-style: normal; color: var(--e-txt); white-space: nowrap; transition: left .8s var(--move), width .8s var(--move), opacity .5s var(--ease), transform .55s var(--snap), background .4s var(--ease), border-color .4s var(--ease); }
.clip.t::before { content: "T"; flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; font: 700 .56rem/1 var(--font-d); color: var(--e-bg); background: var(--e-txt); }
.clip.aj { background: var(--e-aj), var(--e-pista); border-style: dashed; }
.clip.a { padding: 0 2px; }
.clip.sfx { background: var(--e-clip-on); }
.clip.mudo { opacity: .28; }
.clip.on-brillo { box-shadow: 0 0 0 1px var(--e-raya), 0 0 14px rgba(220, 226, 234, .3); }
.cabezal { position: absolute; top: -6px; bottom: -3px; left: calc(38px + (100% - 38px) * var(--x, 0) / 100); width: 1px; background: var(--e-raya); box-shadow: var(--e-brillo); transition: left .9s var(--move); z-index: 3; pointer-events: none; }
.cabezal::before { content: ""; position: absolute; top: 0; left: -5px; width: 11px; height: 8px; background: var(--e-raya); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.marcador { position: absolute; top: -16px; left: calc(var(--x) * 1%); transform: translateX(-50%); font: 700 .56rem/1 var(--font-b); color: var(--e-txt); padding: 3px 5px; border-radius: 4px; background: var(--e-clip-on); border: 1px solid var(--e-clip-b); white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease), transform .5s var(--snap); }
.marcador.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ola { position: absolute; inset: 2px; display: block; }
.ola svg { width: 100%; height: 100%; display: block; }
.ola rect { fill: var(--e-ola); }
.ola rect.s { fill: var(--e-ola-2); }

/* Monitores y móviles */
.monitor { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000 var(--img) center / cover no-repeat; border: 1px solid rgba(214, 220, 227, .18); }
.movil { position: relative; aspect-ratio: 9 / 16; width: 100%; max-width: 230px; margin-inline: auto; border-radius: 16px; overflow: hidden; background: #000 var(--img) center / cover no-repeat; border: 1px solid rgba(214, 220, 227, .22); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); container-type: inline-size; }
html[data-tema="papel"] .movil { box-shadow: none; border-color: #AEB5BE; }
.movil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55)); pointer-events: none; }
.movil .ui { position: absolute; inset: 0; z-index: 2; }
.movil .etq { position: absolute; top: 8px; left: 8px; z-index: 3; font: 600 .56rem/1 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(2, 4, 8, .62); padding: 4px 6px; border-radius: 5px; }

/* ═══ E1 · Portada: órdenes que se escriben ═══ */
.e-hero .esc-lienzo { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 290px; }
.hc-caja { position: relative; border-radius: 14px; padding: 14px; border: 1px solid transparent; background: linear-gradient(#0B0C0F, #0B0C0F) padding-box, var(--filo-f) border-box; box-shadow: var(--bisel), 0 0 0 4px rgba(218, 223, 230, .04); }
html[data-tema="papel"] .hc-caja { background: #FFFFFF; border-color: #9AA1AB; box-shadow: none; }
.hc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--linea-2); font: 500 .74rem/1 var(--font-b); color: var(--text); }
.hc-chip::after { content: "×"; color: var(--text-2); }
.hc-ordenes { position: relative; height: 3.3em; margin: 12px 2px 10px; font: 400 1rem/1.55 var(--font-b); color: var(--text); }
.hc-o { position: absolute; inset: 0 auto auto 0; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .25s var(--ease), clip-path 0s linear .25s; }
.hc-o.on { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .2s var(--ease), clip-path 1.15s steps(36, end) .1s; }
.hc-o.on::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--plata); animation: parpadeo 1.05s steps(1) infinite; }
.hc-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-iconos { display: flex; gap: 12px; color: var(--text-2); font: 500 1rem/1 var(--font-b); }
.hc-der { display: flex; gap: 8px; align-items: center; }
.hc-modelo { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--linea-2); font: 600 .78rem/1 var(--font-b); color: var(--text); }
.hc-btn { padding: 9px 12px; border-radius: 9px; font: 600 .8rem/1 var(--font-b); color: var(--text); border: 1px solid transparent; background: linear-gradient(180deg, rgba(74,80,89,.95), rgba(38,41,47,.95) 48%, rgba(20,22,26,.96)) padding-box, var(--filo-f) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.5); transition: transform .16s var(--ease), filter .16s var(--ease); }
html[data-tema="papel"] .hc-btn { background: #0D0E11; color: #FFFFFF; box-shadow: none; }
.hc-resp { position: relative; min-height: 5.4em; }
.hc-r { position: absolute; inset: 0 0 auto 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(218, 223, 230, .045); border: 1px solid var(--linea); font: 400 .9rem/1.5 var(--font-b); color: var(--text-2); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
html[data-tema="papel"] .hc-r { background: #FFFFFF; }
.hc-r.on { opacity: 1; transform: none; transition: opacity .5s var(--ease) 1.55s, transform .6s var(--expo) 1.55s; }
.hc-r b { color: var(--text); font-weight: 600; }
.hc-r i { flex: none; font: normal 700 .8rem/1.5 var(--font-b); color: var(--plata); }

/* ═══ E2 · Quitar silencios (HyperChat) y E13 · Silence remover ═══ */
.e-cortes .seg, .e-cortes .sil { transition: left .9s var(--move), width .9s var(--move), opacity .5s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.e-cortes .sil { background: transparent; border-color: rgba(214, 220, 227, .12); border-left: 0; border-right: 0; border-radius: 0; }
.e-cortes .sil .ola rect { fill: var(--e-ola-2); }
.e-cortes .sil.on { background: var(--corte-suave); border-color: var(--corte); border-style: solid; border-width: 1px; border-radius: 4px; }
.e-cortes[data-junta] .seg { left: calc(var(--xc) * 1%); }
.e-cortes[data-junta] .sil { left: calc(var(--xc) * 1%); width: 0; opacity: 0; }
.e-cortes .ahorro { position: absolute; top: 3px; bottom: 3px; right: 0; width: calc((100 - var(--fin, 75)) * 1%); border-radius: 5px; border: 1px dashed var(--e-clip-b); display: grid; place-items: center; font: 600 .62rem/1.2 var(--font-b); color: var(--e-tenue); text-align: center; opacity: 0; transition: opacity .5s var(--ease) .6s; }
.e-cortes[data-junta] .ahorro { opacity: 1; }
.e-cortes .umbral { position: absolute; left: 0; right: 0; top: 64%; border-top: 1px dashed var(--plata-2); opacity: 0; transition: opacity .4s var(--ease); z-index: 2; }
.e-cortes .umbral::after { content: "threshold"; position: absolute; right: 4px; top: -13px; font: 600 .56rem/1 var(--font-b); color: var(--plata-2); letter-spacing: .06em; }
.e-cortes .umbral.on { opacity: .9; }
.e-cortes .padding { position: absolute; top: 3px; bottom: 3px; width: 1.2%; background: rgba(218, 223, 230, .16); opacity: 0; transition: opacity .4s var(--ease); }
.e-cortes .padding.on { opacity: 1; }
.e-cortes[data-vacio] .sil.on { background: transparent; border: 1px dashed var(--corte); }
.e-cortes[data-vacio] .sil.on .ola { opacity: 0; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font: 500 .72rem/1.3 var(--font-b); color: var(--e-tenue); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); border: 1px solid var(--b, transparent); }

/* ═══ E3 · Resumir ═══ */
.e-resumir .frases { display: flex; flex-wrap: wrap; gap: 6px; }
.fr { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--linea); background: rgba(218, 223, 230, .03); font: 400 .82rem/1.35 var(--font-b); color: var(--text-2); transition: color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease); }
html[data-tema="papel"] .fr { background: #FFFFFF; }
.fr.clave.on { color: var(--text); border-color: var(--plata-2); background: rgba(218, 223, 230, .1); box-shadow: 0 0 0 1px rgba(218, 223, 230, .12); }
html[data-tema="papel"] .fr.clave.on { background: #E7EAEE; border-color: #6A717A; }
.fr.fuera.on { text-decoration: line-through; text-decoration-color: var(--corte); color: var(--e-tenue); opacity: .7; }
.fr.resto.on { opacity: .45; }
.e-resumir .resultado { margin-top: 16px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .7s var(--expo); }
.e-resumir .resultado.on { opacity: 1; transform: none; }
.res-clip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--e-clip-on); border: 1px solid var(--e-clip-b); font: 600 .78rem/1.3 var(--font-b); color: var(--e-txt); }
.res-clip span { font-weight: 500; color: var(--text-2); }
.res-txt { margin-top: 8px; font: italic 400 .86rem/1.55 var(--font-b); color: var(--text); }

/* ═══ E4 · Script ═══ */
.sc-tabla { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; font: 400 .78rem/1.35 var(--font-b); }
.sc-f { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px 104px; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--linea); align-items: center; }
.sc-f:last-child { border-bottom: 0; }
.sc-f.cab { font: 600 .58rem/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--e-tenue); }
.sc-f.fila { color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--expo), background .3s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.sc-f.fila.on { opacity: 1; transform: none; }
.sc-f.fila .d { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sc-f.fila .k { color: var(--text-2); }
.sc-f.fila .k::before { content: "✎ "; color: var(--plata); }
.sc-f .ok { display: inline-block; width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--linea-2); vertical-align: -2px; transition: background .3s var(--ease); }
.e-script[data-aprobado] .sc-f .ok { background: var(--plata); border-color: var(--plata); }
.sc-acc { display: flex; gap: 8px; margin: 12px 0 18px; }
.sc-b { padding: 8px 11px; border-radius: 9px; border: 1px solid var(--linea-2); font: 600 .76rem/1 var(--font-b); color: var(--text); transition: transform .16s var(--ease), filter .16s var(--ease), background .3s var(--ease); }
.sc-b.pri { border-color: transparent; background: linear-gradient(180deg, rgba(74,80,89,.95), rgba(20,22,26,.96)) padding-box, var(--filo-f) border-box; }
html[data-tema="papel"] .sc-b.pri { background: #0D0E11; color: #FFFFFF; }
.e-script .tl { opacity: 0; transition: opacity .5s var(--ease); }
.e-script .tl.on { opacity: 1; }
.e-script .tl .clip { opacity: 0; transform: translateY(6px); transition-delay: calc(var(--i) * 110ms); }
.e-script .tl.on .clip { opacity: 1; transform: none; }
.e-script .tl .marcador { transition-delay: calc(var(--i) * 110ms + .2s); }

/* ═══ E5 · Multicámara ═══ */
.e-multicam .esc-lienzo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.mc-cam { position: absolute; inset: 0; background: var(--img) no-repeat; background-size: var(--bs, cover); background-position: var(--bp, center); opacity: 0; transition: opacity .12s linear; }
.mc-cam.on { opacity: 1; }
.mc-etq { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; }
.mc-etq span { font: 700 .58rem/1 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(2, 4, 8, .72); padding: 4px 6px; border-radius: 5px; display: none; }
.mc-etq span.on { display: inline-block; }
.mc-rec { position: absolute; top: 8px; right: 8px; z-index: 2; font: 700 .56rem/1 var(--font-b); letter-spacing: .1em; color: #fff; background: rgba(2,4,8,.72); padding: 4px 6px; border-radius: 5px; }
.e-multicam .habla .clip { background: transparent; border-style: dashed; color: var(--e-txt); justify-content: center; }
.e-multicam .cam .clip { opacity: .9; }
.e-multicam .cam .clip.dec { transition: opacity .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.e-multicam .cam .clip.dec.on { opacity: .22; }
.e-multicam .cam .clip.dec.sel.on { opacity: 1; background: var(--e-clip-on); box-shadow: 0 0 0 1px var(--e-raya); }
.e-multicam[data-paso="0"] .cabezal { --x: 11; } .e-multicam[data-paso="1"] .cabezal { --x: 31; } .e-multicam[data-paso="2"] .cabezal { --x: 47; }
.e-multicam[data-paso="3"] .cabezal { --x: 62; } .e-multicam[data-paso="4"] .cabezal { --x: 85; }

/* ═══ E6 · B-roll y gráficos ═══ */
.e-broll .esc-lienzo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 16px; }
.br-tx p { font: 400 .88rem/1.6 var(--font-b); color: var(--text-2); }
.br-tx p + p { margin-top: 10px; }
.br-tx time { display: inline-block; min-width: 3.2em; font: italic 500 .74rem/1 var(--font-d); color: var(--plata); }
.br-tx mark { background: transparent; color: inherit; border-radius: 4px; padding: 0 2px; transition: background .35s var(--ease), color .35s var(--ease); }
.br-tx mark.on { background: rgba(218, 223, 230, .16); color: var(--text); }
html[data-tema="papel"] .br-tx mark.on { background: #DADFE6; }
.br-cards { display: flex; flex-direction: column; gap: 8px; }
.br-card { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea-2); background: var(--e-pista); opacity: 0; transform: translateX(10px); transition: opacity .45s var(--ease), transform .6s var(--expo); }
.br-card.on { opacity: 1; transform: none; }
.br-card b { display: block; font: 600 .7rem/1.2 var(--font-b); letter-spacing: .06em; color: var(--text); }
.br-card span { display: block; margin-top: 3px; font: 400 .8rem/1.45 var(--font-b); color: var(--text-2); }

/* ═══ E7 · Smart vs conteo  /  E8 · Negrilla dinámica ═══ */
.dos-movil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.dos-movil .lado-t { text-align: center; margin-bottom: 8px; font: 600 .64rem/1.2 var(--font-b); letter-spacing: .12em; text-transform: uppercase; color: var(--e-tenue); }
.dos-movil .lado-t b { color: var(--e-txt); }
.sub-cap { position: absolute; left: 6%; right: 6%; top: 64%; z-index: 2; text-align: center; font: 800 9.5cqi/1.1 var(--font-d); color: #fff; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .18s var(--ease), transform .25s var(--snap); }
.sub-cap.on { opacity: 1; transform: none; }
.sub-cap u { text-decoration: none; box-shadow: inset 0 -3px 0 var(--corte); }
.neg { position: absolute; left: 8%; right: 8%; top: 60%; z-index: 2; text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .35s var(--ease); }
.neg.on { opacity: 1; }
.neg p { font: 300 9cqi/1.18 var(--font-d); opacity: .62; transition: font-weight .35s var(--ease), opacity .35s var(--ease); }
.neg p.on { font-weight: 800; opacity: 1; }

/* ═══ E10 · Divisor de palabras ═══ */
.e-divisor .clip { justify-content: center; }
.e-divisor .entero { opacity: 1; }
.e-divisor .entero.on { opacity: 0; }
.e-divisor .palabra { opacity: 0; transform: scaleX(.6); }
.e-divisor .palabra.on { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms); }
.e-divisor .razor { position: absolute; top: -4px; bottom: -4px; left: calc(var(--x) * 1%); width: 0; border-left: 1px dashed var(--corte); opacity: 0; transition: opacity .3s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.e-divisor .razor.on { opacity: 1; }
.e-divisor .clip.t.gr::before { content: "G"; }
.div-mon { margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.div-mon .movil { max-width: 120px; }
.div-pal { position: absolute; z-index: 2; left: 50%; top: 58%; transform: translate(-50%, -50%); font: 800 16cqi/1 var(--font-d); color: #fff; text-transform: uppercase; opacity: 0; }
.div-mon.on .div-pal { animation: pal-pop 2.8s var(--snap) infinite; animation-delay: calc(var(--i) * .56s); }
@keyframes pal-pop { 0%, 18% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 4%, 16% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.div-mon p { font: 400 .84rem/1.5 var(--font-b); color: var(--text-2); }

/* ═══ E11 · HyperCaptions ═══ */
.e-captions .esc-lienzo { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 22px; align-items: center; }
.hcap { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.hcap.l1 { top: 55%; font: italic 500 7cqi/1 var(--font-b); opacity: 0; transform: translate(-50%, 10px); transition: opacity .4s var(--ease), transform .55s var(--expo); }
.hcap.l2 { top: 61%; font: 900 17cqi/1 var(--font-d); letter-spacing: -.02em; opacity: 0; transform: translateX(-50%) scale(.4); transition: opacity .2s var(--ease), transform .55s var(--snap); }
.hcap.l3 { top: 73%; font: italic 800 9cqi/1 var(--font-d); opacity: 0; transform: translate(-50%, 14px); transition: opacity .35s var(--ease), transform .6s var(--expo); }
.hcap.on.l1 { opacity: .92; transform: translateX(-50%); }
.hcap.on.l2 { opacity: 1; transform: translateX(-50%) scale(1); }
.hcap.on.l3 { opacity: 1; transform: translateX(-50%); }
.hcap .k { padding: 0 .12em; border-radius: .14em; transition: background .2s var(--ease), color .2s var(--ease); }
.hcap .k.on { background: #F1F3F6; color: #0D0E11; text-shadow: none; }
.e-captions .tl .clip { opacity: 0; transform: translateY(-8px); }
.e-captions .tl .clip.on { opacity: 1; transform: none; }

/* ═══ E12 · Limpieza y stems ═══ */
.e-stems .filas { display: flex; flex-direction: column; gap: 8px; }
.st-f { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; transition: opacity .45s var(--ease); }
.st-f { opacity: .14; }
.st-f.on { opacity: 1; }
.st-nom { position: relative; height: 1.3em; font: 600 .72rem/1.3 var(--font-b); color: var(--e-txt); text-align: right; }
.st-nom span { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); }
.st-nom span.on { opacity: 1; }
.st-carril { position: relative; height: 38px; border-radius: 7px; background: var(--e-pista); overflow: hidden; }
.st-carril .ola { opacity: 0; transform: scaleY(.3); transition: opacity .45s var(--ease), transform .6s var(--expo); }
.st-carril .ola.on { opacity: 1; transform: none; }
.st-carril .ola.ruido rect { fill: var(--e-ola-2); }

/* ═══ E14 · HyperTracker ═══ */
.trk { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #05060A; border: 1px solid rgba(214, 220, 227, .16); }
html[data-tema="papel"] .trk { background: #E8EBEF; border-color: #C3C9D1; }
.trk-mundo { position: absolute; inset: -12%; background-image: linear-gradient(rgba(214,220,227,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(214,220,227,.08) 1px, transparent 1px); background-size: 34px 34px; }
html[data-tema="papel"] .trk-mundo { background-image: linear-gradient(rgba(13,14,17,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(13,14,17,.08) 1px, transparent 1px); }
.trk-obj, .trk-masc, .trk-txt { position: absolute; left: 0; top: 0; animation: trk-ruta 6s var(--move) infinite; }
.trk-obj { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #CDD2D8 30%, #6A717A 70%, #2A2D33); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .8); }
.trk-masc { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 1.5px dashed #F1F3F6; opacity: 0; transition: opacity .4s var(--ease); }
html[data-tema="papel"] .trk-masc { border-color: #0D0E11; }
.trk-masc.on { opacity: 1; }
.trk-txt { margin: -58px 0 0 34px; font: 800 .74rem/1 var(--font-d); letter-spacing: .02em; color: #0D0E11; background: #F1F3F6; padding: 5px 7px; border-radius: 5px; white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease); }
.trk-txt.on { opacity: 1; }
@keyframes trk-ruta { 0% { left: 14%; top: 66%; } 25% { left: 38%; top: 40%; } 50% { left: 62%; top: 58%; } 75% { left: 82%; top: 34%; } 100% { left: 14%; top: 66%; } }
@keyframes trk-inv { 0% { transform: translate(36%, -16%); } 25% { transform: translate(12%, 10%); } 50% { transform: translate(-12%, -8%); } 75% { transform: translate(-32%, 16%); } 100% { transform: translate(36%, -16%); } }
.trk.on .trk-obj, .trk.on .trk-masc, .trk.on .trk-txt { animation: none; left: 50%; top: 50%; }
.trk.on .trk-mundo { animation: trk-inv 6s var(--move) infinite; }
.trk-cruz { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: 0; transition: opacity .3s var(--ease); }
.trk-cruz::before, .trk-cruz::after { content: ""; position: absolute; background: rgba(241, 243, 246, .55); }
.trk-cruz::before { left: 50%; top: 0; bottom: 0; width: 1px; } .trk-cruz::after { top: 50%; left: 0; right: 0; height: 1px; }
.trk.on .trk-cruz { opacity: 1; }

/* ═══ E15 · HyperGrid ═══ */
.grd { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #05060A; overflow: hidden; border: 1px solid rgba(214, 220, 227, .16); }
html[data-tema="papel"] .grd { background: #E8EBEF; border-color: #C3C9D1; }
.grd-marco { position: absolute; left: var(--ml, 0%); top: 0; width: var(--mw, 100%); height: 100%; border: 1.5px solid rgba(241, 243, 246, .7); border-radius: 6px; z-index: 3; pointer-events: none; transition: left .8s var(--move), width .8s var(--move); }
html[data-tema="papel"] .grd-marco { border-color: #0D0E11; }
.celda { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); background: var(--img) no-repeat; background-size: var(--bs); background-position: var(--bp); border-radius: 4px; outline: 1px solid rgba(2, 4, 8, .9); transition: left .8s var(--move), top .8s var(--move), width .8s var(--move), height .8s var(--move), background-size .8s var(--move), background-position .8s var(--move), opacity .4s var(--ease); }
.celda span { position: absolute; left: 6px; top: 6px; font: 700 .56rem/1 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(2, 4, 8, .7); padding: 3px 5px; border-radius: 4px; }
/* 0 general · 1 dos copias · 2 vertical 2 filas · 3 dos columnas · 4 uno + dos */
.grd[data-p="0"] { --ml: 0%; --mw: 100%; }
.grd[data-p="0"] .c1 { --l: 0%; --t: 0%; --w: 100%; --h: 100%; --bs: cover; --bp: 50% 50%; }
.grd[data-p="0"] .c2, .grd[data-p="0"] .c3 { --l: 50%; --t: 50%; --w: 0%; --h: 0%; opacity: 0; --bs: cover; --bp: 50% 50%; }
.grd[data-p="1"] { --ml: 0%; --mw: 100%; }
.grd[data-p="1"] .c1 { --l: 1%; --t: 22%; --w: 48%; --h: 56%; --bs: cover; --bp: 50% 50%; }
.grd[data-p="1"] .c2 { --l: 51%; --t: 22%; --w: 48%; --h: 56%; --bs: cover; --bp: 50% 50%; opacity: 1; }
.grd[data-p="1"] .c3 { --l: 50%; --t: 50%; --w: 0%; --h: 0%; opacity: 0; --bs: cover; --bp: 50% 50%; }
.grd[data-p="2"] { --ml: 34.2%; --mw: 31.6%; }
.grd[data-p="2"] .c1 { --l: 34.2%; --t: 0%; --w: 31.6%; --h: 50%; --bs: 320%; --bp: 21% 34%; }
.grd[data-p="2"] .c2 { --l: 34.2%; --t: 50%; --w: 31.6%; --h: 50%; --bs: 320%; --bp: 79% 30%; opacity: 1; }
.grd[data-p="2"] .c3 { --l: 50%; --t: 50%; --w: 0%; --h: 0%; opacity: 0; --bs: cover; --bp: 50% 50%; }
.grd[data-p="3"] { --ml: 0%; --mw: 100%; }
.grd[data-p="3"] .c1 { --l: 0%; --t: 0%; --w: 50%; --h: 100%; --bs: 210%; --bp: 18% 38%; }
.grd[data-p="3"] .c2 { --l: 50%; --t: 0%; --w: 50%; --h: 100%; --bs: 210%; --bp: 84% 34%; opacity: 1; }
.grd[data-p="3"] .c3 { --l: 50%; --t: 50%; --w: 0%; --h: 0%; opacity: 0; --bs: cover; --bp: 50% 50%; }
.grd[data-p="4"] { --ml: 0%; --mw: 100%; }
.grd[data-p="4"] .c1 { --l: 0%; --t: 0%; --w: 60%; --h: 100%; --bs: cover; --bp: 50% 50%; }
.grd[data-p="4"] .c2 { --l: 60%; --t: 0%; --w: 40%; --h: 50%; --bs: 250%; --bp: 20% 36%; opacity: 1; }
.grd[data-p="4"] .c3 { --l: 60%; --t: 50%; --w: 40%; --h: 50%; --bs: 250%; --bp: 82% 32%; opacity: 1; }

/* ═══ E16 · HyperTools (cuatro miniescenas) ═══ */
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.minis .escena .esc-lienzo { padding: 14px; min-height: 150px; }
.dpad-caja { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.dpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 84px; height: 84px; padding: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2A2D33, #0B0C0F 70%); border: 1px solid var(--e-clip-b); }
html[data-tema="papel"] .dpad { background: radial-gradient(circle at 40% 35%, #FFFFFF, #D6DBE1 70%); }
.dpad i { border-radius: 4px; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.dpad i.on { background: rgba(241, 243, 246, .55); box-shadow: 0 0 10px rgba(241, 243, 246, .5); }
html[data-tema="papel"] .dpad i.on { background: #0D0E11; box-shadow: none; }
.dpad-mon { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: #000 var(--img) center / cover; border: 1px solid rgba(214, 220, 227, .16); overflow: hidden; }
.dpad-txt { position: absolute; left: var(--dx, 50%); top: var(--dy, 50%); transform: translate(-50%, -50%); font: 800 .7rem/1 var(--font-d); color: #0D0E11; background: #F1F3F6; padding: 4px 6px; border-radius: 4px; transition: left .5s var(--snap), top .5s var(--snap); }
.e-dpad[data-paso="0"] .dpad-txt { --dy: 30%; } .e-dpad[data-paso="1"] .dpad-txt { --dx: 72%; --dy: 30%; } .e-dpad[data-paso="2"] .dpad-txt { --dx: 72%; --dy: 72%; } .e-dpad[data-paso="3"] .dpad-txt { --dx: 50%; --dy: 50%; }
.e-esc .clip { --x: 10; --w: 60; transition: left .8s var(--move), width .8s var(--move); }
.e-esc[data-paso="1"] .c2 { --x: 25; --w: 45; } .e-esc[data-paso="1"] .c3 { --x: 40; --w: 30; } .e-esc[data-paso="1"] .c4 { --x: 55; --w: 15; }
.e-esc[data-paso="2"] .c4 { --x: 10; --w: 60; } .e-esc[data-paso="2"] .c3 { --x: 25; --w: 45; } .e-esc[data-paso="2"] .c2 { --x: 40; --w: 30; } .e-esc[data-paso="2"] .c1 { --x: 55; --w: 15; }
.e-capa .clip.aj { opacity: 0; transform: translateY(-6px); }
.e-capa .clip.aj.on { opacity: 1; transform: none; }
.e-freeze .clip.png { --x: 40; --w: 22; opacity: 0; transform: scaleX(.2); transform-origin: left; }
.e-freeze .clip.png.on { opacity: 1; transform: none; }
.e-freeze[data-paso="2"] .clip.png { --w: 55; }
.e-freeze[data-paso="0"] .cabezal { --x: 18; } .e-freeze[data-paso="1"] .cabezal, .e-freeze[data-paso="2"] .cabezal { --x: 40; }

/* ═══ E17 · HyperSFX ═══ */
.e-sfx .sfx { opacity: 0; transform: translateY(-14px); transition-delay: calc(var(--i) * 140ms); }
.e-sfx .sfx.on { opacity: 1; transform: none; }
.e-sfx .sfx::after { content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; width: 2px; background: var(--e-raya); }
.e-sfx .guia { position: absolute; top: 0; bottom: 0; left: calc(38px + (100% - 38px) * var(--x) / 100); border-left: 1px dotted var(--plata-2); opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(var(--i) * 140ms + .2s); }
.e-sfx .guia.on { opacity: .85; }
.e-sfx .evento { position: absolute; top: -18px; left: calc(var(--x) * 1%); transform: translateX(-50%); font: 700 .56rem/1 var(--font-b); letter-spacing: .06em; color: var(--e-txt); padding: 3px 5px; border-radius: 4px; border: 1px dashed var(--e-clip-b); white-space: nowrap; opacity: 0; transition: opacity .35s var(--ease); transition-delay: calc(var(--i) * 160ms); }
.e-sfx .evento.on { opacity: 1; }
.e-sfx .barrido { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: var(--plata); box-shadow: var(--e-brillo); opacity: 0; }
.e-sfx .barrido.on { opacity: 1; animation: barrer 1.6s var(--move) forwards; }
@keyframes barrer { from { left: 0%; } to { left: 100%; } }

/* ═══ E18 · HyperColors ═══ */
.col { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; cursor: ew-resize; touch-action: pan-y; border: 1px solid rgba(214, 220, 227, .16); user-select: none; }
.col-img { position: absolute; inset: 0; background: var(--img) center / cover no-repeat; }
.col-desp { clip-path: inset(0 0 0 var(--divisor, 50%)); transition: filter .8s var(--ease); }
.col-desp::after { content: ""; position: absolute; inset: 0; background: var(--velo, none); mix-blend-mode: soft-light; transition: opacity .8s var(--ease); }
.col-div { position: absolute; top: 0; bottom: 0; left: var(--divisor, 50%); width: 2px; margin-left: -1px; background: #F1F3F6; box-shadow: 0 0 12px rgba(241, 243, 246, .6); z-index: 2; }
.col-div::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #B7BDC4); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.col-etq { position: absolute; bottom: 8px; z-index: 3; font: 700 .58rem/1 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(2, 4, 8, .72); padding: 4px 6px; border-radius: 5px; }
.col-etq.izq { left: 8px; } .col-etq.der { right: 8px; }
.col-looks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.col-looks span { padding: 6px 9px; border-radius: 8px; border: 1px solid var(--linea); font: 500 .76rem/1 var(--font-b); color: var(--text-2); transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.col-looks span.on { color: var(--text); border-color: var(--plata-2); background: rgba(218, 223, 230, .08); }
html[data-tema="papel"] .col-looks span.on { background: #E7EAEE; }
.e-color[data-paso="0"] .col-desp { filter: contrast(1.07) saturate(1.08) brightness(1.03); }
.e-color[data-paso="1"] .col-desp { filter: contrast(1.14) saturate(1.2) brightness(.98); --velo: linear-gradient(180deg, rgba(0, 120, 128, .55), rgba(255, 150, 70, .4)); }
.e-color[data-paso="2"] .col-desp { filter: sepia(.3) saturate(1.25) contrast(1.05) brightness(1.05); }
.e-color[data-paso="3"] .col-desp { filter: saturate(.72) contrast(1.1) brightness(1.02); --velo: linear-gradient(180deg, rgba(60, 110, 170, .5), rgba(150, 180, 210, .4)); }
.e-color[data-paso="4"] .col-desp { filter: saturate(.42) contrast(1.3) brightness(.95); }
.e-color[data-paso="5"] .col-desp { filter: grayscale(1) contrast(1.18) brightness(1.02); }

/* ═══ E19 · Todo junto ═══ */
.flujo { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; counter-reset: fl; }
.fl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px; border: 1px solid var(--linea); text-align: center; transition: border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--snap); }
.fl::before { counter-increment: fl; content: counter(fl, decimal-leading-zero); font: italic 300 1.1rem/1 var(--font-d); color: var(--plata-2); }
.fl svg { width: 20px; height: 20px; color: var(--plata); }
.fl b { font: 700 .7rem/1.2 var(--font-d); color: var(--text); text-transform: uppercase; letter-spacing: .02em; }
.fl span { font: 400 .74rem/1.35 var(--font-b); color: var(--text-2); }
.fl.on { border-color: var(--plata-2); background: rgba(218, 223, 230, .07); transform: translateY(-3px); }
html[data-tema="papel"] .fl.on { background: #E7EAEE; }

/* ═══ Responsive y quietas ═══ */
@media (max-width: 980px) {
  .e-multicam .esc-lienzo, .e-broll .esc-lienzo { grid-template-columns: minmax(0, 1fr); }
  .flujo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .minis { grid-template-columns: minmax(0, 1fr); }
  .e-captions .esc-lienzo { grid-template-columns: minmax(0, 1fr); }
  .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-f { grid-template-columns: 72px minmax(0, 1fr); }
}
.escena.quieta * { transition-delay: 0s !important; }
.escena.quieta .trk-obj, .escena.quieta .trk-masc, .escena.quieta .trk-txt { animation: none; left: 62%; top: 52%; }
.escena.quieta .trk.on .trk-obj, .escena.quieta .trk.on .trk-masc, .escena.quieta .trk.on .trk-txt { left: 50%; top: 50%; }
.escena.quieta .trk-mundo { animation: none !important; }
.escena.quieta .div-mon.on .div-pal { animation: none; opacity: 0; }
.escena.quieta .div-mon.on .div-pal:nth-child(3) { opacity: 1; transform: translate(-50%, -50%); }

.est-nota { margin-top: 12px; font: 400 .82rem/1.5 var(--font-b); color: var(--text-2); }  /* la nota de E11 */