/* El Mutanteverso: la capa de estudio que se abre sobre la escena 3D.
   Referencias: Collider (universo propio, us vs them, historia de origen), Clear Street (historia en 3 pasos fijada al scroll),
   Snacklins (hero por capas), Daylight (manifiesto), De la Calle (marquesina), Couplet (sticker giratorio). */
.verso{--rojo:#C12E00;--carbon:#2A2522;--linea:rgba(248,245,240,.14);--cx:50%;--cy:50%;
  position:fixed;inset:0;z-index:26;background:var(--negro);color:var(--hueso);visibility:hidden;
  clip-path:circle(0% at var(--cx) var(--cy));transition:clip-path 1.15s var(--suave),visibility 0s 1.15s}
.verso.abierto{visibility:visible;clip-path:circle(150% at var(--cx) var(--cy));transition:clip-path 1.15s var(--suave)}
.verso-scroll{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:auto}
.verso-scroll::-webkit-scrollbar{width:0}
.verso-barra{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 32px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;pointer-events:none;mix-blend-mode:difference}
.verso-barra > *{pointer-events:auto}
.verso-marca{display:flex;align-items:center;gap:12px;color:var(--hueso)}
.verso-marca img{width:16px;height:auto;display:block}
.verso-cerrar{background:none;border:1px solid rgba(248,245,240,.5);color:var(--hueso);font:inherit;letter-spacing:.3em;
  padding:11px 18px;cursor:pointer;text-transform:uppercase;transition:background .3s,color .3s}
.verso-cerrar:hover{background:var(--hueso);color:var(--negro)}
.verso-hilo{position:fixed;left:0;top:0;height:2px;width:100%;z-index:4;background:var(--mutation);transform-origin:left;transform:scaleX(0)}
.verso h2,.verso h3{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:.88}
.verso-ancho{max-width:1400px;margin:0 auto;padding:0 32px}

/* Revelado al entrar en pantalla (tiempos de Collider: 2rem, .6s, curva de salida lenta) */
.rv{opacity:.01;transform:translateY(2rem);transition:opacity .7s cubic-bezier(0,0,.3,1),transform .8s cubic-bezier(0,0,.3,1);transition-delay:calc(var(--i,0)*80ms)}
.rv.dentro{opacity:1;transform:none}

/* 1. Portada: la M como ventana a lo filmado */
.v-portada{min-height:100dvh;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:40px;padding:110px 32px 60px;max-width:1500px;margin:0 auto;position:relative}
.v-portada h2{font-size:clamp(44px,7.4vw,132px);text-transform:uppercase}
.v-portada h2 .l{display:block;overflow:hidden;padding-bottom:.04em}
.v-portada h2 .l > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--suave)}
.v-portada h2 .l + .l > span{transition-delay:.12s}
.v-portada h2 em{font-style:normal;color:var(--mutation);display:inline-block}
.verso.listo .v-portada h2 .l > span{transform:none}
.v-portada p{margin-top:30px;max-width:46ch;font-size:14px;line-height:1.7;color:var(--gris);letter-spacing:.02em}
.v-portada p b{color:var(--hueso);font-weight:500}
.v-m{position:relative;justify-self:center;width:min(100%,380px);aspect-ratio:1418/2242}
.v-m svg{width:100%;height:100%;display:block;overflow:visible}
.v-m image{transition:opacity 1.2s var(--suave)}
.v-m .borde{fill:none;stroke:var(--mutation);stroke-width:10;stroke-dasharray:9000;stroke-dashoffset:9000;transition:stroke-dashoffset 2.6s var(--suave) .3s}
.verso.listo .v-m .borde{stroke-dashoffset:0}
.v-m .sombra{fill:var(--carbon)}
.v-m-pie{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-size:10px;letter-spacing:.32em;color:var(--gris);text-transform:uppercase}

/* 2. Manifiesto: las palabras se encienden con el scroll */
.v-manifiesto{min-height:170vh;position:relative}
.v-manifiesto-fijo{position:sticky;top:0;min-height:100dvh;display:grid;align-items:center}
.v-manifiesto p{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(28px,min(4.4vw,7.2vh),72px);line-height:1.02;letter-spacing:-.02em;max-width:22ch;text-transform:uppercase}
.v-manifiesto p span{opacity:.13;transition:opacity .25s,color .4s}
.v-manifiesto p span.on{opacity:1}
.v-manifiesto p span.clave.on{color:var(--mutation)}

