/* Nosotros / About us: un solo recorrido, como una presentación para clientes. Fondo oscuro con puntos y resplandores; la jerarquía sale de la escala. */
.mxn-flow{position:relative;overflow:clip;color:#fff;background-color:#1d1d1d;
  background-image:radial-gradient(rgba(255,255,255,.075) 1.3px,transparent 1.6px),radial-gradient(560px 460px at 0% 72%,rgba(254,53,1,.34),rgba(254,53,1,0) 70%),radial-gradient(520px 420px at 100% 4%,rgba(254,53,1,.3),rgba(254,53,1,0) 70%),radial-gradient(520px 420px at 100% 58%,rgba(254,53,1,.14),rgba(254,53,1,0) 70%);
  background-size:30px 30px,100% 100%,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat,no-repeat}
.mxn-flow .mxl-sec,.mxn-flow .mxl-hero,.mxn-flow .mxl-final,.mxn-flow .mxl-logos{background:transparent!important;color:#fff;position:relative}
.mxn-flow .mxl-hero__glow{display:none}
.mxn-flow .mxl-h2{color:#fff}
.mxn-flow .mxl-lead,.mxn-flow p{color:var(--on-ink-2,rgba(255,255,255,.74))}
.mxn-flow .mxl-eyebrow{color:#fff}
.mxn-flow em{font-style:normal;color:var(--orange)}
/* Portada */
.mxn-hero{padding-block:clamp(110px,13vw,170px) clamp(36px,5vw,64px)}
.mxn-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,72px);align-items:center}
.mxn-hero .mxl-h1{font-size:clamp(44px,6.4vw,104px);line-height:.96;letter-spacing:-.035em;max-width:11ch}
.mxn-hero .mxl-lead{font-size:clamp(17px,.7vw + 13px,21px);max-width:44ch}
.mxn-side{margin:0;justify-self:end;width:min(100%,540px)}
.mxn-side img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
/* Franja de cifras */
.mxn-strip{padding-block:clamp(26px,4vw,48px)}
.mxn-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-block:1px solid rgba(255,255,255,.16)}
.mxn-facts>div{display:flex;flex-direction:column-reverse;gap:8px;padding:clamp(18px,2.6vw,36px) clamp(10px,2vw,28px)}
.mxn-facts>div+div{border-left:1px solid rgba(255,255,255,.12)}
.mxn-facts dd{margin:0;font:600 clamp(40px,6.4vw,104px)/.95 var(--display);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.mxn-facts>div:first-child dd{color:var(--orange)}
.mxn-facts dt{font:600 12.5px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-2,rgba(255,255,255,.7))}
/* Propósito y promesa: una declaración enorme y una promesa más pequeña */
.mxn-pp{padding-block:clamp(70px,9vw,140px)}
.mxn-edge{margin:0;display:grid;gap:14px}
.mxn-edge img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
.mxn-edge--l img:nth-child(2){width:78%;margin-left:auto;margin-top:-24px;position:relative;box-shadow:0 0 0 6px #1d1d1d,0 30px 60px -28px rgba(0,0,0,.85)}
.mxn-pp{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,9fr);gap:clamp(28px,5vw,80px);align-items:center;padding-inline:clamp(20px,4vw,64px)}
.mxn-pp__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,88px);max-width:none;padding-inline:0}
.mxn-pp .mxl-h2{font-size:12.5px!important;letter-spacing:.14em;text-transform:uppercase;font-family:var(--body);font-weight:700;color:var(--orange);margin:0 0 18px;line-height:1.2}
.mxn-pp article:first-child .mxn-big{font:600 clamp(32px,4.4vw,72px)/1.04 var(--display);letter-spacing:-.03em;max-width:20ch;color:#fff;margin:0 0 22px}
.mxn-pp article:last-child .mxn-big{font:500 clamp(20px,1.5vw + 12px,32px)/1.25 var(--display);letter-spacing:-.015em;max-width:34ch;color:#fff;margin:0 0 16px}
.mxn-pp article>p:not(.mxn-big){max-width:52ch;font-size:clamp(16px,.4vw + 14px,19px)}
.mxn-pp article:last-child{padding-left:clamp(0px,6vw,96px);border-left:0}
/* Equipo: retratos escalonados */
.mxn-flow #equipo{padding-block:clamp(70px,9vw,130px)}
.mxn-flow .mxl-head{max-width:none}
.mxn-flow .mxl-head .mxl-h2{font-size:clamp(34px,4.4vw,72px);line-height:1;letter-spacing:-.03em;max-width:16ch}
.mxn-flow .mxl-head .mxl-lead{max-width:46ch;font-size:clamp(17px,.6vw + 13px,21px)}
.mxn-team{list-style:none;margin:clamp(34px,5vw,64px) 0 0;padding:0 0 clamp(30px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.mxn-person{display:flex;flex-direction:column;gap:8px}
.mxn-person:nth-child(even){transform:translateY(clamp(24px,4vw,56px))}
.mxn-person__img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:#262626;margin-bottom:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mxn-person__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.mxn-person:hover .mxn-person__img img{transform:scale(1.04)}
.mxn-person .mxl-h3{font-size:clamp(22px,.9vw + 16px,30px);color:#fff}
.mxn-person__role{margin:0;color:var(--orange)!important;font:700 12.5px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase}
.mxn-person p:last-child{margin:0;font-size:15px}
/* Cómo trabajamos: numerales enormes en contorno */
.mxn-flow #como-trabajamos{padding-block:clamp(60px,8vw,120px)}
.mxn-how{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16)}
.mxn-how li{position:relative;padding:clamp(18px,2.4vw,32px) clamp(14px,2vw,28px) 8px 0;display:grid;gap:10px;align-content:start}
.mxn-how li+li{padding-left:clamp(14px,2vw,28px);border-left:1px solid rgba(255,255,255,.12)}
.mxn-how__n{font:600 clamp(64px,8vw,132px)/.85 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5);transition:color .4s,-webkit-text-stroke-color .4s}
.mxn-how li:hover .mxn-how__n{color:var(--orange);-webkit-text-stroke-color:var(--orange)}
.mxn-how .mxl-h3{color:#fff;font-size:clamp(22px,.9vw + 16px,30px);margin-top:6px}
.mxn-how p{margin:0;font-size:15.5px}
/* Habilidades con la lámina de servicios */
.mxn-skillsec{padding-block:clamp(60px,8vw,120px)}
.mxn-skillgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.mxn-skillcopy .mxl-head{margin-bottom:clamp(22px,3vw,34px)}
.mxn-skills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.mxn-skills li{padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:600 15px/1.2 var(--display);color:#fff;transition:box-shadow .3s,color .3s,transform .35s var(--ease),background .3s}
.mxn-skills li:hover{box-shadow:inset 0 0 0 1px var(--orange);color:var(--orange);transform:translateY(-2px);background:rgba(254,53,1,.08)}
.mxn-cap{margin:0}
.mxn-cap img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1)}
/* Proceso: línea de tiempo con el collage de proyectos al costado */
.mxn-procsec{padding-block:clamp(70px,9vw,140px)}
.mxn-edge--r{position:absolute;right:clamp(-30px,-1vw,0px);top:clamp(70px,9vw,140px);width:min(28vw,420px);z-index:0}
.mxn-procsec .mxl-wrap{position:relative;z-index:1}
.mxn-procsec .mxl-head{max-width:min(62%,720px)}
.mxn-proc{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0 0 0 clamp(22px,3vw,44px);display:grid;gap:clamp(26px,3.4vw,46px);max-width:min(66%,820px);border-left:1px solid rgba(255,255,255,.2)}
.mxn-proc li{position:relative;display:grid;gap:10px;align-content:start}
.mxn-proc li::before{content:"";position:absolute;left:calc(-1 * clamp(22px,3vw,44px) - 5px);top:12px;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(254,53,1,.18)}
.mxn-proc__n{font:700 12.5px/1 var(--body);color:var(--orange);letter-spacing:.14em}
.mxn-proc .mxl-h3{font-size:clamp(28px,2vw + 14px,46px);line-height:1;letter-spacing:-.025em;color:#fff}
.mxn-proc p{margin:0;font-size:clamp(15.5px,.3vw + 14px,17.5px);max-width:58ch}
/* Resultados: el bloque compartido, sobre el mismo fondo */
.mxn-flow .mxr-roi::before{display:none}
.mxn-flow .mxr-roi__nums dd{font-size:clamp(40px,5vw,84px)}
/* Proyectos: mosaico con un caso grande */
.mxn-flow #proyectos{padding-block:clamp(60px,8vw,120px)}
.mxn-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;max-width:none}
.mxn-head--row>div{flex:1 1 420px;max-width:62ch}
.mxn-head--row .mxl-link{flex:none;margin-bottom:6px}
.mxn-works{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,250px);gap:clamp(10px,1.4vw,16px)}
.mxn-works li:first-child{grid-column:span 2;grid-row:span 2}
.mxn-works li{min-height:0}
.mxn-works a{position:relative;display:block;height:100%;overflow:hidden;border-radius:18px;background:#262626;isolation:isolate}
.mxn-works img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;object-fit:cover;transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.mxn-works a:hover img,.mxn-works a:focus-visible img{transform:scale(1.035)}
.mxn-works a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;background:linear-gradient(to top,rgba(12,12,12,.78),rgba(12,12,12,0) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s}
.mxn-works a:hover::after{box-shadow:inset 0 0 0 1px var(--orange)}
.mxn-works span{position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;font:600 clamp(16px,.5vw + 13px,20px)/1.1 var(--display)}
/* Somos tu agencia si… */
.mxn-flow #para-quien{padding-block:clamp(60px,8vw,120px)}
.mxn-if{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.mxn-if .mxl-h2{font-size:clamp(34px,4.4vw,72px);line-height:1;letter-spacing:-.03em;position:sticky;top:120px}
.mxn-if__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mxn-if__list li{display:flex;gap:16px;align-items:flex-start;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid rgba(255,255,255,.14);font:500 clamp(18px,.8vw + 13px,24px)/1.3 var(--display);color:#fff;letter-spacing:-.01em}
.mxn-if__list li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.mxn-if__list svg{flex:none;width:26px;height:26px;margin-top:2px}
/* Enlaces internos */
.mxn-links__h{margin:0 0 14px;font-size:clamp(18px,.5vw + 15px,22px);color:#fff}
.mxn-links{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0}
.mxn-links a{display:inline-flex;padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:600 14.5px/1.2 var(--body);color:#fff;text-decoration:none;transition:box-shadow .25s,color .25s}
.mxn-links a:hover,.mxn-links a:focus-visible{box-shadow:inset 0 0 0 1px var(--orange);color:var(--orange)}
/* Cierre */
.mxn-final{padding-block:clamp(70px,9vw,140px);text-align:left}
.mxn-final .mxl-wrap{display:grid;gap:18px;justify-items:start}
.mxn-final .mxl-h2{font-size:clamp(40px,6vw,104px);line-height:.96;letter-spacing:-.035em;max-width:14ch}
.mxn-final p{font-size:clamp(17px,.7vw + 13px,22px);max-width:46ch}
.mxn-final .mxl-ctas{justify-content:flex-start;margin-top:8px}
.mxn-final .mxl-btn--dark{--bg:var(--orange);--fg:#fff}
.mxn-final .mxl-btn--light{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.mxn-final .mxl-btn--light:hover{color:#fff}
/* Pantallas medianas y móvil */
@media (max-width:1100px){
  .mxn-hero__grid{grid-template-columns:1fr}.mxn-side{justify-self:start;width:min(100%,460px)}
  .mxn-pp{grid-template-columns:1fr}.mxn-edge--l{grid-template-columns:1fr 1fr;align-items:start;max-width:420px}.mxn-edge--l img:nth-child(2){width:100%;margin:0;box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
  .mxn-pp article:last-child{padding-left:0}
  .mxn-team,.mxn-how{grid-template-columns:repeat(2,minmax(0,1fr))}.mxn-person:nth-child(even){transform:none}
  .mxn-how li:nth-child(3){padding-left:0;border-left:0}.mxn-how li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12);margin-top:12px}
  .mxn-skillgrid,.mxn-if{grid-template-columns:1fr}.mxn-if .mxl-h2{position:static}
  .mxn-edge--r{position:static;width:min(100%,420px);margin:0 0 28px clamp(20px,5vw,40px)}
  .mxn-procsec .mxl-head,.mxn-proc{max-width:none}
  .mxn-works{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mxn-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.mxn-facts>div:nth-child(3){border-left:0}.mxn-facts>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .mxn-team,.mxn-how{grid-template-columns:1fr}.mxn-how li+li{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .mxn-works{grid-template-columns:1fr;grid-auto-rows:210px}.mxn-works li:first-child{grid-column:auto;grid-row:span 1}
  .mxn-proc{padding-left:20px}.mxn-proc li::before{left:-25px}
}
/* Servicios: carrusel animado de tarjetas con icono, dos filas en sentidos opuestos */
.mxn-skillhint{display:none}
.mxn-marq{margin-top:clamp(34px,5vw,64px);display:grid;gap:clamp(12px,1.4vw,18px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mxn-marq__row{display:flex;width:max-content;animation:mxn-marq-l 38s linear infinite}
.mxn-marq__row--b{animation-name:mxn-marq-r;animation-duration:44s}
.mxn-marq:hover .mxn-marq__row{animation-play-state:paused}
.mxn-marq ul{list-style:none;margin:0;padding:0 clamp(6px,.7vw,9px);display:flex;gap:clamp(12px,1.4vw,18px)}
.mxn-marq li{display:flex;align-items:center;gap:14px;padding:14px 26px 14px 14px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);white-space:nowrap;font:600 clamp(17px,.7vw + 13px,22px)/1 var(--display);color:#fff;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,box-shadow .3s}
.mxn-sk__i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;flex:none;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.mxn-sk__i svg{width:24px;height:24px}
.mxn-marq li:hover{transform:translateY(-6px) scale(1.04);background:rgba(254,53,1,.14);box-shadow:inset 0 0 0 1px var(--orange)}
.mxn-marq li:hover .mxn-sk__i{transform:rotate(-14deg) scale(1.12)}
.mxn-marq__row--b li:nth-child(even){background:rgba(254,53,1,.1)}
@keyframes mxn-marq-l{to{transform:translateX(-50%)}}
@keyframes mxn-marq-r{from{transform:translateX(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.mxn-marq__row{animation:none;flex-wrap:wrap;width:auto}.mxn-marq ul[aria-hidden]{display:none}.mxn-marq{-webkit-mask-image:none;mask-image:none}}
/* Collages sin recuadro: se funden con el fondo de puntos (sin borde, sin sombra y con los bordes difuminados) */
.mxn-side{width:min(112%,600px);margin-right:-4%}
.mxn-side img{border-radius:0;box-shadow:none;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 66% 66% at 50% 50%,#000 58%,transparent 100%)}
.mxn-edge--r{width:min(32vw,480px)}
.mxn-edge--r img{border-radius:0;box-shadow:none;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,#000 58%,transparent 100%)}
/* Botones: más aire respecto al texto y entre sí */
.mxn-hero .mxl-ctas{margin-top:clamp(26px,3vw,40px);gap:14px 16px}
.mxn-final .mxl-ctas{margin-top:clamp(18px,2.4vw,30px);gap:14px 16px}
@media (max-width:1100px){.mxn-side{width:min(100%,460px);margin-right:0}}
/* Proceso: la imagen acompaña al leer (sticky) en la columna derecha; sin hueco vacío */
.mxn-procsec{overflow:visible}
.mxn-edge--r{position:absolute;top:0;bottom:0;right:clamp(8px,2vw,40px);width:min(32vw,480px);display:block;pointer-events:none}
.mxn-edge--r img{position:sticky;top:clamp(96px,14vh,150px);width:100%}
/* Servicios: las tarjetas no se cortan al subir y crecer con el mouse */
.mxn-marq{padding-block:22px;margin-block:-4px}
@media (max-width:1100px){.mxn-edge--r{position:static;width:min(100%,420px);margin:0 0 28px clamp(20px,5vw,40px)}.mxn-edge--r img{position:static}}