*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
/* No scroll-snap here on purpose. Even `y proximity` pins full-viewport sections:
   gentle wheel scrolling could not leave the opening or the hero at all, which is
   a scroll trap, and it froze the hero's scroll-linked 37% fade at full opacity
   because that fade needs continuous scroll positions, not discrete stops. */
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: var(--font); font-synthesis: none; font-synthesis-weight: none; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.menu-open { overscroll-behavior: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--white); color: var(--black); }

.skip-link { position: fixed; z-index: 200; top: 1rem; left: 1rem; padding: .7rem 1rem; background: white; color: black; text-decoration: none; transform: translateY(-200%); transition: transform 200ms var(--ease); }
.skip-link:focus { transform: translateY(0); }
#incentivo, #servicios, #estudios, #aliados, #vfx-info, #musica-info, .studio-copy { scroll-margin-top: 6.5rem; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.page-progress { position: fixed; z-index: 120; top: 0; left: 0; width: 100%; height: 1px; }
.page-progress i { display: block; width: 100%; height: 100%; background: white; transform: scaleX(0); transform-origin: left; }

.header { position: fixed; z-index: 100; top: 0; left: 0; display: grid; width: 100%; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.45rem 2rem; border-bottom: 1px solid transparent; transition: padding 250ms, background 250ms, border-color 250ms; }
.header.is-scrolled { padding-block: .9rem; border-color: var(--line); background: rgba(5,5,5,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brand-mark { display: inline-flex; width: max-content; align-items: center; justify-content: center; padding: .5rem .66rem .47rem; border: 1px solid rgba(255,255,255,.72); font-weight: 700; line-height: 1; letter-spacing: -.045em; text-decoration: none; }
.logo { position: relative; z-index: 2; font-size: .92rem; transition: color 200ms, background 200ms, border-color 200ms; }
.logo:hover, .logo:focus-visible { border-color: white; background: white; color: black; }
.header nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.7rem); }
.header nav a { color: var(--gray-2); font-size: .69rem; font-weight: 650; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; transition: color 200ms; }
.header nav a:hover, .header nav a:focus-visible, .header nav a[aria-current="location"] { color: white; }
.header-controls { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; }
.language-switcher { display: flex; align-items: center; gap: .38rem; color: var(--gray-3); font-size: .62rem; font-weight: 650; letter-spacing: .08em; }
.language-switcher a { padding: .25rem 0; color: inherit; text-decoration: none; transition: color 200ms; }
.language-switcher a[aria-current="page"], .language-switcher a:hover, .language-switcher a:focus-visible { color: var(--white); }
.menu { display: none; border: 0; background: none; color: white; }

.opening { position: relative; display: grid; height: 100svh; min-height: 34rem; align-content: center; justify-items: center; gap: clamp(1.4rem, 2.6vw, 2.4rem); overflow: hidden; padding: 6rem 1rem 9rem; }
/* The room sits in the lower half so the wordmark keeps a clean black field.
   The shade is solid black down to just past the mark, then releases. */
.opening-media { position: absolute; z-index: 0; inset: auto 0 0 0; height: 55%; animation: openingMediaIn 2600ms var(--ease) 1250ms backwards; }
.opening-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; filter: grayscale(.4) brightness(.85) contrast(1.06); }
.opening-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, #050505 0%, #050505 50%, rgba(5,5,5,.92) 60%, rgba(5,5,5,.5) 76%, rgba(5,5,5,.25) 92%, rgba(5,5,5,.38) 100%); }
.opening-mark, .opening .overline, .opening-cue { position: relative; z-index: 1; }
.opening-cue { position: absolute; }
/* Deliberately no fill-mode and no delay: the resting state is fully visible, so
   if animation never runs (JS off, reduced motion, old engine) nothing is hidden.
   This is what the removed intro curtain got wrong.
   The mark starts faintly visible rather than at 0 on purpose: it is the LCP
   element, and a fully transparent start makes the browser defer LCP until the
   fade ends (measured 144ms -> 1116ms). Delayed `backwards` entrances are only
   used on the small elements, never on that mark. */
