:root{
--paper:#fefefe;--ink:#1e1e1e;--pink:#f386a1;--chrome:#dedede;--chrome-2:#c4c4c4;
--muted:#5a5a5a;--pink-ink:#a71136;--bw:2px}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);
font:400 0.95rem/1.6 Archivo,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:var(--bw) solid var(--ink);outline-offset:3px}
::selection{background:var(--pink);color:var(--ink)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.02}
.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---------- ventanas ---------- */
/* Cuerpo gris, como el panel de un cuadro de diálogo antiguo. Los campos,
   las fichas y el diagrama quedan en papel encima, que es justo la relación
   que tenían esas interfaces: chasis gris, contenido blanco. */
.win{border:var(--bw) solid var(--ink);background:var(--chrome)}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--ink);color:var(--paper);padding:6px 10px;
font:400 .74rem/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em}
.win-bar .dots{display:flex;gap:4px;flex:none}
.win-bar .dots i{width:9px;height:9px;background:var(--paper);display:block}
.win-body{padding:20px}

/* ---------- trama de puntos ---------- */
.dither{background-color:var(--pink);
background-image:radial-gradient(var(--ink) 1.1px,transparent 1.2px);
background-size:7px 7px;background-position:0 0}

/* ---------- marcas de registro ---------- */
.marks{position:relative}
.marks::before,.marks::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none}
.marks::before{top:0;left:0;border-top:var(--bw) solid var(--ink);border-left:var(--bw) solid var(--ink)}
.marks::after{bottom:0;right:0;border-bottom:var(--bw) solid var(--ink);border-right:var(--bw) solid var(--ink)}

/* ---------- rotulos ---------- */
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.06em;
text-transform:uppercase;margin:0 0 18px;display:inline-block;
border:var(--bw) solid var(--ink);padding:3px 8px;background:var(--pink)}

/* ---------- header ---------- */
.header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
border-bottom:var(--bw) solid var(--ink)}
.brand{display:flex;align-items:center;font-size:1.15rem;font-weight:700;letter-spacing:-.045em}
.mark{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);
width:28px;height:28px;margin-right:10px;font-size:1.05rem;font-weight:700;line-height:1;
font-family:'JetBrains Mono',ui-monospace,monospace}
.domain{color:var(--muted);font-weight:500}
.header nav{display:flex;align-items:center;gap:22px;font-size:.88rem;font-weight:500}
.header nav>a:not(.nav-cta):hover{background:var(--pink);box-shadow:0 2px 0 var(--ink)}
.nav-cta{border:var(--bw) solid var(--ink);padding:6px 12px;background:var(--ink);color:var(--paper);
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem}
.nav-cta:hover{background:var(--pink);color:var(--ink)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:44px;
padding:44px 22px;margin-top:24px}
h1{font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:600;margin-bottom:18px}
h1 span{background:var(--pink);padding:0 .07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.intro{max-width:46ch;color:var(--muted);margin-bottom:22px;font-size:1rem}
.button{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
border:var(--bw) solid var(--ink);padding:12px 18px;font-weight:600;font-size:.9rem;
box-shadow:5px 5px 0 var(--pink);transition:box-shadow .12s,transform .12s}
.button:hover{box-shadow:2px 2px 0 var(--pink);transform:translate(3px,3px)}
.platforms{display:flex;gap:10px;align-items:center;margin-top:24px;flex-wrap:wrap;
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;color:var(--muted)}
.platforms strong{font-weight:400;color:var(--ink);border:var(--bw) solid var(--ink);padding:2px 7px;background:var(--paper)}

/* ---------- diagrama ---------- */
.system .win-body{padding:0;background:var(--chrome)}
.system svg{display:block;width:100%;height:auto}
.system-note{display:flex;justify-content:space-between;gap:10px;
border-top:var(--bw) solid var(--ink);padding:8px 12px;background:var(--chrome-2);
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;color:var(--ink)}

/* ---------- declaracion ---------- */
.statement{border-block:var(--bw) solid var(--ink);padding:54px 0 58px;margin-top:44px}
.statement-inner{text-align:center}
.statement .tag{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.74rem;letter-spacing:.06em;border:var(--bw) solid var(--ink);background:var(--paper);
padding:4px 10px;margin-bottom:20px}
.statement p{margin:0 auto;max-width:15ch;font-weight:600;letter-spacing:-.045em;line-height:.98;
font-size:clamp(2.4rem,7.4vw,6rem)}

/* ---------- servicios ---------- */
.services{padding-block:56px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:26px}
h2{font-size:clamp(1.7rem,3.4vw,2.9rem);margin-bottom:0;max-width:16ch}
.section-heading>p{width:330px;color:var(--muted);margin-bottom:4px;font-size:.88rem}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.service{display:flex;flex-direction:column}
.service .win-body{display:flex;flex-direction:column;flex:1}
.service-icon{display:block;width:38px;height:38px;margin:2px 0 14px}
.service h3{font-size:1.3rem;margin-bottom:10px}
.service>.win-body>p{color:var(--muted);font-size:.88rem;line-height:1.55;min-height:76px}
.service ul{list-style:none;padding:12px 0 0;margin:12px 0 0;border-top:var(--bw) solid var(--ink)}
.service li{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.75rem;margin:6px 0;
padding-left:19px;position:relative}
.service li::before{content:'▸';position:absolute;left:0}

/* ---------- enfoque ---------- */
.approach{display:grid;grid-template-columns:1fr 1fr;gap:56px;
border-top:var(--bw) solid var(--ink);padding-block:48px 56px}
.approach-copy{color:var(--muted);margin-top:20px;max-width:46ch;font-size:.94rem}
.steps article{display:flex;gap:18px;padding:14px 0;border-bottom:var(--bw) solid var(--ink)}
.steps article:first-child{border-top:var(--bw) solid var(--ink)}
.steps article>span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8rem;
background:var(--pink);border:var(--bw) solid var(--ink);padding:1px 7px;height:fit-content;flex:none}
.steps h3{font-size:1.1rem;margin-bottom:5px}
.steps p{color:var(--muted);margin-bottom:0;font-size:.88rem}

