/* =================================================================
   DIPA Arquitectos — sitio
   Aplica el design system. Long-scroll editorial.
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--dipa-paper);
  color: var(--dipa-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

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

/* ---------- Layout primitives ---------- */
.pad   { padding-inline: 64px; }
.pad-l { padding-inline: 96px; }
@media (max-width: 1100px) { .pad, .pad-l { padding-inline: 32px; } }
@media (max-width: 640px)  { .pad, .pad-l { padding-inline: 20px; } }

.rule { height: 1px; background: var(--dipa-ink); border: 0; }
.rule-soft { height: 1px; background: var(--dipa-mist); border: 0; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 64px;
  color: var(--dipa-paper);
  transition: color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--dipa-paper);
  color: var(--dipa-ink);
  border-bottom-color: var(--dipa-mist);
  padding-block: 16px;
}
.site-header .logo img {
  height: 32px;
  width: auto;
  filter: invert(1);
  transition: filter var(--dur-base) var(--ease-out);
}
.site-header.scrolled .logo img { filter: none; }
.site-header nav {
  display: flex;
  gap: 32px;
  justify-self: center;
}
.site-header nav a {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  position: relative;
  padding-bottom: 4px;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-header nav a:hover { opacity: 0.55; }
.site-header .utils {
  justify-self: end;
  display: flex;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.site-header .utils .lang {
  display: flex;
  gap: 10px;
}
.site-header .utils .lang span { opacity: 0.45; cursor: pointer; transition: opacity 0.2s ease; }
.site-header .utils .lang span.sep { cursor: default; }
.site-header .utils .lang span:not(.sep):hover { opacity: 0.8; }
.site-header .utils .lang span.on { opacity: 1; cursor: default; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding-inline: 24px; }
  .site-header nav { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  color: var(--dipa-paper);
}
.hero .stage {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}
.hero .slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}
.hero .slide::after {
  /* subtle vignette so type stays readable */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.42) 100%);
  pointer-events: none;
}
.hero .caption {
  position: absolute;
  inset: auto auto 56px 64px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero .caption .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.hero .caption .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.hero .caption .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.hero .bottom-bar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 64px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.hero .bottom-bar .counter { font-family: var(--font-mono); letter-spacing: 0.04em; font-size: 11px; }
.hero .bottom-bar .ctrls { display: flex; gap: 18px; }
.hero .bottom-bar .ctrls a:hover { opacity: 0.6; }
.hero .scroll-hint {
  position: absolute;
  top: 50%; right: 32px;
  z-index: 2;
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right top;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .hero .caption { inset: auto auto 96px 24px; right: 24px; }
  .hero .bottom-bar { padding: 18px 24px; flex-wrap: wrap; gap: 12px; }
  .hero .scroll-hint { display: none; }
}

/* ---------- Photo placeholders ----------
   Cool, low-chroma "architectural" composites. The label sits at corner. */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--dipa-mist);
}
.photo img.real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo[data-label]::before {
  content: attr(data-label);
  position: absolute;
  z-index: 3;
  top: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.18);
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Each composition: stacked horizontal bands suggesting sky / building / floor */
.photo-1 {
  background:
    linear-gradient(180deg, #4d5358 0%, #6a7170 38%, #8a8c8a 38%, #b6b8b6 78%, #4a4c4a 78%, #2b2c2c 100%);
}
.photo-2 {
  background:
    linear-gradient(180deg, #a8acab 0%, #c4c6c6 32%, #6e7470 32%, #3c3f41 68%, #898b88 68%, #c8cac8 100%);
}
.photo-3 {
  background:
    linear-gradient(180deg, #2d3033 0%, #4a4e51 24%, #939695 24%, #c5c6c5 62%, #6a6b69 62%, #2f3031 100%);
}
.photo-4 {
  background:
    linear-gradient(180deg, #babcb9 0%, #989b97 28%, #5b5e5b 28%, #313334 64%, #7a7c79 64%, #a1a3a0 100%);
}
.photo-5 {
  background:
    linear-gradient(180deg, #d6d7d4 0%, #bababa 26%, #7a7d7b 26%, #4a4d4e 70%, #2c2d2e 70%, #1c1d1e 100%);
}
.photo-6 {
  background:
    linear-gradient(180deg, #5e6064 0%, #888a89 38%, #b8bab7 38%, #d6d7d4 70%, #777976 70%, #3d3f3f 100%);
}
.photo-7 {
  background:
    linear-gradient(180deg, #1e1f1f 0%, #353737 40%, #797b79 40%, #aeb0ad 78%, #5d605c 78%, #353737 100%);
}
.photo-8 {
  background:
    linear-gradient(180deg, #c1c3c0 0%, #9b9d99 22%, #4f5252 22%, #2a2c2d 58%, #797b78 58%, #b4b6b3 100%);
}
.photo-9 {
  background:
    linear-gradient(180deg, #44484a 0%, #6b6f6f 35%, #b2b4b1 35%, #cdcfcb 76%, #6e706c 76%, #2d2f2f 100%);
}

/* Portrait placeholder — softer, warmer tones to suggest a person/interior */
.photo-portrait {
  background:
    radial-gradient(ellipse at 30% 35%, #b9b4ac 0%, #8c8a87 40%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, #aaa6a0 0%, #7e7c79 40%, transparent 65%),
    linear-gradient(180deg, #cfcdc8 0%, #9a9893 50%, #4f4e4c 100%);
}

/* Optional decorative element: a thin verticals overlay to hint at facade rhythm */
.photo.has-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 56px,
    rgba(255,255,255,0.05) 56px,
    rgba(255,255,255,0.05) 57px
  );
  pointer-events: none;
}

/* ---------- Manifiesto ---------- */
.manifesto {
  padding: 160px 64px 140px;
  display: grid;
  grid-template-columns: 1fr 6fr 5fr;
  gap: 64px;
  align-items: start;
}
.manifesto .eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dipa-sage);
  font-family: var(--font-mono);
}
.manifesto .body {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--dipa-ink);
  text-wrap: pretty;
}
.manifesto .body em {
  font-style: normal;
  color: var(--dipa-stone);
}
.manifesto aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 12px;
}
.manifesto aside .pair {
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--dipa-mist);
  padding-top: 16px;
}
.manifesto aside .pair .k {
  flex: 0 0 90px;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dipa-sage);
  padding-top: 4px;
  font-family: var(--font-mono);
}
.manifesto aside .pair .v {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dipa-stone);
}

@media (max-width: 1024px) {
  .manifesto { grid-template-columns: 1fr; padding-block: 96px 80px; gap: 40px; }
}

/* ---------- Experiencia (full-bleed editorial spread) ---------- */
.experiencia {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  border-top: 1px solid var(--dipa-ink);
  align-items: stretch;
}
.experiencia .visual {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}
.experiencia .visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.experiencia .content {
  padding: clamp(48px, 6vw, 110px) clamp(40px, 5vw, 100px) clamp(56px, 6vw, 110px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 64px);
  justify-content: center;
}
.experiencia .triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.experiencia .triptych img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1);
}
.experiencia .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dipa-sage);
  margin-bottom: -16px;
}
.experiencia .eyebrow strong {
  font-weight: 400;
  color: var(--dipa-ink);
  letter-spacing: 0.18em;
}
.experiencia .exp-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 48px);
  margin: 0 0 -20px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--dipa-ink);
}
.experiencia .body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62ch;
}
.experiencia .body p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--dipa-stone);
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .experiencia { grid-template-columns: 1fr; }
  .experiencia .visual { min-height: 420px; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .experiencia .triptych { gap: 8px; }
}