@keyframes openingMarkIn {
  from { opacity: .16; transform: translateY(1.4rem) scale(.955); border-color: rgba(255,255,255,0); }
  55%  { border-color: rgba(255,255,255,.24); }
  to   { opacity: 1; transform: none; border-color: rgba(255,255,255,.72); }
}
@keyframes openingFadeUp { from { opacity: 0; transform: translateY(.55rem); } to { opacity: 1; transform: none; } }
/* The room settles in behind the mark once the mark has finished. It starts at a
   hair above zero rather than at zero so it stays an LCP candidate from first
   paint; at .02 over a near-black photograph it is invisible either way. */
@keyframes openingMediaIn { from { opacity: .02; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes openingFade { from { opacity: 0; } to { opacity: 1; } }
.opening-mark { max-width: calc(100vw - 2rem); margin: 0; padding: .18em .24em .16em; border-width: 2px; font-size: clamp(3.75rem, 19vw, 13.5rem); letter-spacing: -.065em; animation: openingMarkIn 1500ms var(--ease); }
.opening .overline { margin: 0; text-align: center; animation: openingFadeUp 900ms var(--ease) 620ms backwards; }
/* The cue's own pulse owns its opacity, so the entrance fades its children instead. */
.opening-cue span, .opening-cue i { animation: openingFade 800ms var(--ease) 1000ms backwards; }

.hero { --hero-scale: 1.03; --hero-copy-opacity: 1; --hero-copy-y: 0rem; position: relative; height: 100svh; min-height: 42rem; overflow: hidden; }
.hero-media { position: absolute; inset: 0; transform: scale(var(--hero-scale)); will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(.75) brightness(.85) contrast(1.08); }
/* The image is lifted above, then masked back where it must stay dark: bottom and
   left hold the headline, a new top gradient caps the frame, and the 135deg layer
   releases toward the lower right so brightness rises across that diagonal. */
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.38) 30%, rgba(0,0,0,.06) 60%, transparent 78%),
  linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.2) 45%, transparent 70%),
  linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.32) 26%, transparent 54%),
  linear-gradient(135deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.14) 48%, transparent 74%); }
.hero-copy { position: absolute; right: 0; bottom: clamp(4rem, 9vw, 8rem); left: 0; width: var(--shell); margin: auto; opacity: var(--hero-copy-opacity); transform: translateY(var(--hero-copy-y)); }
.overline { margin: 0 0 1.5rem; color: rgba(255,255,255,.65); font-size: .65rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { max-width: 18ch; margin: 0; font-size: clamp(3.2rem, 6.6vw, 7.2rem); font-weight: 520; line-height: .96; letter-spacing: -.067em; }
.hero h1 span { color: rgba(255,255,255,.43); }
.scroll-cue { position: absolute; right: 2rem; bottom: 2rem; display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.78); font-size: .74rem; font-weight: 620; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; animation: scrollCuePulse 2.4s ease-in-out infinite; }
.scroll-cue i { font-size: 1rem; font-style: normal; }
@keyframes scrollCuePulse { 0%, 100% { opacity: .58; transform: translateY(0); } 50% { opacity: 1; transform: translateY(.18rem); } }
.opening-cue { right: auto; bottom: clamp(2.5rem, 6vw, 4.5rem); left: 50%; transform: translateX(-50%); animation-name: openingCuePulse; }
@keyframes openingCuePulse { 0%, 100% { opacity: .58; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, .18rem); } }

.manifesto { width: var(--shell); margin: auto; padding: clamp(7rem, 11vw, 11rem) 0; }
.manifesto-block { max-width: 66rem; }
.manifesto-block + .manifesto-block { margin: clamp(5rem, 10vw, 10rem) 0 0 auto; }
.manifesto-block p { margin: 0 0 1.35rem; font-size: clamp(1.9rem, 4.05vw, 4.45rem); font-weight: 490; line-height: 1.06; letter-spacing: -.052em; }
.manifesto-block p:not(:first-child) { color: var(--gray-3); }
.manifesto-block-muted p:first-child { color: var(--gray-1); }

