/* ==========================================================================
   ORO CONSTRUCCIONES — Sistema de diseño
   Diseño y desarrollo: KY Studio — kystudio-web.vercel.app
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* borde interno del .wrap: los elementos absolutos del hero se alinean con el
     contenido, no con la ventana */
  --wrap-x: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  /* Color — negro de obra + latón del isotipo.
     Sitio oscuro de punta a punta: la foto de obra es la que aporta la luz.
     Nunca #000 ni #fff puros: los negros con cuerpo (#0a0a0a) se leen físicos,
     el blanco cálido (#f2f0ec) no encandila sobre negro. */
  --black: #0a0a0a;
  --coal: #121212;
  --graphite: #1a1a1a;
  --smoke: #2a2a2a;
  --ash: #8f8f8f;
  --silver: #b8b8b8;
  --bone: #f2f0ec;

  /* Oro: rampa de tres, no un hex suelto. Un dorado plano sobre superficie
     grande no se lee brillante, se lee mostaza; el brillo sale del degradado
     con parada especular (--foil), del filete de 1px y del halo. Contraste
     medido sobre --black: brass 8,2:1 · brass-lite 12,1:1 (los dos pasan AA).
     brass-deep da 3,4:1 — es parada de degradado, NUNCA color de texto. */
  --brass: #c8a24a;
  --brass-lite: #e6c877;
  --brass-deep: #8a6a24;
  --brass-glow: rgba(200, 162, 74, 0.45);
  --foil: linear-gradient(105deg, #8a6a24 0%, #c8a24a 32%, #f2dfa8 48%, #c8a24a 64%, #8a6a24 100%);

  /* Alias heredados: el generador y varias reglas todavía los nombran.
     Apuntan al negro para que no quede ninguna superficie clara suelta. */
  --ink: var(--black);
  --forest: var(--black);
  --forest-2: var(--coal);
  --forest-3: var(--graphite);
  --paper: var(--black);
  --concrete: var(--ash);
  --concrete-2: var(--silver);

  /* Roles */
  --bg: var(--black);
  --bg-alt: var(--coal);
  --surface: var(--coal);
  --text: var(--bone);
  --text-2: var(--silver);
  --text-3: var(--ash);
  --line: rgba(242, 240, 236, 0.14);
  --line-soft: rgba(242, 240, 236, 0.07);
  --accent: var(--brass);
  --accent-on-dark: var(--brass);

  /* Tipografía */
  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1: clamp(1.18rem, 1.10rem + 0.40vw, 1.40rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2.00rem);
  --step-3: clamp(1.85rem, 1.50rem + 1.75vw, 2.90rem);
  --step-4: clamp(2.05rem, 1.55rem + 2.50vw, 3.60rem);
  --step-5: clamp(2.40rem, 1.55rem + 3.80vw, 5.00rem);
  --step-6: clamp(2.55rem, 1.10rem + 6.60vw, 7.60rem);

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 9rem;

  /* Pasos fluidos. No son un peldaño más de la escala fija de arriba: crecen
     con el viewport. El valor de --sp-xl ya estaba escrito a mano en
     .footer__bottom. */
  --sp-lg: clamp(2rem, 4vw, 3rem);
  --sp-xl: clamp(2.5rem, 5vw, 4rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1440px;
  --measure: 62ch;

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);

  /* Depth */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;

  --header-h: 76px;
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}

/* Fuentes variables auto-alojadas (sin CDN externo) */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 115%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 115%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, 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: "Instrument Sans";
  src: url("../fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallbacks con métricas ajustadas: evita CLS mientras cargan las webfonts */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 94%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: only light;   /* frena el Auto Dark Theme de Chrome Android */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;   /* clip, no hidden: hidden anula position:sticky */
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--coal); }

/* Revelado común de las 259 fotos de obra: son tomas de celular de años y
   estaciones distintas. Baja saturación y sube micro-contraste para que
   convivan en la misma página. La foto grande del lightbox va sin tocar. */
.card__media img,
.split__visual img,
.split__thumb img,
.shot img,
.hero__media img,
.obra-hero__media img {
  filter: saturate(0.9) contrast(1.05);
}
.lightbox__stage img { filter: none; }

/* El placeholder se ve como material, no como un agujero en la página */
.card__media, .shot, .split__thumb {
  background: linear-gradient(150deg, #e2ddd1, #d2ccbe);
}
.card__media img, .shot img, .split__thumb img {
  opacity: 0;
  transition: opacity 0.55s var(--ease-quart), transform 0.9s var(--ease-expo);
}
.card__media img[data-loaded], .shot img[data-loaded], .split__thumb img[data-loaded] { opacity: 1; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brass); color: var(--ink); }

/* Sin esto, Android y iOS pintan su recuadro celeste del sistema sobre cada
   cosa que se toca. Se reemplaza por un feedback propio en :active. */
a, button, [role="button"], input, select, textarea, label, summary {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
  .btn:active, .filter:active, .lb-btn:active, .burger:active { opacity: 0.72; }
  .card:active .card__media img,
  .shot:active img,
  .banda__item:active img { transform: scale(1.02); }
}

:focus-visible {
  /* Latón puro daba 2,31:1 sobre el fondo claro: no llega al 3:1 de WCAG 1.4.11.
     --accent es brass-deep (5,59:1) en claro y vuelve a latón en las secciones
     oscuras, donde ahí sí contrasta 7,45:1. */
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-variation-settings: "wdth" 100;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); line-height: 1.1; }
h3 { font-size: var(--step-2); font-weight: 400; letter-spacing: -0.005em; line-height: 1.16; }
h4 { font-size: var(--step-1); font-weight: 500; letter-spacing: 0; line-height: 1.25; }

p { text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--step-5);
  line-height: 1.0;
  letter-spacing: 0.005em;
  font-variation-settings: "wdth" 100;
  text-transform: uppercase;
}

.display--xl { font-size: var(--step-6); }

/* En pantallas angostas la variante ancha corta palabras largas */
@media (max-width: 720px) {
  h1, h2, h3, h4, .display, .menu__link, .split__title, .card__title, .footer__cta {
    font-variation-settings: "wdth" 100;
  }
  h1, h2 { line-height: 1.12; }
}

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 40ch;
  text-wrap: pretty;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose p { color: var(--text-2); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Cota de plano: la línea con topes es el gesto propio del sistema */
.eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, var(--brass-deep), #f2dfa8, var(--brass-deep));
}

.eyebrow--plain::before { display: none; }

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.25rem, 4.6vw, 4rem); }

/* El mosaico del referente va a sangre: el ancho de lectura no debe recortar la foto.
   Solo desde 1100px -- abajo el gutter sigue haciendo falta para el pulgar. */
.wrap--bleed { max-width: none; padding-inline: 7px; }
@media (max-width: 1099px) { .wrap--bleed { padding-inline: var(--gutter); } }
.section--tight { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.section--dark { background: var(--forest); color: var(--bone); }
.section--bone { background: var(--coal); }

/* Sobre verde, los roles de color se redefinen para no arrastrar los tonos claros */
.section--dark {
  --line: rgba(244, 241, 234, 0.16);
  --line-soft: rgba(244, 241, 234, 0.08);
  --text: var(--bone);
  --text-2: rgba(244, 241, 234, 0.76);
  --text-3: rgba(244, 241, 234, 0.66);
  --accent: var(--brass);
}

.section--dark .eyebrow { color: var(--brass); }

.grid { display: grid; gap: var(--sp-5); }

.section-head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .section-head--stacked { grid-template-columns: 1fr; }

  /* Cuando la columna de la derecha es mucho más larga que el título, la
     izquierda quedaba como un hueco blanco. Pegada al viewport acompaña la
     lectura en vez de quedarse arriba mirando al techo. */
  .section-head--pegado > :first-child {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
  }
}

/* Foto con pie dentro de una columna de texto */
.figura {
  display: block;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 34ch;
}
.figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: linear-gradient(150deg, #e2ddd1, #d2ccbe);
  transition: transform 0.9s var(--ease-expo);
}
.figura__pie {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (hover: hover) {
  .figura:hover img { transform: scale(1.03); }
  .figura:hover .figura__pie { color: var(--accent); }
}
@media (max-width: 899px) {
  .figura { max-width: none; }
  .figura img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   5. Header / navegación
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bone);
  padding: var(--sp-3) var(--sp-4);
}
.skip:focus { left: var(--sp-3); top: var(--sp-3); }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.5s var(--ease-expo), border-color 0.5s var(--ease-expo),
    transform 0.45s var(--ease-expo), backdrop-filter 0.4s var(--ease-quart);
  border-bottom: 1px solid transparent;
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.header--solid {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: saturate(120%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-soft);
}

