/* LORENZO Colorlab — landing page (simplified).
   Inherits tokens from colors_and_type.css. */
@import url("./colors_and_type.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Visually hidden — accessible page title where the design carries none. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
html {

  /* Bloquea por completo el desplazamiento horizontal: `clip` recorta sin
     crear un contenedor scrollable, así que en táctil (tablet / móvil) la
     página no se puede arrastrar de lado. */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  overscroll-behavior-x: none;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  position: relative;
  /* Nada de rebote horizontal ni encadenado de scroll lateral. */
  overscroll-behavior-x: none;
}

/* ==================================================================
   BLOQUEO DEL ARRASTRE HORIZONTAL (táctil · tablet y móvil)
   Safari/iOS ignora en parte el `overflow-x` del elemento raíz, así que
   el recorte real se hace en el contenedor de la app (#root): `clip` no
   crea scroller —los `position: sticky` de dentro siguen funcionando—
   pero elimina cualquier área arrastrable a los lados.
   ================================================================== */
#root,
body > header,
body > main,
body > footer {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  overscroll-behavior-x: none;
}

/* Los carruseles horizontales intencionados siguen desplazándose, pero su
   scroll no se encadena nunca al documento. */
.serv-reel-track,
[data-hscroll] {
  overscroll-behavior-x: contain;
}

/* En páginas sin carrusel horizontal, el gesto lateral queda desactivado
   por completo: sólo desplazamiento vertical y pinch-zoom. */
@media (pointer: coarse) {
  #root:not(:has(.serv-reel-track, .ed-marq-viewport, [data-hscroll])),
  body > main:not(:has(.serv-reel-track, .ed-marq-viewport, [data-hscroll])) {
    touch-action: pan-y pinch-zoom;
  }
}

/* Elementos fijos: nunca más anchos que la ventana (en Safari un fijo
   desbordado también genera arrastre lateral). */
.site-nav, .nav-drawer, .lc-cookie-banner {
  max-width: 100%;
  overflow-x: clip;
}
.site-nav { overflow-y: visible; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: inherit; background: none; border: 0; color: inherit; padding: 0; }
img, video, svg { display: block; max-width: 100%; }

/* ====================== Buttons ====================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase;
  padding: 12px 24px; border: 0.75px solid transparent;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
  white-space: nowrap;
}
.btn.cta   { background: var(--bone); color: var(--bg); border-color: var(--bone); }
.btn.cta:hover { background: rgba(240,237,232,0.87); }
.btn.outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn.outline:hover { background: var(--fg); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--fg-muted); border-color: rgba(240,237,232,0.36); }
.btn.ghost:hover { color: var(--fg); border-color: var(--bone); }
.btn.lg { padding: 18px 34px; font-size: 10.5px; letter-spacing: 0.22em; }

/* ====================== Pretag ====================== */
.pretag {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.pretag::before { content: ""; display: block; width: 28px; height: 1px; background: var(--rule-strong); }


/* Lighter, smaller register — Medium (500) instead of Bold (700),
   with slightly looser tracking to compensate for the reduced weight
   in uppercase. Sizes are set per-instance and have been halved. */
.tv-h {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.015em; line-height: 0.92;
  text-transform: uppercase; color: var(--fg);
}
.tv-h em { font-style: italic; font-weight: 300; color: var(--fg-muted); }


/* Base reveal — opacity + a 26px rise. Brand-spec timing: 850ms ease-out.
   Per-element delay via the --rd custom property (in seconds), or via .d1-.d8. */
.r {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out),
    filter .9s var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.r.on { opacity: 1; transform: translateY(0); }

/* Stagger ramps (use class OR --rd, not both) */
.r.d1 { --rd: 0.08s; } .r.d2 { --rd: 0.16s; }
.r.d3 { --rd: 0.24s; } .r.d4 { --rd: 0.32s; }
.r.d5 { --rd: 0.40s; } .r.d6 { --rd: 0.48s; }
.r.d7 { --rd: 0.56s; } .r.d8 { --rd: 0.64s; }

/* Variant — for the hero "wash" of headlines (light blur clearing).
   Used sparingly on display headings. */
.r-blur { filter: blur(10px); }
.r-blur.on { filter: blur(0); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .r, .r-blur { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}


/* The phrase rises from behind a clip mask; the whispered italic clause fades in
   a beat later; the subtitle fades up with a thin travel. No bounce, no overshoot. */
.interlude-mask { overflow: hidden; padding-bottom: 0.12em; }
.interlude-mask > .interlude-line { padding-bottom: 0.2em; }
.interlude-line {
  opacity: 0;
  transform: translateY(112%);
  filter: blur(6px);
  transition:
    transform 1.15s var(--ease-out),
    opacity 1.15s var(--ease-out),
    filter 1.15s var(--ease-out);
  will-change: transform, opacity, filter;
}
.interlude.on .interlude-line { opacity: 1; transform: translateY(0); filter: blur(0); }

.interlude-line em {
  opacity: 0.001;
  transition: opacity 1s var(--ease-out) 0.55s;
}
.interlude.on .interlude-line em { opacity: 1; }

.interlude-sub {
  margin: 28px 0 0;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 1s var(--ease-out) 0.6s,
    transform 1s var(--ease-out) 0.6s;
}
.interlude.on .interlude-sub { opacity: 1; transform: translateY(0); }

.interlude-cta {
  margin-top: clamp(28px, 3.4vw, 44px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s var(--ease-out) 0.8s,
    transform 1s var(--ease-out) 0.8s,
    color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.interlude.on .interlude-cta { opacity: 1; transform: translateY(0); }

/* ---- Landing interlude — la frase bajo el hero (portada es/en/gl) ----
   Mismo patrón que .ed-interlude: la base .interlude* es compartida con
   Color Grading y Edición, así que los valores propios de la portada viven
   en sus propias clases. */
.home-interlude {
  padding: clamp(120px, 18vh, 220px) var(--page-gutter);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.home-interlude-line {
  max-width: 30ch;
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
}
.home-interlude-line span { display: block; }
.home-interlude-line em { display: block; transform: translateX(-0.055em); }
.interlude-line em .br-m { display: none; }
.home-interlude-sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; line-height: 1.95; color: var(--fg-muted);
  max-width: none; white-space: nowrap;
}
/* Una sola línea en desktop; en pantallas estrechas vuelve a fluir */
@media (max-width: 900px) {
  .interlude-sub { white-space: normal !important; max-width: 44ch !important; }
}
/* Móvil: frase más grande, siempre en dos líneas */
.interlude-sub .br-m { display: none; }
.interlude-sub .br-d { display: inline; }
@media (max-width: 699px) {
  .interlude-sub .br-m { display: inline; }
  .interlude-sub .br-d { display: none; }
  /* Bloque compacto y titular a cuatro líneas */
  .interlude { padding: clamp(96px, 14vh, 150px) var(--page-gutter) 8px !important; }
  .home-interlude { padding-top: clamp(64px, 9vh, 110px) !important; padding-bottom: clamp(64px, 9vh, 110px) !important; }
  .interlude-line { font-size: min(14.6vw, 74px) !important; line-height: 1.04 !important; }
  .interlude-line span { white-space: normal; max-width: 11ch; margin: 0 auto; }
  .interlude-line em { white-space: normal; font-size: 0.84em; max-width: none; margin: 0 auto; }
  .interlude-line em .br-m { display: inline; }
  .interlude-sub { margin-top: 34px !important; font-size: 15.5px !important; line-height: 1.95 !important; }
  .interlude-cta { margin-top: 40px !important; }
  /* Color Grading: el bloque queda centrado en el aire negro entre el visor
     antes/despues y los logos de la tabla tecnica. */
  .cg-interlude {
    padding-top: clamp(52px, 7.4vh, 86px) !important;
    padding-bottom: clamp(44px, 6.6vh, 78px) !important;
  }
}
/* Tablet: el bloque se queda pequeño con 5.4vw — se sube un punto */
@media (min-width: 700px) and (max-width: 1100px) {
  .interlude-line { font-size: clamp(48px, 7vw, 72px) !important; }
  .interlude-sub { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .interlude-line, .interlude-line em, .interlude-sub, .interlude-cta {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}


/* Every section heading (.tv-h) now reveals like the phrase under the hero:
   it wipes up from behind its own baseline mask, rises a touch and clears a
   soft blur; the whispered italic clause fades in a beat later. Driven by the
   same `.on` class the IntersectionObserver already sets on `.r`. */
.r .tv-h, .r.tv-h,
.r .intro-head h1, .r.intro-head h1,
.r .space-h, .r.space-h {
  clip-path: inset(118% -25% -30% -25%);
  transform: translateY(0.32em);
  filter: blur(6px);
  transition:
    clip-path 1.15s var(--ease-out),
    transform 1.15s var(--ease-out),
    filter 1.15s var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: clip-path, transform, filter;
}
.r.on .tv-h, .r.on.tv-h,
.r.on .intro-head h1, .r.on.intro-head h1,
.r.on .space-h, .r.on.space-h {
  clip-path: inset(-30% -25% -30% -25%);
  transform: translateY(0);
  filter: blur(0);
}

.r .tv-h em, .r.tv-h em,
.r .intro-head h1 em, .r.intro-head h1 em,
.r .space-h em, .r.space-h em {
  opacity: 0.001;
  transition: opacity 1s var(--ease-out) 0.55s;
}
.r.on .tv-h em, .r.on.tv-h em,
.r.on .intro-head h1 em, .r.on.intro-head h1 em,
.r.on .space-h em, .r.on.space-h em { opacity: 1; }

/* Mientras dura el fundido de opacidad, el navegador sube la <em> a su propia
   capa de composición, dimensionada a la caja inline del texto. El voladizo de
   la última letra en itálica queda fuera de esa caja y se recorta por la
   derecha hasta que termina la transición y la capa se libera. Holgura interior
   anulada con margen negativo: la capa cubre el glifo y la línea no se mueve. */
.r .tv-h em, .r.tv-h em,
.r .intro-head h1 em, .r.intro-head h1 em,
.r .space-h em, .r.space-h em {
  /* !important: algunas <em> llevan padding/margin: 0 en línea desde el JSX. */
  padding-right: 0.16em !important; margin-right: -0.16em !important;
}

/* Los insets negativos del clip-path se recortan a 0 en algunos navegadores
   (Safari), así que la máscara cae justo sobre la caja del elemento y corta
   el voladizo de la itálica por la derecha. Un padding interior simétrico,
   anulado con margen negativo, da aire dentro de la caja sin mover la maqueta. */
.r .tv-h, .r.tv-h,
.r .intro-head h1, .r.intro-head h1,
.r .space-h, .r.space-h {
  padding-left: 0.2em; padding-right: 0.2em;
  margin-left: -0.2em; margin-right: -0.2em;
}


@media (prefers-reduced-motion: reduce) {
  .r .tv-h, .r.tv-h, .r .tv-h em, .r.tv-h em,
  .r .intro-head h1, .r.intro-head h1, .r .space-h, .r.space-h,
  .r .intro-head h1 em, .r.intro-head h1 em, .r .space-h em, .r.space-h em {
    clip-path: none !important; transform: none !important;
    filter: none !important; opacity: 1 !important; transition: none !important;
  }
}

/* ====================== Stills (cinematic gradient placeholders) ====================== */
.still { position: relative; overflow: hidden; background: var(--bg-sunk); }
.still.warm   { background: linear-gradient(125deg,#1a1006 0%,#3f240e 25%,#8a4b1a 55%,#d0832a 75%,#2a1f17 100%); }
.still.cool   { background: linear-gradient(125deg,#08121a 0%,#16323e 30%,#2a525c 60%,#b3a07a 90%); }
.still.dusk   { background: linear-gradient(125deg,#1a0a17 0%,#3a1a2b 25%,#6b3e3a 55%,#c08a3c 80%,#1e2a2c 100%); }
.still.green  { background: linear-gradient(125deg,#0a1408 0%,#1c2c1a 30%,#3e5232 55%,#7e8a5a 75%,#c2a464 100%); }
.still.noir   { background: linear-gradient(125deg,#050505 0%,#1c1c1b 35%,#3d3b36 65%,#8e8a82 100%); }
.still.dawn   { background: linear-gradient(135deg,#2a1814 0%,#6e3c28 35%,#d49853 65%,#efd9a8 95%); }
.still.sun    { background: linear-gradient(125deg,#2a1a0a 0%,#6e4218 25%,#c2871f 55%,#f4d57a 80%,#382818 100%); }
.still.teal   { background: linear-gradient(125deg,#04121a 0%,#0e2a3a 30%,#1f4e5e 55%,#86c0c4 80%,#1b1a14 100%); }
.still.amber  { background: linear-gradient(140deg,#100706 0%,#3a1a0a 28%,#a85f1c 56%,#f3c060 82%,#22150a 100%); }
.still.studio { background: radial-gradient(circle at 60% 40%, #2a2a2a 0%, #0e0e0e 70%); }
.still::after {
  content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,210,140,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(120,140,160,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(160,80,40,.5) 0 1px, transparent 2px);
  background-size: 14px 14px, 19px 19px, 9px 9px;
}


/* Looping cell media — fills the cell, poster sits on top until video plays */
.vid-media {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--bg-sunk);
}
/* The Vimeo loop iframe is a cross-origin frame, so the compositor draws it
   as its own quad and snaps that quad to whole device pixels. The cell's own
   paint (scrim, background) lands on fractional pixels instead — cells are
   16/9 of a fluid grid, so their edges are almost never on a whole pixel —
   and during smooth scroll the two drift apart by up to a pixel. That was the
   hairline of un-graded video showing under the bottom gradient.
   Fix: hold the frame 2px above the cell floor. The video can never reach the
   bottom edge, so no rounding step can expose it; what shows in those 2px is
   the cell's own near-black (--bg-sunk) under the darkest part of the scrim. */
.vid-frame {
  position: absolute; top: 0; left: 50%;
  width: 100%; height: calc(100% - 2px);
  transform: translateX(-50%);
  border: 0; pointer-events: none;
  opacity: 1;
}
.vid-poster,
.vid-media { background-color: var(--bg-sunk); }
/* El poster es la capa de PRECARGA y va encima del reproductor: se ve solo
   hasta que el vídeo entrega imagen real, y entonces se desvanece y se retira
   (visibility) para que nunca quede asomando detrás del visor. */
.vid-poster {
  position: absolute; inset: 0; z-index: 3;
  background-size: cover; background-position: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .55s ease;
}
.vid-media.is-playing .vid-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

/* ---- Project-page hero player (clean Vimeo default chrome) ---- */
.hero-video {
  position: absolute; inset: 0; overflow: hidden; background: #000;
}
.hero-poster {
  position: absolute; inset: 0; z-index: 2;
  background-size: cover; background-position: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s ease;
}
.hero-video.is-ready .hero-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.hero-frame {
  opacity: 1;
  /* Overscan by 1px on every edge so any hairline seam at the video's
     left/right columns is clipped by .hero-video's overflow:hidden. The
     resulting sub-pixel fit difference is absorbed as invisible black,
     never a light line. No transform here — that would break fullscreen. */
  position: absolute; top: -1px; left: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  border: 0;
  transition: opacity .6s ease;
}

/* Hero cycling backdrop — static, no ken-burns / crossfade */
.hero-bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 1;
  /* Shorthand al final: reproduce el reset de size/position que hacía el
     `background:var(--bg)` inline. */
  background: var(--bg);
}

/* ============ Hero — pinned plate; the page rises from behind the video ============
   The hero sticks to the viewport top while the rest of the landing slides up
   over it (z-index above), so the page reads as emerging from behind the frame.
   --hp (0→1) is written by lc-enhance.js on .hero-stage-inner (the layer that
   uses it) from a rAF-smoothed scroll read. */
.hero-stage {
  --hp: 0;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--bg);
}
.hero-stage .hero-stage-inner {
  position: absolute; inset: 0;
  transform: translate3d(0, calc(var(--hp) * -4vh), 0) scale(calc(1 + var(--hp) * 0.085));
  will-change: transform;
  backface-visibility: hidden;
}
/* Sólo el hero de portada: el plato de .cg-stage debe seguir SIN contexto de
   apilamiento propio para que su divisor y sus controles (z 3/4) pinten igual. */
.hero-stage:not(.cg-stage) .hero-stage-inner { z-index: 1; }
.hero-stage.is-past .hero-stage-inner { visibility: hidden; }

/* Capas del showreel dentro del hero de portada */
.hero-stage-media {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
}
/* Poster del showreel — primera imagen que se ve al entrar. Se mantiene
   encima del iframe hasta que el reproductor confirma reproducción real y
   entonces desaparece. Nunca se queda detrás del vídeo. */
.hero-stage-poster {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border: 0; pointer-events: none;
  opacity: 1;
  transition: opacity .9s ease;
}
.hero-stage-media.is-playing .hero-stage-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.hero-stage-frame {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  min-width: 177.78vh; min-height: 100vh;
  border: 0; pointer-events: none;
}

/* Everything after the hero travels as one plate in front of the video. */
.page-reveal {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage { position: relative; }
  .hero-stage .hero-stage-inner { transform: none; filter: none; }
}

/* Color Grading — the before/after viewer behaves as the hero plate:
   it pins to the viewport while the rest of the page slides up over it. */
.cg-stage { height: 100vh; min-height: 640px; overflow: hidden; background: var(--bg); }
.cg-stage .hero-stage-inner { position: absolute; inset: 0; }
@media (max-width: 960px) {

  /* Mobile: the viewer sits BELOW the header — the nav keeps a clean, empty band. */
  .cg-stage { position: relative; height: auto; min-height: 0; overflow: hidden; z-index: 0; isolation: isolate; padding-top: 90px; background: var(--bg); }
  .cg-stage .hero-stage-inner { position: relative; inset: auto; transform: none; will-change: auto; }
  .cg-stage.is-past .hero-stage-inner { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-stage { height: auto; min-height: 0; overflow: visible; }
  .cg-stage .hero-stage-inner { position: relative; inset: auto; }
}

/* Indicación de scroll del hero — doble chevron */
.hero-cue {
  position: absolute; left: 50%; bottom: clamp(24px, 3.4vw, 54px);
  transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: heroCueIn 900ms 1.42s cubic-bezier(.16, 1, .3, 1) both;
}
@media (max-width: 760px) { .hero-cue { bottom: 140px; } }
.hero-chevs {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hero-chevs svg { display: block; color: var(--bone); }
.hero-chevs svg:nth-child(1) { animation: heroChev 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.hero-chevs svg:nth-child(2) { animation: heroChev 2.4s cubic-bezier(.16,1,.3,1) .16s infinite; }
@keyframes heroChev {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(4px); }
}
@keyframes heroCueIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hairline that draws across the hero/next-section seam — disabled */
.hero-seam {
  display: none;
}

@keyframes riseUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop   { 0% { top: -100%; } 100% { top: 200%; } }
@keyframes blink  { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.15; } }
@keyframes breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes visitFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes visitRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ====================== About — "Sobre nosotros" ====================== */
.about-section {
  position: relative;
  }
/* ---- About v2 — intro head ---- */
@media (max-width: 1100px) {
}

/* ---- About v2 — disciplines contact-sheet (what we do) ---- */
@media (max-width: 900px) { }
@media (max-width: 520px) { }

/* ---- About v2 — plates variant (option L): 3×3 elevadas, hueco de 3px ---- */
@media (max-width: 900px) { }
@media (max-width: 520px) { }

/* ---- Opción L · placas elevadas — composición centrada (traída tal cual de opciones-color-edicion-3) ---- */
.ce-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-muted); text-decoration: none;
  padding: 15px 26px; border: 0.75px solid rgba(240,237,232,0.36);
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.ce-cta:hover { color: var(--fg); border-color: var(--bone); }
.ce-cta::after { content: "→"; font-size: 11px; }

.ceL { text-align: center; }
.ceL .pretag { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 26px; text-indent: 0.28em; font-size: 9.5px; }
.ceL .pretag::before { display: none; }
.ceL h2.tv-h { font-size: clamp(40px, 5.2vw, 78px); line-height: 0.9; }
.ceL-body {
  margin: clamp(28px, 3vw, 40px) auto clamp(48px, 5.5vw, 72px); max-width: 520px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; line-height: 1.95; color: var(--fg-muted);
}
.ceL-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px; max-width: 1020px; margin: 0 auto;
}
.ceL-cell {
  position: relative; overflow: hidden;
  background: var(--bg-raised);
  padding: clamp(30px, 3.2vw, 44px) clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: background .4s var(--ease-out);
}
.ceL-cell:hover { background: var(--bg-sunk); }
.ceL-cell .sic-box {
  width: 46px; height: 46px;
  color: var(--fg); margin-bottom: clamp(24px, 2.8vw, 34px);
}
.ceL-cell h3 {
  position: relative; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(12px, 0.9vw, 13.5px); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg); line-height: 1.2;
}
.ceL-cell p {
  position: relative; margin: 0; max-width: 250px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 11.5px; line-height: 1.75; color: var(--fg-muted); text-wrap: pretty;
}
.ceL-foot { margin-top: clamp(44px, 5vw, 66px); }
@media (max-width: 900px) { .ceL-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tablet: the odd last tile spans the full row so it stays centered */
@media (max-width: 900px) and (min-width: 621px) {
  .ceL-cell:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .ceL-grid { grid-template-columns: minmax(0, 1fr); } }
/* El bloque de intro se centra ópticamente en su franja negra (todas las resoluciones) */
.about-section.about2 {
  padding: clamp(96px, 11vw, 150px) var(--page-gutter) clamp(88px, 9vw, 120px);
  padding-top: clamp(30px, 4.4vw, 62px) !important;
  background: var(--bg);
}
.ceL-body { margin-bottom: clamp(108px, 12vw, 158px); }

/* ---- About v2 — facts strip (privileged location + studio facts) ---- */
@media (max-width: 820px) {
}
@media (max-width: 480px) {
}

/* ---- Contact layout — collapse on small screens so the 460px column never overflows ---- */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
}


/* Franja "Trabajos recientes" de la portada */
#trabajos { padding: 40px 0 0; }
.work-grid-wrap { padding: 0px 0px 74px; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
.work-cell {
  position: relative; overflow: hidden;
  background: var(--bg-sunk);
  display: block; text-align: left; padding: 0;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
/* Las celdas de la portada mantenían el puntero del sistema junto al cursor
   propio: el `cursor` inline ganaba a `body.has-cursor a { cursor: none }`. */
body.has-cursor .work-grid .work-cell { cursor: pointer; }
.work-cell .still {
  position: absolute; inset: 0;
  transform: scale(1);
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s;
}
.work-cell:hover .still {
  filter: brightness(1.04) contrast(1.02);
}
.work-cell .vid-media {
  transform: scale(1);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

/* Overhangs the cell (the parent clips it) and holds the base of the gradient
   at full strength across the last 6px instead of reaching it only at exactly
   0%, so the bottom edge is never the one pixel where the gradient has not
   arrived yet. Pairs with the frame inset above. */
.work-cell .scrim {
  position: absolute; top: 0; left: -1px; right: -1px; bottom: -2px; z-index: 2;
  background: linear-gradient(to top,
    rgba(7,7,7,0.92) 0, rgba(7,7,7,0.92) 6px,
    rgba(7,7,7,0.35) 30%, rgba(7,7,7,0.05) 60%, transparent 100%);
  opacity: 0.55; transition: opacity .55s;
}
.work-cell:hover .scrim { opacity: 1; }
.work-cell .meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 22px 26px 24px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.work-cell .title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(12px, 1vw, 15px);
  text-transform: uppercase; letter-spacing: 0;
  color: var(--fg); line-height: 1.05;
}
.work-cell .role {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); margin-top: 8px;
  transform: translateY(0); opacity: 1;
  transition: transform .55s var(--ease-out), opacity .55s;
}
.work-cell .cat {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted); flex-shrink: 0; padding-bottom: 2px;
}

/* Cursor propio: solo en escritorio con puntero fino. Móvil y tablet (o
   cualquier dispositivo táctil) recuperan el puntero del sistema y no pintan
   el punto ni el aro. */
#__cur_dot, #__cur_ring { display: none; }
body.has-cursor #__cur_dot, body.has-cursor #__cur_ring { display: block; }

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  body.has-cursor .work-grid .work-cell { cursor: pointer; }
  #__cur_dot, #__cur_ring,
  body.has-cursor #__cur_dot, body.has-cursor #__cur_ring { display: none; }
  .serv-reel-nav { cursor: pointer; }
  .qo-tile { cursor: pointer; }
}
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr !important; gap: 2px; }
}

/* ====================== Trabajos filter ====================== */
.trab-filter {
  padding: 0 var(--page-gutter) clamp(30px, 3.4vw, 46px);
}
.trab-filter-inner {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 34px 64px;
}
.trab-ftoggle { display: none; }
.trab-fgroup { display: flex; flex-direction: column; gap: 16px; }
.trab-fgroup-label {
  font-family: var(--font-body); font-weight: 300;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.trab-fgroup-label::before { content: none; }
.trab-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.trab-chip {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 1px solid var(--rule);
  color: var(--fg-muted);
  font-family: var(--font-body); font-weight: 300;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 11px 18px; cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.trab-chip:hover { border-color: var(--rule-strong); color: var(--fg); }
.trab-chip[aria-pressed="true"] {
  background: var(--bone); border-color: var(--bone); color: var(--bg);
}
.trab-reset {
  align-self: flex-end; margin-bottom: 1px;
  appearance: none; -webkit-appearance: none; background: transparent; border: none;
  color: var(--fg-subtle); cursor: pointer;
  font-family: var(--font-body); font-weight: 300;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 2px;
  transition: color .3s;
}
.trab-reset:hover { color: var(--fg); }
.trab-empty {
  padding: clamp(40px, 6vw, 80px) 0;
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; letter-spacing: 0.02em; color: var(--fg-muted);
}
@media (max-width: 640px) {
  .trabajos-grid-section { padding-top: 104px !important; }
  .trab-filter-inner { gap: 28px 40px; min-height: 0; padding-top: 26px; }
  .trab-reset { align-self: flex-start; }
  .trab-ftoggle {
    appearance: none; -webkit-appearance: none; background: transparent;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; cursor: pointer;
    border: 1px solid var(--rule-strong); color: var(--fg);
    font-family: var(--font-body); font-weight: 400;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 15px 17px;
    transition: border-color .3s, color .3s;
  }
  .trab-ftoggle-l { display: inline-flex; align-items: center; gap: 10px; }
  .trab-fbadge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px;
    background: var(--bone); color: var(--bg);
    font-size: 9px; letter-spacing: 0.04em; font-weight: 400;
  }
  .trab-fchev { flex: none; transition: transform .38s cubic-bezier(.22,.61,.36,1); }
  .trab-filter[data-open="1"] .trab-ftoggle { border-color: var(--bone); }
  .trab-filter[data-open="1"] .trab-fchev { transform: rotate(180deg); }
  .trab-fpanel {
    display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
    transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1), opacity .28s;
  }
  .trab-filter[data-open="1"] .trab-fpanel { grid-template-rows: 1fr; opacity: 1; }
}

/* ====================== Footer ======================
   Transcripción 1:1 de los estilos que el footer de la portada llevaba inline.
   Las únicas líneas divisorias del sitio viven aquí (borde superior del footer
   y separador de la barra inferior). */
.site-footer {
  position: relative; z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.footer-grid {
  padding: clamp(56px, 7vw, 92px) var(--page-gutter) 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) 1fr 1.15fr 0.7fr;
  gap: clamp(28px, 5vw, 96px);
  align-items: flex-start;
}
.footer-brand, .footer-lang { margin: 0px; }
.footer-logo { display: inline-block; color: var(--fg); }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-blurb {
  margin-top: 22px; max-width: 360px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 12px; line-height: 1.95; color: var(--fg-muted);
}
.footer-social { margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap; }
.footer-social-link {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted);
}
.footer-col-h {
  font-family: var(--font-body); font-weight: 300;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-muted); line-height: var(--lh-tight);
  margin-bottom: 22px;
}
.footer-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-list-item {
  font-family: var(--font-display); font-weight: 500;
  font-size: 13px; color: var(--fg-muted); letter-spacing: 0.01em;
}
.footer-lang-list { display: flex; flex-direction: column; gap: 14px; }
.footer-lang-link {
  text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--fg-muted);
}
.footer-lang-link.active { color: var(--fg); }
.footer-bottom { border-top: 1px solid var(--rule); }
.footer-bottom-inner {
  padding: 20px var(--page-gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.footer-copy {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-muted);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal-link {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-faint);
}
/* En escritorio el encabezado "Idioma" va un punto por encima del resto
   (antes era un style inline en index.html; movido aquí para que las reglas
   responsive puedan reescalarlo). */
@media (min-width: 1025px) {
  .footer-lang .footer-col-h { font-size: 10.4px; }
}
/* ---------------------------------------------------------------
   Footer responsive — Navegar · Contacto · Idioma
   En todas las resoluciones por debajo de escritorio las tres columnas
   tienen EXACTAMENTE el mismo ancho y el mismo aire entre ellas, así que
   quedan siempre paralelas y equidistantes. En tablet ocupan el hueco
   negro a la derecha del bloque de marca; en móvil bajan debajo de él.
   Las reglas llevan doble selector (clase + posición) porque el footer
   existe en dos versiones: HTML estático (.footer-brand / .footer-lang)
   y React (Sections.jsx, con estilos inline y clases .d1 / .d2 / .d3).
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid > * { min-width: 0; }
  /* la marca no conserva el tamaño fijo del layout de escritorio */
  .footer-grid > .footer-brand,
  .footer-grid > :first-child {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    padding-right: 0;
  }
  .footer-blurb,
  .footer-grid > :first-child p { max-width: 42ch !important; }

  /* la fila de redes no se parte en dos líneas al estrecharse la marca */
  .footer-social,
  .footer-grid > :first-child > div:last-child {
    flex-wrap: nowrap !important;
    gap: clamp(14px, 2vw, 22px) !important;
  }
  .footer-social-link { white-space: nowrap; }

  .footer-col-h,
  .footer-grid h2 {
    font-size: 8.5px !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 16px !important;
  }
  .footer-list,
  .footer-lang-list,
  .footer-grid ul,
  .footer-grid > :last-child > div { gap: 11px !important; }

  /* Ítems de lista: nunca desbordan su columna ni se solapan con la vecina */
  .footer-list-item,
  .footer-grid li > a,
  .footer-grid li > span {
    display: block;
    letter-spacing: 0 !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
}

/* Tablet — marca a la izquierda; Navegar · Contacto · Idioma a su derecha,
   tres columnas de igual ancho y misma separación. */
@media (min-width: 601px) and (max-width: 1024px) {
  .footer-grid {
    /* la marca toma solo el ancho que necesita y las tres columnas reparten
       TODO el espacio restante a partes iguales: no queda hueco negro muerto
       entre el bloque de marca y "Navegar". */
    grid-template-columns:
      minmax(230px, 1.5fr) repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: start !important;
    column-gap: clamp(16px, 2.4vw, 32px) !important;
    row-gap: 52px !important;
  }
  .footer-grid > .footer-brand,
  .footer-grid > :first-child { grid-column: 1 !important; grid-row: 1 !important; }
  .footer-grid > .d1 { grid-column: 2 !important; grid-row: 1 !important; }
  .footer-grid > .d2 { grid-column: 3 !important; grid-row: 1 !important; }
  .footer-grid > .footer-lang,
  .footer-grid > :last-child { grid-column: 4 !important; grid-row: 1 !important; }

  .footer-list-item,
  .footer-grid li > a,
  .footer-grid li > span { font-size: clamp(9.5px, 1.35vw, 12px) !important; }

  .footer-lang-link,
  .footer-grid > :last-child button,
  .footer-grid > :last-child > div a {
    white-space: nowrap;
    font-size: clamp(9px, 1.15vw, 10.5px) !important;
    letter-spacing: 0.13em !important;
  }
}

/* Móvil — la marca ocupa el ancho completo y las tres columnas quedan
   debajo, iguales y equidistantes. */
@media (max-width: 600px) {
  .footer-grid {
    /* tres columnas al contenido, repartidas con el mismo aire: la primera
       arranca en el margen izquierdo y la tercera cierra en el derecho. */
    grid-template-columns: auto auto auto !important;
    justify-content: space-between !important;
    column-gap: clamp(12px, 3vw, 22px) !important;
    row-gap: 40px !important;
  }
  .footer-grid > .footer-brand,
  .footer-grid > :first-child { grid-column: 1 / -1 !important; }
  .footer-grid > .d1 { grid-column: 1 !important; }
  .footer-grid > .d2 { grid-column: 2 !important; }
  .footer-grid > .footer-lang,
  .footer-grid > :last-child { grid-column: 3 !important; }

  .footer-col-h,
  .footer-grid h2 { font-size: 8px !important; letter-spacing: 0.16em !important; }

  .footer-list-item,
  .footer-grid li > a,
  .footer-grid li > span { font-size: clamp(8.2px, 2.45vw, 10.5px) !important; }

  .footer-lang-link,
  .footer-grid > :last-child button,
  .footer-grid > :last-child > div a {
    white-space: nowrap;
    font-size: clamp(8px, 2.3vw, 9.5px) !important;
    letter-spacing: 0.1em !important;
  }
}
@media (max-width: 360px) {
  .footer-lang-link,
  .footer-grid > :last-child button,
  .footer-grid > :last-child > div a { letter-spacing: 0.06em !important; }
}


/* 2 · Small project loop videos run gutter-to-gutter, edge of screen */
@media (max-width: 1024px) {
  .work-grid-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}

/* 3 · Contact section — centered, balanced composition on TABLET only.
       Mobile (<=640) and desktop (>1024) keep their existing layout. */
@media (min-width: 641px) and (max-width: 1024px) {
  #contacto > div:not([role="dialog"]) {
    max-width: 680px !important;
  }
  #contacto .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
    justify-items: center;
    align-items: center !important;
    text-align: center;
  }
  #contacto .contact-grid > .r { padding-bottom: 0 !important; }
  #contacto .contact-grid .tv-h { text-align: center; }
  #contacto .contact-grid > .r.d1 { align-items: center; }
  #contacto .contact-grid > .r.d1 > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #contacto .contact-grid > .r.d1 > div:first-of-type { justify-content: center; }
  #contacto .contact-grid > .r.d1 > div:last-of-type {
    grid-template-columns: auto auto !important;
    justify-content: center;
    text-align: left;
  }
}


/* Inner plate — travels/darkens on scroll while the page rises over it. */
.estudio-reel.is-past .reel-inner { visibility: hidden; }
@media (max-width: 760px) {
}
@media (prefers-reduced-motion: reduce) {
}


/* Same register as the landing phrase under the hero (.interlude-line):
   display face at weight 500, -0.02em, sentence case, 1.02 line-height. */
.estudio-intro .intro-head h1 {
  font-family: var(--font-display); font-weight: 500;
  text-transform: none; letter-spacing: -0.02em;
  line-height: 1.02; color: var(--fg);
  font-size: clamp(34px, 5.4vw, 82px);
}
@media (min-width: 700px) and (max-width: 1100px) {
  .estudio-intro .intro-head h1 { font-size: clamp(48px, 7vw, 72px); }
}
@media (max-width: 699px) {
  .estudio-intro .intro-head h1 { font-size: min(8.2vw, 46px); }
  /* Lede en 4 líneas */
  .estudio-intro .intro-head p { max-width: 42ch !important; margin-left: auto !important; margin-right: auto !important; text-wrap: pretty; }
  /* Menos aire negro entre el lede y el bloque siguiente en móvil */
  .estudio-intro .intro-head p { padding-bottom: 0 !important; padding-top: 18px !important; }
}
.estudio-intro .intro-head h1 em {
  font-style: italic; font-weight: 300; color: var(--fg-muted);
}
.estudio-intro .intro-lede {
  justify-self: end;
  max-width: 384px;
  padding-top: clamp(8px, 1.4vw, 22px);
}
.estudio-intro .intro-lede p {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.95; color: var(--fg-muted);
}

/* ---- Team: section header + large full-column portraits ------------- */
.team-section { background: var(--bg); }
.team-grid {
  max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 52px);
  padding: clamp(72px, 9vw, 132px) var(--page-gutter) clamp(96px, 12vw, 152px);
}
.team-card { position: relative; display: block; text-align: center; }
.team-photo-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  width: 88%; margin-left: auto; margin-right: auto;
  background: var(--bg-sunk);
  margin-bottom: clamp(30px, 3vw, 46px);
}
.team-photo-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
  transition: transform .9s var(--ease-out);
}
.team-card:hover .team-photo-wrap img {
  transform: scale(1.03);
}
.team-photo-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,7,0.5) 0%, rgba(7,7,7,0) 34%);
  pointer-events: none;
}
.team-photo-wrap .idx {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: var(--font-body); font-weight: 300;
  font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(240,237,232,0.72);
}
.team-card .name {
  width: 88%; margin-left: auto; margin-right: auto;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1.4vw, 22px);
  text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 1.02; color: var(--fg);
}
.team-card .name em {
  font-style: italic; font-weight: 300; color: var(--fg-muted);
  margin-left: 0.34em;
}
.team-card .role {
  display: block; margin-top: 10px;
  font-family: var(--font-body); font-weight: 300; font-size: 8.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-subtle);
}
.team-social {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 20px;
}
.team-social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); opacity: .62; transition: opacity .3s var(--ease-out);
}
.team-social a:hover { opacity: 1; }
.team-social img { display: block; width: 24px; height: 24px; object-fit: contain; }
.team-card .bio {
  margin: 14px auto 0; width: 88%; max-width: none;
  font-family: var(--font-body); font-weight: 300;
  font-size: 11.5px; line-height: 1.9; color: var(--fg-muted);
  text-align: justify; text-align-last: center; hyphens: manual;
}

/* ---- The space: three alternating blocks. Each block is exactly half
       image (flush to the screen edge) and half type. The side swaps
       row to row; the middle block's copy is right-aligned. -- */
.space-section {
  position: relative;
  background: var(--bg);
}
/* When the space section opens the page it clears the pinned nav. */
.space-section.is-first { padding-top: 96px; }
@media (max-width: 760px) {
  /* Nav móvil: 26px + burger 40px + 26px + 1px de borde = 93px */
  .space-section.is-first { padding-top: 93px; }
}
.space-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.space-media {
  grid-column: 1; grid-row: 1;
  margin: 0; position: relative;
  overflow: hidden;
  background: var(--bg-sunk);
  aspect-ratio: 4 / 3;
}
.space-row.flip .space-media { grid-column: 2; }
.space-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.06);
  transition: transform 1.6s var(--ease-out);
}
.space-row:hover .space-media img { transform: scale(1.04); }


/* Reserved wells for the two stills the studio will drop in later */
.space-slot {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.space-slot-mark {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: 0.08em; line-height: 1;
  color: var(--fg-ghost);
}
.space-slot-label {
  font-family: var(--font-body); font-weight: 300;
  font-size: 9px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--fg-faint);
}

/* Type half */
.space-text {
  grid-column: 2; grid-row: 1;
  padding: clamp(48px, 6vw, 88px) var(--page-gutter);
  max-width: 620px;
  justify-self: center;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
}
.space-row.flip .space-text {
  grid-column: 1;
  justify-self: center; text-align: center;
}
.space-h {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.1vw, 50px);
  line-height: 0.94; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--fg);
}
.space-h em {
  font-style: italic; font-weight: 300; color: var(--fg-muted);
}
/* La máscara del reveal cae sobre la caja del elemento en los navegadores que
   recortan a 0 los insets negativos del clip-path (Safari), y corta el voladizo
   de la itálica por la derecha. Holgura interior simétrica, anulada con margen
   negativo: la línea no se mueve ni cambia de corte. */
