:root{
  --azul:#2238b0; --azul-2:#1b2d96; --noche:#0f1855;
  --papel:#f7f8ff; --papel-2:#e6e9fb; --tinta:#121a4a; --tinta-2:#3a4488;
  --sobre-azul:#f7f8ff; --sobre-azul-2:#cdd3f5;
  --am:#ffd23f; --coral:#ff6a55; --menta:#4fe0b5; --coral-t:#c2301c; --menta-t:#0a7a5a;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --academia:"Besley",Georgia,serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
  --sale:cubic-bezier(.16,1,.3,1);
  --sombra:0 28px 60px -18px rgb(6 10 48 / .55), 0 6px 14px -6px rgb(6 10 48 / .35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--azul);color:var(--sobre-azul);font-family:var(--display);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(130% 100% at 62% 38%,var(--azul) 0 42%,var(--azul-2) 72%,var(--noche) 100%)}
::selection{background:var(--am);color:var(--tinta)}
:focus-visible{outline:4px solid var(--am);outline-offset:4px}
h1,h2,h3,h4,p,ol,ul,figure,blockquote,pre{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}

#rio{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#mundo,.css3d{position:fixed;inset:0;z-index:1}
#mundo{visibility:hidden}
.css3d{pointer-events:none}

/* ---------- estaciones ---------- */
.st{width:1600px;height:900px;backface-visibility:hidden;transform-style:preserve-3d;pointer-events:none}
.st > *{position:absolute}
.st.cerca{pointer-events:auto}

