/* ============================================================
   369 ARQUITECTOS — styles.css
   Sistema editorial: lienzo lino cálido, bandas oliva oscuro,
   serif gigante con interlineado 0.80, líneas de 1px, radio 0.
   Fuentes auto-hospedadas (sin CDN): Playfair Display (rol
   Lausanne-300), Bodoni Moda (rol cardinalfruit, sólo hero),
   Inter 500 (rol Metropolis, párrafos).
   ============================================================ */

/* ---------- Fuentes ---------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../assets/fonts/PlayfairDisplay-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../assets/fonts/PlayfairDisplay-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: block;
  src: url("../assets/fonts/PlayfairDisplay-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: block;
  src: url("../assets/fonts/PlayfairDisplay-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../assets/fonts/BodoniModa-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../assets/fonts/BodoniModa-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: block;
  src: url("../assets/fonts/Inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: block;
  src: url("../assets/fonts/Inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* Colores — siete neutros, ningún color cromático */
  --color-warm-linen: #f2f0ed;
  --color-light-mist: #eeeeee;
  --color-soft-stone: #c1bfbc;
  --color-warm-taupe: #978f84;
  --color-dark-olive: #41443e;
  --color-near-black: #050505;
  --color-pure-black: #000000;

  /* Superficies */
  --surface-warm-linen-canvas: var(--color-warm-linen);
  --surface-light-mist-layer: var(--color-light-mist);
  --surface-soft-stone-panel: var(--color-soft-stone);
  --surface-dark-olive-band: var(--color-dark-olive);
  --surface-near-black-floor: var(--color-near-black);

  /* Tipografía — familias */
  --font-lausanne-300: "Playfair Display", "Times New Roman", Times, serif;
  --font-cardinalfruit-regular: "Bodoni Moda", "Playfair Display", "Times New Roman", serif;
  --font-metropolis: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Tipografía — escala */
  --text-caption: 12px;      --leading-caption: 1.2;
  --text-body: 14px;         --leading-body: 1.14;
  --text-subheading: 20px;   --leading-subheading: 1;
  --text-heading-sm: 23px;   --leading-heading-sm: 1;
  --text-heading: 30px;      --leading-heading: 1;
  --text-heading-lg: 75px;   --leading-heading-lg: 0.8;
  --text-display: 93px;      --leading-display: 0.8;
  --text-display-xl: 185px;  --leading-display-xl: 0.8;
  --text-mega: 260px;        --leading-mega: 1;

  /* Escala fluida (colapsa en pantallas chicas, tope = token) */
  --fs-heading-lg: clamp(44px, 5.2vw, var(--text-heading-lg));
  --fs-display: clamp(52px, 6.5vw, var(--text-display));
  --fs-display-xl: clamp(40px, 11.5vw, var(--text-display-xl));

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Espaciado */
  --spacing-5: 5px;   --spacing-6: 6px;   --spacing-22: 22px;  --spacing-30: 30px;
  --spacing-35: 35px; --spacing-36: 36px; --spacing-38: 38px;  --spacing-39: 39px;
  --spacing-89: 89px; --spacing-130: 130px; --spacing-173: 173px;

  /* Layout */
  --section-gap: 89px;
  --card-padding: 38px;
  --element-gap: 35px;
  --pad-edge: clamp(18px, 2.7vw, var(--spacing-39));       /* esquinas: logo, menú, etiquetas */
  --pad-section: clamp(20px, 12vw, var(--spacing-173));     /* contenido de sección */
  --pad-block: clamp(var(--spacing-89), 10vw, 150px);       /* respiración vertical */

  /* Radios — siempre 0 */
  --radius-tags: 0px; --radius-cards: 0px; --radius-images: 0px; --radius-inputs: 0px; --radius-buttons: 0px;

  /* Líneas de 1px según lienzo */
  --hair-on-light: var(--color-soft-stone);
  --hair-on-dark: rgba(238, 238, 238, 0.28);
}

