/* ==========================================================================
   VANOH Studio — Estilos del sitio
   Depende de tokens.css. Mobile-first: 4 → 8 → 12 columnas.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--vn-bg);
  color: var(--vn-text);
  font-family: var(--vn-font);
  font-size: var(--vn-fs-body);
  line-height: var(--vn-lh-body);
  font-weight: var(--vn-fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
::selection { background: var(--vn-butter); color: var(--vn-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: fixed; top: var(--vn-space-2); left: var(--vn-space-2); z-index: 200;
  padding: var(--vn-space-1) var(--vn-space-2); background: var(--vn-ink); color: var(--vn-paper);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Tipografía ---------- */
.t-display, .t-h1, .t-h2 { font-weight: var(--vn-fw-light); letter-spacing: var(--vn-ls-tight); text-transform: uppercase; }
.t-display { font-size: var(--vn-fs-display); line-height: var(--vn-lh-display); }
.t-h1 { font-size: var(--vn-fs-h1); line-height: var(--vn-lh-h1); }
.t-h2 { font-size: var(--vn-fs-h2); line-height: var(--vn-lh-h2); }
.t-h3 { font-size: var(--vn-fs-h3); line-height: var(--vn-lh-h3); font-weight: var(--vn-fw-medium); letter-spacing: var(--vn-ls-snug); }
.t-lead { font-size: var(--vn-fs-lead); line-height: var(--vn-lh-lead); }
.t-caption { font-size: var(--vn-fs-caption); line-height: var(--vn-lh-caption); font-weight: var(--vn-fw-medium); }
.t-overline {
  font-size: var(--vn-fs-overline); line-height: 1.25; font-weight: var(--vn-fw-medium);
  letter-spacing: var(--vn-ls-wide); text-transform: uppercase;
}
/* La máscara deja aire arriba para acentos en mayúsculas (Ñ, Í, Á). */
/* SplitText envuelve cada línea en una máscara con overflow: clip.
   Le damos aire arriba para que no recorte acentos en mayúsculas (Ñ, Í, Á). */
/* En HK Guise la tilde de la Ñ sube ~0.23em sobre la caja de línea: 0.35em deja margen. */
[data-split] > [class$="-mask"] { padding-block: 0.35em 0.08em; margin-block: -0.35em -0.08em; }

/* ---------- Layout ---------- */
.container { padding-inline: var(--vn-margin); }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--vn-cols), minmax(0, 1fr));
  column-gap: var(--vn-gutter);
}
.grid > * { grid-column: 1 / -1; }
.section { padding-block: var(--vn-section-y); }
/* Secciones a pantalla completa: contenido centrado verticalmente */
.screen {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--vn-header-h) + var(--vn-space-3)) var(--vn-space-6);
}
.screen > * { width: 100%; }

/* Filete de 1px (se dibuja con JS) */
.line {
  display: block; height: 1px; width: 100%;
  background: currentColor; opacity: 0.22; transform-origin: left center;
}

/* ---------- Aviso sin JavaScript ---------- */
.noscript {
  position: relative; z-index: 200; margin: 0; padding: var(--vn-space-2) var(--vn-margin);
  background: var(--vn-butter); color: var(--vn-ink); font-size: var(--vn-fs-caption);
}
.noscript a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cortina (saltos largos sin rebobinar animaciones) ---------- */
.curtain {
  position: fixed; inset: 0; z-index: calc(var(--vn-z-loader) - 1);
  background: var(--vn-ink); transform: scaleY(0); transform-origin: bottom; pointer-events: none;
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: var(--vn-z-loader);
  display: grid; place-items: center;
  background: var(--vn-ink); color: var(--vn-paper);
}
.loader__logo { width: auto; height: clamp(9rem, 26vh, 15rem); }
.loader__count {
  position: absolute; right: var(--vn-margin); bottom: var(--vn-margin);
  font-size: var(--vn-fs-overline); letter-spacing: var(--vn-ls-wide); font-variant-numeric: tabular-nums;
}
.loader__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--vn-paper); transform: scaleX(0); transform-origin: left;
}
html:not(.js) .loader { display: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: var(--vn-z-header);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--vn-space-3) var(--vn-margin);
  color: var(--vn-paper); mix-blend-mode: difference;
  transition: transform var(--vn-dur-base) var(--vn-ease-out);
}
.header.is-hidden { transform: translateY(-110%); }
.header__brand img { width: auto; height: 2.6rem; }
.header__nav { display: none; gap: var(--vn-space-4); }
.header__nav a, .header__toggle {
  font-size: var(--vn-fs-overline); font-weight: var(--vn-fw-medium);
  letter-spacing: var(--vn-ls-wide); text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--vn-dur-base) var(--vn-ease-out);
}
.header__nav a:hover, .header__nav a.is-active { background-size: 100% 1px; }
@media (min-width: 768px) {
  .header__nav { display: flex; }
  .header__toggle { display: none; }
}

