/* ========================================================================
  HMA — sistema de diseño compartido
  Tipografia Arial/Helvetica (referencia OMA), estructura por grilla y
  microinteracciones rapidas (referencia MVRDV). Sin color de acento:
  el color lo aportan las fotos de proyecto.
   ======================================================================== */

/* Inter — la misma tipografia del portafolio del estudio ("Creando &
  construyendo ideas" esta en Inter Bold). Es libre (SIL Open Font License)
   y se sirve desde el propio dominio, sin depender de Google Fonts. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --line: #dcdcdc;
  --gray: #767676;
  --gray-dark: #4a4a4a;
  --gray-bg: #f2f2f2;
  --nav-h: 64px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* flex column + main flex:1 = footer siempre abajo, aunque la pagina tenga
   poco contenido (si no, en /buscar/ quedaba flotando a media pantalla). */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--black);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}

body>main {
  flex: 1 0 auto;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--black);
  color: var(--white);
  padding: 12px 20px;
  font-size: .85rem;
  transition: top .15s ease;
}

.skip-link:focus {
  top: 12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .container {
    padding: 0 20px;
  }
}

/* ---------- TYPE SCALE ---------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.display-1 {
  font-size: clamp(2.6rem, 7vw, 6.4rem);
}

.display-2 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
}

.display-3 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 700;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--gray-dark);
  max-width: 56ch;
  line-height: 1.55;
}

/* ---------- NAV ---------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--black);
}

.nav-inner {
  width: 100%;
  padding: 0 32px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (max-width: 640px) {
  .nav-inner {
    padding: 0 20px;
  }
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 20px;
}

.logo-mark {
  height: 20px;
  width: auto;
  display: block;
  transition: opacity .25s ease;
}

.logo-mark--light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* El header muestra solo logo + toggle, siempre — la nav completa vive en el
   panel #site-menu, calcado del patron real de mvrdv.com (main-nav-toggle +
   nav.main-nav como overlay). */

/* Header superpuesto sobre la foto del hero (solo home), transparente hasta
   que se scrollea; ahi pasa a solido. Calcado del header real de mvrdv.com. */
header.site-header.is-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background .25s ease, border-color .25s ease;
}

header.site-header.is-overlay .logo-mark--dark {
  opacity: 0;
}

header.site-header.is-overlay .logo-mark--light {
  opacity: 1;
}

header.site-header.is-overlay .menu-btn span {
  background: var(--white);
  transition: background .25s ease;
}

header.site-header.is-overlay.scrolled {
  background: var(--white);
  border-bottom-color: var(--black);
}

header.site-header.is-overlay.scrolled .logo-mark--dark {
  opacity: 1;
}

header.site-header.is-overlay.scrolled .logo-mark--light {
  opacity: 0;
}

header.site-header.is-overlay.scrolled .menu-btn span {
  background: var(--black);
}

/* Puntos de navegacion a la derecha, uno por seccion a pantalla completa
   (referencia mvrdv.com) */
.scroll-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.scroll-dots button {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1.5px solid var(--black);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.scroll-dots button.active {
  background: var(--black);
}

/* Nombre de la seccion a la izquierda del punto, como en mvrdv.com: aparece
   al pasar el mouse y se mantiene visible en el punto de la seccion actual.
   Solo texto, sin recuadro de fondo. */
.dot-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--black);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, color .2s ease;
}

.scroll-dots button:hover .dot-label,
.scroll-dots button.active .dot-label {
  opacity: 1;
}

/* Cuando los puntos quedan sobre una foto (hero o banner de proyecto), el
   texto y los puntos pasan a blanco. La clase la pone main.js observando
   que hay a la altura del centro de la pantalla. */
.scroll-dots.on-dark button {
  border-color: var(--white);
}

.scroll-dots.on-dark button.active {
  background: var(--white);
}

.scroll-dots.on-dark .dot-label {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

@media (max-width: 760px) {
  .scroll-dots {
    display: none;
  }
}

.menu-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}

.menu-btn span {
  width: 24px;
  height: 2px;
  background: var(--black);
  display: block;
  transition: opacity .15s ease, transform .15s ease;
}

.menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* z-index por encima del header (100): con 99 el header quedaba dibujado
   arriba del panel, tapaba la lupa/cruz y se comia sus clicks. */
#site-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--white);
  transform: translateY(-100%);
  transition: transform .35s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#site-menu.open {
  transform: translateY(0);
}

/* sticky y no absolute: el panel puede scrollear por dentro (pantallas bajas),
   y en absolute la lupa y la cruz se iban con el scroll. Asi quedan siempre
   visibles arriba a la derecha. */
.site-menu__controls {
  position: sticky;
  top: 22px;
  align-self: flex-end;
  margin-right: 32px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 2;
}

@media (max-width: 640px) {
  .site-menu__controls {
    top: 16px;
    margin-right: 20px;
    gap: 10px;
  }
}

.site-menu__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
  padding: 0;
}

.site-menu__icon-btn svg {
  width: 22px;
  height: 22px;
}

/* flex:1 en vez de min-height:100%: sumado a la altura de los controles y del
   buscador, el 100% hacia que el panel scrollee de gusto ~112px. */
.site-menu__inner {
  flex: 1;
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
}

@media (max-width: 640px) {
  .site-menu__inner {
    padding: 16px 20px 40px;
    gap: 32px;
  }
}

.site-menu__primary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.site-menu__primary a {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-block;
  transition: opacity .15s ease;
}

.site-menu__primary a:hover,
.site-menu__primary a[aria-current="page"] {
  opacity: .5;
}

.site-menu__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.site-menu__cats a {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gray);
}

.site-menu__cats a:hover {
  color: var(--black);
}

.site-menu__footer {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.site-menu__footer .big-link {
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  font-weight: 700;
  border-bottom: 2px solid var(--black);
  padding-bottom: 2px;
}

.site-menu__footer .social-links {
  display: flex;
  gap: 18px;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.site-menu__footer .social-links a:hover {
  text-decoration: underline;
}

/* ---------- SECTIONS ---------- */

.section {
  padding: 88px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .section {
    padding: 56px 0;
  }
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* ---------- BUTTONS / LINKS ---------- */

.btn {
  display: inline-block;
  border: 1.5px solid var(--black);
  padding: 12px 26px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
  background: var(--white);
}

.btn:hover {
  background: var(--black);
  color: var(--white);
}

.link-arrow::after {
  content: "\2197";
  margin-left: 6px;
  display: inline-block;
  transition: transform .15s ease;
}

.link-arrow:hover::after {
  transform: translate(2px, -2px);
}

/* ---------- REVEAL ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* El hero y los banners de proyecto manejan su propia animacion (zoom de
   imagen + fade de texto por separado, ver mas abajo) — no el fade generico
   de .reveal en el bloque entero. */
.hero-home--photo.reveal,
.project-banner.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- FOOTER ---------- */

footer.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 0 0 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .82rem;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .65);
}

.footer-inner a:hover {
  text-decoration: underline;
}

/* ========================================================================
   HOME — grilla de temas tipo MVRDV
   ======================================================================== */

.hero-home {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--black);
}

.hero-home h1 {
  max-width: 16ch;
}

.hero-home .lede {
  margin-top: 24px;
}

/* Hero de la home, con foto de fondo a pantalla completa (referencia mvrdv.com) */
.hero-home--photo {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  padding: 64px 0 56px;
  overflow: hidden;
  color: var(--white);
}

.hero-home--photo img,
.hero-home--photo .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.1);
  transition: transform 1.6s cubic-bezier(.16, .6, .3, 1);
}

.hero-home--photo.in img,
.hero-home--photo.in .hero-video {
  transform: scale(1);
}

/* El video del estudio es en blanco y negro y muy claro: sin este velo el
   titulo blanco se pierde contra las paredes y las ventanas a contraluz.
   Carga sobre el escenario y no sobre la seccion, porque con GSAP activo el
   escenario es el que queda sticky y recorta. */
.hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 34%, rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, 0) 100%);
}