/* ---------- Section title bar ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 64px 24px;
  border-bottom: 1px solid var(--dipa-ink);
}
.section-head .lhs {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dipa-sage);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 48px);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1;
}
.section-head .rhs {
  display: flex;
  gap: 18px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dipa-sage);
  font-family: var(--font-mono);
}
.section-head .rhs a:hover { color: var(--dipa-ink); }

/* ---------- Obra (asymmetric editorial grid) ---------- */
.obra {
  padding: 56px 64px 140px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 88px;
}
.obra .work { display: flex; flex-direction: column; gap: 16px; }
.obra .work .photo { width: 100%; }
.obra .work figcaption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.obra .work .num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--dipa-sage);
  padding-top: 6px;
  white-space: nowrap;
}
.obra .work .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.obra .work .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.1;
  color: var(--dipa-ink);
  letter-spacing: -0.005em;
}
.obra .work .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dipa-stone);
}
.obra .work .estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dipa-sage);
}
.obra .work .estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--dipa-stone);
  background: transparent;
}
.obra .work .estado--finalizada::before { background: var(--dipa-ink); border-color: var(--dipa-ink); }
.obra .work .estado--obra::before {
  background: linear-gradient(90deg, var(--dipa-ink) 50%, transparent 50%);
  border-color: var(--dipa-ink);
}
.obra .work .estado--proyecto::before { background: transparent; border-color: var(--dipa-sage); }
.obra .work .link {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dipa-stone);
  padding-top: 6px;
  white-space: nowrap;
}
.obra .work .link:hover { color: var(--dipa-ink); }

