/* ZOVAMI · «De una idea al producto»: fondo claro y naranja, con Zovi en el hero (hero.js). html.quieto = sin movimiento (botón del hero). */
:root{
  --fondo:#f5f1ea;--fondo-2:#ffffff;--texto:#1b1714;--tenue:#5a534c;--linea:#e3dbcf;--pista:#c9bfb0;
  --acento:#f26412;--acento-luz:#ff7a1a;--acento-2:#c2410c;--sobre-acento:#140a04;
  --vidrio:color-mix(in srgb,#fff 72%,transparent);--acento-texto:#c2410c;--acento-2-texto:#9a3412;
  --f:"Archivo",Arial,Helvetica,sans-serif;--acento-letra:"Instrument Serif",Georgia,serif;--mono:"JetBrains Mono",Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--fondo)}
body{margin:0;color:var(--texto);font-family:var(--f);font-size:16px;line-height:1.5;overflow-x:clip}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--acento);outline-offset:4px}
h1,h2,h3,p{margin:0}
[id]{scroll-margin-top:84px}
.wrap{width:min(1200px,88%);margin:auto}
.saltar{position:absolute;left:-200px;top:12px;background:var(--fondo-2);z-index:80;padding:8px}
.saltar:focus{left:12px}

/* Barra y pie */
.cabecera{position:sticky;top:0;z-index:20;background:var(--fondo);border-bottom:1px solid color-mix(in srgb,var(--linea) 70%,transparent)}
footer{border-top:1px solid var(--linea)}
.barra{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-stretch:125%;letter-spacing:.1em;font-size:20px}
.isotipo{width:36px;height:36px;flex-shrink:0}
.iso-hex{fill:none;stroke:var(--acento);stroke-width:3}
.iso-z{fill:none;stroke:var(--texto);stroke-width:4.5;stroke-linecap:square}
nav{display:flex;gap:29px;padding:9px 24px;border:1px solid var(--linea);border-radius:999px;background:#ffffff8c}
nav a,.hablemos,.sec{text-decoration:none;font-size:14px}
nav a:hover{color:var(--acento-texto)}
.hablemos{color:var(--sobre-acento);background:var(--acento);font-weight:650;border-radius:999px;padding:9px 18px}
.hablemos:hover{filter:brightness(1.06)}
.hablemos span,.boton span{margin-left:10px}
footer .barra{min-height:64px}
footer{padding-bottom:48px}
footer a{font-size:14px}

/* Rótulos y botones */
.rotulo,small{font:600 11px/1.5 var(--mono);letter-spacing:.13em}
.rotulo{display:flex;align-items:center;gap:10px;color:var(--tenue)}
.rotulo i{width:28px;height:2px;background:var(--acento)}
small{color:var(--acento-texto)}
em{font-family:var(--acento-letra);font-style:italic;font-weight:400;letter-spacing:-.01em}
.boton{display:inline-block;color:var(--sobre-acento);background:var(--acento);padding:14px 22px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 10px 28px -10px color-mix(in srgb,var(--acento) 70%,transparent);transition:filter .2s,box-shadow .6s,transform .3s}
.boton:hover{filter:brightness(1.06);transform:translateY(-1px)}
.sec{border:1px solid color-mix(in srgb,var(--texto) 20%,transparent);border-radius:999px;padding:13px 20px}
.sec:hover{border-color:var(--acento)}
.acciones{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:30px}

/* Hero: escena fija mientras se recorre la sección; capas de fondo a frente: palabra gigante, Zovi, chispas, texto */
.hero{position:relative;height:420vh;margin-top:-72px}
.escena{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1400px}
.palabras{position:absolute;inset:0;will-change:transform}
.palabra{position:absolute;right:-2vw;top:50%;transform:translateY(-56%);font-weight:900;font-stretch:125%;font-size:27vw;line-height:.8;letter-spacing:-.05em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--acento) 35%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 22%,transparent),color-mix(in srgb,var(--acento) 4%,transparent));-webkit-background-clip:text;background-clip:text;
  opacity:0;transition:opacity .8s,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.palabra.ver{opacity:1;transform:translateY(-50%)}
