/* ═══════════════════════════════════════════════════════════════
   SUN ARQUITECTOS — estudio.css
   Página Estudio (PSD mesas 10–18, columna x≈1504).
   Depende de styles.css para variables, fuentes, nav y footer.
   ═══════════════════════════════════════════════════════════════ */

.estudio {
  background: var(--c-bg);
  padding-inline: var(--gutter);
}

.estudio__inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* Etiquetas y títulos compartidos */
.estudio__label {
  font-family: var(--f-display);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-salmon);
}

.estudio__heading--after-label {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.estudio__heading {
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  letter-spacing: 0.07em;
  line-height: 1.15;
  color: var(--c-text);
  text-shadow:
    0.25px 0.0px 0 currentColor, 0.22px 0.12px 0 currentColor, 0.13px 0.22px 0 currentColor,
    0.0px 0.25px 0 currentColor, -0.12px 0.22px 0 currentColor, -0.22px 0.12px 0 currentColor,
    -0.25px 0.0px 0 currentColor, -0.22px -0.13px 0 currentColor, -0.13px -0.22px 0 currentColor,
    0.0px -0.25px 0 currentColor, 0.13px -0.22px 0 currentColor, 0.22px -0.13px 0 currentColor;
}

/* ─── Navegación interna ─────────────────────────────────────── */
.estudio-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vh, 2.5rem) 0 clamp(1.25rem, 3vh, 1.75rem);
}

.estudio-jump__link {
  position: relative;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.2s ease;
}

/* Punto separador entre links (no después del último). */
.estudio-jump__link:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(clamp(1.5rem, 3vw, 2.5rem) * -0.5);
  transform: translate(50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-muted);
}

.estudio-jump__link:hover {
  color: var(--c-salmon);
}

/* ─── Hero ──────────────────────────────────────────────────── */
.estudio__head {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vh, 5rem)) var(--gutter) 0;
  background-color: var(--c-surface);
}

.estudio__head-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

/* El eyebrow del hero principal, junto al título grande de la página,
   se percibe chico en comparación — más grande que el resto de las
   etiquetas salmón de las secciones internas. */
.estudio__head .estudio__label {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
}

.estudio__title {
  margin: clamp(1.5rem, 3vh, 2.5rem) 0 clamp(2.5rem, 5vh, 4rem);
  max-width: none;
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: var(--c-text);
  text-transform: uppercase;
  text-shadow:
    0.3px 0.0px 0 currentColor, 0.26px 0.15px 0 currentColor, 0.15px 0.26px 0 currentColor,
    0.0px 0.3px 0 currentColor, -0.15px 0.26px 0 currentColor, -0.26px 0.15px 0 currentColor,
    -0.3px 0.0px 0 currentColor, -0.26px -0.15px 0 currentColor, -0.15px -0.26px 0 currentColor,
    0.0px -0.3px 0 currentColor, 0.15px -0.26px 0 currentColor, 0.26px -0.15px 0 currentColor;
}

.estudio__hero-img {
  display: block;
  width: calc(100% + 2 * var(--gutter));
  max-width: none;
  margin-inline: calc(var(--gutter) * -1);
  height: auto;
}

.estudio__intro {
  max-width: none;
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  text-align: right;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.8;
  color: var(--c-text);
}

/* ─── Sección genérica ──────────────────────────────────────── */
.estudio__section {
  padding-block: clamp(8rem, 14vh, 12rem);
}

/* Sección alternada: banda gris carbón full-bleed para cortar la
   monotonía del negro en la página larga (cada ~2 secciones). */
.estudio__section--alt {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  background: var(--c-surface);
}

/* Sección con doble espacio vertical. */
.estudio__section--xl {
  padding-block: clamp(8rem, 14vh, 12rem);
}

/* Modificadores de padding individual para ajuste fino por sección. */
/* Categorías, justo debajo de la foto de portada: cerca de la imagen
   (a pedido del cliente, antes había ~320px de aire). */
