/* ==========================================================================
   Mariona Agency 2028 · Clientes (page-clientes.php, sin tocar la plantilla).
   Rehecha el 27/9/26 con el lenguaje de la web nueva: fondo tinta, lo grande en
   UltraLight, todo en la medida de la cápsula min(90%,1280px) y un solo cierre
   (el pie no repite su llamada). Se conservan la constelación, el selector de
   sector y las cajas ópticas de los 61 logotipos.
   Orden: constelación con el H1 · la agencia (rótulo, frase, texto y foto) ·
   selector · muro de logotipos (el de la home) · cierre que lleva al formulario.
   El lienzo lee --star, --core y --dark de .ma-cli: no quitarlos.
   Ajuste óptico: el H1 (-0,03em) y el titular del cierre (-0,05em) se desplazan para que
   la tinta de la S, la U y la E caiga en el borde de la cápsula, como el titular gigante
   de las fichas de servicio.
   Copia anterior: ma-clientes.css de la carpeta web2028-clientes/anterior del Mac.
   ========================================================================== */
@font-face{font-family:'cl-xthin';src:url('/wp-content/themes/mariona2028/assets/fonts/Nh-25xthin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}

.ma-cli{
  --ink:#1F2322;--ink2:#262B29;--bone:#F6F5F3;--orange:#FF4D00;
  --t1:#F6F5F3;--t2:rgba(246,245,243,.76);--t3:rgba(246,245,243,.58);
  --line:rgba(246,245,243,.14);--hl:rgba(246,245,243,.12);
  --fx:'cl-xthin','nh-light','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fl:'nh-light','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fm:'nh-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.26,.4,1);
  --gap:clamp(16px,2vw,28px);--sec:clamp(96px,12vw,184px);--cw:min(90%,1280px);
  --star:246,245,243;--core:255,77,0;--dark:1;
  --bg:var(--ink);--fg:var(--t1);--photo:var(--ma-photo);
  position:relative;isolation:isolate;margin:0;background:var(--ink);color:var(--t1);
  font-family:var(--fl);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip
}
.ma-cli *,.ma-cli *::before,.ma-cli *::after{box-sizing:border-box}
.ma-cli button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ma-cli :focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.ma-cli .mk{display:block;background-color:currentColor;
  -webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}

/* ---------- 1. Constelación: los logotipos vienen hacia el visitante ---------- */
.ma-cli .sky{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ink)}
.ma-cli #ma-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.ma-cli #ma-cv.grabbing{cursor:grabbing}
.ma-cli .sky::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(31,35,34,0) 100%)}
.ma-cli .sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,35,34,0) 0%,rgba(31,35,34,.6) 24%,rgba(31,35,34,.93) 42%,var(--ink) 60%)}
.ma-cli .lock{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;padding:0 0 clamp(56px,9svh,112px);text-align:left}
.ma-cli .lock::before{content:"Clientes";display:block;width:var(--cw);margin:0 auto clamp(18px,2.2vw,28px);
  font-family:var(--fm);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--orange)}
.ma-cli .lock h1{position:relative;left:-.03em;width:var(--cw);margin:0 auto;font-family:var(--fx);font-weight:200;font-size:clamp(54px,8.4vw,140px);
  line-height:.9;letter-spacing:-.042em;color:var(--t1);text-wrap:balance;animation:cl-up 1.5s var(--ease) .1s both}
.ma-cli .lock h1 em{font-style:normal;color:var(--orange)}
@keyframes cl-up{from{transform:translate3d(0,.16em,0);opacity:0}}
/* Nombre del logotipo que está bajo el cursor: arriba a la derecha, en la medida de la cápsula */
.ma-cli .readout{position:absolute;left:auto;right:var(--edge,5%);top:clamp(112px,17svh,170px);bottom:auto;z-index:5;
  text-align:right;min-height:34px;pointer-events:none}
.ma-cli .r-nm{display:block;font-family:var(--fl);font-size:15px;letter-spacing:-.01em;line-height:1.15;color:var(--t1);opacity:0;transition:opacity .3s}
.ma-cli .r-sc{display:block;margin-top:5px;font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);opacity:0;transition:opacity .3s}
.ma-cli .readout.on .r-nm,.ma-cli .readout.on .r-sc{opacity:1}

