/* ==========================================================================
   Clientes (body.ma-clc) — 29/10/26, versión 3, leer antes de tocar. Criterio y estructura: cabecera de
   page-clientes.php. Movimiento: assets/js/ma-clientes-c.js.
   · Todo en el eje, como Servicios, la portada y la Metodología: lo grande en UltraLight y la segunda línea de los
     titulares en naranja. Los logotipos, siempre a una tinta (negro o hueso), nunca en naranja.
   · .lp: el portátil y las pegatinas. --lw es el ancho de la tapa; todo lo de dentro se mide en partes de --lw. El
     portátil es una escena 3D (.lp-3d > .lp-rig > base + pantalla); la entrada (.lp.is-pre, la pone un script en línea
     antes de pintar) lo enseña abierto con la foto del estudio en la pantalla, que se mueve despacio; la cámara se acerca
     a la pantalla (zoom anclado en su borde de arriba: nunca sube hacia el titular), se aleja mientras la pantalla se
     cierra y baja a la vista cenital (29/10, 20:51). Colores: data-c en .lp (naranja, amarillo, plata, arena, noche), al
     azar, lo pone el mismo script en línea antes de pintar. Teclas del color del portátil, como el MacBook Neo. Las
     pegatinas, con reborde blanco grueso.
   · .cw: «Ahora, en serio», a sangre en negro. Una esfera de luz (lienzo .cw-orb) se enciende, suelta los logotipos
     hacia su sitio y se apaga. El nombre sale al pasar el cursor. .ce: el cierre.
   ========================================================================== */

