/* ==========================================================================
   Metodología centrada (body.ma-metodo) — 29/10/26, leer antes de tocar. Plantilla y criterio: cabecera de
   page-metodologia-centrada.php (al publicar, page-metodologia.php). Movimiento: assets/js/ma-metodo.js.
   · Todo en el eje, al estilo de Servicios y de la portada: textos centrados con medida corta; lo grande en
     UltraLight; la segunda línea de los titulares, en naranja.
   · El método (.mx) es un tramo fijo de cinco pasos: arriba el índice, en medio el dibujo (lienzo) y debajo
     el texto del paso, que cambia sin tapar nada. --run es el recorrido; cada paso, una quinta parte.
   · Sin JavaScript o con movimiento reducido (.mx sin .mx-js): los cinco pasos uno debajo de otro, sin dibujo.
   ========================================================================== */

.ma-metodo{--mxe:cubic-bezier(.19,1,.22,1)}
.ma-metodo .mx-l{display:block}

/* ---------- Entrada ---------- */
.mx-hero{padding:clamp(150px,24svh,240px) 0 clamp(64px,9svh,110px);text-align:center}
.mx-hero .wrap{display:flex;flex-direction:column;align-items:center}
.mx-k{margin:0;font-family:var(--f-label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.mx-h1{margin:clamp(18px,2.4vw,30px) 0 0;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(56px,9.4vw,160px);line-height:.94;
  letter-spacing:-.05em;color:var(--bone)}
.mx-h1 .mx-l+.mx-l{color:var(--orange)}
.mx-lead{max-width:50ch;margin:clamp(26px,3vw,40px) 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}
/* el titular sube línea a línea y se enfoca */
html:not(.norv) .mx-h1[data-rv]{transform:none;transition:opacity .01s linear}
html:not(.norv) .mx-h1 .mx-l{opacity:0;transform:translate3d(0,.3em,0);filter:blur(10px)}
.mx-h1.in .mx-l,html:not(.norv) .mx-h1.in .mx-l{opacity:1;transform:none;filter:none;transition:opacity 1.2s var(--mxe),transform 1.6s var(--mxe),filter 1.2s var(--mxe)}
html:not(.norv) .mx-h1.in .mx-l+.mx-l{transition-delay:.14s}

/* ---------- El método: tramo fijo ---------- */
.mx{--run:400svh;position:relative;height:calc(100svh + var(--run))}
.mx-anc{position:absolute;left:0;top:calc(var(--run) * (var(--k) + .62) / 5.25);width:1px;height:1px;pointer-events:none}
.mx-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;overflow:hidden;
  padding:calc(24px + 55px + clamp(12px,2.2svh,26px)) 0 clamp(22px,4svh,48px)}
.mx-nav{position:relative;flex:none;width:min(90%,760px)}
.mx-nav ol{display:flex;justify-content:space-between;margin:0;padding:0 0 12px;list-style:none}
.mx-nav a{display:flex;align-items:baseline;gap:8px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--t-3);transition:color .4s ease}
.mx-nav a span{transition:color .4s ease}
.mx-nav em{font-style:normal}
.mx-nav a:hover,.mx-nav a.on{color:var(--bone)}
.mx-nav a.on span{color:var(--orange)}
.mx-bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.mx-bar::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.mx-cvw{position:relative;flex:1 1 auto;min-height:0;width:100%;margin:clamp(6px,1.4svh,16px) 0 clamp(12px,2.4svh,28px)}
.mx-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.mx-txt{display:grid;flex:none;width:min(90%,760px);text-align:center}
.mx-s{grid-area:1/1;display:flex;flex-direction:column;align-items:center}
.mx-n{display:none;margin:0 0 10px;font-family:var(--f-label);font-size:11px;letter-spacing:.2em;color:var(--orange)}
.mx-st{margin:0;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(40px,min(5.4vw,8svh),84px);line-height:1;letter-spacing:-.045em;color:var(--bone)}
.mx-sp{max-width:52ch;margin:clamp(10px,1.6svh,18px) 0 0;font-family:var(--f-light);font-weight:300;font-size:clamp(15.5px,1.15vw,18px);line-height:1.5;
  color:var(--t-2);text-wrap:balance}