.xl{font-size:150px;line-height:.94;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.l{font-size:92px;line-height:1.02;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.m{font-size:62px;line-height:1.08;font-weight:700;letter-spacing:-.012em;text-wrap:balance}
.s{font-size:44px;line-height:1.16;font-weight:700;letter-spacing:-.006em;text-wrap:balance}
.c{font-size:34px;line-height:1.36;font-weight:400}
.cm{font-size:27px;line-height:1.4;font-weight:400;color:var(--sobre-azul-2)}
.f{font-family:var(--academia);font-style:italic;font-size:23px;line-height:1.4;color:var(--sobre-azul-2)}
.am{color:var(--am)}
.cifra{font-size:270px;line-height:.86;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.equipo{font-weight:700;margin-top:44px}

/* aparecer: se enciende subiendo un poco. El foco anterior nunca se encoge a la vista: se apaga, se acomoda y vuelve tenue */
[data-b]{opacity:0;translate:0 14px;transition:opacity .18s linear,translate 0s linear .18s}
[data-b].on{opacity:1;translate:none;transition:opacity .5s var(--sale) .24s,translate .7s var(--sale) .24s}
[data-fin]{transform-origin:0 0}
.atras{transform:translate(var(--ax,0px),var(--ay,0px)) scale(var(--as,.4));opacity:var(--ao,.55);animation:aLado .8s linear both}
.volvio{animation:alCentro .7s linear backwards}
@keyframes aLado{0%{opacity:var(--o0,1);transform:none}22%{opacity:0;transform:none}23%{opacity:0;transform:translate(var(--ax,0px),var(--ay,0px)) scale(var(--as,.4));animation-timing-function:cubic-bezier(.16,1,.3,1)}100%{opacity:var(--ao,.55);transform:translate(var(--ax,0px),var(--ay,0px)) scale(var(--as,.4))}}
@keyframes alCentro{0%{opacity:var(--o0,var(--ao,.55));transform:translate(var(--ax,0px),var(--ay,0px)) scale(var(--as,.4))}22%{opacity:0;transform:translate(var(--ax,0px),var(--ay,0px)) scale(var(--as,.4))}23%{opacity:0;transform:none;animation-timing-function:cubic-bezier(.16,1,.3,1)}100%{opacity:1;transform:none}}
.fuera{opacity:0 !important;transition:opacity .18s linear !important}
/* teclas seguidas: sin esperas, el último paso aparece completo enseguida */
body.prisa [data-b].on:not(.fuera),body.prisa #casos > .caso,body.prisa .sello.on{transition-delay:0s !important;transition-duration:.22s !important}
body.prisa [data-b].on:not(.fuera){transition-delay:.12s !important}
body.prisa .fuera{transition:opacity .1s linear !important}
body.prisa .atras,body.prisa .volvio{animation-duration:.3s}
body.prisa [data-b]:not(.on),body.prisa #casos > .caso.visto,body.prisa #casos > .caso.espera,body.prisa .sello:not(.on){transition-duration:0s !important;transition-delay:0s !important}

/* ---------- papel ---------- */
.papel{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra);border-radius:6px}
.papel .de{font-family:var(--academia);font-style:italic;font-size:17px;color:var(--tinta-2);margin-bottom:14px}
.papel .f{color:var(--tinta-2)}
.n{flex:none;display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:var(--tinta);color:var(--papel);font-style:normal;font-weight:800;font-size:.8em;font-variant-numeric:tabular-nums;line-height:1}
.suelo .n,.nota .n{background:var(--am);color:var(--tinta)}
mark{background:linear-gradient(transparent 12%,var(--am) 12% 88%,transparent 88%);color:inherit;padding:0 .12em;margin:0 -.06em}
.hoja mark.rojo{background-image:linear-gradient(transparent 12%,#ffb9ae 12% 88%,transparent 88%)}

.rotulo{background:var(--am);color:var(--tinta);padding:20px 26px 22px;border-radius:6px;box-shadow:var(--sombra);display:grid;gap:6px}
.rotulo b{font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.01em}
.rotulo span{font-size:27px;line-height:1.32;font-weight:500}
.rotulo::before{content:"";position:absolute;width:26px;height:26px;background:var(--am);transform:rotate(45deg)}
.rotulo.arriba::before{top:-12px;left:70px}
.rotulo.izq::before{left:-12px;top:38px}
.rotulo.abajo::before{bottom:-12px;left:70px}

.fig{font-family:var(--academia);font-size:22px;line-height:1.4;color:var(--sobre-azul-2)}
.fig b{font-style:normal;color:var(--sobre-azul)}

.cita{padding:36px 40px 30px}
.cita p{font-family:var(--academia);font-size:33px;line-height:1.34;font-weight:500}
.cita footer{margin-top:20px;font-size:20px;font-weight:600;color:var(--tinta-2)}
.cita.grande{padding:50px 56px 44px}
.cita.grande p{font-size:84px;line-height:1.1;font-weight:600;letter-spacing:-.012em}
.cita.grande footer{font-size:26px}

/* ---------- chat o agente ---------- */
.col{display:grid;gap:18px;align-content:start}
.hace{display:grid;gap:14px;font-family:var(--display);font-size:34px;line-height:1.2;font-weight:600;counter-reset:h}
.hace li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;counter-increment:h}
.hace li::before{content:counter(h);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--tinta);color:var(--papel);font-size:24px;font-weight:800}
.col > .cm{font-size:30px;line-height:1.3;color:var(--sobre-azul)}

/* ---------- el trabajo ---------- */
#valora{display:grid;gap:26px}
#valora .lectura .cifra{font-size:120px}
#valora:not(.on) .pista i{transform:scaleX(0)}

/* ---------- el encargo ---------- */
.hoja{padding:38px 44px 40px;font-size:17px;line-height:1.5}
.hoja > p + *, .hoja .parte + *{margin-top:16px}
.hoja h3{font-size:20px;font-weight:800;margin-bottom:6px}
.hoja ol{list-style:decimal;padding-left:1.3em}
.hoja ul{list-style:disc;padding-left:1.2em}
.hoja li + li{margin-top:5px}
.hoja mark{background:none;transition:background-size .7s var(--sale) .5s;background-image:linear-gradient(transparent 12%,var(--am) 12% 88%,transparent 88%);background-repeat:no-repeat;background-size:0% 100%}
.parte{padding:10px 14px;margin:0 -14px;border-radius:4px;transition:background-color .5s linear,transform .9s var(--sale),opacity .6s linear}
.hoja > p,.hilo > p{transition:opacity .6s linear}
.hoja{transform-style:preserve-3d}
.parte{position:relative}
.parte h3 .n{font-size:14px;margin-right:8px;vertical-align:2px;transform:scale(0);transition:transform .5s var(--sale) .4s}
/* el encargo como caja de chat */
.hoja.caja{border-radius:22px;padding-bottom:22px}
.adjunto{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:10px;background:var(--papel-2);font-size:15px;font-weight:600}
.adjunto svg{width:22px;height:22px;fill:none;stroke:var(--tinta);stroke-width:1.8;stroke-linejoin:round}
.envio{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--papel-2);font-size:15px;font-weight:600;color:var(--tinta-2);transition:opacity .6s linear}
.envio .mas{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--papel-2);position:relative}
.envio .mas::before,.envio .mas::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--tinta-2)}
.envio .mas::after{transform:rotate(90deg)}
.envio .enviar{margin-left:auto;width:44px;height:44px;border-radius:50%;background:var(--tinta);display:grid;place-items:center}
.envio svg{width:22px;height:22px;fill:none;stroke:var(--papel);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.repaso .hace{margin-top:30px;font-size:44px;gap:20px}
.repaso .hace li{gap:18px;align-items:center}
.repaso .hace li::before{width:54px;height:54px;font-size:30px;background:var(--am);color:var(--tinta)}
.nota{position:absolute;left:14px;right:14px;top:calc(100% + 4px);z-index:2;padding:11px 16px 12px;gap:3px}
.nota b{font-size:22px}
.nota span{font-size:15px;line-height:1.35}
.nota.arriba::before{width:16px;height:16px;top:-7px;left:40px}

/* ---------- el hilo ---------- */
.hilo{padding:30px 36px 36px}
.msj{font-size:22px;line-height:1.4;color:var(--tinta-2);max-width:640px}
.msj b{color:var(--tinta);margin-right:8px}
.paso{font-size:22px;font-weight:700;margin:26px 0 10px}
.cmd{font-family:var(--mono);font-size:29px;line-height:1.5;font-weight:500;background:var(--noche);color:var(--papel);padding:22px 26px;border-radius:4px;white-space:pre-wrap;box-shadow:inset 0 0 0 0 var(--am);transition:box-shadow .5s var(--sale) .3s}
#ordenes[data-k="1"] .cmd,#ordenes[data-k="2"] .cmd{box-shadow:inset 0 0 0 5px var(--am)}
.productos img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:4px;box-shadow:var(--sombra);background:var(--papel)}