/* Editorial rhythm — pairs that sum to 12 columns, varied proportions.
   Pattern repeats every 6 works so it tiles any count. */
.obra { align-items: start; }
.obra .work { grid-column: span 6; }
.obra .work .photo { transition: opacity var(--dur-base) var(--ease-out); }
.obra .work:hover .photo { opacity: 0.85; }

.obra .work:nth-child(6n+1) { grid-column: span 8; }
.obra .work:nth-child(6n+1) .photo { aspect-ratio: 16 / 10; }
.obra .work:nth-child(6n+2) { grid-column: span 4; margin-top: 96px; }
.obra .work:nth-child(6n+2) .photo { aspect-ratio: 3 / 4; }
.obra .work:nth-child(6n+3) { grid-column: span 5; }
.obra .work:nth-child(6n+3) .photo { aspect-ratio: 4 / 5; }
.obra .work:nth-child(6n+4) { grid-column: span 7; margin-top: 64px; }
.obra .work:nth-child(6n+4) .photo { aspect-ratio: 4 / 3; }
.obra .work:nth-child(6n+5) { grid-column: span 7; }
.obra .work:nth-child(6n+5) .photo { aspect-ratio: 3 / 2; }
.obra .work:nth-child(6n+6) { grid-column: span 5; margin-top: 96px; }
.obra .work:nth-child(6n+6) .photo { aspect-ratio: 5 / 4; }

/* First row override — Endanik (vertical photo) tall, Fairway (horizontal photo) wide */
.obra .work:nth-child(1) { grid-column: span 5; margin-top: 0; }
.obra .work:nth-child(1) .photo { aspect-ratio: 3 / 4; }
.obra .work:nth-child(2) { grid-column: span 7; margin-top: 72px; }
.obra .work:nth-child(2) .photo { aspect-ratio: 3 / 2; }