.menu {
  position: fixed; inset: 0; z-index: calc(var(--vn-z-header) - 1);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--vn-space-8);
  padding: var(--vn-space-20) var(--vn-margin) var(--vn-space-4);
  background: var(--vn-ink); color: var(--vn-paper);
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: baseline; gap: var(--vn-space-2);
  padding-block: var(--vn-space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: clamp(2.5rem, 12vw, 4rem); font-weight: var(--vn-fw-light); line-height: 1.05;
  text-transform: uppercase; letter-spacing: var(--vn-ls-tight);
}
.menu nav a span { font-size: var(--vn-fs-overline); letter-spacing: var(--vn-ls-wide); }
.menu__foot { font-size: var(--vn-fs-overline); text-transform: uppercase; letter-spacing: var(--vn-ls-wide); opacity: 0.6; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--vn-ink); color: var(--vn-paper); }
.hero__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero.is-live { height: 440vh; }
.hero.is-live .hero__stage { position: sticky; top: 0; }

/* Salida con parallax (versión dron): una pantalla más de recorrido, que Estudio usa para
   subir por encima del hero fijo. */
.hero[data-exit="parallax"].is-live { height: 540vh; }
/* Versión dron: Estudio conserva su alto de una pantalla y suma 120px arriba y 120px abajo. */
.hero[data-exit="parallax"] + .studio {
  min-height: calc(100vh + 240px); min-height: calc(100svh + 240px);
  padding-top: calc(var(--vn-header-h) + var(--vn-space-3) + 120px);
  padding-bottom: calc(var(--vn-space-8) + 120px);
}
.hero[data-exit="parallax"].is-live + .studio {
  margin-top: -100vh; margin-top: -100svh;
  box-shadow: 0 -1.5rem 3rem rgba(0, 0, 0, 0.18);
}

.hero__scene { position: absolute; inset: 0; transform-origin: 50% 55%; }
.hero__canvas, .hero__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__canvas { opacity: 0; }
.hero.is-live .hero__canvas { opacity: 1; }
.hero.is-live .hero__fallback { visibility: hidden; }
.hero__veil { position: absolute; inset: 0; background: var(--vn-ink); opacity: 0.45; }

/* Niebla: nubes suaves que nacen en la puerta (≈47% alto) y terminan en el color piedra
   de la sección siguiente, para que el corte sea invisible. */
.hero__fog { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__mist {
  position: absolute; inset: -25%; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.93 0 0 0 0 0.91 1.9 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / cover;
  filter: blur(6px);
}
.hero__cloud {
  position: absolute; left: 50%; top: 47%;
  width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(240, 240, 236, 0.95), rgba(222, 223, 216, 0.6) 45%, rgba(222, 223, 216, 0) 72%);
  filter: blur(24px);
  animation: drift var(--d, 12s) var(--vn-ease-in-out) infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .hero__cloud { animation: none; } }
@keyframes drift { from { translate: -2vmax 1vmax; } to { translate: 2vmax -1vmax; } }
.hero__fog-solid { position: absolute; inset: 0; background: var(--vn-stone); opacity: 0; }

/* Logotipo "VA N OH" en piezas: los vanos miden ~0.98 × la altura de letra (manual). */
.hero__word {
  --h: min(10.5vw, 20vh);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero__l { display: block; width: auto; height: var(--h); will-change: transform; }
.hero__l--n, .hero__l--oh { margin-left: calc(var(--h) * 0.98); }
/* © alineado a la parte alta de las letras: su margen inferior completa la altura de letra */
.hero__l--c { height: calc(var(--h) * 0.336); margin: 0 0 calc(var(--h) * 0.664) calc(var(--h) * 0.18); }

.hero__meta, .hero__caption, .hero__scroll { position: absolute; }
.hero__meta--bl { left: var(--vn-margin); bottom: var(--vn-space-4); }
.hero__caption { right: var(--vn-margin); bottom: var(--vn-space-4); text-align: right; opacity: 0.9; }
.hero__scroll {
  left: 50%; bottom: var(--vn-space-4); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--vn-space-1);
}
.hero__scroll i { display: block; width: 1px; height: 3rem; background: currentColor; opacity: 0.5; transform-origin: top; animation: scrollcue 2.2s var(--vn-ease-in-out) infinite; }
@keyframes scrollcue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 767px) {
  .hero__scroll, .hero__caption { display: none; }
  .hero__meta--bl { bottom: var(--vn-space-3); }
}