.mx-q{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(14px,2svh,22px) 0 0;padding:0;list-style:none}
.mx-q li{padding:7px 14px;border:1px solid rgba(246,245,243,.16);border-radius:999px;font-family:var(--f-light);font-weight:300;font-size:13.5px;line-height:1.25;color:var(--bone)}
.mx-r{margin:clamp(14px,2svh,22px) 0 0;font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.35;color:var(--bone);text-wrap:balance}
.mx-r span{display:block;margin-bottom:6px;font-family:var(--f-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
/* con JavaScript, el texto del paso cambia en su sitio: sale el anterior y entra el siguiente, enfocándose */
.mx-js .mx-s{opacity:0;visibility:hidden;transform:translate3d(0,14px,0);filter:blur(6px);
  transition:opacity .45s ease,transform .7s var(--mxe),filter .45s ease,visibility 0s linear .45s}
.mx-js .mx-s.on{opacity:1;visibility:visible;transform:none;filter:none;
  transition:opacity .7s ease .1s,transform 1s var(--mxe) .1s,filter .7s ease .1s,visibility 0s}
/* sin JavaScript o con movimiento reducido: los pasos en la página, uno debajo de otro */
.mx:not(.mx-js){height:auto;padding:clamp(40px,6vw,90px) 0 0}
.mx:not(.mx-js) .mx-pin{position:relative;height:auto;overflow:visible;padding:0}
.mx:not(.mx-js) .mx-nav,.mx:not(.mx-js) .mx-cvw{display:none}
.mx:not(.mx-js) .mx-txt{display:flex;flex-direction:column;gap:clamp(80px,10vw,140px)}
.mx:not(.mx-js) .mx-n{display:block}

/* ---------- El estudio, de tarjeta a sangre (--gi 0 → 1 y --gp −1 → 1, del JS) ---------- */
.mx-gen{--gi:1;margin-top:clamp(40px,6vw,96px)}
.mx-gen-f{position:relative;height:min(56.25vw,88svh);overflow:hidden;background:var(--ink2);
  clip-path:inset(0 calc(5% * (1 - var(--gi))) round calc(18px * (1 - var(--gi))))}
.mx-gen img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;
  transform:translate3d(0,calc(var(--gp,0) * 3.5%),0) scale(calc(1.07 - .07 * var(--gi)));will-change:transform}
.mx-gen.mx-js{--gi:0}

/* ---------- Principios ---------- */
.mx-pr{padding:clamp(100px,12vw,180px) 0 0;text-align:center}
.mx-pr .wrap{display:flex;flex-direction:column;align-items:center}
.mx-prg{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,4vw,56px)}
.mx-prg::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.mx-prg article{position:relative;padding:clamp(30px,3.4vw,48px) clamp(14px,2vw,32px) 0}
.mx-prg article[data-rv]{transition-delay:var(--d,0s)}
.mx-prg article+article::before{content:"";position:absolute;left:0;top:clamp(30px,3.4vw,48px);bottom:0;width:1px;background:var(--line)}
.mx-prg h2{margin:0;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(34px,3.4vw,56px);line-height:1;letter-spacing:-.04em;color:var(--bone)}
.mx-prg p{max-width:30ch;margin:16px auto 0;font-family:var(--f-light);font-weight:300;font-size:clamp(15.5px,1.15vw,18px);line-height:1.5;color:var(--t-2);text-wrap:balance}

/* ---------- Cierre ---------- */
.mx-end{padding:clamp(110px,14vw,200px) 0 clamp(80px,10vw,150px);text-align:center}
.mx-big{margin:0 auto;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(44px,7.4vw,124px);line-height:.98;letter-spacing:-.045em;color:var(--bone)}
.mx-big .o{color:var(--orange)}
html:not(.norv) .mx-big[data-rv]{transform:none;transition:opacity .01s linear}
html:not(.norv) .mx-big .mx-l{opacity:0;transform:translate3d(0,.3em,0);filter:blur(10px)}
.mx-big.in .mx-l,html:not(.norv) .mx-big.in .mx-l{opacity:1;transform:none;filter:none;transition:opacity 1.2s var(--mxe),transform 1.6s var(--mxe),filter 1.2s var(--mxe)}
html:not(.norv) .mx-big.in .mx-l+.mx-l{transition-delay:.14s}
.mx-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin-top:clamp(30px,4vw,52px)}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .mx{--run:350svh}
  .mx-hero{padding-top:clamp(120px,20svh,170px)}
  .mx-h1{font-size:15.5vw}
  .mx-pin{padding-top:calc(16px + 55px + 14px)}
  .mx-nav a{font-size:11px;letter-spacing:.14em}
  .mx-nav em{display:none}
  .mx-st{font-size:clamp(34px,10vw,44px)}
  .mx-sp{max-width:34ch;font-size:15px}
  .mx-q{gap:6px}
  .mx-q li{padding:6px 11px;font-size:12.5px}
  .mx-r{font-size:16.5px}
  .mx-gen-f{height:min(118vw,76svh)}
  .mx-prg{grid-template-columns:minmax(0,1fr)}
  .mx-prg::before{display:none}
  .mx-prg article{padding:30px 0 6px;border-top:1px solid var(--line)}
  .mx-prg article+article::before{display:none}
  .mx-big{font-size:11.6vw}
}
@media (prefers-reduced-motion:reduce){
  .mx-gen,.mx-gen.mx-js{--gi:1;--gp:0}
}