.hero-content-wrap {
  width: 100%;
  padding: 0 32px;
  transform-origin: left bottom;
  transform: scale(var(--hero-scale, 1));
  will-change: transform;
}

@media (max-width: 640px) {
  .hero-content-wrap {
    padding: 0 20px;
  }
}

.hero-content-wrap>* {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease .3s, transform .9s ease .3s;
}

.hero-home--photo.in .hero-content-wrap>* {
  opacity: 1;
  transform: translateY(0);
}

/* Sin capa oscura: el texto resalta con sombra propia, igual que mvrdv.com
   (.post-teaser-banner__content__claim usa text-shadow, no un overlay). */
.hero-home--photo .eyebrow,
.hero-home--photo h1,
.hero-home--photo .lede {
  color: var(--white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .6);
}

@media (max-width: 640px) {
  .hero-home--photo {
    min-height: 76vh;
  }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--black);
}

@media (max-width: 640px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-cell {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.stat-cell:last-child {
  border-right: none;
}

.stat-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: .78rem;
  color: var(--gray);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---------- PROJECT BANNERS (secuencia vertical, referencia mvrdv.com) ---------- */

.banner-stack {
  display: flex;
  flex-direction: column;
}

.project-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 92vh;
  overflow: hidden;
  border-bottom: 1px solid var(--black);
}

.project-banner:not(.project-banner--split) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 1.4s cubic-bezier(.16, .6, .3, 1);
}

.project-banner:not(.project-banner--split).in img {
  transform: scale(1);
}

.project-banner:not(.project-banner--split):hover img {
  transform: scale(1.04);
}

.project-banner__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 56px 32px;
  color: var(--white);
  transform-origin: left bottom;
  transform: scale(var(--pb-scale, 1));
  will-change: transform;
}

/* La entrada (fade + translate) vive en un wrapper interno, separado del
   escalado por scroll de arriba, para que ambos transform no choquen. */
.pb-content-inner {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease .2s, transform .8s ease .2s;
}

.project-banner.in .pb-content-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Sin capa oscura sobre la foto: el texto resalta con sombra propia, igual
   que mvrdv.com (.post-teaser-banner__content__claim usa text-shadow). */
.project-banner__content .eyebrow,
.project-banner__content h2,
.project-banner__content p {
  color: var(--white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .6);
}

.project-banner__content h2 {
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  max-width: 20ch;
  margin-top: 12px;
}

.project-banner__content p {
  max-width: 50ch;
  margin-top: 16px;
  font-size: 1rem;
}

.project-banner--split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--line);
  background: var(--white);
  color: var(--black);
}

.project-banner--split__media,
.project-banner--split__copy {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.project-banner--split__media {
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
}

.project-banner--split__link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-banner--split__image {
  position: static;
  width: auto;
  height: auto;
  max-width: min(100%, 680px);
  max-height: min(76vh, 760px);
  object-fit: contain;
  transform: none;
  transition: none;
}

.project-banner--split__copy {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(40px, 7vw, 112px) clamp(28px, 8vw, 128px);
}

.project-banner--split__copy .eyebrow {
  margin-bottom: 10px;
}

.project-banner--split__copy h2 {
  margin-bottom: 6px;
}

.project-banner--split__award {
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.25;
}

.project-banner--split__lede {
  font-size: 1rem;
  line-height: 1.5;
}

.project-banner--split__lede p + p {
  margin-top: 14px;
}

.project-banner--youtube__media {
  position: relative;
  min-height: 100vh;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  overflow: visible;
  background: var(--white);
}

.project-banner--youtube__media::after {
  display: none;
}

.project-banner--youtube__image {
  width: min(92%, 760px);
  height: auto;
  max-height: 62vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(.2) contrast(1.04);
  transition: transform .5s ease, filter .3s ease;
}

.project-banner--youtube__media:hover .project-banner--youtube__image {
  transform: scale(1.03);
  filter: grayscale(0) contrast(1.04);
}

.project-banner--youtube__play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: clamp(68px, 7vw, 92px);
  height: clamp(68px, 7vw, 92px);
  color: var(--white);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .38));
}

@media (max-width: 640px) {
  .project-banner {
    min-height: 72vh;
  }

  .project-banner__content {
    padding: 32px 20px;
  }

  .project-banner--split {
    grid-template-columns: 1fr;
  }

  .project-banner--split__media,
  .project-banner--split__copy {
    min-height: auto;
  }

  .project-banner--split__media {
    min-height: 54vh;
    padding: 28px 20px;
  }

  .project-banner--split__image {
    max-height: 48vh;
  }

  .project-banner--split__copy {
    padding: 40px 20px 56px;
  }

  .project-banner--youtube__media {
    min-height: 54vh;
    padding: 28px 20px;
  }

  .project-banner--youtube__image {
    width: 100%;
    max-height: 42vh;
  }
}

.banner-interlude {
  padding: 140px 32px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.banner-interlude p {
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.5;
  font-weight: 400;
}

.banner-interlude a:not(.interlude-btn) {
  border-bottom: 1.5px solid var(--black);
  font-weight: 700;
}

.banner-interlude .count-inline {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.interlude-btn {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex: none;
  transition: background .15s ease, color .15s ease;
}

.interlude-btn:hover {
  background: var(--black);
  color: var(--white);
}

@media (max-width: 640px) {
  .banner-interlude {
    padding: 88px 20px;
    gap: 24px;
  }
}

/* ========================================================================
  PROYECTOS
   ======================================================================== */

.filters {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--black);
  width: fit-content;
}

.filter-btn {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 10px 18px;
  border: none;
  border-right: 1px solid var(--black);
  background: var(--white);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.filter-btn:last-child {
  border-right: none;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--black);
  color: var(--white);
}

.view-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

.view-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.view-toggle button.active {
  color: var(--black);
  border-color: var(--black);
}

/* Obras y proyectos. El estudio los nombra distinto —"obra" es lo
  construido, "proyecto" es un concurso o algo todavia en curso— y hasta
  ahora el sitio los mezclaba. Va al lado del conmutador de vista, separado
   por una linea, porque filtra otra cosa que las categorias de la izquierda. */
.filtros-derecha {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.estado-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.estado-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.estado-toggle button.active {
  color: var(--black);
  border-color: var(--black);
}

@media (max-width: 640px) {
  .estado-toggle {
    padding-right: 0;
    border-right: 0;
  }
}

.project-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--black);
}

.project-grid.active {
  display: grid;
}

@media (max-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  display: block;
  background: var(--white);
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(.85) contrast(1.05);
  transition: filter .3s ease, transform .5s ease;
}

/* Las caratulas verticales se encuadran desde el centro. Dos Casas Conde es
   la excepcion: la fachada debe quedar completa y el recorte caer en la calle. */
.project-card:is([data-slug="araoz"], [data-slug="malabia"], [data-slug="moshu"],
  [data-slug="osten"], [data-slug="people"]) img,
.project-list-row:is([data-slug="araoz"], [data-slug="malabia"], [data-slug="moshu"],
  [data-slug="osten"], [data-slug="people"]) img {
  object-position: center center;
}

.project-card[data-slug="dos-casas-conde"] img,
.project-list-row[data-slug="dos-casas-conde"] img {
  object-position: center 20%;
}

.project-card:hover img {
  filter: grayscale(0);
  transform: scale(1.04);
}

.card-cat {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--white);
  background: rgba(0, 0, 0, .55);
  padding: 5px 10px;
}

.card-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent);
  color: var(--white);
  transform: translateY(6px);
  opacity: .94;
  transition: transform .25s ease;
}

.project-card:hover .card-plate {
  transform: translateY(0);
}

.card-plate .p-name {
  font-weight: 700;
  font-size: 1.15rem;
}

.card-plate .p-meta {
  font-size: .68rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .8);
  margin-top: 6px;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.card-plate .p-meta span {
  flex: 0 0 auto;
}

.card-plate .p-meta span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card.hidden,
.project-list-row.hidden {
  display: none;
}

.project-list {
  display: none;
}

.project-list.active {
  display: block;
}