.space-text .space-h {
  padding-left: 0.5em; padding-right: 0.5em;
  margin-left: -0.5em; margin-right: -0.5em;
}
.space-text p {
  margin: clamp(24px, 2.2vw, 36px) auto 0;
  max-width: 440px;
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(12.5px, 0.9vw, 13.5px); line-height: 1.95;
  color: var(--fg-muted);
}

/* -- Lead block ("un espacio para trabajar juntos"): on desktop the still
      runs the full width of the screen and the type sits over it, keeping
      its right-hand position. -- */
@media (min-width: 1101px) {
  .space-section.is-first .space-row {
    position: relative;
    align-items: center;
  }
  .space-section.is-first .space-media {
    grid-column: 1 / -1; grid-row: 1;
    aspect-ratio: auto;
    width: 100%;
    /* Nunca más alto que la ventana: el plato se fija arriba y el equipo
       sube por delante, así que el bloque debe caber entero. */
    height: min(clamp(520px, 44vw, 820px), calc(100vh - 96px));
  }
  .space-section.is-first .space-media::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 24%,
      rgba(0, 0, 0, 0.38) 44%,
      rgba(0, 0, 0, 0.64) 60%,
      rgba(0, 0, 0, 0.72) 100%);
    pointer-events: none;
  }
  .space-section.is-first .space-text {
    grid-column: 2; grid-row: 1;
    position: relative; z-index: 2;
    padding-top: clamp(40px, 4vw, 64px);
    padding-bottom: clamp(40px, 4vw, 64px);
  }
  .space-section.is-first .space-h { color: var(--bone); }
  .space-section.is-first .space-h em { color: rgba(var(--bone-rgb), 0.78); }
  .space-section.is-first .space-text p { color: rgba(var(--bone-rgb), 0.86); }

  /* -- Plato fijo: el bloque se ancla arriba y la sección de equipo se
        solapa por encima, igual que el hero de portada y el de color grading.
        --hp (0→1) lo escribe lc-pages.js sobre .space-row desde un scroll
        suavizado con rAF. -- */
  .space-section.is-first {
    --hp: 0;
    position: sticky;
    top: 0;
    z-index: 0;
    overflow: hidden;
  }
  .space-section.is-first .space-row {
    transform: translate3d(0, calc(var(--hp) * -4vh), 0) scale(calc(1 + var(--hp) * 0.085));
    will-change: transform;
    backface-visibility: hidden;
  }
  .space-section.is-first.is-past .space-row { visibility: hidden; }

  /* -- Remate superior del plato. El velo se ancla al borde de recorte de la
        sección fija (no a la figura), así que el canto superior de la foto
        queda velado en TODO el recorrido: al subir y escalar, la imagen se
        mete debajo de un negro pleno que se funde con el fondo y la nav.
        Nunca aparece una franja de foto sin degradado. -- */
  .space-section.is-first::before {
    display: none;
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 300px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(7, 7, 7, 1) 0px,
      rgba(7, 7, 7, 1) 88px,
      rgba(7, 7, 7, 0.9) 128px,
      rgba(7, 7, 7, 0.55) 188px,
      rgba(7, 7, 7, 0.22) 244px,
      rgba(7, 7, 7, 0) 300px);
  }
  .space-section.is-first.is-past::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .space-section.is-first { position: relative; }
  .space-section.is-first .space-row { transform: none; }
  .space-section.is-first.is-past .space-row { visibility: visible; }
}