/* ---------- preguntas frecuentes ----------
   Cada pregunta es una ventana que se abre. Uso <details> nativo: el texto
   de la respuesta esta SIEMPRE en el HTML — solo lo oculta el navegador —
   asi que Google lo indexa y la seccion funciona con JS desactivado.
   No hay transicion de altura a proposito: abre de golpe, como corresponde
   al resto del lenguaje mecanico de la pagina. */
.faqs{border-top:var(--bw) solid var(--ink);padding-block:48px 56px}
.faq-list{display:grid;gap:10px}
.faq>summary{cursor:pointer;padding:10px 13px;list-style:none;
font-family:Archivo,'Helvetica Neue',Arial,sans-serif}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::marker{content:''}
.faq>summary h3{font-size:1rem;font-weight:600;letter-spacing:-.022em;line-height:1.3;
margin:0;flex:1}
.faq>summary:focus-visible{outline:var(--bw) solid var(--pink);outline-offset:-5px}
.faq-signo{flex:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem}
.faq-signo::before{content:'[ + ]'}
.faq[open] .faq-signo::before{content:'[ − ]'}
.faq[open]>summary{border-bottom:var(--bw) solid var(--ink)}
.faq>.win-body{padding:17px 20px 19px}
/* La ventana va a ancho completo, pero la linea de texto no puede: sin tope
   da 131 caracteres por linea y no hay forma de leerla. 92ch la deja en 91 y
   ocupa ~820 de 1200px. El cuerpo sube a 1rem porque a esa medida la letra
   chica se hacia dura. */
.faq>.win-body p{margin:0;max-width:92ch;font-size:1rem;line-height:1.62}

/* ---------- contacto ---------- */
/* El rosado pasa a ser territorio: una banda a sangre detrás de la
   cabecera, con la ventana del formulario montada encima, en papel.
   Antes la trama estaba bajo los campos y costaba rellenarlos. */
.contacto{position:relative;isolation:isolate;padding-top:44px}
.contacto::before{content:'';position:absolute;z-index:-1;top:0;
left:calc(50% - 50vw);width:100vw;height:318px;
background-color:var(--pink);
background-image:radial-gradient(var(--ink) 1.1px,transparent 1.2px);
background-size:7px 7px;border-block:var(--bw) solid var(--ink)}
.contacto-cabecera{margin:0 0 26px}
.contacto-cabecera .eyebrow{background:var(--paper)}
/* Recuadro de papel: sobre la trama de puntos el texto a este tamaño
   se ensucia, los puntos se meten entre las letras. */