.header--hidden { transform: translate3d(0, -105%, 0); }
.header--hidden:focus-within { transform: none; }

/* Header sobre hero oscuro */
.header--over { color: var(--bone); }
.header--over:not(.header--solid)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 26, 20, 0.55), transparent);
  pointer-events: none;
}
.header--over:not(.header--solid) .brand__sub { opacity: 0.8; }
.header--over.header--solid { color: var(--text); }

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }

.brand__mark {
  width: 30px;
  height: 25px;
  flex: none;
  object-fit: contain;
  /* La regla global `img { background-color: var(--bone) }` (placeholder anti-flash
     de las fotos) pintaba un rectangulo crema detras del isotipo, que es un PNG con
     transparencia: sobre el header oscuro se veia como una caja blanca. */
  background: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 110;
}
.brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.62;
  margin-top: 3px;
}

.nav { display: none; }

@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.4rem); }
}

.nav__link {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-expo);
}

@media (hover: hover) {
  .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
}

.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* En mobile el CTA vive en el menú, no en la barra */
@media (max-width: 999px) {
  .header__actions > .btn { display: none; }
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 0.15rem;
}
.header--over:not(.header--solid) .lang { border-color: rgba(244, 241, 234, 0.3); }
.lang a { opacity: 0.68; transition: opacity 0.3s var(--ease-quart); padding: 0.4rem 0.45rem; }
@media (hover: hover) { .lang a:hover { opacity: 0.85; } }

.lang [aria-current="true"] { opacity: 1; }
.lang__sep { opacity: 0.35; }

.burger {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-right: -10px;
}

@media (min-width: 1000px) { .burger { display: none; } }

.burger__box { width: 22px; height: 12px; position: relative; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease-expo), opacity 0.3s var(--ease-quart);
}
.burger__box span:first-child { top: 0; }
.burger__box span:last-child { bottom: 0; }
body.menu-open .burger__box span:first-child { transform: translateY(5.25px) rotate(45deg); }
body.menu-open .burger__box span:last-child { transform: translateY(-5.25px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Barra angosta — cascada de sacrificios (de 999 px para abajo)

   Cómo se rompía: `.brand` tenía `flex: none`, así que la marca no cedía nunca
   y todo el desborde caía sobre el último elemento de la fila, que es el botón
   de menú. A 320 px la barra pedía 338,43 px de contenido dentro de 280 px de
   caja (166,49 de marca + 24 de gap + 147,94 de acciones) y el burger terminaba
   en x = 324,43 … 368,43: entero fuera de pantalla. Como <html> lleva
   `overflow-x: clip`, tampoco se podía scrollear hasta él y el sitio quedaba
   literalmente sin forma de navegarse.
   El umbral real era 368,43 px de viewport, no 320: también se comía 8,43 px
   del botón a 360 px, que es el ancho de Android más común.

   El arreglo invierte la prioridad: la navegación queda fija y la marca es la
   que cede, soltando piezas a medida que falta lugar.
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
  /* Idioma y hamburguesa son navegación: no se encogen ni se corren nunca. */
  .header__actions { flex: none; }
  .burger { flex: none; }

  /* La marca es lo elástico. El `min-width: 0` es lo que la deja achicarse de
     verdad: sin eso, el mínimo automático de un ítem flex es el ancho de su
     contenido y no cede un píxel. */
  .brand { flex: 0 1 auto; min-width: 0; }

  /* Piso duro: si aun así al texto no le alcanza el ancho, se RECORTA; nunca
     pisa el selector de idioma. Va `hidden` y no `clip` porque `clip` no existe
     en Safari 15. El padding + margen negativo es el colchón vertical: con
     line-height 1 las mayúsculas de Archivo pintan fuera de la caja de línea y
     un recorte a ras les comería la cabeza. El margen negativo devuelve lo que
     suma el padding, así que la altura del header no cambia. */
  .brand__text {
    min-width: 0;
    overflow: hidden;
    padding-block: 0.3em;
    margin-block: -0.3em;
  }
  .brand__name, .brand__sub { white-space: nowrap; }
}

/* Los umbrales de sacrificio van en `em`, no en px, y no es cosmética: el `em`
   de una media query se mide contra el tamaño de letra por defecto del
   navegador, así que escala con la preferencia de accesibilidad del usuario.
   Con umbrales en px, alguien con la letra en 24 px veía el subtítulo de la
   marca montado encima del selector ES/EN —y como `.brand` es un <a> con
   overflow visible, esa caja desbordada se comía los toques del link ES.
   25em = 400 px con letra normal, 600 px con letra en 24 px. */
@media (max-width: 25em) {
  .header__inner { gap: var(--sp-3); }     /* 24 → 16 px */
  .header__actions { gap: var(--sp-2); }   /* 16 → 8 px  */
  .lang { gap: 0; padding-inline: 0; }     /* −16 px de aire interno */
}

/* Primer sacrificio. «Construcciones» mide 125,29 px —el 39 % de un iPhone SE—
   contra los 41 px de «ORO». 23.4em = 374,4 px con letra normal. */
@media (max-width: 23.4em) {
  .brand__sub { display: none; }
}

/* Último recurso, anchos que ya no son de ningún teléfono: queda el isotipo
   solo. Este SÍ va en px a propósito: en `em` escondería «ORO» en un iPhone de
   390 px con la letra agrandada, donde todavía entra sobrado. El piso real ya
   lo pone el `overflow: hidden` de arriba; esto es prolijidad. */
@media (max-width: 270px) {
  .brand__text { display: none; }
}

/* Menú mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--forest);
  color: var(--bone);
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter)
           calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease-expo);
  visibility: hidden;
}

body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; }
/* El fondo no se mueve mientras el menu esta abierto. overflow:clip y no
   hidden: hidden sobre el body no frena el scroll en iOS. */
body.menu-open { overflow: clip; }

.menu__list { display: flex; flex-direction: column; gap: 0.15rem; }

.menu__item { overflow: hidden; }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2rem, 11vw, 3.2rem);
  font-weight: 200;
  letter-spacing: 0.01em;
  letter-spacing: -0.04em;
  line-height: 1.12;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-expo);
  padding-block: 0.12em;
}

body.menu-open .menu__link { transform: translateY(0); }
.menu__item:nth-child(1) .menu__link { transition-delay: 0.06s; }
.menu__item:nth-child(2) .menu__link { transition-delay: 0.12s; }
.menu__item:nth-child(3) .menu__link { transition-delay: 0.18s; }
.menu__item:nth-child(4) .menu__link { transition-delay: 0.24s; }
.menu__item:nth-child(5) .menu__link { transition-delay: 0.30s; }

.menu__idx {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.menu__foot {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(244, 241, 234, 0.15);
  font-size: 0.95rem;
}
.menu__foot a:not(.btn) { color: rgba(244, 241, 234, 0.8); }
.menu__foot .btn { margin-bottom: var(--sp-2); }

/* Con el menú abierto, la barra vive sobre el verde */
body.menu-open .header {
  color: var(--bone);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   Respaldo para navegadores sin backdrop-filter.
   OJO: esto NO es un arreglo de contraste. Medido, el peor caso sin desenfoque
   da 12,46:1 en la barra (--ink sobre --paper al 86 % con una foto negra
   detrás), muy arriba del 4,5:1 de la WCAG, y el desenfoque tampoco cambiaría
   ese número: promedia el fondo, no lo aclara. Lo único que se gana es
   cosmético: sin desenfoque se ve el fantasma del contenido que scrollea abajo
   de la barra (1,38:1 contra la barra limpia; con este respaldo, 1,07:1).
   La condición incluye la variante -webkit- para no castigar a Safari 9-17, que
   soporta la prefijada y no la estándar. Los paréntesis alrededor del `or` son
   obligatorios: sin ellos la regla entera se descarta en silencio.
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header--solid { background: rgba(10, 10, 10, 0.96); }
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease-quart), border-color 0.4s var(--ease-quart);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--forest-3);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.55s var(--ease-expo);
}

@media (hover: hover) {
  .btn:hover::before { transform: translate3d(0, 0, 0); }
  .btn:hover { color: var(--bone); }
}