.project-list-row {
  display: grid;
  grid-template-columns: 90px 1fr 200px 140px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

@media (max-width: 700px) {
  .project-list-row {
    grid-template-columns: 60px 1fr;
  }
}

.project-list-row .plr-thumb {
  width: 90px;
  height: 64px;
  overflow: hidden;
}

@media (max-width: 700px) {
  .project-list-row .plr-thumb {
    width: 60px;
    height: 44px;
  }
}

.project-list-row .plr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.6);
  transition: filter .2s ease;
}

.project-list-row:hover .plr-thumb img {
  filter: grayscale(0);
}

.project-list-row .plr-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.project-list-row .plr-cat,
.project-list-row .plr-loc {
  font-size: .78rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .02em;
}

@media (max-width: 700px) {

  .project-list-row .plr-cat,
  .project-list-row .plr-loc {
    display: none;
  }
}

/* ---------- FICHA DE PROYECTO (pagina individual /proyectos/<slug>/) ---------- */

/* ---------- PORTADA: NOVEDADES Y PREMIOS, UNA MITAD CADA UNO ---------- */

.dos-mitades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

@media (max-width: 900px) {
  .dos-mitades {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* El premio mas reciente, destacado sobre la grilla de sellos. */
.premio-ultimo {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.premio-ultimo img {
  width: 74px;
  height: auto;
  object-fit: contain;
}

.premio-ultimo__anio {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gray);
}

.premio-ultimo__nombre {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  margin-top: 3px;
}

.premio-ultimo__res {
  font-size: .84rem;
  color: var(--gray);
  margin-top: 3px;
}

/* Todos los sellos juntos: el cliente los queria a la vista en la portada,
   ocupando el ancho completo de su mitad. Siete columnas es lo que cierra
   justo con los 21 sellos —tres filas parejas, sin ninguno solo al final—
   y el alto lo pone la proporcion de cada imagen. */
.sellos-premios {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px 10px;
  align-items: center;
}

@media (max-width: 1100px) {
  .sellos-premios {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 900px) {
  .sellos-premios {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (max-width: 560px) {
  .sellos-premios {
    grid-template-columns: repeat(5, 1fr);
  }
}

.sellos-premios img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* En gris no compiten con la foto de la obra que va arriba; recuperan el
     color al pasar por encima. */
  filter: grayscale(1);
  opacity: .62;
  transition: opacity .3s ease, filter .3s ease;
}

.sellos-premios li:hover img {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sellos-premios img {
    transition: none;
  }
}

/* Rotulo de estado en los banners del home. Va sobre el titulo, con la
   misma familia de estilo que el eyebrow del resto del sitio. */
.banner-estado {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .5);
}

.banner-estado--proyecto {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}

.banner-estado--proyecto::before {
  content: '';
  display: inline-block;
  width: .4em;
  height: .4em;
  margin-right: .65em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .08em;
}

/* Sello de estado en la tarjeta. El cliente pidio que se vea de entrada si
   el trabajo esta construido o todavia en proceso, sin tener que abrirlo.
   Va arriba a la derecha, del lado opuesto a la categoria. */
.card-estado {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 5px 10px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(6px);
}

/* En proceso lleva un punto que lo distingue de un vistazo. */
.card-estado--proyecto::before {
  content: '';
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-right: .6em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .06em;
}

.project-meta-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gray);
}

.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--line);
}

.project-gallery[hidden] {
  display: none;
}

.project-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  margin: 0;
}

.project-row--reverse {
  grid-template-columns: 1fr 1fr;
}

.project-row--reverse .project-row__photo {
  order: -1;
}

/* Fila sin texto: la foto toma el ancho completo. Mantiene la misma altura
   que las filas con texto para que ninguna imagen se vea accidentalmente
   mas importante que la siguiente. */
.project-row--sola {
  grid-template-columns: 1fr;
}

.project-row--sola .project-row__photo {
  min-height: 62vh;
}

/* La altura de la fila la define el texto; sin un minimo, las frases cortas
   dejaban la foto muy chata. */
.project-row__photo {
  overflow: hidden;
  min-height: 62vh;
}

.project-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1s cubic-bezier(.16, .6, .3, 1);
}

.project-row.in .project-row__photo img {
  transform: scale(1);
}

.project-row__text {
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 56px 6%;
}

/* El texto tenia un tope de 40 caracteres por linea y quedaba como una
   columnita angosta en el medio de media pantalla. Las memorias de obra son
   largas: se les da hasta 56 y el bloque crece con el ancho disponible, para
   que el parrafo llene su mitad en vez de flotar. */
.project-row__text p {
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  line-height: 1.62;
  max-width: 56ch;
}

/* Cuando la memoria es larga, el texto manda sobre la altura de la fila y
   conviene achicarlo un punto antes que dejar que empuje la foto. */
.project-row__text p.es-larga {
  font-size: clamp(.95rem, 1.02vw, 1.06rem);
  line-height: 1.58;
}

@media (max-width: 760px) {

  .project-row,
  .project-row--reverse {
    grid-template-columns: 1fr;
  }

  .project-row--reverse .project-row__photo {
    order: 0;
  }

  .project-row__text {
    padding: 32px 24px;
  }

  .project-row__photo {
    aspect-ratio: 4/3;
    min-height: 0;
  }

  .project-row--sola .project-row__photo {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
}

.related-projects {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  margin-top: 32px;
}

@media (max-width: 700px) {
  .related-projects {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   PRENSA
   ======================================================================== */

/* 6 columnas en vez de 3: el cliente pidio las fotos de prensa a la mitad. */
.press-featured {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  /* El fondo va en blanco y la linea la dibuja cada tarjeta con su outline.
     Antes la linea era este fondo asomando por el gap, y cuando la ultima
     fila quedaba incompleta —nueve notas en dos columnas, por ejemplo— la
     celda vacia se veia como un recuadro gris. */
  background: var(--white);
  border: 1px solid var(--black);
  margin-bottom: 64px;
}

/* La grilla es de seis, y la seccion de videos muestra cinco: con seis
   columnas quedaba una celda vacia al final de la fila. Se ajusta a la
   cantidad que haya, sin tocar el resto de las grillas de prensa.

   Va acotada a pantalla ancha a proposito. Como es un id, le gana a las
   medias queries de .press-featured, asi que sin este limite mantenia las
   cinco columnas tambien en el telefono: los videos quedaban en cinco
   columnas de 100 px, la fila se salia de la pantalla y arrastraba al pie. */
@media (min-width: 1101px) {
  /* auto-fit reparte el ancho entre las tarjetas que haya y descarta las
     columnas que sobran, asi que la fila queda llena vengan cinco videos del
     canal o cuatro. Con un numero fijo de columnas, un video de menos dejaba
     un hueco. */
  #youtubeEntrevistas {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

/* Entre el telefono y la pantalla ancha van dos columnas, y si la cantidad de
   videos es impar el ultimo ocupa las dos. Antes, con cuatro columnas y cinco
   videos, el ultimo quedaba solo y sobraban 616 px de blanco adentro del
   recuadro. */
@media (min-width: 621px) and (max-width: 1100px) {
  #youtubeEntrevistas {
    grid-template-columns: repeat(2, 1fr);
  }

  #youtubeEntrevistas > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Rotulo de seccion como los de la pagina Estudio ("Fundadores", "Que
   hacemos", "Enfoque creativo"). Estaba repetido como estilo en linea en
   cinco lugares; aca queda en un solo sitio. */
.eyebrow--seccion {
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .press-featured {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 760px) {
  .press-featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* En telefono las grillas de prensa bajan a una sola columna: se recorren
   hacia abajo, como el resto de la pagina, en vez de apretar cuatro o cinco
   tarjetas en un ancho donde el titulo caia letra por letra. De paso ninguna
   fila queda incompleta, asi que no hay celda sobrante al final. */
@media (max-width: 620px) {

  #youtubeEntrevistas,
  .press-featured {
    grid-template-columns: 1fr;
  }
}

.press-card {
  background: var(--white);
  display: block;
  /* El outline no ocupa espacio, asi que cae dentro del gap de 1px y las
     tarjetas vecinas comparten una sola linea. */
  outline: 1px solid var(--line);
}

.press-card .press-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.press-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.4);
  transition: filter .3s ease, transform .5s ease;
}

.press-card:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.press-card .press-body {
  padding: 10px 12px 14px;
}

.press-card .press-outlet {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray);
}

.press-card .press-title {
  font-size: .82rem;
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.3;
}

.press-card .press-date {
  font-size: .66rem;
  color: var(--gray);
  margin-top: 8px;
}

.press-feed {
  border-top: 1px solid var(--black);
}

.press-year-head {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 28px 0 10px;
  position: sticky;
  top: var(--nav-h);
  background: var(--white);
  z-index: 5;
}

.press-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* --- archivo completo de publicaciones ---------------------------------
   Son 255 notas desde 2003. Se muestran los tres años mas recientes y el
   resto entra con el boton, igual que las galerias y la prensa. */
.pub-anio.is-extra { display: none; }
.pub-lista.is-open .pub-anio.is-extra { display: block; }

/* Una celda de grilla no se encoge por debajo de su contenido salvo que se
   le diga. Sin esto, un nombre largo sin espacios donde cortar —"Society of
   British and International Interior Design"— estiraba la fila y con ella
   toda la pagina: en pantalla angosta aparecian 101 px de scroll lateral. */
.press-row > * { min-width: 0; overflow-wrap: anywhere; }

/* Rotulo de año dentro de la lista de notas online. El estudio las queria
   agrupadas "por carpeta segun los años": con catorce entradas seguidas no se
   veia donde terminaba un año. Queda pegado arriba mientras se recorre su
   grupo, asi que siempre se sabe que año se esta leyendo. */
.pr-anio {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--white);
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--gray-dark);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--black);
}

