/* MarionaAgency · Clientes — plantilla "Constelación".
   Todo acotado a .ma-cli para no chocar con Divi. Editar aquí, no en el Constructor.
   Este fichero es el original: mariona.net se lo descarga con ?ma_import= */
.ma-cli{
  --sans:'Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  --orange:#FF4D00; --gut:clamp(20px,4.4vw,72px);
  --bg:#0A0A0A; --fg:#F6F5F3; --mut:#8B8987; --faint:#5F5D5B;
  --soft:rgba(246,245,243,.38); --line:rgba(246,245,243,.10);
  --seg-bg:rgba(246,245,243,.07); --seg-on:#F6F5F3; --seg-fg:#0A0A0A;
  --sky-a:#0A0C11; --sky-b:#040509; --star:246,245,243; --core:255,77,0; --dark:1;
  --photo:var(--ma-photo);
  position:relative;isolation:isolate;margin:0;
  background:var(--bg);color:var(--fg);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.ma-cli *{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 .wrap{max-width:1480px;margin:0 auto;padding-inline:var(--gut)}
.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}

/* ── el organismo ── */
.ma-cli .sky{position:relative;height:100svh;min-height:560px;overflow:hidden;
  margin-top:calc(var(--ma-head,0px) * -1);
  background:radial-gradient(120% 100% at 50% 46%,var(--sky-a) 0%,var(--sky-b) 100%)}
.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::after{content:"";position:absolute;left:0;right:0;bottom:0;height:66%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--bg) 56%)}
.ma-cli .sky::before{content:"";position:absolute;left:0;right:0;top:0;height:15%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--sky-b) 0%,transparent 100%);opacity:.72}
.ma-cli .lock{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 var(--gut) clamp(76px,11vh,140px);
  pointer-events:none;text-align:center}
.ma-cli .lock h1{margin:0;font-size:clamp(30px,5.0vw,70px);line-height:.98;letter-spacing:-.045em;font-weight:400;
  text-wrap:balance;color:var(--fg)}
.ma-cli .lock h1 em{font-style:normal;color:var(--orange)}
.ma-cli .readout{position:absolute;left:var(--gut);bottom:clamp(20px,3vh,34px);z-index:5;text-align:left;
  min-height:34px;pointer-events:none}
.ma-cli .r-nm{display:block;font-size:14px;letter-spacing:-.01em;color:var(--fg);line-height:1.1;
  opacity:0;transition:opacity .3s}
.ma-cli .r-sc{display:block;margin-top:4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);opacity:0;transition:opacity .3s}
.ma-cli .readout.on .r-nm, .ma-cli .readout.on .r-sc{opacity:1}

/* ── la agencia ──
   La legibilidad se resuelve tratando la foto, no tapándola: se baja la exposición y se
   apaga el centro con un degradado radial ancho. Sin cajas, sin bandas, sin desenfoques. */
.ma-cli .agency{position:relative;margin-top:clamp(20px,4vw,56px)}
.ma-cli .agency-ph{position:relative;height:min(96vh,900px);background-image:var(--photo);
  background-size:cover;background-position:50% 46%;
  filter:brightness(.76) saturate(.68) contrast(1.04);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 78%,transparent 100%)}
.ma-cli .agency-ph::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(112% 70% at 50% 50%,rgba(6,6,6,.62) 0%,rgba(6,6,6,.32) 44%,rgba(6,6,6,0) 76%),
    linear-gradient(180deg,rgba(6,6,6,.58) 0%,rgba(6,6,6,.18) 30%,rgba(6,6,6,.26) 64%,rgba(6,6,6,.80) 100%)}
.ma-cli .agency-txt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;
  padding-inline:var(--gut)}
/* El 25 y el texto son un solo bloque, centrado en la página. */
.ma-cli .agency-in{position:relative;z-index:2;max-width:1480px;margin:0 auto;display:grid;
  grid-template-columns:auto minmax(0,640px);gap:clamp(26px,3.4vw,52px);
  justify-content:center;align-items:end}
.ma-cli .agency-txt .big{margin:0;font-size:clamp(88px,12vw,182px);line-height:.74;letter-spacing:-.06em;
  color:var(--orange);font-weight:400;font-variant-numeric:tabular-nums}
.ma-cli .agency-txt .big small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:18px;text-shadow:0 1px 24px rgba(0,0,0,.5)}
.ma-cli .agency-txt h2{margin:0 0 16px;color:#fff;font-size:clamp(18px,2.2vw,32px);line-height:1.2;
  letter-spacing:-.025em;font-weight:400;text-wrap:balance;text-shadow:0 1px 44px rgba(0,0,0,.55)}
/* :not(.big) es obligatorio: el "25" también es un <p> y esta regla se lo comía */
.ma-cli .agency-txt p:not(.big){margin:0;color:rgba(255,255,255,.84);font-size:15px;line-height:1.55;
  max-width:50ch;text-shadow:0 1px 34px rgba(0,0,0,.5)}