/* 3. Laboratorio de mutación (WebGL) */
.v-lab{height:340vh;position:relative}
.v-lab-fijo{position:sticky;top:0;height:100dvh;overflow:hidden}
.v-lab canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.v-lab-ui{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;padding:96px 32px 30px}
.v-lab-ui button{pointer-events:auto}
.v-lab h3{font-size:clamp(46px,8vw,150px);text-transform:uppercase;text-shadow:0 2px 30px rgba(7,6,6,.5)}
.v-lab h3 em{font-style:normal;color:var(--mutation)}
.v-lab-pie{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:end}
.v-lab-especimen{font-size:11px;letter-spacing:.28em;text-transform:uppercase;line-height:2}
.v-lab-especimen b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:26px;letter-spacing:0}
.v-lab-medidor{align-self:center;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--hueso)}
.v-lab-medidor i{position:relative;height:1px;background:rgba(248,245,240,.35)}
.v-lab-medidor i::after{content:'';position:absolute;left:var(--p,0%);top:-7px;width:2px;height:15px;background:var(--mutation);box-shadow:0 0 14px var(--mutation)}
.v-lab-num{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(54px,8vw,130px);line-height:.8;font-variant-numeric:tabular-nums;color:var(--hueso)}
.v-lab-num small{font-size:.32em;color:var(--mutation);margin-left:4px}
.v-lab-muestras{display:flex;gap:10px;margin-top:16px}
.v-lab-muestras button{width:58px;height:40px;padding:0;border:1px solid rgba(248,245,240,.35);background:var(--negro) center/cover no-repeat;cursor:pointer;opacity:.6;transition:opacity .3s,border-color .3s,transform .3s var(--suave)}
.v-lab-muestras button:hover{opacity:1;transform:translateY(-3px)}
.v-lab-muestras button.activo{opacity:1;border-color:var(--mutation)}
.v-lab-pista{font-size:10px;letter-spacing:.3em;color:var(--gris);text-transform:uppercase;margin-top:14px}

/* Marquesina (la única del Mutanteverso) */
.v-banda{transform:rotate(-3deg) scale(1.04);background:var(--mutation);color:var(--negro);padding:18px 0;overflow:hidden;white-space:nowrap;margin:120px 0 80px}
.v-banda div{display:inline-block;animation:marquesina 26s linear infinite}
.v-banda b{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(28px,4vw,58px);text-transform:uppercase;margin:0 22px;letter-spacing:-.01em}
.v-banda b:nth-of-type(even){color:transparent;-webkit-text-stroke:1.4px var(--negro)}
.v-banda i{display:inline-block;width:.62em;height:1em;font-size:clamp(28px,4vw,58px);vertical-align:-.1em;background:var(--negro);-webkit-mask:url(isotipo.svg) center/contain no-repeat;mask:url(isotipo.svg) center/contain no-repeat}

/* 4. Cifras */
.v-cifras{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:0;padding:60px 32px 140px;max-width:1400px;margin:0 auto}
.v-cifra{padding:34px 0 0;border-top:1px solid var(--linea)}
.v-cifra:first-child{grid-row:span 2;padding-right:40px}
.v-cifra:nth-child(4){grid-column:2 / 4}
.v-cifra:nth-child(n+2){padding-left:28px;border-left:1px solid var(--linea)}
.v-cifra b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(70px,9vw,150px);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v-cifra:first-child b{font-size:clamp(130px,19vw,320px);color:var(--mutation)}
.v-cifra span{display:block;margin-top:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);max-width:26ch;line-height:1.7}

/* 5. La historia en tres actos (fijada al scroll) */
.v-actos{height:420vh;position:relative}
.v-actos-fijo{position:sticky;top:0;height:100dvh;overflow:hidden;display:grid;place-items:center}
.v-acto-fondo{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.12);transition:opacity 1s var(--suave),transform 6s linear;filter:grayscale(1) contrast(1.1) brightness(.35)}
.v-acto-fondo.on{opacity:1;transform:scale(1)}
.v-acto-fondo.mutado{filter:saturate(1.2) brightness(.45) sepia(.3) hue-rotate(-18deg)}
.v-acto{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6vw;padding:0 8vw;opacity:0;pointer-events:none}
.v-acto.on{opacity:1}
.v-acto i{font-style:normal;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(140px,26vw,420px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--mutation);
  transform:translateY(40px);opacity:0;transition:transform 1s var(--suave),opacity .8s}