.pr-anio:first-child { padding-top: 0; }

/* Con la lista desplegada aparecian 101 px de scroll lateral en pantalla
   angosta, sin que ninguna caja de la seccion se saliera: algo pinta unos
   pixeles mas alla de su caja. Se recorta aca. clip y no hidden a proposito:
   hidden crea un contenedor de scroll y anula el sticky de los años. */
#todasLasPublicaciones { overflow-x: clip; }

.pub-lista .press-row a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 0, 0, .25);
}

.pub-lista .press-row a:hover,
.pub-lista .press-row a:focus-visible {
  text-decoration-color: currentColor;
}

.pub-more { margin-top: 26px; }

@media (max-width: 700px) {
  .press-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.press-row .pr-date {
  font-size: .78rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.press-row .pr-text {
  font-size: .95rem;
}

.press-row .pr-text b {
  font-weight: 700;
}

.press-row .pr-outlet {
  font-size: .8rem;
  color: var(--gray);
  white-space: nowrap;
}

.press-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ========================================================================
  ESTUDIO
   ======================================================================== */

.team-photo {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 1px solid var(--black);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

@media (max-width: 640px) {
  .team-photo {
    aspect-ratio: 4/3;
  }
}

.founders-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--black);
}

@media (max-width: 640px) {
  .founders-row {
    grid-template-columns: 1fr;
  }
}

.founder-cell {
  background: var(--white);
  padding: 32px;
}

.founder-cell .role {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray);
  font-weight: 700;
}

.founder-cell h3 {
  font-size: 1.8rem;
  margin-top: 10px;
}

.team-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}

.team-group h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--black);
  margin-bottom: 14px;
  font-weight: 700;
}

.team-names {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.team-names span {
  font-weight: 700;
  font-size: 1.05rem;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid var(--line);
}

.team-names span:last-child {
  border-right: none;
}

.awards-seals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  align-items: center;
}

@media (max-width: 900px) {
  .awards-seals {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 560px) {
  .awards-seals {
    grid-template-columns: repeat(3, 1fr);
  }
}

.awards-seals img {
  filter: grayscale(1);
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease;
}

.awards-seals img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.timeline-list {
  display: flex;
  flex-direction: column;
}

.timeline-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.timeline-row .tl-year {
  font-weight: 700;
  font-size: 1rem;
}

.timeline-row .tl-text {
  font-size: .92rem;
  color: var(--gray-dark);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 800px) {
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.pillar h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.pillar p {
  font-size: .92rem;
  color: var(--gray-dark);
  line-height: 1.6;
}

/* ========================================================================
   CONTACTO
   ======================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

@media (max-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.office-card {
  padding: 28px 0;
  border-top: 1px solid var(--black);
}

.office-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.office-card p {
  line-height: 1.7;
  color: var(--gray-dark);
  font-size: .95rem;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}

.contact-form .field-full {
  grid-column: 1/-1;
}

.contact-form label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray);
  margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--black);
  padding: 8px 0;
  font-family: inherit;
  font-size: .98rem;
  color: var(--black);
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
}

.contact-form textarea {
  min-height: 110px;
}

/* Campo trampa para bots: invisible para personas, pero no display:none
   (algunos bots ignoran los ocultos asi). Vale para los dos formularios. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .form-status {
  font-size: .85rem;
  margin-top: 4px;
}

.contact-form .form-status.ok {
  color: #1a6b2f;
}

.contact-form .form-status.err {
  color: #a3302a;
}

.contact-cta {
  margin-top: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.contact-cta .big-link {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  border-bottom: 2px solid var(--black);
  padding-bottom: 4px;
}

.social-links {
  display: flex;
  gap: 18px;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.social-links a:hover {
  text-decoration: underline;
}

/* ---------- UTILIDADES DE ESPACIADO ---------- */

.mt-10 {
  margin-top: 10px;
}

.mt-14 {
  margin-top: 14px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-20 {
  margin-bottom: 20px;
}

.pt-0 {
  padding-top: 0;
}

.pt-32 {
  padding-top: 32px;
}

.pb-32 {
  padding-bottom: 32px;
}

.no-border {
  border-bottom: none;
}

.text-gray {
  color: var(--gray);
}

.span-all {
  grid-column: 1/-1;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.plr-meta {
  display: none;
}

/* ---------- CONTACTO FLOTANTE ----------
   Antes era un boton que saltaba directo a la pantalla intermedia de
   api.whatsapp.com (poco prolija). Ahora abre un panel dentro de la
   propia pagina con las vias de contacto reales del estudio. */

.contact-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 91;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: transform .15s ease;
}

.contact-fab:hover {
  transform: scale(1.06);
}

.contact-fab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.contact-fab .icon-close {
  display: none;
}

.contact-fab[aria-expanded="true"] .icon-chat {
  display: none;
}

.contact-fab[aria-expanded="true"] .icon-close {
  display: block;
}

.contact-pop {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 91;
  width: min(300px, calc(100vw - 48px));
  background: var(--white);
  border: 1px solid var(--black);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.contact-pop.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

.contact-pop__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray);
}

.contact-pop__list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.contact-pop__list a {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: opacity .15s ease;
}

.contact-pop__list a:hover {
  opacity: .55;
}

.contact-pop__list a span {
  font-weight: 400;
  font-size: .8rem;
  color: var(--gray);
}

/* ========================================================================
   BUSCADOR (/buscar/) — referencia mvrdv.com/search
   ======================================================================== */

.search-page {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) 32px 96px;
  min-height: 70vh;
}

@media (max-width: 640px) {
  .search-page {
    padding: calc(var(--nav-h) + 24px) 20px 64px;
  }
}

/* Titulo "en hueco": solo contorno, como el SEARCH de mvrdv */
.search-page__title {
  text-align: center;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gray);
  margin-bottom: 32px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gray-bg);
  padding: 14px 20px;
}

.search-bar input {
  flex: 1;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  padding: 0;
}

.search-bar input::placeholder {
  color: var(--gray);
  font-weight: 700;
}

.search-bar input:focus {
  outline: none;
}

.search-bar__icon {
  flex: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gray);
  display: flex;
  align-items: center;
  transition: color .15s ease;
}