/* ---------- las fuentes ---------- */
.mesa{transform-style:preserve-3d;transform-origin:0 50%}
.st.llego .mesa{transform:rotateY(9deg)}
.ficha{position:absolute;left:0;top:0;width:262px;height:246px;padding:18px 20px 16px;background:var(--papel);color:var(--tinta);border-radius:6px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:6px;transform:translate(278px,132px) rotate(calc((var(--k) - 2.5) * 4deg));transition:transform 1.1s var(--sale) calc(var(--k) * 90ms)}
.st.repartida .ficha{transform:translate(calc(var(--c) * 278px),calc(var(--f) * 262px))}
.ficha b{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em}
.ficha span{font-family:var(--academia);font-size:23px;line-height:1.22}
.ficha i{margin-top:auto;font-style:normal;font-weight:800;font-size:22px;padding-left:32px;position:relative}
.ficha i::before{content:"";position:absolute;left:0;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%}
.ficha .ok{color:var(--menta-t)}.ficha .ok::before{background:var(--menta-t)}
.ficha .no{color:var(--coral-t)}.ficha .no::before{background:var(--coral-t);border-radius:4px;transform:rotate(45deg)}

/* ---------- se revisa ---------- */
.espejo{transform-style:preserve-3d;border-radius:6px}
.espejo > img,.nivel img{width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:0 0 0 6px var(--papel),var(--sombra)}
.espejo > img{position:relative;z-index:1}
.nivel{position:absolute;inset:0;transition:transform 1.4s var(--sale);filter:brightness(calc(1 - var(--k) * .09))}
.st:not(.llego) .nivel{transition-duration:.3s}
#revisa.llego[data-k="1"] .nivel{transform:translate3d(calc(var(--k) * 96px),calc(var(--k) * -92px),calc(var(--k) * -220px))}