/* ---------- 2. La agencia: rótulo, frase, texto y la foto del estudio ---------- */
.ma-cli .agency{position:relative;width:var(--cw);margin:clamp(40px,6vw,96px) auto 0;display:flex;flex-direction:column}
.ma-cli .agency-txt{position:static;transform:none;padding:0;order:0}
.ma-cli .agency-in{position:static;max-width:none;margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);row-gap:0;justify-content:stretch;align-items:start}
.ma-cli .agency-in>div{display:contents}
.ma-cli .agency-txt .big{grid-column:1/-1;margin:0 0 clamp(22px,2.6vw,34px);font-family:var(--fm);font-weight:500;font-size:11.5px;
  line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-variant-numeric:normal}
.ma-cli .agency-txt .big small{display:inline;margin:0 0 0 .45em;font-size:inherit;letter-spacing:inherit;color:inherit;text-shadow:none}
.ma-cli .agency-txt h2{grid-column:1/12;margin:0;font-family:var(--fx);font-weight:200;font-size:clamp(36px,4.6vw,72px);
  line-height:1.02;letter-spacing:-.04em;color:var(--t1);text-shadow:none;text-wrap:balance}
.ma-cli .agency-txt p:not(.big){grid-column:7/12;margin:clamp(26px,3.4vw,48px) 0 0;max-width:none;font-family:var(--fl);
  font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;color:var(--t2);text-shadow:none;text-wrap:pretty}
.ma-cli .agency-ph{order:1;position:relative;height:auto;aspect-ratio:2.35/1;margin-top:clamp(56px,7vw,110px);border-radius:12px;overflow:hidden;
  background-color:var(--ink2);background-image:var(--photo);background-size:cover;background-position:50% 50%;
  filter:none;-webkit-mask-image:none;mask-image:none}
.ma-cli .agency-ph::after{display:none}

/* ---------- 3. Selector de sector (como los filtros del Portfolio) ---------- */
.ma-cli .fieldsec{padding-block:var(--sec) 0}
.ma-cli .bar{display:flex;justify-content:center;padding-bottom:clamp(32px,4vw,56px)}
.ma-cli .seg{position:relative;display:flex;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--line);
  background:rgba(246,245,243,.04);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ma-cli .seg::-webkit-scrollbar{display:none}
.ma-cli .ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--bone);pointer-events:none;
  transition:transform .48s cubic-bezier(.32,.72,0,1),width .48s cubic-bezier(.32,.72,0,1)}
.ma-cli .f{position:relative;z-index:2;flex:0 0 auto;font-family:var(--fm);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t2);padding:9px 15px;border-radius:999px;white-space:nowrap;transition:color .35s ease}
.ma-cli .f:hover{color:var(--t1)}
.ma-cli .f.on{color:var(--ink)}

/* ---------- 4. Muro de logotipos: el mismo de la home ----------
   Hueso sobre tinta, nunca en naranja. Se encienden solos dos al azar y el que
   está bajo el cursor. El nombre, pequeño, para quien lo busque y para los buscadores. */
.ma-cli .field{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--hl);border-left:1px solid var(--hl)}
.ma-cli .node{position:relative;display:block;height:auto;padding:0;aspect-ratio:3/2;border-right:1px solid var(--hl);border-bottom:1px solid var(--hl);
  animation:none;cursor:default;-webkit-tap-highlight-color:transparent;transition:background-color .6s ease}
.ma-cli .slot{position:absolute;inset:0;height:auto;display:grid;place-items:center}
.ma-cli .node .mk{--lk:1.22;width:calc(var(--w,90px) * var(--lk));height:calc(var(--h,40px) * var(--lk));max-width:80%;
  color:var(--bone);opacity:.74;transition:transform .9s var(--ease),opacity .6s ease}