.search-bar__icon:hover {
  color: var(--black);
}

.search-bar__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.search-count {
  margin: 18px 0 0;
  font-size: .8rem;
  color: var(--gray);
}

.search-count b {
  color: var(--black);
}

.search-results {
  margin-top: 24px;
}

.search-result {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.search-result:hover .search-result__title {
  opacity: .55;
}

.search-result__thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--gray-bg);
}

.search-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-result__tipo {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray);
}

.search-result__title {
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 6px;
  transition: opacity .15s ease;
}

.search-result__desc {
  margin-top: 8px;
  color: var(--gray-dark);
  font-size: .95rem;
}

.search-result mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.search-empty {
  padding: 28px 0;
  color: var(--gray);
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .search-result {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .search-result__thumb {
    aspect-ratio: 16/9;
  }
}

/* Boton de WhatsApp dentro del panel: mismo aspecto que los enlaces vecinos */
.contact-pop__wa {
  padding: 12px 0;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--black);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: opacity .15s ease;
}

.contact-pop__wa:hover {
  opacity: .55;
}

.contact-pop__wa span {
  font-weight: 400;
  font-size: .8rem;
  color: var(--gray);
}

/* Formulario de captura previo a abrir WhatsApp */
.contact-pop__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.contact-pop__form[hidden] {
  display: none;
}

.contact-pop__lead {
  margin: 0 0 6px;
  font-size: .85rem;
  color: var(--gray-dark);
  line-height: 1.45;
}

.contact-pop__form label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray);
}

.contact-pop__form input[type="text"],
.contact-pop__form input[type="tel"] {
  border: none;
  border-bottom: 1px solid var(--black);
  background: none;
  font-family: inherit;
  font-size: .95rem;
  padding: 6px 0;
  color: var(--black);
  margin-bottom: 6px;
}

.contact-pop__form input:focus {
  outline: none;
  border-bottom-width: 2px;
}

.contact-pop__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 12px;
  font-size: .78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-dark);
  line-height: 1.4;
  cursor: pointer;
}

.contact-pop__check input {
  margin: 2px 0 0;
  flex: none;
}

.contact-pop__form .btn {
  width: 100%;
  justify-content: center;
}

.contact-pop__form .form-status {
  font-size: .8rem;
  margin: 8px 0 0;
}

/* ---------- DOCUMENTO LEGAL (/privacidad/) ---------- */

.legal-updated {
  margin-top: 18px;
  font-size: .8rem;
  color: var(--gray);
}

.legal-doc {
  max-width: 760px;
}

.legal-doc h2 {
  font-size: 1.15rem;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.legal-doc h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-doc p {
  margin: 0 0 14px;
  color: var(--gray-dark);
  line-height: 1.65;
}

.legal-doc ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--gray-dark);
  line-height: 1.65;
}

.legal-doc li {
  margin-bottom: 8px;
}

.legal-doc strong {
  color: var(--black);
}

.legal-doc a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-inner a {
  text-decoration: none;
}

.footer-legal {
  margin-left: 18px;
}

/* ---------- PREMIOS (/premios/) ---------- */

.award-feed {
  margin-top: 32px;
}

.award-year-block[hidden] {
  display: none;
}

.award-row {
  display: grid;
  grid-template-columns: 78px 2fr 280px 160px 1fr 120px;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.award-row__left,
.award-row__content {
  display: contents;
}

.award-row__logo {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 78px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.award-row__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .8;
}

.award-row__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.award-row__obra {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: .82rem;
  color: var(--gray);
  margin-top: 4px;
}

.award-row__obra a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.award-row__desc {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  font-weight: 400;
  font-size: .84rem;
  line-height: 1.45;
  color: #4a4a4a;
}

.award-row__res {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--black);
  text-align: left;
  white-space: nowrap;
}

.award-row__city {
  grid-column: 6;
  /* Saltamos a la columna 6, dejando la 5 vacía */
  grid-row: 1 / 3;
  align-self: center;
  font-size: .78rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: right;
  /* Alineado a la derecha para que quede FULL pegado al borde */
  white-space: nowrap;
}

/* Los sellos se ven siempre, sin depender del hover: son la prueba del
   premio, no un adorno que se descubre pasando el mouse. */
.award-row__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Los sellos son siluetas negras con alpha. Aca van tal cual, sobre blanco.
     El pie los invierte a blanco porque su fondo es negro. */
  opacity: .8;
}

.award-row__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.spec-row--team dd {
  line-height: 1.55;
}

.award-row__name a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: #b5b5b5;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color .2s ease;
}

.award-row__name a:hover,
.award-row__name a:focus-visible {
  text-decoration-color: currentColor;
}

/* Que se premio, debajo del nombre del galardon. Va en la misma celda que
   el nombre para no sumar una columna a la grilla. */
.award-row__desc {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  font-size: .84rem;
  line-height: 1.45;
  color: #4a4a4a;
  max-width: 46ch;
}

/* La obra premiada va como segunda linea dentro de la misma celda, para no
   sumar una columna a la grilla ni romper el corte de la version angosta. */
.award-row__obra {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: .82rem;
  color: var(--gray);
}

.award-row__obra a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 0, 0, .25);
}

.award-row__obra a:hover,
.award-row__obra a:focus-visible {
  color: #000;
  text-decoration-color: currentColor;
}

.award-row__res {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--black);
}

.award-row__city {
  font-size: .78rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  .award-row {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 5px;
    padding: 18px 0;
  }

  .award-row__logo {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    width: 48px;
    height: 40px;
    flex: 0 0 48px;
  }

  .award-row__name {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .award-row__obra {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .award-row__desc {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    max-width: none;
    margin-top: 3px;
  }

  .award-row__res {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    margin-top: 4px;
    white-space: normal;
  }

  .award-row__city {
    display: none;
  }
}

/* ---------- SOLAPAS PRENSA / NEWS ---------- */

.press-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--black);
  margin-bottom: 28px;
}

.press-tab {
  background: none;
  border: none;
  padding: 0 0 12px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}

.press-tab:hover {
  color: var(--black);
}

.press-tab.active {
  color: var(--black);
  border-bottom-color: var(--black);
}

.press-group[hidden] {
  display: none;
}

/* ---------- FOOTER AMPLIADO ---------- */

/* Tres columnas: contacto a la izquierda, el logo al medio y las redes en
   iconos a la derecha. El estudio pidio "un zocalo mucho mas chico", asi que
   ademas baja el aire de arriba y de abajo. */
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  padding: 34px 32px 26px;
}

@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 20px 24px;
    text-align: left;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col h4 {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 6px;
}

.footer-col a,
.footer-col span {
  font-size: .92rem;
  color: var(--white);
}

.footer-col span {
  color: rgba(255, 255, 255, .6);
}

.footer-col a {
  transition: opacity .15s ease;
}

.footer-col a:hover {
  opacity: .6;
}

.footer-awards {
  padding: 28px 32px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

@media (max-width: 640px) {
  .footer-awards {
    padding: 22px 20px;
  }
}

.footer-awards__title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 18px;
}

.footer-awards__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
}

@media (max-width: 640px) {
  .footer-awards__row {
    gap: 14px 20px;
    justify-content: flex-start;
  }
}

.footer-award {
  display: inline-flex;
  align-items: center;
}

.footer-award img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .85;
  transition: opacity .2s ease;
}

.footer-award:hover img {
  opacity: 1;
}

@media (max-width: 640px) {
  .footer-award img {
    height: 36px;
  }
}

/* ---------- ICONOS DE REDES (contacto) ---------- */

.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.social-icons a:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}


.social-icons svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ---------- FICHA TECNICA DE PROYECTO (referencia mvrdv.com) ---------- */

.project-specs {
  /* La linea de arriba quedaba pegada al renglon de datos que va encima
     ("EDIFICIO RESIDENCIAL - EN PROCESO / BUENOS AIRES / ..."): 28 px de
     separacion no alcanzan cuando ese renglon se parte en dos lineas. */
  margin: 52px 0 0;
  border-top: 1px solid var(--line);
  max-width: 720px;
}