.btn__arrow { transition: transform 0.5s var(--ease-expo); flex: none; }
@media (hover: hover) { .btn:hover .btn__arrow { transform: translateX(4px); } }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 1px solid var(--line);
}
.btn--ghost::before { background: var(--ink); }
@media (hover: hover) { .btn--ghost:hover { color: var(--bone); } }
.section--dark .btn--ghost, .btn--ghost-light {
  --btn-fg: var(--bone);
  border-color: rgba(244, 241, 234, 0.5);
}
.btn--ghost-light {
  background: rgba(10, 26, 20, 0.45);
  border: 1px solid rgba(244, 241, 234, 0.7);   /* sin border-style el color no dibuja nada */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--light { --btn-bg: var(--bone); --btn-fg: var(--ink); }
.btn--brass {
  --btn-bg: transparent;
  --btn-fg: var(--black);
  background-image: var(--foil);
  background-size: 220% 100%;
  background-position: 100% 0;
  transition: background-position 0.9s var(--ease-expo), box-shadow 0.26s ease, color 0.3s var(--ease-quart);
}
.btn--brass::before { background: none; }
@media (hover: hover) {
  .btn--brass:hover {
    color: var(--black);
    background-position: 0 0;
    box-shadow: 0 0 0 1px rgba(230, 200, 119, 0.5), 0 8px 28px rgba(200, 162, 74, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn--brass { transition: box-shadow 0.26s ease; }
  .btn--brass:hover { background-position: 100% 0; }
}
.btn--sm { min-height: 44px; padding: 0.7rem 1.15rem; font-size: 0.74rem; }
.btn--block { width: 100%; }

/* Link con flecha */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-block: 0.3rem;
}
.arrow-link span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.5s var(--ease-expo);
  padding-bottom: 2px;
}
@media (hover: hover) {
  .arrow-link:hover span { background-size: 100% 1px; }
  .arrow-link:hover svg { transform: translateX(4px); }
}
.arrow-link svg { transition: transform 0.5s var(--ease-expo); flex: none; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* McClean va 100vh en desktop. Con foto de celular a esa escala se ve el ruido
     ISO y el horizonte torcido antes que la obra: el techo baja a 78vh. El
     escalonado por breakpoint si es de la referencia (100/60/55/50). */
  min-height: min(78svh, 760px);
  display: flex;
  align-items: flex-end;
  color: var(--bone);
  background: var(--forest);
  overflow: hidden;
  /* la franja de abajo queda para el caption y los dots del slider, que son
     absolutos: sin esta reserva el contenido del hero los pisa */
  padding-bottom: clamp(6rem, 9vw, 7.5rem);
  padding-top: calc(var(--header-h) + 2rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.045);
}

/* --- Slider del hero ---
   Referencia: mccleandesign.com usa el carousel de Bootstrap en modo fade,
   `transition: opacity 0.6s`. Acá el mismo cruce pero sin libreria (el sitio no
   tiene dependencias y asi se queda) y con el zoom lento que ya tenia el hero. */
.hero__slide {
  position: absolute;
  /* Se desborda 4% a cada lado para que el desplazamiento de entrada no
     descubra el fondo por el costado: .hero__media recorta. */
  inset: 0 -4%;
  opacity: 0;
  /* El cruce largo disimula que las 6 fotos no comparten paleta ni hora del
     dia. Al fundido se le suma un desplazamiento corto: la foto entra
     deslizandose en vez de aparecer de golpe. */
  transform: translate3d(3.5%, 0, 0);
  transition: opacity 1.1s var(--ease-quart), transform 1.6s var(--ease-expo);
  will-change: opacity, transform;
}

.hero__slide.is-active { opacity: 1; transform: translate3d(0, 0, 0); }

/* Mientras esta a la vista la foto nunca queda quieta: paneo lento y continuo,
   mas largo que el intervalo del slider (7 s) para que no llegue a frenarse
   antes de que entre la siguiente. */
@keyframes heroPan {
  from { transform: scale(1.045) translate3d(0.8%, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -0.6%, 0); }
}
.hero__slide.is-active img { animation: heroPan 9.5s linear forwards; }

.hero__slidebar {
  position: absolute;
  left: var(--wrap-x);
  bottom: clamp(1.5rem, 3vw, 2.25rem);
  z-index: 3;
  display: flex;
  gap: 6px;
}

.hero__dot {
  width: 30px;
  height: 3px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(242, 240, 236, 0.32);
  transition: background 0.4s var(--ease-quart);
}

.hero__dot.is-active {
  background: var(--foil);
  box-shadow: 0 0 10px var(--brass-glow);
}
.hero__dot:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.hero__caption {
  position: absolute;
  left: var(--wrap-x);
  bottom: clamp(2.75rem, 5vw, 3.75rem);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  color: var(--bone);
}

.hero__caption-t {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__caption-l {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity 0.4s linear; transform: none; }
  .hero__slide.is-active img { animation: none; transform: scale(1.045); }
}

@keyframes heroZoom { to { transform: scale(1); } }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* velo superior de 320px: el logo dorado sobre cielo quemado del Alto Valle
       desaparece sin esto (McClean lo resuelve con 300px y 5 paradas) */
    linear-gradient(to bottom, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.44) 14%, rgba(10, 10, 10, 0.2) 27%, rgba(10, 10, 10, 0) 38%),
    linear-gradient(to right, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.45) 42%, rgba(10, 10, 10, 0.12) 78%, rgba(10, 10, 10, 0.3) 100%),
    linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.6) 38%, rgba(10, 10, 10, 0.34) 64%, rgba(10, 10, 10, 0.62) 100%);
}

/* Escalonado responsive de la referencia, con el techo bajado. */
@media (max-width: 992px) { .hero { min-height: 62svh; } }
@media (max-width: 767px) { .hero { min-height: max(56svh, 420px); } }

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow { color: var(--brass-lite); margin-bottom: clamp(1rem, 2.5vw, 2rem); }

.hero__title {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  font-size: clamp(2.2rem, 0.95rem + 4.3vw, 4.55rem);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(102%);
  animation: lineUp 1.05s var(--ease-expo) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: 0.18s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.26s; }
.hero__title .line:nth-child(3) > span { animation-delay: 0.34s; }

@keyframes lineUp { to { transform: translateY(0); } }

.hero__brass {
  color: var(--brass);
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Si el navegador no recorta el fondo al texto, queda el color plano de arriba
   y no un bloque dorado ilegible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__brass { background: none; -webkit-text-fill-color: currentColor; }
}

.hero__grid {
  display: grid;
  gap: var(--sp-4);
  align-items: end;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 46ch);
    justify-content: start;
    gap: var(--sp-4);
    align-items: start;
  }
  .hero__aside { justify-items: start; }
}

.stats { margin-top: 0; }

.hero__aside {
  display: grid;
  gap: var(--sp-4);
  opacity: 0;
  animation: fadeUp 1s var(--ease-expo) 0.6s forwards;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.hero__text {
  color: rgba(244, 241, 234, 0.86);
  max-width: 38ch;
  font-size: var(--step-1);
  line-height: 1.45;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__scroll {
  position: absolute;
  right: var(--wrap-x);
  bottom: clamp(6.5rem, 12vw, 9rem);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.6);
  writing-mode: vertical-rl;
  opacity: 0;
  animation: fadeUp 1s var(--ease-expo) 1s forwards;
}

@media (min-width: 1100px) { .hero__scroll { display: flex; } }

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, var(--brass), transparent);
  animation: scrollPulse 2.4s var(--ease-inout) infinite;
  transform-origin: top;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Marcador de cifras del hero */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  padding-top: var(--sp-4);
}

@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat__n {
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 115;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.08em;
}
.stat__suffix { font-size: 0.5em; color: var(--brass); }
.stat__label {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.6);
  line-height: 1.35;
}

.section--light .stats { border-top-color: var(--line); }
.section--light .stat__label { color: var(--text-3); }

/* --------------------------------------------------------------------------
   8. Marquesina de clientes
   -------------------------------------------------------------------------- */
/* Banda de comitentes: continua el hero en oscuro en vez de cortarlo con crema.
   Envuelve al .wrap para que el fondo llegue de borde a borde. */
.cifras-band {
  background: var(--coal);
  --line: rgba(244, 241, 234, 0.13);
  --text-2: rgba(244, 241, 234, 0.76);
  --text-3: rgba(244, 241, 234, 0.66);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
/* cifras y comitentes eran dos bandas con su propio borde; ahora es un bloque
   con una sola linea adentro, que es como separa el referente */
.cifras-band .stats { border-top: 0; padding-top: 0; margin-top: 0; }
.cifras-band .comitentes {
  border-block: 0;
  border-top: 1px solid var(--line);
  margin-block: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0;
}
.cifras-band .comitente { color: rgba(244, 241, 234, 0.86); }
.cifras-band .eyebrow { color: var(--brass); }

/* Dos secciones oscuras seguidas se leen como un bloque unico y pesado.
   Una linea hairline entre ellas devuelve el ritmo sin romper la continuidad. */
/* sin linea entre secciones: separa el espacio, no una regla (ver 'menos divisiones') */

/* Misma costura para la transicion oscuro <-> banda clara (--bone): sin esto
   el corte de color queda seco, sin la linea hairline que ya usan las demas
   transiciones de seccion. */
/* idem: el cambio de fondo ya marca el corte, la linea encima lo duplicaba */

.comitentes {
  border-block: 1px solid var(--line);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  margin-block: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: var(--sp-4);
}

.comitentes__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.75rem);
  align-items: baseline;
}