@media (max-width: 900px) {
  .obra { grid-template-columns: 1fr; row-gap: 56px; padding-inline: 24px; padding-bottom: 80px; }
  .obra .work { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .obra .work .photo { aspect-ratio: 4 / 3 !important; }
}

/* Real photos frame to their own proportion — let the project lead the crop. */
.obra .work .photo:has(img.real) { aspect-ratio: auto !important; }
.obra .work .photo:has(img.real) img.real {
  position: static;
  inset: auto;
  height: auto;
}

/* Building façades are very tall — cap them to a portrait frame so they don't run long. */
.obra .work .photo.framed-facade:has(img.real) { aspect-ratio: 1 / 1 !important; }
.obra .work .photo.framed-facade:has(img.real) img.real {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* Manual row balancing — paired rows sum to 12 cols.
   Order: Endanik·Fairway / AP·Arevalo / Guatemala·FG / SLR·SM / Ceibos·Marupe / GC */
.obra .work:nth-child(3)  { grid-column: span 7; }   /* Casa AP */
.obra .work:nth-child(4)  { grid-column: span 5; }   /* Arevalo */
.obra .work:nth-child(5)  { grid-column: span 5; }   /* Guatemala */
.obra .work:nth-child(6)  { grid-column: span 7; }   /* Casa FG */
.obra .work:nth-child(7)  { grid-column: span 5; }   /* SLR */
.obra .work:nth-child(8)  { grid-column: span 7; }   /* Casa GC */
.obra .work:nth-child(9)  { grid-column: span 7; }   /* Casa SM */
.obra .work:nth-child(10) { grid-column: span 5; }   /* Ceibos */
.obra .work:nth-child(11) { grid-column: span 7; }   /* Casa Marupe */

/* Casa FG — lift the crop so the ground floor reads more (less sky). */
.obra .work:nth-child(6) .photo:has(img.real) { aspect-ratio: 4 / 5 !important; }
.obra .work:nth-child(6) .photo:has(img.real) img.real {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
}

/* ---------- Proceso ---------- */
.proceso {
  padding: 56px 64px 140px;
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 64px;
  align-items: start;
}
.proceso .proceso-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--dipa-ink);
  text-wrap: pretty;
  position: sticky;
  top: 96px;
}
.proceso .proceso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 48px;
}
.proceso .etapa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--dipa-ink);
}
.proceso .etapa .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dipa-sage);
}
.proceso .etapa .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--dipa-ink);
}
.proceso .etapa .desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dipa-stone);
  max-width: 40ch;
}
@media (max-width: 900px) {
  .proceso { grid-template-columns: 1fr; padding: 32px 24px 80px; gap: 40px; }
  .proceso .proceso-lede { position: static; }
  .proceso .proceso-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Estudio ---------- */
.estudio {
  border-top: 1px solid var(--dipa-ink);
}
.estudio .top {
  display: grid;
  grid-template-columns: 5fr 7fr;
}
.estudio .col-text {
  padding: 96px 56px 96px 64px;
  border-right: 1px solid var(--dipa-mist);
}
.estudio .col-text h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  margin: 0 0 32px;
  letter-spacing: -0.01em;
  max-width: 12ch;
}
.estudio .col-text p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dipa-stone);
  margin: 0 0 1.1em;
  max-width: 44ch;
}
.estudio .col-portrait {
  position: relative;
  padding: 64px 64px 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-end;
}
.estudio .col-portrait .photo {
  width: 100%;
  aspect-ratio: 4 / 5;
}
.estudio .col-portrait .photo img.real { object-position: 50% 30%; }
.estudio .col-portrait .caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dipa-stone);
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.estudio .col-portrait .caption .names {
  color: var(--dipa-ink);
}
.estudio .col-stats {
  border-top: 1px solid var(--dipa-mist);
  padding: 80px 64px 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 64px;
}
.estudio .stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--dipa-mist);
}
.estudio .stat .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dipa-sage);
}
.estudio .stat .v {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 1.8vw, 28px);
  color: var(--dipa-ink);
  line-height: 1.1;
}
.estudio .stat .note {
  font-size: 12px;
  color: var(--dipa-stone);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .estudio .top { grid-template-columns: 1fr; }
  .estudio .col-text { border-right: 0; border-bottom: 1px solid var(--dipa-mist); padding: 64px 24px; }
  .estudio .col-portrait { padding: 32px 24px 64px; }
  .estudio .col-stats { grid-template-columns: 1fr 1fr; padding: 48px 24px 64px; gap: 32px; }
}