/* ---------- Hero, versión dron: marca VANOH / STUDIO / 2025© ---------- */
.hero__brand { position: absolute; inset: 0; pointer-events: none; }
/* Sombra inferior para que la marca y la ficha se lean sobre la foto */
.hero__brand::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(24, 24, 24, 0.6), rgba(24, 24, 24, 0));
}
.brand { margin: 0; font-weight: inherit; }
.brand__logo { position: relative; display: block; aspect-ratio: 1600 / 1048; }
/* Cada renglón es una franja de la misma imagen: --t y --h en % de la altura del logotipo */
.brand__row {
  position: absolute; left: 0; width: 100%; overflow: hidden;
  top: calc(var(--t) * 1%); height: calc(var(--h) * 1%);
}
.brand__row img {
  position: absolute; left: 0; width: 100%; height: auto;
  top: calc(var(--t) / var(--h) * -100%);
}
.brand__tag { display: block; letter-spacing: var(--vn-ls-wide); }
/* Línea descriptiva abajo a la izquierda, alineada con la ficha del proyecto */
.brand__tag--center { position: absolute; left: var(--vn-margin); bottom: var(--vn-space-6); margin: 0; }
.brand--corner { position: absolute; left: var(--vn-margin); bottom: var(--vn-space-6); width: clamp(10rem, 20vw, 22rem); }
.brand--corner .brand__tag { margin-top: var(--vn-space-2); line-height: var(--vn-lh-caption); opacity: 0.9; }
/* Ficha del proyecto: mismo tamaño que el pie de foto de la versión actual */
.hero__sheet { position: absolute; right: var(--vn-margin); bottom: var(--vn-space-6); margin: 0; text-align: right; opacity: 0.9; }
/* Sin animación (reduced motion / sin JS): solo la marca del centro */
.hero:not(.is-live) .brand--corner { display: none; }
@media (max-width: 767px) {
  .brand--corner { width: 44vw; bottom: var(--vn-space-4); }
  .brand__tag--center { bottom: var(--vn-space-4); max-width: 50vw; }
  .hero__sheet { bottom: var(--vn-space-4); font-size: var(--vn-fs-overline); }
}

/* ---------- Hero, versión "proceso": seis etapas con scroll ---------- */
/* Más recorrido de scroll: cada etapa necesita su propio tramo para leerse. */
.hero--proceso.is-live { height: 1100vh; }
.proceso { display: none; }
.hero--proceso.is-live .proceso {
  display: block; position: absolute; inset: 0; pointer-events: none; visibility: hidden;
}
/* Sombra inferior: el texto blanco se lee igual sobre el boceto que sobre la foto nocturna. */
.proceso__shade {
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgba(24, 24, 24, 0.82), rgba(24, 24, 24, 0.45) 45%, rgba(24, 24, 24, 0));
}
/* Sombra superior: el header blanco se lee sobre el boceto y la maqueta claros. */
.proceso::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%;
  background: linear-gradient(to bottom, rgba(24, 24, 24, 0.55), rgba(24, 24, 24, 0));
}
.proceso__panel {
  position: absolute; left: var(--vn-margin); right: var(--vn-margin); bottom: var(--vn-space-6);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--vn-space-4);
}
.proceso__count { display: flex; align-items: baseline; gap: var(--vn-space-1); margin-bottom: var(--vn-space-3); opacity: 0.85; }
.proceso__count b { font-weight: var(--vn-fw-medium); }
.proceso__steps { position: relative; display: grid; }
/* Las seis etapas ocupan la misma celda: solo la activa es visible. */
.proceso__step {
  grid-area: 1 / 1; max-width: 34rem;
  opacity: 0; transform: translateY(1.25rem);
  transition: opacity 0.5s var(--vn-ease-in-out), transform 0.7s var(--vn-ease-in-out);
}
.proceso__step.is-active { opacity: 1; transform: none; transition-delay: 0.12s; }
.proceso__step h2 {
  font-size: clamp(2rem, 1.3rem + 3vw, 4.25rem); line-height: 1; letter-spacing: var(--vn-ls-tight);
  font-weight: var(--vn-fw-light); margin: 0 0 var(--vn-space-2);
}
.proceso__step p { margin: 0; max-width: var(--vn-measure); color: var(--vn-text-muted-inverse); line-height: var(--vn-lh-lead); }
.proceso__dots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vn-space-1); text-align: right; }
.proceso__dots li { opacity: 0.4; transition: opacity 0.4s var(--vn-ease-in-out); white-space: nowrap; }
.proceso__dots li.is-done { opacity: 0.65; }
.proceso__dots li.is-active { opacity: 1; }
.proceso__dots li::before { content: attr(data-n) "  "; white-space: pre; }
.proceso__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.18); }
.proceso__bar i { display: block; height: 100%; background: var(--vn-paper); transform: scaleX(0); transform-origin: left; }
@media (max-width: 767px) {
  .proceso__panel { grid-template-columns: 1fr; bottom: var(--vn-space-4); }
  .proceso__dots { display: none; }
}