.filmography-intro { display: grid; width: var(--shell); min-height: 42svh; margin: auto; place-items: end start; padding: clamp(5rem, 9vw, 9rem) 0 clamp(3rem, 5vw, 5rem); }
.filmography-intro p { max-width: 31ch; margin: 0; color: var(--gray-1); font-size: clamp(1.7rem, 3.5vw, 3.8rem); font-weight: 500; line-height: 1.06; letter-spacing: -.052em; }
.filmography { height: 230svh; }
.filmography-sticky { position: sticky; top: 0; display: flex; height: 100svh; align-items: center; overflow: hidden; background: var(--black-2); }
.filmography-sticky { cursor: grab; touch-action: pan-y; }
.filmography-sticky.is-dragging { cursor: grabbing; user-select: none; }
/* Desktop drives the strip by transform, so this wrapper generates no box at all
   and the layout is exactly as if it were not here. Every path that scrolls the
   strip natively (narrow screens, reduced motion, no JS) turns it into the scroll
   container instead of `.filmography-sticky` — otherwise `.filmography-ui`, being
   absolutely positioned inside the scroll container, translates off-screen with
   the posters rather than staying under them. */
.film-scroller { display: contents; }
.film-strip { display: inline-flex; width: max-content; min-width: max-content; max-width: none; flex: 0 0 auto; gap: clamp(.8rem, 1.5vw, 1.5rem); padding: 0 8vw; transform: translate3d(var(--strip-x), 0, 0); will-change: transform; }
.film-strip figure { display: grid; width: clamp(15rem, 21vw, 25rem); height: min(68svh, 42rem); margin: 0; flex: 0 0 auto; place-items: center; }
.film-strip figure > a { display: grid; width: 100%; height: 100%; place-items: center; text-decoration: none; -webkit-user-drag: none; }
.film-strip figure > a:focus-visible { outline: 1px solid white; outline-offset: 4px; }
.film-strip figure > a:hover img, .film-strip figure > a:focus-visible img { opacity: 1; filter: saturate(1); }
.film-strip img { width: 100%; height: 100%; object-fit: contain; opacity: var(--poster-opacity, .72); transform: scale(var(--poster-scale, .985)); filter: saturate(.72); transition: opacity 180ms linear, transform 180ms linear; }
.filmography-ui { position: absolute; right: 2rem; bottom: 1.4rem; left: 2rem; display: grid; grid-template-columns: auto minmax(6rem, 1fr) auto auto auto; align-items: center; gap: 1rem; color: var(--gray-2); font-size: .62rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.filmography-ui p { margin: 0; }
.filmography-progress { height: 1px; overflow: hidden; background: var(--line); }
.filmography-progress i { display: block; width: 100%; height: 100%; background: white; transform: scaleX(0); transform-origin: left; }
.filmography-ui a { padding: .4rem 0; color: var(--gray-1); text-decoration: none; pointer-events: auto; }
.film-steps { display: flex; gap: .4rem; pointer-events: auto; }
.film-steps[hidden] { display: none; } /* a class `display` would otherwise beat the UA [hidden] rule */
.film-steps button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid var(--line-strong); background: none; color: var(--gray-1); font-size: .85rem; line-height: 1; cursor: pointer; transition: color 200ms, border-color 200ms, background 200ms; }
.film-steps button:hover, .film-steps button:focus-visible { border-color: white; background: white; color: black; }
/* Without JavaScript nothing drives the scroll-linked strip, so the gallery must be a
   plain, self-scrolling band the page can move straight past. */