.comitente {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
}

.section--dark .comitente { color: rgba(244, 241, 234, 0.86); }

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp-4);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  width: max-content;
  animation: slide 38s linear infinite;
}

@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}

.marquee__logo {
  display: grid;
  place-items: center;
  height: clamp(58px, 9vw, 76px);
  padding-inline: clamp(0.9rem, 2vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  flex: none;
  transition: transform 0.5s var(--ease-expo);
}

.marquee img {
  height: clamp(26px, 4.5vw, 38px);
  width: auto;
  object-fit: contain;
}

@media (hover: hover) { .marquee__logo:hover { transform: translateY(-3px); } }

/* --------------------------------------------------------------------------
   9. Obras — grilla y fichas
   -------------------------------------------------------------------------- */
/* Mosaico de obras. Medido sobre mccleandesign.com/projects el 02/09/2026:
   grid de 3 columnas, gap 7px, padding 7px, tile 16:9 (498x275), la foto hace
   scale(1.1) en hover y un overlay con el nombre centrado pasa de opacity 0 a 1
   (`.project-item:hover .project-content { opacity: 1 }`). Acá el zoom es 1.06:
   1.1 sobre foto de obra sacada con celular empasta el grano. */
.cards {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { position: relative; display: block; }

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--coal);
  border-radius: 2px;
}

/* --- Tile del mosaico ---
   McClean usa 96/53 (1,81:1) porque su fotografo deja margen de sobra. Una foto
   4:3 de celular metida en 1,81 con `cover` pierde el 26,7% del alto y te corta
   la cabeza del operario o el borde de la losa. En 3/2 el recorte baja al 11%. */
.card--tile .card__media {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}

.card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: var(--sp-4);
  text-align: center;
  background: rgba(10, 10, 10, 0.55);
  opacity: 0;
  transition: opacity 0.5s var(--ease-quart);
}

@media (hover: hover) {
  /* La referencia usa scale(1.1): sobre foto de obra ya recomprimida eso
     amplifica el bloque del JPG. Baja la amplitud, no la duracion — un hover
     de 200 ms se siente a plantilla. */
  .card--tile:hover .card__media img {
    transform: scale(1.045);
    transition: transform 620ms var(--ease-expo);
  }
  .card--tile:hover .card__overlay { opacity: 1; }
}

.card--tile:focus-visible .card__overlay { opacity: 1; }

.card--tile .card__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  color: var(--bone);
  background-image: none;
}

.card--tile .card__meta {
  color: var(--brass);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* En pantalla tactil no hay hover: el overlay del mosaico de referencia deja la
   obra sin nombre. Acá se muestra siempre, con degradado desde abajo. */
@media (pointer: coarse) {
  .card__overlay {
    opacity: 1;
    align-content: end;
    justify-items: start;
    text-align: left;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.35) 45%, transparent 75%);
  }
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-2);
  transition: transform 0.9s var(--ease-expo), filter 0.6s var(--ease-quart);
}

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 26, 20, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity 0.55s var(--ease-quart);
}

@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.045); }
  .card:hover .card__media::after { opacity: 1; }
  .card:hover .card__title { background-size: 100% 1px; }
}

.card__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  color: var(--bone);
  background: rgba(10, 26, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Cantidad de fotos: dato de control interno, no algo que venda (benchmark de 8
   constructoras, 31/08/2026 — ninguna lo muestra en la tarjeta de listado). Baja
   jerarquía a badge chico en la esquina opuesta al rubro, no compite con él. */
.card__count {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
  color: rgba(244, 241, 234, 0.85);
  background: rgba(10, 26, 20, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card__body { padding-top: var(--sp-3); display: grid; gap: 0.35rem; }

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variation-settings: "wdth" 110;
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.6s var(--ease-expo);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-3);
}
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* Filtros */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-5);
}

/* En celular los 9 rubros se apilaban en 7 filas: 304 px en un iPhone 14 y
   408 px en un iPhone SE. La primera obra arrancaba al 98 % del viewport, o sea
   que la página "Obras" abría sin mostrar ninguna obra. Van en una sola fila
   que se desliza con el dedo, sangrada hasta el borde de la pantalla para que
   el chip cortado avise que hay más. */
@media (max-width: 760px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 0.15rem 0.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; }
  /* El último chip necesita aire para poder quedar bajo la máscara sin cortarse */
  .filters::after { content: ""; flex: none; width: 2rem; }
}

.filter {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text-2);
  box-shadow: var(--shadow-1);
  transition: color 0.35s var(--ease-quart), background 0.35s var(--ease-quart),
    border-color 0.35s var(--ease-quart), box-shadow 0.35s var(--ease-quart);
}

.filter__n { font-size: 0.68em; opacity: 0.55; font-variant-numeric: tabular-nums; }

@media (hover: hover) { .filter:hover { border-color: var(--ink); color: var(--ink); } }

.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.filter-empty {
  padding: var(--sp-6) 0;
  text-align: center;
  color: var(--text-3);
}

/* Item que entra/sale del filtro */
.card-item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   10. Split sticky — "obras lado a lado" (signature)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--sp-5); }

@media (min-width: 1000px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: stretch;
  }
}

.split__visual { display: none; }

@media (min-width: 1000px) {
  .split__visual { display: block; height: 100%; }

  .split__visual-inner {
    position: sticky;
    top: calc(var(--header-h) + 2.5vh);
    height: min(78vh, 760px);
    border-radius: 2px;
    overflow: hidden;
    background: var(--forest-2);
  }
  .split__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.85s var(--ease-quart), transform 1.3s var(--ease-expo);
  }
  .split__visual img.is-active { opacity: 1; transform: scale(1); }
}

.split__list { display: grid; }

.split__item {
  display: block;
  padding-block: clamp(1.25rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.split__item:last-child { border-bottom: 1px solid var(--line); }

.split__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  align-items: baseline;
  gap: var(--sp-3);
}
.split__idx { text-align: right; }

.split__idx {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.split__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-variation-settings: "wdth" 112;
  transition: color 0.4s var(--ease-quart), transform 0.6s var(--ease-expo);
}

.split__cat {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.split__text { margin-top: var(--sp-3); color: var(--text-2); max-width: 46ch; }

.split__thumb {
  margin-top: var(--sp-3);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 2px;
}
.split__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* En celular la foto es el gancho: va antes del texto */
@media (max-width: 999px) {
  .split__item { display: flex; flex-direction: column; }
  .split__thumb { order: -1; margin-top: 0; margin-bottom: var(--sp-4); aspect-ratio: 4 / 3; }
  .split__head { order: 0; }
  .split__text { order: 1; }
}

@media (min-width: 1000px) {
  .split__thumb { display: none; }
  .split__item.is-active .split__title { color: var(--accent); transform: translateX(6px); }
  .split__item.is-active .split__idx { color: var(--accent); }
}

/* --------------------------------------------------------------------------
   11. Frentes de obra — diapositivas (.frn)

   Un frente por vez, con la foto Y el texto adentro de la misma diapositiva:
   cuando cambia el frente cambia todo junto. Es lo que hace spenceltd.co.uk y
   lo que NO hacia la version anterior de este bloque, que dejaba el indice de
   seis quieto al costado mientras solo rotaba la foto — el mismo error que
   comete suffolk.com/sectors.

   Tres detalles salen de medir el codigo de sitios que lo hacen bien:

   1. El estado vive en el atributo `data-e` con TRES valores (active /
      previous / not-active) y todo lo visual cuelga de selectores de atributo.
      Es el metodo de paulkalkbrenner.net: el JS no escribe ni un estilo, asi
      que la CSP del sitio (style-src 'self') no tiene de que quejarse. El
      tercer estado es el que permite que la diapositiva que se va se anime
      hacia afuera; con dos estados parpadea.
   2. La foto abre y el texto la sigue ~0,75 s despues, escalonado. El orden
      medido en era-residence.com es: foto en t=0, titulo y parrafo en t=0,8,
      pie en t=1,2. No es simultaneo, y eso es lo que lo hace leer como
      presentacion en vez de carrusel.
   3. El titulo se revela palabra por palabra bajo mascara — el mecanismo de
      mercedes-benz.com y multiplex.global. El escalonado entre palabras va por
      nth-of-type y no por una variable inline, otra vez por la CSP.
   -------------------------------------------------------------------------- */
.frn {
  --frn-foto: 1.5s;      /* la foto abre */
  --frn-txt: 0.75s;      /* el texto la sigue */
  --frn-stag: 0.055s;    /* escalon entre palabras del titulo */
  /* 7 s alcanzan en escritorio, donde el texto entra de un vistazo. En celular
     el mismo contenido son 32 palabras en una columna angosta: a 7 s hay que
     leer a 274 palabras por minuto, mas rapido de lo que se lee en pantalla.
     Medido a 390 px. En celular el paso sube a 11 s. */
  --frn-paso: 11000ms;   /* cuanto dura cada frente en pantalla */
  --frn-suave: cubic-bezier(0.65, 0, 0.35, 1);
  --frn-sale: cubic-bezier(0.33, 1, 0.68, 1);
  --frn-resn: cubic-bezier(0.215, 0.61, 0.355, 1);  /* el de Squarespace */
  display: grid;
  gap: var(--sp-4);
}

.frn__pista { position: relative; }

.frn__d {
  position: absolute;
  inset: 0;
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  pointer-events: none;
}
.frn__d[data-e="active"] { position: relative; pointer-events: auto; }

/* Las diapositivas dormidas salen del dibujo. Sin esto sus textos se apilan
   encima de la activa: las mascaras tapan el titulo, pero la tabla de
   especificacion no vive adentro de una. visibility y no display, para que la
   que se va todavia pueda animarse hacia afuera. */
.frn__d[data-e="not-active"] { visibility: hidden; }
.frn__d[data-e="active"],
.frn__d[data-e="previous"] { visibility: visible; }

@media (min-width: 900px) {
  .frn__d { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; }
}

/* --- foto ---------------------------------------------------------------- */
.frn__foto {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--graphite);
  aspect-ratio: 16 / 10;
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.1);
  transition: opacity var(--frn-foto) var(--frn-sale),
              filter calc(var(--frn-foto) * 1.4) var(--frn-suave),
              transform calc(var(--frn-foto) * 1.8) var(--frn-suave);
}
@media (min-width: 900px) { .frn__foto { aspect-ratio: 4 / 3; } }
.frn__d[data-e="active"] .frn__foto { opacity: 1; filter: blur(0); transform: scale(1); }
.frn__d[data-e="previous"] .frn__foto { opacity: 0; filter: blur(10px); transform: scale(1.03); }

