/* ============================================================
   NIUXER — Movimiento del Inicio (17/10/2026)
   Lo carga solo index.html. Todo cuelga de html.mq (la pone
   js/movimiento.js). Por qué está hecho así: cabecera de
   js/movimiento.js y niuxer-docs/maqueta-web/LEEME.md.
   ============================================================ */

/* Lo que mete la maqueta no existe en «Antes». */
.mq-grano,.mqh,.mq-muro,.mq-muro__velo,.mq-barrido,.mq-idx,.mq-scan,.mq-hilo,.mq-circuito,.mq-carta__luz,.mq-marco,.mq-banda,.mq-curvas{display:none}

html.mq,html.mq-sub{
  --mq-linea:rgba(167,139,250,.5);
  --mq-mono:"JetBrains Mono",ui-monospace,monospace;
  --mq-expo:cubic-bezier(.16,1,.3,1);          /* sale rápido y frena suave */
  --mq-muelle:cubic-bezier(.34,1.45,.64,1);    /* se pasa un poco y vuelve */
  --mq-curva:cubic-bezier(.65,0,.35,1);
}

html.mq .mq-grano,html.mq-sub .mq-grano{
  display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:720px){
  html.mq .section:not(.capas__encima):not(.capas__debajo),html.mq-sub .section{padding-block:52px}
}
html.mq .mq-idx{display:block;position:absolute;z-index:2;font:500 10px/1 var(--mq-mono);letter-spacing:.16em;color:var(--faint);pointer-events:none}
.mq-idx em{font-style:normal;color:var(--pink)}
html.mq .mq-esq{position:absolute;width:20px;height:20px;border:0 solid rgba(255,255,255,.55)}
html.mq .mq-esq--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
html.mq .mq-esq--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
html.mq .mq-esq--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}

/* ============================================================
   1. PORTADA — cinco pantallas que se turnan
   ============================================================ */
html.mq .hero__video{opacity:0}
html.mq .hero__content > .badge,html.mq .hero__content > .lead{display:none}
html.mq .hero__content{max-width:none;margin-top:clamp(34px,5vw,64px)}

/* Fondo: la pared de trabajos reales, muy tenue, moviéndose despacio */
html.mq .mq-muro{
  display:flex;position:absolute;inset:-10% -30%;z-index:0;pointer-events:none;
  flex-direction:column;justify-content:center;gap:12px;transform:rotate(-8deg);opacity:.15;
}
.mq-muro__pista{display:flex;gap:12px;width:max-content;animation:mqMuro 90s linear infinite}
.mq-muro__fila:nth-child(even) .mq-muro__pista{animation-direction:reverse;animation-duration:110s}
.mq-muro img{height:clamp(120px,14vw,190px);width:auto;flex:none;border-radius:12px;filter:grayscale(1)}
@keyframes mqMuro{to{transform:translate3d(-50%,0,0)}}
html.mq .mq-muro__velo{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 50% 45%,rgba(7,5,14,.35),rgba(7,5,14,.92) 80%),
    linear-gradient(180deg,rgba(7,5,14,.6),transparent 25%,transparent 70%,var(--bg));
}
/* La luz que cruza la portada en cada cambio */
html.mq .mq-barrido{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 38%,rgba(167,139,250,.10) 47%,rgba(236,72,153,.16) 50%,rgba(167,139,250,.08) 53%,transparent 62%);
}
html.mq .mq-barrido.is-pasa{animation:mqBarrido 1.2s var(--mq-curva)}
@keyframes mqBarrido{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* En el móvil, lo primero que se ve es la animación; debajo, el titular y
   pegados a él los botones (lo pidió David el 17/10: «no se ve lo que es
   más llamativo»). En ordenador, texto a la izquierda y animación a la derecha. */
html.mq .mqh{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"pasos" "visual" "texto";gap:18px;
  position:relative;z-index:2;text-align:left;
}
.mqh__cabeza{grid-area:pasos}
.mqh__visual{grid-area:visual}
.mqh__izq{grid-area:texto}
@media (min-width:980px){
  html.mq .mqh{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr);grid-template-areas:"pasos visual" "texto visual";
    grid-template-rows:auto 1fr;column-gap:36px;row-gap:0;align-items:start;
  }
  .mqh__visual{align-self:center}
}
/* Con la animación arriba, el texto se apoya abajo, junto a los botones:
   si una pantalla tiene menos texto, el aire queda arriba y no antes de los botones. */
@media (max-width:979px){
  .mqh__escenas .mqh__esc{top:auto;bottom:0}
  /* menos margen arriba para que el primer botón entre en la pantalla */
  html.mq .hero{padding-top:calc(var(--nav-h) + 22px)}
  /* en ADS caben dos avisos; el tercero tapaba las etiquetas */
  .mq-aviso:nth-child(3){display:none}
  .mq-avisos{top:4%}
}
/* Móviles bajitos: la animación algo más pequeña para que el titular entre */
@media (max-width:979px) and (max-height:760px){
  .mqh__visual{height:258px}
  .mqx{--mw:114px;--fw:116px}
  .mq-f--a{--fx:-90px;--fy:-90px}
  .mq-f--b{--fx:92px;--fy:-48px}
  .mq-f--c{--fx:-92px;--fy:42px}
  .mq-f--d{--fx:90px;--fy:86px}
  .mq-aviso{padding:9px 12px}
}

