/* ============ EXMACHINA LATINO AMERICA ============ */
/* WOFF2 first: the raw .otf trials are rejected by some browsers (the .ttf Jabin
   loaded fine while every .otf silently fell back to a system rounded face). */
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Regular.woff2') format('woff2'),url('../fonts/NTDapperTrial-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Medium.woff2') format('woff2'),url('../fonts/NTDapperTrial-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Bold.woff2') format('woff2'),url('../fonts/NTDapperTrial-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Dapper';src:url('../fonts/NTDapperTrial-Black.woff2') format('woff2'),url('../fonts/NTDapperTrial-Black.otf') format('opentype');font-weight:900;font-display:block}
@font-face{font-family:'Neureal';src:url('../fonts/OONeurealTrial-SemiMono.woff2') format('woff2'),url('../fonts/OONeurealTrial-SemiMono.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'NeurealMono';src:url('../fonts/OONeurealTrial-Mono.woff2') format('woff2'),url('../fonts/OONeurealTrial-Mono.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Jabin';src:url('../fonts/Jabin-BoldSwash2.woff2') format('woff2'),url('../fonts/Jabin-BoldSwash2.ttf') format('truetype');font-weight:700;font-display:block}

:root{
  --tinta:#100303;
  --oxblood:#1E0606;
  --rojo:#2E0909;
  --naranja:#FF3700;
  --gris:#B4B1B1;
  --blanco:#FFFFFF;
  --crema:#EDE7E1;
  --cyan:#4FC8F2;
  --teal:#2E5D4B;
  --sage:#A9C3B4;
  --wrap:min(92vw,1360px);
  --r-lg:28px;
  --r-md:18px;
  --dur:.75s;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--blanco);
  color:var(--rojo);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--naranja);color:var(--blanco)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{width:var(--wrap);margin-inline:auto}
.mono{font-family:'NeurealMono','Courier New',monospace}
.jabin{font-family:'Jabin','Times New Roman',serif;font-weight:700}
/* display caps = NT Dapper Black, tracked tight like the mockup */
.u-font{font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:.94}
.c-naranja{color:var(--naranja)}
.c-blanco{color:var(--blanco)}
.c-tinta{color:var(--tinta)}
.plus{width:1em;height:1em;display:inline-block;vertical-align:-.12em;color:var(--naranja)}

/* accent overlay: NT Dapper Trial has no ÁÉÍÓÚ glyphs (Ñ is fine) */
.dx{position:relative;display:inline-block}
.dx i{position:absolute;left:52%;top:-.30em;transform:translateX(-50%);font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-size:.62em;line-height:1;letter-spacing:0}
.nb{white-space:nowrap}

/* ---------- LOADER ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--tinta);display:grid;place-items:center;animation:loaderAuto .65s var(--ease) 2.6s forwards}
.loader.is-done{animation:loaderOut .65s var(--ease) forwards}
@keyframes loaderOut{to{transform:translateY(-100%);}}
@keyframes loaderAuto{to{transform:translateY(-100%);visibility:hidden}}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:28px;width:min(64vw,540px)}
.loader-plus{width:54px;height:54px;color:var(--naranja);animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-word{width:100%;fill:var(--naranja);opacity:0;animation:fadeUp .8s var(--ease) .15s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- HEADER / NAV ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:101;padding:26px clamp(18px,3.2vw,46px);pointer-events:none}
.brand{display:flex;align-items:flex-end;gap:14px;pointer-events:auto;width:fit-content;padding:8px 0}
.brand-word{height:clamp(17px,1.6vw,23px);width:auto;fill:var(--naranja);color:var(--naranja)}
.brand-word use[href="#lgPlus"]{stroke:var(--naranja)}
.brand-script{height:clamp(22px,2.1vw,30px);width:auto;fill:var(--crema)}
#lgPlus{stroke:currentColor}

/* ---------- DOCK NAV (Brand Appart structure, ExMachina glass) ----------
   Measured off the reference: 57px buttons, 10.67px radius, 7.11px gap, the
   dock-style hover (5em on the hovered item, 4.5em on each neighbour) and the
   .36/.33/0/1 easing. Vertical rail on desktop, floating glass bar on mobile. */
:root{--dock-ease:cubic-bezier(.36,.33,0,1)}
.dock-group{display:contents}
.dock{
  position:fixed;left:clamp(14px,1.9vw,28px);top:0;bottom:0;height:fit-content;margin:auto 0;
  z-index:100;display:flex;flex-direction:column;gap:7.11px;
  /* flex-start, not the default stretch: stretch forces every button to the
     container width and the dock growth would be silently ignored */
  align-items:flex-start;
  opacity:0;animation:dockIn .8s var(--ease) 2.9s forwards;
}
@keyframes dockIn{from{opacity:0}to{opacity:1}}
.dock-link{
  position:relative;width:57px;height:57px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:10.67px;color:var(--blanco);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.13);
  transition:width .42s var(--dock-ease),background .32s var(--dock-ease),border-color .32s var(--dock-ease);
}
.dock-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative}
.dock-icon{display:flex;align-items:center;justify-content:center;width:23px;height:23px;
  color:rgba(255,255,255,.62);transition:color .32s var(--dock-ease)}