/* ---------- Estudio ---------- */
.studio { background: var(--vn-bg); padding-bottom: var(--vn-space-8); }
/* Estudio ocupa todo el alto: título arriba, texto al centro, datos abajo */
.studio > .grid { row-gap: var(--vn-space-6); }
/* Celular: espacio bajo los datos de Estudio para que "Alcance" llegue al centro de la
   pantalla antes de que Servicios suba encima (el parallax empieza al asomar Servicios). */
@media (max-width: 767px) {
  .studio, .hero[data-exit="parallax"] + .studio { padding-bottom: calc(var(--vn-space-8) + 45vh); padding-bottom: calc(var(--vn-space-8) + 45svh); }
}
.studio__label { margin-bottom: calc(var(--vn-space-6) * -1 + var(--vn-space-2)); }
@media (min-width: 1280px) {
  /* etiqueta y título comparten fila, así que las 3 filas se reparten el alto */
  .studio > .grid { flex: 1; align-content: space-between; }
  .studio__label { margin-bottom: 0; }
}
.studio__label { padding-top: 0.6em; }
.studio__title { font-size: min(var(--vn-fs-h2), 8vh); }
.studio__body { display: grid; gap: var(--vn-space-3); max-width: 60ch; }
.studio__quote { margin: 0; max-width: 22ch; align-self: start; }
.studio__quote .line { margin-bottom: var(--vn-space-2); }
.studio__quote p {
  font-size: var(--vn-fs-h3); line-height: 1.3; font-weight: var(--vn-fw-light);
  letter-spacing: var(--vn-ls-snug); opacity: 0.75;
}
.studio__facts { display: grid; gap: var(--vn-space-4); }
.studio__facts li { display: grid; gap: var(--vn-space-1); }
.studio__facts .line { margin-bottom: var(--vn-space-2); }
.studio__facts strong { font-size: var(--vn-fs-h3); font-weight: var(--vn-fw-regular); letter-spacing: var(--vn-ls-snug); }
@media (min-width: 768px) {
  .studio__facts { grid-template-columns: repeat(3, 1fr); column-gap: var(--vn-gutter); }
  .studio__body { grid-column: 3 / -1; }
}
@media (min-width: 1280px) {
  .studio__label { grid-column: 1 / 3; }
  .studio__title { grid-column: 3 / -1; }
  .studio__quote { grid-column: 1 / 4; }
  .studio__body { grid-column: 5 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--vn-space-8); max-width: none; }
}

/* ---------- Servicios ---------- */
/* Servicios en Pantone 7401 C para marcar el corte con Estudio (gris).
   Los 120px extra van como padding para que el aire también sea amarillo. */
/* Servicios va por encima de Estudio: el parallax hace que lo cubra como otra capa. */
.services { position: relative; z-index: 1; background: var(--vn-butter); padding-bottom: calc(var(--vn-space-6) + 120px); }
.studio { position: relative; z-index: 0; overflow: hidden; }
.services__index { margin-bottom: var(--vn-space-6); }
.services__index .line { opacity: 0.5; margin-bottom: var(--vn-space-2); }
.services__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--vn-space-4);
  margin-bottom: var(--vn-space-6);
}
.services__head h2 { white-space: nowrap; }
.services__mark { width: auto; height: clamp(2.5rem, 4.5vw, 4.5rem); flex: none; }
.services__list { display: grid; gap: var(--vn-space-6) var(--vn-gutter); }
.service { display: grid; align-content: start; gap: var(--vn-space-2); }
.service .line { margin-bottom: var(--vn-space-1); opacity: 0.5; }
.service h3 { max-width: 20ch; }
.service p { max-width: var(--vn-measure); opacity: 0.85; font-size: 0.9375rem; line-height: 1.5; }
.service__n { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .services__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__list { grid-template-columns: repeat(3, 1fr); row-gap: var(--vn-space-6); } }
@media (max-width: 767px) { .services__mark { display: none; } .services__head h2 { white-space: normal; } }