/* ============== Rooms infographic ============== */
.rooms-section {
  position: relative;
  padding: clamp(96px, 11vw, 152px) var(--page-gutter) clamp(80px, 9vw, 120px);
  background: var(--bg-raised);
}
.rooms-header {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: flex-start;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.rooms-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 36px);
}
.room {
  position: relative;
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  padding: 28px 26px 30px;
  transition: border-color .45s var(--ease-out), background .45s var(--ease-out), transform .6s var(--ease-out);
  display: flex; flex-direction: column; gap: 22px;
  min-height: 540px;
}
.room:hover {
  border-color: var(--rule-strong);
  background: rgba(15,15,15,0.92);
}
.room-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.room-hd .num {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-muted);
}
.room-hd .role {
  font-family: var(--font-body); font-weight: 300;
  font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-muted);
  text-align: right;
}
.room-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(15px, 1.3vw, 19px);
  text-transform: uppercase; letter-spacing: -0.008em;
  line-height: 1.05; color: var(--fg);
}
.room-title em {
  font-style: italic; font-weight: 300; color: var(--fg-muted);
  display: block;
}
.room-desc {
  font-family: var(--font-body); font-weight: 300;
  font-size: 11.5px; line-height: 1.85; color: var(--fg-muted);
  max-width: 320px;
}