.spec-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  /* El texto respiraba poco contra las lineas de arriba y de abajo. */
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .spec-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.spec-row dt {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray);
}

.spec-row dd {
  margin: 0;
  font-size: .95rem;
  color: var(--black);
}

.award-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.award-chip {
  display: inline-block;
  border: 1px solid var(--black);
  padding: 5px 11px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .15s ease, color .15s ease;
}

.award-chip:hover {
  background: var(--black);
  color: var(--white);
}

/* premios en las tarjetas de la grilla */
.card-plate .p-awards {
  margin-top: 6px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .95);
}

/* ---------- ESTUDIO: bloques de foto + texto ---------- */

.work-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  margin: 32px 0 48px;
}

@media (max-width: 760px) {
  .work-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.work-split__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* La foto del estudio es un panoramico de 1200x630: en una columna de 528 px
   quedaba una franja de 277 px de alto, muy chica al lado del texto. Aca toma
   el ancho completo y el alto sale de su proporcion; el texto pasa debajo. */
.work-split--ancha {
  grid-template-columns: 1fr;
}

.work-split--ancha .work-split__text {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 24px 40px;
  align-items: start;
}

.work-split--ancha .work-split__text .bloque-texto {
  margin: 0;
}

.work-split__text p {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--gray-dark);
}

.work-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0 48px;
}

@media (max-width: 760px) {
  .work-duo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.work-duo figure {
  margin: 0;
}

.work-duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3;
}

/* ---------- BARRA DE PREMIOS DEL PROYECTO (franja negra, ref. mvrdv) ---------- */

.award-bar {
  background: var(--black);
  color: var(--white);
  padding: 40px 0;
}

.award-bar__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.award-bar__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .6);
  margin: 0;
  flex: none;
}

.award-bar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
}

.award-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: opacity .2s ease;
}

.award-bar__item:hover {
  opacity: .65;
}

.award-bar__item img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
}

.award-bar__item span {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .award-bar {
    padding: 28px 0;
  }

  .award-bar__inner {
    gap: 18px;
  }

  .award-bar__item img {
    height: 44px;
  }

  .award-bar__item span {
    font-size: .7rem;
  }
}

/* ---------- GALERIA COMPLETA DEL PROYECTO ---------- */

/* Seis columnas en vez de tres: el estudio pidio las fotos "a la mitad, por
   lo menos", para que la galeria muestre mas de una vez. Con la mitad de
   ancho entra el doble de material en la misma altura de pantalla. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-top: 28px;
}


@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery-grid__item {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
/* Los planos cierran la tanda que se ve de entrada. Son dibujos sobre
   blanco: se muestran enteros y no recortados como las fotos, porque
   recortar un plano es cortarle la planta. */
/* Un plano ocupa dos columnas. En una sola mide 199 px de ancho y a ese
   tamaño las lineas del dibujo no se distinguen: queda una mancha gris.
   Con dos ronda los 400 y al menos se lee la planta. */
.gallery-grid__item--plano {
  grid-column: span 2;
  background: #fff;
  border: 1px solid var(--line);
}

.gallery-grid__item--plano img {
  object-fit: contain;
  padding: 8px;
  filter: none;
}


.gallery-grid__item:hover img {
  transform: scale(1.04);
}

.founder-li {
  display: inline-block;
  margin-top: 12px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  transition: opacity .15s ease;
}

.founder-li:hover {
  opacity: .55;
}

/* ============================================================================
   GSAP + SCROLLTRIGGER + LENIS
   ---------------------------------------------------------------------------
   config/gsap.js agrega .gsap-active al <html> solo si GSAP cargo de verdad.
   Si no cargo (CSP, red caida, JS apagado) la clase no aparece y sigue
   funcionando el reveal por CSS de mas arriba: nada queda invisible.

   Con .gsap-active apagamos los estados iniciales y las transiciones del
   sistema viejo, porque ahora los estados los fija GSAP con estilos inline y
   dos motores animando el mismo transform se pelean.
   ========================================================================= */

.gsap-active .reveal,
.gsap-active .reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}

.gsap-active .hero-home--photo img,
.gsap-active .project-banner:not(.project-banner--split) img,
.gsap-active .project-row__photo img {
  transition: none;
}

.gsap-active .hero-content-wrap,
.gsap-active .project-banner__content {
  transform: none;
}

.gsap-active .hero-content-wrap>*,
.gsap-active .pb-content-inner {
  opacity: 1;
  transform: none;
  transition: none;
}

.gsap-active .project-banner:not(.project-banner--split):hover img {
  transform: none;
}

/* ---------- PORTADA: PISTA DE SCROLL Y ESCENARIO ---------------------------
   La seccion se estira mas alla de la pantalla para tener recorrido, y el
   escenario queda pegado arriba mientras dura ese sobrante. Es lo que permite
   que la secuencia del titulo ocurra a la vista en vez de irse hacia arriba a
   mitad de camino. Sticky y no pin de ScrollTrigger: sticky lo resuelve el
   compositor, sin espaciadores ni reescritura de posiciones. */

.gsap-active .hero-home--photo {
  --pista: 240vh;
  min-height: var(--pista);
  display: block;
  padding: 0;
  align-items: initial;
  /* Imprescindible: un ancestro con overflow distinto de visible se convierte
     en el contenedor del sticky y lo anula. El recorte de la foto pasa al
     escenario, que es donde tiene que estar. */
  overflow: visible;
}

@media (max-width: 1100px) {
  .gsap-active .hero-home--photo {
    --pista: 210vh;
  }
}

@media (max-width: 700px) {
  .gsap-active .hero-home--photo {
    --pista: 185vh;
  }
}

.gsap-active .hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 64px 0 56px;
}

.gsap-active .hero-home--photo img,
.gsap-active .hero-home--photo .hero-video {
  z-index: 0;
}

/* El velo queda entre el video y el texto: por encima de 0, por debajo de 1. */
.gsap-active .hero-stage::after {
  z-index: 0;
}

.gsap-active .hero-content-wrap {
  position: relative;
  z-index: 1;
}

/* En la portada el tamaño de descanso es menor que el del resto del sitio: el
   titulo llega a escala 1,4 en su pico, y de ahi sale el tamaño que se ve.
   Si se dejara el clamp original, a 1,4 se saldria de pantalla y se cortaria. */
.gsap-active .hero-home--photo h1 {
  font-size: clamp(1.9rem, 5.6vw, 5rem);
  /* El limite de caracteres por linea es lo que hace que el titulo entre a
     escala 1,4. Sin el, en un telefono la linea completa se sale de pantalla
     y el escenario la recorta: escalar no vuelve a partir el texto. De paso,
     dos lineas apiladas dan mas escalonado en la aparicion. */
  max-width: 13ch;
  will-change: transform;
}

.gsap-active .hero-content-wrap {
  will-change: transform, opacity;
}

/* Mascara por linea: la de afuera recorta, la de adentro se mueve. El padding
   negativo compensa el recorte para que no se coman las colas de g, j, p, y. */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.line>span {
  display: block;
}

/* ---------- BANNERS DE PROYECTO: MISMA MECANICA QUE LA PORTADA -------------
   Cada banner recibe su propia pista y su escenario sticky, para que el titulo
   pueda emerger, sostener el pico y achicarse a la vista, igual que el hero.
   La pista es mas corta (170vh) porque son seis seguidos: con 240vh cada uno,
   recorrer la home serian catorce pantallas de scroll solo de portadas. */

.gsap-active .project-banner:not(.project-banner--split) {
  --pista: 170vh;
  min-height: var(--pista);
  display: block;
  align-items: initial;
  /* Igual que en la portada: un ancestro con overflow distinto de visible se
     convierte en el contenedor del sticky y lo anula. */
  overflow: visible;
}

@media (max-width: 1100px) {
  .gsap-active .project-banner:not(.project-banner--split) {
    --pista: 155vh;
  }
}

@media (max-width: 700px) {
  .gsap-active .project-banner:not(.project-banner--split) {
    --pista: 140vh;
  }
}