@media (max-width: 860px) {
  :root { --pad-section: 22px; --fs-display-xl: 10.5vw; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-warm-linen-canvas); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-lausanne-300);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-pure-black);
  background: var(--surface-warm-linen-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; border-radius: var(--radius-images); }
video { height: auto; }                    /* el atributo height del HTML no manda: lo decide aspect-ratio */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
html:not(.has-cursor) button { cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; font-weight: var(--font-weight-regular); }
::selection { background: var(--color-dark-olive); color: var(--color-light-mist); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tipografía de rol ---------- */
.label {                                   /* caption 12px, mayúsculas, sin fondo */
  font-family: var(--font-lausanne-300);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lead {                                    /* párrafo en sans neutra (Metropolis → Inter) */
  font-family: var(--font-metropolis);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -0.004em;
  max-width: 34em;
  text-align: left;
}
.heading-lg { font-size: var(--fs-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: -0.01em; }
.display    { font-size: var(--fs-display);    line-height: var(--leading-display);    letter-spacing: -0.015em; }
.display-xl { font-size: var(--fs-display-xl); line-height: var(--leading-display-xl); letter-spacing: -0.02em; }
.heading    { font-size: var(--text-heading);  line-height: var(--leading-heading); }
.heading-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.sub        { font-size: var(--text-subheading); line-height: var(--leading-subheading); }
.link {                                    /* enlace de texto con subrayado fino que se retrae y vuelve */
  display: inline-block;
  padding-bottom: 0.35em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 100% 100%;
  transition: background-size 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.link:hover { background-size: 0 1px; background-position: 0 100%; }

/* ---------- Superficies ---------- */
.canvas { background: var(--surface-warm-linen-canvas); color: var(--color-pure-black); --hair: var(--hair-on-light); --muted: var(--color-warm-taupe); }
.band   { background: var(--surface-dark-olive-band);   color: var(--color-light-mist); --hair: var(--hair-on-dark);  --muted: var(--color-soft-stone); }
.floor  { background: var(--surface-near-black-floor);  color: var(--color-light-mist); --hair: var(--hair-on-dark);  --muted: var(--color-soft-stone); }
.muted  { color: var(--muted); }
.hr { height: 1px; background: var(--hair); border: 0; margin: 0; transform-origin: left; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--pad-edge);
  color: var(--color-pure-black);        /* sobre lienzo claro */
  pointer-events: none;
}
/* Antes esto se resolvia con mix-blend-mode: difference, pero una capa fija en
   modo mezcla obliga al navegador a recomponer la pagina entera en cada
   fotograma de scroll, y eso es lo que se veia como parpadeo. Ahora el color
   simplemente cambia segun la seccion que queda debajo. */
.nav--claro { color: var(--color-light-mist); }
.nav, .nav--claro { transition: color 0.35s ease; }
.nav > * { pointer-events: auto; }
.logo { display: block; line-height: 1; }
.logo__mono { display: block; font-size: var(--text-heading); line-height: 1; }
.nav__right { display: flex; align-items: center; gap: clamp(var(--spacing-22), 6vw, var(--spacing-89)); }
.nav__links { display: flex; gap: var(--spacing-22); }
.nav__link { position: relative; font-size: var(--text-caption); line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 0.35em; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1); }
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); transform-origin: left; }
.nav__links:hover .nav__link { opacity: 0.5; transition: opacity 0.3s ease; }
.nav__links:hover .nav__link:hover { opacity: 1; }
.circle {                                  /* botón circular fantasma 48px, borde 1px, sin relleno */
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center;
  transition: opacity 0.3s ease;
}
.circle:hover { opacity: 0.6; }
.burger { width: 16px; height: 9px; position: relative; }
.burger::before, .burger::after, .burger > i { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.burger::before { top: 0; } .burger > i { top: 4px; } .burger::after { bottom: 0; }
@media (max-width: 860px) { .nav__links { display: none; } }

/* Menú a pantalla completa */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--surface-near-black-floor); color: var(--color-light-mist);
  padding: var(--pad-edge);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s ease; }