.dock-icon svg{width:100%;height:auto;display:block}
/* the label lives outside the button and slides in on hover */
.dock-tag{
  position:absolute;left:calc(100% + 10px);top:50%;white-space:nowrap;
  padding:7px 12px;border-radius:8px;
  background:rgba(16,3,3,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(-50%) translateX(-6px);pointer-events:none;
  transition:transform .32s var(--dock-ease),opacity .24s var(--dock-ease);
}
.dock-tag-title{font-family:'Neureal','Courier New',monospace;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blanco);line-height:1}
.dock-dot{display:none}

@media (hover:hover) and (pointer:fine) and (min-width:768px){
  /* dock behaviour from the reference: the hovered button grows, and each
     neighbour grows half as much, so the rail swells around the cursor */
  /* px, not em: the reference's 5em resolves against ITS font-size; here the
     inherited size made 5em land on exactly 57px, so nothing ever grew */
  .dock-link:hover{width:80px;background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.26)}
  .dock-link:hover + .dock-link{width:72px}
  .dock-link:has(+ :hover){width:72px}
  .dock-link:hover .dock-icon{color:var(--naranja)}
  .dock-link:hover .dock-tag{opacity:1;transform:translateY(-50%) translateX(0)}
  /* with labels pinned open the tags stay out, so the dock keeps its rhythm */
  .dock.is-open .dock-tag{opacity:1;transform:translateY(-50%) translateX(0)}
  /* panel sits right where the labels would pop out */
  .dock.flyout-open .dock-tag{opacity:0 !important}
}
/* The dock is fixed and rides the whole page: over the white sections a light
   glass button with white icons disappears, so it inverts by context. */
.dock.on-light .dock-link{background:rgba(16,3,3,.08);border-color:rgba(16,3,3,.14)}
.dock.on-light .dock-icon{color:rgba(46,9,9,.55)}
.dock.on-light .dock-link.is-active{background:var(--naranja);border-color:var(--naranja)}
.dock.on-light .dock-link.is-active .dock-icon{color:var(--blanco)}
.dock-menu.on-light{color:var(--rojo);text-shadow:none}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .dock.on-light .dock-link:hover{background:rgba(16,3,3,.14);border-color:rgba(16,3,3,.2)}
  .dock.on-light .dock-link:hover .dock-icon{color:var(--naranja)}
}
.dock-link:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
.dock-link.is-active{background:rgba(255,55,0,.92);border-color:rgba(255,55,0,.5)}
.dock-link.is-active .dock-icon{color:var(--blanco)}

/* ---------- MENU FLYOUT ----------
   Same anatomy as the reference: a solid ink panel beside the rail that fades and
   slides 16px in over .28s, with the items staggered 35ms apart. On mobile it
   docks above the bottom bar and rises 12px instead. */