.gsap-active .banner-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.gsap-active .project-banner:not(.project-banner--split) img {
  z-index: 0;
}

.gsap-active .project-banner__content {
  position: relative;
  z-index: 1;
}

/* Mismo criterio que en la portada: el tamaño de descanso baja para que el
   pico entre en pantalla sin recortarse, y el limite de caracteres por linea
   garantiza que escalar no saque el texto por el costado. */
.gsap-active .project-banner__content h2 {
  font-size: clamp(1.8rem, 4.6vw, 3.6rem);
  max-width: 15ch;
}

.gsap-active .project-banner__content {
  will-change: transform, opacity;
}

/* ---------- LENIS ----------------------------------------------------------
   Mientras Lenis maneja el scroll, el navegador no debe intentar suavizarlo
   por su cuenta ni frenar en los anclas. */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Con prefers-reduced-motion los modulos no arman ninguna timeline, asi que en
   la practica nunca se escriben estilos inline. Esta lista es la red de
   seguridad: cubre exactamente los selectores que animan los modulos, para
   que un estado a medio aplicar no pueda esconder contenido. Se limita a esos
   selectores a proposito: un catch-all sobre main romperia los transform que
   si hacen falta, como el del boton flotante de contacto. */
.gsap-reduced .reveal,
.gsap-reduced .line>span,
.gsap-reduced .pb-content-inner,
.gsap-reduced .pb-content-inner>*,
.gsap-reduced .hero-content-wrap,
.gsap-reduced .hero-content-wrap>*,
.gsap-reduced .project-banner__content,
.gsap-reduced .banner-interlude p,
.gsap-reduced .project-row__text,
.gsap-reduced .section-head .eyebrow,
.gsap-reduced .section-head h1,
.gsap-reduced .section-head h2,
.gsap-reduced .section-head h3,
.gsap-reduced .section-head .btn,
.gsap-reduced .hero-home .eyebrow,
.gsap-reduced .hero-home h1,
.gsap-reduced .lede,
.gsap-reduced .project-meta-row,
.gsap-reduced .spec-row,
.gsap-reduced .project-card,
.gsap-reduced .project-list-row,
.gsap-reduced .gallery-grid__item,
.gsap-reduced .press-card,
.gsap-reduced .press-row,
.gsap-reduced .award-row,
.gsap-reduced .award-bar__item,
.gsap-reduced .footer-award,
.gsap-reduced .stat-cell {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

.gsap-reduced .hero-home--photo img,
.gsap-reduced .hero-home--photo .hero-video,
.gsap-reduced .project-banner img,
.gsap-reduced .project-row__photo img {
  transform: none !important;
}

/* Con reduced-motion la portada vuelve a ser una seccion normal de una
   pantalla: sin pista de scroll no hay secuencia que recorrer. */
.gsap-reduced .hero-home--photo {
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  padding: 64px 0 56px;
}

.gsap-reduced .hero-stage {
  position: static;
  height: auto;
  padding: 0;
  display: block;
}

.gsap-reduced .hero-home--photo h1 {
  font-size: clamp(2.6rem, 7vw, 6.4rem);
}

.gsap-reduced .lede,
.gsap-reduced .hero-home--photo h1,
.gsap-reduced .line>span {
  filter: none !important;
}

.gsap-reduced .project-banner:not(.project-banner--split) {
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
}

.gsap-reduced .banner-stage {
  position: static;
  height: auto;
  display: block;
}

.gsap-reduced .project-banner__content h2 {
  font-size: clamp(2rem, 5.5vw, 4.2rem);
}

/* Las seis redes en el menu, con los mismos iconos que en contacto. El menu
  tiene fondo blanco y bastante aire, asi que solo hace falta ajustar el
   tamaño y dejar que envuelvan en pantallas chicas. */
.social-icons--menu {
  gap: 14px;
  flex-wrap: wrap;
}

.social-icons--menu a {
  width: 40px;
  height: 40px;
}

@media (max-width: 640px) {
  .social-icons--menu {
    gap: 10px;
  }
}

/* ---------- GALERIA: SEIS Y EL RESTO A PEDIDO ------------------------------
   Una obra puede tener cien fotos. Mostrarlas todas de entrada convierte la
   ficha en un scroll interminable y hace que el visitante nunca llegue a
   "Mas proyectos". Se muestran seis y el resto queda a un clic. */

/* El mismo mecanismo sirve para las galerias de obra y para la grilla de
   videos: se muestran las primeras y el resto espera detras del boton. */
.gallery-grid__item.is-extra,
.press-featured>.is-extra {
  display: none;
}

.gallery-grid.is-open .gallery-grid__item.is-extra,
.press-featured.is-open>.is-extra {
  display: block;
}

.gallery-more {
  display: inline-block;
  margin-top: 22px;
}

/* --- memoria descriptiva de la obra -------------------------------------
  El texto lo escribio el estudio y son ocho o nueve parrafos: se muestran
  los dos primeros y el resto queda plegado, con el mismo boton que usan
  las galerias y la prensa. La columna se corta en 62 caracteres, que es
   el ancho donde el ojo no pierde el renglon al volver. */
.project-memoria {
  padding: 56px 0 clamp(48px, 7vw, 96px);
}

/* El texto va a dos columnas: la ficha ocupa el ancho completo y debajo
  quedaba media pagina vacia a la derecha. Con dos columnas cada renglon
   se acorta solo, sin necesidad de limitarlo a mano. */
.memoria-cuerpo {
  columns: 2;
  column-gap: clamp(32px, 4.5vw, 76px);
}

/* Cuando hay fotos disponibles, el script convierte la memoria en un relato
   editorial de una sola columna y reparte las imagenes entre los parrafos. */
.memoria-cuerpo--intercalada {
  columns: 1;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.memoria-cuerpo--intercalada > p {
  max-width: 62ch;
}

.memoria-inline-photo {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
  margin: clamp(28px, 4vw, 58px) 0;
  overflow: hidden;
}

.memoria-inline-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.memoria-cuerpo:not(.is-open) > .memoria-inline-photo--extra {
  display: none;
}

.memoria-cuerpo.is-open > .memoria-inline-photo--extra {
  display: block;
}

.memoria-cuerpo>p {
  margin: 0 0 1.15em;
  font-size: clamp(1rem, .4vw + .95rem, 1.1rem);
  line-height: 1.72;
  color: #4a4a4a;
  /* el mismo gris que usa .lede */
}

/* Un parrafo no puede empezar en el ultimo renglon de una columna ni
   terminar en el primero de la siguiente. */
.memoria-cuerpo>p {
  orphans: 3;
  widows: 3;
}

/* Del tercer parrafo en adelante, solo con la memoria abierta. */
.memoria-cuerpo>p:nth-of-type(n+3) {
  display: none;
}

.memoria-cuerpo.is-open>p:nth-of-type(n+3) {
  display: block;
}

/* Angosto: una sola columna, y ahi si conviene topear el renglon. */
@media (max-width: 900px) {
  .memoria-cuerpo {
    columns: 1;
  }

  .memoria-cuerpo>p {
    max-width: 55ch;
  }

  .memoria-inline-photo {
    aspect-ratio: 4 / 3;
    margin: 28px 0;
  }
}

/* --- boton de "seguir leyendo" ------------------------------------------
   No es un boton de accion como los demas del sitio: es una continuacion
   de la lectura. Por eso va sin recuadro, con una linea fina que se
   completa al pasar por encima, y un signo que gira al abrir. */
.memoria-more {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: 26px;
  padding: 0 0 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--black);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  position: relative;
}

.memoria-more::before {
  /* La linea: arranca al 34% y se completa al pasar por encima.
     Se estira con scaleX y no con width: animar el ancho obliga al
     navegador a rehacer el layout en cada cuadro, y una escala se
     resuelve en el compositor. */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.16, .7, .3, 1);
}

.memoria-more:hover::before,
.memoria-more:focus-visible::before {
  transform: scaleX(1);
}