/* Floor-plan SVG block */
.room-plan {
  position: relative;
  width: 100%; aspect-ratio: 14 / 9;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(0deg, rgba(240,237,232,0.018) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(240,237,232,0.018) 0 1px, transparent 1px 24px),
    var(--bg);
  overflow: hidden;
}
.room-plan svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--fg);
}
.room-plan .pin {
  position: absolute;
  font-family: var(--font-body); font-weight: 300;
  font-size: 7px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg-faint);
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.room-plan .pin::before {
  content: ""; width: 4px; height: 4px;
  background: var(--fg); opacity: 0.55;
  border-radius: 50%;
}
.room-plan .pin.live::before {
  animation: blink 2.2s ease infinite;
}

/* Equipment items inside room */
.room-items {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.room-item {
  display: grid; grid-template-columns: 1fr;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  gap: 4px;
}
.room-item .it-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg);
}
.room-item .it-detail {
  font-family: var(--font-body); font-weight: 300;
  font-size: 10.5px; line-height: 1.55; color: var(--fg-muted);
}
.room-item.feature {
  background: linear-gradient(180deg, rgba(240,237,232,0.04) 0%, rgba(240,237,232,0) 100%);
  padding: 16px 14px 18px;
  margin: -1px -14px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.room-item.feature .it-name {
  font-size: 11.5px;
}
.room-item.feature .it-detail { color: var(--fg); }
.room-item.feature::before {
  content: "Hero";
  display: none;
}

/* Connectors between rooms */
.rooms-connector {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(18px, 2.2vw, 36px);
  pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 156px;
}
.rooms-connector svg { width: 100%; height: auto; overflow: visible; }
.rooms-connector svg .line {
  stroke: var(--fg);
  stroke-opacity: 0.22;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.rooms-flow.on .rooms-connector svg .line {
  stroke-dashoffset: 0;
}
.rooms-connector svg .tip {
  fill: var(--fg);
  fill-opacity: 0.45;
  opacity: 0;
  transition: opacity .6s var(--ease-out) 1s;
}
.rooms-flow.on .rooms-connector svg .tip { opacity: 1; }

/* Stagger room reveals using existing .r */
.room .r-cell {
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
.room.on .r-cell { opacity: 1; transform: translateY(0); }

/* The HX310 hero card on top of color room */
.hx310-hero {
  position: relative;
  border: 1px solid var(--rule-strong);
  padding: 14px 16px 16px;
  background:
    radial-gradient(120% 200% at 50% 0%, rgba(240,237,232,0.05) 0%, transparent 60%),
    var(--bg);
  margin-bottom: 4px;
}
.hx310-hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.hx310-hero .badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--fg); opacity: 0.7;
  animation: blink 2.4s ease infinite;
}
.hx310-hero .nm {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--fg); line-height: 1.1;
}
.hx310-hero .sub {
  margin-top: 6px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 10.5px; line-height: 1.6; color: var(--fg-muted);
}


/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .estudio-intro .intro-lede,
  .team-head .team-sub { justify-self: start; max-width: 560px; }
  .rooms-header { grid-template-columns: 1fr; gap: 36px; }

  /* The space — from tablet down each block stacks: full-bleed image,
     then its copy underneath, always left-aligned. */
  .space-row, .space-row.flip {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .space-media, .space-row.flip .space-media {
    grid-column: 1; grid-row: 1;
    aspect-ratio: 16 / 11;
  }
  .space-text, .space-row.flip .space-text {
    grid-column: 1; grid-row: 2;
    align-items: center;
    justify-self: center; text-align: center;
    justify-content: center;
    max-width: 620px;
    padding: clamp(44px, 9vw, 72px) var(--page-gutter);
  }
  .space-text p, .space-row.flip .space-text p { margin-left: auto; margin-right: auto; }
  .space-h, .space-row.flip .space-h { text-align: center; }
}
@media (max-width: 860px) {
  .team-grid { grid-template-columns: 1fr; gap: 52px; }
  /* Mobile stack order: JR · Jorge · Salwa (desktop DOM is Salwa · JR · Jorge) */
  .team-card:nth-child(1) { order: 3; }
  .team-card:nth-child(2) { order: 1; }
  .team-card:nth-child(3) { order: 2; }
  .team-social {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 20px;
}
.team-social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); opacity: .62; transition: opacity .3s var(--ease-out);
}
.team-social a:hover { opacity: 1; }
.team-social img { display: block; width: 24px; height: 24px; object-fit: contain; }
.team-card .bio { max-width: 405px; }
  .team-card .name { max-width: 405px; }
  .team-photo-wrap { max-width: 460px; }

  /* The space — on mobile keep the stacked layout (defined at <=1100px) */
  .space-h { font-size: clamp(28px, 7.5vw, 40px); }
  .space-media, .space-row.flip .space-media { aspect-ratio: 4 / 3; }
  .rooms-flow { grid-template-columns: 1fr; gap: 28px; }
  .room { min-height: auto; }
  .rooms-connector { display: none; }
}


/* ---- Page intro --------------------------------------------------- */
.serv-intro {
  padding: clamp(140px, 16vh, 200px) var(--page-gutter) clamp(36px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: clamp(28px, 4vw, 56px);
  align-items: flex-start;
  position: relative;
}
.serv-intro-h {
  font-size: clamp(32px, 4.6vw, 76px);
  line-height: 0.95;
}
.serv-intro-text {
  display: flex; flex-direction: column;
  gap: 22px;
  padding-top: clamp(8px, 1.4vw, 22px);
}
.serv-intro-lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(12.5px, 0.95vw, 14.5px);
  line-height: 1.95;
  color: var(--fg);
  max-width: 520px;
}
.serv-intro-lede--muted { color: var(--fg-muted); }

/* ---- Start-of-page alignment matched to the Noticias intro ---------
   Title indented 36px past the gutter (left); lede text hugging the
   right with its edge 56px past the gutter — identical to .news-intro. */
.serv-intro > .r:first-child { margin-left: 36px; }
.serv-intro .serv-intro-text {
  align-items: flex-end;
  text-align: right;
  padding-right: 56px;
}
.estudio-intro .intro-head { margin-left: 36px; }
.estudio-intro .intro-lede { text-align: right; padding-right: 56px; }
.serv-meta .lbl {
  display: block;
  font-family: var(--font-body); font-weight: 300; font-size: 7.5px;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 8px;
}
.serv-meta .val {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg);
}


/* ---- List of complementary services ------------------------------- */
.serv-list-section {
  padding: clamp(20px, 3vh, 40px) var(--page-gutter) clamp(96px, 11vw, 152px);
  background: var(--bg);
}
.serv-rows {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.serv-row {
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.serv-row-link {
  display: grid;
  grid-template-columns: 60px 1.2fr 2fr 32px;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(24px, 3vw, 36px) 0;
  color: var(--fg-muted);
  position: relative;
  transition: color .35s var(--ease-out);
}
.serv-row-link::before {
  content: "";
  position: absolute;
  left: calc(var(--page-gutter) * -1);
  right: calc(var(--page-gutter) * -1);
  top: 0; bottom: 0;
  background: rgba(240, 237, 232, 0);
  transition: background .35s var(--ease-out);
  z-index: -1;
}
.serv-row-link:hover { color: var(--fg); }
.serv-row-link:hover::before { background: rgba(240, 237, 232, 0.045); }
.serv-row-num {
  font-family: var(--font-body); font-weight: 300;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg-muted);
}
.serv-row-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: -0.008em; text-transform: uppercase;
  color: var(--fg);
}
.serv-row-desc {
  font-family: var(--font-body); font-weight: 300;
  font-size: 12.5px; line-height: 1.85;
  color: var(--fg-muted);
  max-width: 540px;
  justify-self: end;
}
.serv-row-arrow {
  justify-self: end;
  color: var(--fg-muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), color .35s var(--ease-out);
}
.serv-row-link:hover .serv-row-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--fg);
}