.contacto-cabecera h2{margin:0;max-width:24ch;display:block;width:fit-content;
background:var(--paper);border:var(--bw) solid var(--ink);padding:14px 18px}
.contact .win-body{padding:32px 34px}
.contact>.win-body>p{max-width:56ch;color:var(--muted);font-size:.92rem;margin-bottom:22px}
.contact .button{box-shadow:5px 5px 0 var(--pink)}
.contact .button:hover{box-shadow:2px 2px 0 var(--pink)}
.contact-mail{margin:16px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8rem;
overflow-wrap:anywhere;display:inline-block;background:var(--paper);border:var(--bw) solid var(--ink);padding:3px 9px}

/* ---------- pie ---------- */
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
border-top:var(--bw) solid var(--ink);padding-block:22px;margin-top:48px}
footer p,footer>a:last-child{color:var(--muted);font-size:.78rem;margin:0;
font-family:'JetBrains Mono',ui-monospace,monospace}
footer>a:last-child:hover{color:var(--ink)}
footer .brand{font-size:1rem}
footer .mark{width:24px;height:24px;font-size:.9rem}

.skip{position:absolute;left:15px;top:-100px;background:var(--pink);color:var(--ink);
border:var(--bw) solid var(--ink);padding:10px;z-index:10}
.skip:focus{top:10px}

