/* =====================================================================
   NACHO — Designer & Filmmaker
   Sistema: grilla de 12 columnas · grotesca única (Inter Tight) ·
   negro / off-white / gris + un acento (REC).
   ===================================================================== */

:root {
  --paper: #F2F0EB;
  --paper-2: #E8E5DE;
  --ink: #0B0B0A;
  --ghost: #DCD8CF;          /* palabras inactivas (índice, approach) */
  --mute: #6C6861;           /* texto secundario sobre claro (AA en 14px+) */
  --line: rgba(11, 11, 10, .16);
  --gl: rgba(11, 11, 10, .07);   /* líneas de grilla visibles */
  --accent: var(--brand);     /* acento único (alias de --brand): REC / disponibilidad / foco */
  --brand: #8D0100;           /* rojo de identidad nach.dsg: detalles editoriales (8.6:1 sobre --paper) */

  --pad: clamp(16px, 2.2vw, 36px);
  --gut: clamp(10px, 1.25vw, 22px);
  --col: calc((100vw - 2 * var(--pad) - 11 * var(--gut)) / 12);
  --nav-h: 56px;

  --f: "Inter Tight", "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, 0, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.4;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video, canvas { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; font-size: 13px; }
.skip:focus { top: 12px; }

/* ---------- Grilla ---------- */
.g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding-inline: var(--pad);
}
.gridlines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut); padding-inline: var(--pad);
}
.gridlines i { border-inline: 1px solid var(--gl); transform-origin: top; }
html.js .gridlines i { transform: scaleY(0); transition: transform 1.6s var(--ease) calc(var(--i, 0) * 45ms); }
html.js .is-in > .gridlines i, html.js .gridlines.is-in i { transform: none; }

/* Overlay global de grilla (tecla G) */
.grid-overlay { position: fixed; inset: 0; z-index: 45; opacity: 0; transition: opacity .3s; }
.grid-overlay i { border-inline-color: rgba(141, 1, 0, .35); }
.grid-overlay.is-on { opacity: 1; }

/* ---------- Tipografía base ---------- */
.micro {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.micro-dim, .dim { color: var(--mute); }
.link-u { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease); }
.link-u:hover { background-size: 0 1px; background-position: 100% 100%; }

.rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .25; } }

/* Líneas con máscara (reveal tipográfico) */
.ln { display: block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.ln > span { display: block; }
html.js .ln > span { transform: translateY(110%); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 90ms); }
html.js .is-in .ln > span, html.js .ln.is-in > span { transform: none; }

html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
html.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- Placeholders (reemplazables) ---------- */
.ph {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--a, #222);
  container-type: size;
}
.ph::before { content: ""; position: absolute; inset: 0; }
.ph::after,
.media:has(> .film)::after, .slide:has(> .film)::after, .cine__frame::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; z-index: 1;
  background-image: var(--noise); opacity: .2; mix-blend-mode: overlay;
}
.media:has(> .film)::after, .slide:has(> .film)::after, .cine__frame::after { animation: grain .5s steps(4) infinite; opacity: .28; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -5%); } 75% { transform: translate(-2%, -2%); } }

.ph__tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  font: 500 9px/1 var(--f); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference; opacity: .55; white-space: nowrap;
}
.ph__big, .ph__mark { position: absolute; z-index: 2; font-style: normal; font-weight: 600; color: var(--b); line-height: .8; letter-spacing: -.07em; }
.ph__big { right: 7%; bottom: 7%; font-size: 34cqmin; }
.ph__mark { left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 52cqmin; white-space: nowrap; }