/* --- la barrita tipo «historias» --- */
.mqh__pasos{display:flex;gap:8px;flex:1;min-width:0}
.mqh__paso{flex:1;display:flex;flex-direction:column;gap:8px;padding:6px 0;text-align:left;cursor:pointer}
.mqh__paso i{position:relative;display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.mqh__paso i::after{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left}
.mqh__paso.is-hecho i::after{transform:none}
.mqh__paso.is-on i::after{animation:mqLlena var(--dur,9s) linear forwards}
.mqh-pausa .mqh__paso.is-on i::after{animation-play-state:paused}
@keyframes mqLlena{to{transform:none}}
.mqh__paso span{font:500 10px/1 var(--mq-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);transition:color .3s}
.mqh__paso.is-on span,.mqh__paso:hover span{color:#fff}
.mqh__paso:focus-visible{outline:2px solid var(--lila);outline-offset:4px;border-radius:4px}

/* --- las pantallas de texto, una encima de otra --- */
.mqh__escenas{position:relative}
.mqh__esc{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
.mqh__esc.is-on{visibility:visible;pointer-events:auto}
.mqh__esc.is-fuera{visibility:visible}

.mqh__ceja{
  display:inline-flex;align-items:center;gap:12px;
  font:500 11px/1 var(--mq-mono);letter-spacing:.2em;text-transform:uppercase;color:#d6cdef;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .7s var(--mq-expo);
}
.mqh__ceja i{width:28px;height:1px;background:var(--grad);box-shadow:0 0 8px rgba(217,38,169,.8);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--mq-curva) .2s}
.is-on .mqh__ceja{opacity:1;transform:none}
.is-on .mqh__ceja i{transform:none}

/* El titular: cada palabra sube desde su ranura, una detrás de otra */
.mqh__titulo{
  margin:16px 0 18px;max-width:12.5em;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.35rem,4.7vw,4.1rem);line-height:1.03;letter-spacing:-.035em;color:#f5f2fc;
}
.mqm{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .03em .16em;margin:-.1em -.03em -.16em}
/* Las palabras esperan bien abajo (y transparentes) para que ni una tilde ni una «g» asome por la ranura. */
.mqm > span{display:inline-block;opacity:0;transform:translate3d(0,135%,0);transition:transform 1s var(--mq-expo) calc(var(--k) * 45ms + .12s),opacity 0s linear calc(var(--k) * 45ms + .12s)}
.is-on .mqm > span{opacity:1;transform:none}
.is-fuera .mqm > span{opacity:0;transform:translate3d(0,-135%,0);transition:transform .55s var(--mq-curva) calc(var(--k) * 18ms),opacity .35s ease calc(var(--k) * 18ms)}
.mqh__esc:not(.is-on):not(.is-fuera) .mqm > span{transition:none}
.mqh__titulo em{font-style:normal}
.mqh__titulo em .mqm > span{
  background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 6s linear infinite;
}

.mqh__texto{
  max-width:31em;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;color:var(--muted);
  opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .9s var(--mq-expo);
}
.is-on .mqh__texto{opacity:1;transform:none;transition-delay:.5s}
.is-fuera .mqh__ceja,.is-fuera .mqh__texto{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .5s var(--mq-curva)}

html.mq .mqh .hero__actions{justify-content:flex-start;margin-top:30px}

/* --- la parte visual de cada pantalla --- */
.mqh__visual{position:relative;height:296px}
@media (min-width:980px){.mqh__visual{height:560px}}
.mqx{position:absolute;inset:0;visibility:hidden;perspective:1200px;--mw:130px;--fw:124px}
@media (min-width:980px){.mqx{--mw:200px;--fw:188px}}
.mqx.is-on,.mqx.is-fuera{visibility:visible}
.mqx.is-fuera{opacity:0;transition:opacity .45s ease}

.mq-trio{
  position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(8deg) rotateY(-12deg);animation:mqVaiven 9s ease-in-out infinite alternate;
}
@keyframes mqVaiven{from{transform:rotateX(9deg) rotateY(-17deg)}to{transform:rotateX(5deg) rotateY(-5deg)}}

.mq-movil{
  position:absolute;left:calc(var(--mw) / -2);top:calc(var(--mw) * -1.025);
  width:var(--mw);height:calc(var(--mw) * 2.05);
  padding:calc(var(--mw) * .04);border-radius:calc(var(--mw) * .17);
  background:linear-gradient(160deg,#2c2544,#0c0a14 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 50px 90px -30px rgba(0,0,0,.9),0 0 80px -24px rgba(139,92,246,.7);
  opacity:0;
}
.mq-movil::before{
  content:"";position:absolute;z-index:2;left:50%;top:calc(var(--mw) * .075);width:30%;height:calc(var(--mw) * .065);
  transform:translateX(-50%);border-radius:99px;background:#000;
}
.mq-movil > img,.mq-movil > video,.mq-pantalla{display:block;width:100%;height:100%;border-radius:calc(var(--mw) * .13);object-fit:cover}
.mq-movil--centro{transform:translate3d(0,90px,0) rotateX(28deg);transition:opacity .5s ease,transform 1.1s var(--mq-expo)}
.is-on .mq-movil--centro{opacity:1;transform:none;transition-delay:.15s}
.mq-movil--izq,.mq-movil--der{transform:translate3d(0,0,-60px) scale(.9);transition:opacity .5s ease,transform 1.1s var(--mq-expo)}
.is-on .mq-movil--izq{opacity:1;transform:translate3d(calc(var(--mw) * -.78),14px,-80px) rotateY(24deg) rotateZ(-4deg) scale(.88);transition-delay:.55s}
.is-on .mq-movil--der{opacity:1;transform:translate3d(calc(var(--mw) * .78),14px,-80px) rotateY(-24deg) rotateZ(4deg) scale(.88);transition-delay:.65s}

/* Mini web que se monta dentro del móvil */
.mq-pantalla{
  position:relative;overflow:hidden;background:#100c1c;
  display:flex;flex-direction:column;gap:calc(var(--mw) * .04);
  padding:calc(var(--mw) * .16) calc(var(--mw) * .06) calc(var(--mw) * .06);
}
.mq-web__b{opacity:0;transform:translateY(10px) scale(.7);transition:opacity .4s ease,transform .6s var(--mq-muelle)}
.is-on .mq-web__b{opacity:1;transform:none;transition-delay:calc(.7s + var(--i) * .1s)}
.mq-web__dir{display:flex;align-items:center;gap:5px;height:calc(var(--mw) * .11);padding:0 8px;border-radius:99px;background:rgba(255,255,255,.09);font:500 calc(var(--mw) * .052)/1 var(--font-body);color:#e9e3fb}
.mq-web__dir svg{width:calc(var(--mw) * .06);height:calc(var(--mw) * .06);fill:none;stroke:currentColor;stroke-width:1.8}
.mq-web__nav{display:flex;align-items:center;gap:6px}
.mq-web__nav i{width:calc(var(--mw) * .07);height:calc(var(--mw) * .07);border-radius:50%;background:var(--grad);margin-right:auto}
.mq-web__nav span{width:calc(var(--mw) * .1);height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.mq-web__foto img,.mq-web__rejilla img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--mw) * .05)}
.mq-web__foto{height:calc(var(--mw) * .6)}
.mq-web__tit{height:calc(var(--mw) * .05);width:88%;border-radius:3px;background:rgba(255,255,255,.88)}
.mq-web__tit--corto{width:58%;background:rgba(255,255,255,.4)}
.mq-web__boton{height:calc(var(--mw) * .12);border-radius:99px;background:var(--grad);display:flex;align-items:center;justify-content:center;font:700 calc(var(--mw) * .056)/1 var(--font-body);color:#fff;box-shadow:0 6px 18px -6px rgba(217,38,169,.8)}
.mq-web__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--mw) * .035);height:calc(var(--mw) * .42)}

