/* Animaciones de las fichas de revisión · Stílogo · v3 (12 nov 2026)
   Una sola reproducción al entrar en pantalla; queda en la imagen final; botón para volver a verla.
   Dos encuadres: .stl-anim--pagina (hoja entera, como la v2) y .stl-anim--cerca (fragmento de cerca, texto legible). */
.stl-anim{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:6px;box-shadow:0 10px 30px rgba(20,50,90,.18);font-family:'Open Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.stl-anim .esc{position:absolute;left:0;top:0;transform-origin:0 0;background:linear-gradient(135deg,#6cc0ea 0%,#4f9fdb 45%,#3a76b9 100%);overflow:hidden}
.stl-anim .ondas{position:absolute;inset:0;width:100%;height:100%}
.stl-anim .hoja{position:absolute;background:#fff;box-shadow:0 18px 40px rgba(20,50,90,.28);box-sizing:border-box;color:#3a4350}
.stl-anim .cab{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e8ee}
.stl-anim .logo{display:block;color:#2b3442}
.stl-anim .logo svg{display:block;width:100%;height:auto}
.stl-anim .tipo{font-family:Comfortaa,sans-serif;color:#3c8fd1;text-align:right;line-height:1.4}
.stl-anim h3{font-family:Comfortaa,sans-serif;font-weight:700;color:#3a8fd6;margin:0;line-height:1.3;letter-spacing:0}
.stl-anim .hoja .autor{color:#7a8794;margin:0}
.stl-anim .hoja p{color:#3a4350;margin:0;text-align:var(--al,justify);hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 2 3;word-spacing:-.01em}
.stl-anim .fig{border:1px solid #e3e8ee;border-radius:6px;background:#fbfcfe;position:relative}
.stl-anim .fig svg{position:absolute;inset:0;width:100%;height:100%}
.stl-anim .hoja .pie{color:#6c7885;text-align:left}
.stl-anim .pie b{color:#3a4350}
.stl-anim i{font-style:italic}

/* Encuadre 1: hoja entera (escena 700 × 700) */
.stl-anim--pagina .esc{width:700px;height:700px}
.stl-anim--pagina .hoja{left:62px;top:52px;width:576px;height:596px;padding:30px 38px}
.stl-anim--pagina .cab{padding-bottom:12px}
.stl-anim--pagina .logo{width:92px}
.stl-anim--pagina .tipo{font-size:11px}
.stl-anim--pagina h3{font-size:21px;margin:18px 0 4px}
.stl-anim--pagina .hoja .autor{font-size:10.5px;margin-bottom:12px}
.stl-anim--pagina .hoja p{font-size:11.2px;line-height:1.62;margin-bottom:8px}
.stl-anim--pagina .fig{height:178px;margin:6px 0 4px}
.stl-anim--pagina .hoja .pie{font-size:9.8px;margin:4px 0 10px}
.stl-anim--pagina .sello{right:52px;bottom:58px;width:218px}

/* Encuadre 2: de cerca (escena 450 × 450; margen azul igual arriba, abajo y a los lados) */
.stl-anim--cerca .esc{width:450px;height:450px}
.stl-anim--cerca .hoja{left:20px;top:20px;width:410px;height:410px;padding:18px 22px}
.stl-anim--cerca .cab{padding-bottom:7px}
.stl-anim--cerca .logo{width:64px}
.stl-anim--cerca .tipo{font-size:8.6px}
.stl-anim--cerca h3{font-size:15px;margin:10px 0 2px}
.stl-anim--cerca .hoja .autor{font-size:8.6px;margin-bottom:7px}
.stl-anim--cerca .hoja p{font-size:11.5px;line-height:1.52;margin-bottom:6px}
.stl-anim--cerca .fig{height:96px;margin:3px 0 2px}
.stl-anim--cerca .hoja .pie{font-size:8.4px;margin:2px 0 5px;line-height:1.38}
.stl-anim--cerca .sello{right:36px;bottom:30px;width:136px}

/* Correcciones: la errata se desvanece y la forma correcta ocupa su sitio (el ancho cambia poco a poco) */
.stl-anim .corr{display:inline-block;position:relative;white-space:nowrap;vertical-align:baseline;width:var(--w0);transition:width .35s ease-in-out}
.stl-anim .corr::before{content:'\200b'}
.stl-anim .corr>span{position:absolute;left:0;top:0;white-space:nowrap}
.stl-anim .corr .nuevo{opacity:0;border-radius:2px;background-image:linear-gradient(#5aa623,#5aa623);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.2px;transition:opacity .35s ease-out,background-size .4s ease-out,background-color .9s ease-out}
.stl-anim .corr .viejo{transition:opacity .3s ease-in}
.stl-anim .marca{position:absolute;width:5px;height:5px;border-radius:50%;background:#5aa623;opacity:0;transform:scale(.3);transition:opacity .3s,transform .3s}
.stl-anim.ver .corr{width:var(--w1);transition-delay:var(--d)}
.stl-anim.ver .corr .viejo{opacity:0;transition-delay:var(--d)}
.stl-anim.ver .corr .nuevo{opacity:1;background-size:100% 1.2px;transition-delay:calc(var(--d) + .12s)}
.stl-anim.ver .marca{opacity:1;transform:scale(1);transition-delay:calc(var(--d) + .35s)}

/* Figura */
.stl-anim .dib{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);transition:stroke-dashoffset var(--t,1s) ease-in-out}
.stl-anim .ap{opacity:0;transition:opacity .4s ease-out}
.stl-anim.ver .dib{stroke-dashoffset:0;transition-delay:var(--d)}
.stl-anim.ver .ap{opacity:1;transition-delay:var(--d)}

/* Sello: el de los diplomas, estampado */
.stl-anim .sello{position:absolute;opacity:0;mix-blend-mode:multiply;transform:rotate(-5deg) scale(1.35);transform-origin:50% 60%}
.stl-anim .sello img{display:block;width:100%}
.stl-anim.ver .sello{animation:stl-sello .6s ease-in var(--d) forwards}
@keyframes stl-sello{0%{opacity:0;transform:rotate(-5deg) scale(1.35)}60%{opacity:.25;transform:rotate(-7.5deg) scale(1.06)}72%{opacity:.97;transform:rotate(-8deg) scale(.985)}86%{opacity:.93;transform:rotate(-8deg) scale(1.006)}100%{opacity:.92;transform:rotate(-8deg) scale(1)}}

/* Estado final sin animación (reducir movimiento, captura fija) */
.stl-anim.fin *{transition:none!important;animation:none!important}
.stl-anim.fin .sello{opacity:.92;transform:rotate(-8deg) scale(1)}

/* Botón «volver a ver» */
.stl-anim .otra{position:absolute;left:8px;bottom:8px;width:26px;height:26px;border:0;border-radius:50%;padding:0;cursor:pointer;background:rgba(255,255,255,.88);color:#3a76b9;box-shadow:0 2px 8px rgba(20,50,90,.2);opacity:0;pointer-events:none;transition:opacity .4s}
.stl-anim .otra svg{width:14px;height:14px;display:block;margin:auto}
.stl-anim.acabada .otra{opacity:.85;pointer-events:auto}
.stl-anim .otra:hover,.stl-anim .otra:focus-visible{opacity:1}

/* v3b: marcas de margen, fase de maqueta, barras que crecen y rótulo de fases */
.stl-anim--cerca .marca{left:9px}
.stl-anim--pagina .marca{left:18px}
.stl-anim .marca.maq{left:auto;right:9px;background:#3a8fd6}
.stl-anim .aj{transform:var(--tr0,none);letter-spacing:var(--ls0,normal);word-spacing:var(--ws0,normal);text-align:var(--ta0,justify);transition:transform .6s ease-in-out,letter-spacing .6s ease-in-out,word-spacing .6s ease-in-out}
.stl-anim.ver .aj{transform:var(--tr1,none);letter-spacing:var(--ls1,normal);word-spacing:var(--ws1,normal);text-align:var(--ta1,justify);transition-delay:var(--d)}
.stl-anim .crece{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .55s ease-out}
.stl-anim.ver .crece{transform:scaleY(1);transition-delay:var(--d)}
.stl-anim .fases{position:absolute;left:20px;top:4px;height:13px;font-size:8.5px;font-weight:600;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.stl-anim .fases span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .4s}
.stl-anim .fases .f2{opacity:0}
.stl-anim.ver .fases .f1{opacity:0;transition-delay:var(--d,0s)}
.stl-anim.ver .fases .f2{opacity:1;transition-delay:var(--d)}
.stl-anim.fin.ver .fases .f1{opacity:0}

.stl-anim .va{transition:opacity .35s ease-in}
.stl-anim.ver .va{opacity:0;transition-delay:var(--d)}

.stl-anim.ver .cursor{animation:stl-parpadeo 1.1s steps(1) var(--d) infinite}
@keyframes stl-parpadeo{0%{opacity:1}50%{opacity:0}}

/* Traducción: original y traducción en el mismo sitio (la altura es la del más largo) */
.stl-anim .bi{display:grid}
.stl-anim .bi>span{grid-area:1/1}
.stl-anim .bi>.o{transition:opacity .4s ease-in}
.stl-anim .bi>.t{opacity:0;transition:opacity .5s ease-out}
.stl-anim.ver .bi>.o{opacity:0;transition-delay:var(--d)}
.stl-anim.ver .bi>.t{opacity:1;transition-delay:calc(var(--d) + .25s)}
.stl-anim .cab .tipo .bi{justify-items:end}

/* Mientras se carga el script: la caja muestra ya el fondo azul (sin la imagen final, que se vería «ya hecha»).
   La clase stl-js la pone el <head>; si el script no llega a montar la animación, se quita y se ve la imagen fija. */
.stl-anim{background:linear-gradient(135deg,#6cc0ea 0%,#4f9fdb 45%,#3a76b9 100%)}
.stl-js .stl-anim:not(.stl-anim--cerca):not(.stl-anim--pagina) .stl-anim-fija{visibility:hidden}

/* Acabada: el sello se queda puesto aunque se vuelva a medir */
.stl-anim.acabada .sello{animation:none;opacity:.92;transform:rotate(-8deg) scale(1)}

/* Redacción: notas del cliente y piezas que se ordenan en la figura */
.stl-anim .notas{display:block;font-style:italic;color:#6c7885;text-align:left;line-height:1.5}
.stl-anim .mueve{transform-box:fill-box;transform-origin:center;transform:var(--tr0,none);transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.stl-anim.ver .mueve{transform:none;transition-delay:var(--d)}

/* Escaparate de las páginas con todos los servicios (11/11/2026) */
.stl-escaparate{width:100%;max-width:520px;margin:0 auto}
.stl-esc-escena{position:relative;width:100%;aspect-ratio:1/1}
.stl-esc-escena .stl-anim{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.stl-esc-escena .stl-anim.activa{opacity:1;visibility:visible;transition:opacity .5s ease}
.stl-escaparate .stl-anim .otra{display:none}
.stl-esc-controles{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.stl-esc-controles button{flex:none;width:34px;height:34px;border:0;border-radius:50%;padding:0;cursor:pointer;background:rgba(255,255,255,.2);color:#fff;transition:background .2s}
.stl-esc-controles button:hover,.stl-esc-controles button:focus-visible{background:rgba(255,255,255,.38)}
.stl-esc-controles button svg{width:16px;height:16px;display:block;margin:auto}
.stl-esc-nombre{flex:1;min-width:0;text-align:center;color:#fff;font-size:15px;font-weight:600;line-height:1.35;text-decoration:none}
.stl-esc-nombre:hover,.stl-esc-nombre:focus-visible{text-decoration:underline;text-underline-offset:3px;color:#fff}
.stl-esc-puntos{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:8px}
.stl-esc-puntos button{width:18px;height:18px;border:0;padding:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.stl-esc-puntos button::before{content:'';width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s}
.stl-esc-puntos button.activo::before{background:#fff;transform:scale(1.3)}
.stl-esc-puntos button:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:50%}
#intro-servicio .listado-servicios a.stl-activo{color:#0c2435;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (prefers-reduced-motion: reduce){.stl-esc-escena .stl-anim{transition:none}}

/* Miniatura de cada servicio en las cajas de la página con todos los servicios (11/11/2026) */
#descripcion-servicios .stl-mini{display:block;width:220px;max-width:100%;margin:0 auto 18px;border-radius:6px;overflow:hidden;box-shadow:0 8px 22px rgba(20,50,90,.16);transition:transform .25s,box-shadow .25s}
#descripcion-servicios .stl-mini img{display:block;width:100%;height:auto}
#descripcion-servicios .stl-mini:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,50,90,.22)}
@media (max-width:768px){#descripcion-servicios .stl-mini{width:170px;margin-top:10px}}
@media (prefers-reduced-motion: reduce){#descripcion-servicios .stl-mini{transition:none}#descripcion-servicios .stl-mini:hover{transform:none}}

/* Portada: escaparates en los bloques de Revisión y de Traducción (11/11/2026) */
.panel.servicio .imagen:has(.stl-esc-portada){display:flex;align-items:center;justify-content:center}
.stl-esc-portada{max-width:400px}
.stl-esc-portada .stl-esc-nombre{font-size:14px}
.panel.servicio .caja-texto .texto a.stl-activo{border-bottom-color:#fff;background-color:rgba(255,255,255,.16)}