.estudio__section--pt-up { padding-block-start: clamp(3.5rem, 7vh, 4.5rem); }
.estudio__section--pb-up { padding-block-end:   clamp(11rem, 18vh, 15rem); }
.estudio__section--p-up  { padding-block:       clamp(4.5rem, 7vh, 6rem); }

/* Sección sin encabezado propio que continúa visualmente a la anterior
   (ej.: categorías + imagen puente, a continuación de "Enfoque"). */
.estudio__section--pt-tight { padding-block-start: 0; }

/* La sección de Proceso (texto) y la Metodología que la sigue son una sola
   idea partida en dos bloques — van pegadas, sin el espacio grande de
   separación entre secciones. */
.estudio__section--pb-tight { padding-block-end: 0; }

/* Trayectoria → Publicaciones: el cliente vio mucho aire entre ambas
   secciones. Se reduce a la mitad el padding de los dos lados del salto
   (fin de Trayectoria + inicio de Publicaciones), para que el gap total
   quede a la mitad. */
.estudio__section--pb-half { padding-block-end: clamp(5.5rem, 9vh, 7.5rem); }
.estudio__section--pt-half { padding-block-start: clamp(4rem, 7vh, 6rem); }
.estudio__section--pt-up2 { padding-block-start: clamp(4.5rem, 8vh, 6rem); }
.estudio__section--pt-half2 { padding-block-start: clamp(4rem, 7vh, 5rem); }

/* Publicaciones → Clientes comerciales: un poco menos de aire. */
.estudio__section--pb-slight { padding-block-end: clamp(6rem, 10vh, 8rem); }

/* ─── Visión + categorías ───────────────────────────────────── */
.estudio-vision__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: none;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.8;
  color: var(--c-text);
}

/* Las 6 categorías en una sola línea, con la tipografía de los títulos
   de sección (ISOCP) — a pedido del cliente. En celular, 2 filas de 3. */
.estudio-vision__cats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 1.25rem;
}

.estudio-vision__cat {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--f-title);
  font-weight: var(--fw-reg);
  font-size: clamp(0.75rem, 1.3vw, 1.3rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text);
  text-shadow:
    0.25px 0.0px 0 currentColor, 0.22px 0.12px 0 currentColor, 0.13px 0.22px 0 currentColor,
    0.0px 0.25px 0 currentColor, -0.12px 0.22px 0 currentColor, -0.22px 0.12px 0 currentColor,
    -0.25px 0.0px 0 currentColor, -0.22px -0.13px 0 currentColor, -0.13px -0.22px 0 currentColor,
    0.0px -0.25px 0 currentColor, 0.13px -0.22px 0 currentColor, 0.22px -0.13px 0 currentColor;
}

.estudio-vision__cat::before {
  content: "+";
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
}

/* Cada categoría lleva a Archivo filtrado por esa categoría. */
.estudio-vision__cat a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.estudio-vision__cat a:hover {
  color: var(--c-salmon);
}

/* Antes escapaba del padding del contenedor (full-bleed, borde a borde);
   ahora queda dentro del mismo ancho que la grilla de escaleras de
   arriba, así los bordes de ambas alinean. */
.estudio-vision__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ocupa la pantalla completa: así no se asoma la sección de abajo
   (a pedido del cliente). */