/* ---------- Marca ---------- */
.wordmark { background: var(--vn-paper); overflow: hidden; padding-top: var(--vn-space-8); }
.wordmark__rows {
  --h: 13.6vw; --open: 1;
  display: grid; gap: calc(var(--h) * 0.18); padding-inline: var(--vn-margin);
  user-select: none;
}
.wordmark__row { display: flex; }
.wordmark__row img { width: auto; height: var(--h); margin-left: calc(var(--h) * var(--gap, 0) * var(--open)); }
.wordmark__foot {
  display: flex; justify-content: space-between; gap: var(--vn-space-2); flex-wrap: wrap;
  padding-block: var(--vn-space-6) var(--vn-space-4);
}

/* ---------- Portafolio ---------- */
.portfolio { position: relative; }
.portfolio__index {
  position: fixed; left: 50%; bottom: var(--vn-space-3); z-index: var(--vn-z-header);
  display: flex; gap: 1px; transform: translate(-50%, 160%);
  background: rgba(255, 255, 255, 0.2);
  transition: transform var(--vn-dur-base) var(--vn-ease-out);
}
.portfolio__index.is-visible { transform: translate(-50%, 0); }
.portfolio__index a {
  padding: 0.7rem 1.1rem; background: var(--vn-ink); color: rgba(255, 255, 255, 0.55); white-space: nowrap;
  font-size: var(--vn-fs-overline); font-weight: var(--vn-fw-medium); letter-spacing: var(--vn-ls-wide); text-transform: uppercase;
  transition: color var(--vn-dur-fast);
}
.portfolio__index a span { margin-right: 0.4em; }
.portfolio__index a:hover, .portfolio__index a.is-active { color: var(--vn-paper); }

.chapter { background: var(--vn-ink); color: var(--vn-paper); }
.chapter__title {
  color: var(--vn-stone); font-size: clamp(2.5rem, 9.6vw, 13.75rem);
  margin-bottom: var(--vn-space-12); white-space: nowrap;
}
.chapter__text { display: grid; gap: var(--vn-space-3); max-width: 62ch; font-size: var(--vn-fs-lead); line-height: var(--vn-lh-lead); color: var(--vn-fog); }
@media (min-width: 1024px) {
  .chapter__title { text-align: right; }
  .chapter__text { margin-left: 40%; }
}

.projects { background: var(--vn-bg); }
.project { padding-block: calc(var(--vn-section-y) * 0.7); }
.project + .project { padding-top: 0; }

.project__head {
  display: grid; grid-template-columns: auto 1fr; gap: var(--vn-space-1) var(--vn-space-3);
  align-items: baseline; margin-bottom: var(--vn-space-4);
}
.project__head .line { grid-column: 1 / -1; margin-bottom: var(--vn-space-2); opacity: 0.4; }
.project__num { font-size: var(--vn-fs-overline); font-weight: var(--vn-fw-medium); letter-spacing: var(--vn-ls-wide); font-variant-numeric: tabular-nums; }
.project__name {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1; font-weight: var(--vn-fw-light);
  letter-spacing: var(--vn-ls-tight); text-transform: uppercase;
}
.project__meta { grid-column: 2; font-size: var(--vn-fs-caption); line-height: var(--vn-lh-caption); font-weight: var(--vn-fw-medium); }
.project__ig { grid-column: 2; font-size: var(--vn-fs-overline); letter-spacing: var(--vn-ls-wide); text-transform: uppercase; }
.project__ig:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .project__head { grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2fr); }
  .project__meta, .project__ig { grid-column: auto; }
  .project__ig { justify-self: end; }
}

/* Foto (botón que abre el visor) */
.ph {
  position: relative; display: block; width: 100%; overflow: hidden;
  background: var(--vn-mist); cursor: zoom-in;
}
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vn-dur-slow) var(--vn-ease-out); }
.ph__inner { display: block; width: 100%; height: 100%; }
@media (hover: hover) { .ph:hover img { transform: scale(1.03); } }

.ph__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(24, 24, 24, 0.42); color: var(--vn-paper);
  font-size: var(--vn-fs-h3); font-weight: var(--vn-fw-light); letter-spacing: var(--vn-ls-snug); text-transform: uppercase;
  transition: background var(--vn-dur-base) var(--vn-ease-out);
}
.ph:hover .ph__more { background: rgba(24, 24, 24, 0.6); }
.media { display: grid; gap: var(--vn-gutter); }
.media__note { font-size: var(--vn-fs-caption); line-height: 1.55; font-weight: var(--vn-fw-medium); max-width: 32ch; }