.menu__top { display: flex; justify-content: space-between; align-items: flex-start; }
.x { display: block; width: 16px; height: 16px; position: relative; }   /* icono de cierre */
.x::before, .x::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: currentColor; }
.x::before { transform: rotate(45deg); } .x::after { transform: rotate(-45deg); }
.menu__body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--spacing-35); min-height: 0; }
.menu__list { display: flex; flex-direction: column; gap: clamp(4px, 1vh, 14px); padding-left: clamp(0px, 5vw, 90px); }
.menu__list a {
  position: relative; display: flex; align-items: baseline; gap: var(--spacing-22);
  padding-left: 1.1em;                                   /* sitio para la flecha */
  font-size: clamp(26px, min(4.6vw, 6.4vh), var(--text-heading-lg));
  line-height: 0.9; letter-spacing: -0.01em;
  transition: opacity 0.4s ease;
}
.menu__list small { font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-soft-stone); }
.menu__list a.is-tool .menu__text { font-style: italic; }
.menu__arrow {                                           /* flecha que aparece al pasar el mouse */
  position: absolute; left: 0; top: 50%; width: 0.55em; height: 0.55em; margin-top: -0.275em;
  opacity: 0; transform: translateX(-0.4em); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu__arrow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.menu__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 0.4em; height: 0.4em; margin-top: -0.2em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 70% 30%; }
.menu__text { display: inline-block; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu__list:hover a { opacity: 0.35; }
.menu__list a:hover { opacity: 1; }
.menu__list a:hover .menu__text { transform: scaleX(-1); }   /* tipografía invertida en espejo */
.menu__list a:hover .menu__arrow { opacity: 1; transform: translateX(0); }
.menu__aside { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; padding-top: 2vh; }
.menu__aside .label { max-width: 22em; line-height: 1.5; color: var(--color-light-mist); text-align: left; }
.menu__num { font-size: clamp(80px, 14vw, var(--text-display-xl)); line-height: 0.8; letter-spacing: -0.02em; padding-bottom: 0.12em; }
@media (max-width: 860px) { .menu__body { grid-template-columns: 1fr; } .menu__aside { display: none; } .menu__list { padding-left: 0; gap: 10px; } .menu__list a { font-size: clamp(30px, 8.5vw, 44px); } }
.menu__foot { display: flex; flex-wrap: wrap; gap: var(--spacing-22) var(--spacing-35); justify-content: space-between; padding-top: var(--spacing-22); }
.menu__foot a:hover { opacity: 0.55; }

/* ---------- Hero: banda oscura + palabra gigante + foto que la parte ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--surface-dark-olive-band); color: var(--color-light-mist);
  overflow: hidden;
}
.hero__slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; }
.hero__word {                              /* mega display 260px, lineHeight 1, desborda el viewport */
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-cardinalfruit-regular);
  font-size: clamp(56px, 14vw, var(--text-mega));
  line-height: var(--leading-mega);
  letter-spacing: -0.01em;
  text-transform: uppercase; white-space: nowrap;
  z-index: 1; margin: 0; font-weight: var(--font-weight-regular);
  overflow: hidden; padding: 0.06em 0;
}
.hero__word > span { display: block; }
.hero__word .ch { display: inline-block; }
html:not(.has-cursor) .hero__slide[data-next] .hero__inset { cursor: pointer; }
html:not(.has-cursor) .es-boton { cursor: pointer; }
.hero__inset {                             /* foto rectangular, radio 0, encima de las letras */
  position: relative; isolation: isolate;
  width: clamp(200px, 27.8vw, 400px); aspect-ratio: 4 / 5;
  z-index: 2; overflow: hidden;
}
.hero__inset img, .hero__inset video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Copia de la palabra recortada al rectangulo de la foto: la letra se ve
   translucida justo donde cruza la imagen, y solida fuera de ella. Como la
   foto esta centrada en la pantalla igual que la palabra, basta con centrar
   la copia dentro de la foto para que calce exactamente con la de debajo. */