/* ---- Tabla tecnica (4 standards blocks) --------------------------- */
.serv-tabla-section {
  padding: clamp(96px, 11vw, 152px) var(--page-gutter);
  background: var(--bg);
}
.serv-tabla-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.serv-tabla-grid:not(.flujo-grid) {
  gap: 0;
  background: transparent;
  border: 0;
}
.cg-tabla-section { padding-top: clamp(12px, 2.5vw, 48px); }
.cg-tabla-section .serv-tabla-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.cg-tabla-section .serv-tabla-cell { align-items: center; text-align: center; }
.cg-tabla-section .serv-tabla-glyph { justify-content: center; }
.cg-tabla-section .serv-tabla-title { text-align: center; }
.cg-tabla-section .serv-tabla-body { text-align: justify; text-align-last: center; text-wrap: pretty; hyphens: auto; }
@media (max-width: 720px) { .cg-tabla-section .serv-tabla-body { text-align: center; text-align-last: center; hyphens: manual; } }
.cg-tabla-section .serv-tabla-tags { align-items: center; text-align: center; }
.serv-tabla-cell {
  position: relative;
  background: var(--bg);
  padding: clamp(32px, 3.6vw, 52px) clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column;
  transition: background .4s var(--ease-out);
}
.serv-tabla-cell:hover { background: var(--bg-sunk); }
.serv-tabla-glyph {
  height: clamp(56px, 6vw, 80px);
  display: flex; align-items: center;
  color: var(--fg);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.serv-tabla-glyph svg { color: var(--fg); }
.serv-tabla-aces .serv-tabla-glyph svg { height: clamp(46px, 5vw, 60px); width: auto; }
.serv-tabla-title {
  font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight);
  font-size: clamp(13px, 1vw, 14.5px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.serv-tabla-body {
  font-family: var(--font-body); font-weight: 300;
  font-size: 12px; line-height: 1.95;
  color: var(--fg-muted);
  margin-bottom: 0;
}
.serv-tabla-tags {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--rule);
}
.serv-tabla-tags li {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted);
}
.serv-tabla-tags .dot {
  width: 4px; height: 4px;
  background: var(--fg-faint);
  flex-shrink: 0;
}
.serv-tabla-corner {
  position: absolute;
  right: clamp(20px, 2.4vw, 28px);
  bottom: clamp(14px, 1.8vw, 22px);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--fg-ghost);
  user-select: none; pointer-events: none;
}

/* ---- Tabla de flujo (8 pasos, sin iconos ni numeración) ---------- */
.flujo-head .serv-tabla-title { margin-bottom: 0; }


/* Masthead — standalone Magazine page (no site nav) */
.news-mast {
  padding: clamp(28px, 4vw, 44px) var(--page-gutter) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.news-mast a { color: var(--fg); }
.news-mast-back {
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  background: var(--bone); color: var(--bg);
  padding: 13px 20px;
  transition: background .3s var(--ease-out);
  display: inline-flex; align-items: center; gap: 12px;
}
.news-mast a.news-mast-back { color: var(--bg); }
.news-mast-back:hover { background: #fff; }
.news-mast-right {
  display: inline-flex; align-items: center; gap: clamp(16px, 2.4vw, 26px);
}
.news-mast-lang {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 300; font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.news-mast-lang button, .news-mast-lang a {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--fg-muted); transition: color .3s var(--ease-out);
}
.news-mast-lang button:hover, .news-mast-lang button.active,
.news-mast-lang a:hover, .news-mast-lang a.active { color: var(--fg); }
.news-mast-langsep { color: var(--fg-faint); }

.news-intro {
  padding: clamp(56px, 8vh, 104px) var(--page-gutter) clamp(12px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: clamp(22px, 2.6vw, 34px);
  position: relative;
}
.news-intro-head { display: flex; flex-direction: column; align-items: center; width: 100%; }
.news-intro-h {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  /* the trailing -0.025em tracking makes a centered line sit slightly right;
     this padding pushes the optical centre back onto the page axis */
  padding-right: 0.0335em;
  /* JS fit-to-width overrides this inline; these are the pre-paint fallbacks */
  font-size: min(18.1vw, calc((100vw - 2 * var(--page-gutter) - 20px) / 5.45));
  text-align: center;
  max-width: 100%;
  line-height: 0.84;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}
.news-intro-text {
  display: flex; flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: right;
  width: 100%;
  /* offsets the heading's trailing -0.025em tracking so the copy's right
     edge lands on the "E" of MAGAZINE */
  padding-right: 0.4525vw;
  gap: 20px;
}
.news-intro-lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(12.5px, 0.95vw, 14.5px);
  line-height: 1.95;
  color: var(--fg);
  max-width: 560px;
  margin: 0;
  padding-right: 31px;
}
.news-meta .lbl {
  display: block;
  font-family: var(--font-body); font-weight: 300; font-size: 7.5px;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 8px;
}
.news-meta .val {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg);
}

/* News grid section ------------------------------------------------- */
.news-grid-section {
  padding: clamp(40px, 5vw, 72px) var(--page-gutter) clamp(96px, 11vw, 160px);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6.5vw, 96px);
}

/* News card --------------------------------------------------------- */
.news-card {
  position: relative;
  border-top: 1px solid var(--rule);
}
.news-card-link {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  padding: clamp(28px, 3.4vw, 48px) 0 0;
  position: relative;
  color: var(--fg);
}
.news-card-link::before {
  content: ""; position: absolute;
  top: 0; left: calc(var(--page-gutter) * -1);
  right: calc(var(--page-gutter) * -1);
  bottom: 0; background: transparent;
  transition: background .5s var(--ease-out);
  z-index: -1; pointer-events: none;
}
.news-card-link:hover::before { background: rgba(240, 237, 232, 0.025); }

.news-card--featured .news-card-link {
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  min-height: clamp(360px, 42vw, 540px);
}
.news-card--compact .news-card-link {
  grid-template-columns: 7fr 5fr;
  align-items: stretch;
  min-height: clamp(280px, 32vw, 400px);
  gap: clamp(44px, 5vw, 84px);
}
.news-card--compact.news-card--reverse .news-card-link {
  grid-template-columns: 5fr 7fr;
}

/* Media ------------------------------------------------------------- */
.news-card-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-sunk);
  aspect-ratio: 16 / 9;
  align-self: stretch;
}
.news-card--featured .news-card-link > .news-card-media { order: 2; }
.news-card--compact  .news-card-link > .news-card-media { order: 1; }
.news-card--compact.news-card--reverse .news-card-link > .news-card-media { order: 2; }
.news-card--compact.news-card--reverse .news-card-link > .news-card-body { order: 1; }
.news-card--compact.news-card--reverse .news-card-corner { right: auto; left: 0; }

.news-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) contrast(1.04);
  transform: scale(1.0);
  transition: transform .8s var(--ease-out), filter .5s var(--ease-out);
}
.news-card-link:hover .news-card-media img {
  filter: grayscale(0%) contrast(1.04);
  transform: scale(1.04);
}
/* Subtle vignette on the image so the type stays editorial */
.news-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,7,0) 65%, rgba(7,7,7,0.35) 100%);
  pointer-events: none;
}

/* Body -------------------------------------------------------------- */
.news-card-body {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
  padding: clamp(8px, 1vw, 18px) 0;
}
.news-card--featured .news-card-link > .news-card-body { order: 1; }
.news-card--compact  .news-card-link > .news-card-body { order: 2; }

.news-card-meta {
  display: inline-flex; flex-wrap: wrap;
  align-items: center; gap: 14px;
}
.news-card-num {
  font-family: var(--font-body); font-weight: 300;
  font-size: 8.5px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--fg-muted);
}
.news-card-cat {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg);
  padding: 6px 10px;
  border: 1px solid var(--rule-strong);
}
.news-card-sep { color: var(--fg-faint); }
.news-card-date {
  font-family: var(--font-body); font-weight: 300;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
}

.news-card-title {
  font-family: var(--font-display); font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.news-card--featured .news-card-title {
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.02;
  max-width: 18ch;
}
.news-card--compact .news-card-title {
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.05;
  max-width: 22ch;
}

.news-card-lede {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.95;
  color: var(--fg-muted);
  max-width: 46ch;
}

.news-card-more {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg);
}
.news-card-more-arrow {
  display: inline-flex;
  transition: transform .4s var(--ease-out);
}
.news-card-link:hover .news-card-more-arrow { transform: translateX(6px); }

/* Slashes corner — faint editorial signature on featured card */
.news-card-corner {
  position: absolute;
  top: clamp(28px, 3.4vw, 48px);
  right: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--fg-ghost);
  pointer-events: none;
  user-select: none;
}
.news-card--compact .news-card-corner { top: auto; bottom: 8px; right: 0; }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .serv-intro { grid-template-columns: 1fr; }
  .serv-intro > .r:first-child { margin-left: 0; }
  .serv-intro .serv-intro-text { align-items: flex-start; text-align: left; padding-right: 0; }
  .estudio-intro .intro-head { margin-left: 0; }
  .estudio-intro .intro-lede { text-align: left; padding-right: 0; }
  .serv-tabla-grid { grid-template-columns: repeat(2, 1fr); }
  .serv-tabla-cell { min-height: auto; }
}
/* Noticias masthead + intro — tablet / mobile scaling */
@media (max-width: 960px) {
  .news-mast { padding-top: clamp(20px, 3.5vw, 30px); gap: 16px; flex-wrap: nowrap; }
  .news-mast a > svg { height: 30px !important; }
  .news-mast-back { font-size: 8.5px; letter-spacing: 0.16em; padding: 11px 15px; gap: 9px; }
  .news-mast-right { gap: 14px; }
  .news-mast-lang { font-size: 8.5px; letter-spacing: 0.16em; gap: 7px; }
  .news-intro { padding-top: clamp(38px, 6vh, 64px); row-gap: clamp(16px, 3vw, 24px); }
  .news-intro-h { font-size: min(17.4vw, calc((100vw - 2 * var(--page-gutter) - 16px) / 5.45)); }
  .news-intro-lede { font-size: 12.5px; line-height: 1.85; }
}
@media (max-width: 560px) {
  .news-mast { padding-top: 18px; gap: 12px; }
  .news-mast a > svg { height: 23px !important; }
  .news-mast-back { font-size: 7.5px; letter-spacing: 0.12em; padding: 9px 11px; gap: 7px; }
  .news-mast-right { gap: 22px; }
  .news-mast-lang { font-size: 7.5px; letter-spacing: 0.1em; gap: 5px; }
  .news-mast-back svg { width: 11px; height: 11px; }
  .news-intro { padding-top: 32px; padding-bottom: 8px; row-gap: 14px; }
  .news-intro-h { font-size: min(16.8vw, calc((100vw - 2 * var(--page-gutter) - 14px) / 5.45)); }
}

/* Noticias cards — stacked treatment below the two-column threshold.
   Image on top, full-width text block underneath: no orphan text column. */
@media (max-width: 1100px) {
  .news-intro-text { flex-direction: column; align-items: center; text-align: center; padding-right: 0; gap: 16px; }
  .news-intro-lede { padding-right: 0; }

  .news-grid-section {
    padding-top: clamp(28px, 4.4vw, 56px);
    padding-bottom: clamp(72px, 12vw, 120px);
    gap: clamp(44px, 7vw, 72px);
  }
  .news-card--featured .news-card-link,
  .news-card--compact .news-card-link,
  .news-card--compact.news-card--reverse .news-card-link {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3.4vw, 32px);
    min-height: 0;
    padding-top: clamp(24px, 3.4vw, 40px);
  }
  .news-card-link > .news-card-media,
  .news-card-link > .news-card-body { order: initial; }
  .news-card-media { aspect-ratio: 16 / 9; }
  .news-card-body { padding: 0; gap: clamp(16px, 2.4vw, 24px); }
  .news-card--featured .news-card-title,
  .news-card--compact .news-card-title {
    font-size: clamp(24px, 4.4vw, 40px);
    line-height: 1.06;
    max-width: 26ch;
  }
  .news-card-lede { max-width: 70ch; }
  .news-card-more { margin-top: 0; }
}
/* Tablet band: image full-width, text block splits into the studio's
   asymmetric two-column measure so the row doesn't read half-empty. */