@media(max-width:1050px){
.wrap{width:calc(100% - 40px)}
.header nav{gap:16px}
.hero{gap:30px;padding:44px 18px;grid-template-columns:1fr 1fr}
.service>.win-body>p{min-height:112px}
.approach{gap:38px}
.contact .win-body{padding:32px 26px}
}
@media(max-width:760px){
.wrap{width:calc(100% - 24px)}
.header{height:56px}
.header nav>a:not(.nav-cta){display:none}
.hero{grid-template-columns:1fr;padding:30px 14px;gap:34px;margin-top:22px}
h1{font-size:clamp(2.1rem,9.2vw,3rem)}
.intro{font-size:.95rem}
.system{max-width:460px;width:100%;margin-inline:auto}
.statement{padding:48px 0 52px;margin-top:44px}
.section-heading{display:block;margin-bottom:24px}
.section-heading>p{width:auto;margin-top:16px}
.services{padding-block:52px}
.service-grid{grid-template-columns:1fr}
.service>.win-body>p{min-height:0}
.service h3 br{display:none}
.approach{grid-template-columns:1fr;padding-block:44px 52px;gap:24px}
.faqs{padding-block:44px 48px}
/* En movil la pregunta ocupa dos o tres lineas: los puntos y el signo se
   alinean arriba, con la primera linea, no flotando al medio. */
.faq>summary{padding:9px 11px;gap:9px;align-items:flex-start}
.faq>summary .dots,.faq>summary .faq-signo{margin-top:3px}
.faq>summary h3{font-size:.94rem}
.faq>.win-body{padding:15px 15px 17px}
.faq>.win-body p{font-size:.89rem}
footer{padding-block:22px;margin-top:48px}
footer p{width:100%;order:3}
.marks::before,.marks::after{width:11px;height:11px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
}
@media(min-width:761px){
.service-seo{grid-column:1 / -1}
.service-seo .win-body{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start}
.service-seo .service-icon{grid-column:1;grid-row:1}
.service-seo h3{grid-column:1;grid-row:2;margin-bottom:0}
.service-seo>.win-body>p{grid-column:2;grid-row:1 / 3;min-height:0}
.service-seo ul{grid-column:1 / -1;grid-row:3;margin-top:20px}
}

/* ==================== MOVIMIENTO ====================
   Todo mecanico: steps(), nunca easing. El estado inicial
   oculto vive dentro de no-preference, asi que sin JS o con
   movimiento reducido la pagina se ve completa desde el primer
   frame — nada queda congelado invisible. */

/* --- hover: la ventana se levanta y proyecta sombra --- */
.service{transition:transform .09s steps(2),box-shadow .09s steps(2)}
.service:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--pink)}
.win-bar .dots i{transition:background .09s steps(1)}
.system{transition:box-shadow .09s steps(2)}
.system:hover{box-shadow:6px 6px 0 var(--pink)}
.steps article{transition:background .09s steps(1)}
.steps article:hover{background:#f2f2f2}
.steps article:hover>span{background:var(--ink);color:var(--paper)}
.steps article>span{transition:background .09s steps(1),color .09s steps(1)}

@media(prefers-reduced-motion:no-preference){

/* --- secuencia de arranque del hero --- */
@keyframes snap{from{opacity:0}to{opacity:1}}
@keyframes snap-up{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.b1,.b2,.b3,.b4,.b5,.b6{opacity:0;animation:snap-up .26s steps(3) forwards}
.b1{animation-delay:.05s}
.b2{animation-delay:.13s}
.b3{animation-delay:.25s}
.b4{animation-delay:.34s}
.b5{animation-delay:.41s}
.b6{animation-delay:.18s;animation-name:snap;animation-duration:.01s;animation-timing-function:steps(1)}

/* --- el diagrama se dibuja solo --- */
.d-orbit{stroke-dasharray:1131;stroke-dashoffset:1131;
animation:draw .85s steps(16) .34s forwards}
.d-orbit2{stroke-dasharray:6 5;stroke-dashoffset:0;opacity:0;
animation:snap .01s steps(1) .82s forwards}
.d-wire{stroke-dasharray:180;stroke-dashoffset:180;
animation:draw .3s steps(6) .62s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.d-panel,.d-core,.d-text{opacity:0;animation:snap .01s steps(1) forwards}
.d-p1{animation-delay:.76s}
.d-p2{animation-delay:.84s}
.d-p3{animation-delay:.92s}
.d-core{animation-delay:1s}
.d-text{animation-delay:1.08s}

/* --- el cursor del contacto --- */
.contact-mail::after{content:'';display:inline-block;width:.55em;height:1em;
background:var(--ink);vertical-align:-.15em;margin-left:.35em;
animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
}

/* --- revelado al hacer scroll ---
   El estado oculto solo existe bajo .reveal, clase que el script
   agrega unicamente si el movimiento esta permitido. Sin JS, con
   JS bloqueado o con prefers-reduced-motion, nada se oculta. */
.reveal [data-reveal]{opacity:0;transform:translateY(10px);
transition:opacity .01s steps(1),transform .24s steps(3);
transition-delay:calc(var(--i,0)*70ms)}
.reveal [data-reveal].in{opacity:1;transform:none}

/* El barrido va en el hijo: si se recorta el propio elemento observado,
   queda de ancho cero y el IntersectionObserver nunca lo ve entrar. */
.reveal [data-reveal="wipe-host"]{opacity:1;transform:none}
.reveal [data-reveal="wipe-host"] .tag{opacity:0;transition:opacity .01s steps(1)}
.reveal [data-reveal="wipe-host"] p{clip-path:inset(0 100% 0 0);transition:clip-path .55s steps(10)}
.reveal [data-reveal="wipe-host"].in .tag{opacity:1}
.reveal [data-reveal="wipe-host"].in p{clip-path:inset(0 0 0 0);transition-delay:.1s}

/* ==================== FORMULARIO ==================== */
.form{margin:0 0 18px;background:var(--chrome)}
.form-body{padding:18px}
.field{margin:0 0 14px;border:0;padding:0;min-width:0}
.field label,.field legend{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.74rem;letter-spacing:.04em;margin-bottom:6px;padding:0}
.field label::before,.field legend::before{content:'> ';color:#9a6472}
.form input[type=text],.form input[type=email],.form input[type=url],.form textarea{
display:block;width:100%;font:400 .88rem/1.5 'JetBrains Mono',ui-monospace,monospace;
color:var(--ink);background:var(--paper);border:var(--bw) solid var(--ink);
border-radius:0;padding:10px 12px;-webkit-appearance:none;appearance:none;
transition:box-shadow .09s steps(2),background .09s steps(1)}
.form textarea{resize:vertical;min-height:96px}
.form input:focus,.form textarea:focus{outline:none;box-shadow:4px 4px 0 var(--pink)}
.form input::placeholder{color:#9a9a9a}

/* opciones como casillas dibujadas */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0;
border:var(--bw) solid var(--ink);padding:7px 11px;background:var(--paper);
font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;
transition:background .09s steps(1)}
.field label.opt::before{content:none}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt span{position:relative;padding-left:20px}
.opt span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:12px;height:12px;border:var(--bw) solid var(--ink);background:var(--paper)}
.opt:hover{background:#f4f4f4}
.opt:has(input:checked){background:var(--pink)}
.opt:has(input:checked) span::before{background:var(--ink)}
.opt:has(input:focus-visible){box-shadow:4px 4px 0 var(--pink)}

.note{margin:12px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;
line-height:1.55;border:var(--bw) solid var(--ink);background:var(--pink);padding:9px 11px}
.note[hidden]{display:none}

.err{display:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;
margin-top:6px}
.err.on{display:block}
.err.on::before{content:'! ';font-weight:700}
.field[data-bad] input,.field[data-bad] textarea{background:#ffeef2}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.form .button{box-shadow:5px 5px 0 var(--pink)}
.form .button:hover{box-shadow:2px 2px 0 var(--pink)}
.form .button[disabled]{opacity:.55;pointer-events:none}
.status{margin:16px 0 0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;
color:#5a5a5a}
.status::before{content:'> ';color:var(--ink)}
.status.ok{color:var(--ink);font-weight:700}
.status.bad{background:var(--pink);border:var(--bw) solid var(--ink);padding:7px 10px;display:inline-block;color:var(--ink)}

.contact-mail a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:760px){
.form-body{padding:16px}
.opts{flex-direction:column;align-items:flex-start}
.opt{width:100%}
}

/* ==================== 404 ==================== */
.error-wrap{padding-block:90px 40px}
.error-win{max-width:640px;margin-inline:auto}
.error-body{padding:40px 38px}
.error-code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:3.6rem;line-height:1;
font-weight:700;background:var(--pink);border:var(--bw) solid var(--ink);
display:inline-block;padding:6px 16px;margin:0 0 26px}
.error-body h1{font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:14px}
.error-body>p{color:var(--muted);margin-bottom:26px;max-width:46ch}
@media(max-width:760px){.error-wrap{padding-block:48px 24px}.error-body{padding:26px 22px}}

@media(max-width:760px){
.contacto{padding-top:34px}
.contacto::before{height:250px}
.contacto-cabecera{margin-bottom:20px}
.contacto-cabecera h2{padding:10px 12px;max-width:none}
.contact .win-body{padding:20px 18px}
}

/* ==================== VENTANAS ARRASTRABLES ====================
   Se agarran por la barra de título, como una ventana de verdad, y al
   soltarlas vuelven solas a su sitio. La clase la pone el script, y solo
   con mouse y con movimiento permitido: en pantalla táctil arrastrar una
   tarjeta competiría con el scroll de la página. */
.win-bar.agarre{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.win-bar.agarre:active{cursor:grabbing}
.win-bar,.win-bar .dots i{transition:background .09s steps(1),color .09s steps(1)}

/* Barra activa: rosado al pasar por encima y mientras se arrastra.
   El texto se invierte a tinta; papel sobre rosado da 2,4:1. */
/* Sin depender de la clase que pone el script: el color no es movimiento,
   así que también lo ve quien tiene prefers-reduced-motion activado. */
.win>.win-bar:hover,
.service:hover>.win-bar{background:var(--pink);color:var(--ink)}
.win>.win-bar:hover .dots i,
.service:hover>.win-bar .dots i{background:var(--ink)}

/* Texto e iconos en rosado al pasar por encima.
   Va con --pink-ink y no con el rosado de marca: #f386a1 como TEXTO sobre
   el gris da 1,79:1 y no se lee. Este es el mismo tono (H 345°) bajado de
   luminosidad hasta 5,6:1. El rosado claro se queda para rellenos. */
.service:hover h3,
.service:hover>.win-body>p,
.service:hover li{color:var(--pink-ink)}
.service:hover li::before{color:var(--pink-ink)}
.service:hover .service-icon{color:var(--pink-ink)}
.service h3,.service>.win-body>p,.service li,.service li::before,.service-icon{
transition:color .09s steps(1)}

.win.arrastrando{transition:none;position:relative;z-index:5;
box-shadow:12px 12px 0 var(--pink)}
/* Arrastrando: mismo rosado que el hover. Lo que distingue el estado es
   la sombra dura y que la ventana se levanta, no un color aparte. */
.win.arrastrando>.win-bar,
.win.arrastrando>.win-bar:hover{background:var(--pink);color:var(--ink)}
.win.arrastrando>.win-bar .dots i{background:var(--ink)}
.win.volviendo{transition:transform .2s steps(5)}