.hero__word-over {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-cardinalfruit-regular);
  line-height: var(--leading-mega); letter-spacing: -0.01em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--color-light-mist); opacity: 0.5;
  pointer-events: none; padding: 0.06em 0;
  display: block; font-weight: var(--font-weight-regular); overflow: hidden;
}
.hero__word-over > span { display: block; }   /* misma metrica que la palabra de debajo, o no calza */
.hero__inset--wide { width: clamp(220px, 30vw, 440px); aspect-ratio: 4 / 3; }
.hero__inset--tall { width: clamp(180px, 22vw, 320px); aspect-ratio: 9 / 16; }
.hero__ui { position: absolute; z-index: 3; transition: none; }   /* sin transición: GSAP lo anima */
.hero__counter { color: var(--color-light-mist); }   /* siempre sobre la banda oscura */
.hero__counter { right: var(--pad-edge); top: 50%; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.hero__cat { left: var(--pad-edge); bottom: var(--spacing-35); }
.hero__word-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 860px) {
  .hero__counter { top: auto; bottom: var(--spacing-89); transform: none; }
  .hero__cat { bottom: var(--spacing-35); }
  .hero__inset { width: 58vw; }
  .hero__inset--tall { width: 44vw; }
}

/* ---------- Secciones ---------- */
.section { padding: var(--pad-block) var(--pad-section); }
.section--tight { padding-top: var(--spacing-89); padding-bottom: var(--spacing-89); }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spacing-35); padding-bottom: var(--spacing-35); }
.section__head + .hr { margin-bottom: var(--spacing-89); }
.stack > * + * { margin-top: var(--spacing-35); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-89) var(--spacing-35); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-35); align-items: start; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--spacing-89); } }

/* Intro: declaración editorial */
.intro__title { margin-top: var(--spacing-35); max-width: 12em; }
.intro__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-35); margin-top: var(--spacing-89); align-items: start; }
.intro__row .lead { justify-self: end; }
.intro__meta { display: flex; flex-direction: column; gap: var(--spacing-6); }
@media (max-width: 860px) { .intro__row { grid-template-columns: 1fr; } .intro__row .lead { justify-self: start; } }

/* Índice de líneas de trabajo: filas con título 185px */
.index { border-top: 1px solid var(--hair); }
.row {
  display: grid; grid-template-columns: 4em 1fr auto; grid-template-rows: auto auto;
  column-gap: var(--spacing-35); row-gap: var(--spacing-22);
  padding: var(--spacing-38) 0; border-bottom: 1px solid var(--hair);
  align-items: end;
}
.row__n { grid-row: 1; font-size: var(--text-caption); letter-spacing: 0.08em; align-self: start; padding-top: 0.5em; }
.row__title { grid-column: 2 / 4; grid-row: 1; margin: 0; }
.row__img { grid-column: 3; grid-row: 2; width: clamp(110px, 12vw, 180px); aspect-ratio: 4 / 5; overflow: hidden; align-self: start; }
.row__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.row:hover .row__img img { transform: scale(1.06); }
.row__foot { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-35); flex-wrap: wrap; align-self: start; padding-top: var(--spacing-22); }
.row__foot .lead { max-width: 30em; }
.row__cta { transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.row:hover .row__cta { transform: translateX(var(--spacing-6)); }
.row__title, .row__n { transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.index:hover .row__title { opacity: 0.35; }
.index .row:hover .row__title { opacity: 1; transform: translateX(var(--spacing-22)); }
.row__img { will-change: transform; }
@media (max-width: 860px) {
  .row { grid-template-columns: 2.5em 1fr; }
  .row__title { grid-column: 2 / 3; }
  .row__img { grid-column: 2; grid-row: 3; width: 42vw; }
  .row__foot { flex-direction: column; align-items: flex-start; }
}

/* Galería: fotos crudas, pie en 12px a 35px */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-89) var(--spacing-35); }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery__item { display: block; }
.gallery__link { display: block; }
.gallery__detalles h4 { margin: 0; }
.gallery__item:nth-child(even) { margin-top: var(--spacing-89); }
.gallery--3 .gallery__item:nth-child(even) { margin-top: 0; }
.gallery--3 .gallery__item:nth-child(3n+2) { margin-top: var(--spacing-89); }
.gallery__media { overflow: hidden; aspect-ratio: 4 / 5; }
.gallery--landscape .gallery__media { aspect-ratio: 4 / 3; }
.gallery__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gallery__item:hover .gallery__media img { transform: scale(1.04); }
.gallery__cap h3 { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gallery__item:hover .gallery__cap h3 { transform: translateX(var(--spacing-6)); }
.gallery__cap { margin-top: var(--spacing-35); display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-22); }
.gallery__cap h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.gallery__cap .label { color: var(--muted); white-space: nowrap; }
@media (max-width: 860px) {
  .gallery, .gallery--3 { grid-template-columns: 1fr; gap: var(--spacing-89); }
  .gallery__item:nth-child(even), .gallery--3 .gallery__item:nth-child(3n+2) { margin-top: 0; }
}