/* split / split-rev */
@media (min-width: 1024px) {
  .project--split .media, .project--split-rev .media {
    grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
  }
  .project--split .media__main { grid-column: 1 / 9; grid-row: 1 / 3; }
  .project--split .media__note { grid-column: 10 / 13; grid-row: 1; }
  .project--split .media__side { grid-column: 10 / 13; grid-row: 2; align-self: end; }
  .project--split-rev .media__main { grid-column: 6 / 13; grid-row: 1 / 3; }
  .project--split-rev .media__note { grid-column: 1 / 5; grid-row: 1; }
  .project--split-rev .media__side { grid-column: 1 / 5; grid-row: 2; align-self: end; }
  .project--split-rev .media__main .ph { aspect-ratio: 4 / 4.2; }
}

/* wide */
.project--wide .media { margin-inline: calc(var(--vn-margin) * -1); }
.project--wide .ph { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) { .project--wide .ph { aspect-ratio: 21 / 9; } }

/* accent (mantequilla) */
.project--accent { background: var(--vn-butter); padding-block: calc(var(--vn-section-y) * 0.7); }
.project--accent + .project { padding-top: calc(var(--vn-section-y) * 0.7); }

/* Proyectos con fondo propio (theme en projects.js): se leen como un bloque aparte */
.project--band { padding-block: calc(var(--vn-section-y) * 0.7); }
.project--band + .project { padding-top: calc(var(--vn-section-y) * 0.7); }
.project--ink { background: var(--vn-ink); color: var(--vn-paper); }
.project--ink .ph { background: var(--vn-shadow); }
.project--ink .track__progress { background: rgba(255, 255, 255, 0.2); }
.project--ink .track__progress i { background: var(--vn-paper); }
.project--paper { background: var(--vn-paper); }
.project--accent .media__rest { display: grid; gap: var(--vn-gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project--accent .media__rest:has(> :only-child) { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .project--accent .media { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .project--accent .media__main { grid-column: 1 / 8; }
  .project--accent .media__rest { grid-column: 8 / 13; }
  .project--accent .media__rest:has(> :only-child) { grid-column: 9 / 13; }
}

/* mosaic */
.project--mosaic .media { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* En celular las horizontales del mosaico van a todo el ancho */
@media (max-width: 1023px) { .project--mosaic .ph--land { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .project--mosaic .media { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--vn-space-8); }
  .project--mosaic .media > :nth-child(1) { grid-column: 1 / 5; }
  .project--mosaic .media > :nth-child(2) { grid-column: 6 / 9; margin-top: var(--vn-space-20); }
  .project--mosaic .media > :nth-child(3) { grid-column: 10 / 13; margin-top: var(--vn-space-8); }
  .project--mosaic .media > :nth-child(4) { grid-column: 2 / 5; }
  .project--mosaic .media > :nth-child(5) { grid-column: 6 / 10; margin-top: var(--vn-space-12); }
  .project--mosaic .media > :nth-child(6) { grid-column: 10 / 13; margin-top: var(--vn-space-8); }
  /* Mosaicos con retícula propia (cells en projects.js) */
  .project--mosaic .media > [style*="--col"] { grid-column: var(--col); margin-top: var(--mt); }
}

/* track (scroll horizontal) */
.project--track { overflow: hidden; }
.track { margin-inline: calc(var(--vn-margin) * -1); }
.track__rail {
  display: flex; gap: var(--vn-gutter); padding-inline: var(--vn-margin);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.track__rail::-webkit-scrollbar { display: none; }
.track__rail .ph { flex: none; width: auto; height: 58vh; height: 58svh; scroll-snap-align: start; }
.track__rail .ph img { width: auto; height: 100%; }
.track__hint { display: flex; justify-content: space-between; gap: var(--vn-space-3); margin-top: var(--vn-space-3); }
/* Indicador de deslizar (solo celular; en escritorio el riel avanza solo con el scroll) */
.track { position: relative; }
.track__swipe { display: none; align-items: center; gap: 0.4em; margin-left: auto; transition: opacity var(--vn-dur-base) var(--vn-ease-out); }
.track__swipe i { font-style: normal; display: inline-block; animation: swipecue 1.6s var(--vn-ease-in-out) infinite; }
@keyframes swipecue { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.project--track:not(.is-pinned-track) .track__swipe { display: inline-flex; }
.project--track.is-swiped .track__swipe { opacity: 0; }
/* Sombra al borde derecho: la última foto "continúa" fuera de pantalla */
.project--track:not(.is-pinned-track) .track::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3.5rem; pointer-events: none;
  background: linear-gradient(to left, rgba(24, 24, 24, 0.28), rgba(24, 24, 24, 0));
  transition: opacity var(--vn-dur-base) var(--vn-ease-out);
}
.project--track.is-end .track::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .track__swipe i { animation: none; } }
.track__note { margin: 0; max-width: 70ch; text-transform: none; letter-spacing: normal; font-size: var(--vn-fs-caption); line-height: 1.45; font-weight: var(--vn-fw-medium); }
.track__progress { position: relative; flex: 1; max-width: 16rem; height: 1px; background: rgba(24, 24, 24, 0.2); align-self: center; margin-left: var(--vn-space-3); }
.track__progress i { position: absolute; inset: 0; background: var(--vn-ink); transform: scaleX(0); transform-origin: left; }
.track__rail .ph__inner { height: 100%; width: auto; }
.is-pinned-track {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; padding-block: calc(var(--vn-header-h) + var(--vn-space-1)) var(--vn-space-3);
}
.is-pinned-track .track__rail { overflow: visible; scroll-snap-type: none; width: max-content; }
.is-pinned-track .track__rail .ph { height: calc(100vh - 14rem); }
.is-pinned-track .project__head { margin-bottom: var(--vn-space-2); row-gap: 0; }
.is-pinned-track .project__head .line { margin-bottom: var(--vn-space-1); }
.is-pinned-track .project__name { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.is-pinned-track .track__hint { margin-top: var(--vn-space-2); }

/* panorama con letras */
.panorama { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--vn-ink); }
.panorama__media { position: absolute; inset: -12% 0; }
.panorama__media img { width: 100%; height: 100%; object-fit: cover; }
.panorama__shade {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(24, 24, 24, 0.45), rgba(24, 24, 24, 0) 70%);
}
.panorama__logo-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.panorama__logo { width: auto; height: min(56vh, 36vw); opacity: 0; }

/* ---------- Contacto ---------- */
.contact { position: relative; overflow: hidden; background: var(--vn-ink); color: var(--vn-paper); padding-top: var(--vn-space-12); padding-bottom: 0; }
.contact > :not(.contact__bg) { position: relative; }
/* Logotipo tono sobre tono, como el cierre del manual */
.contact__bg { position: absolute; top: 0; left: var(--vn-margin); width: calc(100% - var(--vn-margin) * 2); height: auto; opacity: 0.055; pointer-events: none; }
.contact__grid { display: grid; gap: var(--vn-space-8); padding-bottom: min(var(--vn-space-12), 6vh); flex: 1; align-content: center; }
.contact__lead { max-width: 12ch; }
/* 40% más chico que el original (22rem / 34vh) */
.contact__mark { width: min(100%, 13.2rem, 20.4vh); height: auto; margin-bottom: min(var(--vn-space-6), 4vh); }

.contact__list { display: grid; gap: 0.35rem; font-size: var(--vn-fs-contact); letter-spacing: 0.02em; margin-bottom: var(--vn-space-6); }
.contact__list div { display: grid; grid-template-columns: 5rem 1fr; }
.contact__list dt { opacity: 0.7; }
.contact__list a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--vn-dur-base) var(--vn-ease-out); }
.contact__list a:hover { background-size: 100% 1px; }
.contact__cta {
  display: inline-flex; align-items: center; gap: var(--vn-space-2);
  padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  font-size: var(--vn-fs-overline); font-weight: var(--vn-fw-medium); letter-spacing: var(--vn-ls-wide); text-transform: uppercase;
}
.contact__cta i { font-style: normal; transition: transform var(--vn-dur-base) var(--vn-ease-out); }
.contact__cta:hover i { transform: translateX(0.5rem); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vn-gutter); align-items: end; }
  .contact__lead { grid-column: 1 / 7; }
  .contact__card { grid-column: 8 / 13; }
}