.ma-cli .node .nm{position:absolute;left:12px;right:12px;bottom:10px;width:auto;text-align:left;font-family:var(--fm);font-weight:500;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(246,245,243,.3);opacity:1;pointer-events:none;transition:color .6s ease}
.ma-cli .node.hot,.ma-cli .node:hover{background-color:rgba(246,245,243,.05)}
.ma-cli .node.hot .mk,.ma-cli .node:hover .mk{transform:scale(1.18);opacity:1;color:var(--bone)}
.ma-cli .node.hot .nm,.ma-cli .node:hover .nm{color:rgba(246,245,243,.72)}
.ma-cli .node.out{display:none}
.ma-cli .node.fill{pointer-events:none}
/* Al pulsar, el logotipo se abre como una burbuja y vuelve. Nunca cambia de color. */
.ma-cli .node .ring{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  border:1px solid currentColor;color:rgba(246,245,243,.5);opacity:0;pointer-events:none}
.ma-cli .node.pop .mk{animation:cl-burst .42s cubic-bezier(.3,0,.2,1) forwards}
.ma-cli .node.pop .ring{animation:cl-ripple .52s cubic-bezier(.2,.7,.2,1) forwards}
.ma-cli .node.back .mk{animation:cl-reform .62s var(--ease) forwards}
@keyframes cl-burst{0%{transform:scale(1);opacity:1}38%{transform:scale(1.24);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes cl-ripple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(11)}}
@keyframes cl-reform{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:.74}}

/* ---------- 5. Cierre: lleva al formulario del pie ---------- */
.ma-cli .close{border-top:0;padding:var(--sec) 0 clamp(56px,7vw,110px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);align-items:start}
.ma-cli .close h3{position:relative;left:-.05em;grid-column:1/12;margin:0;font-family:var(--fx);font-weight:200;font-size:clamp(44px,6.3vw,102px);line-height:.98;
  letter-spacing:-.046em;color:var(--t1);text-wrap:balance}
.ma-cli .close>div{grid-column:1/8;margin-top:clamp(22px,3vw,40px)}
.ma-cli .close p{margin:0;max-width:60ch;color:var(--t2);font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;text-wrap:pretty}
.ma-cli .cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,3.4vw,46px);font-family:var(--fm);font-weight:500;
  font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--orange);
  border-radius:999px;padding:17px 30px;transition:transform .5s var(--spring)}
.ma-cli .cta:hover{transform:translateY(-2px);color:var(--ink)}
.ma-cli.cl-js .cta::after{content:"\2193";transition:transform .45s var(--spring)}
.ma-cli.cl-js .cta:hover::after{transform:translateY(3px)}
.ma-cli .cta:focus-visible{outline-color:var(--t1)}
/* El cierre ya presenta el formulario: el pie no repite su llamada genérica */
body:has(.ma-cli) .ma-foot .fc-l>.eyebrow,body:has(.ma-cli) .ma-foot .fc-t,body:has(.ma-cli) .ma-foot .fc-s{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ma-cli .field{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ma-cli .agency-txt h2{grid-column:1/-1}
  .ma-cli .agency-txt p:not(.big){grid-column:5/-1}
}
@media (max-width:920px){
  .ma-cli .readout{display:none}
}
@media (max-width:760px){
  .ma-cli .sky{min-height:560px}
  .ma-cli .lock h1{font-size:12.4vw;line-height:.92}
  .ma-cli .agency-txt h2{font-size:clamp(32px,8.6vw,44px);line-height:1.04}
  .ma-cli .agency-txt p:not(.big){grid-column:1/-1}
  .ma-cli .agency-ph{aspect-ratio:4/3}
  .ma-cli .bar{justify-content:flex-start}
  .ma-cli .field{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ma-cli .node{aspect-ratio:4/3}
  .ma-cli .node .mk{--lk:.78}
  .ma-cli .node .nm{left:8px;right:6px;bottom:6px;font-size:8px;letter-spacing:.1em}
  .ma-cli .close h3{grid-column:1/-1}
  .ma-cli .close>div{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .ma-cli .lock h1{animation:none}
  .ma-cli .node,.ma-cli .node .mk,.ma-cli .node .nm{transition:none}
  .ma-cli .node.pop .mk,.ma-cli .node.pop .ring,.ma-cli .node.back .mk{animation:none}
}