.no-js .filmography { height: auto; padding: 5rem 0 0; }
.no-js .filmography-sticky { position: relative; height: auto; min-height: 0; padding-bottom: 5.5rem; cursor: default; touch-action: auto; }
.no-js .film-scroller { display: block; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.no-js .film-scroller::-webkit-scrollbar { display: none; }
.no-js .film-strip { transform: none; }
.no-js .film-strip figure { scroll-snap-align: center; }
.no-js .film-strip img { opacity: 1; transform: none; }

.incentive { display: grid; width: var(--shell); min-height: 92svh; margin: auto; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(3rem, 7vw, 8rem); padding: 7rem 0; }
.incentive-number { display: flex; align-items: flex-start; font-size: clamp(11rem, 26vw, 28rem); font-weight: 510; line-height: .68; letter-spacing: -.105em; }
.incentive-number sup { margin: 0 0 0 .04em; color: var(--gray-3); font-size: .24em; letter-spacing: -.05em; }
.incentive-copy h2 { margin: 0 0 1.75rem; font-size: clamp(2.5rem, 4.2vw, 4.6rem); font-weight: 520; line-height: .98; letter-spacing: -.06em; }
.incentive-copy > p { max-width: 35rem; margin: 0; color: var(--gray-2); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; }
.incentive dl { margin: 3rem 0 0; }
.incentive dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.incentive dt { max-width: 27rem; color: var(--gray-1); font-size: clamp(.9rem, 1.15vw, 1.05rem); font-weight: 520; line-height: 1.45; }
.incentive dd { margin: 0; flex: 0 0 auto; font-size: 1.15rem; font-weight: 620; }

.services { width: var(--shell); margin: auto; padding: clamp(7rem, 10vw, 11rem) 0; border-top: 1px solid var(--line); }
.section-title { margin-bottom: clamp(4rem, 7vw, 7rem); }
.section-title h2 { margin: 0; font-size: clamp(3.35rem, 7.2vw, 8rem); font-weight: 510; line-height: .9; letter-spacing: -.068em; }
.section-title-contained { width: var(--shell); margin-right: auto; margin-left: auto; padding-top: clamp(7rem, 10vw, 11rem); }
.service-browser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.service-list { border-top: 1px solid var(--line-strong); }
.service-list a { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); color: var(--gray-3); font-size: clamp(1.25rem, 2.15vw, 2.25rem); font-weight: 500; line-height: 1.12; letter-spacing: -.042em; text-decoration: none; transition: color 300ms, padding-left 400ms var(--ease); }
.service-list a span { padding-top: .35rem; font-size: .56rem; font-weight: 650; letter-spacing: .08em; }
.service-list a b { font: inherit; }
.service-list a.is-active, .service-list a:hover { padding-left: .35rem; color: white; }
.service-previews { position: sticky; top: 7rem; aspect-ratio: 1; overflow: hidden; background: var(--black-3); }
.service-previews img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); filter: saturate(.65); transition: opacity 600ms var(--ease-slow), transform 900ms var(--ease); }
.service-previews img.is-active { opacity: 1; transform: scale(1); }
.partner-logos { display: grid; margin-top: clamp(4rem, 7vw, 7rem); grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partner-logos a { display: flex; min-width: 0; min-height: 9.5rem; align-items: center; justify-content: center; padding: 1.5rem; text-decoration: none; }
.partner-logos a + a { border-left: 1px solid var(--line); }
.partner-logos img { width: min(72%, 10rem); max-height: 3.2rem; object-fit: contain; opacity: .42; filter: grayscale(1); transition: opacity 350ms, filter 450ms var(--ease), transform 500ms var(--ease); }
.partner-logos img.is-cuarto { width: min(92%, 14.5rem); max-height: 4.6rem; }
.partner-logos img.is-portrait { width: 5.6rem; max-height: 7.4rem; }
.partner-logos a:hover img, .partner-logos a:focus-visible img { opacity: 1; filter: grayscale(0); transform: scale(1.025); }

.studios { border-top: 1px solid var(--line); }
.studio { padding: clamp(7rem, 10vw, 11rem) 0; }
.studio + .studio { border-top: 1px solid var(--line); }
.studio-media { width: calc(100% - 2rem); height: min(76svh, 54rem); margin: 0 auto clamp(3.5rem, 6vw, 6rem); overflow: hidden; }
.studio-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); filter: saturate(.6); transition: transform 1.5s var(--ease); }
.studio-media.is-visible img { transform: scale(1); }
.studio-copy { width: var(--shell); margin: auto; }
.studio-brand { margin: 0 0 2.4rem; }
.studio-name { display: flex; align-items: flex-start; flex-direction: column; gap: .55rem; margin: 0; }
.studio-name h3 { margin: 0; font-size: clamp(1.65rem, 2.55vw, 2.7rem); font-weight: 560; letter-spacing: -.048em; }
.studio-name span { color: var(--gray-3); font-size: .62rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.studio-description { max-width: 56ch; margin: 0; font-size: clamp(1.65rem, 2.6vw, 3.05rem); font-weight: 480; line-height: 1.16; letter-spacing: -.047em; }
.studio-meta { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; margin: clamp(3rem, 5vw, 5rem) 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.studio-meta p, .studio-credits { max-width: 39rem; margin: 0; color: var(--gray-2); line-height: 1.55; }
.studio-credits { padding: 0; list-style: none; }
.studio-credits li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .75rem; }
.studio-credits li + li { margin-top: .5rem; }
.credit-link { align-self: center; color: var(--gray-3); font-size: .62rem; font-weight: 650; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: color 200ms; }
.credit-link:hover, .credit-link:focus-visible { color: var(--white); text-decoration: underline; text-underline-offset: .4em; }
.studio-meta > div { display: flex; justify-content: flex-end; gap: 1.5rem; }
.studio-meta a { align-self: flex-start; padding-bottom: .38rem; border-bottom: 1px solid var(--line-strong); font-size: 1.23rem; font-weight: 650; letter-spacing: .06em; line-height: 1.2; text-decoration: none; }
.studio-services { display: grid; grid-template-columns: 1fr 2fr; }
.studio-services h3 { margin: .8rem 0 0; color: var(--gray-2); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }
.studio-services-intro { max-width: 46rem; margin: .6rem 0 2.2rem; color: var(--gray-2); line-height: 1.55; }
.studio-services ul { margin: 0; padding: 0; list-style: none; }
.studio-services li { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--gray-1); font-size: clamp(1rem, 1.5vw, 1.25rem); }