/* Los servicios que salen de la pantalla hacia delante */
.mq-ficha{
  position:absolute;left:calc(var(--fw) / -2);top:-26px;width:var(--fw);
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:9px;
  padding:9px 11px;border-radius:15px;
  background:linear-gradient(180deg,rgba(46,38,72,.96),rgba(20,16,34,.96));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 26px 44px -16px rgba(0,0,0,.85),0 0 36px -10px rgba(217,38,169,.65);
  opacity:0;transform:translate3d(0,0,0) scale(.3);
  transition:opacity .3s ease,transform .5s var(--mq-expo);
}
.is-on .mq-ficha{
  opacity:1;transform:translate3d(var(--fx),var(--fy),80px) scale(1);
  transition:opacity .25s ease calc(1.45s + var(--i) * .15s),transform .95s var(--mq-muelle) calc(1.45s + var(--i) * .15s);
  animation:mqFlota 4.5s ease-in-out calc(2.6s + var(--i) * .4s) infinite alternate;
}
@keyframes mqFlota{from{translate:0 0}to{translate:0 -7px}}
.mq-ficha i{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -4px rgba(217,38,169,.8)}
.mq-ficha svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mq-ficha b{font:700 12px/1.15 var(--font-display);color:#fff}
.mq-ficha small{font-size:10.5px;line-height:1.25;color:#cfc6e6}
.mq-f--a{--fx:-96px;--fy:-104px}
.mq-f--b{--fx:98px;--fy:-56px}
.mq-f--c{--fx:-100px;--fy:50px}
.mq-f--d{--fx:96px;--fy:100px}
@media (min-width:980px){
  .mq-ficha{padding:12px 14px;column-gap:12px}
  .mq-ficha i{width:40px;height:40px;border-radius:12px}
  .mq-ficha svg{width:22px;height:22px}
  .mq-ficha b{font-size:15px}
  .mq-ficha small{font-size:12px}
  .mq-f--a{--fx:-180px;--fy:-150px}
  .mq-f--b{--fx:190px;--fy:-62px}
  .mq-f--c{--fx:-185px;--fy:68px}
  .mq-f--d{--fx:190px;--fy:160px}
}

/* Etiquetas que saltan (en vídeo, webs y ADS) */
.mq-chips{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0;z-index:3}
.mq-chips li{
  padding:8px 14px;border-radius:999px;font:500 11px/1 var(--mq-mono);letter-spacing:.12em;text-transform:uppercase;color:#f1ecfc;
  background:rgba(30,24,50,.92);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(0,0,0,.8);
  opacity:0;transform:translateY(14px) scale(.8);transition:opacity .3s ease,transform .7s var(--mq-muelle);
}
.is-on .mq-chips li{opacity:1;transform:none;transition-delay:calc(1.1s + var(--i) * .14s)}
.mq-chips .mq-chip--color{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}

/* --- 1 · Vídeo --- */
.mqx--1 .mq-trio{top:44%}
/* En el móvil las etiquetas tapaban el vídeo y su rótulo; el texto de debajo ya dice «guion, grabación, edición y publicación». */
@media (max-width:979px){.mqx--1 .mq-chips{display:none}.mqx--1 .mq-trio{top:50%}}
.mq-rec{
  position:absolute;z-index:3;left:calc(var(--mw) * .11);top:calc(var(--mw) * .2);display:flex;align-items:center;gap:5px;
  font:500 calc(var(--mw) * .055)/1 var(--mq-mono);letter-spacing:.12em;color:#fff;
  padding:4px 7px;border-radius:6px;background:rgba(7,5,14,.6);
}
.mq-rec i{width:6px;height:6px;border-radius:50%;background:#f43f5e;animation:mqRec 1.2s steps(1) infinite}
@keyframes mqRec{50%{opacity:.15}}
.mq-sector{
  position:absolute;z-index:3;left:50%;bottom:calc(var(--mw) * .12);transform:translateX(-50%);white-space:nowrap;
  padding:5px 10px;border-radius:99px;font:600 calc(var(--mw) * .06)/1 var(--font-display);color:#fff;
  background:rgba(7,5,14,.62);border:1px solid rgba(255,255,255,.22);
}

/* --- 2 · Webs --- */
.mq-ventana{
  position:absolute;left:0;top:4%;width:88%;height:72%;border-radius:14px;overflow:hidden;
  background:#0f0c1a;border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -25px rgba(139,92,246,.6);
  opacity:0;transform:translateY(30px) rotateY(10deg) rotateX(4deg) scale(.94);
  transition:opacity .5s ease,transform 1.1s var(--mq-expo);
}
.is-on .mq-ventana{opacity:1;transform:rotateY(10deg) rotateX(4deg);transition-delay:.1s}
.mq-ventana__barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.mq-ventana__barra i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.mq-ventana__barra span{display:flex;align-items:center;gap:5px;margin-left:10px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.07);font:500 11px/1 var(--font-body);color:#d8d0ee}
.mq-ventana__barra svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}
.mq-ventana__web{height:calc(100% - 30px)}
.mq-ventana__web{position:relative;overflow:hidden}
/* Las webs reales: una encima de otra; la que toca aparece y baja sola,
   como si alguien la estuviera mirando (2,75 s cada una). */
.mq-sitio{position:absolute;left:0;top:0;width:100%;height:auto;display:block;opacity:0;transition:opacity .45s ease}
.mq-sitio.is-on{opacity:1;animation:mqRecorre 2.9s cubic-bezier(.45,0,.3,1) .25s both}
@keyframes mqRecorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-38%,0)}}
.mq-pantalla--webs{position:relative;display:block;padding:0;overflow:hidden;background:#100c1c}
.mq-pantalla--webs .mq-sitio.is-on{animation-name:mqRecorreMovil}
@keyframes mqRecorreMovil{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-42%,0)}}
.mq-dominio{font-weight:500}
/* qué tipo de negocio es la web que se ve */
.mq-web-tipo{
  position:absolute;left:4%;bottom:0;z-index:3;padding:8px 14px;border-radius:999px;
  font:500 11px/1 var(--mq-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(30,24,50,.92);border:1px solid rgba(236,72,153,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(0,0,0,.8);
  opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .7s var(--mq-muelle);
}
.is-on .mq-web-tipo{opacity:1;transform:none;transition-delay:.9s}
.mq-web-tipo{display:inline-flex;align-items:center;gap:8px}
.mq-web-tipo svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mq-web-tipo.is-tienda{background:var(--grad);border-color:transparent;font-weight:600;box-shadow:0 12px 28px -10px rgba(217,38,169,.75)}
.mq-web-tipo.is-cambia,.mq-sector.is-cambia{animation:mqAparece .5s var(--mq-expo)}
.mqx--2{--mw:112px}
@media (min-width:980px){.mqx--2{--mw:165px}}
.mqx--2 .mq-trio{left:80%;top:60%;animation:none;transform:rotateX(6deg) rotateY(-14deg)}
.is-on.mqx--2 .mq-movil--centro{transition-delay:.55s}
.is-on.mqx--2 .mq-web__b{transition-delay:calc(1.1s + var(--i) * .09s)}


/* --- 3 · ADS --- */
.mq-avisos{position:absolute;left:50%;top:2%;width:min(370px,100%);transform:translateX(-50%);display:flex;flex-direction:column;gap:10px}
@media (min-width:980px){.mq-avisos{top:10%;width:400px}}
.mq-aviso{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:11px 14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(52,44,80,.95),rgba(28,22,46,.95));border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 40px -18px rgba(0,0,0,.9);
  opacity:0;transform:translateY(-26px) scale(.94);transition:opacity .35s ease,transform .75s var(--mq-muelle);
}
.is-on .mq-aviso{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .5s)}
.mq-aviso > i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.mq-aviso svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mq-aviso div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mq-aviso small{font-size:10.5px;color:#bdb3d8}
.mq-aviso b{font-size:14px;color:#fff;font-weight:600}
.mq-aviso span{font-size:12.5px;color:#d8d0ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-on.mqx--3 .mq-chips li{transition-delay:calc(1.8s + var(--i) * .14s)}

/* --- botones para pasar de pantalla (pedidos por David el 17/10) --- */
.mqh__cabeza{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.mqh__nav{display:flex;gap:6px;flex:none}
.mqh__flecha,.mqh__sig{
  height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  color:#fff;background:rgba(30,24,50,.88);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);transition:background .2s,border-color .2s,transform .15s;
}
.mqh__flecha{width:34px;padding:0}
.mqh__sig{padding:0 10px 0 14px;font:500 10.5px/1 var(--mq-mono);letter-spacing:.14em;text-transform:uppercase}
.mqh__flecha:hover,.mqh__sig:hover{background:var(--grad);border-color:transparent}
.mqh__flecha:active,.mqh__sig:active{transform:scale(.93)}
.mqh__flecha:focus-visible,.mqh__sig:focus-visible{outline:2px solid var(--lila);outline-offset:2px}
.mqh__nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .mqh__paso span{display:none}          /* en el móvil solo las rayitas; el nombre ya va en el titular */
  .mqh__paso{padding:12px 0}
  .mqh__sig{padding:0 8px 0 12px}
}

/* --- 4 · SEO y GEO --- */
.mq-busca{
  position:absolute;left:0;right:0;top:0;margin:0 auto;width:min(430px,100%);padding:11px;border-radius:18px;
  background:linear-gradient(180deg,rgba(40,33,62,.96),rgba(20,16,34,.96));border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -25px rgba(139,92,246,.6);
  opacity:0;transform:translateY(20px) scale(.96);transition:opacity .5s ease,transform 1s var(--mq-expo);
}
@media (min-width:980px){.mq-busca{top:6%}}
.is-on .mq-busca{opacity:1;transform:none;transition-delay:.1s}
.mq-busca__barra{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:500 14px/1 var(--font-body);color:#fff}
.mq-busca__barra svg{width:17px;height:17px;flex:none;fill:none;stroke:#cfc6e6;stroke-width:1.9;stroke-linecap:round}
.mq-busca__cursor{width:2px;height:18px;margin-left:-8px;background:#fff;animation:mqParpadeo 1s steps(1) infinite}
@keyframes mqParpadeo{50%{opacity:0}}
.mq-busca__lista{position:relative;list-style:none;margin:10px 0 0;padding:0;height:178px;--fila:46px}
@media (min-width:980px){.mq-busca__lista{height:226px;--fila:58px}}
.mq-busca__lista li{
  position:absolute;left:0;right:0;top:0;height:calc(var(--fila) - 6px);display:flex;align-items:center;gap:10px;padding:0 12px;
  border-radius:12px;background:rgba(255,255,255,.045);border:1px solid transparent;
  transform:translateY(calc(var(--pos) * var(--fila)));opacity:0;
  transition:transform .9s var(--mq-muelle),opacity .4s ease,background .4s,border-color .4s,box-shadow .4s;
}
.is-on .mq-busca__lista li{opacity:1}
.is-on .mq-busca__lista li:nth-child(1){transition-delay:0s,.35s,0s,0s,0s}
.is-on .mq-busca__lista li:nth-child(2){transition-delay:0s,.45s,0s,0s,0s}
.is-on .mq-busca__lista li:nth-child(3){transition-delay:0s,.55s,0s,0s,0s}
.is-on .mq-busca__lista li:nth-child(4){transition-delay:0s,.65s,0s,0s,0s}
.mq-busca__lista li > i{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:500 10px/1 var(--mq-mono);font-style:normal;color:#cfc6e6;background:rgba(255,255,255,.08)}
.mq-raya{display:block;width:150px;max-width:100%;height:7px;border-radius:4px;background:rgba(255,255,255,.2)}
.mq-raya--corta{width:92px;margin-top:6px;background:rgba(255,255,255,.1)}
.mq-busca__lista .mq-busca__tuyo{background:linear-gradient(90deg,rgba(139,92,246,.26),rgba(217,38,169,.2));border-color:rgba(236,72,153,.45)}
.mq-busca__lista .mq-busca__tuyo > i{background:var(--grad)}
.mq-busca__tuyo > i svg{width:13px;height:13px;fill:#fff;stroke:none}
.mq-busca__tuyo b{display:block;font:700 14px/1.2 var(--font-display);color:#fff}
.mq-busca__tuyo small{font-size:11px;color:#ddd5f2}
.mq-busca__tuyo em{margin-left:auto;padding:5px 9px;border-radius:99px;font:600 10px/1 var(--mq-mono);font-style:normal;letter-spacing:.1em;color:#fff;background:var(--grad);opacity:0;transform:scale(.5);transition:opacity .3s ease .7s,transform .6s var(--mq-muelle) .7s}
/* «Tu negocio» sube al primer puesto y los demás bajan uno */
.mq-sube .mq-busca__lista li{transform:translateY(calc((var(--pos) + 1) * var(--fila)))}
.mq-sube .mq-busca__lista .mq-busca__tuyo{transform:translateY(0);box-shadow:0 14px 34px -12px rgba(217,38,169,.7)}
.mq-sube .mq-busca__tuyo em{opacity:1;transform:none}

.mq-ia{
  position:absolute;right:0;bottom:0;width:min(300px,82%);padding:12px 14px;border-radius:18px 18px 4px 18px;
  background:linear-gradient(180deg,rgba(64,52,102,.97),rgba(32,26,56,.97));border:1px solid rgba(167,139,250,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 50px -18px rgba(0,0,0,.9),0 0 40px -12px rgba(139,92,246,.7);
  opacity:0;transform:translateY(18px) scale(.94);transition:opacity .4s ease,transform .8s var(--mq-muelle);
}
@media (min-width:980px){.mq-ia{bottom:8%;right:-2%}}
.mq-ia-on .mq-ia{opacity:1;transform:none}
.mq-ia__quien{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--mq-mono);letter-spacing:.14em;text-transform:uppercase;color:#d6cdef}
.mq-ia__quien i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad)}
.mq-ia__quien svg{width:13px;height:13px;fill:#fff;stroke:none}
.mq-ia__esc{display:flex;gap:5px;margin:12px 0 4px}
.mq-ia__esc i{width:6px;height:6px;border-radius:50%;background:#cfc6e6;animation:mqTeclea 1s ease-in-out infinite}
.mq-ia__esc i:nth-child(2){animation-delay:.15s}
.mq-ia__esc i:nth-child(3){animation-delay:.3s}
@keyframes mqTeclea{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.mq-ia__txt{display:none;margin:9px 0 0;font-size:13.5px;line-height:1.45;color:#f3effc}
.mq-ia__txt b{color:#fff;background:linear-gradient(90deg,rgba(139,92,246,.45),rgba(236,72,153,.45));padding:0 4px;border-radius:4px}
.mq-ia-txt .mq-ia__esc{display:none}
.mq-ia-txt .mq-ia__txt{display:block;animation:mqAparece .5s var(--mq-expo)}
@keyframes mqAparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- 5 · Automatizaciones --- */
.mq-flujo{position:absolute;left:0;right:0;top:0;margin:0 auto;width:min(410px,100%);display:flex;flex-direction:column;gap:10px}
@media (min-width:980px){.mq-flujo{top:5%;gap:14px}}
.mq-flujo__via{position:absolute;left:28px;top:26px;bottom:26px;width:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.mq-flujo__via b{position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,transparent,#ec4899,transparent)}
.is-on .mq-flujo__via b{animation:mqVia 1.3s linear infinite}
@keyframes mqVia{to{top:100%}}
.mq-nodo{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:9px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(40,33,62,.96),rgba(20,16,34,.96));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 36px -18px rgba(0,0,0,.9);
  opacity:0;transform:translateX(-16px);transition:opacity .4s ease,transform .7s var(--mq-expo),border-color .3s,box-shadow .3s;
}
.is-on .mq-nodo{opacity:1;transform:none;transition-delay:calc(.15s + var(--i) * .12s),calc(.15s + var(--i) * .12s),0s,0s}
.mq-nodo > i{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);transition:background .3s}
.mq-nodo > i svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mq-nodo b{display:block;font-size:13.5px;color:#fff;font-weight:600}
.mq-nodo small{font-size:11px;color:#cfc6e6}
.mq-nodo em{font-style:normal;font:500 9.5px/1 var(--mq-mono);letter-spacing:.1em;text-transform:uppercase}
.mq-nodo__haciendo,.mq-nodo__hecho{display:none;align-items:center;gap:5px;padding:5px 8px;border-radius:99px}
.mq-nodo__haciendo{color:#fbcfe8;background:rgba(236,72,153,.16)}
.mq-nodo__haciendo::before{content:"";width:6px;height:6px;border-radius:50%;background:#ec4899;animation:mqRec 1s steps(1) infinite}
.mq-nodo__hecho{color:#bbf7d0;background:rgba(74,222,128,.14)}
.mq-nodo__hecho svg{width:12px;height:12px;fill:none;stroke:#4ade80;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mq-nodo.is-marcha{border-color:rgba(236,72,153,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 30px -8px rgba(236,72,153,.7)}
.mq-nodo.is-marcha > i,.mq-nodo.is-hecho > i{background:var(--grad)}
.mq-nodo.is-marcha .mq-nodo__haciendo,.mq-nodo.is-hecho .mq-nodo__hecho{display:flex}
.mq-tareas{position:absolute;right:0;bottom:0;text-align:right;opacity:0;transition:opacity .5s ease 1s}
.is-on .mq-tareas{opacity:1}
.mq-tareas b{display:block;font:700 46px/1 var(--font-display);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-tareas small{font-size:11.5px;line-height:1.4;color:#cfc6e6}
@media (max-width:979px){.mq-tareas{display:none}}

/* --- 6 · Datos: el panel de análisis --- */
.mq-panel{
  position:absolute;left:0;right:0;top:0;bottom:0;margin:0 auto;width:min(470px,100%);display:flex;flex-direction:column;
  padding:12px;border-radius:20px;
  background:linear-gradient(180deg,rgba(36,30,58,.97),rgba(16,12,28,.97));border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -25px rgba(139,92,246,.6);
  opacity:0;transform:translateY(20px) scale(.97);transition:opacity .5s ease,transform 1s var(--mq-expo);
}
@media (min-width:980px){.mq-panel{top:3%;bottom:3%;padding:18px}}
.is-on .mq-panel{opacity:1;transform:none;transition-delay:.1s}
.mq-panel__cab{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--mq-mono);letter-spacing:.16em;text-transform:uppercase;color:#d6cdef}
.mq-panel__vivo{width:7px;height:7px;border-radius:50%;background:#ec4899;box-shadow:0 0 10px #ec4899;animation:mqRec 1.4s steps(1) infinite}
.mq-panel__cab em{margin-left:auto;font-style:normal;padding:4px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.2);color:#cfc6e6;font-size:9px}
.mq-panel__tabs{display:flex;gap:6px;margin:10px 0}
.mq-panel__tabs button{flex:1;padding:7px 0;border-radius:99px;cursor:pointer;font:500 10px/1 var(--mq-mono);letter-spacing:.12em;text-transform:uppercase;color:#cfc6e6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:background .3s,color .3s,border-color .3s}
.mq-panel__tabs button.is-on{background:var(--grad);color:#fff;border-color:transparent}
.mq-panel__cuerpo{position:relative;flex:1;min-height:0}
.mq-ana{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .35s ease,transform .5s var(--mq-expo),visibility 0s linear .35s}
.mq-ana.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .1s,transform .8s var(--mq-expo) .1s,visibility 0s}
.mq-ana h4{margin:0 0 6px;font:700 14.5px/1.25 var(--font-display);color:#fff}
.mq-ana p{margin:6px 0 0;font-size:12px;line-height:1.45;color:#d8d0ee}
.mq-ana p b{color:#fff;font-weight:600}
.mq-svg{display:block;width:100%;height:auto;overflow:visible}
@media (min-width:980px){.mq-ana h4{font-size:18px;margin-bottom:12px}.mq-ana p{font-size:13.5px;margin-top:10px}}

/* a) ¿cuándo contratar? */
.mq-bar{fill:rgba(167,139,250,.5);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .8s var(--mq-muelle)}
.mq-bar--pasa{fill:#ec4899}
.mq-ana.is-on .mq-bar{transform:none;transition-delay:calc(.25s + var(--i) * .09s)}
.mq-eje{font:500 9px var(--mq-mono);fill:#b3a9cd}
.mq-cap{fill:none;stroke:rgba(255,255,255,.65);stroke-width:1.2;stroke-dasharray:4 4;opacity:0;transition:opacity .5s ease}
.mq-cap__t{font:500 8.5px var(--mq-mono);fill:#ece6fb;opacity:0;transition:opacity .5s ease}
.mq-marca{fill:none;stroke:#ec4899;stroke-width:1.5;stroke-dasharray:3 3;opacity:0;transition:opacity .4s ease}
.mq-marca__eti{opacity:0;transition:opacity .4s ease}
.mq-marca__eti rect{fill:#ec4899}
.mq-marca__eti text{font:700 9.5px var(--font-display);fill:#fff}
.mq-ana.is-on .mq-cap,.mq-ana.is-on .mq-cap__t{opacity:1;transition-delay:1s}
.mq-ana.is-on .mq-marca,.mq-ana.is-on .mq-marca__eti{opacity:1;transition-delay:1.6s}

/* b) clientes que no vuelven */
.mq-ret{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.mq-ret__num b{display:block;font:700 38px/1 var(--font-display);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-ret__num small{display:block;max-width:10em;margin-top:4px;font-size:10.5px;line-height:1.35;color:#cfc6e6}
.mq-ret__rej{fill:none;stroke:rgba(255,255,255,.08);vector-effect:non-scaling-stroke}
.mq-ret__area{fill:rgba(217,38,169,.16);opacity:0;transition:opacity .6s ease}
.mq-ret__linea{fill:none;stroke:#ec4899;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--mq-curva)}
.mq-ana.is-on .mq-ret__linea{stroke-dashoffset:0;transition-delay:.25s}
.mq-ana.is-on .mq-ret__area{opacity:1;transition-delay:1.2s}
.mq-razones{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mq-razones li{padding:7px 10px;border-radius:10px;font-size:11.5px;line-height:1.35;color:#f1ecfc;background:rgba(255,255,255,.05);border-left:2px solid #ec4899;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .6s var(--mq-expo)}
.mq-ana.is-on .mq-razones li{opacity:1;transform:none;transition-delay:calc(1.2s + var(--i) * .35s)}
@media (min-width:980px){.mq-ret__num b{font-size:54px}.mq-razones li{font-size:13px;padding:9px 12px}}

/* c) escandallo: si te sube el proveedor */
.mq-escan{display:flex;flex-direction:column;gap:6px}
.mq-escan__fila{
  display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;
  background:rgba(255,255,255,.05);font-size:11.5px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .6s var(--mq-expo);
}
.mq-ana.is-on .mq-escan__fila{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .3s)}
.mq-escan__fila span{color:#cfc6e6}
.mq-escan__fila b{font:700 13px/1 var(--font-display);color:#fff}
.mq-escan__fila .mq-sube{color:#f9a8d4}
.mq-escan__fila i{display:flex}
.mq-escan__fila i svg{width:12px;height:12px;fill:none;stroke:#b3a9cd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mq-escan__fila em{font-style:normal;font:500 9px/1 var(--mq-mono);letter-spacing:.08em;padding:4px 6px;border-radius:99px;color:#fbcfe8;background:rgba(236,72,153,.16)}
.mq-escan__fila em.mq-ok{color:#bbf7d0;background:rgba(74,222,128,.14)}
.mq-escan__aviso{margin-top:10px;font-size:11.5px;color:#ece6fb;opacity:0;transition:opacity .4s ease}
.mq-ana.is-on .mq-escan__aviso{opacity:1;transition-delay:1.3s}
.mq-escan__aviso b{color:#f9a8d4}
.mq-escan__barra{display:block;height:6px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.mq-escan__barra b{display:block;height:100%;width:100%;border-radius:4px;background:var(--grad);transition:width 1.2s var(--mq-curva)}
.mq-ana.is-on .mq-escan__barra b{width:62.8%;transition-delay:1.6s}
@media (min-width:980px){.mq-escan__fila{font-size:13px;padding:11px 14px}.mq-escan__fila b{font-size:16px}.mq-escan__aviso{font-size:13px}}

.mq-panel__garantia{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--grad-soft);border:1px solid rgba(217,38,169,.35);font-size:12.5px;color:#f1ecfc}
.mq-panel__garantia i{display:flex}
.mq-panel__garantia svg{width:20px;height:20px;fill:none;stroke:#ec4899;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mq-panel__garantia b{font-family:var(--font-display);font-size:15px}
@media (max-width:979px){.mq-panel__garantia{display:none}}
/* En el móvil el panel es bajito: cada análisis, más apretado para que no se salga */
@media (max-width:979px){
  .mq-ana h4{font-size:13.5px;margin-bottom:4px}
  .mq-ana p{font-size:11.5px;margin-top:4px}
  .mq-razones li:nth-child(3){display:none}
  .mq-razones{margin-top:8px}
  .mq-ret__num b{font-size:32px}
  .mq-ret__svg{max-height:84px}
  .mq-ana[data-a="0"] .mq-svg{max-height:132px}
  .mq-escan__fila{padding:7px 9px}
  .mq-escan__aviso{margin-top:7px}
}
@media (max-width:979px) and (max-height:760px){
  .mq-ana p,.mq-razones li:nth-child(2){display:none}
}

/* --- cifras y garantía --- */
html.mq .stat{
  position:relative;overflow:hidden;padding-top:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px -26px rgba(124,58,237,.7);
}
html.mq .stat .mq-idx{top:10px;left:12px;font-size:9.5px}
html.mq .stat::after{content:"";position:absolute;top:9px;right:10px;width:8px;height:8px;border-top:1px solid var(--mq-linea);border-right:1px solid var(--mq-linea)}
html.mq .mq-scan{display:block;position:absolute;inset:0;pointer-events:none;transform:translateX(-110%);background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.10) 48%,rgba(236,72,153,.16) 52%,transparent 70%)}
html.mq .stats.is-visible .mq-scan{animation:mqBarre 1.3s var(--mq-curva) .3s both}
html.mq .stats.is-visible .stat:nth-child(2) .mq-scan{animation-delay:.42s}
html.mq .stats.is-visible .stat:nth-child(3) .mq-scan{animation-delay:.54s}
html.mq .stats.is-visible .stat:nth-child(4) .mq-scan{animation-delay:.66s}
@keyframes mqBarre{to{transform:translateX(110%)}}

html.mq .guarantee{position:relative;overflow:hidden}
html.mq .mq-hilo{
  display:block;position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
html.mq .mq-hilo::before{
  content:"";position:absolute;left:50%;top:50%;width:max(220%,900px);aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0 64%,rgba(139,92,246,.9) 78%,rgba(236,72,153,1) 88%,#fff 91%,transparent 92%);
  transform:translate(-50%,-50%) rotate(0deg);animation:mqGira 7s linear infinite;
}
@keyframes mqGira{to{transform:translate(-50%,-50%) rotate(360deg)}}
html.mq .guarantee > *:not(.mq-hilo){position:relative;z-index:1}

/* ============================================================
   2. BANDA DE PALABRAS — se mueve sola
   ============================================================ */
html.mq .marquee{display:none}
html.mq .mq-banda{
  display:block;position:relative;overflow:hidden;padding:16px 0 18px;border-block:1px solid var(--border);
  background:linear-gradient(180deg,rgba(13,9,25,.55),rgba(13,9,25,.85));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.mq-banda__fila{white-space:nowrap;line-height:1.14;padding:.03em 0}
.mq-banda__pista{display:inline-flex;align-items:center;gap:.42em;animation:mqDeriva 42s linear infinite}
.mq-banda__fila--2 .mq-banda__pista{animation-direction:reverse;animation-duration:50s}
.mq-banda__fila--3 .mq-banda__pista{animation-duration:58s}
@keyframes mqDeriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}
.mq-banda span{
  display:inline-block;font-family:"Archivo",var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;
  font-size:clamp(44px,13vw,96px);letter-spacing:-.01em;opacity:0;transform:scaleX(1.4);
  transition:opacity .5s ease,transform .9s var(--mq-expo);
}
.mq-banda__pista > i{display:inline-block;width:.2em;height:.2em;flex-shrink:0;border-radius:2px;transform:rotate(45deg);background:var(--grad);box-shadow:0 0 12px rgba(217,38,169,.7);font-size:clamp(44px,13vw,96px)}
.mq-banda__fila--1 span{color:#f5f2fc}
.mq-banda__fila--2 span{color:transparent;-webkit-text-stroke:1.5px rgba(205,190,255,.95)}
.mq-banda__fila--3 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-banda.mq-entra span{opacity:1;transform:none}
.mq-banda.mq-entra .mq-banda__fila--2 span{transition-delay:.12s}
.mq-banda.mq-entra .mq-banda__fila--3 span{transition-delay:.24s}

/* ============================================================
   3. SERVICIOS — tarjetas que se levantan solas
   ============================================================ */
html.mq #servicios .cards{position:relative}
html.mq .mq-circuito{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
.mq-cable{position:absolute;display:block}
.mq-cable--v{width:2px;margin-left:-1px;background:rgba(255,255,255,.07)}
.mq-cable--h{height:2px;margin-top:-1px;background:rgba(255,255,255,.07)}
.mq-cable::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#8b5cf6,#ec4899);box-shadow:0 0 12px rgba(217,38,169,.7);transition:transform .55s var(--mq-curva) var(--dl,0s)}
.mq-cable--v::before{transform:scaleY(0);transform-origin:top}
.mq-cable--h::before{transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.mq-cable.mq-on::before{transform:none}
.mq-cable b{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 12px 4px rgba(236,72,153,.85),0 0 28px 10px rgba(139,92,246,.4)}
.mq-cable--v b{left:-2.5px;top:-3px}
.mq-cable--h b{top:-2.5px;left:-3px}
.mq-cable--v.mq-on b{animation:mqCableY .55s var(--mq-curva) var(--dl,0s) both}
.mq-cable--h.mq-on b{animation:mqCableX .55s var(--mq-curva) var(--dl,0s) both}
@keyframes mqCableY{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(var(--largo))}}
@keyframes mqCableX{0%{opacity:1;transform:translateX(0)}90%{opacity:1}100%{opacity:0;transform:translateX(var(--largo))}}

html.mq #servicios .card{
  z-index:1;opacity:0;transform:perspective(900px) rotateX(20deg) translateY(40px) scale(.97);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -42px rgba(0,0,0,.9);
  transition:opacity .7s ease var(--dl,0s),transform 1.1s var(--mq-expo) var(--dl,0s),border-color .6s var(--dl,0s),box-shadow .6s var(--dl,0s);
}
html.mq #servicios .card.mq-on{opacity:1;transform:none;border-color:rgba(167,139,250,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -34px rgba(217,38,169,.5)}
html.mq #servicios .card.mq-on:hover{transform:translateY(-7px);transition-delay:0s}
html.mq #servicios .card__icon{background:linear-gradient(145deg,rgba(167,139,250,.38),rgba(217,38,169,.24));border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 26px -12px rgba(217,38,169,.6)}
html.mq #servicios .card.mq-on .card__icon{animation:mqIcono 1.1s var(--mq-muelle) calc(var(--dl,0s) + .35s) both}
@keyframes mqIcono{
  0%{transform:translateY(14px) scale(.55)}
  60%{transform:translateY(-12px) scale(1.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 34px 40px -12px rgba(217,38,169,.8)}
  100%{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 22px 30px -12px rgba(217,38,169,.65)}
}
html.mq .mq-carta__luz{display:block;position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#8b5cf6 18%,#ec4899 55%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--mq-curva) calc(var(--dl,0s) + .3s)}
html.mq .card.mq-on .mq-carta__luz{transform:none}
html.mq .mq-idx--carta{top:20px;right:22px;opacity:0;transition:opacity .6s ease calc(var(--dl,0s) + .6s)}
html.mq .card.mq-on .mq-idx--carta{opacity:1}

/* ============================================================
   4. ANTES Y DESPUÉS — llega inclinado y se endereza solo
   ============================================================ */
html.mq #antes-despues .reels--uno{perspective:1100px}
html.mq #antes-despues .reel{
  opacity:0;transform:rotateX(26deg) translateY(60px) scale(.92);transform-origin:50% 100%;
  box-shadow:0 50px 90px -40px rgba(124,58,237,.65);
  transition:opacity .8s ease,transform 1.4s var(--mq-expo),box-shadow .35s,border-color .35s;
}
html.mq #antes-despues .reel.mq-entra{opacity:1;transform:none}
html.mq #antes-despues .reel.mq-entra:hover{transform:translateY(-6px)}
html.mq .mq-marco{display:block;position:absolute;inset:12px;z-index:3;pointer-events:none}
html.mq .mq-marco__brillo{position:absolute;inset:-12px;display:block;transform:translateX(-120%);background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 48%,rgba(236,72,153,.18) 52%,transparent 65%)}
html.mq .reel.mq-entra .mq-marco__brillo{animation:mqBarre 1.4s var(--mq-curva) 1s both}
html.mq .reel.is-playing .mq-marco{opacity:.35;transition:opacity .4s}

/* ============================================================
   5. TÍTULOS, MÉTODO Y RECUADRO FINAL
   ============================================================ */
html.mq .kicker::before,html.mq-sub .kicker::before{transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(217,38,169,.75);transition:transform .9s var(--mq-curva) .15s}
html.mq .kicker.is-visible::before,html.mq-sub .kicker.is-visible::before{transform:none}
html.mq .h-lg .grad-text .w,html.mq-sub .h-lg .grad-text .w{filter:drop-shadow(0 0 14px rgba(217,38,169,.32))}
html.mq .tl-step__card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -42px rgba(0,0,0,.9)}
html.mq .tl-step.is-on .tl-step__card{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 28px 56px -36px rgba(217,38,169,.5)}

html.mq .mq-curvas{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.mq-curvas svg{position:absolute;left:0;top:0}
.mq-curvas path{fill:none;stroke-width:1.3}
.mq-curvas__base path{stroke:rgba(255,255,255,.075)}
.mq-curvas__color path{stroke:rgba(236,72,153,.8)}
.mq-curvas__color{
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
  -webkit-mask-size:50% 170%;mask-size:50% 170%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:-40% 50%;mask-position:-40% 50%;animation:mqFoco 9s ease-in-out infinite alternate;
}
@keyframes mqFoco{to{-webkit-mask-position:140% 50%;mask-position:140% 50%}}
html.mq #ctaLateral .mq-hilo{z-index:1}
html.mq #ctaLateral > :not(.mq-hilo):not(.orbs):not(.mq-curvas){z-index:2}

/* ============================================================
   Quien pide menos movimiento: todo quieto y en su sitio
   ============================================================ */
html.mq.mq-quieto .mq-muro__pista,html.mq.mq-quieto .mq-banda__pista,html.mq.mq-quieto .mq-hilo::before,
html.mq.mq-quieto .mq-curvas__color,html.mq.mq-quieto .mq-trio,html.mq.mq-quieto .mq-ficha{animation:none}
html.mq.mq-quieto .mqh__paso.is-on i::after{animation:none;transform:none}
html.mq.mq-quieto .mq-banda span{opacity:1;transform:none;transition:none}
html.mq.mq-quieto #servicios .card,html.mq.mq-quieto #antes-despues .reel{opacity:1;transform:none;transition:none}

/* Mientras arranca js/movimiento.js la portada va tapada (la clase la pone
   un trocito en el <head> de index.html y se quita sola a los 2,5 s por si
   este archivo no llegara a cargar). */
html.mq-carga .hero .container{opacity:0}

/* ============================================================
   Páginas de servicio (Vídeos&Fotos, Webs&Apps, ADS, Data Science)
   Arriba, la animación de su servicio, igual que en la portada.
   ============================================================ */
.mqp{display:none}
html.mq-sub .mqp{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "texto";gap:20px;
  position:relative;z-index:2;
}
html.mq-sub .mqp__visual{grid-area:visual}
html.mq-sub .mqp .hero__content{grid-area:texto;text-align:left;margin:0;max-width:none}
html.mq-sub .mqp .hero__actions{justify-content:flex-start}
html.mq-sub .mqp .lead{margin-inline:0;max-width:34em}
html.mq-sub .hero--sub{padding-top:calc(var(--nav-h) + 22px)}
html.mq-sub .hero--sub .hero__video{display:none}
/* la etiqueta de arriba, como la de la portada: rayita y letra de máquina */
html.mq-sub .hero--sub .badge{
  background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:12px;margin-bottom:14px;
  font:500 11px/1.5 var(--mq-mono);letter-spacing:.2em;text-transform:uppercase;color:#d6cdef;
}
html.mq-sub .hero--sub .badge i{flex:none;width:28px;height:1px;border-radius:0;background:var(--grad);animation:none;box-shadow:0 0 8px rgba(217,38,169,.8)}
.mqp__titulo{margin-top:0}
.mqp__titulo .grad-text{background:none;animation:none}
.mqp__titulo .grad-text .mqm > span{
  background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:gradShift 6s linear infinite;
}
html.mq-sub .hero--sub > .container > .guarantee,html.mq-sub .hero--sub > .container > .stats{position:relative;z-index:2}
@media (min-width:980px){
  html.mq-sub .mqp{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"texto visual";gap:40px;align-items:center}
}

/* ============================================================
   Vídeos&Fotos: el titular y el texto como un motion graphic que se
   monta una vez y se queda quieto (sin vídeos arriba). Cada pieza
   espera su --t (ms), que pone js/movimiento.js.
   ============================================================ */
.mqv{position:relative;z-index:2}
.mqv__titulo{
  margin:18px auto 0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.45rem,10.4vw,6.2rem);line-height:.98;letter-spacing:-.045em;color:#f5f2fc;
}
/* cada palabra es una ranura; sus letras suben estiradas y se asientan */
.mqv-pal{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.2em .05em .12em;margin:-.2em -.05em -.12em}
.mqv-l{
  display:inline-block;opacity:0;transform:translate3d(0,1.5em,0) scale(1,2.2);transform-origin:50% 100%;
  transition:transform 1.05s var(--mq-expo) calc(var(--t) * 1ms),opacity .3s ease calc(var(--t) * 1ms);
}
.mqv-l--punto{
  color:#ec4899;text-shadow:0 0 18px rgba(236,72,153,.55);
  transform:translate3d(0,-1.3em,0);transform-origin:50% 80%;
  transition:transform .75s var(--mq-muelle) calc(var(--t) * 1ms),opacity .2s ease calc(var(--t) * 1ms);
}
.is-on .mqv-l{opacity:1;transform:none}
/* «NO SON»: cada palabra se levanta como una tarjeta y una raya de luz la subraya */
.mqv-color{position:relative;display:inline-block;white-space:nowrap}
.mqv-gira{display:inline-block;perspective:700px}
.mqv-gira > span{
  display:inline-block;padding-right:.04em;
  background:var(--grad);background-size:200% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  opacity:0;transform:rotateX(-92deg);transform-origin:50% 100%;
  transition:transform 1.1s var(--mq-muelle) calc(var(--t) * 1ms),opacity .25s ease calc(var(--t) * 1ms);
}
.mqv-gira + .mqv-gira > span{background-position:100% 0}
.is-on .mqv-gira > span{opacity:1;transform:none}
.mqv-raya,.mqv-chispa{position:absolute;left:.06em;right:.06em;bottom:-.02em;height:.065em;min-height:3px;pointer-events:none}
.mqv-raya{
  border-radius:99px;background:var(--grad);box-shadow:0 0 16px rgba(217,38,169,.6);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .85s var(--mq-curva) calc(var(--t) * 1ms);
}
.is-on .mqv-raya{transform:none}
.mqv-chispa{opacity:0}
.mqv-chispa::before{
  content:"";position:absolute;left:-.12em;top:50%;width:.24em;height:.24em;margin-top:-.12em;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.65),0 0 26px 8px rgba(236,72,153,.7);
}
.is-on .mqv-chispa{animation:mqvChispa .85s var(--mq-curva) calc(var(--t) * 1ms) both}
@keyframes mqvChispa{0%{transform:translateX(0);opacity:0}10%{opacity:1}80%{opacity:1}100%{transform:translateX(100%);opacity:0}}
/* la etiqueta de arriba: la rayita crece y las letras se escriben */
.mqv .badge i{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--mq-expo) calc(var(--t) * 1ms)}
.mqv.is-on .badge i{transform:none}
.mqv-tecla{opacity:0;transition:opacity .01s linear calc(var(--t) * 1ms)}
.is-on .mqv-tecla{opacity:1}
/* el texto de debajo, palabra a palabra; la frase fuerte se marca después */
.mqv .lead{margin-top:26px;text-wrap:pretty}   /* que «cliente.» no se quede sola en la última línea */
.mqv-p{
  display:inline-block;opacity:0;transform:translate3d(0,.55em,0);
  transition:opacity .5s ease calc(var(--t) * 1ms),transform .8s var(--mq-expo) calc(var(--t) * 1ms);
}
.is-on .mqv-p{opacity:1;transform:none}
.mqv-marca{
  color:#fff;background-image:linear-gradient(90deg,rgba(139,92,246,.55),rgba(236,72,153,.55));
  background-repeat:no-repeat;background-position:0 90%;background-size:0% .36em;
  transition:background-size .9s var(--mq-curva) calc(var(--t) * 1ms);
}
.is-on .mqv-marca{background-size:100% .36em}
.mqv-botones{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .6s ease calc(var(--t) * 1ms),transform .9s var(--mq-expo) calc(var(--t) * 1ms);
}
.is-on .mqv-botones{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mqv *,.mqv *::before{transition:none !important;animation:none !important}
}