.v-acto h3{font-size:clamp(42px,6.6vw,124px);text-transform:uppercase;max-width:13ch;transform:translateY(40px);opacity:0;transition:transform 1s var(--suave) .08s,opacity .8s .08s}
.v-acto p{margin-top:22px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);transform:translateY(30px);opacity:0;transition:transform 1s var(--suave) .16s,opacity .8s .16s}
.v-acto.on i,.v-acto.on h3,.v-acto.on p{transform:none;opacity:1}
.v-acto-final{grid-template-columns:1fr;text-align:center;justify-items:center}
.v-acto-final h3{max-width:none;font-size:clamp(54px,10.5vw,200px)}
.v-acto-final h3 em{font-style:normal;color:var(--mutation);display:block;transform:skewY(-7deg);margin-top:.18em}
.v-actos-marcas{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:grid;gap:14px}
.v-actos-marcas b{width:7px;height:7px;border-radius:50%;background:rgba(248,245,240,.25);transition:background .4s,transform .4s var(--suave)}
.v-actos-marcas b.on{background:var(--mutation);transform:scale(1.5)}

/* 6. Lo que mutamos: filas con imagen que sigue al cursor */
.v-servicios{padding:140px 32px 120px;max-width:1400px;margin:0 auto}
.v-servicios h2{font-size:clamp(54px,9.5vw,180px);text-transform:uppercase;margin-bottom:50px}
.v-servicio{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:20px;padding:22px 0;border-top:1px solid var(--linea);cursor:default}
.v-servicio:last-child{border-bottom:1px solid var(--linea)}
.v-servicio b{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(32px,6.2vw,108px);text-transform:uppercase;line-height:.95;letter-spacing:-.015em;transition:transform .6s var(--suave),color .4s}
.v-servicio span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);transition:color .4s}
.v-servicio:hover b{transform:translateX(18px);color:var(--mutation)}
.v-servicio:hover span{color:var(--hueso)}
.v-servicio img{display:none}
.v-flotante{position:fixed;left:0;top:0;z-index:5;width:260px;aspect-ratio:4/3;pointer-events:none;opacity:0;transform:translate(36px,-60%) scale(.6) rotate(-6deg);
  transition:opacity .35s,transform .5s var(--suave);overflow:hidden}
.v-flotante.on{opacity:1}
.v-flotante img{width:100%;height:100%;object-fit:cover;display:block}

/* 8. El momento de la mutación */
.v-origen{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;padding:120px 32px 140px;max-width:1400px;margin:0 auto}
.v-origen figure{position:relative;overflow:hidden;aspect-ratio:4/5}
.v-origen figure img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);transition:transform 1.6s var(--suave),filter .8s}
.v-origen figure.dentro img{transform:scale(1)}
.v-origen figure:hover img{filter:saturate(1.4) hue-rotate(-14deg) contrast(1.15)}
.v-origen h2{font-size:clamp(52px,7.8vw,140px);text-transform:uppercase}
.v-origen h2 em{font-style:normal;color:var(--mutation);display:block}
.v-origen p{margin-top:28px;font-family:'Archivo',sans-serif;font-weight:500;font-size:clamp(18px,1.7vw,24px);line-height:1.45;color:var(--gris);max-width:40ch}
.v-origen p + p{margin-top:16px}
.v-origen p b{color:var(--hueso);font-weight:800}

/* 9. Preguntas */
.v-faq{padding:60px 32px 140px;max-width:1100px;margin:0 auto}
.v-faq h2{font-size:clamp(54px,9vw,170px);text-transform:uppercase;margin-bottom:40px}
.v-pregunta{border-top:1px solid var(--linea)}
.v-pregunta:last-child{border-bottom:1px solid var(--linea)}
.v-pregunta button{width:100%;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;text-align:left;background:none;border:0;color:var(--hueso);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,34px);padding:26px 0;cursor:pointer;line-height:1.15}
.v-pregunta button i{font-style:normal;width:38px;height:38px;border:1px solid rgba(248,245,240,.35);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:18px;transition:transform .5s var(--suave),background .3s,border-color .3s,color .3s}
.v-pregunta button:hover i{border-color:var(--mutation);color:var(--mutation)}
.v-pregunta.abierta button i{transform:rotate(45deg);background:var(--mutation);border-color:var(--mutation);color:var(--negro)}
.v-respuesta{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--suave)}
.v-respuesta > div{overflow:hidden}
.v-respuesta p{padding:0 60px 28px 0;font-size:15px;line-height:1.75;color:var(--gris);max-width:68ch}
.v-pregunta.abierta .v-respuesta{grid-template-rows:1fr}