.frn__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--frn-pos, 50% 40%);
  filter: saturate(0.9) contrast(1.05);   /* mismo revelado que las otras fotos */
}
/* Encuadre por frente: hay que subirlo donde el motivo esta arriba (estacion,
   colegio) y centrarlo donde ocupa todo (torre). Va aca porque la CSP descarta
   cualquier style inline. */
.frn__d:nth-child(1) .frn__foto img { --frn-pos: 50% 34%; }
.frn__d:nth-child(2) .frn__foto img { --frn-pos: 50% 33%; }
.frn__d:nth-child(3) .frn__foto img { --frn-pos: 50% 45%; }
.frn__d:nth-child(4) .frn__foto img { --frn-pos: 50% 45%; }
.frn__d:nth-child(5) .frn__foto img { --frn-pos: 50% 30%; }
.frn__d:nth-child(6) .frn__foto img { --frn-pos: 50% 38%; }

/* --- texto --------------------------------------------------------------- */
.frn__txt { display: grid; align-content: center; gap: var(--sp-2); min-width: 0; }

.frn__t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.frn__link { color: inherit; }
/* La diapositiva entera es zona de clic, pero el enlace sigue siendo el
   titulo: el lector de pantalla anuncia un enlace por frente, no seis. */
.frn__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }

/* Cada palabra en una caja con overflow: sube desde abajo, escalonada. El
   texto RUEDA, no hace fade — ninguno de los sitios que animan texto usa
   opacidad sola. */
.pal { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pal > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform calc(var(--frn-txt) * 1.1) var(--frn-resn)
              calc(var(--frn-txt) * 0.5);
}
.pal:nth-of-type(2) > span { transition-delay: calc(var(--frn-txt) * 0.5 + var(--frn-stag)); }
.pal:nth-of-type(3) > span { transition-delay: calc(var(--frn-txt) * 0.5 + var(--frn-stag) * 2); }
.pal:nth-of-type(4) > span { transition-delay: calc(var(--frn-txt) * 0.5 + var(--frn-stag) * 3); }
.pal:nth-of-type(5) > span { transition-delay: calc(var(--frn-txt) * 0.5 + var(--frn-stag) * 4); }
.pal:nth-of-type(6) > span { transition-delay: calc(var(--frn-txt) * 0.5 + var(--frn-stag) * 5); }
.frn__d[data-e="active"] .pal > span { transform: translateY(0); }
.frn__d[data-e="previous"] .pal > span { transform: translateY(-105%); transition-delay: 0s; }

/* El resto del texto entra despues del titulo, tambien escalonado */
.frn__n, .frn__desc, .frn__cred, .frn__spec {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--frn-txt) var(--frn-sale) calc(var(--frn-txt) * 0.8),
              transform calc(var(--frn-txt) * 1.4) var(--frn-suave) calc(var(--frn-txt) * 0.8);
}
.frn__desc { transition-delay: calc(var(--frn-txt) * 0.95); }
.frn__cred { transition-delay: calc(var(--frn-txt) * 1.1); }
.frn__spec { transition-delay: calc(var(--frn-txt) * 1.25); }
.frn__d[data-e="active"] :is(.frn__n, .frn__desc, .frn__cred, .frn__spec) {
  opacity: 1; transform: none;
}
.frn__d[data-e="previous"] :is(.frn__n, .frn__desc, .frn__cred, .frn__spec) {
  opacity: 0; transform: translateY(-12px); transition-delay: 0s;
}

.frn__n {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.frn__n span { color: var(--brass); }

.frn__desc {
  max-width: 46ch;
  color: var(--text-2);
  font-size: var(--step-0);
  line-height: 1.55;
}
.frn__cred {
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass-lite);
}

/* Los cuatro items no son bullets: son la ficha tecnica del frente */
.frn__spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  column-gap: clamp(1rem, 2vw, 1.8rem);
  row-gap: 0.6rem;
  margin-top: var(--sp-2);
}
.frn__spec li {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.45rem;
  font-family: var(--font-display);
  /* 0.68rem daba 10,9 px medidos a 320 px: en mayuscula y con tracking no se
     lee. El piso es 0.75rem = 12 px y recien en pantalla grande baja. */
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.09em; line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-2);
}

/* --- pie: indicadores y pausa -------------------------------------------- */
.frn__pie { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.frn__pts { display: flex; gap: 0.5rem; }
.frn__pt {
  position: relative;
  width: 2.4rem; height: 2px;
  padding: 0;
  border: 0;
  background: var(--line);
  overflow: hidden;
  cursor: pointer;
}
/* La barra que se llena dice cuanto falta para el proximo frente: es el unico
   aviso de que el bloque avanza solo. */
.frn__pt::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--foil);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--frn-paso) linear;
}
.frn__pt.is-on::after { transform: scaleX(1); }
.frn__pt.is-hecho::after { transform: scaleX(1); background: var(--brass-deep); transition: none; }
.frn__pt.is-reset::after { transition: none; }
/* Area de toque real sin agrandar la barra: WCAG 2.5.8 pide 24x24 CSS px */
.frn__pt::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px; bottom: -12px;
}

.frn__pausa {
  font-family: var(--font-display);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--line);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.frn__pausa:hover { color: var(--bone); border-color: rgba(244, 241, 234, 0.3); }

/* En la home el bloque va sin la ficha tecnica y con el titulo un escalon
   abajo, para no comerse la portada. */
.frn--home .frn__t { font-size: var(--step-3); }

@supports selector(:has(*)) {
  .frn__link:focus-visible { outline: none; }
  .frn__d:has(.frn__link:focus-visible) { outline: 2px solid var(--brass); outline-offset: 4px; }
}

/* Quien pidio menos movimiento ve los frentes pasar igual — mas lento y sin
   animacion. Frenarlo del todo lo dejaria viendo uno de seis: esa preferencia
   pide menos movimiento, no menos informacion. */