@media (min-width: 761px) and (max-width: 1100px) {
  .news-card-body {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: clamp(32px, 4.4vw, 56px);
    row-gap: clamp(18px, 2.4vw, 26px);
    align-items: start;
  }
  .news-card-meta { grid-column: 1 / -1; }
  .news-card-title { grid-column: 1; max-width: 20ch; }
  .news-card-lede { grid-column: 2; max-width: 48ch; }
  .news-card-more { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .news-card--featured .news-card-title,
  .news-card--compact .news-card-title { font-size: clamp(21px, 6.2vw, 30px); max-width: none; }
  .news-card-lede { font-size: 12.5px; line-height: 1.85; }
  .news-card-body { gap: 15px; }
  .news-card-cat { font-size: 8px; letter-spacing: 0.18em; padding: 5px 8px; }
  .news-card-date { font-size: 9.5px; letter-spacing: 0.14em; }
  .news-card-num { font-size: 8px; letter-spacing: 0.24em; }
  .news-card-more { font-size: 9px; letter-spacing: 0.18em; gap: 11px; }
  .news-card-more svg { width: 12px; height: 12px; }
}
@media (max-width: 760px) {
  .news-card-meta { gap: 10px; }
  .news-card-corner { display: none; }
  .serv-row-link {
    grid-template-columns: 44px 1fr 24px;
    grid-template-areas:
      "num name arr"
      ".   desc desc";
    row-gap: 10px;
    column-gap: 16px;
  }
  .serv-row-num { grid-area: num; }
  .serv-row-name { grid-area: name; }
  .serv-row-arrow { grid-area: arr; opacity: 1; transform: none; }
  .serv-row-desc { grid-area: desc; justify-self: start; }
  .serv-tabla-grid { grid-template-columns: 1fr; }
  .cg-tabla-section .serv-tabla-grid { grid-template-columns: 1fr; }
}


/* ---- Index: section header for the grid --------------------------- */
.trabajos-grid-section .serv-section-hd { margin-bottom: clamp(40px, 5vw, 72px); }


/* ---- Project still — the video, hero on entry -------------------- */
.proj-still-wrap {
  padding: clamp(96px, 11vh, 132px) var(--page-gutter) 0;
  margin-bottom: clamp(48px, 6vw, 84px);
}
.proj-still {
  width: 83%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  position: relative;
  border: 1px solid var(--rule);
}
/* Video stills carry their own letterboxing (masters are often 2.39 inside a
   16/9 frame). A hairline border then reads as two stray white lines against
   the image edges, so the video variant bleeds edge-to-edge with no frame. */
.proj-still-video {
  border: 0;
}
/* A CSS transform on any ancestor stops the nested Vimeo iframe from
   entering fullscreen (the player then hides its fullscreen button).
   Reveal this wrapper with opacity only — never a transform. */
.proj-still-wrap.r,
.proj-still-wrap.r.on { transform: none; }

/* ---- Title (left) + credits (right), aligned to the player edges -- */
.proj-head-wrap {
  padding: 0 var(--page-gutter);
  margin-bottom: clamp(96px, 11vw, 152px);
}
.proj-head-block {
  width: 83%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 96px);
}
.proj-head-title { flex: 1 1 auto; min-width: 0; }
.proj-head-h {
  font-size: clamp(38px, 5.2vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
/* Work-type subtitle — same face/colour as a credit header, a touch larger */
.proj-head-sub {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(12.5px, 1.05vw, 15px);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-muted);
}
.proj-head-credits {
  flex: 0 0 clamp(380px, 50%, 600px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
/* Credits in the head sit clean — no top hairline, no padding */
.proj-head-credits .proj-credit-block { border-top: none; padding-top: 0; }
/* Narrower columns in the head: stack role over name so nothing crowds */
.proj-head-credits .proj-credit-row {
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 11px 0;
}

/* ---- Meta strip (reuses .meta-strip naming) ----------------------- */
.proj-meta .lbl {
  display: block;
  font-family: var(--font-body); font-weight: 300; font-size: 7.5px;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 8px;
}
.proj-meta .val {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg);
}

/* ---- Credits section --------------------------------------------- */
.proj-credit-block {
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(18px, 2vw, 28px);
}
/* Clean credits: no header, no divider lines — credits sit flush below the video */
.proj-credits-clean .proj-credit-block { border-top: none; padding-top: 0; }
.proj-credit-h {
  font-family: var(--font-body); font-weight: 300; line-height: var(--lh-tight);
  font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.proj-credit-list {
  display: flex; flex-direction: column;
}
.proj-credit-row {
  display: grid;
  grid-template-columns: minmax(160px, 38%) 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.proj-credit-row:last-child { border-bottom: none; }
.proj-credit-role {
  font-family: var(--font-body); font-weight: 300;
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg-muted);
}
.proj-credit-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.01em;
  color: var(--fg);
}


/* ---- More work — two mini players -------------------------------- */
.proj-more-section {
  padding: clamp(72px, 9vw, 120px) var(--page-gutter);
  background: transparent;
}
/* Full-bleed variant: players run edge-to-edge of the viewport */
.proj-more-bleed {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
.proj-more-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
}
.work-cell.player-cell:hover .player-play {
  background: var(--bone); border-color: var(--bone); color: var(--bg);
}
@media (max-width: 640px) {
  .proj-more-grid { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .proj-head-block { flex-direction: column; align-items: stretch; gap: clamp(36px, 6vw, 56px); }
  .proj-head-credits { flex: 1 1 auto; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
}
@media (max-width: 760px) {
  .proj-credit-row { grid-template-columns: 1fr; gap: 6px; }
  .proj-head-credits { grid-template-columns: 1fr; }
}

/* ====================== Cookie consent ====================== */
@keyframes lcBannerUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-cookie-btn { padding: 14px 26px; cursor: pointer; }
.lc-cookie-btn.lg { padding: 16px 30px; }
.lc-cookie-modal-card { scrollbar-width: none; -ms-overflow-style: none; }
.lc-cookie-modal-card::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (max-width: 900px) {
  .lc-cookie-banner-inner { grid-template-columns: 1fr !important; gap: 22px !important; }
  .lc-cookie-actions { justify-content: flex-start !important; }
}
@media (max-width: 520px) {
  .lc-cookie-actions { width: 100%; }
  .lc-cookie-actions .lc-cookie-btn { flex: 1 1 auto; }
}
/* Policy page — numbered legal sections */
.cookie-doc { max-width: 940px; margin: 0 auto; }
.cookie-sec { display: grid; grid-template-columns: 64px 1fr; gap: clamp(18px, 3vw, 40px); }
.cookie-sec + .cookie-sec { margin-top: clamp(48px, 6vw, 76px); }
.cookie-sec-num { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--fg-faint); padding-top: 6px; }
.cookie-sec h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.1vw, 23px); letter-spacing: 0.005em; text-transform: uppercase; color: var(--fg); line-height: 1.12; margin: 0 0 20px; }
.cookie-sec p { font-family: var(--font-body); font-weight: 300; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.95; color: var(--fg-muted); max-width: 660px; margin: 0 0 16px; }
.cookie-sec p:last-child { margin-bottom: 0; }
.cookie-sec strong { color: var(--fg); font-weight: 400; }
.cookie-list { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; max-width: 660px; }
.cookie-list li { position: relative; padding-left: 26px; font-family: var(--font-body); font-weight: 300; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.7; color: var(--fg-muted); }
.cookie-list li::before { content: "/"; position: absolute; left: 4px; top: 0; font-family: var(--font-display); font-weight: 700; color: var(--fg-faint); }
.cookie-list a { color: var(--fg); border-bottom: 1px solid var(--rule-strong); transition: border-color .3s; word-break: break-word; }
.cookie-list a:hover { border-color: var(--fg); }
.cookie-subhead { font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1.3vw, 15px); letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); margin: 26px 0 12px; }
.cookie-subhead .reg { display: block; font-family: var(--font-body); font-weight: 300; font-size: 8.5px; letter-spacing: 0.22em; color: var(--fg-faint); margin-top: 7px; }
.cookie-inline-link { color: var(--fg); border-bottom: 1px solid var(--rule-strong); transition: border-color .3s; }
.cookie-inline-link:hover { border-color: var(--fg); }
/* Aviso Legal — titular identity block */
.legal-defs { margin: 6px 0 4px; padding: 0; max-width: 660px; }
.legal-def { display: grid; grid-template-columns: 200px 1fr; gap: 18px 28px; padding: 13px 0; border-top: 1px solid var(--rule); }
.legal-def:last-child { border-bottom: 1px solid var(--rule); }
.legal-def dt { font-family: var(--font-body); font-weight: 300; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); padding-top: 3px; }
.legal-def dd { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.7; color: var(--fg); }
@media (max-width: 640px) {
  .legal-def { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-width: 640px) {
  .cookie-sec { grid-template-columns: 1fr; gap: 10px; }
  .cookie-sec-num { padding-top: 0; }
}


/* ---- Hamburger button: hidden on desktop, shown on mobile ---------- */
.nav-mobile-actions { display: none; }
.nav-burger { display: none; }

/* ---- Contact section social row: mobile/tablet only ---------------- */
.contact-social-mobile { display: none; }
.contact-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--fg-muted);
  transition: color .3s var(--ease-out);
}
.contact-social-link:hover { color: var(--fg); }
.nav-burger-box { position: relative; width: 24px; height: 14px; display: inline-block; }
.nav-burger-box > span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--fg);
  transition: transform .4s var(--ease-out), opacity .2s var(--ease-out), top .4s var(--ease-out);
}
.nav-burger-box > span:nth-child(1) { top: 0; }
.nav-burger-box > span:nth-child(2) { top: 6px; }
.nav-burger-box > span:nth-child(3) { top: 12px; }
.nav-burger-box.open > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-burger-box.open > span:nth-child(2) { opacity: 0; }
.nav-burger-box.open > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---- Mobile drawer -------------------------------------------------- */
.nav-drawer {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(7,7,7,0.97);
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  display: flex; flex-direction: column; justify-content: space-between;
  padding:
    calc(env(safe-area-inset-top, 0px) + 108px)
    var(--page-gutter)
    calc(env(safe-area-inset-bottom, 0px) + 44px);
  animation: navDrawerIn .4s var(--ease-out) both;
}
@keyframes navDrawerIn { from { opacity: 0; } to { opacity: 1; } }
.nav-drawer-list { display: flex; flex-direction: column; }
.nav-drawer-link {
  display: flex; align-items: baseline; gap: 18px;
  padding: clamp(16px, 2.4vh, 22px) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 8.5vw, 46px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--fg);
  animation: navLinkIn .5s var(--ease-out) both;
  animation-delay: calc(0.06s * var(--di) + 0.08s);
}
.nav-drawer-link:first-child { border-top: 1px solid var(--rule); }
.nav-drawer-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.08em; color: var(--fg-faint);
}
@keyframes navLinkIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nav-drawer-foot { display: flex; flex-direction: column; gap: 26px; }
.nav-drawer-foot-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.nav-drawer-langs { display: flex; align-items: center; gap: 12px; }
.nav-drawer-legal { display: flex; align-items: center; gap: 12px; }
.nav-drawer-legal-link {
  font-family: var(--font-body); font-weight: 300; font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted);
  transition: color .3s;
}
.nav-drawer-legal-link:hover { color: var(--fg); }
.nav-drawer-lang {
  font-family: var(--font-body); font-weight: 300; font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-muted);
}
.nav-drawer-lang.active { color: var(--fg); }
.nav-drawer-langsep { color: var(--fg-faint); }

@media (max-width: 960px) {
  .nav-center  { display: none !important; }
  .nav-actions { display: none !important; }
  .nav-mobile-actions {
    display: inline-flex; align-items: center; gap: 14px;
    grid-column: 3; justify-self: end;
  }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -8px; flex-shrink: 0;
    color: var(--fg); cursor: pointer;
  }
  .contact-social-mobile {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 56px auto 0;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .contact-social-icons { display: flex; align-items: center; justify-content: center; gap: 10px; }
}

/* ---- Content overflow fixes (desktop inline nudges neutralised) ----- */
@media (max-width: 1100px) {
  /* Servicios · tabla tecnica sub had a 481px left nudge tuned for desktop */
  .serv-tabla-section .serv-section-sub p { margin-left: 0 !important; }

  /* Noticias · intro had large desktop margin/padding nudges that overflowed */
  .news-intro-head { margin: 0 !important; }
  .news-intro-text { margin: 0 !important; padding: 0 !important; }
  .news-intro-lede { margin: 0 !important; }
  /* The reverse compact card kept its 2-col grid (more specific than the
     collapse rule) — force it to a single column like every other card. */
  .news-card--compact.news-card--reverse .news-card-link {
    grid-template-columns: 1fr !important;
  }
  /* Tablet/mobile: compact card leads with its text block, so that copy sits
     between the two stacked images instead of trailing below both. */
  .news-card--compact .news-card-link > .news-card-body { order: 1 !important; }
  .news-card--compact .news-card-link > .news-card-media { order: 2 !important; }
}