/* ---------- Archivo / table ---------- */
.archivo {
  padding: 56px 64px 140px;
}
.archivo .row {
  display: grid;
  grid-template-columns: 56px 3.4fr 2.4fr 1.8fr 1.2fr 1.8fr 56px;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dipa-mist);
  transition: background var(--dur-base) var(--ease-out), padding-inline var(--dur-base) var(--ease-out);
  cursor: default;
}
.archivo .row.head {
  border-bottom: 1px solid var(--dipa-ink);
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dipa-sage);
}
.archivo .row:not(.head):hover {
  background: var(--dipa-n-50);
  padding-inline: 16px;
}
.archivo .row .year { font-family: var(--font-mono); font-size: 12px; color: var(--dipa-stone); }
.archivo .row .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  color: var(--dipa-ink);
  letter-spacing: -0.005em;
}
.archivo .row .place,
.archivo .row .program,
.archivo .row .size {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dipa-stone);
}
.archivo .row .estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dipa-stone);
  white-space: nowrap;
}
.archivo .row.head .estado { color: var(--dipa-sage); }
.archivo .row .estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--dipa-stone);
  flex: none;
}
.archivo .row .estado--finalizada::before { background: var(--dipa-ink); border-color: var(--dipa-ink); }
.archivo .row .estado--obra::before {
  background: linear-gradient(90deg, var(--dipa-ink) 50%, transparent 50%);
  border-color: var(--dipa-ink);
}
.archivo .row .estado--proyecto::before { background: transparent; border-color: var(--dipa-sage); }
.archivo .row .arrow {
  font-size: 16px;
  text-align: right;
  color: var(--dipa-sage);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.archivo .row:not(.head):hover .arrow {
  color: var(--dipa-ink);
  transform: translateX(6px);
}
@media (max-width: 900px) {
  .archivo { padding: 32px 24px 80px; }
  .archivo .row { grid-template-columns: 50px 1fr 40px; row-gap: 4px; }
  .archivo .row .place, .archivo .row .program, .archivo .row .size, .archivo .row .estado { display: none; }
  .archivo .row.head .place, .archivo .row.head .program, .archivo .row.head .size, .archivo .row.head .estado { display: none; }
}

/* ---------- Featured / quote ---------- */
.featured {
  position: relative;
  height: 92vh;
  min-height: 620px;
  color: var(--dipa-paper);
  overflow: hidden;
}
.featured .photo {
  position: absolute; inset: 0;
}
.featured .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
}
.featured .text {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 96px 64px 64px;
  gap: 64px;
}
.featured .text blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.featured .text .attr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 24px;
  opacity: 0.8;
}
.featured .text .right {
  align-self: end;
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.featured .text .right .num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.75;
}
.featured .text .right .name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 1.8vw, 30px);
}
.featured .text .right .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.8;
}
@media (max-width: 900px) {
  .featured .text { grid-template-columns: 1fr; padding: 72px 24px 48px; gap: 32px; }
  .featured .text .right { justify-self: start; text-align: left; }
}

/* ---------- Prensa ---------- */
.prensa {
  padding: 56px 64px 120px;
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 64px;
}
.prensa .intro {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--dipa-ink);
  max-width: 18ch;
}
.prensa .list { display: grid; gap: 0; }
.prensa .item {
  display: grid;
  grid-template-columns: 90px 1fr 2fr auto;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--dipa-mist);
  align-items: baseline;
}
.prensa .item:first-child { border-top: 1px solid var(--dipa-ink); }
.prensa .item .year { font-family: var(--font-mono); font-size: 12px; color: var(--dipa-stone); }
.prensa .item .pub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  color: var(--dipa-ink);
  letter-spacing: -0.005em;
}
.prensa .item .title {
  font-size: 14px;
  color: var(--dipa-stone);
  line-height: 1.5;
}
.prensa .item .ext {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dipa-sage);
  letter-spacing: 0.04em;
}
.prensa .item:hover .ext { color: var(--dipa-ink); }

@media (max-width: 900px) {
  .prensa { grid-template-columns: 1fr; padding: 32px 24px 80px; gap: 32px; }
  .prensa .item { grid-template-columns: 60px 1fr auto; }
  .prensa .item .title { display: none; }
}

/* ---------- Contacto ---------- */
.contacto {
  background: var(--dipa-ink);
  color: var(--dipa-paper);
  padding: 120px 64px 56px;
}
.contacto .head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  padding-bottom: 96px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.contacto .head .big {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(64px, 9vw, 144px);
  letter-spacing: -0.015em;
  line-height: 0.95;
  margin: 0;
  color: var(--dipa-paper);
}
.contacto .head .big em {
  font-style: normal;
  color: rgba(255,255,255,0.4);
}
.contacto .head .right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
  max-width: 38ch;
  justify-self: end;
}
.contacto .head .right .lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--dipa-paper);
}
.contacto .head .right .cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding: 4px 0;
  align-self: flex-start;
}
.contacto .head .right .cta:hover { opacity: 0.7; }
.contacto .grid {
  padding-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.contacto .grid .col .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}
.contacto .grid .col .v {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dipa-paper);
}
.contacto .grid .col .v a:hover { opacity: 0.6; }

.contacto .baseline {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.contacto .baseline img {
  height: 14px;
  width: auto;
  filter: invert(1);
}

@media (max-width: 900px) {
  .contacto { padding: 80px 24px 40px; }
  .contacto .head { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; }
  .contacto .head .right { justify-self: start; }
  .contacto .grid { grid-template-columns: repeat(2, 1fr); padding-top: 40px; gap: 32px; }
  .contacto .baseline { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 56px; }
}

/* ---------- Helpers ---------- */
.no-select { user-select: none; -webkit-user-select: none; }