.m-portrait::before {
  background:
    radial-gradient(ellipse 17% 14% at 50% 37%, var(--b) 0 52%, transparent 74%),
    radial-gradient(ellipse 11% 12% at 50% 52%, var(--b) 0 40%, transparent 72%),
    radial-gradient(ellipse 44% 30% at 50% 98%, var(--b) 0 58%, transparent 76%),
    linear-gradient(100deg, rgba(255, 255, 255, .09), transparent 55%);
  filter: blur(5px);
}
.m-page::before {
  background:
    linear-gradient(var(--b), var(--b)) 10% 10% / 48% 46% no-repeat,
    linear-gradient(var(--b), var(--b)) 10% 64% / 34% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 10% 67% / 30% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 10% 70% / 33% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 10% 73% / 22% 1px no-repeat;
}
.m-page--spread::before {
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 50% 100% no-repeat,
    linear-gradient(var(--b), var(--b)) 58% 12% / 10% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 91% 16% / 26% 30% no-repeat,
    linear-gradient(var(--b), var(--b)) 58% 78% / 30% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 58% 81% / 34% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 58% 84% / 28% 1px no-repeat,
    linear-gradient(90deg, transparent 49.7%, rgba(0, 0, 0, .18) 50%, transparent 50.6%);
}
.m-mark::before {
  background:
    linear-gradient(var(--b), var(--b)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--b), var(--b)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--b), var(--b)) 8% 8% / 1px 84% no-repeat,
    linear-gradient(var(--b), var(--b)) 92% 8% / 1px 84% no-repeat;
  opacity: .18;
}
.m-horizon { background: linear-gradient(180deg, var(--a) 0%, color-mix(in srgb, var(--a) 72%, #fff) 57%, var(--b) 57.4%, color-mix(in srgb, var(--b) 80%, #000) 100%); }
.m-horizon::before { background: radial-gradient(ellipse 13% 5% at 60% 57.5%, color-mix(in srgb, var(--b) 60%, #000) 0 55%, transparent 72%); filter: blur(1px); }
.m-slab::before {
  background: linear-gradient(118deg, transparent 34%, var(--b) 43%, color-mix(in srgb, var(--b) 35%, #fff) 50%, var(--b) 57%, transparent 66%);
  filter: blur(4px); transform: scale(1.1);
}
.m-motion .shape {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 34cqmin; height: 34cqmin; margin: -17cqmin 0 0 -17cqmin;
  background: var(--b);
  animation: morph 7s var(--ease-io) infinite;
}
.m-motion .shape--2 { width: 62cqmin; height: 62cqmin; margin: -31cqmin 0 0 -31cqmin; background: none; border: 1px solid var(--b); animation-delay: -3.5s; animation-direction: reverse; }
@keyframes morph {
  0%   { border-radius: 0; transform: rotate(0) scale(1); }
  25%  { border-radius: 50%; transform: rotate(90deg) scale(.7); }
  50%  { border-radius: 50% 0; transform: rotate(180deg) scale(1.1, .45); }
  75%  { border-radius: 0 50%; transform: rotate(270deg) scale(.5, 1.2); }
  100% { border-radius: 0; transform: rotate(360deg) scale(1); }
}

/* Contenedor de medios: cualquier img / video / canvas / .ph llena el recuadro */
.media { position: relative; overflow: hidden; background: #161615; }
.media > img, .media > video, .media > canvas, .media > .ph,
.slide > img, .slide > video, .slide > canvas, .slide > .ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media > img, .media > video, .media > canvas, .media > .ph { transition: transform 1.4s var(--ease), filter 1.4s var(--ease); }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-54 { aspect-ratio: 5 / 4; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-34 { aspect-ratio: 3 / 4; }

/* blur → focus (puntual: hero + retrato) */
html.js .focus > * { filter: blur(22px); transform: scale(1.08); }
html.js .focus.is-in > * { filter: none; transform: none; }

.hud {
  position: absolute; z-index: 4;
  font: 500 11px/1.2 var(--f); letter-spacing: .02em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--paper);
}
.hud--tl { left: 12px; top: 12px; }
.hud--tr { right: 12px; top: 12px; text-align: right; }
.hud--bl { left: 12px; bottom: 12px; }
.hud--br { right: 12px; bottom: 12px; text-align: right; }
.slide .hud--bl { bottom: 24px; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  align-items: baseline;
  padding: 18px var(--pad) 0;
  color: var(--paper);
  mix-blend-mode: difference;
  font-size: 12px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase;
}
.nav__brand { grid-column: 1 / 3; font-size: 15px; font-weight: 600; letter-spacing: -.02em; text-transform: none; }
.nav__brand sup { font-size: .55em; }
.nav__logo { display: block; height: 16px; width: auto; fill: currentColor; }
.nav__role { grid-column: 3 / 6; }
.nav__clock { grid-column: 6 / 8; font-variant-numeric: tabular-nums; }
.nav__clock .micro-dim { color: inherit; opacity: .55; }
.nav__links { grid-column: 8 / 11; display: flex; gap: 1.6em; }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__status { grid-column: 11 / 13; justify-self: end; }
.nav__status .rec { background: currentColor; }

/* =====================================================================
   00 · HERO
   ===================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: max(100svh, 640px);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--nav-h) + 8px) 0 22px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  --gl: rgba(242, 240, 235, .08);
}
/* Foto de fondo + capa oscura (contraste del texto) */
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 10, .62) 0%, rgba(11, 11, 10, .48) 45%, rgba(11, 11, 10, .78) 100%); }
html.js .hero__bg img { transform: scale(1.06); filter: blur(8px); transition: transform 2.2s var(--ease), filter 1.6s var(--ease); }
html.js .hero.is-ready .hero__bg img { transform: none; filter: none; }
.hero__top { position: relative; z-index: 1; color: rgba(242, 240, 235, .6); }
.hero__t1 { grid-column: 1 / 3; color: var(--paper); }
.hero__t2 { grid-column: 3 / 5; }
.hero__t3 { grid-column: 6 / 8; }
.hero__t4 { grid-column: 10 / 13; text-align: right; }

.hero__stage { position: relative; align-content: center; align-items: start; }
.hero__frame {
  grid-column: 6 / 8; grid-row: 1;
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5; overflow: hidden; background: #1b1a18;
}
html.js .hero__frame { filter: blur(20px); transform: scale(.94); transition: filter 1.6s var(--ease), transform 1.6s var(--ease); }
html.js .hero.is-ready .hero__frame { filter: none; transform: none; }

.slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; clip-path: inset(100% 0 0 0); }
.slide.is-on, .slide.is-prev { visibility: visible; }
.slide.is-prev { clip-path: inset(0); z-index: 1; }
.slide.is-on { clip-path: inset(0); z-index: 2; transition: clip-path .75s var(--ease-io); }
.slide > * { transition: transform 1.2s var(--ease); }
.slide:not(.is-on) > .ph, .slide:not(.is-on) > canvas { transform: scale(1.12); }

.hero__lbl { grid-row: 1; position: relative; z-index: 1; }
.hero__lbl--l { grid-column: 1 / 3; }
.hero__lbl--r { grid-column: 11 / 13; text-align: right; }
.hero__cap { color: var(--mute); display: inline-block; margin-top: 4px; }

.hero__word {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
  color: var(--paper);
}
.wl {
  grid-area: 1 / 1;
  font-size: clamp(60px, 15.4vw, 330px);
  font-weight: 600; line-height: .8; letter-spacing: -.07em;
  white-space: nowrap; text-transform: uppercase;
  padding-right: .07em; /* compensa el tracking negativo en el centrado */
}
.wl > span { display: inline-block; }
html.js .wl > span { opacity: 0; filter: blur(16px); transform: translateY(.16em); }
html.js .wl.is-in > span {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .45s var(--ease), filter .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 30ms);
}
html.js .wl.is-out > span { opacity: 0; filter: blur(18px); transform: translateY(-.06em) scaleX(1.08); transition: opacity .5s, filter .5s, transform .6s var(--ease); }

.hero__scan {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 1px;
  background: var(--paper); opacity: 0; pointer-events: none;
  transform: translateX(var(--x, -10px)); transition: opacity .3s;
}
.hero__scan-lbl { position: absolute; top: calc(var(--nav-h) + 40px); left: 8px; white-space: nowrap; font: 500 10px/1 var(--f); letter-spacing: .03em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hero.is-hover .hero__scan { opacity: .45; }

.hero__foot { position: relative; z-index: 3; align-items: end; row-gap: 20px; }
.hero__lbl .handle { text-transform: none; letter-spacing: 0; }
.hero__idx { grid-column: 1 / 7; display: flex; gap: clamp(12px, 1.6vw, 28px); flex-wrap: wrap; }
.hero__idx button { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: rgba(242, 240, 235, .6); transition: color .3s; display: inline-flex; gap: 6px; align-items: baseline; }
.hero__idx button span { font-size: 9px; font-variant-numeric: tabular-nums; }
.hero__idx button::before { content: ""; width: 6px; height: 6px; background: var(--accent); align-self: center; transform: scale(0); transition: transform .35s var(--ease); }
.hero__idx button[aria-pressed="true"], .hero__idx button:hover { color: var(--paper); }
.hero__idx button[aria-pressed="true"]::before { transform: scale(1); }
.hero__scroll { grid-column: 11 / 13; justify-self: end; }

/* =====================================================================
   Section header (índice editorial)
   ===================================================================== */
.sh { align-items: baseline; padding-top: 10px; position: relative; }
.sh::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.sh > span { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .015em; font-variant-numeric: tabular-nums; }
.sh__n { grid-column: 1 / 3; }
.sh__t { grid-column: 3 / 6; }
.sh__d { grid-column: 7 / 10; color: var(--mute); }
.sh__c { grid-column: 11 / 13; justify-self: end; color: var(--mute); }

/* =====================================================================
   01 · WORK
   ===================================================================== */
.work { padding-top: clamp(64px, 9vw, 160px); }
.work__title {
  padding-inline: calc(var(--pad) - .04em);
  margin: clamp(24px, 3vw, 56px) 0 clamp(40px, 5vw, 90px);
  font-size: clamp(96px, 23vw, 480px); font-weight: 600; line-height: .78; letter-spacing: -.075em;
}
.work__title sup { font-size: .085em; letter-spacing: 0; font-weight: 500; vertical-align: top; margin-left: .3em; position: relative; top: .5em; }

.proj { position: relative; margin-bottom: clamp(96px, 13vw, 220px); }
.proj__link { position: relative; display: block; }
.proj__link:hover .media > img, .proj__link:hover .media > video, .proj__link:hover .media > canvas, .proj__link:hover .media > .ph { transform: scale(1.035); }
.proj__name { font-size: clamp(34px, 5.4vw, 104px); font-weight: 600; line-height: .86; letter-spacing: -.06em; margin: 6px 0 8px; }
.proj__meta { display: flex; flex-direction: column; align-items: flex-start; }

.proj__view {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: var(--paper); color: var(--ink);
  padding: 7px 10px 6px; font-size: 12px; font-weight: 500; letter-spacing: -.005em;
  clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease);
}
.proj__link:hover .proj__view, .proj__link:focus-visible .proj__view { clip-path: inset(0); }
@media (hover: none) { .proj__view { clip-path: inset(0); } }

/* P01 — full bleed */
.media--full { height: max(100svh, 540px); }
.proj__over { position: absolute; inset: 0; z-index: 2; align-content: end; align-items: end; padding-bottom: var(--pad); color: var(--paper); background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .38)); }
.proj__over > .micro:first-child { grid-column: 1 / 3; }
.proj__over .proj__name { grid-column: 3 / 8; margin: 0; }
.proj__over > .micro:nth-of-type(2) { grid-column: 8 / 11; }
.proj__over .proj__yr { grid-column: 11 / 13; justify-self: end; }
.proj__over .proj__view { top: calc(var(--pad) + var(--nav-h)); right: var(--pad); }

/* P02 — 50/50 */
.proj--split { align-items: stretch; }
.proj--split .proj__a { grid-column: 1 / 7; }
.proj__b { grid-column: 7 / 13; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.proj__b .media { width: calc(66.66% + var(--gut) / 3); align-self: flex-end; }

/* P03 — editorial */
.proj--edit { align-items: end; }
.proj__ghost {
  position: absolute; z-index: 0; top: -.28em; left: calc(var(--pad) - .05em);
  font-size: clamp(200px, 40vw, 820px); font-weight: 600; line-height: .8; letter-spacing: -.08em;
  color: var(--ghost); pointer-events: none; user-select: none;
}
.proj--edit .proj__meta { grid-column: 1 / 4; grid-row: 1; position: relative; z-index: 1; padding-bottom: 4px; }
.proj--edit .proj__a { grid-column: 4 / 10; grid-row: 1; position: relative; z-index: 1; margin-top: 16vw; }
.proj--edit .proj__name { font-size: clamp(30px, 3.4vw, 64px); }
.proj__detail { grid-column: 9 / 12; grid-row: 1; z-index: 2; margin-bottom: -12vw; }

/* P04 — cine */
.proj--cine { margin-inline: 0; }
.cine { position: relative; height: max(100svh, 560px); background: #070707; display: grid; place-items: center; overflow: hidden; color: var(--paper); isolation: isolate; }
.cine__frame { position: relative; width: 100%; aspect-ratio: 2.39 / 1; overflow: hidden; }
.cine__frame > canvas, .cine__frame > video, .cine__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.proj__link:hover .cine__frame > * { transform: scale(1.03); }
.cine__title {
  position: absolute; z-index: 3; left: calc(var(--pad) - .05em);
  top: calc(50% + 50vw / 2.39 - .44em);
  font-size: clamp(72px, 16vw, 340px); font-weight: 600; line-height: .8; letter-spacing: -.07em;
  color: var(--paper); mix-blend-mode: difference; pointer-events: none;
}
.cine .hud--tl, .cine .hud--bl { left: var(--pad); }
.cine .hud--tr, .cine .hud--br { right: var(--pad); }
.cine .hud--tl, .cine .hud--tr { top: calc(var(--nav-h) + 12px); }
.cine .hud--bl, .cine .hud--br { bottom: var(--pad); }
.proj--cine .proj__view { top: auto; bottom: calc(var(--pad) + 28px); right: var(--pad); }

/* P05 / P06 — Web Design: navegador + teléfono; la página se recorre al pasar el mouse */
.proj--web { align-items: end; }
.web__meta { grid-column: 1 / 4; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: 4px; }
.web__meta .proj__name { margin: 6px 0 8px; }
.web__yr { color: var(--mute); }
.web__site { margin-top: 14px; }
.web__desk { grid-column: 4 / 12; grid-row: 1; }
.web__mob { grid-column: 11 / 13; grid-row: 1; position: relative; z-index: 2; margin-bottom: -5vw; }
.proj--web-r .web__meta { grid-column: 10 / 13; }
.proj--web-r .web__desk { grid-column: 2 / 10; }
.proj--web-r .web__mob { grid-column: 1 / 3; }

.browser { background: #fff; border: 1px solid var(--line); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #CFCAC0; }
.browser__bar span { margin: 0 auto; transform: translateX(-14px); font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--mute); }
.web__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.web__view .web__shot {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none;
  transform: translateY(0);
  transition: top 1.4s var(--ease), transform 1.4s var(--ease);
}
.proj--web:hover .web__view .web__shot,
.proj--web:focus-within .web__view .web__shot {
  top: 100%; transform: translateY(-100%);
  transition: top 9s cubic-bezier(.45, 0, .55, 1), transform 9s cubic-bezier(.45, 0, .55, 1);
}
.proj--web:hover .web__view--mob .web__shot { transition-duration: 12s; }
.phone { padding: 6px; background: var(--ink); border-radius: 18px; }
.web__view--mob { aspect-ratio: 9 / 19; border-radius: 12px; }
.web__cap { display: block; margin-top: 10px; color: var(--mute); }
.web__desk .proj__view { top: 42px; }
@keyframes webscroll { 0%, 10% { top: 0; transform: translateY(0); } 90%, 100% { top: 100%; transform: translateY(-100%); } }
@media (hover: none) {
  .proj--web.is-in .web__view .web__shot { animation: webscroll 14s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .proj--web.is-in .web__view--mob .web__shot { animation-duration: 20s; }
}
.case__site { align-self: flex-start; }

/* P06 — Diseños web: carrusel horizontal */
.webs { align-items: start; margin-bottom: clamp(96px, 13vw, 220px); }
.webs__meta { grid-column: 1 / 4; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 30px; }
.webs__meta .proj__name { margin: 6px 0 8px; }
.webs__lede { margin-top: 18px; max-width: 28ch; font-size: 14px; line-height: 1.4; color: var(--mute); }
.webs__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.webs__btn { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); font-size: 16px; transition: background .3s, color .3s, opacity .3s; }
.webs__btn:hover:not(.is-off) { background: var(--ink); color: var(--paper); }
.webs__btn.is-off { opacity: .3; cursor: default; }
.webs__count { min-width: 52px; text-align: center; }
.webs__track {
  grid-column: 4 / 13; display: flex; gap: calc(var(--gut) * 2);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: 8px;
}
.webs__track::-webkit-scrollbar { display: none; }
.webs__track.is-drag { scroll-snap-type: none; user-select: none; }
.webs__track:focus-visible { outline-offset: 6px; }
.webs .proj { margin-bottom: 0; }
.webslide { position: relative; flex: 0 0 100%; scroll-snap-align: start; padding-right: 14%; }
.webslide .web__mob { position: absolute; right: 0; top: 16%; width: 18%; margin: 0; }
.webslide__cap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.webslide__name { font-size: clamp(22px, 2vw, 34px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.webslide__type { color: var(--mute); }

/* P04 — cine 16:9 (videos de marca: no se recorta el texto) */
.proj--cine-169 .cine__frame { aspect-ratio: 16 / 9; width: min(100%, calc(74svh * 16 / 9)); }
.proj--cine-169 .cine__title { top: auto; bottom: calc(var(--pad) - .06em); font-size: clamp(40px, 6vw, 112px); mix-blend-mode: normal; color: var(--paper); }
.proj--cine-169 .hud--bl { display: none; }
/* Film reproduciéndose en la home: el reproductor ocupa el cuadro (por encima del grano) y no escala con el hover */
.cine__frame > .case__yt, .cine__frame > video.is-film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; z-index: 2; }
.proj.is-playing .cine__frame > * { transform: none !important; }

/* Botón de sonido (videos con audio: data-sound). Mismo lenguaje que el HUD. */
.snd {
  position: absolute; z-index: 6; right: var(--pad); top: calc(var(--nav-h) + 12px);
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1.2 var(--f); letter-spacing: .02em; text-transform: uppercase; color: var(--paper);
}
.snd__st { opacity: .55; transition: opacity .3s; }
.snd__dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: background .3s, box-shadow .3s; }
.snd[aria-pressed="true"] .snd__st { opacity: 1; }
.snd[aria-pressed="true"] .snd__dot { background: var(--accent); box-shadow: none; }
.snd:hover .snd__st { opacity: 1; }
.case__media > video.is-film { object-fit: contain; background: #000; }
.case__media > .case__yt { border: 0; background: #000; } /* film completo (YouTube) en la vista del proyecto */

/* P05 — serie fotográfica escalonada */
.ratio-23 { aspect-ratio: 2 / 3; }
.proj--series { align-items: start; }
.series__a { grid-column: 1 / 6; grid-row: 1 / 3; }
.series__meta { grid-column: 7 / 13; grid-row: 1; padding-top: 2vw; }
.series__b { grid-column: 7 / 10; grid-row: 2; margin-top: 4vw; }
.series__c { grid-column: 10 / 13; grid-row: 2; margin-top: 14vw; }

/* Galería dentro de la vista de proyecto */
.case__gallery { grid-column: 5 / 13; grid-row: 1; columns: 2; column-gap: var(--gut); }
.case__gallery > img, .case__gallery > video { display: block; width: 100%; height: auto; margin-bottom: var(--gut); break-inside: avoid; background: var(--paper-2); }
.case__gallery > img { cursor: zoom-in; transition: opacity .3s; }
.case__gallery > img:hover { opacity: .88; }
.case__gallery > video { background: #000; }
.case__group { column-span: all; display: flex; align-items: baseline; gap: .5em; margin: 20px 0 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: clamp(24px, 2.4vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.case__group:first-child { margin-top: 0; }



/* =====================================================================
   02 · ÍNDICE
   ===================================================================== */
.idx { position: relative; height: 280svh; }
.idx__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding-top: var(--nav-h); overflow: hidden; }
.idx__body { flex: 1; align-items: center; padding-bottom: var(--pad); }
.idx__words { grid-column: 1 / 9; }
.idx__words button {
  display: block; text-align: left;
  font-size: min(14vw, 22svh); font-weight: 600; line-height: .84; letter-spacing: -.07em;
  color: var(--ghost); transition: color .45s var(--ease);
  position: relative;
}
.idx__words button.is-on { color: var(--ink); }
.idx__words button::after {
  content: attr(data-n); position: absolute; left: calc(100% + 14px); top: .3em;
  font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--mute);
  opacity: 0; transition: opacity .3s;
}
.idx__words button.is-on::after { opacity: 1; }
.idx__panel { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 18px; }
.idx__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #161615; }
.idx__txt { position: relative; min-height: 8.5em; }
.idx__item { display: none; }
.idx__item.is-on { display: block; animation: fadeUp .6s var(--ease) both; }
.idx__item p { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.28; letter-spacing: -.015em; margin-bottom: 14px; max-width: 34ch; }
/* Servicios de cada disciplina: lista a dos columnas con filetes (mismo lenguaje que Experience / Archive) */
.idx__svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.idx__svc li { padding: 7px 0 6px; border-top: 1px solid var(--line); font-size: clamp(13px, .95vw, 15px); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.idx__item.is-on .idx__svc li { animation: fadeUp .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
.idx__svc li:nth-child(2) { --i: 1; } .idx__svc li:nth-child(3) { --i: 2; } .idx__svc li:nth-child(4) { --i: 3; }
.idx__svc li:nth-child(5) { --i: 4; } .idx__svc li:nth-child(6) { --i: 5; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   03 · ABOUT
   ===================================================================== */
.about { padding-top: clamp(90px, 12vw, 200px); }
.about__grid { margin-top: clamp(28px, 3vw, 56px); align-items: start; }
.about__portrait { grid-column: 1 / 5; }
.about__portrait figcaption { margin-top: 10px; color: var(--mute); }
.about__portrait .media > * { transition: filter 1.8s var(--ease), transform 1.8s var(--ease); }
.about__main { grid-column: 6 / 13; }
.about__title { font-size: clamp(42px, 6.4vw, 128px); font-weight: 600; line-height: .88; letter-spacing: -.06em; }
.about__txt { margin-top: clamp(28px, 3.4vw, 60px); max-width: 38ch; font-size: clamp(17px, 1.4vw, 23px); line-height: 1.3; letter-spacing: -.015em; }
.about__data { margin-top: clamp(40px, 5vw, 90px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px var(--gut); }
.about__data > div { border-top: 1px solid var(--line); padding-top: 10px; }
.about__data dt { color: var(--mute); }
.about__data dd { margin-top: 6px; font-size: 14px; line-height: 1.35; }

.exp { margin-top: clamp(90px, 11vw, 190px); padding-bottom: clamp(90px, 11vw, 190px); align-items: start; }
.exp__h { grid-column: 1 / 3; padding-top: 22px; }
.exp__list { grid-column: 3 / 13; border-bottom: 1px solid var(--line); }
.exp__list li {
  display: grid; grid-template-columns: 2fr 4fr 2.4fr 1.6fr; gap: var(--gut); align-items: baseline;
  padding: 20px 0 18px; border-top: 1px solid var(--line);
  font-size: clamp(16px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1;
}
.exp__y { font-size: 12px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--mute); }
.exp__c { color: var(--mute); }
.exp__l { justify-self: end; font-size: 12px; text-transform: uppercase; letter-spacing: .01em; color: var(--mute); }
.exp__r { transition: transform .5s var(--ease); }
.exp__list li:hover .exp__r { transform: translateX(10px); }

/* =====================================================================
   04 · APPROACH
   ===================================================================== */
.appr { padding: clamp(90px, 12vw, 200px) 0; }
.appr__list { margin-top: clamp(32px, 4vw, 72px); border-bottom: 1px solid var(--line); }
.appr__row { position: relative; align-items: start; padding-block: clamp(14px, 1.4vw, 24px); }
.appr__row::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.appr__n { grid-column: 1 / 3; font-size: clamp(80px, 12vw, 250px); font-weight: 600; line-height: .76; letter-spacing: -.07em; }
.appr__w { grid-column: 3 / 9; font-size: clamp(56px, 8.4vw, 176px); font-weight: 600; line-height: .8; letter-spacing: -.07em; color: var(--ghost); transition: color .9s var(--ease); }
.appr__row.is-in .appr__w { color: var(--ink); }
.appr__p { grid-column: 9 / 13; padding-top: 6px; max-width: 30ch; font-size: 15px; line-height: 1.35; }

/* =====================================================================
   05 · ARCHIVE
   ===================================================================== */
.arch { position: relative; padding-bottom: clamp(100px, 13vw, 220px); }
.arch__head { margin-top: clamp(32px, 4vw, 64px); padding-bottom: 10px; color: var(--mute); }
.arch__row { align-items: baseline; padding-block: 16px 14px; position: relative; font-size: 14px; transition: opacity .35s; }
.arch__row::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.arch__list li:last-child .arch__row::after { content: ""; position: absolute; bottom: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.arch__head > :nth-child(1), .arch__row > :nth-child(1) { grid-column: 1 / 2; font-variant-numeric: tabular-nums; }
.arch__head > :nth-child(2), .arch__row > :nth-child(2) { grid-column: 2 / 7; }
.arch__head > :nth-child(3), .arch__row > :nth-child(3) { grid-column: 7 / 9; }
.arch__head > :nth-child(4), .arch__row > :nth-child(4) { grid-column: 9 / 12; }
.arch__head > :nth-child(5), .arch__row > :nth-child(5) { grid-column: 12 / 13; justify-self: end; font-variant-numeric: tabular-nums; }
.arch__row > :not(.arch__p) { color: var(--mute); }
.arch__p { font-size: clamp(20px, 2vw, 34px); font-weight: 500; letter-spacing: -.035em; line-height: 1; transition: transform .5s var(--ease); }
.arch__list:hover .arch__row { opacity: .3; }
.arch__list .arch__row:hover, .arch__list .arch__row:focus-visible { opacity: 1; }
.arch__row:hover .arch__p { transform: translateX(12px); }
.arch__pv {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: clamp(180px, 17vw, 300px); aspect-ratio: 4 / 5; overflow: hidden;
  opacity: 0; transition: opacity .3s;
}
.arch__pv.is-on { opacity: 1; }
.arch__pv .ph { transition: transform .6s var(--ease); }

/* =====================================================================
   06 · CONTACT
   ===================================================================== */
.contact { position: relative; isolation: isolate; min-height: max(100svh, 680px); display: flex; flex-direction: column; background: var(--ink); color: var(--paper); padding: calc(var(--nav-h) + 8px) 0 clamp(28px, 3vw, 48px); overflow: hidden; --gl: rgba(242, 240, 235, .07); }
.contact .micro { position: relative; }
.contact__top > :first-child { grid-column: 1 / 4; color: rgba(242, 240, 235, .55); }
.contact__q { grid-column: 6 / 9; }
.contact__time { grid-column: 10 / 13; justify-self: end; }
.contact__time .micro-dim { color: rgba(242, 240, 235, .5); }
.contact__title { position: relative; margin-top: auto; padding-top: 12vh; padding-inline: calc(var(--pad) - .05em); font-size: clamp(52px, 9vw, 190px); font-weight: 600; line-height: .84; letter-spacing: -.065em; }
.contact__title .c2 { margin-left: calc(var(--col) + var(--gut)); }
.contact__bottom { position: relative; margin-top: clamp(40px, 5vw, 90px); align-items: end; row-gap: 28px; }
.contact__mail { grid-column: 1 / 7; font-size: clamp(26px, 3.4vw, 60px); font-weight: 500; letter-spacing: -.045em; line-height: 1; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 6px; transition: background-size .6s var(--ease); }
.contact__mail:hover { background-size: 100% 2px; }
.contact__cta {
  grid-column: 7 / 10; justify-self: start;
  display: inline-flex; gap: 22px; align-items: center;
  background: var(--paper); color: var(--ink);
  padding: 16px 18px; font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  transition: background .3s, color .3s;
}
.contact__cta span { transition: transform .45s var(--ease); }
.contact__cta:hover { background: var(--brand); color: var(--paper); }
.contact__cta:hover span { transform: translateX(6px); }
.contact__social { grid-column: 10 / 13; justify-self: end; text-align: right; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: 1.55; }
.contact__social a { opacity: .6; transition: opacity .3s; }
.contact__social a:hover { opacity: 1; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: rgba(242, 240, 235, .55); border-top: 1px solid rgba(242, 240, 235, .12); padding-block: 18px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .015em; row-gap: 8px; }
.foot > :nth-child(1) { grid-column: 1 / 5; color: var(--paper); }
.foot > :nth-child(2) { grid-column: 5 / 9; }
.foot > :nth-child(3) { grid-column: 9 / 11; }
.foot > :nth-child(4) { grid-column: 11 / 13; justify-self: end; }
.foot a:hover { color: var(--paper); }

/* =====================================================================
   CASE — entrada simulada al proyecto
   ===================================================================== */
.case { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: rgba(242, 240, 235, 0); transition: background .5s var(--ease), opacity .4s; }
.case[hidden] { display: none; }
.case.is-veil { background: rgba(242, 240, 235, 1); }
.case.is-leaving { opacity: 0; }
.case__media { position: relative; height: 64svh; overflow: hidden; background: #111; }
.case__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__body { padding-top: 28px; padding-bottom: 80px; row-gap: 32px; align-items: start; opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.case.is-open .case__body { opacity: 1; transform: none; }
.case__info { grid-column: 1 / 5; grid-row: 1; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.case__count { color: var(--mute); }
.case__title { font-size: clamp(44px, 5.4vw, 104px); font-weight: 600; line-height: .86; letter-spacing: -.06em; }
.case__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--gut); margin-top: 8px; }
.case__meta > div { border-top: 1px solid var(--line); padding-top: 10px; }
.case__meta dt { color: var(--mute); }
.case__meta dd { margin-top: 6px; font-size: 14px; line-height: 1.35; }
.case__sum { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.32; letter-spacing: -.01em; max-width: 36ch; }
/* Visor de imágenes */
.lb { position: fixed; inset: 0; z-index: 85; background: rgba(11, 11, 10, .96); color: var(--paper); }
.lb[hidden] { display: none; }
.lb__stage { position: absolute; inset: 60px 80px; display: grid; place-items: center; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fadeUp .4s var(--ease) both; }
.lb__btn { position: absolute; top: 50%; transform: translateY(-50%); padding: 18px; font-size: 26px; color: var(--paper); opacity: .7; transition: opacity .3s; }
.lb__btn:hover { opacity: 1; }
.lb__prev { left: 10px; }
.lb__next { right: 10px; }
.lb__count { position: absolute; left: var(--pad); top: 22px; color: rgba(242, 240, 235, .6); }
.lb__close { position: absolute; right: var(--pad); top: 20px; color: var(--paper); }
.case__nav { grid-column: 1 / 13; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 30px; }
.case__btn { font-size: 14px; font-weight: 500; }
.case__btn:hover { color: var(--accent); }
.case-fly { position: fixed; z-index: 70; overflow: hidden; pointer-events: none; background: #111; }
.case-fly > * { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; transform: none !important; }
html.lock, html.lock body { overflow: hidden; }

/* ---------- Cursor (solo desktop con puntero fino) ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--paper); mix-blend-mode: difference;
    opacity: 0; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), border-radius .35s;
  }
  .cursor.is-on { opacity: 1; }
  .cursor.is-link { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .cursor.is-lbl { width: 76px; height: 30px; margin: -15px 0 0 -38px; border-radius: 0; }
  .cursor__lbl { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px/1 var(--f); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
  .cursor.is-lbl .cursor__lbl { opacity: 1; }
}

/* =====================================================================
   Tablet
   ===================================================================== */
@media (max-width: 1024px) {
  .nav__clock { display: none; }
  .nav__role { grid-column: 3 / 7; }
  .nav__links { grid-column: 7 / 11; }
  .hero__frame { grid-column: 5 / 9; }
  .hero__lbl--l { grid-column: 1 / 3; }
  .hero__lbl--r { grid-column: 11 / 13; }
  .hero__idx { grid-column: 1 / 9; }
  .hero__scroll { display: none; }
  .about__data { grid-template-columns: repeat(2, 1fr); }
  .idx__words { grid-column: 1 / 8; }
  .idx__panel { grid-column: 8 / 13; }
}

/* =====================================================================
   Mobile — recompuesto, no comprimido
   ===================================================================== */
@media (max-width: 767px) {
  :root { --nav-h: 48px; --col: calc((100vw - 2 * var(--pad) - 5 * var(--gut)) / 6); }
  .g, .gridlines, .nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gridlines i:nth-child(n+7) { display: none; }

  .nav { padding-top: 14px; }
  .nav__brand { grid-column: 1 / 3; }
  .nav__role, .nav__clock, .nav__status { display: none; }
  .nav__links { grid-column: 3 / 7; justify-content: flex-end; gap: 1.2em; }

  /* Hero */
  .hero { min-height: 100svh; padding-bottom: 18px; }
  .hero__t1 { grid-column: 1 / 3; }
  .hero__t2 { grid-column: 3 / 5; }
  .hero__t3 { display: none; }
  .hero__t4 { grid-column: 5 / 7; }
  .hero__t4 br { display: none; }
  .hero__t4 { font-size: 0; } .hero__t4::before { content: "Diseño × Film"; font-size: 11px; }
  .hero__stage { row-gap: 10px; align-content: start; padding-top: 8vh; }
  .hero__lbl--l { grid-column: 1 / 4; grid-row: 1; text-align: left; }
  .hero__lbl--r { grid-column: 4 / 7; grid-row: 1; text-align: right; }
  .hero__frame { grid-column: 2 / 6; grid-row: 2; width: 78%; justify-self: center; }
  .wl { font-size: 19.5vw; }
  .hero__bg img { object-position: 24% 40%; }
  .hero__idx { grid-column: 1 / -1; justify-content: space-between; gap: 8px; }
  .hero__idx button span { display: none; }

  .sh__n { grid-column: 1 / 2; }
  .sh__t { grid-column: 2 / 5; }
  .sh__d { display: none; }
  .sh__c { grid-column: 5 / 7; }

  /* Work — proyectos verticales */
  .work__title { font-size: 30vw; }
  .media--full { height: auto; aspect-ratio: 4 / 5; }
  .proj__over { row-gap: 4px; }
  .proj__over > .micro:first-child { grid-column: 1 / 4; grid-row: 1; }
  .proj__over .proj__yr { grid-column: 4 / 7; grid-row: 1; }
  .proj__over .proj__name { grid-column: 1 / -1; grid-row: 2; }
  .proj__over > .micro:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; }
  .proj__over .proj__view { top: 12px; right: 12px; }
  .proj--split .proj__a { grid-column: 1 / -1; }
  .proj__b { grid-column: 1 / -1; margin-top: 16px; gap: 20px; }
  .proj__ghost { font-size: 62vw; top: -.2em; }
  .proj--edit .proj__a { grid-column: 1 / -1; grid-row: 1; margin-top: 34vw; }
  .proj--edit .proj__meta { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; }
  .proj__detail { grid-column: 4 / 7; grid-row: 3; margin: 24px 0 0; }
  .cine { height: auto; aspect-ratio: 4 / 5; }
  .cine__title { font-size: 21vw; top: calc(50% + 50vw / 2.39 - .44em); }
  .cine .hud--tl, .cine .hud--tr { top: 14px; }
  .cine .hud--tr { display: none; }
  .web__meta, .proj--web-r .web__meta { grid-column: 1 / -1; grid-row: 1; margin-bottom: 18px; }
  .web__desk, .proj--web-r .web__desk { grid-column: 1 / -1; grid-row: 2; }
  .web__mob { grid-column: 4 / 7; grid-row: 3; margin: -22vw 0 0; }
  .proj--web-r .web__mob { grid-column: 1 / 4; }
  .browser__bar span { display: none; }
  .webs__meta { grid-column: 1 / -1; padding-top: 0; }
  .webs__ctrl { margin-top: 18px; }
  .webs__track { grid-column: 1 / -1; margin-top: 24px; }
  .webslide { padding-right: 18%; }
  .webslide .web__mob { width: 27%; top: 22%; }
  .proj--cine-169 .cine__frame { width: 100%; }
  .snd { top: auto; bottom: calc(var(--pad) + 22px); right: 12px; } /* arriba del "2025 — 01:46", lejos del menú */
  .proj--cine-169 .cine__title { font-size: 12vw; }
  .series__a { grid-column: 1 / -1; grid-row: 1; }
  .series__meta { grid-column: 1 / -1; grid-row: 2; padding-top: 16px; }
  .series__b { grid-column: 1 / 4; grid-row: 3; margin-top: 20px; }
  .series__c { grid-column: 4 / 7; grid-row: 3; margin-top: 18vw; }
  .case__gallery { grid-column: 1 / -1; grid-row: 2; columns: 1; }
  .case__info { grid-column: 1 / -1; position: static; }
  .lb__stage { inset: 60px 8px 80px; }
  .lb__btn { top: auto; bottom: 14px; transform: none; }

  /* Índice */
  .idx { height: 240svh; }
  .idx__body { align-content: start; padding-top: 22px; row-gap: 20px; }
  .idx__words { grid-column: 1 / -1; }
  .idx__words button { font-size: 16.5vw; }
  .idx__panel { grid-column: 1 / -1; gap: 12px; }
  .idx__media { aspect-ratio: auto; height: min(56.25vw, 26svh); }
  .idx__txt { min-height: 7.5em; }
  .idx__item p { font-size: 15px; margin-bottom: 10px; }
  /* Mobile: servicios en línea (sin filetes) para que el panel fijo entre en pantalla */
  .idx__svc { display: flex; flex-wrap: wrap; border: 0; margin-bottom: 12px; }
  .idx__svc li { border: 0; padding: 0; font-size: 13px; color: var(--mute); }
  .idx__svc li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--ghost); }

  /* About */
  .about__portrait { grid-column: 1 / 5; }
  .about__main { grid-column: 1 / -1; margin-top: 36px; }
  .about__title { font-size: 12.5vw; }
  .about__data { grid-template-columns: 1fr 1fr; }
  .exp__h { grid-column: 1 / -1; padding: 0 0 12px; }
  .exp__list { grid-column: 1 / -1; }
  .exp__list li { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .exp__r { grid-column: 1 / -1; grid-row: 1; }
  .exp__y { grid-row: 2; }
  .exp__c { grid-row: 2; justify-self: end; font-size: 14px; }
  .exp__l { display: none; }

  /* Approach */
  .appr__n { grid-column: 1 / 2; font-size: 17vw; }
  .appr__w { grid-column: 2 / -1; font-size: 17vw; padding-left: 8px; }
  .appr__p { grid-column: 2 / -1; padding-left: 8px; margin-top: 10px; font-size: 14px; }

  /* Archive */
  .arch__head { display: none; }
  .arch__row { row-gap: 4px; }
  .arch__row > :nth-child(1) { grid-column: 1 / 2; }
  .arch__row > :nth-child(2) { grid-column: 2 / 6; }
  .arch__row > :nth-child(3) { grid-column: 2 / 6; grid-row: 2; font-size: 12px; }
  .arch__row > :nth-child(4) { display: none; }
  .arch__row > :nth-child(5) { grid-column: 6 / 7; }
  .arch__pv { display: none; }

  /* Contact */
  .contact { min-height: 92svh; }
  .contact__top > :first-child { grid-column: 1 / 4; }
  .contact__q { display: none; }
  .contact__time { grid-column: 4 / 7; }
  .contact__title { font-size: 13.5vw; }
  .contact__title .c2 { margin-left: 0; }
  .contact__mail { grid-column: 1 / -1; font-size: 8.4vw; }
  .contact__cta { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  .contact__social { grid-column: 1 / -1; justify-self: start; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 18px; }

  .foot > * { grid-column: 1 / -1 !important; justify-self: start !important; }

  .case__nav { grid-column: 1 / -1; }
  .case__meta { grid-template-columns: 1fr 1fr; }
  .case__media { height: 56svh; }
}

/* =====================================================================
   Reduced motion — solo lo intrusivo (loops, blur, scrub, parallax)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-motion .shape, .rec,
  .media:has(> .film)::after, .slide:has(> .film)::after, .cine__frame::after { animation: none; }
  html.js .wl > span, html.js .wl.is-out > span { filter: none; }
  html.js .focus > *, html.js .hero__frame { filter: none; transform: none; }
  .proj--web.is-in .web__view .web__shot { animation: none; }
  html.js .hero__bg img { filter: none; transform: none; }
}

/* =====================================================================
   01 · WORK — Galerías Diseño / Film / Fotografía (todo bajo .wg)
   Un proyecto a la vez por galería; los proyectos de una misma galería
   comparten las celdas de la grilla (display: contents) y se cruzan.
   ===================================================================== */
.wg { position: relative; margin-bottom: clamp(96px, 11vw, 200px); }
.wg__stage { position: relative; margin-top: clamp(22px, 2.6vw, 44px); grid-template-rows: auto 1fr; align-items: start; }
.wg__slide { display: contents; }

.wg__media { grid-column: 5 / 13; grid-row: 1 / 3; position: relative; display: block; }
.wg__info { grid-column: 1 / 5; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding-right: var(--gut); }
.wg__nav { grid-column: 1 / 5; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 32px; }

/* Solo se ve el proyecto actual (y el saliente durante la transición) */
.wg__slide:not(.is-on):not(.is-out) > * { visibility: hidden; }
.wg__slide.is-on > * { z-index: 2; }
.wg__slide.is-out > * { z-index: 1; }

/* Encuadre: esquinas finas alrededor de la imagen protagonista */
.wg__media::after {
  content: ""; position: absolute; inset: -10px; z-index: 3; pointer-events: none; color: var(--ink);
  --l: 14px;
  background:
    linear-gradient(currentColor, currentColor) top left / var(--l) 1px,
    linear-gradient(currentColor, currentColor) top left / 1px var(--l),
    linear-gradient(currentColor, currentColor) top right / var(--l) 1px,
    linear-gradient(currentColor, currentColor) top right / 1px var(--l),
    linear-gradient(currentColor, currentColor) bottom left / var(--l) 1px,
    linear-gradient(currentColor, currentColor) bottom left / 1px var(--l),
    linear-gradient(currentColor, currentColor) bottom right / var(--l) 1px,
    linear-gradient(currentColor, currentColor) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}

/* Medios */
.wg__frame { aspect-ratio: 3 / 2; }
.wg--film .wg__frame { aspect-ratio: 16 / 9; background: #000; }
.wg__comp { position: relative; display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: var(--gut); aspect-ratio: 4 / 3; }
.wg__comp > .media:first-child { grid-row: 1 / 3; }
.wg__comp > .media { height: 100%; }
.wg__soon { position: absolute; left: 12px; bottom: 12px; z-index: 2; color: var(--paper); }
.wg__hud { right: 14px; bottom: 12px; }
.wg__media .media > img, .wg__media .media > video { transition: transform 1.4s var(--ease), filter 1.4s var(--ease), scale 1.4s var(--ease); }

/* Texto */
.wg__num { display: block; overflow: hidden; margin: 0 0 clamp(18px, 2.4vw, 40px) -.05em; padding-bottom: .04em; font-size: clamp(96px, 11.5vw, 220px); font-weight: 600; line-height: .8; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.wg__num > span { display: block; }
.wg__cat { color: var(--mute); }
.wg__name { margin: 8px 0 14px; font-size: clamp(32px, 3.6vw, 64px); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.wg__desc { max-width: 34ch; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.4; color: var(--mute); }
.wg__cta { margin-top: 22px; font-size: 14px; font-weight: 500; }
.wg__cta--off { color: var(--mute); }

/* Navegación: flechas + contador (mismo control que Diseños web) + miniaturas */
.wg__ctrl { display: flex; align-items: center; gap: 14px; }
.wg__thumbs { display: flex; gap: 8px; }
.wg__thumb { position: relative; width: 64px; aspect-ratio: 4 / 3; overflow: hidden; background: #161615; opacity: .45; filter: grayscale(1) blur(1.5px); transition: opacity .5s var(--ease), filter .5s var(--ease); }
.wg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wg__thumb:hover, .wg__thumb.is-on { opacity: 1; filter: none; }
.wg__thumb.is-on { outline: 1px solid currentColor; outline-offset: 3px; }

/* Transiciones */
html.js .wg__slide > .wg__media > .media,
html.js .wg__slide > .wg__media > .wg__comp { clip-path: inset(0 0 0 100%); }
/* Solo los proyectos en espera: sin el :not(), esta regla pesa más que .is-on / .is-out y deja oculto al que entra */
html.js .wg[data-dir="-1"] .wg__slide:not(.is-on):not(.is-out) > .wg__media > .media,
html.js .wg[data-dir="-1"] .wg__slide:not(.is-on):not(.is-out) > .wg__media > .wg__comp { clip-path: inset(0 100% 0 0); }
html.js .wg__slide.is-on > .wg__media > .media,
html.js .wg__slide.is-on > .wg__media > .wg__comp { clip-path: inset(0); transition: clip-path .95s var(--ease-io); }
html.js .wg__slide.is-out > .wg__media > .media,
html.js .wg__slide.is-out > .wg__media > .wg__comp { clip-path: inset(0); }
html.js .wg__slide .wg__media .media > img, html.js .wg__slide .wg__media .media > video { scale: 1.08; }
html.js .wg__slide.is-on .wg__media .media > img, html.js .wg__slide.is-on .wg__media .media > video { scale: 1; }

html.js .wg__slide > .wg__info > * { opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .5s var(--ease); }
html.js .wg__slide.is-on > .wg__info > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(.18s + var(--k, 0) * 70ms); }
.wg__info > :nth-child(2) { --k: 1; }
.wg__info > :nth-child(3) { --k: 2; }
.wg__info > :nth-child(4) { --k: 3; }
.wg__info > :nth-child(5) { --k: 4; }
html.js .wg__slide > .wg__info > .wg__num { opacity: 1; transform: none; }
html.js .wg__num > span { transform: translateY(105%); transition: transform .5s var(--ease-io); }
html.js .wg__slide.is-on .wg__num > span { transform: none; transition: transform .9s var(--ease) .08s; }
html.js .wg__slide.is-out .wg__num > span { transform: translateY(-105%); }

/* Film en reproducción dentro de la galería */
.wg__frame > .case__yt, .wg__frame > video.is-film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; z-index: 2; scale: 1; }
.wg__slide.is-playing .proj__view, .wg__slide.is-playing .wg__hud { display: none; }

/* Film: bloque oscuro, imagen a la izquierda */
.wg--film { padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 120px); background: var(--ink); color: var(--paper); }
.wg--film .sh::before { background: rgba(242, 240, 235, .2); }
.wg--film .sh__d, .wg--film .sh__c, .wg--film .wg__cat, .wg--film .wg__desc, .wg--film .wg__cta--off { color: rgba(242, 240, 235, .62); }
.wg--film .wg__media { grid-column: 1 / 9; }
.wg--film .wg__media::after { color: var(--paper); }
.wg--film .wg__info, .wg--film .wg__nav { grid-column: 9 / 13; padding-left: var(--gut); padding-right: 0; }
.wg--film .webs__btn { border-color: rgba(242, 240, 235, .24); }
.wg--film .webs__btn:hover { background: var(--paper); color: var(--ink); }

.wgs__fallback { list-style: none; padding-block: 24px; row-gap: 8px; }
.wgs__fallback li { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .wg__media { grid-column: 6 / 13; }
  .wg__info, .wg__nav { grid-column: 1 / 6; }
  .wg--film .wg__media { grid-column: 1 / 8; }
  .wg--film .wg__info, .wg--film .wg__nav { grid-column: 8 / 13; }
  .wg__num { font-size: clamp(80px, 12vw, 140px); }
}
@media (max-width: 767px) {
  .wg__stage { grid-template-rows: auto auto auto; }
  .wg__media, .wg--film .wg__media { grid-column: 1 / -1; grid-row: 1; }
  .wg__info, .wg--film .wg__info { grid-column: 1 / -1; grid-row: 2; padding: 26px 0 0; }
  .wg__nav, .wg--film .wg__nav { grid-column: 1 / -1; grid-row: 3; padding: 24px 0 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .wg__media::after { inset: -6px; --l: 10px; }
  .wg__num { margin-bottom: 14px; font-size: 26vw; }
  .wg__name { font-size: clamp(30px, 9vw, 44px); }
  .wg__desc { font-size: 15px; }
  .wg__comp { aspect-ratio: 4 / 5; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
  .wg__comp > .media:first-child { grid-column: 1 / 3; grid-row: 1; }
  .wg__thumbs { gap: 6px; }
  .wg__thumb { width: 44px; }
  .wg .webs__btn { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .wg__slide > .wg__media > .media, html.js .wg__slide > .wg__media > .wg__comp,
  html.js .wg__slide > .wg__info > *, html.js .wg__num > span,
  html.js .wg__slide .wg__media .media > img, html.js .wg__slide .wg__media .media > video { transition: none !important; scale: 1; }
}

/* Diseños web sobre negro (mismo tratamiento que la galería Film) */
.webs { padding-block: clamp(56px, 7vw, 120px); background: var(--ink); color: var(--paper); }
.webs .webs__lede, .webs .webslide__type { color: rgba(242, 240, 235, .62); }
.webs .webs__btn { border-color: rgba(242, 240, 235, .24); }
.webs .webs__btn:hover:not(.is-off) { background: var(--paper); color: var(--ink); }
.webs .browser { border-color: rgba(242, 240, 235, .14); }
.webs .phone { background: #1E1D1B; box-shadow: 0 0 0 1px rgba(242, 240, 235, .16); }

/* Galería con un solo proyecto: sin flechas, contador ni miniaturas */
.wg--single .wg__nav { display: none; }

/* Menú: "Sobre mí" en una sola línea */
.nav__links a { white-space: nowrap; }

/* Sobre mí: párrafos separados */
.about__txt p + p { margin-top: .75em; }

/* Mobile: si no entran, las miniaturas pasan a otra línea (galerías de 4+ proyectos) */
@media (max-width: 767px) {
  .wg__nav { flex-wrap: wrap; }
  .wg__thumbs { flex-wrap: wrap; }
}

/* =====================================================================
   04 · PROCESO — punto REC que recorre los pasos con el scroll
   ===================================================================== */
.appr { position: relative; }
.appr__track { position: absolute; z-index: 2; width: 1px; background: var(--line); pointer-events: none; }
.appr__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.appr__dot {
  position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(141, 1, 0, .16);
}
.appr__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); animation: rec 1.6s steps(2, jump-none) infinite; }
.appr__track.is-static .appr__fill { transform: none; }
.appr__track.is-static .appr__dot { display: none; }

/* Pasos: en gris hasta que llega el punto; quedan encendidos al pasar */
.appr.has-track .appr__row .appr__n,
.appr.has-track .appr__row .appr__w { color: var(--ghost); transition: color .6s var(--ease); }
.appr.has-track .appr__row .appr__p { opacity: .35; transition: opacity .6s var(--ease); }
.appr.has-track .appr__row.is-on .appr__n,
.appr.has-track .appr__row.is-on .appr__w { color: var(--ink); }
.appr.has-track .appr__row.is-on .appr__p { opacity: 1; }

/* =====================================================================
   ACENTO DE IDENTIDAD — rojo nach.dsg (--brand)
   Solo como texto/línea sobre fondos claros: sobre --ink no llega a 2:1,
   por eso Film, Web Design y Contacto quedan neutros (en Contacto el rojo es fondo del CTA).
   ===================================================================== */
/* Numeración de secciones */
.sh__n { color: var(--brand); }
.wg--film .sh__n { color: inherit; }

/* Galerías: miniatura activa y flechas */
.wg:not(.wg--film) .wg__thumb.is-on { outline-color: var(--brand); }
.wg:not(.wg--film) .webs__btn:hover { background: var(--brand); border-color: var(--brand); color: var(--paper); }

/* Enlaces: respuesta al hover */
.wg:not(.wg--film) .wg__cta:hover, .idx .link-u:hover, .case .link-u:hover { color: var(--brand); }

/* Foco de teclado: rojo sobre claro (8.6:1); sobre fondos oscuros, crema (17.9:1 sobre --ink).
   El nav usa mix-blend difference: el crema se invierte y contrasta sobre cualquier sección. */
.hero :focus-visible, .nav :focus-visible, .wg--film :focus-visible,
.webs :focus-visible, .contact :focus-visible, .foot :focus-visible { outline-color: var(--paper); }