.allies { width: var(--shell); margin: auto; padding: clamp(7rem, 10vw, 11rem) 0; border-top: 1px solid var(--line); }
.allies article { display: grid; grid-template-columns: 1fr 2fr; padding: 3.25rem 0; border-bottom: 1px solid var(--line); }
.allies header h3 { max-width: 24ch; margin: 0; color: var(--gray-2); font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.ally-kicker { margin: 0 0 1.5rem; color: var(--gray-1); font-size: .72rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.allies ul { margin: 0; padding: 0; list-style: none; }
.allies li { padding: .9rem 0; color: var(--gray-1); font-size: clamp(1.5rem, 3vw, 3.3rem); font-weight: 490; letter-spacing: -.045em; }
.allies li a { text-decoration: none; transition: color 200ms; }
.allies li a:hover { color: var(--gray-2); }
#musica li { font-size: clamp(1.2rem, 2.15vw, 2.35rem); }
.ally-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ally-images a { position: relative; aspect-ratio: 4/3; overflow: hidden; text-decoration: none; }
.ally-images img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.65) brightness(.7); transition: transform 800ms var(--ease), filter 500ms; }
.ally-images span { position: absolute; bottom: 1rem; left: 1rem; font-size: .7rem; font-weight: 650; letter-spacing: .05em; }
.ally-images a:hover img { transform: scale(1.025); filter: grayscale(0) brightness(.8); }