.ma-clc{--cle:cubic-bezier(.19,1,.22,1)}
.ma-clc .cl-l{display:block}
.cl-k{margin:0;font-family:var(--f-label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.cl-lead{max-width:52ch;margin:clamp(24px,2.8vw,38px) auto 0;font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.4vw,21px);line-height:1.55;
  color:var(--t-2);text-wrap:balance}
.cl-big{margin:clamp(16px,2vw,26px) auto 0;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(44px,6.6vw,112px);line-height:.98;
  letter-spacing:-.045em;color:var(--bone)}
.cl-big .cl-l+.cl-l{color:var(--orange)}
.cl-h1{margin:clamp(16px,2vw,26px) 0 0;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(50px,7.4vw,128px);line-height:.94;
  letter-spacing:-.05em;color:var(--bone)}
.cl-h1 .cl-l+.cl-l{color:var(--orange)}

/* los titulares suben línea a línea y se enfocan (como Metodología) */
html:not(.norv) .cl-h1[data-rv],html:not(.norv) .cl-big[data-rv]{transform:none;filter:none;transition:opacity .01s linear}
html:not(.norv) .cl-h1 .cl-l,html:not(.norv) .cl-big .cl-l{opacity:0;transform:translate3d(0,.3em,0);filter:blur(10px)}
.cl-h1.in .cl-l,.cl-big.in .cl-l,html:not(.norv) .cl-h1.in .cl-l,html:not(.norv) .cl-big.in .cl-l{opacity:1;transform:none;filter:none;
  transition:opacity 1.2s var(--cle),transform 1.6s var(--cle),filter 1.2s var(--cle)}
html:not(.norv) .cl-h1.in .cl-l+.cl-l,html:not(.norv) .cl-big.in .cl-l+.cl-l{transition-delay:.14s}


/* ---------- 1. El portátil y las pegatinas ---------- */
.lp{--lw:max(280px,min(46vw,calc((100svh - 390px) * 1.45),760px));position:relative;overflow-x:clip;padding-top:clamp(120px,16svh,180px);text-align:center}
.lp-h{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.lp-st{--pb:clamp(70px,13svh,150px);position:relative;display:flex;justify-content:center;padding:clamp(18px,3svh,36px) 0 var(--pb)}
.lp-3d{--l1:#eceef0;--l2:#d3d6d9;--l3:#b9bdc2;--sy:rgba(30,34,38,.16);--sh:rgba(255,255,255,.7);--kk:#f1f2f4;--kw:#c3c7cb;
  position:relative;z-index:1;isolation:isolate;width:var(--lw);aspect-ratio:1.45;perspective:calc(var(--lw) * 2.3);perspective-origin:50% 10%}
/* --kk: las teclas; --kw: el fondo del teclado. Las teclas, del color del portátil (como el MacBook Neo), nunca negras */
.lp[data-c="naranja"] .lp-3d{--l1:#ff9a62;--l2:#f2621f;--l3:#c94512;--sy:rgba(120,30,0,.2);--sh:rgba(255,226,205,.75);--kk:#ff9258;--kw:#d24f17}
.lp[data-c="amarillo"] .lp-3d{--l1:#f6f2b0;--l2:#e4dc78;--l3:#c7bd52;--sy:rgba(90,80,10,.18);--sh:rgba(255,255,240,.8);--kk:#f8f4bd;--kw:#cfc562}
.lp[data-c="arena"] .lp-3d{--l1:#f2ebdf;--l2:#e0d6c3;--l3:#c8bba4;--sy:rgba(60,45,25,.16);--kk:#f5efe4;--kw:#d0c4ac}
.lp[data-c="noche"] .lp-3d{--l1:#454b54;--l2:#30353c;--l3:#1f2328;--sy:rgba(255,255,255,.12);--sh:rgba(255,255,255,.18);--kk:#4c535c;--kw:#1e2226}
.lp-rig{position:absolute;inset:0;transform-style:preserve-3d}
.lp-base,.lp-lid,.lp-disp{border-radius:calc(var(--lw) * .042)}
/* la base: teclado y panel táctil, que solo se ven con la pantalla abierta */
.lp-base{position:absolute;inset:0;transform:translateZ(-2px);background:linear-gradient(170deg,var(--l1),var(--l2) 55%,var(--l3));
  box-shadow:0 calc(var(--lw) * .06) calc(var(--lw) * .1) calc(var(--lw) * -.04) rgba(0,0,0,.65),0 calc(var(--lw) * .015) calc(var(--lw) * .03) rgba(0,0,0,.35)}
.lp-base::after{content:"";position:absolute;left:3%;right:3%;bottom:calc(var(--lw) * -.012);height:calc(var(--lw) * .02);
  border-radius:0 0 calc(var(--lw) * .03) calc(var(--lw) * .03);background:linear-gradient(var(--l3),rgba(0,0,0,.55))}
.lp-kb{--kbm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 329 126'%3E%3Crect x='0' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='23.7' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='47.4' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='71.1' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='94.9' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='118.6' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='142.3' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='166' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='189.7' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='213.4' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='237.1' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='260.9' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='284.6' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='308.3' y='0' width='20.7' height='11' rx='2.6'/%3E%3Crect x='0' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='23' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='46' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='69' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='92' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='115' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='138' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='161' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='184' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='207' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='230' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='253' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='276' y='14' width='20' height='20' rx='2.6'/%3E%3Crect x='299' y='14' width='30' height='20' rx='2.6'/%3E%3Crect x='0' y='37' width='30' height='20' rx='2.6'/%3E%3Crect x='33' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='56' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='79' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='102' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='125' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='148' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='171' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='194' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='217' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='240' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='263' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='286' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='309' y='37' width='20' height='20' rx='2.6'/%3E%3Crect x='0' y='60' width='36.5' height='20' rx='2.6'/%3E%3Crect x='39.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='62.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='85.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='108.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='131.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='154.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='177.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='200.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='223.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='246.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='269.5' y='60' width='20' height='20' rx='2.6'/%3E%3Crect x='292.5' y='60' width='36.5' height='20' rx='2.6'/%3E%3Crect x='0' y='83' width='48' height='20' rx='2.6'/%3E%3Crect x='51' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='74' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='97' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='120' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='143' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='166' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='189' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='212' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='235' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='258' y='83' width='20' height='20' rx='2.6'/%3E%3Crect x='281' y='83' width='48' height='20' rx='2.6'/%3E%3Crect x='0' y='106' width='20' height='20' rx='2.6'/%3E%3Crect x='23' y='106' width='20' height='20' rx='2.6'/%3E%3Crect x='46' y='106' width='20' height='20' rx='2.6'/%3E%3Crect x='69' y='106' width='25' height='20' rx='2.6'/%3E%3Crect x='97' y='106' width='112' height='20' rx='2.6'/%3E%3Crect x='212' y='106' width='25' height='20' rx='2.6'/%3E%3Crect x='240' y='106' width='20' height='20' rx='2.6'/%3E%3Crect x='263' y='116.5' width='20' height='9.5' rx='2.6'/%3E%3Crect x='286' y='106' width='20' height='9' rx='2.6'/%3E%3Crect x='286' y='116.5' width='20' height='9.5' rx='2.6'/%3E%3Crect x='309' y='116.5' width='20' height='9.5' rx='2.6'/%3E%3C/svg%3E");
  position:absolute;left:8%;right:8%;top:9%;height:46%;border-radius:calc(var(--lw) * .012);background:var(--kw);
  box-shadow:inset 0 calc(var(--lw) * .002) calc(var(--lw) * .006) rgba(0,0,0,.2)}
/* el teclado de un portátil (fila de funciones, intro, mayúsculas, barra y flechas): un canto de sombra y las teclas encima */
.lp-kb::before,.lp-kb::after{content:"";position:absolute;inset:calc(var(--lw) * .008);-webkit-mask:var(--kbm) center / 100% 100% no-repeat;
  mask:var(--kbm) center / 100% 100% no-repeat}
.lp-kb::before{background:rgba(0,0,0,.24);transform:translate3d(0,calc(var(--lw) * .0018),0)}
.lp-kb::after{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,0) 55%),var(--kk)}
.lp-tp{position:absolute;left:31%;right:31%;top:61%;height:31%;border-radius:calc(var(--lw) * .014);background:linear-gradient(var(--l2),var(--l3));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
/* la pantalla: por fuera, la tapa (.lp-lid); por dentro, el panel (.lp-disp). Gira sobre la bisagra (el borde de arriba) */
.lp-scr{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d}
.lp-lid{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:radial-gradient(130% 100% at 28% 18%,var(--l1),var(--l2) 58%,var(--l3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 calc(var(--lw) * -.004) calc(var(--lw) * .012) rgba(0,0,0,.16);transition:background .8s ease}
.lp-disp{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateX(180deg);
  background:radial-gradient(70% 60% at 50% 45%,#2a2f33,#0b0c0d 70%);box-shadow:inset 0 0 0 calc(var(--lw) * .02) #090a0b,inset 0 0 0 calc(var(--lw) * .022) var(--l3)}
.lp-dsym,.lp-sym{position:absolute;left:50%;top:50%;aspect-ratio:79.78/68.29;transform:translate(-50%,-50%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79.78 68.29'%3E%3Cpath d='M34.89,32.88v20.3h-9.95v-20.95c-.08-5.3-3.1-8.23-7.01-8.23s-7.99,2.36-7.99,8.89v20.3H0V15.11h9.95v5.63c2.12-4.65,7.34-6.36,10.93-6.36,6.03.33,10.03,2.45,12.15,7.09,3.59-6.28,8.97-7.17,11.98-7.17,9.21,0,14.68,5.95,14.68,17.12v21.77h-9.87v-20.71c0-5.46-3.1-8.48-7.18-8.48-4.48,0-7.740,3.1-7.74,8.89ZM79.78,0h-2.17v68.29h2.17V0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79.78 68.29'%3E%3Cpath d='M34.89,32.88v20.3h-9.95v-20.95c-.08-5.3-3.1-8.23-7.01-8.23s-7.99,2.36-7.99,8.89v20.3H0V15.11h9.95v5.63c2.12-4.65,7.34-6.36,10.93-6.36,6.03.33,10.03,2.45,12.15,7.09,3.59-6.28,8.97-7.17,11.98-7.17,9.21,0,14.68,5.95,14.68,17.12v21.77h-9.87v-20.71c0-5.46-3.1-8.48-7.18-8.48-4.48,0-7.740,3.1-7.74,8.89ZM79.78,0h-2.17v68.29h2.17V0Z'/%3E%3C/svg%3E") center / contain no-repeat}
.lp-sym{width:calc(var(--lw) * .11);background:linear-gradient(135deg,var(--sh),var(--sy) 55%)}
.lp-dsym{width:calc(var(--lw) * .09);background:#f6f5f3;opacity:.9}
/* en la pantalla, la foto del estudio (la oficial, 01); hasta que carga, el «m|» sobre negro. Un reflejo la cruza */
.lp-pic{position:absolute;inset:calc(var(--lw) * .024);overflow:hidden;border-radius:calc(var(--lw) * .005)}
.lp-pic img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:52% 50%;opacity:0;transition:opacity .5s ease}
.lp-pic.is-ok img{opacity:1}
.lp-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(116deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.13) 50%,rgba(255,255,255,0) 60%) 100% 0 / 260% 100% no-repeat}
/* la entrada (3,6 s): abierto, con la foto del estudio moviéndose despacio; la cámara se acerca a la pantalla (zoom
   anclado en el borde de arriba de la pantalla, para no subir hacia el titular); se aleja mientras la pantalla se
   cierra y baja a la vista cenital. El JS espera al final de lpRig para las manos */
@keyframes lpCam{0%,6%{scale:1;animation-timing-function:cubic-bezier(.42,0,.3,1)}40%{scale:1.13;animation-timing-function:cubic-bezier(.5,0,.25,1)}66%,100%{scale:1}}
@keyframes lpScr{0%,40%{transform:rotateX(100deg)}80%,100%{transform:rotateX(0deg)}}
@keyframes lpRig{0%,50%{transform:translate3d(0,calc(var(--lw) * .46),0) rotateX(58deg)}100%{transform:translate3d(0,0,0) rotateX(0deg)}}
@keyframes lpFoto{0%{transform:scale(1.03)}72%,100%{transform:scale(1.17) translate3d(-1.6%,1.2%,0)}}
@keyframes lpLuz{0%,8%{background-position:100% 0}70%,100%{background-position:0 0}}
.lp.is-pre .lp-3d{transform-origin:50% calc(var(--lw) * -.02);animation:lpCam 3.6s both}
.lp.is-pre .lp-scr{animation:lpScr 3.6s cubic-bezier(.55,0,.25,1) both}
.lp.is-pre .lp-rig{animation:lpRig 3.6s cubic-bezier(.6,0,.2,1) both}
.lp.is-pre .lp-pic img{animation:lpFoto 3.6s cubic-bezier(.33,0,.2,1) both}
.lp.is-pre .lp-pic::after{animation:lpLuz 3.6s ease-in-out both}
/* al terminar de pegar, un brillo recorre el símbolo */
.lp.is-done .lp-sym{animation:lpSym 1.8s var(--cle) .2s 1 both}
@keyframes lpSym{0%{filter:brightness(1)}35%{filter:brightness(1.9)}100%{filter:brightness(1)}}

/* las pegatinas, con reborde blanco grueso (como las pegatinas de mensajería) */
/* las pegatinas que llegan en la mano no pasan del borde de abajo del escenario (como las manos) */
.lp-stk{position:absolute;inset:0;border-radius:inherit;clip-path:inset(-150vh -150vw calc(-1 * var(--pb)) -150vw)}
.lp-s{--o:calc(var(--lw) * .0095);--q:calc(var(--o) * .7071);--b:calc(var(--lw) * .0085);box-sizing:border-box;position:absolute;display:flex;align-items:center;
  justify-content:center;visibility:hidden;will-change:transform;transition:scale .35s var(--cle)}
.lp-s.is-on{visibility:visible}
.lp-s i{display:block;flex:none;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat}
/* troquelada: el reborde blanco sigue la forma del logotipo */
.lp-s.lp-dc{filter:drop-shadow(var(--o) 0 0 #fff) drop-shadow(calc(var(--o) * -1) 0 0 #fff) drop-shadow(0 var(--o) 0 #fff) drop-shadow(0 calc(var(--o) * -1) 0 #fff)
  drop-shadow(var(--q) var(--q) 0 #fff) drop-shadow(calc(var(--q) * -1) calc(var(--q) * -1) 0 #fff) drop-shadow(var(--q) calc(var(--q) * -1) 0 #fff)
  drop-shadow(calc(var(--q) * -1) var(--q) 0 #fff) drop-shadow(0 1px 1.6px rgba(0,0,0,.32))}
.lp-s.lp-dc i{background:#17191a}
.lp-s.lp-wt,.lp-s.lp-nk,.lp-s.lp-sd,.lp-s.lp-ci{box-shadow:0 1px 2px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.08)}
.lp-s.lp-wt{background:#fff;border-radius:calc(var(--lw) * .012)}
.lp-s.lp-wt i,.lp-s.lp-sd i{background:#17191a}
.lp-s.lp-nk{background:#16191a;border:var(--b) solid #fff;border-radius:calc(var(--lw) * .016)}
.lp-s.lp-nk i,.lp-s.lp-ci i{background:#f6f5f3}
.lp-s.lp-sd{background:#e9e3d3;border:var(--b) solid #fff;border-radius:999px}
.lp-s.lp-ci{background:#16191a;border:var(--b) solid #fff;border-radius:50%}
.lp.is-done .lp-s:hover{scale:1.07}

/* las manos, por encima de la tapa y de las pegatinas */
.lp-hands{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent);mask-image:linear-gradient(to bottom,#000 84%,transparent)}
.lp-hd{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;visibility:hidden}
.lp-hd img{position:absolute;display:block;max-width:none;height:auto;filter:drop-shadow(0 0 calc(var(--lw) * .03) rgba(0,0,0,.42));user-select:none}

.lp-ft{position:absolute;left:0;right:0;bottom:clamp(16px,4svh,46px);z-index:4;display:flex;justify-content:center}
.lp-otra{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid rgba(246,245,243,.22);border-radius:999px;background:rgba(31,35,34,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--f-label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone);cursor:pointer;opacity:0;visibility:hidden;transform:translate3d(0,6px,0);
  transition:opacity .5s ease,transform .7s var(--cle),border-color .3s ease,visibility 0s linear .5s}
.lp-otra::before{content:"\21BB";font-size:13px;letter-spacing:0;color:var(--orange)}
.lp-otra:hover{border-color:var(--orange)}
.lp.is-done .lp-otra{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .6s,transform .9s var(--cle) .6s,border-color .3s ease,visibility 0s}
.lp:not(.is-js) .lp-ft{display:none}

/* ---------- 2. Ahora, en serio: a sangre en negro, la esfera de luz y el muro ---------- */
.cw{padding:clamp(150px,15vw,240px) 0 clamp(120px,12vw,200px);text-align:center;
  background:linear-gradient(to bottom,var(--ink),#000 clamp(120px,12vw,200px),#000 calc(100% - clamp(100px,10vw,180px)),var(--ink))}
.cw-h{display:flex;flex-direction:column;align-items:center}
.cw-f{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;max-width:900px;margin-top:clamp(26px,2.8vw,38px)}
.cw-fb{padding:8px 0;border:0;background:none;font-family:var(--f-light);font-weight:300;font-size:13px;line-height:1.2;color:var(--t-3);cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:7px;
  transition:color .3s ease,text-decoration-color .3s ease}
.cw-fb:hover{color:var(--bone)}
.cw-fb.on{color:var(--bone);text-decoration-color:var(--orange)}
.cw-fb:focus-visible{outline:1px solid var(--orange);outline-offset:4px}

.cw-st{--tw:160px;--th:104px;--lk:.86;position:relative;width:min(1312px,94vw);margin:clamp(40px,4.4vw,64px) auto 0}
.cw-orb{position:absolute;left:50%;top:var(--oy,50%);z-index:3;display:none;width:var(--os,520px);height:var(--os,520px);margin:calc(var(--os,520px) / -2) 0 0 calc(var(--os,520px) / -2);
  pointer-events:none}
.cw-st.is-orb .cw-orb{display:block}
.cw-g{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none}
.cw-st.is-js:not(.is-shown) .cw-t{opacity:0}
.cw-t{position:relative;flex:0 0 var(--tw);height:var(--th);display:flex;align-items:center;justify-content:center}
.cw-t.is-off{display:none}
.cw-mk{display:block;flex:none;width:calc(var(--w) * var(--lk));height:calc(var(--h) * var(--lk));max-width:calc(var(--tw) - 30px);background:var(--bone);
  -webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat;opacity:.8;transition:opacity .35s ease,transform .6s var(--cle)}
.cw-n{position:absolute;left:50%;bottom:9px;max-width:calc(var(--tw) - 12px);overflow:hidden;font-family:var(--f-label);font-size:9.5px;letter-spacing:.14em;
  line-height:1.2;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:var(--bone);pointer-events:none;opacity:0;
  transform:translate3d(-50%,5px,0);transition:opacity .3s ease,transform .5s var(--cle)}
.cw-n em{font-style:normal;color:var(--orange)}
.cw-n em::after{content:"\2009\2192"}
.cw-t.is-caso::after{content:"";position:absolute;right:18px;top:16px;width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:.85}
.cw-t:hover .cw-mk,.cw-t:focus-within .cw-mk{opacity:1;transform:scale(1.08)}
.cw-t:hover .cw-n,.cw-t:focus-within .cw-n{opacity:1;transform:translate3d(-50%,0,0)}
.cw-go{position:absolute;inset:0;z-index:2;border-radius:12px}
.cw-go:focus-visible{outline:1px solid var(--orange);outline-offset:-6px}

/* ---------- 3. Cierre ---------- */
.ce{padding:clamp(110px,12vw,180px) 0 clamp(90px,10vw,150px);text-align:center}
.ce .cl-big{margin-top:0}
.ce-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin-top:clamp(30px,4vw,52px)}

/* ---------- iPad ---------- */
@media (max-width:1100px){
  .lp{--lw:max(280px,min(56vw,calc((100svh - 360px) * 1.45),700px))}
  .cw-st{--tw:150px;--th:100px;--lk:.8}
}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .lp{--lw:max(260px,min(88vw,calc((100svh - 300px) * 1.45)));padding-top:clamp(110px,16svh,150px)}
  .cl-h1{font-size:13.4vw}
  .cl-big{font-size:11.2vw}
  .lp-st{--pb:clamp(80px,14svh,130px)}
  .cw-f{gap:2px 18px;padding:0 4px}
  .cw-fb{font-size:12.5px;padding:6px 0}
  .cw-st{--tw:calc((94vw - 4px) / 3);--th:86px;--lk:.66}
  .cw-t.is-caso::after{right:10px;top:10px}
  .cw-n{font-size:8.5px;letter-spacing:.1em;bottom:6px}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .lp.is-pre .lp-3d,.lp.is-pre .lp-scr,.lp.is-pre .lp-rig,.lp.is-pre .lp-pic img,.lp.is-pre .lp-pic::after{animation:none}
  .lp-s,.cw-mk,.cw-n{transition:none}
}