@media (prefers-reduced-motion: reduce) {
  .frn__foto { transition-duration: 0.01ms !important; filter: none; transform: none; }
  .frn__d[data-e="active"] .frn__foto,
  .frn__d[data-e="previous"] .frn__foto { filter: none; transform: none; }
  .pal > span { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .frn__n, .frn__desc, .frn__cred, .frn__spec {
    transition-duration: 0.01ms !important; transition-delay: 0s !important; transform: none;
  }
  .frn__pt::after { transition: none; }
}

/* En papel sale el frente que este activo, y entero */
@media print {
  .frn__d[data-e="active"] { break-inside: avoid; }
  .frn__pie { display: none; }
}


/* Banda de obras en Nosotros */
.banda {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .banda { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.banda__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, #e2ddd1, #d2ccbe);
}
.banda__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-expo); }
.banda__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 26, 20, 0.8), transparent 55%);
}
.banda__cap {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (hover: hover) { .banda__item:hover img { transform: scale(1.04); } }

/* Usado por .destacados en la ficha de obra, NO por los rubros del indice. */
.svc__list { display: grid; gap: 0.5rem; margin-top: var(--sp-3); }
.svc__list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.5;
}
.svc__list li::before {
  content: "";
  width: 12px;
  height: 1px;
  margin-top: 0.72em;
  background: var(--accent);
  flex: none;
}

/* --------------------------------------------------------------------------
   12. Proceso
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }

@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step { display: grid; gap: 0.7rem; padding-top: var(--sp-3); }
.step__n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--brass);
  opacity: 0.55;
  margin-bottom: 0.15rem;
}
.step h3 { font-size: var(--step-1); }
.step p { font-size: 0.95rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   13. Ficha de obra
   -------------------------------------------------------------------------- */
.obra-hero {
  position: relative;
  min-height: clamp(58vh, 70vw, 86vh);
  display: flex;
  align-items: flex-end;
  color: var(--bone);
  background: var(--forest);
  overflow: hidden;
  padding-block: calc(var(--header-h) + 2rem) clamp(2rem, 5vw, 4rem);
}
.obra-hero__media { position: absolute; inset: 0; }
.obra-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.obra-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 26, 20, 0.9), rgba(10, 26, 20, 0.35) 55%, rgba(10, 26, 20, 0.55));
}
.obra-hero__inner { position: relative; z-index: 2; width: 100%; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.65);
  margin-bottom: var(--sp-4);
}
.crumbs a { transition: color 0.3s var(--ease-quart); }
@media (hover: hover) { .crumbs a:hover { color: var(--brass); } }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
@media (min-width: 800px) { .meta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.meta__k {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}
.meta__v { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }

/* Galería masonry-ish */
.gallery { display: grid; gap: clamp(0.75rem, 1.6vw, 1.5rem); grid-template-columns: 1fr; }

@media (min-width: 700px) { .gallery { grid-template-columns: repeat(6, 1fr); } }

.shot { position: relative; overflow: hidden; background: var(--bone); border-radius: 2px; cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-expo); }
@media (hover: hover) { .shot:hover img { transform: scale(1.03); } }

@media (min-width: 700px) {
  .shot { grid-column: span 3; aspect-ratio: 4 / 3; }
  .shot--wide { grid-column: span 6; aspect-ratio: 16 / 9; }
  .shot--four { grid-column: span 4; aspect-ratio: 3 / 2; }
  .shot--third { grid-column: span 2; aspect-ratio: 1 / 1; }
}

@media (max-width: 699px) {
  .shot { aspect-ratio: 4 / 3; }
}

/* Lightbox */
.lightbox {
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 16, 12, 0.985);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-quart), visibility 0.45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  color: rgba(244, 241, 234, 0.75);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(0.5rem, 3vw, 4rem);
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
}

.lightbox__caption {
  padding: var(--sp-3) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  color: rgba(244, 241, 234, 0.72);
  font-size: 0.85rem;
  text-align: center;
  height: 5.25rem;                 /* fijo: la foto deja de saltar entre pases */
  display: grid;
  place-items: center;
}

.lb-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--bone);
  background: rgba(244, 241, 234, 0.08);
  transition: background 0.3s var(--ease-quart);
}
@media (hover: hover) { .lb-btn:hover { background: rgba(244, 241, 234, 0.18); } }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lightbox__nav--prev { left: clamp(0.25rem, 1.5vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.25rem, 1.5vw, 1.5rem); }

/* En pantalla táctil el gesto es el swipe: las flechas tapan la foto */
@media (max-width: 700px) { .lightbox__nav { display: none; } }
.lightbox .lb-btn:focus-visible { outline-color: rgba(244, 241, 234, 0.7); outline-width: 1px; }

/* Navegación entre obras */
.pager {
  display: grid;
  gap: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}
@media (min-width: 760px) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager__item { display: grid; gap: 0.4rem; }
.pager__item--next { text-align: right; }
.pager__k { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.pager__t {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   14. Formulario
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }

@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 1rem;
  transition: border-color 0.3s var(--ease-quart), box-shadow 0.3s var(--ease-quart);
}

.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }

.field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234b5a53' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(10, 26, 20, 0.55);
}

.field--error input, .field--error textarea, .field--error select { border-color: #a3341f; }

.field__err {
  font-size: 0.8rem;
  color: #a3341f;
  display: none;
}
.field--error .field__err { display: block; }

.form__note { font-size: 0.82rem; color: var(--text-3); }

.form-msg {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  background: var(--surface);
  display: none;
}
.form-msg.is-visible { display: block; }

/* --------------------------------------------------------------------------
   14b. Cierre de página
   La mitad derecha era aire: ahora lleva el contacto directo, para que el
   visitante que no quiere llenar un formulario tenga igual por dónde escribir.
   -------------------------------------------------------------------------- */
.cta-final { display: grid; gap: var(--sp-5); align-items: start; }

@media (min-width: 900px) {
  .cta-final {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
}

.cta-final__main { display: grid; gap: var(--sp-4); }
.cta-final__main h2 { max-width: 14ch; }

.cta-final__aside {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.cta-final__row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.cta-final__k {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cta-final__v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cta-final__v a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;              /* WCAG 2.2 AA 2.5.8: medían 21 px de alto */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  transition: color 0.3s var(--ease-quart), text-decoration-color 0.3s var(--ease-quart);
}
@media (hover: hover) {
  .cta-final__v a:hover { color: var(--accent); text-decoration-color: currentColor; }
}

/* --------------------------------------------------------------------------
   15. Contacto / footer
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 950px) { .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }

.info-list { display: grid; gap: var(--sp-4); }
.info__k { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.35rem; }
.info__v {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  /* El mail no tiene espacios, asi que sin esto se sale de la pantalla y
     overflow-x: clip impide recuperarlo scrolleando. Medido con el mail viejo
     (administracion@, 36 caracteres): se iba 42 px afuera en 320 px. El de hoy
     (tecnica@, 29) tiene mas margen, pero la regla se queda: el dia que vuelva
     un mail largo, esto lo sostiene. */
  overflow-wrap: anywhere;
}
.info__v a { transition: color 0.3s var(--ease-quart); }
@media (hover: hover) { .info__v a:hover { color: var(--accent); } }

.map {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  filter: grayscale(1) contrast(1.05);
  background: var(--bone);
}

.footer {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(3rem, 6vw, 5rem) var(--sp-5);
  --accent: var(--brass);   /* sobre tinta, brass-deep no se ve: el foco vuelve a latón */
}
.footer a { color: rgba(244, 241, 234, 0.72); transition: color 0.3s var(--ease-quart); }
@media (hover: hover) { .footer a:hover { color: var(--brass); } }

.footer__top { display: grid; gap: var(--sp-6); }

/* En celular las tres listas apiladas en una sola columna, con los links a 44 px
   de alto, hacían un pie de página de una pantalla y media. Van de a dos. */
@media (min-width: 380px) and (max-width: 899px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .footer__top > :first-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.75fr)); gap: var(--sp-5); } }

.footer__cta {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 16ch;
}

.footer__h {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}

/* `overflow-wrap: anywhere` y no `break-word`: sólo `anywhere` achica el ancho
   min-content, que es lo que acá hace falta. Las columnas del pie son
   `minmax(0, .75fr)`, pero el mínimo automático del ítem de grilla es el ancho
   de su contenido, y un mail sin espacios es una sola pieza. Medido con el mail
   viejo (administracion@…, 275 px): entre 900 y ~1100 px se salía del viewport
   y quedaba cortado sin scroll — a 900 px se iba 67,9 px afuera. Con
   `break-word` no cambiaba nada. El mail de hoy es más corto y hoy no llega a
   cortarse, pero la regla protege el caso. */
.footer__links { display: grid; gap: 0.6rem; font-size: 0.95rem; overflow-wrap: anywhere; }

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(244, 241, 234, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(244, 241, 234, 0.62);
}