.dock-flyout{
  position:fixed;top:12px;bottom:12px;
  left:calc(clamp(14px,1.9vw,28px) + 57px + 26px);
  width:min(50vw,calc(100vw - 120px));
  z-index:99;display:flex;flex-flow:column;overflow:hidden;
  border-radius:24px;background:var(--tinta);color:var(--crema);
  box-shadow:0 30px 80px rgba(16,3,3,.45);
  opacity:0;pointer-events:none;transform:translateX(-16px);
  transition:opacity .2s cubic-bezier(.4,0,1,1),transform .2s cubic-bezier(.4,0,1,1);
}
.dock-flyout[data-state="open"]{
  opacity:1;pointer-events:auto;transform:translateX(0);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.dock-flyout-body{flex:1 1 auto;min-height:0;overflow-y:auto;outline:none;
  padding:clamp(84px,10vh,104px) clamp(1.5rem,3vw,2.75rem) 1.75rem;
  display:flex;flex-flow:column;gap:clamp(28px,4vh,54px)}
.dock-menu-sections,.dock-menu-secondary,.dock-menu-socials{margin:0;padding:0;list-style:none}

.dock-menu-section{
  display:block;width:100%;text-align:left;
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;
  font-size:clamp(2rem,4.4vw,3rem);line-height:1.06;letter-spacing:-.02em;
  color:rgba(237,231,225,.7);
  transition:color .32s var(--ease);
}
.dock-menu-section:hover,.dock-menu-section:focus-visible{color:var(--crema)}

.dock-menu-secondary{display:flex;flex-flow:column;gap:.5rem}
.dock-menu-secondary-link{
  font-family:'Neureal','Courier New',monospace;
  text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem;font-weight:700;
  color:rgba(237,231,225,.5);transition:color .32s var(--ease);
}
.dock-menu-secondary-link:hover,.dock-menu-secondary-link:focus-visible{color:var(--crema)}

.dock-menu-socials{display:flex;gap:.5rem}
.dock-soc{
  display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:8px;background:rgba(237,231,225,.1);color:rgba(237,231,225,.7);
  transition:background-color .32s var(--ease),color .32s var(--ease);
}
.dock-soc:hover,.dock-soc:focus-visible{background:var(--naranja);color:var(--blanco)}
.dock-soc-icon{width:.75rem;height:.75rem}

/* items settle in one after another once the panel is open */
.dock-flyout-body > ul > li,.dock-menu-socials{opacity:0;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.dock-flyout[data-state="open"] .dock-flyout-body > ul > li,
.dock-flyout[data-state="open"] .dock-menu-socials{
  opacity:1;transform:none;transition-delay:calc(var(--i,0) * 35ms + 40ms)}

@media (max-width:767px){
  .dock-flyout{
    top:auto;left:.5rem;right:.5rem;width:auto;
    bottom:calc(81px + .5rem + env(safe-area-inset-bottom));
    max-height:60dvh;transform:translateY(12px);border-radius:18px;
  }
  .dock-flyout[data-state="open"]{transform:translateY(0)}
  .dock-flyout-body{padding:1.25rem 1.25rem 1.5rem;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .dock-flyout,.dock-flyout[data-state="open"]{transition:opacity .12s linear;transform:none}
  .dock-flyout-body > ul > li,.dock-menu-socials{transition-delay:0s !important;transform:none}
}

/* MENU block, bottom-left, exactly like the reference's toggle */
.dock-menu{
  position:fixed;left:clamp(14px,1.9vw,30px);bottom:22px;z-index:100;
  display:flex;flex-flow:column;align-items:center;gap:.5rem;padding:.25rem;
  min-width:0;width:fit-content;border:0;background:none;cursor:pointer;
  font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;
  font-size:1.0625rem;text-transform:uppercase;letter-spacing:-.01em;color:var(--blanco);
  opacity:0;animation:fadeUp .8s var(--ease) 3.1s forwards;
  transition:opacity .32s var(--ease);
  text-shadow:0 1px 12px rgba(16,3,3,.6);
}
.dock-menu:hover{opacity:.6}
.dock-menu-dots{display:flex;gap:3px}
.dock-menu-dots span{width:3px;height:3px;border-radius:50%;background:currentColor}
/* the bar-sized version of the toggle; the bare dots stay on desktop, under MENU */
.dock-menu-icon{display:none}
.dock-menu-icon svg{width:100%;height:100%;display:block}

@media (max-width:767px){
  /* On mobile the reference hides its MENU entirely, which would strand the whole
     flyout — here it becomes one more item in the bar, keeping the three dots. */
  /* justify-content, not align-items: in a flex column `center` aligns across the
     horizontal axis and the vertical one keeps packing from the top. On desktop it
     never showed because the button hugs its content; here it is forced to 57x57. */
  .dock-menu{display:flex;position:static;width:57px;height:57px;padding:0;
    align-items:center;justify-content:center;
    gap:0;min-width:0;font-size:0;opacity:1;animation:none;text-shadow:none}
  /* Bare dots are 4px of ink beside three 23px filled glyphs — a fifth of their
     weight, which reads as a stray mark rather than the fourth button, however
     precisely it is centred. In the bar the toggle takes an icon of the same family
     instead: a filled rounded square with the three dots knocked out of it. */
  .dock-menu-dots{display:none}
  .dock-menu-icon{display:block;width:23px;height:23px;color:rgba(255,255,255,.62);
    transition:color .32s var(--dock-ease)}
  .dock-menu[aria-expanded="true"] .dock-menu-icon{color:var(--naranja)}
  /* the rail becomes a floating glass bar, the labels give way to a dot */
  .dock{
    left:50%;right:auto;top:auto;bottom:calc(22px + env(safe-area-inset-bottom));
    transform:translateX(-50%);flex-direction:row;align-items:center;gap:0;padding:0 12px;
    border-radius:12px;background:rgba(16,3,3,.72);
    -webkit-backdrop-filter:blur(32px) saturate(1.4);backdrop-filter:blur(32px) saturate(1.4);
    border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 34px rgba(16,3,3,.32);
    animation:dockInM .8s var(--ease) 2.9s forwards;
  }
  @keyframes dockInM{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}}
  .dock-link{width:57px;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
  .dock-link.is-active{background:none}
  /* The light-section inversion is for the desktop rail, which sits directly on the
     page. On mobile the bar carries its own dark glass whatever is behind it, so
     that inversion has to be switched off here — it outranks the rules above and
     was repainting the active button as a solid orange plate, which is why the
     first item looked nothing like the other two. */
  .dock.on-light .dock-link,
  .dock.on-light .dock-link.is-active{background:none;border-color:transparent}
  .dock.on-light .dock-icon{color:rgba(255,255,255,.62)}
  .dock.on-light .dock-link.is-active .dock-icon{color:var(--naranja)}
  .dock-tag{display:none}
  .dock-dot{
    display:block;position:absolute;left:50%;bottom:9px;width:4px;height:4px;border-radius:50%;
    background:var(--naranja);opacity:0;transform:translate(-50%,6px);
    transition:transform .32s var(--dock-ease),opacity .24s var(--dock-ease);
  }
  .dock-link.is-active .dock-dot{opacity:1;transform:translate(-50%,0)}
  .dock-link.is-active .dock-icon{color:var(--naranja)}
}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:540px;background:var(--tinta);overflow:hidden}
.hero-slides{position:absolute;inset:0}
/* Crossfade: the outgoing frame keeps drifting while the incoming one settles, so
   the change never reads as a cut. will-change is set only on the two slides in
   play — pinning all four costs real memory on phones and causes the stutter. */
/* Crossfade: the outgoing frame keeps drifting while the incoming one settles, so
   the change never reads as a cut. will-change is set only on the two slides in
   play — pinning all four costs real memory on phones and causes the stutter. */
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .95s cubic-bezier(.33,0,.15,1)}
.hero-slide.is-active,.hero-slide.is-leaving{will-change:opacity}
.hero-slide.is-active{opacity:1;z-index:2}
.hero-slide.is-leaving{z-index:1}
/* parallax lives on the wrapper, ken burns on the image: two transforms that
   would otherwise overwrite each other */
/* no CSS transition here on purpose: the JS lerp already smooths the drift, and
   easing it twice makes the parallax feel laggy rather than fluid */
/* scales kept to the minimum that covers the drift — every extra percent here is
   image the viewer loses off the edges */
.hero-slide picture{display:block;width:100%;height:100%;overflow:hidden;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.022)}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero.is-live .hero-slide.is-active img{animation:kenburns 6.6s cubic-bezier(.25,.6,.35,1) forwards}
@keyframes kenburns{from{transform:scale(1.042) translate3d(.35%,0,0)}to{transform:scale(1.0) translate3d(0,0,0)}}
/* The lettering is its own layer again — and this time it is safe. It drifted on
   its own before too, but back then the photos underneath had been inpainted to
   erase the baked-in wordmark, and that patch was poor: smears and blocks over an
   eye. Any drift dragged the mess into view. The photographs are clean now, so
   there is nothing underneath to uncover and the layer can move freely. */