.estudio-vision__section {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.estudio-vision__section .estudio__inner {
  width: 100%;
}

/* ─── Director + reconocimientos ─────────────────────────────
   Biografía de Juan Eduardo (antes en el Home) + reconocimientos de
   trayectoria abreviados, movidos acá a pedido del cliente. */
/* La foto ya no ocupa toda la altura del bloque: va en su propia fila,
   a la par del párrafo destacado y el que lo precede — el primer
   párrafo (arriba) y el resto (abajo) quedan a todo lo ancho de la
   columna de texto, sin la foto al lado. */
.estudio-founder__grid {
  display: grid;
  grid-template-columns: 1.7fr 6.3fr;
  grid-template-rows: auto auto auto auto;
  column-gap: var(--sp-xl);
  row-gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.estudio-founder__para--intro {
  grid-column: 2;
  grid-row: 1;
}

/* La foto va completa (sin recortar): en vez de forzarla a una sola fila
   (que la obligaba a un recorte tipo carnet), ocupa el alto combinado del
   párrafo destacado y el primer párrafo de trayectoria — así tiene espacio
   suficiente para mostrarse entera (object-fit: contain), quedando arriba
   alineada con el párrafo previo al destacado y su centro cerca del medio
   del destacado, tal como pide el informe. El párrafo de cierre + firma
   quedan fuera de este bloque, a todo el ancho abajo. */
.estudio-founder__figure {
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: stretch;
  position: relative;
  overflow: hidden;
}

.estudio-founder__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.estudio-founder__text {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
}

.estudio-founder__tail {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.estudio-founder__close {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.estudio-founder__para {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: #A2A2A2;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

.estudio-founder__para--highlight {
  color: var(--c-text);
}

.estudio-founder__footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 1.5rem;
}

.estudio-founder__name,
.estudio-founder__role {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.82rem, 1vw, 0.94rem);
  line-height: 1.5;
  color: var(--c-text);
  letter-spacing: 0.02em;
}

/* ─── Metodología ───────────────────────────────────────────── */
/* Los 6 pasos van en una sola línea (antes 3×2): imágenes y textos
   se achican en la misma proporción para que entren sin apretarse. */
.estudio-method__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.estudio-method__step figure {
  width: 100%;
  margin: 0 0 0.85rem;
  aspect-ratio: 7 / 8;
  overflow: hidden;
  background: var(--c-bg);
}

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

.estudio-method__num {
  display: block;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.6875rem, 0.72vw, 0.8125rem);
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin-bottom: 0.3rem;
}

.estudio-method__label {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.85vw, 0.875rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

/* ─── Proceso: párrafos de punta a punta ────────────────────── */
/* Todos los párrafos a todo el ancho de la sección, en una columna. */
.estudio-proceso__edge {
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: #A2A2A2;
}

.estudio-proceso__edge--closing {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Todo el texto de Proceso en una sola columna (a pedido del cliente). */
.estudio-proceso__cols {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

/* ─── Prefabricación: Construir con precisión ───────────────── */
.estudio-prefab__heading {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.estudio-prefab__lead {
  max-width: none;
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: #A2A2A2;
}

.estudio-prefab__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--f-display);
  font-weight: var(--fw-reg);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  line-height: 1.72;
  color: var(--c-muted);
}

.estudio-prefab__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

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

.estudio-prefab__img-caption {
  margin-top: 0.75rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ─── Publicaciones ─────────────────────────────────────────── */
/* Dos grupos: "libros" (Biennale, Issuu, Springtime — y a futuro un
   cuarto libro en la fila de Springtime) y "prensa" (el resto), en
   filas que ocupan todo el ancho de la sección según el tamaño real
   de cada imagen (horizontal = 2 columnas, vertical = 1), para que
   la sección ocupe menos alto y quede simétrica. */
.estudio-pubs {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 4vw, 3.5rem);
}

.estudio-pubs__books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  align-items: end;
}

.estudio-pubs__item {
  display: flex;
  flex-direction: column;
}

/* Biennale y Springtime quedaban muy grandes en la fila de "libros":
   se achican dentro de su misma columna (no ocupan menos lugar en la
   grilla, solo se ven más chicas), alineadas al borde izquierdo. */
.estudio-pubs__item--sm30 {
  width: 70%;
  justify-self: start;
}

/* Imágenes completas (sin recorte) que rellenan el ancho de su item,
   sin caja de fondo visible. */
.estudio-pubs__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Item enlazado: bloque clickeable con indicador ↗ y hover salmón. */
.estudio-pubs__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.estudio-pubs__link img { transition: opacity 0.3s ease; }
.estudio-pubs__link:hover img { opacity: 0.82; }
.estudio-pubs__link .estudio-pubs__name::after {
  content: " ↗";
  color: var(--c-salmon);
  font-size: 0.85em;
}
.estudio-pubs__link:hover .estudio-pubs__name { color: var(--c-salmon); }

.estudio-pubs__name {
  margin: 1.1rem 0 0.3rem;
  font-family: var(--f-body);
  font-weight: var(--fw-reg);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text);
}

.estudio-pubs__meta {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.estudio__more {
  display: flex;
  justify-content: flex-end;
  /* El espacio de abajo (hasta "Trayectoria") lo dan dos padding de
     sección apiladas (fin de esta sección + inicio de la siguiente,
     cada una clamp(8rem,14vh,12rem)). Para que el botón quede a la
     mitad de ese tramo, arriba se repite la misma cuenta. */
  margin-top: calc(clamp(8rem, 14vh, 12rem) * 2);
}

/* Justo debajo del libro Springtime de la derecha (a pedido del
   cliente), en vez de suelto al pie de toda la sección. Vive dentro
   de la grilla de libros, en la misma columna que ese último item. */
.estudio__more--pubs {
  grid-column: 2;
  margin-top: 1rem;
}

.estudio__more-link {
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.estudio__more-link:hover { color: var(--c-text); }
.estudio__more-link span { margin-left: 0.4rem; }

/* ─── Clientes ──────────────────────────────────────────────── */
.estudio-clients__img {
  display: block;
  width: 60%;
  max-width: 720px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  background: var(--c-bg);
}

/* ─── ÜZEM teaser ───────────────────────────────────────────── */
/* Ocupa la pantalla completa: así no se asoman los bordes de las
   secciones vecinas (a pedido del cliente). */
.estudio-uzem {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.5rem, 6vh, 4.5rem);
}

.estudio-uzem__heading {
  margin: 0.85rem 0 clamp(1rem, 2vw, 1.5rem);
}

.estudio-uzem__text {
  max-width: 92ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.8;
  color: var(--c-muted);
}

.estudio-uzem__imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  padding-inline: clamp(2rem, 4.5vw, 3.5rem);
}

.estudio-uzem__imgs img {
  width: 100%;
  height: clamp(200px, 26vh, 300px);
  object-fit: cover;
  display: block;
}

.estudio-uzem__link {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.estudio-uzem__link:hover { color: var(--c-text); }
.estudio-uzem__link span { margin-left: 0.4rem; }

/* ─── CTA ───────────────────────────────────────────────────── */
.estudio-final {
  background: var(--c-bg);
  min-height: calc(100svh - 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg) var(--gutter);
  text-align: center;
}

.estudio-final__text {
  width: clamp(280px, 42vw, 520px);
  max-width: clamp(280px, 42vw, 520px);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  line-height: 1.3;
  color: var(--c-text);
  text-wrap: balance;
}

.estudio-final__btn {
  display: inline-block;
  padding: clamp(0.7rem, 0.9vw, 0.9rem) clamp(1.75rem, 2.75vw, 2.5rem);
  background: #1c1c1c;
  border: 1px solid rgba(245, 245, 245, 0.4);
  font-family: var(--f-body);
  font-weight: var(--fw-thin);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.estudio-final__btn:hover {
  background: #2a2a2a;
  border-color: var(--c-text);
}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */

/* ── Tablet / mobile ancho (≤ 768px) ───────────────────────── */
@media (max-width: 768px) {
  .estudio__title { max-width: 100%; }

  /* El intro del hero deja de ir a la derecha para leerse mejor. */
  .estudio__intro { text-align: left; }

  /* Una sola columna. El orden de origen del HTML es párrafo intro, foto,
     destacado, cierre — eso dejaba un párrafo solo arriba, la foto en
     medio y el resto de los párrafos después, partiendo el texto en dos.
     Con order: la foto va primero (como una portada de la bio) y TODOS
     los párrafos siguen después, sin cortes. */
  .estudio-founder__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .estudio-founder__para--intro,
  .estudio-founder__figure,
  .estudio-founder__text,
  .estudio-founder__tail,
  .estudio-founder__close {
    grid-column: 1;
    grid-row: auto;
  }

  .estudio-founder__figure { order: -1; }
  .estudio-founder__para--intro { order: 1; }
  .estudio-founder__text { order: 2; }
  .estudio-founder__tail { order: 3; }
  .estudio-founder__close { order: 4; }

  /* Retrato chico y centrado en mobile: a un ancho más grande la cara
     queda en primer plano de toda la pantalla, fuera de proporción con
     el texto que la acompaña. */
  .estudio-founder__figure {
    aspect-ratio: 3 / 4;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
  }

  .estudio-founder__text,
  .estudio-founder__tail,
  .estudio-founder__close {
    justify-content: flex-start;
    gap: 1.25rem;
  }

  .estudio-prefab__cols,
  .estudio-prefab__imgs {
    grid-template-columns: 1fr;
  }

  /* El padding-top grande de esta sección (--pt-up, clamp hasta 15rem)
     está pensado para el aire de escritorio — en mobile, con la foto
     del hero ya achicando el ancho disponible, quedaba un salto de
     pantalla casi vacío entre la foto y las categorías. Menos aire acá. */
  .estudio__section--pt-up {
    padding-block-start: clamp(2.25rem, 5vh, 3rem);
  }

  .estudio-method__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Publicaciones a una columna, en orden de lectura. Las tapas de libro
     (--sm30) siguen achicadas como en desktop (ahí quedaban a 70% de su
     columna) — a 100% del ancho completo del teléfono se veían enormes,
     compitiendo con la revista/spread de al lado en vez de ir de
     "tapa chica + spread grande" como en desktop. */
  .estudio-pubs__books {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 2.75rem);
  }

  .estudio-pubs__item--sm30 {
    width: 60%;
  }

  /* Con 1 sola columna explícita, el link "Publicaciones y prensa" (que
     en desktop va fijo en grid-column:2, la 2da de 2) generaba una
     columna implícita extra — la grilla entera volvía a acomodarse de a
     2 por fila en vez de apilarse. */
  .estudio__more--pubs {
    grid-column: 1;
  }

  /* Imagen de clientes más grande en celular. */
  .estudio-clients__img {
    width: 100%;
    max-width: 100%;
  }

  /* ÜZEM: 3 imágenes apiladas, sin sangría lateral. */
  .estudio-uzem__imgs {
    grid-template-columns: 1fr;
    padding-inline: 0;
    gap: clamp(1.25rem, 5vw, 2rem);
  }

  .estudio-uzem__imgs img {
    aspect-ratio: 4 / 3;
  }

  /* CTA compacto: proporciones parecidas al desktop. */
  .estudio-final__text {
    font-size: clamp(1.15rem, 6vw, 1.5rem);
  }

  .estudio-final__btn {
    min-width: 0;
    width: 100%;
    max-width: 340px;
    padding: 0.7rem 1rem;
    font-size: clamp(0.7rem, 3.1vw, 0.8125rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* ── Mobile angosto (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .estudio-method__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Tablet / notebook chico (769–1100px) ──────────────────────
   Los 6 pasos de Metodología en una línea quedan ilegibles a este
   ancho: pasan a 3+3. */
@media (min-width: 769px) and (max-width: 1100px) {
  .estudio-method__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
  }
}

/* Springtime: las 2 dobles páginas de la revista van lado a lado, del
   mismo tamaño (misma proporción real, 1.333 c/u, así que dividir el
   ancho al medio no recorta ninguna) y con una separación mínima, para
   que se lean como un solo bloque — igual peso visual que la fila de
   arriba (Biennale + Issuu). Una sola leyenda para el par, no una por
   imagen. */
.estudio-pubs__spread-imgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.estudio-pubs__link--pair .estudio-pubs__spread-imgs img {
  width: 100%;
  display: block;
}

/* Columna derecha de la fila Springtime: dos dobles páginas apiladas (la
   nueva arriba, la de Casa 59 abajo) con aire entre ambas, para que se
   lean como dos publicaciones distintas y llenen el alto de la tapa de
   al lado. */
.estudio-pubs__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3vw, 2.75rem);
}

/* La tapa de Springtime (a la izquierda de esa columna doble) crece lo
   justo para que su borde superior e inferior calcen con la columna de
   al lado (solo escritorio; en celular va todo en una columna). */
@media (min-width: 769px) {
  .estudio-pubs__item--cover-stack {
    width: 82%;
  }
}

/* ═══ Celular: secciones compactas y ordenadas (≤ 768px) ═══════════
   Va al final para ganarle a las reglas de 1 columna de más arriba
   (incluida la de ≤ 480px). */
@media (max-width: 768px) {
  /* Proceso: los 6 pasos en 3 filas de 2 (en 1 columna la sección
     medía casi 2.800px de alto). */
  .estudio-method__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .estudio-vision__cats {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    gap: 1.5rem 0.5rem;
  }
  .estudio-vision__cat {
    font-size: clamp(0.625rem, 2.8vw, 0.875rem);
    gap: 0.45em;
  }
  .estudio-method__grid {
    gap: clamp(1.5rem, 5vw, 2rem) clamp(0.75rem, 3vw, 1.25rem);
  }

  /* El centrado/alineado a la derecha de la 2da y 3ra columna es para
     la grilla de 3 columnas de escritorio — en las 2 columnas de mobile
     (o 1, ≤480px) el mismo criterio (nth-child cada 3) ya no calza con
     la posición real y quedaba en zigzag. Todo a la izquierda. */
  /* ÜZEM: la primera foto a todo el ancho y las otras dos lado a lado
     debajo (antes 3 apiladas). <picture> es display:contents, así que
     el ítem de la grilla es el <img>. */
  .estudio-uzem__imgs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.625rem, 2.5vw, 1rem);
    padding-inline: 0;
  }
  .estudio-uzem__imgs > picture:first-child > img {
    grid-column: 1 / -1;
  }
  .estudio-uzem__imgs img {
    aspect-ratio: 4 / 5;
  }
  .estudio-uzem__imgs > picture:first-child > img {
    aspect-ratio: 4 / 3;
  }

  /* Prefabricados: en desktop las 3 fotos van iguales, en 3 columnas —
     en mobile 1 sola columna, las 3 apiladas del mismo tamaño (antes la
     primera quedaba grande arriba y las otras 2 chicas abajo). */
  .estudio-prefab__imgs {
    grid-template-columns: 1fr;
  }

  /* Publicaciones: sin la sangría extra, las imágenes apaisadas usan
     todo el ancho disponible (antes quedaban chicas). */
  .estudio-pubs {
    padding-inline: 0;
  }

  /* Llamado final: sin el alto de casi una pantalla completa vacía. */
  .estudio-final {
    min-height: 0;
    padding-block: clamp(4.5rem, 20vw, 6.5rem);
  }

  /* Imagen puente (entre Metodología y "Construir con precisión"): en
     desktop ocupa la pantalla completa a propósito, pero es una sola
     foto de alto natural (no full-bleed) — centrada en un min-height:
     100vh mobile dejaba ~730px de negro vacío arriba y abajo. Sin forzar
     el alto, ocupa solo lo que mide la foto. */
  .estudio-vision__section {
    min-height: 0;
  }
}