/* Un link dentro de un bloque de texto no puede distinguirse sólo por color */
.footer__bottom a {
  color: rgba(244, 241, 234, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* WhatsApp flotante */
.wa {
  position: fixed;
  /* Sumado, no max(): con max() el botón quedaba pegado a la barra de gestos
     del iPhone en vez de separarse de ella. */
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right, 0px));
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: var(--bone);
  border: 1px solid rgba(244, 241, 234, 0.18);
  box-shadow: 0 10px 28px -14px rgba(10, 26, 20, 0.5);
  transform: translateY(120%) scale(0.85);
  opacity: 0;
  transition: transform 0.7s var(--ease-expo), opacity 0.5s var(--ease-quart), background 0.3s;
}
.wa.is-in { transform: translateY(0) scale(1); opacity: 1; }
@media (hover: hover) { .wa:hover { background: var(--forest-3); } }
.wa svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   16. Reveals
   -------------------------------------------------------------------------- */
/* Los reveals sólo existen si el JS está vivo: sin él, el contenido se ve. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 0.85s var(--ease-quart), transform 1.05s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

.js [data-reveal="mask"] {
  opacity: 1;
  transform: translate3d(0, -0.14em, 0);
  clip-path: inset(0 0 105% 0);
  transition: clip-path 1.05s var(--ease-expo), transform 1.15s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="mask"].is-in { clip-path: inset(-0.35em 0 -0.2em 0); transform: none; }

[data-reveal="fade"] { transform: none; }

/* --------------------------------------------------------------------------
   16b. Pantalla de carga

   Solo existe si hay JS: sin JS nadie la sacaria y taparia el sitio. Por eso
   cuelga de la clase .js que el flag inline pone en el <html> antes de que
   pinte nada.

   Doble red de seguridad: aparte del JS que la retira, una animacion CSS la
   saca sola a los 4 s. Si site.js no llegara a cargar, el sitio no queda
   secuestrado detras de un logo.
   -------------------------------------------------------------------------- */
.carga { display: none; }

.js .carga {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 200;
  place-content: center;
  background: var(--black);
  /* La salida es la misma mascara que usan los titulos al aparecer: la cortina
     sube y descubre la pagina, en vez de un fundido suelto. */
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s var(--ease-expo), opacity 0.5s linear 0.45s;
  animation: cargaRescate 0.01s linear 4s forwards;
}
.js .carga.is-fuera {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
  animation: none;
}
@keyframes cargaRescate { to { clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; } }

.carga__caja { display: grid; justify-items: center; gap: clamp(1.1rem, 2.6vw, 1.6rem); }

.carga__mark {
  width: clamp(76px, 12vw, 120px);
  height: auto;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: cargaLogo 1.1s var(--ease-expo) 0.1s forwards;
}
.carga__nombre {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: cargaLogo 1.1s var(--ease-expo) 0.26s forwards;
}
.carga__nombre span:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  letter-spacing: 0.02em;
  color: var(--bone);
}
.carga__nombre span:last-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
}
@keyframes cargaLogo { to { opacity: 1; transform: none; } }

/* La barra mide carga real: la mueve el JS segun las imagenes que ya bajaron */
.carga__barra {
  width: clamp(140px, 22vw, 240px);
  height: 1px;
  background: rgba(244, 241, 234, 0.16);
  overflow: hidden;
}
.carga__prog {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--foil);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.5s var(--ease-quart);
}

/* Mientras la cortina esta puesta no se scrollea: si no, el visitante mueve
   una pagina que todavia no ve. */
.js body.esta-cargando { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .carga { transition: opacity 0.3s linear; animation-delay: 1.2s; }
  .js .carga.is-fuera { clip-path: none; }
  .carga__mark, .carga__nombre { animation: none; opacity: 1; transform: none; }
  .carga__prog { transition: none; }
}

/* Aviso para quien navega sin JavaScript: el formulario no puede abrir WhatsApp
   y hay que darle el telefono y el mail para que pueda escribir igual. */
.nota-nojs {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--brass-deep);
  background: rgba(200, 162, 74, 0.07);
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   17. Utilidades
   -------------------------------------------------------------------------- */
/* Estaba escrita con `clip: rect()`, que es de 1999, está deprecada y sólo
   funciona sobre position:absolute. `clip-path` no tiene esa atadura.
   El position:absolute igual se queda: es lo que saca al honeypot del flujo de
   .form (display:grid), que si no le sumaría una fila y un gap muertos. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-brass { color: var(--accent); }
.section--dark .text-brass { color: var(--accent-on-dark); }
.mt-auto { margin-top: auto; }
.center { text-align: center; }
.divider { height: 1px; background: var(--line); border: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text-2);
  box-shadow: var(--shadow-1);
}
.section--dark .tag { color: rgba(244, 241, 234, 0.8); }

/* --------------------------------------------------------------------------
   17b. Dedo grueso — pantalla táctil
   Todo lo que se toca con el pulgar necesita 44 px reales, aunque el texto
   ocupe 21. Va bajo (pointer: coarse) para no engordar la interfaz de mouse.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .lang a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 0.6rem; }
  .cta-final__v a,
  .footer__links a,
  .info__v a,
  .crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__links { gap: 0.15rem; }
  .arrow-link { min-height: 44px; }
}

/* En el celular el botón flotante de WhatsApp se apoyaba justo sobre el link
   del teléfono. En Contacto sobra: la página ya tiene su botón de WhatsApp. */
.page-contacto .wa { display: none; }

/* Celular acostado: el menú medía 799 px de alto en un viewport de 390 y el
   último link quedaba fuera de pantalla. */
@media (orientation: landscape) and (max-height: 500px) {
  /* Apilado en columna el menú medía 799 px de alto en un viewport de 390 y el
     último link quedaba afuera. Acostado hay ancho de sobra: va en dos columnas. */
  .menu {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(2rem, 7vw, 5rem);
    padding-top: calc(var(--header-h) + var(--sp-3));
  }
  .menu > nav { flex: 1 1 auto; min-width: 0; }
  .menu__link { font-size: clamp(1.3rem, 7.5vh, 2.1rem); padding-block: 0.04em; }
  .menu__list { gap: 0; }
  .menu__foot {
    flex: 0 0 min(42%, 22rem);
    border-top: 0;
    padding-top: 0;
    gap: var(--sp-3);
    font-size: 0.88rem;
  }
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 2.5rem; }
  .obra-hero { min-height: auto; }
}

/* --------------------------------------------------------------------------
   17c. Modo alto contraste de Windows
   Con forced-colors el navegador borra fondos e imágenes de fondo (los
   degradados sobre foto desaparecen) y el texto claro del hero queda sobre la
   foto sin velo. El isotipo (assets/brand/logo-mark.png) ya es una imagen real
   desde el logo oficial de 01/09/2026, no un mask sobre currentColor: los
   <img> no se borran en forced-colors, así que no necesita regla acá.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .hero__scrim, .obra-hero__scrim { background: Canvas; opacity: 0.88; }
  .hero__media, .obra-hero__media { filter: grayscale(1); }
  .btn, .filter, .field input, .field textarea, .field select { border: 1px solid ButtonBorder; }
  .filter[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .card__media::after, .banda__item::after { display: none; }
  .eyebrow::before { background: CanvasText; }
}

/* --------------------------------------------------------------------------
   17d. Reemplazo de los style="" del HTML
   Este bloque existe para poder CERRAR LA CSP. Mientras quedara un solo
   atributo style="" en el HTML, style-src estaba obligado a llevar
   'unsafe-inline', que es la mitad de la defensa contra XSS: con eso, cualquier
   inyección puede repintar la página entera (fondo negro, botón falso encima
   del real). Cada regla de acá reemplaza uno de los 24 literales que antes
   viajaban adentro del atributo, 754 veces en 73 páginas.
   Si volvés a escribir un style="" en build.py, el build revienta: hay una
   guardia en write(). Eso es a propósito.
   -------------------------------------------------------------------------- */

/* --- Patrones absorbidos: NO necesitan clase nueva en el HTML --- */

/* Todo eyebrow seguido de un título llevaba este mismo margin-top escrito a
   mano (20 veces). Es una regla del sistema, no una utilidad.
   LA EXCEPCIÓN ES EL HERO DE LA HOME: ahí el par es
   `.eyebrow.hero__eyebrow + h1.hero__title` y ese h1 NUNCA tuvo margin-top,
   porque el aire lo pone el `margin-bottom` de .hero__eyebrow. Sin el :not(),
   esta regla le agregaría 1.25rem; los dos márgenes colapsan y abajo de 800px
   de viewport el hero se abre hasta 4px de más. El :not() no es adorno.
   Todo va en :where() (especificidad 0) para que cualquier clase o modificador
   de abajo lo pueda pisar sin pelear — el 404 lo necesita. :not() adentro de
   :where() tampoco suma especificidad. */