/* ── el campo de logotipos ── */
.ma-cli .fieldsec{padding-block:clamp(30px,5vw,64px) clamp(60px,9vw,130px)}
.ma-cli .bar{display:flex;justify-content:center;padding-bottom:clamp(30px,5vw,60px)}
.ma-cli .seg{position:relative;display:flex;gap:2px;padding:4px;border-radius:82px;
  background:var(--seg-bg);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ma-cli .seg::-webkit-scrollbar{display:none}
.ma-cli .ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:82px;
  background:var(--seg-on);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-size:11.5px;letter-spacing:.01em;
  color:var(--mut);padding:9px 16px;border-radius:82px;white-space:nowrap;transition:color .35s ease}
.ma-cli .f:hover{color:var(--fg)}
.ma-cli .f.on{color:var(--seg-fg)}
.ma-cli .field{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center}
.ma-cli .node{flex:0 0 auto;position:relative;height:var(--cell,152px);
  padding-inline:var(--px,30px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15px;cursor:default;-webkit-tap-highlight-color:transparent;
  animation:ma-float var(--dur,9s) ease-in-out var(--del,0s) infinite alternate}
@keyframes ma-float{to{transform:translateY(var(--amp,5px))}}
.ma-cli .slot{position:relative;height:60px;display:flex;align-items:center;justify-content:center}
/* Sin will-change: con 61 marcas eran 61 capas permanentes en la GPU y se notaba. */
.ma-cli .node .mk{width:var(--w,90px);height:var(--h,40px);color:var(--soft);
  transition:color .8s ease, transform .9s cubic-bezier(.16,.84,.28,1)}
.ma-cli .node .nm{width:calc(100% + 26px);text-align:center;font-size:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.06em;color:var(--faint);opacity:.42;transition:opacity .5s ease;pointer-events:none}
.ma-cli .node.hot .mk{color:var(--fg);transform:scale(1.1)}
.ma-cli .node.hot .nm{opacity:.85}
.ma-cli .node:hover .mk{color:var(--fg);transform:scale(1.14)}
.ma-cli .node:hover .nm{opacity:1;color:var(--fg)}
.ma-cli .node.out{display:none}

/* al clicar, el logotipo estalla 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:var(--soft);opacity:0;pointer-events:none}
.ma-cli .node.pop .mk{animation:ma-burst .42s cubic-bezier(.3,0,.2,1) forwards}
.ma-cli .node.pop .ring{animation:ma-ripple .52s cubic-bezier(.2,.7,.2,1) forwards}
.ma-cli .node.back .mk{animation:ma-reform .62s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes ma-burst{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  38%{transform:scale(1.22);opacity:1;filter:blur(0)}
  100%{transform:scale(1.75);opacity:0;filter:blur(3px)}}
@keyframes ma-ripple{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(11)}}
@keyframes ma-reform{
  0%{transform:scale(.5);opacity:0;filter:blur(2px)}
  100%{transform:scale(1);opacity:1;filter:blur(0)}}

/* ── cierre ── */
.ma-cli .close{border-top:1px solid var(--line);padding:clamp(44px,6vw,86px) 0 clamp(30px,4vw,54px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.ma-cli .close h3{margin:0;font-size:clamp(24px,3.4vw,46px);line-height:1.02;letter-spacing:-.04em;
  font-weight:400;text-wrap:balance}
.ma-cli .close p{margin:0;color:var(--mut);font-size:15px;line-height:1.55;max-width:46ch}
.ma-cli .cta{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:var(--orange);
  color:#fff;border-radius:82px;padding:14px 26px;font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ma-cli .cta:hover{transform:translateY(-2px);color:#fff}

@media (max-width:1180px){
  .ma-cli .agency-in{grid-template-columns:auto minmax(0,1fr);justify-content:stretch}
}
@media (max-width:920px){
  .ma-cli .agency-in{grid-template-columns:1fr;gap:clamp(16px,3vw,26px);align-items:start}
  .ma-cli .close{grid-template-columns:1fr}
  .ma-cli .readout{display:none}
  .ma-cli .agency-ph{height:min(70vh,560px)}
  .ma-cli .agency-txt .big{font-size:clamp(64px,17vw,110px)}
  .ma-cli .agency-txt .big small{margin-top:10px}
  .ma-cli .agency-ph::after{
    background:
      radial-gradient(140% 62% at 50% 50%,rgba(6,6,6,.68) 0%,rgba(6,6,6,.36) 46%,rgba(6,6,6,0) 80%),
      linear-gradient(180deg,rgba(6,6,6,.58) 0%,rgba(6,6,6,.22) 30%,rgba(6,6,6,.30) 64%,rgba(6,6,6,.80) 100%)}
  .ma-cli .node{--cell:124px;gap:11px}
  .ma-cli .slot{height:46px}
  .ma-cli .node .nm{font-size:7.5px}
}
@media (prefers-reduced-motion:reduce){
  .ma-cli .node{animation:none}
  .ma-cli *{transition-duration:.01ms!important}
}