/* ==========================================================================
   Mariona Agency 2028 · Fichas de caso (tpl-caso.php), 29/9/26 — leer antes de tocar.

   · Color: vive en el <body> (clase .cx) con variables registradas (@property), como en
     Quiénes somos: fondo, texto, filetes y acento se funden a la vez en 0,8 s. Cada sección
     declara el suyo en data-bg / data-fg (el color sale de las propias piezas del caso) y
     assets/js/ma-caso.js pinta la página con la sección que ha cruzado el 55 % de la pantalla.
     Las escenas de piezas (data-cx-stage) cambian el color con cada pieza.
   · Sin JavaScript, cada sección pinta su fondo (--bg / --fg en línea) y las escenas se ven
     como una lista. Con movimiento reducido: sin fundidos, sin paralaje ni escenas con gota,
     y los vídeos quietos en su póster.
   · Retícula: todo dentro de .wrap (la medida del menú). A sangre solo imágenes y vídeos.
   · Letra grande en Neue Haas Display 25 XThin (UltraLight, peso 200); cuerpos en Light.
   · Rótulos pequeños: en naranja solo sobre tinta; sobre color, en el color del texto
     (el naranja no llega al contraste mínimo sobre claros).
   ========================================================================== */

@font-face{font-family:'nh-ultralight';src:url('../fonts/Nh-25xthin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}

@property --cx-bg{syntax:'<color>';inherits:true;initial-value:#F6F5F3}
@property --cx-fg{syntax:'<color>';inherits:true;initial-value:#1F2322}
@property --cx-fg2{syntax:'<color>';inherits:true;initial-value:rgba(31,35,34,.8)}
@property --cx-fg3{syntax:'<color>';inherits:true;initial-value:rgba(31,35,34,.58)}
@property --cx-line{syntax:'<color>';inherits:true;initial-value:rgba(31,35,34,.16)}
@property --cx-ac{syntax:'<color>';inherits:true;initial-value:#1F2322}

body.cx{background-color:var(--cx-bg);color:var(--cx-fg);
  transition:--cx-bg .8s ease-in-out,--cx-fg .8s ease-in-out,--cx-fg2 .8s ease-in-out,--cx-fg3 .8s ease-in-out,--cx-line .8s ease-in-out,--cx-ac .8s ease-in-out}
body.cx.cx-sin,html.cx-rm body.cx{transition:none}
body.cx .ma-foot{color:var(--bone)}
html:not(.cx-js) .cx-s{background-color:var(--bg);color:var(--fg);--cx-fg:var(--fg);--cx-ac:var(--fg)}

body.cx main .lk{color:var(--cx-fg);border-bottom-color:var(--cx-line)}
body.cx .biglink{border-color:var(--cx-line)}
body.cx .biglink .t{color:var(--cx-fg)}
body.cx .biglink .s{color:var(--cx-fg3)}

/* ---------- Tipos comunes ---------- */
.cx-s{position:relative}
.cx-k{display:flex;gap:16px;align-items:baseline;margin:0 0 clamp(20px,2.6vw,32px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-ac)}
.cx-k span{color:var(--cx-fg3)}
.cx-h{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(40px,4.9vw,80px);line-height:1.02;letter-spacing:-.025em;color:var(--cx-fg);text-wrap:balance}
.cx-h--xl{font-size:clamp(46px,8.2vw,138px);line-height:.96;letter-spacing:-.035em;text-wrap:initial}
.cx-h span{display:block}
.cx-lede{margin:0;font-family:var(--f-light);font-weight:300;font-size:clamp(19px,1.62vw,25px);line-height:1.46;letter-spacing:-.004em;color:var(--cx-fg);max-width:34em}
.cx-p{margin:0;font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:var(--cx-fg2);max-width:44ch}
.cx-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:28px;margin-top:clamp(30px,4vw,60px)}
.cx-cols>*{grid-column:1/span 7}
.cx-cols>.cx-p{grid-column:9/span 4;align-self:end}
.cx-cols--r>*,.cx-cols--r>.cx-p{grid-column:7/span 6;align-self:start}

.cx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:start}
.c-12{grid-column:span 12}.c-8{grid-column:span 8}.c-7{grid-column:span 7}.c-5{grid-column:span 5}.c-4{grid-column:span 4}
.cx-dom-end>.cx-p{grid-column:1/span 4;align-self:end}
.cx-dom-end>.cx-f{grid-column:8/span 5}
.cx-o-bolsa{object-position:62% 50%}
.cx-stack{display:grid;gap:clamp(12px,1.6vw,22px)}

/* Imágenes: tarjeta redondeada (medida del menú) o a sangre, con paralaje suave (data-cx-px) */
.cx-f{position:relative;margin:0;overflow:hidden}
.cx-f img,.cx-f video{display:block;width:100%;height:100%;object-fit:cover}
.cx-f--r{border-radius:18px;aspect-ratio:var(--ar,auto);background:color-mix(in srgb,var(--cx-fg) 7%,transparent);transform:translateZ(0)}
.cx-f--bleed{height:clamp(420px,94svh,1180px);margin:clamp(90px,13vw,170px) 0;background:color-mix(in srgb,var(--cx-fg) 7%,transparent)}
.cx-f[data-cx-px] img{position:absolute;left:0;top:-7%;height:114%;transform:translate3d(0,var(--py,0%),0);will-change:transform}
.cx-f--bleed[data-cx-px] img{top:-9%;height:118%}

/* Revelado */
html.cx-js [data-cx-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.cx-js [data-cx-rv].in{opacity:1;transform:none}
html.cx-js .cx-f[data-cx-rv]{transform:none;transition:opacity 1s ease}
html.cx-js .cx-f[data-cx-rv]>img{scale:1.06;transition:scale 1.6s cubic-bezier(.2,.7,.2,1)}
html.cx-js .cx-f[data-cx-rv].in>img{scale:1}

/* ---------- Portada: el nombre y la pieza, que se abre a pantalla completa ---------- */
.cx-hero{height:175svh}
.cx-hero-st{position:sticky;top:0;height:100svh;overflow:hidden}
.cx-hero-f{position:absolute;inset:0;margin:0;
  clip-path:inset(calc(var(--t0,36svh) * (1 - var(--q,0))) calc(var(--edge) * (1 - var(--q,0))) calc(var(--b0,16svh) * (1 - var(--q,0))) calc(var(--edge) * (1 - var(--q,0))) round calc(18px * (1 - var(--q,0))))}
.cx-hero-f picture{display:block;width:100%;height:100%;animation:cx-asienta 1.8s cubic-bezier(.2,.7,.2,1) .15s both}
.cx-hero-f img{width:100%;height:100%;object-fit:cover;object-position:47% 50%;transform:scale(calc(1.07 - .07 * var(--q,0)))}
@keyframes cx-asienta{from{transform:scale(1.1)}}
.cx-hero-top{position:absolute;left:0;right:0;top:calc(24px + 55px + clamp(14px,3svh,34px));z-index:2}
.cx-hero-t{margin:0;overflow:hidden;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:var(--fs,19.4vw);line-height:.84;letter-spacing:-.045em;color:var(--cx-fg);white-space:nowrap;padding-bottom:.02em}
.cx-fit{display:inline-block;animation:cx-sube 1.25s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes cx-sube{from{transform:translateY(104%)}}
.cx-hero-cred{position:absolute;left:0;right:0;bottom:clamp(16px,3svh,30px);z-index:2;opacity:calc(1 - var(--q,0) * 2.4)}
.cx-cred{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:12px;margin:0;border-top:1px solid var(--cx-line);padding-top:14px;animation:cx-aparece .9s ease .8s both}
@keyframes cx-aparece{from{opacity:0}}
.cx-cred dt{font-family:var(--f-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
.cx-cred dd{margin:5px 0 0;font-family:var(--f-light);font-weight:300;font-size:14px;line-height:1.4;color:var(--cx-fg)}
html:not(.cx-js) .cx-hero{height:100svh}

/* ---------- Entrada al caso ---------- */
.cx-intro{padding:clamp(120px,18svh,210px) 0 clamp(40px,6vw,80px)}
.cx-num{list-style:none;margin:clamp(70px,9vw,130px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);border-top:1px solid var(--cx-line)}
.cx-num li{padding-top:22px}
.cx-n{display:block;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(54px,6.4vw,104px);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--cx-fg);white-space:nowrap}
.cx-nl{display:block;margin-top:16px;max-width:20ch;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--cx-fg3)}

/* ---------- Memoria: línea de tiempo que se dibuja al leer ---------- */
.cx-mem{padding:clamp(40px,6vw,90px) 0 clamp(120px,17svh,200px)}
.cx-tl{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(18px,2.4vw,40px);padding-block:clamp(84px,7vw,110px)}
.cx-tl-e{position:relative;grid-row:1}
.cx-tl-a{grid-column:1}.cx-tl-b{grid-column:3;text-align:right}
.cx-tl-y{display:block;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(56px,9vw,150px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-tl-t{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3);white-space:nowrap}
.cx-tl-e .cx-tl-t{position:absolute;top:100%;margin-top:clamp(16px,1.7vw,24px)}
.cx-tl-a .cx-tl-t{left:0}.cx-tl-b .cx-tl-t{right:0}
.cx-tl-b{opacity:calc(.25 + var(--vp,1) * .75)}
.cx-tl-l{grid-column:2;grid-row:1;position:relative;list-style:none;margin:0;padding:0;height:1px;background:var(--cx-line)}
.cx-tl-l::after{content:"";position:absolute;inset:0;background:#FF4D00;transform-origin:0 50%;transform:scaleX(var(--vp,1))}
.cx-tl-l li{position:absolute;left:calc(var(--x) * 100%);top:0;width:0;height:0}
.cx-tl-l li::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--cx-fg);transition:scale .6s var(--ease-spring)}
.cx-tl-l li>span{position:absolute;left:0;transform:translateX(-50%);text-align:center}
.cx-tl-l .cx-tl-py{top:20px;font-family:var(--f-text);font-size:13.5px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--cx-fg)}
.cx-tl-l .cx-tl-t{top:42px}
.cx-tl-l li.up .cx-tl-py{top:auto;bottom:42px}
.cx-tl-l li.up .cx-tl-t{top:auto;bottom:20px}
html.cx-js .cx-tl-l li{opacity:.18;transition:opacity .6s ease}
html.cx-js .cx-tl-l li::before{scale:.4}
html.cx-js .cx-tl-l li.on{opacity:1}
html.cx-js .cx-tl-l li.on::before{scale:1}

/* ---------- Escena de piezas: una a una, y la página toma su color ---------- */
.cx-sm{height:calc(var(--n,6) * 78svh + 100svh)}
.cx-sm-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.cx-sm-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.cx-sm-x .cx-p{margin-top:clamp(20px,2.4vw,30px)}
.cx-sm-v{position:relative;justify-self:end;aspect-ratio:1;width:min(100%,calc(100svh - 170px))}
.cx-sm-f{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;opacity:0;transform:scale(.92) translateY(5%);transition:opacity .75s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.cx-sm-f.on{opacity:1;transform:none;z-index:1}
.cx-sm-f.out{transform:scale(1.04) translateY(-4%)}
.cx-sm-f video{display:block;width:100%;height:100%;object-fit:cover}
html:not(.cx-js) .cx-sm{height:auto;padding:120px 0}
html:not(.cx-js) .cx-sm-st{position:static;height:auto}
html:not(.cx-js) .cx-sm-v{display:grid;grid-template-columns:1fr 1fr;gap:12px;aspect-ratio:auto}
html:not(.cx-js) .cx-sm-f{position:relative;opacity:1;transform:none;aspect-ratio:1}

/* ---------- Redes: el feed y la tira de campañas ---------- */
.cx-feed{padding:clamp(110px,15svh,180px) 0 clamp(90px,12svh,150px)}
.cx-feed .cx-cols{margin-top:clamp(36px,5vw,70px)}
.cx-band{margin-top:clamp(56px,7vw,100px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cx-band.drag{cursor:grabbing}
.cx-band-t{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;padding-left:var(--edge);will-change:transform}
.cx-band-f{flex:0 0 auto;margin:0;width:clamp(180px,18.5vw,290px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:rgba(246,245,243,.06)}
.cx-band-f video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* ---------- Campaña: la palabra cambia, la promesa se queda ---------- */
.cx-dom{padding-top:clamp(120px,18svh,210px)}
.cx-dom-sc{height:calc(var(--n,5) * 70svh + 100svh)}
.cx-dom-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.cx-dom-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}
.cx-dom-w{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(40px,6.9vw,108px);line-height:1.04;letter-spacing:-.03em;color:var(--cx-fg)}
.cx-dom-a{display:grid;overflow:hidden;padding-bottom:.06em}
.cx-dom-a span{grid-area:1/1;white-space:nowrap;transform:translateY(105%);transition:transform .85s cubic-bezier(.65,0,.35,1)}
.cx-dom-a span.on{transform:none}
.cx-dom-a span.out{transform:translateY(-105%)}
.cx-dom-b{display:block}
.cx-dom-v{position:relative;justify-self:end;aspect-ratio:9/16;height:min(calc(100svh - 170px),780px)}
.cx-dom-f{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;opacity:0;transform:translateY(6%) scale(.96);transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.2,1);box-shadow:0 30px 70px rgba(31,35,34,.14)}
.cx-dom-f.on{opacity:1;transform:none;z-index:1}
.cx-dom-f video{display:block;width:100%;height:100%;object-fit:cover}
.cx-dom-end{margin-bottom:clamp(40px,6vw,80px)}
html:not(.cx-js) .cx-dom-sc{height:auto}
html:not(.cx-js) .cx-dom-st{position:static;height:auto;padding:80px 0}
html:not(.cx-js) .cx-dom-a span{transform:none;position:static}
html:not(.cx-js) .cx-dom-a span:not(:first-child),html:not(.cx-js) .cx-dom-f:not(:first-child){display:none}
html:not(.cx-js) .cx-dom-f{opacity:1;transform:none}

/* ---------- Punto de venta ---------- */
.cx-farm{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.cx-reg{margin:clamp(70px,9vw,130px) 0 clamp(70px,9vw,130px);max-width:17em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,4.7vw,78px);line-height:1.1;letter-spacing:-.025em;color:var(--cx-fg)}
html.cx-js .cx-reg span{opacity:.2;transition:opacity .5s ease}
html.cx-js .cx-reg span.on{opacity:1}

/* ---------- Editorial: las gamas en franjas ---------- */
.cx-voz{padding:clamp(120px,18svh,210px) 0 clamp(60px,8vw,110px)}
.cx-gam{list-style:none;margin:clamp(60px,8vw,110px) 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:clamp(280px,46svh,480px);border-radius:18px;overflow:hidden;align-items:end}
.cx-gam li{position:relative;height:100%;background:var(--c);color:var(--t);transform-origin:50% 100%;transform:scaleY(var(--s,1))}
.cx-gam span{position:absolute;left:clamp(10px,1vw,16px);bottom:clamp(14px,1.4vw,20px);writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.cx-voz-g{margin-top:clamp(12px,1.6vw,22px)}
.cx-voz-g>.cx-p{align-self:end;padding-bottom:6px}
.cx-voz .cx-f--bleed+.cx-voz-g{margin-top:0}
.cx-f--dark{background:#3a3d3c}

/* ---------- Eventos ---------- */
.cx-enc{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.cx-enc .cx-f--bleed{margin-bottom:clamp(12px,1.6vw,22px)}

/* ---------- Digital: la web se recorre sola al bajar ---------- */
.cx-dig{padding:clamp(120px,18svh,210px) 0 clamp(110px,15svh,180px)}
.cx-dig-g{margin-top:clamp(60px,8vw,110px);align-items:center}
.cx-scr-d{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 34px 90px rgba(31,35,34,.18),0 2px 6px rgba(31,35,34,.08)}
.cx-scr-bar{height:30px;display:flex;gap:7px;align-items:center;padding:0 14px;background:#F1F0EC;border-bottom:1px solid rgba(31,35,34,.07)}
.cx-scr-bar i{width:9px;height:9px;border-radius:50%;background:#D8D5CF}
.cx-scr-w{position:relative;aspect-ratio:16/11;overflow:hidden}
.cx-scr-i{display:block;width:100%;height:auto;transform:translate3d(0,calc(var(--vp,0) * var(--sh,0px) * -1),0);will-change:transform}
.cx-ipad{object-position:36% 50%}

/* ---------- El proyecto ---------- */
.cx-pro{padding:clamp(130px,18svh,210px) 0 clamp(90px,12svh,150px)}
.cx-pro-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.cx-pro-g h3{margin:0 0 16px;font-family:var(--f-label);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-ac)}
.cx-pro-g p{margin:0;font-family:var(--f-light);font-weight:300;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--cx-fg2)}
.cx-ft{margin:clamp(70px,9vw,120px) 0 0;border-top:1px solid var(--cx-line)}
.cx-ft div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(16px,2vw,28px);padding:18px 0;border-bottom:1px solid var(--cx-line)}
.cx-ft dt{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;color:var(--cx-fg3)}
.cx-ft dd{margin:0;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--cx-fg)}
.cx-faq{margin-top:clamp(90px,11vw,150px)}
.cx-faq-t{margin:0 0 clamp(20px,3vw,36px);font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(36px,4.2vw,66px);line-height:1.04;letter-spacing:-.025em;color:var(--cx-fg)}
.cx-faq details{border-top:1px solid var(--cx-line)}
.cx-faq details:last-of-type{border-bottom:1px solid var(--cx-line)}
.cx-faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-family:var(--f-light);font-weight:300;font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:var(--cx-fg)}
.cx-faq summary::-webkit-details-marker{display:none}
.cx-faq summary::before,.cx-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1px;background:currentColor;transition:transform .4s var(--ease-sheet)}
.cx-faq summary::after{transform:rotate(90deg)}
.cx-faq details[open] summary::after{transform:rotate(0)}
.cx-faq details p{margin:0;padding:0 0 26px;max-width:62ch;font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:var(--cx-fg2)}
.cx-next{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,48px);margin-top:clamp(90px,11vw,150px)}

/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .cx-cols>*,.cx-cols>.cx-p,.cx-cols--r>*{grid-column:1/-1}
  .cx-grid>*,.cx-dom-end>.cx-p,.cx-dom-end>.cx-f{grid-column:1/-1}
  .cx-num{grid-template-columns:1fr 1fr;row-gap:34px}
  .cx-cred{grid-template-columns:1fr 1fr}
  .cx-tl{display:block;padding-block:0}
  .cx-tl-e .cx-tl-t{position:static;margin-top:12px}
  .cx-tl-b{text-align:left;margin-top:34px;opacity:1}
  .cx-tl-y{font-size:clamp(64px,19vw,120px)}
  .cx-tl-l{height:auto;background:none;margin:34px 0 0;border-left:1px solid var(--cx-line);padding:4px 0 4px 22px}
  .cx-tl-l::after{content:none}
  .cx-tl-l li{position:relative;left:auto;width:auto;height:auto;padding:12px 0}
  .cx-tl-l li::before{left:-26.5px;top:19px}
  .cx-tl-l li>span{position:static;transform:none;text-align:left;display:inline}
  .cx-tl-l .cx-tl-py{margin-right:12px}
  .cx-tl-l .cx-tl-t{white-space:normal}
  .cx-sm-g,.cx-dom-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,4svh,36px);align-content:center;padding-top:71px}
  .cx-sm-x .cx-p{margin-top:14px;font-size:15px;line-height:1.55}
  .cx-sm-x .cx-h{font-size:clamp(34px,9vw,52px)}
  .cx-sm-v{justify-self:center;width:min(100%,calc(100svh - 410px))}
  .cx-dom-w{font-size:clamp(30px,10.4vw,56px)}
  .cx-dom-v{justify-self:center;height:min(calc(100svh - 300px),640px)}
  .cx-gam{grid-template-columns:repeat(4,minmax(0,1fr));height:auto;grid-auto-rows:clamp(130px,30vw,200px)}
  .cx-pro-g{grid-template-columns:minmax(0,1fr)}
  .cx-ft div{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .cx-next{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px) and (min-width:600px){
  .cx-grid>.c-5,.cx-grid>.c-7{grid-column:span 6}
}
@media (max-width:760px){
  .cx-hero-top{top:calc(16px + 55px + clamp(12px,2.4svh,26px))}
  .cx-f--bleed{height:clamp(360px,72svh,640px);margin:clamp(70px,16vw,110px) 0}
  .cx-band-f{width:clamp(150px,44vw,210px)}
}
@media (prefers-reduced-motion:reduce){
  .cx-hero-f picture,.cx-fit,.cx-cred{animation:none}
  html.cx-js [data-cx-rv],html.cx-js .cx-f[data-cx-rv]>img{transition:none}
  .cx-sm-f,.cx-dom-f,.cx-dom-a span,html.cx-js .cx-reg span,html.cx-js .cx-tl-l li{transition:none}
  .cx-f[data-cx-px] img{transform:none}
}

/* ---------- Final común de los casos (4/10/26): «Más de este cliente» y «Siguiente caso» ----------
   Antes, las fichas del cliente, el siguiente caso y Casos iban en la misma rejilla de enlaces grandes y no se
   distinguían. Ahora: las fichas, en una lista sobria dentro de El proyecto (mcx_rel); el siguiente caso, al final,
   a pantalla y en el orden de /casos/ (mcx_siguiente, tpl-caso.php): su nombre, su tipo y su imagen, que se abre
   al llegar (--vp); debajo, el anterior y Todos los casos. */
.cx-rel{margin-top:clamp(90px,11vw,150px)}
.cx-rel-k{margin:0 0 clamp(14px,1.6vw,20px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3)}
.cx-rel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--cx-line)}
.cx-rel li{border-bottom:1px solid var(--cx-line)}
.cx-rel a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;column-gap:clamp(16px,2vw,28px);padding:20px 0;color:var(--cx-fg);text-decoration:none;border:0}
.cx-rel-t{font-family:var(--f-light);font-weight:300;font-size:clamp(18px,1.5vw,22px);line-height:1.35}
.cx-rel-s{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3);white-space:nowrap}
.cx-rel i{font-style:normal;color:var(--cx-fg3);transition:transform .5s var(--ease-sheet),color .3s ease}