/* 10. Cierre */
.v-cierre{min-height:100dvh;display:grid;place-items:center;text-align:center;position:relative;padding:120px 32px;overflow:hidden}
.v-cierre h2{font-size:clamp(54px,13vw,250px);text-transform:uppercase}
.v-cierre h2 em{font-style:normal;color:var(--mutation);display:block;transform:skewY(-7deg)}
.v-cierre button{margin-top:44px;background:var(--mutation);color:var(--negro);border:0;font:inherit;font-weight:700;font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;padding:20px 36px;cursor:pointer;transition:background .3s,transform .2s}
.v-cierre button:hover{background:var(--hueso)}
.v-cierre button:active{transform:scale(.98)}
.v-sticker{position:absolute;right:7vw;bottom:12vh;width:clamp(110px,11vw,160px);aspect-ratio:1;pointer-events:none}
.v-sticker svg{width:100%;height:100%;animation:girar 16s linear infinite}
.v-sticker text{font-family:var(--mono);font-size:11.5px;letter-spacing:.32em;fill:var(--hueso);text-transform:uppercase}
.v-sticker img{position:absolute;left:50%;top:50%;width:22%;transform:translate(-50%,-50%)}
@keyframes girar{to{transform:rotate(360deg)}}
.v-pie{display:flex;justify-content:space-between;gap:20px;padding:26px 32px;border-top:1px solid var(--linea);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.v-pie button{background:none;border:0;font:inherit;color:var(--gris);letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.v-pie button:hover{color:var(--mutation)}

/* Entrada al Mutanteverso desde la portada: sticker giratorio */
.entrar-verso{justify-self:end;position:relative;width:118px;height:118px;background:none;border:0;padding:0;cursor:pointer;color:var(--hueso);-webkit-tap-highlight-color:transparent}
.entrar-verso svg{width:100%;height:100%;animation:girar 18s linear infinite}
.entrar-verso text{font-family:var(--mono);font-size:10.4px;letter-spacing:.3em;fill:currentColor;text-transform:uppercase}
.entrar-verso span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--suave)}
.entrar-verso span img{width:16px;height:auto}
.entrar-verso:hover svg{animation-duration:5s}
.entrar-verso:hover span{transform:scale(1.35) rotate(90deg)}
.entrar-verso:focus-visible{outline:1px solid var(--mutation);outline-offset:4px;border-radius:50%}
.fin-verso{display:block;margin:16px auto 0;background:none;border:0;border-bottom:1px solid var(--mutation);color:var(--hueso);font:inherit;font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:0 0 7px;cursor:pointer}
.fin-verso:hover{color:var(--mutation)}

@media (hover:none){.v-flotante{display:none}}
@media (max-width:760px){
  .verso-barra{padding:16px}
  .verso-marca span{display:none}
  .verso-ancho{padding:0 16px}
  .v-portada{grid-template-columns:1fr;padding:90px 16px 70px;gap:56px}
  .v-m{width:min(62vw,260px)}
  .v-manifiesto-fijo{padding:0 16px}
  .v-lab-ui{padding:76px 16px 20px}
  .v-lab-pie{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .v-lab-num{font-size:46px}
  .v-lab-muestras button{width:50px;height:36px}
  .v-lab-medidor{grid-column:1 / -1;order:3}
  .v-cifras{grid-template-columns:1fr 1fr;padding:40px 16px 100px}
  .v-cifra:first-child{grid-column:1 / -1;grid-row:auto;padding-right:0}
  .v-cifra:nth-child(2){padding-left:0;border-left:0}
  .v-cifra:nth-child(4){padding-left:0;border-left:0;grid-column:1 / -1}
  .v-acto{grid-template-columns:1fr;gap:10px;padding:0 20px;align-content:center}
  .v-actos-marcas{right:14px}
  .v-servicios,.v-faq{padding-left:16px;padding-right:16px}
  .v-servicio{grid-template-columns:72px 1fr;grid-template-rows:auto auto;row-gap:6px}
  .v-servicio img{display:block;grid-row:span 2;width:72px;height:54px;object-fit:cover}
  .v-origen{grid-template-columns:1fr;padding:90px 16px 100px}
  .v-respuesta p{padding-right:0}
  .v-sticker{right:6vw;bottom:6vh}
  .v-pie{flex-direction:column;padding:22px 16px}
  .entrar-verso{width:92px;height:92px;justify-self:end;position:absolute;right:16px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .verso,.verso.abierto{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .v-portada h2 .l > span{transform:none;transition:none}
  .v-manifiesto p span{opacity:1}
  .v-banda div,.v-sticker svg,.entrar-verso svg{animation:none}
  .v-acto-fondo{transition:opacity .3s}
}

/* Títulos que giran (letras.js): mientras esperan, se ven atenuados; al girar, la letra pasa por naranja */
.verso .letras-espera{opacity:.18}
.verso [data-dec],.verso [data-acto],.verso [data-dec-portada]{transition:opacity .3s}
.verso .letras x-l.gira{color:var(--mutation)}
.v-servicio b x-l.gira{color:var(--hueso)}
.v-origen h2 em,.v-faq h2 em,.v-cierre h2 em{display:block}