/* ---- Project subpage: main video bleeds to the screen edges --------- */
@media (max-width: 760px) {
  .proj-still-wrap {
    padding-left: 0; padding-right: 0;
    padding-top: clamp(92px, 14vh, 124px);
    margin-bottom: clamp(34px, 7vw, 56px);
  }
  .proj-still { width: 100%; border-left: 0; border-right: 0; }
  /* Title + credits run to the page gutter rather than the 83% column */
  .proj-head-block { width: 100%; }

  /* Contact: the inline 52px side gutter + tall vertical padding are
     desktop values — bring them back to the responsive page gutter. */
  #contacto {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
    padding-top: 92px !important;
    padding-bottom: 104px !important;
  }

  /* Cookie-policy intro is an inline 2-col grid with no collapse rule */
  .cookie-doc > .r { grid-template-columns: 1fr !important; row-gap: 30px; }
}

/* ==================================================================
   Service-page video reel — horizontal scroller of project players.
   Reuses the .work-cell / .player-cell visual vocabulary from the
   "more work" players, laid out as a snap-scrolling row.
   ================================================================== */
.serv-reel-section {
  padding: clamp(82px, 9vw, 120px) 0 clamp(8px, 1vw, 12px);
  background: var(--bg);
}
.serv-reel-head {
  padding: 0 var(--page-gutter) clamp(26px, 2.8vw, 38px);
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.serv-reel-head-left {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
/* Small section title — sized & coloured like the right-hand subtitle,
   no hairline prefix, a touch more present than the micro pretag. */
.serv-reel-pretag {
  font-family: var(--font-body); font-weight: 400;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
}
@media (min-width: 760px) {
}

/* Swipe hint — a short rail with a dash that slides horizontally,
   cueing the slide gesture. Sits at the title height, above the reel. */
.reel-swipe {
  display: inline-flex; align-items: center;
  height: 8px;
}
.reel-swipe-rail {
  position: relative;
  width: 58px; height: 1px;
  background: var(--rule-strong);
  overflow: visible;
}
.reel-swipe-dash {
  position: absolute; top: 50%; left: 0;
  width: 18px; height: 1px; margin-top: -0.5px;
  background: var(--fg);
  animation: reelSwipe 2.6s cubic-bezier(.66,0,.34,1) infinite;
}
@keyframes reelSwipe {
  0%   { transform: translateX(0);    opacity: 0; }
  16%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translateX(40px); opacity: 0; }
}

/* Reel scroller + lateral arrows */
.serv-reel-wrap { position: relative; }
.serv-reel-nav {
  position: absolute; top: 50%; z-index: 4;
  width: 46px; height: 46px;
  display: none; align-items: center; justify-content: center;
  border: none;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 360ms var(--ease-out),
              color 300ms var(--ease-out),
              transform 420ms var(--ease-out);
}
.serv-reel-nav--prev { left: clamp(8px, 1.2vw, 18px); transform: translateY(-50%) translateX(-8px); }
.serv-reel-nav--next { right: clamp(8px, 1.2vw, 18px); transform: translateY(-50%) translateX(8px); }
.serv-reel-nav.is-shown { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.serv-reel-nav:hover { color: var(--fg); background: none; }
@media (min-width: 961px) and (hover: hover) {
  .serv-reel-nav { display: inline-flex; }
}
.serv-reel-track {
  display: flex; gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--page-gutter) 6px;
}
.serv-reel-track::-webkit-scrollbar { display: none; }
.serv-reel-cell {
  flex: 0 0 clamp(300px, 42vw, 540px);
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .serv-reel-cell { flex-basis: clamp(260px, 84vw, 420px); }
}

/* ==================================================================
   CONTACT PAGE — dedicated /contacto with an animated location map.
   Rúa do Hórreo · studio → Estación Intermodal → bus 6A to airport.
   ================================================================== */
.contacto-main { background: var(--bg); }


/* --- Section 1: the map — panoramic, straight on the page background --- */
.cmap-section {
  padding: clamp(24px, 4vw, 60px) var(--page-gutter) clamp(80px, 10vw, 128px);
  background: var(--bg);
}
.cmap-wrap { max-width: var(--page-max); margin: 0 auto; display: flex; justify-content: center; }
.cmap-scroll {
  width: 100%; max-width: 1040px;
}
.cmap-panel {
  position: relative; width: 100%;
  aspect-ratio: 1560 / 900;
  color: var(--fg);
}
.cmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* --- studio map artwork (artwork del mapa del estudio) — brand paint --- */
.cmap-panel.nmap { aspect-ratio: 1810.3 / 712.4; }
.nmap .st5, .nmap .st6, .nmap .st8 { fill: rgba(240,237,232,0.055); }
.nmap .st7 { fill: rgba(240,237,232,0.085); }
.nmap .st20 { fill: rgba(240,237,232,0.17); }               /* streets */
.nmap .st4  { fill: rgba(240,237,232,0.045); }              /* Praza de Galicia garden */
.nmap .st21 { opacity: 1; }
.nmap .st2  { fill: none; stroke: rgba(240,237,232,0.16); stroke-width: 1; }  /* garden hatch */
.nmap .st1  { fill: var(--fg); }                            /* station glyph plates */
.nmap .st15 { fill: var(--bg); }                            /* station glyph marks */
.nmap .st3  { fill: var(--fg); }                            /* bus-stop sign */
.nmap .st9  { fill: none; stroke: var(--fg-muted); stroke-width: 2.2; stroke-linecap: square; }
.nmap .st19 { fill: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -0.01em; transition: fill .3s; }
.nmap .nmap-pin-a { cursor: pointer; }
.nmap .nmap-pin-a:hover .st19 { fill: rgba(240,237,232,0.72); }
/* street names */
.nmap .st11, .nmap .st13, .nmap .st14 {
  font-family: var(--font-body); font-weight: 300; font-size: 15px;
  fill: rgba(240,237,232,0.46); letter-spacing: 0.01em;
}
/* place labels */
.nmap .st12 {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  fill: var(--fg-muted); letter-spacing: 0.04em;
}
.nmap .st10 {
  font-family: var(--font-body); font-weight: 300; font-size: 13.5px;
  fill: rgba(240,237,232,0.3); letter-spacing: 0.08em;
}
.nmap-fabric, .nmap-streets { opacity: 0; animation: cmapFade .9s ease both; }
.nmap-fabric { animation-delay: .2s; }
.nmap-streets { animation-delay: .5s; }


/* --- markers --- */
.cmap-mk { opacity: 0; animation: cmapPop .7s cubic-bezier(.16,1,.3,1) both; transform-box: fill-box; transform-origin: center; }
.cmap-pulse { transform-box: fill-box; transform-origin: center; animation: cmapPulse 3s ease-out infinite; }
.nmap-pin-a:hover .cmap-pulse { stroke: rgba(240,237,232,0.87); }

/* --- HTML label overlays (crisp type over the SVG) --- */
.cmap-node { position: absolute; z-index: 4; opacity: 0; animation: cmapFade .8s ease both; pointer-events: none; }
.cmap-box {
  display: inline-flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; background: var(--bg); border: 1px solid var(--rule-strong);
}
.cmap-box-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(10px, 0.82vw, 12.5px); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--fg); line-height: 1.1; white-space: nowrap;
}
.cmap-box-s {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(8px, 0.62vw, 9.5px); letter-spacing: 0.02em;
  color: var(--fg-muted); white-space: nowrap;
}
.cmap-box-map {
  margin-top: 2px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(7.5px, 0.58vw, 9px); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap; transition: color .3s;
}
.cmap-box-map svg { display: block; }
@media (max-width: 640px) {
  .cmap-box-bus { width: 86px; padding: 7px 8px; }
  .cmap-box-bus .cmap-box-t, .cmap-box-bus .cmap-box-s { white-space: normal; text-wrap: balance; }
  /* Marcador LC más grande en móvil */
  .nmap .st19 { font-size: 72px; }
  .nmap .cmap-pulse { r: 64px; stroke-width: 2.4; }
}
a.cmap-box { pointer-events: auto; cursor: pointer; text-decoration: none; transition: border-color .3s; }
a.cmap-box:hover { border-color: var(--fg); }
a.cmap-box:hover .cmap-box-map { color: var(--fg); }

@keyframes cmapFade  { to { opacity: 1; } }
@keyframes cmapPop   { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cmapPulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}

/* Reliable section reveal for the contact page. */
.contacto-main .r { opacity: 1; transform: none; animation: cmapReveal .9s cubic-bezier(.16,1,.3,1) both; }
.contacto-main .r.d1 { animation-delay: .12s; }
.contacto-main .r.d2 { animation-delay: .22s; }
.contacto-main .r.d3 { animation-delay: .32s; }
@keyframes cmapReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* --- Section 2: "Hablemos de tu proyecto" — recomposed contact plate --- */
.cx-section {
  position: relative;
  background: var(--bg);
  padding: clamp(118px, 13vw, 184px) var(--page-gutter) clamp(64px, 8vw, 104px);
}
.cx-inner {
  position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px;
  gap: clamp(72px, 11vw, 420px); align-items: stretch;
}
.cx-col-l { display: flex; flex-direction: column; justify-content: space-between; }
.cx-col-r { display: flex; flex-direction: column; gap: 36px; }
.cx-h { font-size: clamp(44px, 6.6vw, 112px); line-height: 0.9; }
.cx-sub {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.95; color: var(--fg-muted);
  max-width: 460px; margin: 0;
}
.cx-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.cx-slate {
  margin: 14px 0 0;
  display: grid; grid-template-columns: 110px 1fr;
  row-gap: 14px; column-gap: 18px; align-items: start;
}
.cx-cell { display: contents; }
.cx-cell-l {
  font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-muted); font-family: var(--font-body); font-weight: 300;
  padding-top: 4px;
}
.cx-cell-v {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; color: var(--fg); letter-spacing: 0.005em; line-height: 1.5;
}
a.cx-cell-v { transition: color .3s; }
a.cx-cell-v:hover { color: var(--fg-muted); }
.cx-social { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.cx-social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); opacity: .62; transition: opacity .3s var(--ease-out);
}
.cx-social a:hover { opacity: 1; }
.cx-social img { display: block; width: 26px; height: 26px; object-fit: contain; }

@media (max-width: 980px) {
  .cx-inner { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 72px); align-items: start; }
  .cx-col-l { padding-bottom: 0; display: block; }
}

/* The tablet-only copy of the intro paragraph (sits under the title). */
.cx-sub-tablet { display: none; }

/* ── Contact plate — TABLET (641–1024): title + intro text in the left
      column, actions + slate + social in the right one. Desktop untouched. ── */
@media (min-width: 641px) and (max-width: 1024px) {
  #contacto > div.cx-inner:not([role="dialog"]) {
    max-width: 1120px !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
    gap: clamp(28px, 4.5vw, 56px);
    align-items: start;
    padding-left: 56px;
  }
  .cx-section { padding-top: clamp(120px, 15vw, 176px); padding-bottom: clamp(56px, 7vw, 80px); }
  .cx-col-l { display: flex; flex-direction: column; gap: 30px; }
  .cx-h {
    width: auto !important;
    height: auto !important;
    padding-top: 4px !important;
    margin-top: 0 !important;
    font-size: clamp(44px, 6.9vw, 72px);
    line-height: 0.89;
  }
  .cx-col-r { gap: clamp(24px, 3.2vw, 32px); }
  .cx-col-r > .cx-sub { display: none; }
  .cx-sub-tablet { display: block; }
  .cx-sub { font-size: 13px; line-height: 1.9; max-width: 100%; }
  .cx-actions { flex-wrap: nowrap; gap: 10px; }
  .cx-actions .btn.lg {
    padding: 14px 16px; font-size: 8.5px; letter-spacing: 0.14em;
    flex: 0 1 auto; min-width: 0;
  }
  .cx-slate { margin-top: 4px; grid-template-columns: 70px 1fr; column-gap: 14px; row-gap: 13px; }
  .cx-cell-l { font-size: 7px; letter-spacing: 0.22em; }
  .cx-cell-v { font-size: 12.5px; }
  /* "Santiago de Compostela" drops to its own line. */
  .cx-slate .cx-cell:nth-child(3) .cx-cell-v { max-width: 12em; }
  .cx-social img { width: 24px; height: 24px; }
}

/* ── Contact plate — MOBILE (≤640): the display title carries the section,
      so it scales with the viewport instead of sitting at the 44px floor. ── */
@media (max-width: 640px) {
  .cx-h {
    width: auto !important;
    height: auto !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    font-size: clamp(50px, 14.5vw, 68px);
    line-height: 0.88;
  }
  .cx-sub { font-size: 13.5px; max-width: 100%; }
  .cx-slate { grid-template-columns: 88px 1fr; }
  /* First block of the contact page — more air below the header. */
  .contacto-main > #contacto.cx-section { padding-top: 140px !important; }
}


@media (prefers-reduced-motion: reduce) {
  .cmap-block, .cmap-mk, .cmap-pulse, .cmap-node,
  .cmap-park-g, .cmap-round-g { animation: none !important; opacity: 1 !important; }
  .cmap-mk { transform: none !important; }
}