/* Vídeo (recorrido) */
.videoblock { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-89) var(--spacing-35); align-items: end; }
.videoblock video { width: clamp(220px, 26vw, 380px); aspect-ratio: 9 / 16; object-fit: contain; background: transparent; }
.videoblock__cap { margin-top: var(--spacing-35); }
/* Dos recorridos comparten la columna derecha del bloque: cada uno mas
   estrecho para que los dos quepan al lado del texto. */
.videoblock__par { display: flex; flex-wrap: wrap; gap: var(--spacing-22); align-items: flex-start; }
.videoblock__par figure { margin: 0; }
.videoblock .videoblock__par video { width: clamp(170px, 19vw, 280px); }
@media (max-width: 860px) { .videoblock { grid-template-columns: 1fr; } .videoblock video { width: 70vw; } .videoblock .videoblock__par video { width: 70vw; } }

/* Reels: cuadrícula de vídeos verticales */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-89) var(--spacing-35); }
.reel { display: block; }
.reel:nth-child(3n+2) { margin-top: var(--spacing-89); }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: transparent; }
html:not(.has-cursor) .reel video { cursor: pointer; }   /* 810×1440: se ve completo, con el isologo */
.reel__cap { margin-top: var(--spacing-35); display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-22); }
.reel__cap .label { color: var(--muted); }
@media (max-width: 860px) { .reels { grid-template-columns: 1fr 1fr; gap: var(--spacing-35); } .reel:nth-child(3n+2) { margin-top: 0; } .reel:nth-child(even) { margin-top: var(--spacing-89); } }
@media (max-width: 520px) { .reels { grid-template-columns: 1fr; } .reel:nth-child(even) { margin-top: 0; } }