/* ---------- la ventana ---------- */
.ventana{transform-style:preserve-3d}
.giro{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.45,0,.2,1) .55s}
#resultado[data-k="3"] .giro,#resultado[data-k="4"] .giro{transform:rotateY(180deg)}
.cara{position:absolute;inset:0;backface-visibility:hidden;transform-style:flat;background:var(--noche);border-radius:8px;box-shadow:0 0 0 10px var(--papel),var(--sombra)}
.cara.dorso{transform:rotateY(180deg);visibility:hidden;transition:visibility 0s 1.5s}
#resultado[data-k="3"] .dorso,#resultado[data-k="4"] .dorso{visibility:visible;transition-delay:0s}
#resultado[data-k="3"] .frente,#resultado[data-k="4"] .frente{visibility:hidden;transition:visibility 0s 1.5s}
.cara::after{content:"";position:absolute;inset:0;border-radius:8px;background:var(--noche);clip-path:inset(0 0 0 0);transition:clip-path .8s var(--sale)}
.cara.lista::after{clip-path:inset(0 0 0 100%)}
.cara iframe{position:absolute;left:0;top:0;width:100%;height:100%;zoom:1.3;backface-visibility:hidden;border:0;border-radius:6px;background:var(--noche);pointer-events:none}
.st.vivo .cara iframe{pointer-events:auto}
.puerta{position:absolute;top:0;bottom:0;width:50%;background:var(--azul-2);display:grid;align-items:center;overflow:hidden;backface-visibility:hidden;transition:transform 1.5s cubic-bezier(.3,0,.2,1) .15s,visibility 0s;box-shadow:inset 0 0 0 6px var(--am);transform:translateZ(2px)}
.puerta span{font-size:130px;font-weight:800;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.puerta.izq{left:0;transform-origin:0 50%;border-radius:8px 0 0 8px;justify-items:end;padding-right:22px}
.puerta.der{right:0;transform-origin:100% 50%;border-radius:0 8px 8px 0;justify-items:start;padding-left:22px;color:var(--am)}
#resultado:not([data-k="0"]) .puerta{visibility:hidden;transition:transform 1.5s cubic-bezier(.3,0,.2,1) .15s,visibility 0s 1.7s}
#resultado:not([data-k="0"]) .puerta.izq{transform:translateZ(2px) rotateY(-118deg)}
#resultado:not([data-k="0"]) .puerta.der{transform:translateZ(2px) rotateY(118deg)}
#rv2{position:absolute;left:50%;top:-150px;width:700px;margin-left:-350px;z-index:2}
#rv2.on{transition-delay:1.95s,1.95s}
.productos{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.productos li{display:grid;gap:10px;position:relative}
.productos .n{position:absolute;left:-18px;top:-18px;font-size:34px;z-index:1;background:var(--am);color:var(--tinta)}
.productos b{font-size:38px;font-weight:800;margin-top:14px}
.productos span{font-size:27px;line-height:1.34;color:var(--sobre-azul-2)}

/* ---------- lo que dejó para revisar ---------- */
.lista{font-size:26px;line-height:1.46;padding:40px 46px 46px}
.lista h3{font-size:34px;margin:6px 0 18px}
.lista > p + p{margin-top:20px}
.lista,.mesa{transition:opacity .7s linear,transform .5s var(--sale)}
#revisar[data-k="2"] .lista,#fuentes[data-k="2"] .mesa{opacity:.42}
#revisar #lis{transition:background-color .5s linear;padding:10px 14px;margin:-10px -14px;border-radius:4px}

/* ---------- el IB ---------- */
.regla{display:grid;grid-template-columns:auto 1fr;gap:14px 34px;align-items:start}
.regla svg{width:116px;height:116px;fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.regla p{grid-column:2}
.regla.bien svg{stroke:var(--menta)} .regla.bien p{color:var(--menta)}
.regla.mal svg{stroke:var(--coral)} .regla.mal p{color:#ff9384}
.declarar{padding:38px 44px 40px}
.declarar .ejemplo{font-family:var(--academia);font-size:34px;line-height:1.56}
.declarar .ejemplo .n{font-family:var(--display);font-size:20px;vertical-align:super;margin-left:4px}
.tres-partes{display:flex;gap:34px;margin:26px 0 20px;font-size:27px;font-weight:700}
.tres-partes li{display:flex;gap:12px;align-items:center}
.declarar .cm{color:var(--tinta-2)}

/* ---------- la muleta ---------- */
.grafico{padding:40px 54px}
.grafico h3{font-size:44px;font-weight:800;letter-spacing:-.012em}
.grafico .sub{font-size:26px;color:var(--tinta-2);margin-top:8px;max-width:1000px}
.barras{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:18px;height:520px}
.grupo{transition:opacity .7s linear}
#muleta[data-k="1"] .grupo:first-child,#muleta[data-k="2"] .grupo:first-child{opacity:.38}
.grupo{display:grid;grid-template-rows:auto 1fr;gap:6px}
.grupo h4{font-size:30px;font-weight:700}
.par{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;position:relative;padding-top:330px}
.par::before{content:"";position:absolute;left:-10px;right:-10px;top:330px;height:4px;background:var(--tinta)}
.barra{position:relative;display:grid;gap:4px;padding-top:66px}
.barra::before{content:"";position:absolute;left:0;width:150px;height:var(--h,0);background:var(--tinta);transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.2s var(--sale) .5s}
.barra.sube::before{bottom:100%;margin-bottom:-2px}
.barra.baja::before{top:2px;background:var(--coral-t);transform-origin:50% 0}
.barra b{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.barra.baja b{color:var(--coral-t)}
.barra span{font-size:26px;line-height:1.25;color:var(--tinta-2);max-width:240px}
.barra.cero::before{top:2px;height:4px}
.st.cerca .barra::before{transform:scaleY(1)}
.grupo[data-b]:not(.on) .barra::before{transform:scaleY(0)}
.grafico .sub .f{font-size:22px;white-space:nowrap}
.junto{white-space:nowrap}

/* ---------- lo que puede salir mal ---------- */
.docx{font-size:24px;line-height:1.5}
.docx h3{font-size:34px;margin-bottom:10px}
.docx .oculta{color:var(--coral-t);font-weight:700;background:#ffe3de;padding:8px 12px;margin:14px -12px;border-radius:4px}
.triangulo{left:60px;top:40px;width:520px;height:460px;fill:none;stroke:var(--coral);stroke-width:10;stroke-linejoin:round;stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 0s .2s}
.triangulo.on{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--sale) .12s}
#p-tri > *{position:absolute}
.esq{font-size:34px;font-weight:800;white-space:nowrap}
.e1{left:320px;top:0;transform:translateX(-50%)}.e2{left:90px;top:540px;transform:translateX(-50%)}.e3{left:550px;top:540px;transform:translateX(-50%)}
.triangulo{top:58px}
#p-tri .lema{left:700px;top:90px;width:720px}
.ley{margin-top:50px;padding-top:28px;border-top:4px solid var(--am)}

/* ---------- cuánto cuesta ---------- */
.medidor{display:grid;gap:18px}
.pista{position:relative;height:54px;background:var(--noche);border-radius:4px;box-shadow:inset 0 0 0 3px var(--sobre-azul-2)}
.pista i{position:absolute;top:0;bottom:0;background:var(--am);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--sale) .6s}
.st.cerca .pista i{transform:scaleX(1)}
.medidor[data-b]:not(.on) .pista i{transform:scaleX(0)}
.lectura{display:flex;align-items:flex-end;gap:30px}
.lectura .cifra{font-size:190px}
.lectura span{max-width:900px}
.lectura b{font-weight:800}
.medidor.dos .lectura b{color:var(--am)}
#medidores{display:grid;gap:70px}
#p-metr > *{position:absolute}
#p-metr > h3{position:relative}
.metr{left:0;top:90px;width:900px;height:auto}
.metr .eje,.metr .marca{fill:none;stroke:var(--sobre-azul-2);stroke-width:3}
.metr .curva{fill:none;stroke:var(--am);stroke-width:9;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.1s var(--sale) .25s}
.metr.on .curva{stroke-dashoffset:0}
.metr circle{fill:var(--am)}
.metr text{fill:var(--sobre-azul);font-size:34px;font-weight:700}
.metr .ej{font-family:var(--academia);font-size:30px;font-weight:400;fill:var(--sobre-azul-2)}
#p-metr .lema{left:960px;top:200px;width:460px}

/* ---------- el semáforo ---------- */
.leyenda{display:flex;gap:26px;justify-content:flex-end;font-size:26px;font-weight:700}
.leyenda li{display:flex;align-items:center;gap:10px}
.leyenda svg,.sello svg,#tira svg{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.leyenda svg{width:36px;height:36px}
.bien svg{stroke:var(--menta)} .duda svg{stroke:var(--am)} .mal svg{stroke:var(--coral)}
#casos > .caso{position:absolute;left:0;top:0;width:1180px;padding:44px 50px 46px;transform-origin:0 0;transition:opacity .5s var(--sale) .24s,translate .7s var(--sale) .24s,transform .6s var(--sale)}
#casos > .caso.resp{transform:scale(.52)}
.caso .de{font-size:22px}
.caso h3{font-size:70px;line-height:1.1;font-weight:700;letter-spacing:-.012em;text-wrap:balance}
#casos > .caso.espera{opacity:0;translate:0 14px;transition:opacity .18s linear,translate 0s .18s,transform 0s .18s}
#casos > .caso.visto{transform:scale(.52);opacity:0;transition:opacity .18s linear}
.sello{position:absolute;left:0;top:230px;width:1380px;display:grid;grid-template-columns:auto 1fr;gap:6px 44px;align-items:center;opacity:0;translate:0 14px;transition:opacity .18s linear,translate 0s .18s}
.sello svg{grid-row:1 / 3}
.sello.on{opacity:1;translate:none;transition:opacity .5s var(--sale) .3s,translate .7s var(--sale) .3s}
.sello svg{width:230px;height:230px}
.sello b{font-size:130px;letter-spacing:-.025em;align-self:end;font-weight:800;line-height:1}
.sello.bien b{color:var(--menta)} .sello.mal b{color:#ff9384}
.sello span{font-size:44px;line-height:1.2;align-self:start;max-width:900px;color:var(--sobre-azul-2)}
#tira{display:flex;gap:18px;align-items:center}
#tira li{width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 4px var(--sobre-azul-2);display:grid;place-items:center;transition:box-shadow .4s linear}
#tira li.bien,#tira li.mal{box-shadow:none}
#tira svg{width:64px;height:64px;opacity:0;transition:opacity .4s linear .2s}
#tira li.bien svg,#tira li.mal svg{opacity:1}
#tira li.actual{box-shadow:inset 0 0 0 6px var(--am)}

/* ---------- su propio encargo ---------- */
.plantilla{padding:40px 46px 50px;z-index:2}
.plantilla .archivo{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--tinta-2);height:0;overflow:hidden;transition:height .6s var(--sale)}
.plantilla.atras .archivo{height:40px}
.plantilla h3{font-size:44px;font-weight:800;margin-bottom:22px}
.plantilla li{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:29px;line-height:1.25;margin-top:26px}
.plantilla li .n{font-size:27px}
.plantilla .renglon{grid-column:2;height:44px;border-bottom:3px solid var(--tinta-2);opacity:.45}
.plantilla{--ao:1}
.carpeta{background:var(--noche);border-radius:8px;box-shadow:var(--sombra)}
.carpeta::before{content:"";position:absolute;left:0;top:-44px;width:230px;height:60px;background:var(--noche);border-radius:8px 8px 0 0}
.reloj{display:block;margin:44px 0 12px;padding:0;border:0;background:none;font-size:190px;font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--am)}
.reloj.fin{color:var(--coral)}

/* ---------- cierre ---------- */
.tres-cosas{color:var(--sobre-azul-2)}
.idea{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start}
.idea .n{font-size:62px;margin-top:8px}
.qr{padding:30px 30px 26px;display:grid;gap:18px;justify-items:center;text-align:center}
.qr figcaption{display:grid;gap:6px}
.qr b{font-size:26px;font-weight:800}
.qr span{font-size:22px;font-weight:600;color:var(--tinta-2)}

#velo{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(130% 100% at 62% 38%,var(--azul) 0 42%,var(--azul-2) 72%,var(--noche) 100%);opacity:0;transition:opacity .45s linear}
body.velo #velo{opacity:1;transition-duration:.26s}
#gire{display:none;position:fixed;z-index:8;left:16px;right:16px;bottom:16px;padding:18px 20px;background:var(--noche);border-radius:8px;box-shadow:var(--sombra);gap:14px;font-size:17px;line-height:1.4}
#gire button{justify-self:start;padding:10px 16px;border:2px solid var(--am);border-radius:6px;background:none;font-weight:700;color:var(--am)}
@media (orientation:portrait) and (max-width:720px){#gire{display:grid}}

/* ---------- riel de pasos ---------- */
#riel{position:fixed;z-index:5;left:max(20px,2.4vw);right:max(20px,2.4vw);bottom:max(10px,1.2vh);height:clamp(18px,2.6vh,26px);padding:0 12px;display:flex;align-items:center;gap:10px;pointer-events:none;background:rgb(15 24 85 / .78);border-radius:6px;transition:opacity .5s linear}
#riel .nombre{flex:none;min-width:14ch;font-size:clamp(11px,.78vw,13px);font-weight:700;white-space:nowrap;color:var(--sobre-azul)}
#riel .tramo{flex:var(--n) 1 0;height:3px;background:rgb(247 248 255 / .28);display:flex;justify-content:space-around;align-items:center}
#riel i{width:3px;height:8px;background:rgb(247 248 255 / .5);transition:background-color .3s linear,height .4s var(--sale),width .4s var(--sale)}
#riel i.visto{background:var(--sobre-azul)}
#riel i.actual{background:var(--am);height:14px;width:6px}
body.limpio #riel{opacity:0}

/* ---------- apuntes de quien presenta ---------- */
#apuntes{position:fixed;z-index:9;left:0;right:0;bottom:0;max-height:46vh;overflow:auto;background:var(--noche);color:var(--sobre-azul);padding:20px clamp(18px,3vw,44px) 22px;display:grid;gap:10px;box-shadow:0 -18px 40px -10px rgb(6 10 48 / .6);scrollbar-color:var(--sobre-azul-2) var(--noche);scrollbar-width:thin}
#apuntes[hidden]{display:none}
.reloj-charla{display:flex;gap:18px;align-items:baseline;font-variant-numeric:tabular-nums}
.reloj-charla b{font-size:26px;color:var(--am)}
.reloj-charla span{font-size:15px;color:var(--sobre-azul-2)}
#apunte{font-size:clamp(17px,1.5vw,22px);line-height:1.5;max-width:75ch;white-space:pre-line}
#apuntes .teclas{font-size:14px;color:var(--sobre-azul-2)}
body.presentador{overflow:auto}
body.presentador #apuntes{position:static;max-height:none;min-height:100vh;align-content:start;box-shadow:none}
body.presentador #apunte{font-size:clamp(22px,2.6vw,34px)}
body.presentador .reloj-charla b{font-size:56px}
body.presentador #rio,body.presentador .css3d,body.presentador #mundo,body.presentador #riel,body.presentador .toque{display:none}

.toque{position:fixed;z-index:4;top:0;bottom:0;width:14vw;background:none;border:0;display:none}
#ant{left:0}#sig{right:0}
@media (pointer:coarse){.toque{display:block}}

/* sin 3D o con movimiento reducido: una estación a la vez, sin viaje */
body.plano #mundo{overflow:hidden}
body.plano .st{position:absolute;left:50%;top:50%;transform-origin:0 0}
body.plano .st:not(.cerca){display:none}
@media (prefers-reduced-motion:reduce){
  [data-b],[data-fin],.giro,.puerta,.nivel,.ficha,.barra::before,.pista i,.metr .curva,.triangulo,#casos > .caso,.sello{transition-duration:.01s !important;transition-delay:0s !important;translate:none !important}
  .atras,.volvio{animation-duration:.01s !important}
  .hito,.camino::after,.mano,.obra,.mitad i,#nav,#ra,#cita-rev,.escribe span,.razona p,.pasos-mini li,.archivos li,.ficha .ok{transition-duration:.01s !important;transition-delay:0s !important}
  .st.llego .mano.una,.cursor,.ahora{animation:none !important}
}

/* ---------- apertura en cuatro estaciones ---------- */
.manos{-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.mano{position:absolute;bottom:-30px;left:var(--x);width:calc(220px * var(--s));height:calc(400px * var(--s));--piel:var(--sobre-azul-2);--manga:var(--azul-2);--pliegue:rgb(18 26 74 / .16);transform-origin:50% 100%;transform:translateY(110%) rotate(var(--r));transition:transform 1.4s var(--sale) calc(.15s + var(--d))}
.mano.una{--piel:var(--am);--manga:var(--noche)}
.st.llego .mano{transform:rotate(var(--r))}
.st.llego .mano.una{animation:saluda 2.4s ease-in-out 1.7s 2}
@keyframes saluda{0%,100%{rotate:0deg}25%{rotate:-8deg}75%{rotate:7deg}}
.mitad{display:grid;grid-template-columns:repeat(10,1fr);gap:16px;transform-style:preserve-3d}
.mitad i{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 3px rgb(205 211 245 / .4);transition:background-color .35s linear,box-shadow .35s linear,transform 1s var(--sale);transition-delay:calc(.35s + var(--j) * 70ms)}
.st.llego .mitad i.si{background:var(--am);box-shadow:0 10px 18px -8px rgb(6 10 48 / .6);transform:translateZ(46px)}

/* ---------- chat o agente ---------- */
#mismo{display:grid;gap:24px}
.compositor{border-radius:28px;padding:28px 34px 22px;display:grid;gap:20px}
.compositor .adjunto{justify-self:start;font-size:22px;padding:10px 18px 10px 14px}
.compositor .adjunto svg{width:28px;height:28px}
.escribe{font-size:56px;line-height:1.16;font-weight:600;letter-spacing:-.01em}
.escribe span{opacity:0;transition:opacity .1s linear calc(.45s + var(--i) * 80ms)}
#chat.llego .escribe span{opacity:1}
.cursor{display:inline-block;width:.07em;height:.95em;margin-left:.08em;vertical-align:-.12em;background:var(--azul);animation:parpadea 1.05s steps(1) infinite}
@keyframes parpadea{50%{opacity:0}}
.compositor .envio{margin-top:0;font-size:22px;padding-top:18px}
.compositor .envio .mas{width:48px;height:48px}
.compositor .envio .mas::before,.compositor .envio .mas::after{width:20px;margin-left:-10px}
.compositor .envio .enviar{width:64px;height:64px;background:var(--azul)}
.compositor .envio svg{width:30px;height:30px}
#mismo .pie{color:var(--sobre-azul);font-size:34px;transition:opacity .3s linear}
#mismo.atras .pie,#mismo.atras .cursor{opacity:0}
.col > .de{font-family:var(--academia);font-style:italic;font-size:24px;color:var(--sobre-azul-2);margin-bottom:-6px}
.pasos-mini{display:grid;gap:10px;counter-reset:h;font-size:30px;line-height:1.2;font-weight:600}
.pasos-mini li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;counter-increment:h;opacity:0;translate:-12px 0;transition:opacity .25s linear,translate 0s .25s}
.pasos-mini li::before{content:counter(h);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--sobre-azul-2);font-size:20px;font-weight:800}
#col-agente .pasos-mini{font-size:27px;gap:7px}
#col-agente .pasos-mini li::before{width:34px;height:34px;font-size:18px;background:var(--am);color:var(--tinta);box-shadow:none}
.on > .pasos-mini li{opacity:1;translate:none;transition:opacity .4s linear calc(.4s + var(--i) * .13s),translate .6s var(--sale) calc(.4s + var(--i) * .13s)}
.respuesta{margin-top:8px;padding:2px 0 4px;font-family:var(--academia);font-size:32px;line-height:1.38;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.respuesta .de{font-family:var(--display);font-style:normal;font-size:20px;font-weight:700;color:var(--am);margin-bottom:8px}
#chat[data-k="3"] #col-chat{opacity:.5;transition:opacity .4s linear}
body.prisa .on > .pasos-mini li,body.prisa #chat .escribe span{transition-delay:0s !important;transition-duration:.2s !important}

/* ---------- lo que puede hacer ---------- */
.obras{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;transform-style:preserve-3d}
.obra{display:grid;gap:14px;align-content:start;opacity:0;transform:translateZ(-480px) rotateY(calc((var(--i) - 1) * -26deg));transition:opacity .6s linear,transform 1.6s var(--sale);transition-delay:calc(.2s + var(--i) * .25s)}
.st.llego .obra{opacity:1;transform:rotateY(calc((var(--i) - 1) * -9deg))}
.linea{font-family:var(--mono);font-size:20px;color:var(--am);background:var(--noche);padding:8px 14px;border-radius:4px;justify-self:start;white-space:pre}
.lienzo-obra{height:240px;padding:24px 26px;overflow:hidden}
.arch{display:grid;gap:12px;font-family:var(--mono);font-size:23px;font-weight:700}
.arch li{display:flex;align-items:center;gap:12px}
.arch li::before{content:"";flex:none;width:22px;height:28px;border-radius:3px;background:var(--papel-2);box-shadow:inset 0 0 0 2px var(--tinta-2)}
.corrige p{font-family:var(--academia);font-size:31px;line-height:1.45}
.corrige del{color:var(--coral-t);text-decoration-thickness:3px}
.corrige ins{text-decoration:none;background:#c9f5e6;color:var(--menta-t);padding:0 .15em;border-radius:3px}
.lienzo-obra.web{padding:0;display:grid;grid-template-rows:auto 1fr}
.barra-mini{display:flex;gap:7px;padding:10px 14px;background:var(--papel-2)}
.barra-mini i{width:11px;height:11px;border-radius:50%;background:var(--tinta-2);opacity:.4}
.web img{width:100%;height:100%;object-fit:cover}
.obra figcaption{font-size:34px;font-weight:700}

/* ---------- el encargo, en cuatro partes ---------- */
#encargo[data-k="1"] .hoja > :not(#pp0),#encargo[data-k="2"] .hoja > :not(#pp1),#encargo[data-k="3"] .hoja > :not(#pp2),#encargo[data-k="4"] .hoja > :not(#pp3){opacity:0}
#encargo[data-k="1"] #pp0 mark,#encargo[data-k="2"] #pp1 mark,#encargo[data-k="3"] #pp2 mark,#encargo[data-k="4"] #pp3 mark,#encargo[data-k="5"] mark,#revisar mark{background-size:100% 100%}
#encargo[data-k="5"] .parte{background:var(--papel-2)}
#encargo.llego[data-k="5"] #pp0{transform:translateZ(10px)}
#encargo.llego[data-k="5"] #pp1{transform:translateZ(20px)}
#encargo.llego[data-k="5"] #pp2{transform:translateZ(30px)}
#encargo.llego[data-k="5"] #pp3{transform:translateZ(40px)}
#encargo[data-k="5"] .parte h3 .n{transform:scale(1)}
.hoja > .adjunto{transition:opacity .6s linear}
#pp3 + p{margin-top:26px}

/* ---------- órdenes ---------- */
.piensa{margin-top:20px;padding:16px 22px 18px;border-radius:10px;background:var(--papel-2)}
.rotulo-piensa{font-size:20px;font-weight:700;margin-bottom:8px}
.rotulo-piensa .antes{display:none;color:var(--tinta-2)}
#ordenes:not([data-k="0"]) .rotulo-piensa .ahora{display:none}
#ordenes:not([data-k="0"]) .rotulo-piensa .antes{display:inline}
.ahora{color:var(--azul);animation:pensando 1.6s ease-in-out infinite alternate}
@keyframes pensando{from{opacity:1}to{opacity:.45}}
.razona{display:grid;gap:8px;font-family:var(--academia);font-style:italic;font-size:21px;line-height:1.42;color:var(--tinta-2);transition:opacity .5s linear}
.razona p{opacity:0;transition:opacity .7s linear calc(.5s + var(--i) * 1.1s)}
#ordenes.llego .razona p{opacity:1}
#ordenes:not([data-k="0"]) .razona{opacity:.42}
.salida{margin-top:12px;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--menta-t)}
#nav{border-radius:10px;overflow:hidden;background:var(--papel);color:var(--tinta);box-shadow:var(--sombra);transform-origin:100% 50%;transform:rotateY(-55deg) translateZ(-260px);transition:opacity .18s linear,translate 0s .18s,transform 0s .18s}
#nav.on{transform:none;transition:opacity .6s linear .3s,translate .7s var(--sale) .3s,transform 1.4s var(--sale) .25s}
.barra-nav{display:flex;align-items:center;gap:8px;padding:14px 18px;background:var(--papel-2)}
.barra-nav i{width:13px;height:13px;border-radius:50%;background:var(--tinta-2);opacity:.35}
.barra-nav span{margin-left:14px;flex:1;padding:6px 14px;border-radius:999px;background:var(--papel);font-family:var(--mono);font-size:17px;color:var(--tinta-2)}
.cuerpo-nav{padding:44px 44px 48px;display:grid;gap:16px;justify-items:start}
.nav-t{font-size:40px;font-weight:800;line-height:1.1}
.nav-s{font-size:24px;line-height:1.4;color:var(--tinta-2)}
.nav-b{margin-top:10px;padding:14px 30px;border-radius:8px;background:var(--azul);color:var(--papel);font-size:24px;font-weight:700}
.archivos{margin-top:30px;padding:26px 30px;display:grid;gap:14px;font-family:var(--mono);font-size:27px;font-weight:700}
.archivos li{display:flex;align-items:center;gap:16px;opacity:0;translate:-10px 0;transition:opacity .3s linear,translate 0s .3s}
.archivos li::before{content:"✓";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--menta-t);color:var(--papel);font-size:19px}
.on > .archivos li{opacity:1;translate:none;transition:opacity .4s linear calc(.6s + var(--i) * .45s),translate .6s var(--sale) calc(.6s + var(--i) * .45s)}
.rotulo.der::before{right:-12px;top:50%;margin-top:-13px}

/* ---------- fuentes: el PDF ---------- */
.ficha .ok{opacity:0;transition:opacity .35s linear calc(1.3s + var(--k) * .45s)}
.st.repartida .ficha .ok{opacity:1}
#fuentes > .adjunto{font-size:22px;padding:10px 18px 10px 14px}
#fuentes > .adjunto svg{width:28px;height:28px}

/* ---------- se revisa: el rótulo reemplaza la cita ---------- */
#cita-rev{transform-origin:0 50%;transition:opacity .5s linear .35s,transform 1s var(--sale) .3s}
#cita-rev.fuera{transform:rotateY(-80deg);transition:opacity .4s linear .2s,transform .8s cubic-bezier(.5,0,.75,0) !important}
#ra{padding:34px 40px 38px;transform-origin:0 50%;transform:rotateY(80deg);transition:opacity .18s linear,translate 0s .18s,transform 0s .18s}
#ra.on{transform:none;transition:opacity .5s linear .7s,translate .7s var(--sale) .7s,transform 1.1s var(--sale) .65s}
#ra b{font-size:66px}
#ra span{font-size:44px;line-height:1.2;font-weight:600}

/* ---------- hasta que funcionó: un camino en 3D ---------- */
#intentos{--k:0}
#intentos[data-k="1"]{--k:1}
#intentos[data-k="2"]{--k:2}
.via{transform-style:preserve-3d}
.camino{position:absolute;left:300px;top:-3140px;width:1000px;height:4000px;transform-origin:50% 100%;transform:rotateX(70deg);opacity:0;transition:opacity .8s linear;background:linear-gradient(90deg,transparent 0 6%,rgb(205 211 245 / .5) 6% 6.6%,rgb(15 24 85 / .72) 6.6% 93.4%,rgb(205 211 245 / .5) 93.4% 94%,transparent 94%);-webkit-mask-image:linear-gradient(to top,#000 25%,transparent 92%);mask-image:linear-gradient(to top,#000 25%,transparent 92%)}
.camino::after{content:"";position:absolute;left:50%;width:14px;margin-left:-7px;top:0;bottom:0;background:repeating-linear-gradient(to top,var(--am) 0 90px,transparent 90px 220px);background-position:0 calc(var(--k) * 1100px);transition:background-position 2s cubic-bezier(.45,0,.2,1)}
.st.llego .camino{opacity:1}
.hito{position:absolute;left:calc(580px + var(--fx));bottom:250px;width:440px;padding:28px 34px 32px;display:grid;gap:10px;transform-origin:50% 100%;transition:transform 2s cubic-bezier(.45,0,.2,1),opacity .7s linear,box-shadow .5s linear}
.hito i{font-family:var(--academia);font-style:italic;font-size:28px;color:var(--tinta-2);padding-right:56px}
.hito b{font-size:44px;line-height:1.12;font-weight:800;letter-spacing:-.01em}
.hito::before{content:"";position:absolute;right:30px;top:30px;width:38px;height:38px;border-radius:50%;background:var(--menta-t)}
.hito.mal::before{background:var(--coral-t);border-radius:6px;transform:rotate(45deg) scale(.85)}
.st.llego .hito{--s:calc(240 + (var(--i) - var(--k)) * 1100);transform:translate3d(calc(var(--x) - var(--fx)),calc(210px - var(--s) * .342px),calc(var(--s) * -.94px))}
#intentos.llego[data-k="1"] .h0,#intentos.llego[data-k="2"] .h0,#intentos.llego[data-k="2"] .h1{opacity:0}
#intentos[data-k="0"] .h0,#intentos[data-k="1"] .h1,#intentos[data-k="2"] .h2{box-shadow:0 0 0 6px var(--am),var(--sombra)}