/* ==================================================================
   Edición — top marquee: two rows of work drifting in opposite
   directions. Top row right, bottom row left. No overlays, no copy.
   Cells use margin-right (not gap) so the 50% loop offset is exact.
   ================================================================== */
.ed-marq {
  padding: clamp(76px, 9.5vh, 112px) 0 0;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 3px;
}
.ed-marq-viewport { overflow: hidden; contain: layout paint style; }
.ed-marq-row {
  display: flex; width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
/* Section off screen: park the drift and drop the promoted layer hint. */
.ed-marq--idle .ed-marq-row { animation-play-state: paused; will-change: auto; }
.ed-marq-row--l { animation: edMarqLeft 110s linear infinite; }
.ed-marq-row--r { animation: edMarqRight 110s linear infinite; }
/* lc-pages.js takes over the drift (see edMarquee). */
.ed-marq--js .ed-marq-row { animation: none !important; }
@keyframes edMarqLeft {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes edMarqRight {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.ed-marq-cell {
  position: relative; overflow: hidden;
  flex: 0 0 clamp(260px, 30vw, 440px);
  margin-right: 3px;
  aspect-ratio: 16 / 9;
  background: var(--bg-sunk);
  display: block;
}
.ed-marq-cell .vid-media,
.ed-marq-cell .still {
  transform: scale(1);
  transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s;
}
.ed-marq-cell:hover .vid-media,
.ed-marq-cell:hover .still { transform: none; }
@media (max-width: 640px) {
  .ed-marq-cell { flex-basis: clamp(220px, 66vw, 320px); }
  .ed-marq-row--l, .ed-marq-row--r { animation-duration: 74s; }
}
/* Reduced motion (p. ej. Windows con "Efectos de animación" desactivados):
   la deriva sigue, más lenta, en vez de quedar estática. */
@media (prefers-reduced-motion: reduce) {
  .ed-marq-row--l, .ed-marq-row--r { animation-duration: 180s; }
}


/* ==================================================================
   Edición — interludio centrado, bloques editoriales y plancha
   parallax de las salas de edición.
   Sin líneas divisorias: las secciones se separan con aire.
   ================================================================== */
.ed-interlude {
  padding: clamp(86px, 13vh, 160px) var(--page-gutter) clamp(30px, 5vh, 62px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--bg);
}
.ed-interlude-line {
  max-width: none;
  padding-right: 0.14em;
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
}
.ed-interlude-sub {
  margin-top: 34px;
  max-width: min(100%, 86ch);
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; letter-spacing: 0.02em; line-height: 1.9;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* ---- Editorial block: heading left, copy right -------------------- */

@media (max-width: 860px) {
}

/* ---- Salas: plancha parallax a sangre ------------------------------ */
@media (max-width: 640px) {
}

/* ---- Edición: dos bloques centrados bajo el interludio ------------ */
.ed-duo {
  padding: clamp(46px, 7vh, 88px) var(--page-gutter) 0;
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 104px);
  max-width: 1180px;
  margin-inline: auto;
}
.ed-duo-col {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: clamp(18px, 1.8vw, 26px);
  padding: clamp(30px, 3.4vw, 54px) clamp(24px, 2.8vw, 46px);
  background: var(--bg-raised);
}
.ed-duo-h {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 0.96; letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
.ed-duo-h em { font-style: italic; font-weight: 300; text-transform: none; color: var(--fg-muted); }
.ed-duo-col p {
  margin: 0;
  width: 100%;
  max-width: 46ch;
  text-align: left;
  hyphens: none;
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; letter-spacing: 0.01em; line-height: 1.95;
  color: rgba(var(--bone-rgb), 0.44);
}
.ed-duo-lede {
  text-align: center !important;
  font-size: clamp(15px, 1.4vw, 19px) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  color: var(--fg) !important;
}
.ed-duo-close { color: rgba(var(--bone-rgb), 0.44) !important; }
@media (max-width: 860px) {
  .ed-duo { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); }
  .ed-duo-col p {
    text-align: center;
    text-align-last: center;
    hyphens: none;
    margin-inline: auto;
  }
  .ed-duo-lede { text-align: center !important; text-align-last: center; hyphens: none; }
}

/* ---- Edición: plancha única a sangre ------------------------------- */
.ed-bleed {
  background: var(--bg);
  padding: clamp(86px, 13vh, 160px) 0 clamp(28px, 5vh, 72px);
  width: 100%;
}
.ed-bleed img {
  display: block;
  width: 100%;
  height: auto;
}

.ed-bleed-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vw, 26px);
  padding: clamp(34px, 5vh, 58px) var(--page-gutter) 0;
  text-align: center;
}
.ed-bleed-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.95;
  color: var(--fg-muted);
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .ed-bleed-note { white-space: normal; max-width: 34ch; text-wrap: pretty; }
}

.ed-bleed-cta { display: inline-flex; align-items: center; gap: 10px; }
.ed-bleed-cta svg { transition: transform var(--d-base) var(--ease-out); }
.ed-bleed-cta:hover svg { transform: translateX(4px); }


/* ==========================================================================
   Static-HTML shell — nav, drawer and cell posters now live in the served
   HTML instead of being produced by React. These rules are a 1:1 transcription
   of the inline styles those components used; nothing here changes the design.
   ========================================================================== */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /* Altura constante: el encogido se hace con transform (compositor), no con
     padding — animar padding reflowea cada frame y el logo tiembla. */
  padding: 14px var(--page-gutter);
  /* Suavizado en escala de grises: el suavizado subpíxel (LCD) sobre capas
     con transform + backdrop-filter produce texto teñido de fucsia en Chrome. */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.site-nav::before {
  /* Sube por encima del viewport: el blur no deja un borde translúcido arriba. */
  content: ""; position: absolute; top: -60px; left: 0; right: 0; bottom: 0; pointer-events: none;
  /* Sin backdrop-filter: al redimensionar (y sobre el vídeo del hero) Chrome
     recompone mal esa capa y el texto del nav aparece teñido de fucsia. */
  background: rgba(7,7,7,0.95);
  border-bottom: 1px solid var(--rule);
  opacity: 0; transition: opacity .45s cubic-bezier(.16,1,.3,1);
}
.site-nav.stuck::before { opacity: 1; }
.site-nav > * {
  position: relative;
  transform: translateY(12px);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.site-nav.stuck > * { transform: none; }

.nav-brand {
  position: relative; display: grid; align-items: center; justify-items: start;
  grid-column: 1; justify-self: start;
  width: 96px; height: 30px; color: var(--fg); flex-shrink: 0;
}
.nav-brand-full, .nav-brand-lc { grid-area: 1 / 1; }
.nav-brand-full {
  transform: none; opacity: 1;
  transition: opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1);
  white-space: nowrap; display: inline-flex; flex-direction: column; align-items: center;
}
.site-nav.stuck .nav-brand-full {
  opacity: 0; transform: translateX(-6px); pointer-events: none;
}
.nav-brand-colorlab { margin-top: 4px; display: block; transform: translateX(-2px); }
.nav-brand-full > img { height: 17px; width: auto; display: block; }
.nav-brand-colorlab img { height: 5px; width: auto; display: block; }
.nav-brand-lc {
  transform: translateX(8px); opacity: 0; pointer-events: none;
  transition: opacity .35s ease .05s, transform .55s cubic-bezier(.16,1,.3,1);
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; line-height: 1; text-transform: uppercase;
  display: inline-block;
}
.site-nav.stuck .nav-brand-lc {
  opacity: 1; transform: none; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .site-nav > *, .site-nav::before, .nav-brand-full, .nav-brand-lc { transition: none; }
}

.nav-center { display: flex; gap: 36px; grid-column: 2; justify-self: center; }
.nav-link {
  font-family: var(--font-body); font-weight: 500; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg); transition: color .3s;
}
.nav-link[aria-current="page"] { font-weight: 700; }

.nav-actions {
  display: flex; align-items: center; gap: 22px; flex-shrink: 0;
  grid-column: 3; justify-self: end;
}
.nav-langs {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 500; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.nav-lang { color: var(--fg-subtle); transition: color .3s; }
.nav-lang:hover, .nav-lang[aria-current="true"] { color: var(--fg); }
.nav-langsep { color: var(--fg-faint); }

.nav-drawer[hidden] { display: none; }

/* Cursor propio — el JS sólo escribe transform (compositor, sin layout). */
#__cur_dot  { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100000; transform: translate(-50%, -50%); will-change: transform; }
#__cur_ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 99999;  transform: translate(-50%, -50%); will-change: transform; }
#__cur_dot > div  { width: 7px;  height: 7px;  background: var(--fg); border-radius: 50%; }
#__cur_ring > div { width: 36px; height: 36px; border: 1px solid rgba(240,237,232,.26); border-radius: 50%; }

/* Cell still — was a background-image div, now a real <img> with alt text.
   object-fit reproduces the previous background-size/position exactly. */
img.vid-poster {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  max-width: none;
}

/* Project-page hero poster — now a real <img>; object-fit reproduces the
   previous background-size/position. */
img.hero-poster {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  max-width: none;
}

/* Elements served in the HTML but toggled by lc-pages.js (filters, random
   picks). Class rules set `display`, so the attribute needs the help. */
.work-cell[hidden], .work-grid[hidden], .trab-empty[hidden],
.trab-reset[hidden], .trab-fbadge[hidden], .visit-overlay[hidden] { display: none !important; }

/* Hover colours that used to live in React onMouseEnter handlers. */
.f-link { transition: color .3s; }
.f-link:hover { color: var(--fg) !important; }
.f-magazine {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 30px;
  background: var(--bone); color: var(--bg);
  padding: 13px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  transition: background .3s;
}
.f-magazine:hover { background: rgba(240,237,232,0.87); }

/* --------------------------------------------------------------------------
   No-JS fallback. The reveal system hides everything it will later animate in
   (.r, the interlude, the two-voice headings). With scripting off nothing ever
   adds .on, so the served content would be painted but transparent. These
   rules restore it. Invisible when JS runs — the query never matches.
   -------------------------------------------------------------------------- */
@media (scripting: none) {
  .r, .interlude-line, .interlude-sub, .interlude-cta {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important;
  }
  .r .tv-h, .r.tv-h,
  .r .intro-head h1, .r.intro-head h1,
  .r .space-h, .r.space-h {
    clip-path: none !important; transform: none !important; filter: none !important;
  }
  .r .tv-h em, .r.tv-h em,
  .r .intro-head h1 em, .r.intro-head h1 em,
  .r .space-h em, .r.space-h em { opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   Rendimiento de animación — no cambia ningún movimiento, sólo lo que cuesta.
   -------------------------------------------------------------------------- */
/* --hp no se hereda: al escribirse en la capa que lo usa, cada frame recalcula
   un único elemento en vez de todo el plato (vídeo, textos, controles). */
@property --hp { syntax: '<number>'; inherits: false; initial-value: 0; }

/* Revelado terminado: se libera la capa de composición. Los valores finales
   (transform, clip-path, filter) se mantienen, así que nada se mueve. */
.r.r-done { will-change: auto; }
.r .tv-h.r-done, .r.tv-h.r-done,
.r .intro-head h1.r-done, .r.intro-head h1.r-done,
.r .space-h.r-done, .r.space-h.r-done,
.interlude-line.r-done { will-change: auto; }

/* Iconos en bucle fuera de pantalla: en pausa, retoman donde estaban. */
.sic.is-idle, .sic.is-idle * { animation-play-state: paused !important; }

/* Hero cubierto por la página: las flechas dejan de animarse. */
.hero-stage.is-past .hero-chevs svg { animation-play-state: paused; }

/* Plato del hero de portada ligado al scroll en el compositor: mismo recorrido
   (0 → 90vh), mismo -4vh y ×1.085 que --hp, pero sin escribir estilos en cada
   frame del hilo principal, que es el que suaviza la rueda. lc-enhance.js deja
   de escribir --hp cuando esto está disponible. */
@keyframes lcHeroExit {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -4vh, 0) scale(1.085); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-stage:not(.cg-stage) .hero-stage-inner {
      transform: none;
      animation: lcHeroExit linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 90vh;
    }
  }
}

/* ---- Hero de proyecto · facade (lc-video.js) ---------------------------
   Poster + botón real; el reproductor solo se carga al pulsar. Círculo: el
   único radio que admite el sistema junto al badge y el avatar. */
.hero-play {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(240,237,232,0.55);
  background: rgba(7,7,7,0.32);
  color: var(--bone);
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s, opacity .3s;
}
.hero-play svg { margin-left: 3px; }
.hero-play:hover { background: var(--bone); border-color: var(--bone); color: var(--bg); }
.hero-play:focus-visible { outline: 1px solid var(--bone); outline-offset: 5px; }
.hero-video.is-loading .hero-play { opacity: .5; pointer-events: none; }
.hero-video.is-ready .hero-play {
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
}
@media (prefers-reduced-motion: reduce) {
  .vid-poster, .hero-poster, .hero-stage-poster, .hero-play { transition: none !important; }
}