.palabra:nth-child(3){font-size:12.5vw;right:1vw}
/* El video tiene su propio fondo claro: con multiply se funde con la página y deja ver la palabra de atrás */
.zovi{position:absolute;inset:0;will-change:transform;mix-blend-mode:multiply}
.zovi-video,.zovi-quieto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(.86);transform-origin:72% 100%}
/* Bordes fundidos con el color de la página. Una máscara haría lo mismo, pero se recalcula en cada cuadro. */
.zovi::after{content:"";position:absolute;inset:0;pointer-events:none;transform:scale(.86);transform-origin:72% 100%;
  background:linear-gradient(90deg,var(--fondo) 0,transparent 18%,transparent 90%,var(--fondo) 99%),linear-gradient(var(--fondo) 0,transparent 14%)}
.zovi-quieto{display:none}
.chispas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.velo{position:absolute;inset:0;background:linear-gradient(90deg,var(--fondo) 0%,color-mix(in srgb,var(--fondo) 80%,transparent) 32%,transparent 56%);pointer-events:none}
.hero-texto{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:40px;will-change:transform}
.pasos-hero{position:relative;height:clamp(300px,40vh,420px);width:min(660px,48vw)}
.paso{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.paso .rotulo{margin-bottom:22px}
.titulo{font-size:clamp(52px,6.4vw,104px);font-weight:800;font-stretch:112%;line-height:.96;letter-spacing:-.045em;perspective:900px}
.chico .titulo{font-size:clamp(42px,4.4vw,70px)}
.titulo em{color:var(--acento);font-size:1.07em;letter-spacing:-.02em}
.bajada{margin-top:22px;max-width:470px;color:var(--tenue);font-size:17.5px}
.hero .acciones{margin-top:18px}
/* Entrada palabra por palabra: cada una gira desde abajo, en 3D; las que se van salen hacia arriba */
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.pal>span{display:inline-block;transform-origin:50% 100%;transform:translateY(105%) rotateX(-80deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .5s;transition-delay:calc(var(--i)*55ms)}
.paso .rotulo,.paso .bajada{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*1ms)}
.paso.ver .pal>span{transform:none;opacity:1}
.paso.ver .rotulo,.paso.ver .bajada{opacity:1;transform:none}
.paso:not(.ver) .pal>span{transition-delay:0s;transition-duration:.35s;transform:translateY(-60%) rotateX(60deg)}
.paso:not(.ver) .rotulo,.paso:not(.ver) .bajada{transition-delay:0s;transition-duration:.3s}
.avance{position:absolute;left:max(6vw,calc((100vw - 1200px)/2));bottom:34px;display:flex;align-items:center;gap:14px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7a726a}
.avance b{display:block;width:160px;height:2px;background:color-mix(in srgb,var(--texto) 12%,transparent);position:relative}
.avance b i{position:absolute;left:0;top:0;height:100%;width:var(--p,0%);background:var(--acento)}

/* Secciones */
.seccion{padding:110px 0}
.seccion h2,.pie h2{font-size:clamp(34px,3.8vw,60px);font-weight:750;line-height:1.05;letter-spacing:-.05em;margin:12px 0 34px}
.servicios article,.muestra,.proyectos article,.invitacion{background:var(--vidrio);border:1px solid var(--linea);border-radius:20px;box-shadow:0 1px 0 #fff inset,0 24px 50px -36px #5a3a1f55}
.cabeza-con-zovi{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cabeza-con-zovi h2{margin-bottom:46px}
.zovi-pose{display:block;height:auto}
.cabeza-con-zovi .zovi-pose{width:min(190px,22vw);margin-bottom:-6px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

/* Servicios: tarjetas de vidrio con un borde que brilla donde está el mouse (y la destacada, con un brillo que gira) */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.servicios article{position:relative;padding:24px 22px 26px;isolation:isolate}
.servicios article::before,.servicios article::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none}
.servicios article::before{padding:1.5px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--acento),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s}
.servicios article::after{z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--acento-luz) 12%,transparent),transparent 70%);opacity:0;transition:opacity .4s}
.servicios article:hover::before,.servicios article:hover::after{opacity:1}
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
.servicios article.destacado::before{opacity:1;background:conic-gradient(from var(--giro),transparent 0 62%,var(--acento) 80%,var(--acento-luz) 88%,transparent 96%);animation:giro 5s linear infinite}
.servicios article.destacado{background:color-mix(in srgb,#fff 82%,var(--acento) 6%)}
@keyframes giro{to{--giro:360deg}}
.servicios h3{margin:10px 0;font-size:21px;font-weight:700;letter-spacing:-.035em}
.servicios p{color:var(--tenue);font-size:15px;line-height:1.55}
.servicios a{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--acento-texto)}

/* Profundidad 3D: las tarjetas se paran al entrar (scroll) y se inclinan hacia el mouse */
.servicios,.proyectos,.productos .wrap{perspective:1300px}
@property --ix{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --iy{syntax:"<angle>";inherits:false;initial-value:0deg}
[data-inclinar]{transform-origin:50% 100%;transform:rotateX(var(--ix,0deg)) rotateY(var(--iy,0deg));transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .3s}
@supports (animation-timeline:view()){
  .animado [data-inclinar]{animation:pararse linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
}
@keyframes pararse{from{opacity:0;rotate:x 32deg;translate:0 90px;scale:.9}to{opacity:1;rotate:x 0deg;translate:0 0;scale:1}}

/* Productos: cada muestra tiene inicio, resultado, pausa y enlace */
.muestra{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:34px;align-items:center;margin-top:26px;padding:22px}
.muestra.invertida{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.muestra.invertida .pantalla{order:2}
.pantalla{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:var(--fondo-2);border:1px solid var(--linea)}
.pantalla.aula{aspect-ratio:1366/768}
.encuadre{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.5s cubic-bezier(.65,0,.35,1)}
.encuadre video,.encuadre img{position:absolute;inset:0;width:100%;height:100%;display:block}
.encuadre img{opacity:0;transition:opacity .7s ease}
.encuadre img:first-child{opacity:1}
.encuadre.guiado img{opacity:0}
.encuadre.guiado img.actual{opacity:1}
.etiqueta-demo,.fase{position:absolute;font:600 10.5px/1 var(--mono);letter-spacing:.04em;padding:6px 8px;border-radius:4px}
.etiqueta-demo{left:10px;bottom:10px;background:#1b1714d9;color:#f5f1ea}
.fase{right:10px;top:10px;background:var(--acento);color:var(--sobre-acento);opacity:0;transition:opacity .4s}
.fase:not(:empty){opacity:1}
.info .estado{font:600 11px/1.5 var(--mono);color:var(--acento-texto)}
.info .edu{color:var(--acento-2-texto)}
.info h3{display:flex;align-items:center;gap:12px;font-size:32px;font-weight:750;letter-spacing:-.045em;line-height:1.2;margin:8px 0}
img.app{width:40px;height:40px;border-radius:11px;flex-shrink:0;box-shadow:0 8px 20px -10px #5a3a1f99}
.info p{color:var(--tenue);font-size:15px;line-height:1.55}
.pasos{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:4px}
.pasos button{width:100%;text-align:left;background:none;border:0;border-left:2px solid var(--linea);padding:6px 0 6px 13px;font:inherit;font-size:14.5px;color:var(--tenue);cursor:pointer;transition:border-color .3s,color .3s}
.pasos button:hover{color:var(--texto)}
.pasos button[aria-current="step"]{border-color:var(--acento);color:var(--texto);font-weight:650}
.pasos b{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acento-texto);margin-right:6px}
.controles{display:flex;align-items:center;gap:12px;margin-top:14px}
.reproducir{border:1px solid var(--linea);background:var(--fondo-2);border-radius:999px;padding:6px 14px;font:600 13px var(--f);color:var(--texto);cursor:pointer;min-width:90px}
.progreso{position:relative;flex:1;height:2px;background:var(--linea);overflow:hidden}
.progreso i{position:absolute;inset:0;background:var(--acento);transform-origin:left;transform:scaleX(var(--p,0))}
.ir{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--acento-texto)}
.invitacion{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px;padding:22px 26px}
.invitacion p{max-width:640px;font-size:15.5px;color:var(--tenue)}
.invitacion strong{color:var(--texto)}
.invitacion .boton{flex-shrink:0}

/* Cuaderno del estudio: cada proyecto con su gesto */
.proyectos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proyectos article{padding:14px 14px 20px}
.foto{position:relative;height:160px;border-radius:12px;overflow:hidden;background:var(--fondo-2)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.ruta{position:absolute;inset:0;width:100%;height:100%}
.ruta path{fill:none;stroke:var(--acento);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px var(--acento))}
.ruta circle{fill:var(--acento);opacity:0;transition:opacity .5s 3.2s}
.copiloto.vista .ruta path{animation:trazo 3.2s cubic-bezier(.45,0,.25,1) .3s forwards}
.copiloto.vista .ruta circle{opacity:1}
@keyframes trazo{to{stroke-dashoffset:0}}
.edades .foto img{transform:scale(1.32) translateX(9%);transform-origin:50% 55%}
.edades.vista .foto img{animation:recorrido 11s ease-in-out infinite alternate}
.edades:not(.en-pantalla) .foto img{animation-play-state:paused}
@keyframes recorrido{0%{transform:scale(1.32) translateX(9%)}55%{transform:scale(1.4) translate(-3%,-3%)}100%{transform:scale(1.32) translate(-9%,2%)}}
.aura .foto img{object-fit:contain;filter:saturate(.55)}
.en-pausa{position:absolute;top:10px;right:10px;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#f5f1ea;background:#1b1714e0;border:1px solid #ffffff40;padding:6px 8px;border-radius:4px}
.proyectos small{display:block;margin-top:15px}
.proyectos h3{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:750;letter-spacing:-.045em;line-height:1.2;margin:7px 0}
.proyectos img.app{width:34px;height:34px;border-radius:9px}
.proyectos p,.proyectos details{color:var(--tenue);font-size:15px;line-height:1.55}
.proyectos details{font-size:12px;margin-top:8px}
.proyectos details p{font-size:12px}

/* Contacto: Zovi señala el botón; la línea del recorrido termina en «Contanos tu proyecto» */
.pie{padding:120px 0 90px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px}
.pie h2{margin:12px 0 16px}
.pie h2 em{color:var(--acento)}
.pie p{color:var(--tenue);max-width:460px}
.pie .senala{width:min(330px,30vw);margin-bottom:-90px;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.boton.destino.llego{box-shadow:0 0 0 6px color-mix(in srgb,var(--acento) 22%,transparent),0 12px 34px -10px var(--acento)}
main{position:relative}
.recorrido{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:visible}
.recorrido path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.recorrido-guia{stroke:color-mix(in srgb,var(--acento) 20%,transparent);stroke-width:1}
.recorrido-luz{stroke:var(--acento);stroke-width:2;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--acento) 60%,transparent))}

/* Títulos de sección palabra por palabra y revelado elíptico de las pantallas (ver herramientas/NOTAS-MOVIMIENTO.md) */
.x-titulo .x-palabra{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 60ms)}
.x-titulo.x-entra .x-palabra{opacity:1;transform:none;filter:none}
.x-elipse{clip-path:ellipse(14% 10% at 50% 55%);transition:clip-path 1.4s cubic-bezier(.22,1,.36,1)}
.x-elipse.x-abierta{clip-path:ellipse(140% 140% at 50% 55%)}

/* Cursor: un punto exacto y un aro que, sobre cada producto, se convierte en el ícono de su app */
html.cursor-propio,html.cursor-propio *{cursor:none!important}
.cursor-punto,.cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor-propio .cursor-punto,.cursor-propio .cursor{opacity:1}
.cursor-punto{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 2px color-mix(in srgb,var(--fondo) 60%,transparent)}
.cursor{width:0;height:0}
.cursor-aro{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--texto) 45%,transparent);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s,background .3s,border-color .3s}
.cursor.enlace .cursor-aro{transform:scale(1.45);background:color-mix(in srgb,var(--acento) 14%,transparent);border-color:var(--acento)}
.cursor-app{position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:9px;overflow:hidden;opacity:0;transform:scale(.3);
  box-shadow:0 8px 18px -8px #5a3a1fb0,0 0 0 1px color-mix(in srgb,var(--texto) 18%,transparent);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.cursor-app img{width:100%;height:100%;display:block}
.cursor.app .cursor-app{opacity:1;transform:none}
.cursor.app .cursor-aro{opacity:0;transform:scale(1.9)}
.cursor-etiqueta{position:absolute;left:52px;top:16px;white-space:nowrap;font:600 11px/1 var(--mono);letter-spacing:.05em;color:var(--sobre-acento);background:var(--acento);padding:6px 9px;border-radius:999px;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.cursor.app .cursor-etiqueta{opacity:1;transform:none}
.cursor.izquierda .cursor-app{left:-44px}
.cursor.izquierda .cursor-etiqueta{left:auto;right:52px}

/* Pausar las chispas del hero (movimiento automático) */
.pausa,.activar{background:color-mix(in srgb,#fff 92%,transparent);color:var(--texto);border:1px solid var(--linea);border-radius:999px;padding:7px 14px;font:600 12px var(--f);cursor:pointer}
.pausa{position:fixed;right:14px;bottom:14px;z-index:65}
.activar{position:absolute;top:88px;right:16px;z-index:2}
.pausa:hover,.activar:hover{border-color:var(--acento)}

@media (max-width:1100px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  :root{--vidrio:color-mix(in srgb,#fff 86%,transparent)}
  .wrap{width:90%}
  nav{display:none}
  .barra{min-height:60px}
  [id]{scroll-margin-top:68px}
  /* Hero en el celular: Zovi arriba, el texto abajo */
  .hero{height:370vh;margin-top:-60px}
  .zovi-video,.zovi-quieto{transform:none;object-position:74% 50%}
  .zovi::after{transform:none;background:linear-gradient(var(--fondo) 0,transparent 12%,transparent 82%,var(--fondo))}
  .palabra{top:30%;font-size:38vw}
  .palabra:nth-child(3){font-size:19vw}
  .velo{background:linear-gradient(0deg,var(--fondo) 30%,color-mix(in srgb,var(--fondo) 70%,transparent) 44%,transparent 58%)}
  .hero-texto{justify-content:flex-end;padding:0 0 72px}
  .pasos-hero{width:100%;height:220px}
  .paso{top:auto;bottom:0;transform:none}
  .titulo{font-size:clamp(40px,11.5vw,56px)}
  .chico .titulo{font-size:clamp(32px,8.6vw,42px)}
  .bajada{font-size:15.5px;margin-top:12px}
  .chico .bajada{display:none}
  .avance{bottom:24px;left:5vw}
  .avance b{width:90px}
  .avance-texto{display:none}
  .zovi{inset:3% 0 40% 0}
  .hero .acciones{flex-wrap:nowrap;gap:10px}
  .hero .boton,.hero .sec{padding:12px 16px;font-size:14px;white-space:nowrap}
  .acciones{gap:12px;margin-top:20px}
  .seccion{padding:64px 0}
  .servicios,.proyectos{grid-template-columns:1fr;gap:16px}
  .cabeza-con-zovi .zovi-pose{width:110px}
  .muestra,.muestra.invertida{grid-template-columns:1fr;gap:18px;padding:14px}
  .muestra.invertida .pantalla{order:0}
  .info h3{font-size:28px}
  .invitacion{flex-direction:column;align-items:flex-start;padding:20px}
  .foto{height:170px}
  .pie{grid-template-columns:1fr;padding:70px 0 30px}
  .pie .senala{width:200px;justify-self:end;margin:-10px 0 -30px}
  footer .barra{flex-wrap:wrap;padding:12px 0}
  .pausa{right:12px;bottom:12px;padding:6px 11px;font-size:11px}
  .activar{top:72px;left:12px;right:auto;padding:6px 11px;font-size:11px}
}

/* Sin movimiento: el hero avanza por capas (tres imágenes fijas que cambian con el scroll), sin video ni chispas; lo demás queda quieto y completo */
html.quieto{scroll-behavior:auto}
html.quieto *,html.quieto *::before,html.quieto *::after{animation:none!important;transition:none!important}
html.quieto .hero{height:300vh}
html.quieto .zovi-video,html.quieto .chispas{display:none}
html.quieto .zovi-quieto{display:block;visibility:hidden}
html.quieto .zovi-quieto.ver{visibility:visible}
html.quieto .x-titulo .x-palabra{opacity:1;transform:none;filter:none}
html.quieto .ruta path{stroke-dashoffset:0}
html.quieto .ruta circle{opacity:1}
html.quieto .x-elipse{clip-path:none}