.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--vn-space-1) var(--vn-space-4);
  padding-bottom: var(--vn-space-4);
  font-size: var(--vn-fs-overline); letter-spacing: var(--vn-ls-wide); text-transform: uppercase; color: var(--vn-fog);
}
/* Logotipo centrado en el pie: 40% más chico que el que iba en la tarjeta (22rem / 34vh) */
.footer .line { flex-basis: 100%; margin-bottom: var(--vn-space-2); }
.footer a:hover { color: var(--vn-paper); }
.menu__foot { display: flex; justify-content: space-between; gap: var(--vn-space-2); flex-wrap: wrap; }
.menu__foot p { margin: 0; }

/* ---------- Visor ---------- */
.viewer {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--vn-ink); color: var(--vn-paper);
}
.viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.viewer::backdrop { background: var(--vn-ink); }
.viewer__top {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--vn-space-4); align-items: baseline;
  padding: var(--vn-space-3) var(--vn-margin);
}
.viewer__title { font-size: var(--vn-fs-h3); font-weight: var(--vn-fw-light); text-transform: uppercase; letter-spacing: var(--vn-ls-snug); }
.viewer__close { font-size: var(--vn-fs-overline); letter-spacing: var(--vn-ls-wide); text-transform: uppercase; }
.viewer__figure {
  display: grid; grid-template-rows: 1fr; justify-items: center;
  min-height: 0; padding: 0 var(--vn-margin) var(--vn-space-3);
}
.viewer__img { min-height: 0; max-height: 100%; width: auto; object-fit: contain; }
.viewer__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  font-size: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(24, 24, 24, 0.5);
  transition: background var(--vn-dur-fast);
}
.viewer__nav:hover { background: var(--vn-paper); color: var(--vn-ink); }
.viewer__nav--prev { left: var(--vn-margin); }
.viewer__nav--next { right: var(--vn-margin); }