.cx-sig{padding:clamp(120px,17svh,200px) 0 clamp(40px,5vw,64px)}
.cx-sig-k{margin:0 0 clamp(28px,3.4vw,48px);padding-top:16px;border-top:1px solid var(--cx-line);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-ac)}
.cx-sig-a{display:block;color:var(--cx-fg);text-decoration:none;border:0}
.cx-sig-t{display:block;max-width:14em;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(48px,8.2vw,138px);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.cx-sig-m{display:flex;gap:14px;align-items:baseline;margin-top:clamp(18px,2vw,28px);font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.4;color:var(--cx-fg2)}
.cx-sig-m i{font-style:normal;color:var(--cx-fg);transition:transform .6s var(--ease-sheet)}
.cx-sig-f{display:block;position:relative;margin-top:clamp(40px,5vw,76px);aspect-ratio:16/9;max-height:84svh;width:100%;overflow:hidden;background:rgba(246,245,243,.06);
  clip-path:inset(0 calc(11% * (1 - var(--vp,1))) round 18px)}
.cx-sig-f picture{display:block;width:100%;height:100%}
.cx-sig-f img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - .12 * var(--vp,1)));transition:filter .6s ease}
.cx-sig-pie{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:clamp(22px,2.6vw,34px);font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.1vw,17px);line-height:1.4}
.cx-sig-pie a{color:var(--cx-fg2);text-decoration:none;border:0;transition:color .3s ease}
.cx-sig-pie span{margin-right:12px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-fg3)}
@media (hover:hover){
  .cx-rel a:hover i{transform:translateX(6px);color:var(--cx-fg)}
  .cx-sig-a:hover .cx-sig-m i{transform:translateX(10px)}
  .cx-sig-a:hover .cx-sig-f img{filter:brightness(1.06)}
  .cx-sig-pie a:hover{color:var(--cx-fg)}
}
.cx-rel a:focus-visible,.cx-sig-a:focus-visible,.cx-sig-pie a:focus-visible{outline:1px solid currentColor;outline-offset:6px;border-radius:4px}
@media (orientation:portrait){.cx-sig-f{aspect-ratio:4/5;max-height:76svh}}
@media (max-width:760px){
  .cx-rel a{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .cx-rel-s{grid-column:1;grid-row:2}
  .cx-rel i{grid-column:2;grid-row:1/3;align-self:center}
  .cx-sig-t{font-size:clamp(40px,11.4vw,64px)}
  .cx-sig-pie{flex-direction:column;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .cx-sig-f{clip-path:inset(0 round 18px)}
  .cx-sig-f img{transform:none}
}