.closing { display: flex; width: var(--shell); min-height: 78svh; margin: auto; flex-direction: column; justify-content: center; }
.closing > p { max-width: 30ch; margin: 0; font-size: clamp(2rem, 3.7vw, 4.1rem); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.closing > a { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(3rem, 5vw, 5rem); padding: 1.5rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font-size: 1rem; text-decoration: none; }

footer { display: flex; align-items: center; justify-content: space-between; padding: 2rem; border-top: 1px solid var(--line); }
footer p { margin: 0; font-weight: 620; letter-spacing: -.04em; }
footer p:last-child { color: var(--gray-2); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
footer a { color: inherit; text-underline-offset: .25em; }

.js [data-reveal] { opacity: 0; transform: translateY(2.5rem); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.js .manifesto-block[data-reveal] p { opacity: 0; transform: translateY(1.4rem); transition: color 200ms, opacity 750ms var(--ease), transform 750ms var(--ease); }
.js .manifesto-block[data-reveal].is-visible p { opacity: 1; transform: none; }
.js .manifesto-block[data-reveal].is-visible p:nth-child(2) { transition-delay: 90ms; }
.js .manifesto-block[data-reveal].is-visible p:nth-child(3) { transition-delay: 180ms; }
.js .studio-media[data-reveal] { opacity: 0; transform: none; transition: opacity 900ms var(--ease); }
.js .studio-media[data-reveal].is-visible { opacity: 1; }
body.is-translating main { opacity: .72; }
main { transition: opacity 160ms ease; }
:focus-visible { outline: 1px solid white; outline-offset: 5px; }

@media (max-width: 64rem) {
  .header { grid-template-columns: 1fr auto; }
  .header nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.3rem; padding: 6rem 2rem; background: var(--black); opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity 250ms, visibility 0s 250ms, transform 250ms; }
  .header nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .header nav a { font-size: clamp(1.8rem, 7vw, 4rem); font-weight: 510; letter-spacing: -.05em; text-transform: none; }
  .menu { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; font-size: .65rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .menu i, .menu i::after { display: block; width: 1.2rem; height: 1px; background: white; content: ""; transition: transform 200ms; }
  .menu i::after { transform: translateY(.3rem); }
  .menu[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu[aria-expanded="true"] i::after { transform: rotate(-90deg); }
  .header.is-menu-open { border-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 48rem) {
  .header { padding-inline: 1rem; }
  .header-controls { gap: .9rem; }
  .opening-mark { font-size: clamp(3.75rem, 21vw, 13.5rem); }
  .hero-copy { bottom: 5rem; }
  .hero h1 { font-size: clamp(2.85rem, 13.5vw, 4.9rem); }
  .scroll-cue { right: 1rem; bottom: 1.2rem; }
  .manifesto-block p { font-size: clamp(1.85rem, 8.2vw, 3.1rem); }
  .filmography-intro { min-height: 34svh; }
  .filmography { height: auto; padding: 0 0 4rem; background: var(--black-2); }
  .filmography-sticky { position: relative; height: auto; min-height: min(78svh, 43rem); cursor: ew-resize; touch-action: pan-x pan-y; }
  .film-scroller { display: block; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-padding-inline: 8vw; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .film-scroller::-webkit-scrollbar { display: none; }
  .film-strip { padding-top: 4.5rem; padding-bottom: 5.5rem; transform: none !important; will-change: auto; }
  .film-strip figure { width: 60vw; }
  .film-strip figure { height: min(58svh, 35rem); scroll-snap-align: center; }
  .filmography-ui { right: 1rem; bottom: 1.1rem; left: 1rem; grid-template-columns: auto 1fr auto auto; }
  .filmography-ui > p:nth-of-type(2) { display: none; }
  .film-steps button { width: 1.95rem; height: 1.95rem; }
  .incentive { grid-template-columns: 1fr; min-height: auto; }
  .incentive-number { font-size: 52vw; }
  .service-browser, .studio-services, .allies article { grid-template-columns: 1fr; }
  .service-previews { position: relative; top: auto; grid-row: 1; }
  .studio-media { width: 100%; height: 56svh; }
  .partner-logos a { min-height: 7.5rem; padding: .85rem; }
  .partner-logos img { width: min(82%, 7rem); max-height: 2.4rem; }
  .partner-logos img.is-cuarto { width: min(96%, 10rem); max-height: 3.5rem; }
  .partner-logos img.is-portrait { width: 4.4rem; max-height: 5.8rem; }
  .studio-brand { margin-bottom: 2rem; }
  .studio-meta { grid-template-columns: 1fr; }
  .studio-meta > div { justify-content: flex-start; }
  .studio-services ul { margin-top: 2rem; }
  .allies header { margin-bottom: 2rem; }
  .ally-images { grid-template-columns: 1fr; }
  .closing > p { font-size: clamp(1.75rem, 6.6vw, 2.7rem); }
  footer { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .hero-media, .hero-copy { transform: none !important; opacity: 1 !important; }
  .scroll-cue { animation: none; }
  .opening-mark, .opening .overline, .opening-cue span, .opening-cue i, .opening-media { animation: none; }
  .filmography { height: auto !important; padding: 5rem 0 0; overflow: visible; }
  .filmography-sticky { position: relative; height: auto; min-height: 0; padding-bottom: 5.5rem; cursor: default; touch-action: auto; }
  .film-scroller { display: block; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
  .film-scroller::-webkit-scrollbar { display: none; }
  .film-strip { transform: none !important; }
  .film-strip figure { scroll-snap-align: center; }
  .film-strip img { opacity: 1; transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}