/* Contacto */
.contact__title { margin-top: var(--spacing-35); }
.contact__details { margin-top: var(--spacing-89); border-top: 1px solid var(--hair); }
.contact__row { display: flex; justify-content: space-between; gap: var(--spacing-35); padding: var(--spacing-22) 0; border-bottom: 1px solid var(--hair); }
.contact__row { transition: padding-left 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.contact__row:hover { padding-left: var(--spacing-6); }
.contact__row a { transition: opacity 0.3s ease; }
.contact__row a:hover { opacity: 0.55; }
.form { display: flex; flex-direction: column; gap: var(--spacing-38); }
.form__field { display: flex; flex-direction: column; gap: var(--spacing-6); }
.form__field label { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; }
.form__field input, .form__field textarea {
  font-family: var(--font-lausanne-300); font-size: var(--text-subheading); line-height: 1.2;
  color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  border-radius: var(--radius-inputs); padding: 10px 0; outline: none; resize: vertical;
  transition: border-color 0.3s ease;
}
.form__field input:focus, .form__field textarea:focus { border-bottom-color: currentColor; }
.form__field.is-invalid input, .form__field.is-invalid textarea { border-bottom-color: currentColor; }
.form__error { font-size: var(--text-caption); letter-spacing: 0.04em; color: var(--muted); min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; }
.btn {                                     /* control fantasma: borde 1px, sin relleno, radio 0 */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-22);
  align-self: flex-start; padding: 18px var(--spacing-38);
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  border: 1px solid currentColor; border-radius: var(--radius-buttons);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.band .btn:hover, .floor .btn:hover { background: var(--color-light-mist); color: var(--color-dark-olive); }
.canvas .btn:hover { background: var(--color-near-black); color: var(--color-light-mist); }
.form__note { font-size: var(--text-caption); letter-spacing: 0.04em; color: var(--muted); }

/* Footer: sólo texto */
.footer { border-top: 1px solid var(--hair); padding: var(--spacing-36) var(--pad-edge); }
.footer__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--spacing-35); align-items: start; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--spacing-6) var(--spacing-22); justify-content: center; }
.footer a { transition: opacity 0.3s ease; }
/* Subrayado fino que crece al pasar por encima. Antes solo bajaban al 55% de
   opacidad: sobre el lienzo claro del pie ese cambio no se percibia y parecia
   que los enlaces no respondian. */
.footer__links a, .footer__right a {
  display: inline-block; padding-bottom: 0.15em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px; background-position: 100% 100%;
  transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1);
}
.footer__links a:hover, .footer__right a:hover {
  background-size: 100% 1px; background-position: 0 100%; opacity: 1;
}
.footer a:hover { opacity: 0.55; }
.footer__right { text-align: right; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; } .footer__links { justify-content: flex-start; } .footer__right { text-align: left; } }

/* Lightbox: suelo casi negro en capa aparte, foto a la izquierda, panel de texto a la derecha */
.lightbox { position: fixed; inset: 0; z-index: 70; display: none; color: var(--color-light-mist); }
.lightbox.is-open { display: block; }
.lightbox__backdrop { position: absolute; inset: 0; background: var(--surface-near-black-floor); }   /* capa propia: nunca cubre la foto */
.lightbox__stage { position: absolute; inset: 0; display: flex; }
.lightbox__media { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; place-items: center; padding: var(--spacing-35) var(--spacing-38) 64px; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 99px); max-height: calc(100svh - 99px); width: auto; height: auto; object-fit: contain; opacity: 0; }
.lightbox__img.is-loaded { opacity: 1; }
.lightbox__media > .lightbox__img { grid-area: 1 / 1; }   /* las dos capas, una encima de otra */
/* El cambio entre fotos es instantaneo: la nueva ya esta cargada cuando se
   muestra. Fundir una sobre otra dejaba ambas a media opacidad y eso se veia
   como un parpadeo. El fundido se reserva para la apertura del visor. */
.lightbox--entrando .lightbox__img { transition: opacity 0.5s ease; }
.lightbox__media::before {                         /* marca discreta mientras carga la foto */
  content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 1px solid rgba(238, 238, 238, 0.35); border-top-color: var(--color-light-mist);
  animation: lb-spin 1s linear infinite; opacity: 0; transition: opacity 0.3s ease;
}
.lightbox--loading .lightbox__media::before { opacity: 1; }
.lightbox__media::after {                          /* aviso si la foto no llega del servidor */
  content: "Esta foto no se pudo cargar"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-lausanne-300); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-soft-stone); white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.lightbox--fallo .lightbox__media::after { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lightbox__btn { position: absolute; z-index: 2; }
.lightbox__close { top: var(--pad-edge); right: var(--pad-edge); }
.lightbox__prev { left: var(--pad-edge); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--pad-edge); top: 50%; transform: translateY(-50%); }
.lightbox__arrow { width: 14px; height: 14px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) translate(-2px, 2px); }
.lightbox__prev .lightbox__arrow { transform: rotate(-135deg) translate(-2px, 2px); }
.lightbox__cap { position: absolute; left: var(--pad-edge); bottom: var(--spacing-22); }
.lightbox__counter { position: absolute; right: var(--pad-edge); bottom: var(--spacing-22); font-variant-numeric: tabular-nums; }