/* The wordmark is the complete artwork now, not the crop that was baked into the
   old photographs — so it gets padding instead of bleed: contain fits it whole and
   the inset keeps its ends clear of the edges. Nothing of EX MACHINA is cut. */
.hero-letter{position:absolute;inset:clamp(18px,4vw,64px);z-index:4;pointer-events:none}
.hero-letter picture{display:block;width:100%;height:100%;
  transform:translate3d(var(--lx,0px),var(--ly,0px),0)}
.hero-letter img{width:100%;height:100%;object-fit:contain;object-position:center 48%;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.34))}

.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:24%;z-index:5;
  background:linear-gradient(to top,rgba(16,3,3,.5),transparent);pointer-events:none}

.hero-dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:10px;z-index:6}
.dot{
  width:11px;height:11px;border-radius:999px;border:0;padding:0;cursor:pointer;position:relative;
  background:rgba(255,255,255,.38);overflow:hidden;
  transition:width .55s var(--ease),background .45s ease;
}
.dot::after{content:'';position:absolute;inset:-17px} /* keeps a 45px touch target */
.dot:hover{background:rgba(255,255,255,.62)}
.dot.is-active{width:52px;background:rgba(255,255,255,.28)}
/* The fill animation IS the clock: its animationend advances the slide, so the bar
   and the crossfade can never drift apart, and pausing one pauses both. */
.dot-fill{position:absolute;inset:0;background:var(--naranja);border-radius:inherit;
  transform:scaleX(0);transform-origin:left center}
.hero.is-live .dot.is-active .dot-fill{animation:dotFill var(--hold,4000ms) linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}


/* ---------- INTRO ---------- */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(84px,10vw,150px) 0}
.eyebrow{font-family:'Neureal','Courier New',monospace;font-size:14px;letter-spacing:.14em;color:var(--rojo);margin-bottom:30px}
.intro-h{font-weight:400;font-size:clamp(27px,2.9vw,42px);line-height:1.22;letter-spacing:-.01em;margin-bottom:30px;max-width:21em}
.intro-p{font-size:clamp(17px,1.45vw,21px);line-height:1.55;color:var(--rojo);max-width:34em}
.intro-img{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1445/981}
.intro-img img{width:100%;height:100%;object-fit:cover}