:where(.eyebrow:not(.hero__eyebrow)) + :where(h1, h2, .prose) { margin-top: 1.25rem; }
:where(.eyebrow) + :where(.form__note) { margin-top: 0.75rem; }

/* Pie: el párrafo del botón (73 páginas) y el renglón de ciudad. El color es el
   mismo que ya usa .footer__h. */
.footer__cta + p { margin-top: var(--sp-4); }
.footer__links span { color: rgba(244, 241, 234, 0.55); }

/* Ficha de obra: el título del hero corta a 16ch. Es el único h1 ahí adentro. */
.obra-hero__inner h1 { max-width: 16ch; }

/* --- Modificadores de componente (el componente se hace dueño del one-off) --- */

/* Primera sección de una página interior: arranca debajo del header fijo. */
.section--intro { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); }

/* Sección pegada a la de arriba sin aire (galería de la ficha de obra). */
.section--flush { padding-top: 0; }

/* 404: única página sin contenido propio; necesita alto mínimo para no quedar
   como una tira de 200px. Un solo uso, nombrada por su página a propósito. */
.section--404 {
  padding-top: calc(var(--header-h) + clamp(4rem, 10vw, 8rem));
  min-height: 70vh;
}
.section--404 h1 { margin-top: var(--sp-4); max-width: 12ch; }
.section--404 .lead { margin-top: var(--sp-4); }
.section--404 .hero__cta { margin-top: 2.5rem; }

/* La grilla de datos de la ficha va pegada al hero: sin línea ni aire arriba. */
.meta-grid--flush { border-top: 0; padding-top: 0; }

/* Encabezado de sección sin aire abajo (el resumen de la ficha ya lo trae). */
.section-head--flush { margin-bottom: 0; }

/* Bloque de destacados de la ficha de obra. Se come también el
   margin-bottom:1rem de su eyebrow: son la misma pieza. */
.destacados { margin-top: var(--sp-lg); }
.destacados .eyebrow { margin-bottom: var(--sp-3); }

/* Buscador de la grilla de obras. */
.field--search { max-width: 420px; margin-bottom: var(--sp-lg); }

/* Párrafo que cierra una sección con un botón o un arrow-link. Aparece 4 veces
   en la home y 60 en las fichas ("volver a obras"): es un componente, no una
   utilidad de margen. */
.block-cta { margin-top: var(--sp-lg); }

@media (min-width: 1000px) {
  /* Misión / visión: las dos columnas arrancan arriba en vez de estirarse.
     Va DENTRO del media query porque .split sólo declara align-items:stretch
     ahí adentro. Abajo de 1000px .split es una sola columna con filas auto,
     donde start y stretch dan lo mismo. */
  .split--top { align-items: start; }
}

/* --- Utilidades ---
   Prefijo: la abreviatura de la propiedad (mt-, text-), que es la convención
   que el archivo YA tenía en la sección 17 (.mt-auto, .center, .text-brass).
   Los sufijos numéricos apuntan al TOKEN (.mt-4 = var(--sp-4)), no al valor en
   rem, así que la escala queda atada a :root. El sufijo -xl marca que el paso
   es fluido, no fijo.

   OJO CON EL SELECTOR DUPLICADO: no es un typo. `.prose p + p` tiene
   especificidad (0,1,2) y le gana a una clase suelta (0,1,0); el <p> del intro
   de la home cae justo ahí. Duplicando la clase, la utilidad queda en (0,2,0) y
   gana. Lo mismo con .stats, que ya trae margin-top propio. Si "limpiás" esto a
   `.mt-4`, esos bloques pierden su aire y no te vas a enterar hasta ver la
   página. */
.mt-4.mt-4 { margin-top: var(--sp-4); }
.mt-5.mt-5 { margin-top: var(--sp-5); }
.mt-xl.mt-xl { margin-top: var(--sp-xl); }

/* Párrafo de entrada: un paso más grande que el cuerpo. Adentro de .prose,
   además, recupera el color fuerte que .prose p (0,1,1) baja a --text-2 — por
   eso el selector descendente (0,2,0). */
.text-lead { font-size: var(--step-1); line-height: 1.45; }
.prose .text-lead { color: var(--text); }


/* --------------------------------------------------------------------------
   18. Accesibilidad — reducción de movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__title .line > span { transform: none; }
  .hero__aside, .hero__scroll { opacity: 1; }
  .marquee__track { animation: none; }
  .wa { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   19. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .header, .menu, .wa, .lightbox, .hero__scroll, .marquee { display: none !important; }
  /* Lo que no se llegó a scrollear sigue en opacity:0 y saldría en blanco */
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .card__media img, .shot img, .split__thumb img { opacity: 1 !important; }
  /* Bloques oscuros: en papel el fondo no se imprime y el texto claro desaparece */
  .footer, .section--dark, .footer *, .section--dark * {
    background: #fff !important;
    color: #000 !important;
  }
  body { background: #fff; color: #000; }
  .hero, .obra-hero { min-height: auto; color: #000; }
  .hero__media, .obra-hero__media, .hero__scrim, .obra-hero__scrim { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }

}

/* ---------------------------------------------------------------------------
   Widget de contacto
   Panel anclado al boton flotante. En telefono ocupa el ancho util; en
   escritorio se abre sobre el boton, a la derecha.
   --------------------------------------------------------------------------- */
.wdg {
  position: fixed;
  z-index: 95;
  bottom: calc(clamp(1rem, 3vw, 2rem) + 52px + 0.75rem + env(safe-area-inset-bottom, 0px));
  right: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-right, 0px));
  left: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-left, 0px));
  max-width: 22.5rem;
  margin-left: auto;
  background: var(--forest);
  color: var(--bone);
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 3px;
  box-shadow: 0 24px 60px -20px rgba(10, 26, 20, 0.7);
  overflow: hidden;
  /* Sin tope, el panel crece hasta tapar el encabezado en pantallas bajas. */
  max-height: min(78vh, 34rem);
  display: flex;
  flex-direction: column;
  --line: rgba(244, 241, 234, 0.16);
  --text-2: rgba(244, 241, 234, 0.76);
  /* El foco global usa --accent = brass-deep, pensado para texto sobre
     --paper. Sobre --forest da 2.6:1 (bajo el mínimo 3:1) — mismo problema
     que .footer ya resuelve devolviendo el foco a --brass. */
  --accent: var(--brass);
}
.wdg[hidden] { display: none; }
.wdg:not([hidden]) { animation: wdg-in 0.5s var(--ease-expo) both; }
@keyframes wdg-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wdg:not([hidden]) { animation: none; }
}

.wdg__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.wdg__mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.wdg__mark svg { width: 26px; height: 26px; }
.wdg__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0rem;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}
.wdg__x {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--text-2); border-radius: 2px;
}
.wdg__x svg { width: 15px; height: 15px; }
@media (hover: hover) { .wdg__x:hover { color: var(--bone); background: rgba(244,241,234,0.08); } }

.wdg__body { padding: 1rem; display: grid; gap: 0.85rem; overflow-y: auto; }
.wdg__intro { font-size: 0.9rem; line-height: 1.5; color: var(--text-2); margin: 0; }
.wdg__form { display: grid; gap: 0.75rem; }
.wdg__f { display: grid; gap: 0.3rem; }
.wdg__l {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.wdg__f input, .wdg__f select, .wdg__f textarea {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  color: var(--bone);
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.55rem 0.65rem;
}
.wdg__f textarea { resize: vertical; min-height: 4.5rem; }
.wdg__f select { appearance: none; }
.wdg__f select option { color: #0a1a14; }
.wdg__f input::placeholder, .wdg__f textarea::placeholder { color: rgba(244, 241, 234, 0.45); }
.wdg__f :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
  background: rgba(244, 241, 234, 0.10);
}
.wdg__f.is-bad :is(input, select, textarea) { border-color: #e0876a; }
.wdg__err { font-size: 0.82rem; color: #e0876a; margin: 0; }
.wdg__send { width: 100%; justify-content: center; }
.wdg__direct {
  font-size: 0.82rem;
  color: var(--text-2);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) { .wdg__direct:hover { color: var(--brass); } }

/* Con el panel abierto, el boton flotante pasa a ser el de cerrar */
body.wdg-open .wa { background: var(--forest-3); }

/* Politica de privacidad: columna angosta, que se lea de corrido. */
.priv { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 62ch; }
.priv__b h2 {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.priv__b p { color: var(--text-2); line-height: 1.7; }
.priv__b + .priv__b { border-top: 1px solid var(--line); padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Leyenda de consentimiento debajo de los botones de envio. */
.consent {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 0.75rem;
}
.consent a { text-decoration: underline; text-underline-offset: 3px; }