.memoria-more::after {
  content: '';
  width: .5em;
  height: .5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.16em) rotate(45deg);
  transition: transform .35s cubic-bezier(.16, .7, .3, 1);
}

.memoria-more[aria-expanded="true"]::after {
  transform: translateY(.06em) rotate(-135deg);
}

.memoria-more:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {

  .memoria-more::before,
  .memoria-more::after {
    transition: none;
  }
}

/* El filtro de prensa marca las filas con el atributo hidden, pero .press-row
   declara display: grid, y una regla de display explicita le gana al
   comportamiento por defecto de hidden: las filas seguian todas a la vista
   aunque el contador dijera otra cosa. */
.press-row[hidden],
.award-row[hidden],
.award-year-block[hidden] {
  display: none !important;
}


/* Los dos telefonos del estudio, juntos bajo la unica oficina. Miami dejo de
   figurar como sede: quedo el numero, que es lo unico que el estudio quiere
   mantener de ahi. */
.office-tels {
  margin-top: 10px;
}

.office-tels a {
  color: inherit;
  transition: opacity .15s ease;
}

.office-tels a:hover {
  opacity: .6;
}


/* ---------- PRENSA Y NOVEDADES, A DOS COLUMNAS ----------
   El estudio pidio partir la pagina al medio: lo que publican otros sobre
   ellos de un lado, lo que ellos hacen —charlas, clases, entrevistas— del
   otro. Cada columna crece por su cuenta. */
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 1000px) {
  .dos-columnas {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.col-medios {
  min-width: 0;
}

/* Tres tarjetas por fila dentro de media pantalla, en vez de las seis que
   ocupaban el ancho completo. */
.press-featured--col {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 22px;
}

/* Esta regla va despues de la general de 620 px, asi que es la que manda para
   esta grilla: tiene que repetir la misma columna unica. */
@media (max-width: 620px) {
  .press-featured--col {
    grid-template-columns: 1fr;
  }
}

.col-sub {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 700;
  margin: 28px 0 12px;
}

.col-medios .mt-32 {
  margin-top: 40px;
}

/* En media pantalla la fila de tres columnas no entra: fecha arriba, titulo
   debajo y el medio al pie, mas compacto, que es lo que pidio el estudio
   cuando dijo que habia demasiada distancia entre una cosa y la otra. */
.press-feed--col .press-row,
.col-medios .timeline-row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
}

.press-feed--col .pr-date,
.col-medios .tl-year {
  font-size: .7rem;
  letter-spacing: .06em;
}

.press-feed--col .pr-text {
  font-size: .9rem;
  line-height: 1.45;
}

.press-feed--col .pr-outlet {
  font-size: .74rem;
  white-space: normal;
}

.col-medios .tl-text {
  font-size: .9rem;
  line-height: 1.45;
}


/* ---------- MIEMBROS DE ----------
   Cierra la pagina de estudio. Van los nombres mientras no lleguen los sellos
   que pidio el cliente: los logos los tiene Victoria. Cuando lleguen, cada
   fila suma su logo arriba y el texto pasa a ser el pie. */
.asociaciones {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 36px 28px;
  align-items: start;
}

.asociaciones li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Worldcob no es una asociacion sino un certificado, y en el portafolio
   figura separado por una linea. Se mantiene esa distincion. */
.asociaciones .aso--aparte {
  border-left: 1px solid var(--line);
}

@media (max-width: 700px) {
  .asociaciones .aso--aparte {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
}

/* Los sellos vienen del PDF del portafolio y su original mide unos 100 px de
   ancho, asi que se muestran chicos a proposito: agrandarlos solo los
   ensuciaria. Si el estudio manda los archivos originales, se reemplazan y
   este tope se puede subir. */
.asociaciones img {
  max-width: 96px;
  height: auto;
  width: auto;
}

.aso-nombre {
  font-weight: 700;
  font-size: .92rem;
}

.aso-detalle {
  font-size: .78rem;
  color: var(--gray);
  line-height: 1.5;
  max-width: 22ch;
}


/* ---------- ESTUDIO: TEXTO EMPAREJADO CON LA FOTO ----------
   Los pilares y los pasos dejaron la grilla de tarjetas y pasan a leerse al
   lado de la imagen, en parrafos separados. El pedido fue literal: que no
   quedara "un todo entero" sino agrupado en parrafitos, y que cada foto
   tuviera su texto al lado en vez de bandas sueltas sin leer. */
.work-split__text .bloque-texto+.bloque-texto {
  margin-top: 26px;
}

.work-split__text .bloque-texto h4 {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}

.work-split__text .bloque-texto p {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--gray-dark);
  margin: 0;
}

/* Alterna el lado: una seccion con la foto a la izquierda y la siguiente a la
   derecha, para que la pagina no baje siempre por el mismo carril. */
.work-split--reverse .work-split__photo {
  order: 2;
}

@media (max-width: 760px) {
  .work-split--reverse .work-split__photo {
    order: 0;
  }
}

/* Una foto no se muestra mas grande que su archivo. Esta mide 444 px de
   ancho, asi que ese es su tope y la frase ocupa el resto. La foto va a la
   derecha: el bloque de arriba la tiene a la izquierda, y asi la pagina
   alterna en vez de bajar siempre por el mismo carril. */
.estudio-nota {
  margin-top: 44px;
  display: grid;
  /* Las dos columnas se miden por su contenido y el par va centrado, con el
     mismo aire de los dos lados. Con 1fr la de texto estiraba hasta el borde
     y dejaba casi mil pixeles de nada entre la frase y la foto. */
  grid-template-columns: minmax(0, 24rem) minmax(0, 444px);
  justify-content: center;
  gap: 48px;
  align-items: center;
}

.estudio-nota__foto {
  margin: 0;
}

.estudio-nota__foto img {
  width: 100%;
  height: auto;
  display: block;
}

.estudio-nota__texto {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--gray-dark);
  max-width: 34ch;
  margin: 0;
}

@media (max-width: 760px) {
  .estudio-nota {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ---------- PIE: LOGO Y REDES ---------- */
.footer-marca {
  display: flex;
  justify-content: center;
}

.footer-marca img {
  height: 26px;
  width: auto;
  opacity: .9;
}

@media (max-width: 860px) {
  .footer-marca {
    justify-content: flex-start;
  }
}

/* Los telefonos van debajo de la direccion, el de Estados Unidos debajo del
   de Argentina. Sin rotulo de ciudad: el estudio pidio que Miami no figure
   como sede, solo el numero. */
.footer-col a[href^="tel:"] {
  color: rgba(255, 255, 255, .85);
}

.footer-col--redes {
  align-items: flex-end;
}

@media (max-width: 860px) {
  .footer-col--redes {
    align-items: flex-start;
  }
}

.social-icons--pie {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.social-icons--pie a {
  width: 20px;
  height: 20px;
  color: var(--white);
  opacity: .8;
  transition: opacity .15s ease;
}

.social-icons--pie a:hover {
  opacity: 1;
}

.social-icons--pie svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ---------- ESTUDIO: LA FOTO DE LOS SOCIOS ----------
   Horizontal y a todo el ancho, con el texto debajo en dos columnas. La
   version vertical obligaba a partir la pagina y dejaba a los socios a media
   pantalla, que era justo lo que el estudio no queria. */
.socios-banda {
  margin: 0;
}

.socios-banda img {
  width: 100%;
  height: auto;
  display: block;
}

.socios-texto {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

.socios-texto>.eyebrow,
.socios-texto>h2 {
  grid-column: 1;
}

.socios-texto>h2 {
  margin-top: 10px;
}

.socios-texto>p {
  grid-column: 2;
  margin: 0;
}

.socios-texto>p+p {
  margin-top: 16px;
}

@media (max-width: 800px) {
  .socios-texto {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .socios-texto>.eyebrow,
  .socios-texto>h2,
  .socios-texto>p {
    grid-column: 1;
  }
}


/* Corte dentro de una columna: cuando arranca un tema nuevo debajo del
   anterior, como los videos debajo de las notas de prensa. */
.col-corte {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}