/* ---------- LA OPORTUNIDAD ---------- */
.oport{padding:clamp(10px,2vw,28px) clamp(10px,1.6vw,24px) clamp(48px,6vw,90px)}
.oport-card{background:var(--oxblood);border-radius:var(--r-lg);padding:clamp(30px,4.5vw,68px);max-width:1600px;margin-inline:auto}
.tag{display:flex;align-items:center;gap:12px;color:var(--naranja);font-size:clamp(17px,1.5vw,21px);margin-bottom:clamp(28px,4vw,54px)}
.tag .plus{font-size:1.25em}
.oport-head{max-width:820px;margin-inline:auto;text-align:left;margin-bottom:clamp(36px,5vw,72px)}
.oport-h{font-weight:400;font-size:clamp(30px,3.9vw,56px);line-height:1.12;letter-spacing:-.012em;margin-bottom:28px}
.oport-sub{font-size:clamp(19px,2vw,28px);line-height:1.3;max-width:24em}
.servs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.serv{
  position:relative;border-radius:var(--r-md);overflow:hidden;cursor:pointer;isolation:isolate;
  aspect-ratio:1034/1213;
  background:var(--edge);
  outline-offset:3px;
}
.serv:focus-visible{outline:3px solid var(--naranja)}
.serv-img{position:absolute;inset:0;overflow:hidden}
.serv-img img{width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .9s var(--ease)}
.serv::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,7,6,.94) 0%,rgba(10,7,6,.86) 20%,rgba(10,7,6,.60) 43%,rgba(10,7,6,.26) 60%,rgba(10,7,6,.04) 80%,transparent 100%);opacity:.92;transition:opacity .5s}
.serv-num{position:absolute;top:18px;right:20px;z-index:3;font-family:'NeurealMono','Courier New',monospace;color:var(--naranja);font-size:15px;text-shadow:0 1px 8px rgba(10,7,6,.55),0 0 2px rgba(10,7,6,.4)}
.serv-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(18px,1.8vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.serv-t{font-weight:400;font-size:clamp(23px,2vw,31px);line-height:1.1;color:var(--blanco);letter-spacing:-.01em}
.serv-plus{font-size:22px;transition:transform .5s var(--ease)}
.serv-d{
  font-size:clamp(14px,1.05vw,15.5px);line-height:1.5;color:rgba(255,255,255,.92);max-width:34em;
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease) .06s,transform .55s var(--ease) .06s;
}
@media (hover:hover){
  .serv:hover .serv-d,.serv:focus-visible .serv-d,.serv.is-open .serv-d{opacity:1;transform:none}
  .serv:hover .serv-img img{transform:scale(1.06)}
  .serv:hover .serv-plus{transform:rotate(135deg)}
  .serv:hover::after{opacity:1}
}
@media (hover:none){
  .serv.is-open .serv-d{opacity:1;transform:none}
  .serv.is-open .serv-plus{transform:rotate(135deg)}
  .serv.is-open::after{opacity:1}
}