/* ---------- Cursor ---------- */
/* Punto general · anillo en enlaces · anillo + "expandir" en fotos.
   mix-blend-mode: difference lo mantiene visible sobre piedra, negro y fotos. */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor * { cursor: none !important; }
  .cursor {
    position: fixed; top: 0; left: 0; z-index: 1000; width: 0; height: 0;
    display: block; pointer-events: none; color: var(--vn-paper); mix-blend-mode: difference;
    opacity: 0; transition: opacity 300ms var(--vn-ease-out);
  }
  .cursor.is-visible { opacity: 1; }
  .cursor__dot, .cursor__ring, .cursor__icon { position: absolute; top: 0; left: 0; translate: -50% -50%; }
  .cursor__dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    transition: scale 400ms var(--vn-ease-out);
  }
  .cursor__ring {
    width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid currentColor;
    scale: 0.12; opacity: 0;
    transition: scale 500ms var(--vn-ease-out), opacity 300ms var(--vn-ease-out);
  }
  .cursor__icon {
    width: 1rem; height: 1rem; scale: 0.4; opacity: 0;
    transition: scale 500ms var(--vn-ease-out), opacity 300ms var(--vn-ease-out);
  }
  /* Enlaces y botones: anillo pequeño */
  .cursor.is-link .cursor__dot { scale: 0; }
  .cursor.is-link .cursor__ring { scale: 0.6; opacity: 1; }
  /* Fotos: anillo completo con flechas de ampliar */
  .cursor.is-zoom .cursor__dot { scale: 0; }
  .cursor.is-zoom .cursor__ring { scale: 1; opacity: 1; }
  .cursor.is-zoom .cursor__icon { scale: 1; opacity: 1; }
  .cursor.is-down .cursor__ring { scale: 0.85; transition-duration: 150ms; }
  .cursor.is-down:not(.is-link):not(.is-zoom) .cursor__dot { scale: 0.6; }
}

/* ---------- Barra de scroll ----------
   Sustituye la nativa: línea de 2px que se invierte sobre fondos claros y oscuros. */
.scrollbar {
  position: fixed; top: 0; right: 0; bottom: 0; width: 14px;
  z-index: calc(var(--vn-z-header) + 1);
  mix-blend-mode: difference; opacity: 0;
  transition: opacity var(--vn-dur-base) var(--vn-ease-out);
}
.scrollbar::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 5px; width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.scrollbar__thumb {
  position: absolute; top: 0; right: 4px; width: 2px;
  background: var(--vn-paper); cursor: grab; touch-action: none;
  transition: width var(--vn-dur-fast) var(--vn-ease-out), right var(--vn-dur-fast) var(--vn-ease-out);
}
.scrollbar.is-visible, .scrollbar:hover, .scrollbar.is-dragging { opacity: 1; }
.scrollbar:hover .scrollbar__thumb, .scrollbar.is-dragging .scrollbar__thumb { width: 4px; right: 3px; }
.scrollbar.is-dragging .scrollbar__thumb { cursor: grabbing; }
.scrollbar.is-dragging ~ *, html:has(.scrollbar.is-dragging) { user-select: none; }
@media (hover: none) { .scrollbar { pointer-events: none; } }