/* Panel DETALLES / IDEAS: columna oscura con scroll propio */
.lightbox__panel {
  position: relative; flex: 0 0 35%; max-width: 35%;
  background: var(--surface-dark-olive-band); color: var(--color-light-mist);
  padding: clamp(150px, 20vh, var(--spacing-173)) var(--spacing-38) var(--spacing-89);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  --hair: var(--hair-on-dark);
}
.lightbox__panel::-webkit-scrollbar { display: none; }
.lightbox:not(.lightbox--panel) .lightbox__panel, .lightbox:not(.lightbox--panel) .lightbox__more { display: none; }
.lightbox__more {                                  /* pista: hay más texto abajo (sólo mientras quede por leer) */
  position: absolute; right: 0; bottom: 0; width: 35%; height: 120px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(65, 68, 62, 0), var(--surface-dark-olive-band) 70%);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 var(--spacing-38) var(--spacing-22);
  opacity: 0; transition: opacity 0.4s ease;
}
.lightbox--more .lightbox__more { opacity: 1; }
.lightbox__num {                                   /* número del proyecto: grande, ligero, tenue */
  position: absolute; top: var(--spacing-89); right: var(--spacing-38);   /* siempre debajo del botón de cerrar */
  font-size: clamp(56px, 7.5vh, var(--text-display)); line-height: 0.8; letter-spacing: -0.02em;
  color: var(--color-soft-stone); opacity: 0.55;
}
.lightbox__num--inline { display: none; position: static; font-size: var(--text-heading); opacity: 0.7; margin-right: var(--spacing-22); }
.lightbox__head { display: flex; align-items: baseline; }
.lightbox__panel .hr { margin: var(--spacing-22) 0 var(--spacing-35); }
.lightbox__text p {
  font-family: var(--font-lausanne-300); font-size: 15px; line-height: 1.7;
  margin: 0 0 26px;
}
.lightbox__text p:first-child { color: var(--color-soft-stone); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--spacing-35); }
.lightbox__text p:last-child { margin-bottom: 0; }
.js .lightbox__text p { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .lightbox__text p.is-in { opacity: 1; transform: none; }   /* sin depender de GSAP: si algo falla, el texto se ve igual */

@media (max-width: 1023px) {
  /* En el movil se conserva la misma composicion que en pantalla grande:
     la foto a la izquierda y el texto a la derecha, no uno debajo del otro. */
  .lightbox__media { padding: 64px 6px 40px 12px; }
  .lightbox__img { max-height: calc(100vh - 104px); max-height: calc(100svh - 104px); }
  .lightbox__panel { flex: 0 0 40%; max-width: 40%; padding: 76px 16px var(--spacing-30); }
  .lightbox__num { display: none; }
  .lightbox__num--inline { display: inline; }
  .lightbox__head { flex-wrap: wrap; row-gap: 4px; }
  .lightbox__panel .hr { margin: 14px 0 20px; }
  .lightbox__text p { font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
  .lightbox__text p:first-child { font-size: 11px; margin-bottom: 20px; }
  .lightbox__more { width: 40%; height: 90px; padding: 0 16px 14px; }
  .lightbox__prev, .lightbox__next { width: 34px; height: 34px; }
  .lightbox__prev { left: 6px; } .lightbox__next { right: 6px; }
  .lightbox__arrow { width: 10px; height: 10px; }
  .lightbox__close { top: var(--spacing-22); right: var(--spacing-22); }
  .lightbox__cap { left: var(--spacing-22); bottom: 10px; }
  .lightbox__counter { right: auto; left: 50%; transform: translateX(-50%); bottom: 10px; }
}

@media (max-width: 560px) {
  .lightbox__media { padding: 58px 4px 34px 8px; }
  .lightbox__img { max-height: calc(100vh - 92px); max-height: calc(100svh - 92px); }
  .lightbox__panel { flex-basis: 42%; max-width: 42%; padding: 68px 13px 26px; }
  .lightbox__more { width: 42%; padding: 0 13px 12px; }
  .lightbox__text p { font-size: 12px; line-height: 1.55; margin-bottom: 15px; }
  .lightbox__text p:first-child { font-size: 10px; letter-spacing: 0.06em; margin-bottom: 16px; }
  .lightbox__num--inline { font-size: var(--text-heading-sm); }
  .lightbox__cap { font-size: 10px; }
}

/* ---------- Movimiento (sólo si hay JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js .hero__word > span:not(.is-split) { transform: translateY(110%); }
.js .hero__word .ch { transform: translateY(110%); }
.js .gallery__media, .js .row__img, .js .videoblock figure video, .js .reel video { clip-path: inset(100% 0 0 0); }

/* Transición entre páginas: un velo oliva que se funde por encima de todo.
   (No se anima la opacidad del body: eso creaba una capa que rompia el nav
   y dibujaba un rectángulo durante el fundido.) */
body::after { content: ""; position: fixed; inset: 0; z-index: 200; background: var(--surface-dark-olive-band); pointer-events: none; opacity: 0; transition: opacity 0.7s ease; }
.js body:not(.is-ready)::after { opacity: 1; transition: none; }
body.is-leaving::after { opacity: 1; transition: opacity 0.4s ease; }

/* Sin rectángulos de foco ni resaltado al tocar; el foco por teclado se conserva */
* { -webkit-tap-highlight-color: transparent; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), video:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* Cursor propio: punto + anillo; círculo relleno con etiqueta sobre fotos y controles */
.cursor { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; color: var(--color-dark-olive); opacity: 0; transition: opacity 0.3s ease, color 0.35s ease; }
.cursor--claro { color: var(--color-light-mist); }
html.lb-abierto .cursor { color: var(--color-light-mist); }   /* el visor tiene el suelo casi negro */
.cursor.is-on { opacity: 1; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; transition: opacity 0.3s ease, transform 0.3s ease; }
.cursor__ring {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center; min-width: 0;
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), margin 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease, opacity 0.3s ease;
}
/* Fuera del flujo: dentro de la rejilla, el texto ("VER", "SIGUIENTE") estiraba
   el anillo y el circulo pequeno nunca llegaba a serlo. */
.cursor__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-lausanne-300); font-size: var(--text-caption); line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; }
.cursor--link .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor--link .cursor__dot { transform: scale(0); }
.cursor--label, .cursor--claro.cursor--label { color: var(--color-dark-olive); }
.cursor--label .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--color-light-mist); border-color: transparent; }
/* "SIGUIENTE" mide 70 px: en un circulo de 64 se saldria. Solo las
   etiquetas largas conservan el tamano anterior. */
.cursor--label.cursor--largo .cursor__ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
.cursor--label .cursor__dot { transform: scale(0); }
.cursor--label .cursor__label { opacity: 1; }
.cursor--down .cursor__ring { transform: scale(0.85); }
.cursor--hidden .cursor__ring, .cursor--hidden .cursor__dot { opacity: 0; }
.has-cursor, .has-cursor * { cursor: none; }
/* En los campos del formulario si hace falta la barra de texto: ahi el
   cursor propio se esconde y sin ella no se sabria donde se escribe. */
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.js .hero__inset { opacity: 0; }
.js .hero__word-over > span { transform: translateY(110%); }
.js .hr[data-grow] { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .hero__word > span, .js .hero__word .ch, .js .hero__word-over > span, .js .hero__inset, .js .hr[data-grow] { opacity: 1; transform: none; }
  .js .gallery__media, .js .row__img, .js .videoblock figure video, .js .reel video { clip-path: none; }
  body::after { display: none; }
  .cursor { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}