/* ---------- CLIENTES ---------- */
.clients{padding:clamp(90px,11vw,170px) 0 clamp(70px,8vw,120px)}
.statement{
  font-weight:400;font-size:clamp(30px,4.6vw,66px);line-height:1.12;letter-spacing:-.015em;
  color:var(--rojo);max-width:19em;margin-bottom:clamp(56px,7vw,110px);
}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;animation:mq var(--mq-dur,52s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{flex:0 0 auto;width:clamp(190px,20vw,300px);aspect-ratio:300/135;border-radius:14px;background:#F4F4F3;display:grid;place-items:center;overflow:hidden}
.mq-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.9;transition:opacity .3s}
.mq-item:hover img{opacity:1}

/* ---------- SOMOS ---------- */
.somos{padding-bottom:clamp(60px,7vw,110px)}
.somos-lockup{text-align:center;padding:clamp(30px,4vw,60px) 0 clamp(70px,9vw,140px)}
.somos-h{display:block}
.somos-h>span{display:block}
.somos-h .u-font{font-size:clamp(44px,8.4vw,124px);line-height:.92}
.somos-script{font-size:clamp(40px,7.6vw,112px);line-height:.52;position:relative;z-index:2;display:block;transform:translateY(-.04em)}
.somos-sub{font-size:clamp(28px,4.4vw,66px) !important;position:relative;z-index:1;max-width:15.5em;margin-inline:auto;padding-top:.12em}
.anio{display:flex;align-items:center;justify-content:center;gap:clamp(36px,7vw,110px);margin:clamp(36px,4.5vw,64px) 0}
.anio .mono{font-size:clamp(26px,3vw,44px);letter-spacing:.06em}
.anio img{width:clamp(96px,11vw,150px);height:auto}
.mono-block{font-family:'NeurealMono','Courier New',monospace;font-size:clamp(13px,1.25vw,17px);line-height:1.75;letter-spacing:.05em;color:var(--rojo);max-width:44em;margin-inline:auto;text-transform:uppercase}

/* ---------- MANIFIESTO ---------- */
.mani{display:flex;flex-direction:column;gap:clamp(90px,12vw,190px);padding-bottom:clamp(90px,11vw,170px)}
.mani-item{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
/* ---- emphasis inside the big Dapper caps only (never the small copy below,
   where any of this would cost legibility) ---- */
/* circled word: the loop overshoots its start, the way a marker actually closes */
.mk-circle{position:relative;display:inline-block;padding:0 .2em}
/* The overshoot is a percentage of the marked word, which is right until the word
   fills the line: on a phone that put the circle 27px past the viewport, and a page
   wider than the screen is what made every section stop reaching the edges. Capping
   it in px keeps the proportional overshoot on short words and only reins in the
   full-width ones, so nothing has to be clipped. */
.mk-circle svg{position:absolute;left:max(-11%,-13px);top:-34%;
  width:min(123%,calc(100% + 26px));height:170%;overflow:visible;pointer-events:none}
/* non-scaling-stroke keeps the line an even weight: without it the squash that
   fits the loop around a long word makes the sides fat and the top hairline */
.mk-circle path{fill:none;stroke:var(--naranja);stroke-width:4.5;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.15s cubic-bezier(.55,0,.3,1)}
.mk-circle.is-drawn path{stroke-dashoffset:0}

/* crown scrawled above the word */
/* the margin opens the gap the crown lives in — without it the mark lands
   inside the previous line and reads as noise between letters */
/* block, not inline: a margin on an inline box doesn't open the line above, so
   the crown kept landing inside the previous line. Its own line guarantees room. */
.mk-crown{position:relative;display:block;width:fit-content;margin:.34em auto .02em;z-index:6}
/* in normal flow, not absolute: positioned above the line it kept getting clipped
   or buried by the previous line — here it simply occupies its own space */
/* relative + z-index: the .94 line-height makes the line above overlap this
   space, and without a layer of its own the crown gets painted over */
.mk-crown svg{display:block;position:relative;z-index:6;width:50%;aspect-ratio:96/32;height:auto;
  margin:0 auto .04em;overflow:visible;pointer-events:none}
.mk-crown path{fill:none;stroke:var(--naranja);stroke-width:10;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset .95s cubic-bezier(.5,0,.35,1)}
.mk-crown.is-drawn path{stroke-dashoffset:0}

/* marker swipe behind the word */
.mk-hl{position:relative;display:inline-block;z-index:0}
.mk-hl svg{position:absolute;left:-3%;top:12%;width:106%;height:82%;z-index:-1;overflow:visible;pointer-events:none}
.mk-hl path{fill:none;stroke:var(--naranja);stroke-opacity:.28;stroke-width:44;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset .8s cubic-bezier(.4,0,.3,1)}
.mk-hl.is-drawn path{stroke-dashoffset:0}

html:not(.js) .mk-circle path,html:not(.js) .mk-crown path,html:not(.js) .mk-hl path{stroke-dashoffset:0}

.mk-gr{ /* the tag: same blackletter the brand already uses for "Latina" */
  font-family:'Jabin','Times New Roman',serif;font-weight:700;font-style:normal;
  text-transform:none;letter-spacing:0;font-size:1.1em;line-height:.7;
  display:inline-block;vertical-align:-.05em;margin:0 .04em;color:var(--naranja)}
.mk-ul{position:relative;display:inline-block}
/* sits clear of the baseline: any closer and the stroke reads as a strikethrough
   across the descenders instead of a mark under the line */
.mk-ul svg{position:absolute;left:-1.5%;bottom:-.16em;width:103%;height:.26em;overflow:visible;pointer-events:none}
/* drawn by a plain CSS transition toggled from an IntersectionObserver: fewer
   moving parts than routing it through ScrollTrigger, and it can't be starved by
   the other triggers already bound to these headings */
.mk-ul path{fill:none;stroke:var(--naranja);stroke-width:5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1)}
.mk-ul.is-drawn path{stroke-dashoffset:0}
html:not(.js) .mk-ul path{stroke-dashoffset:0}

.mk-gr{opacity:0;transform:translateY(18%) rotate(-3deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mk-gr.is-in{opacity:1;transform:none}
html:not(.js) .mk-gr{opacity:1;transform:none}

.mani-num{color:var(--rojo);font-size:15px;letter-spacing:.1em;margin-bottom:26px;position:relative;z-index:2}
.mani-h{font-size:clamp(34px,5.6vw,82px);color:var(--rojo);max-width:15em;position:relative;z-index:2;margin-bottom:30px}
/* The 34px floor is wider than the narrowest phones can hold: "MULTIDISCIPLINARIAS"
   measures 319px there against a 294px column, and a single word has nowhere to
   break. Below ~386px the size tracks the viewport instead; at 386px and up the
   cap lands back on the same 34px, so nothing that already fits changes. */
@media (max-width:520px){ .mani-h{font-size:clamp(28px,8.8vw,34px)} }


.mani-h .jabin{font-style:normal;text-transform:none;font-size:1.14em;line-height:.7;vertical-align:-.06em;letter-spacing:0;display:inline-block;margin:0 .06em}
.mani-p{font-size:clamp(17.5px,2vw,28px);line-height:1.42;max-width:31em;position:relative;z-index:2;font-weight:500}
.mani-ghost{
  position:absolute;z-index:0;top:50%;left:50%;
  transform:translate(calc(-50% + var(--gx,0px)),-50%);
  /* 26vw is safe at any width — the floor was not: on a 390px phone it forced
     150px, and "01/06" at that size is 435px wide, so the ghost pushed the
     document to 429px and every section stopped filling the screen. */
  font-size:clamp(88px,26vw,390px);letter-spacing:-.02em;
  color:var(--cyan);line-height:1;pointer-events:none;white-space:nowrap;
}
.mani-item:nth-child(odd) .mani-ghost{--gx:-4vw}
.mani-item:nth-child(even) .mani-ghost{--gx:4vw}
[data-ilum] .w{opacity:var(--dim,.13)}
.no-js [data-ilum] .w,[data-ilum].ilum-done .w{opacity:1}

/* ---------- TRABAJO ---------- */
.trabajo{padding:0 clamp(10px,1.6vw,24px) clamp(60px,7vw,110px)}
.wfpc{
  position:relative;background:var(--teal);border-radius:var(--r-lg);
  max-width:1600px;margin-inline:auto;
  padding:clamp(30px,4.5vw,68px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,60px);
  color:var(--blanco);
}
.wfpc-num{position:absolute;top:clamp(24px,3vw,48px);right:clamp(24px,3vw,48px);color:var(--sage);font-size:clamp(18px,1.8vw,26px)}
.wfpc-h{font-weight:400;font-size:clamp(30px,3.8vw,56px);line-height:1.08;letter-spacing:-.012em;max-width:14em}
.wfpc-sage{color:var(--sage)}
.wfpc-plus{font-size:26px;color:var(--blanco);margin:26px 0 22px;display:block}
.wfpc-p{font-size:clamp(15.5px,1.3vw,18px);line-height:1.55;color:rgba(255,255,255,.92);max-width:36em;margin-bottom:clamp(30px,4vw,56px)}
.wfpc-q p{font-size:clamp(18px,1.7vw,24px);line-height:1.4;max-width:22em;margin-bottom:26px}
.wfpc-who{display:flex;gap:16px;align-items:center}
.wfpc-who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.wfpc-who div{display:flex;flex-direction:column;gap:2px}
.wfpc-who strong{font-weight:500;font-size:17px}
.wfpc-who span{color:var(--sage);font-size:14.5px}
.wfpc-who em{font-style:normal;font-size:13.5px;font-family:'Neureal','Courier New',monospace;letter-spacing:.03em}
.wfpc-imgs{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(12px,1.4vw,20px);align-content:end}
.wfpc-imgs figure{border-radius:14px;overflow:hidden;aspect-ratio:1/1}
.wfpc-imgs figure:last-child{aspect-ratio:508/637}
.wfpc-imgs img{width:100%;height:100%;object-fit:cover}

/* mosaic placeholders */
.mosaic{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:clamp(150px,17vw,270px);gap:clamp(14px,1.6vw,24px);margin-top:clamp(14px,1.6vw,24px)}
.m-a{grid-column:span 3;grid-row:span 2}
.m-b{grid-column:span 2;grid-row:span 1}
.m-c{grid-column:span 2;grid-row:span 1}
.m-d{grid-column:span 2;grid-row:span 2}
.m-e{grid-column:span 3;grid-row:span 2}
.mcard{
  position:relative;background:var(--bg);color:var(--fg);border-radius:var(--r-md);
  padding:24px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;
  overflow:hidden;transition:transform .5s var(--ease);
}
.mcard:hover{transform:scale(.985)}
.mcard-meta{position:absolute;top:20px;left:22px;font-size:12.5px;letter-spacing:.1em;opacity:.85}
.mcard-plus{font-size:clamp(34px,3.6vw,54px);color:var(--fg);opacity:.9;transition:transform .6s var(--ease)}
.mcard:hover .mcard-plus{transform:rotate(90deg)}
.mcard-t{font-size:clamp(19px,1.9vw,27px);letter-spacing:-.01em}

/* ---------- EQUIPO ---------- */
.equipo-sec{padding:clamp(40px,5vw,80px) clamp(10px,1.6vw,24px) clamp(60px,7vw,110px)}
.equipo-h{font-size:clamp(64px,11vw,168px);color:var(--rojo);letter-spacing:-.02em;line-height:1;margin-bottom:clamp(30px,4vw,56px)}
.equipo-card{
  background:#1A0505;border-radius:var(--r-lg);max-width:1600px;margin-inline:auto;
  padding:clamp(26px,4vw,64px);display:flex;flex-direction:column;gap:clamp(56px,7vw,110px);
}
.member{display:grid;grid-template-columns:minmax(260px,460px) 1fr;gap:clamp(26px,5vw,80px);align-items:center}
/* the canvas redraws the photo as glyphs; the <img> stays underneath as the
   no-JS fallback and as the luminance source */
.member-ph{border-radius:16px;overflow:hidden;aspect-ratio:1090/1322;background:#12131E;position:relative;cursor:crosshair}
.ascii-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
/* cutout variant: no plate, no rounded edge — only the glyphs of the silhouette,
   so the figure reads as floating on the section itself */
.member-ph[data-ascii~="cutout"]{background:none;border-radius:0;overflow:visible}
.member-ph:has(.ascii-cv) img{opacity:0}
.member-ph--clawd{background:#EDEBE4}
.member-ph img{width:100%;height:100%;object-fit:cover}
.member-txt{text-align:right;color:var(--naranja);display:flex;flex-direction:column;align-items:flex-end}
.member-name{font-size:clamp(64px,9vw,150px);line-height:.9;margin-bottom:18px}
.member-caps{font-family:'Dapper','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(17px,1.7vw,25px);letter-spacing:-.02em;margin-bottom:6px}
.member-role{font-size:clamp(16px,1.5vw,22px);margin-bottom:26px}
.member-bio{font-size:clamp(12.5px,1.05vw,15px);line-height:1.8;max-width:56em;letter-spacing:.01em}
.member-bio + .member-bio{margin-top:14px}
.member-link{text-decoration:underline;text-underline-offset:4px}
.member-link:hover{color:var(--crema)}

/* ---------- FOOTER ---------- */
.foot{background:var(--naranja);color:var(--rojo);padding-top:clamp(70px,8vw,120px);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(40px,6vw,100px);align-items:start;padding-bottom:clamp(70px,9vw,140px)}
.foot-item{margin-bottom:clamp(36px,4.5vw,64px)}
.foot-item .plus{font-size:clamp(20px,2vw,30px);color:var(--rojo);display:block;margin-bottom:16px}
.foot-big{
  font-size:clamp(24px,3.6vw,54px);letter-spacing:-.015em;line-height:1.15;
  border-bottom:2px solid currentColor;padding-bottom:.08em;
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:opacity .3s;word-break:break-word;
}
.foot-big:hover{opacity:.72}
.foot-cols{display:flex;gap:clamp(40px,5vw,90px);padding-top:10px}
.foot-col{display:flex;flex-direction:column;gap:16px}
.foot-label{font-family:'Neureal','Courier New',monospace;font-size:13.5px;letter-spacing:.06em;display:flex;align-items:center;gap:9px;margin-bottom:14px}
.foot-label .plus{color:var(--rojo);font-size:1.3em}
.foot-col a{font-size:clamp(17px,1.5vw,21px);width:fit-content;position:relative}
.foot-col a::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.foot-col a:hover::after{transform:scaleX(1);transform-origin:left}
.arrw{font-family:'Neureal','Courier New',monospace;font-size:.85em}
.foot-logo{position:relative;width:98%;margin:0 auto;line-height:0;overflow:hidden;padding-top:1.5%}
.giant-word{width:100%;height:auto;fill:var(--rojo);color:var(--rojo);position:relative;z-index:1}
.giant-word use[href="#lgPlus"]{stroke:var(--rojo)}
.giant-script{position:relative;width:88%;height:auto;fill:var(--gris);margin-top:-4.2%;margin-bottom:-3.4%;z-index:2}

/* ---------- REVEALS (JS-gated) ---------- */
html.js [data-reveal],html.js [data-reveal-group]>*{opacity:0;transform:translateY(34px)}
html.js [data-clip]{clip-path:inset(14% 6% 14% 6% round 18px);transform:scale(1.05)}
html.js.anim-ready [data-reveal],html.js.anim-ready [data-reveal-group]>*,html.js.anim-ready [data-clip]{opacity:initial;transform:initial}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .servs{grid-template-columns:1fr 1fr}
  .serv:last-child{grid-column:span 2;aspect-ratio:2.15/1.2}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(160px,24vw,240px)}
  .m-a,.m-b,.m-c,.m-d,.m-e{grid-column:span 1;grid-row:span 1}
  .m-a,.m-e{grid-column:span 2}
}
@media (max-width:880px){
  .intro{grid-template-columns:1fr}
  .intro-img{order:-1}
  .wfpc{grid-template-columns:1fr}
  .member{grid-template-columns:1fr;gap:26px}
  .member-ph{max-width:420px}
  .member-txt{text-align:left;align-items:flex-start}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hdr{padding:20px 18px}
  .brand-word{height:15px}
  .brand-script{height:19px}
  .pill{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:50%;transform:translate(50%,14px)}
  @keyframes pillIn{to{opacity:1;transform:translate(50%,0)}}
  .pill-link{padding:11px 18px;font-size:14px}
  .servs{grid-template-columns:1fr}
  .serv,.serv:last-child{grid-column:span 1;aspect-ratio:1034/1213}
  /* Three of the four frames are portrait now, so on a phone they fill the screen
     edge to edge on their own — no blurred fill, no bands. The wordmark rides on
     top as its own layer and is fitted whole, so nothing of it gets cropped. */
  .hero{height:100svh;min-height:560px}
  .hero-slide picture{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.03)}
  .hero-slide img{object-fit:cover;object-position:center 42%}
  .hero-letter picture{transform:translate3d(var(--lx,0px),var(--ly,0px),0)}
  .hero-slide img{object-position:center 50%;transform:none}
  .hero-slide.is-active img{animation:none}
  .hero-dots{bottom:calc(104px + env(safe-area-inset-bottom))}
  .mani-p{font-size:17px}
  .wfpc-imgs{grid-template-columns:1fr 1fr}
  .foot-cols{gap:48px}
  .foot-logo{width:100%}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* NO flex-wrap here. It turned the carousel into a two-column grid, and since the
     track carries a duplicated pass for the seamless loop, every copy rendered as a
     stacked list — screens of the same four logos. It stays one animated row. */
  .mq-item{width:clamp(150px,42vw,200px)}
  /* keep the dissolve and the progress bar — drop only the movement */
  .hero-slide.is-active img{animation:none;transform:none}
  .hero-slide picture{transform:none}
  .hero-slide{transition:opacity .6s ease}
  .loader{animation-delay:.4s}
  .loader-plus{animation:none}
  [data-ilum] .w{opacity:1 !important}
  html.js [data-reveal],html.js [data-reveal-group]>*,html.js [data-clip]{opacity:1;transform:none;clip-path:none}
  .pill{animation-delay:.5s}
}