/* ═══ nosotros.css ═══ */
/* ============================================================
   NOSOTROS

   Dos bloques, tres generaciones.

   1. EL ORIGEN — medio hero: retrato del abuelo a un costado,
      el relato al otro. 5/7, nunca 6/6.
   2. LA FAMILIA — padre e hijo, uno al lado del otro, pero con
      proporciones distintas y desfase vertical. Dos retratos
      idénticos en una grilla perfecta se leen como "página de
      equipo" de plantilla; distintas proporciones y una caída
      desplazada se leen como una publicación.

   Los espacios de foto vacíos NO son cajas grises. Son placas
   con la especificación de lo que va adentro — sirven de brief
   de fotografía y se ven deliberados hasta que llegue la imagen.
   ============================================================ */

.nosotros {
  background: var(--hueso);
  color: var(--tinta);
  padding-block: clamp(72px, 9vw, 132px);
}

/* ---- Bloque 1: el origen ------------------------------------ */
.origen {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
  .origen {
    grid-template-columns: 5fr 7fr;   /* nunca mitades exactas */
    align-items: center;
  }
}

.origen__texto { max-width: 54ch; }

.nosotros__eyebrow {
  margin: 0 0 var(--s4);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--piedra);
}

.origen__titulo {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: var(--d2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 17ch;
}

.origen__texto p {
  margin: 0 0 1.15em;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.62;
}
.origen__texto p:last-child { margin-bottom: 0; }

/* ---- Bloque 2: la familia ----------------------------------- */
.familia {
  margin-top: clamp(72px, 9vw, 132px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--linea);
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}
@media (min-width: 900px) {
  .familia {
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  /* Sin desfase: padre e hijo arrancan a la misma altura.
     El argumento a favor del escalonado era evitar la "grilla de
     equipo", pero rompía la alineación con el resto de la página, y
     una jerarquía visual entre los dos no corresponde. La variedad
     la aportan las proporciones distintas de cada retrato (1:1 y
     3:4), que ya alcanza. */
  .familia { align-items: start; }
}

/* Los tres nombres al mismo tamaño y más grandes: son las personas,
   no un pie de foto. El del abuelo estaba en 11px en versalitas
   —tratamiento de leyenda— mientras padre e hijo iban en display. */
.persona__nombre {
  display: block;
  margin: clamp(20px, 2.4vw, 28px) 0 6px;
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.persona__pie { display: block; }
.persona__pie .persona__nombre { margin-top: clamp(18px, 2vw, 24px); }

.persona__rol {
  display: block;
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: var(--small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laton);          /* ~2.9:1 sobre hueso: por eso va en
                                   versalitas y nunca como texto corrido */
}
.persona__bio {
  margin: 0;
  max-width: 46ch;
  color: var(--piedra);
  line-height: 1.62;
}

/* ---- Retratos ----------------------------------------------- */
.retrato { margin: 0; }
/* Los dos retratos no salen de la misma sesión: el del padre tiene
   fondo gris degradado y el del hijo blanco puro. Sobre hueso, uno
   se recorta y el otro flota. El filete y el fondo blanco común
   hacen que cada uno se lea como lámina montada y la diferencia
   pase a ser fotográfica en vez de accidental.
   Arreglo de fondo: una sesión nueva con los tres retratos —
   mismo fotógrafo, mismo fondo, mismo grado. */
.retrato img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--linea);
}

/* Proporciones deliberadamente distintas entre las tres personas */
.retrato--abuelo img,
.retrato--abuelo .retrato__hueco { aspect-ratio: 4 / 5; }
.retrato--padre img,
.retrato--padre .retrato__hueco  { aspect-ratio: 1 / 1; }
.retrato--hijo img,
.retrato--hijo .retrato__hueco   { aspect-ratio: 3 / 4; }

/* El hueco: una placa con la especificación de la foto que falta.
   No es un marcador de posición gris — es un encargo escrito. */
.retrato__hueco {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--cal);
  border: 1px solid var(--linea);
  color: var(--piedra);
}
.retrato__hueco b {
  display: block;
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin-bottom: 4px;
}
.retrato__hueco span {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.retrato__pie {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}

/* .muestra y .pendiente se movieron a tokens.css: son
   convención de todo el sitio. */

/* ---- Cuando Nosotros es su propia página ---------------------
   No hay hero que empuje el contenido, así que la sección tiene
   que despejar el header fijo por su cuenta. */
.nosotros--pagina {
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 104px));
}

/* ═══ proyectos.css ═══ */
/* ============================================================
   PROYECTOS

   La página resuelve un problema que no es de diseño sino de
   negocio: hay DOS cosas distintas que suelen mezclarse en un
   mismo grid y no deberían.

   1. LO QUE SE PUEDE COMPRAR — cuatro proyectos. Pocos, grandes,
      con plano, ficha y una acción. Acá se vende.
   2. LO CONSTRUIDO — veinte viviendas ya entregadas. Nadie puede
      comprarlas: son la prueba de que la empresa cumple.

   Meterlas en una sola grilla de catorce tarjetas hace invisibles
   las cuatro que importan y sugiere que las otras están a la
   venta. Por eso van con tratamientos opuestos: las primeras como
   fichas grandes, las segundas como un ÍNDICE tipográfico.

   El índice no es un recurso de emergencia por falta de fotos: es
   más creíble que una galería, porque cada línea se puede
   verificar. Y ningún competidor de Santa Cruz publica el suyo.
   ============================================================ */

.pagina {
  padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px));
  padding-bottom: clamp(56px, 7vw, 96px);
  background: var(--hueso);
}
.pagina__eyebrow {
  margin: 0 0 var(--s4);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--piedra);
}
.pagina__titulo {
  margin: 0 0 var(--s5);
  font-size: var(--d2);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 16ch;
}
.pagina__entrada {
  margin: 0;
  max-width: 56ch;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.6;
}

/* ============================================================
   En venta
   ============================================================ */
.venta { background: var(--hueso); padding-bottom: clamp(56px, 7vw, 96px); }

.proy {
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--linea);
}
.proy + .proy { margin-top: clamp(48px, 6vw, 80px); }

.proy__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .proy__grid { grid-template-columns: 7fr 5fr; align-items: start; }
  /* El segundo proyecto invierte el orden: el plano cae al otro
     lado. Dos fichas idénticas seguidas se leen como plantilla. */
  .proy--inv .proy__grid > :first-child { order: 2; }
}

/* La coordenada: dónde queda, en el lenguaje en que se habla la
   ciudad. Es lo primero que un cruceño necesita saber. */
.proy__coord {
  margin: 0 0 var(--s4);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalto);
}
.proy__estado::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: currentColor;
  vertical-align: 0.15em;
}
.proy__nombre {
  margin: 0 0 var(--s4);
  font-size: var(--d3);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.proy__texto {
  margin: 0 0 clamp(24px, 3vw, 32px);
  max-width: 48ch;
  color: var(--piedra);
  line-height: 1.62;
}

/* Ficha técnica en filetes: se lee como un documento, no como
   una tarjeta de producto. */
.ficha { margin: 0 0 clamp(24px, 3vw, 32px); }
.ficha__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: 11px;
  border-top: 1px solid var(--linea);
  font-size: var(--small);
}
.ficha__fila:last-child { border-bottom: 1px solid var(--linea); }
.ficha__fila dt { margin: 0; color: var(--piedra); }
.ficha__fila dd {
  margin: 0;
  text-align: right;
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}

.proy__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
/* .btn-linea y .btn-solido se movieron a tokens.css: los usan
   cinco secciones en cuatro páginas, no solo esta. */

/* ---- Los planos ---------------------------------------------
   Los isométricos de Calle 8 tienen canal alfa: se apoyan directo
   sobre la página, sin marco, sin tarjeta, sin sombra. Todas las
   constructoras locales meten sus planos en un rectángulo blanco
   con borde; esto es lo contrario, y es la señal de que el plano
   es una pieza de diseño y no un anexo. */
.planos { display: grid; gap: clamp(16px, 2vw, 28px); }
.plano { margin: 0; }
.plano img { display: block; width: 100%; height: auto; }
.plano--alfa img { background: none; }
.plano--foto img { border-radius: 14px; border: 1px solid var(--linea); }
.plano__pie {
  margin-top: 10px;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}
@media (min-width: 560px) {
  .planos--par { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   Trayectoria — el índice
   ============================================================ */
.trayectoria { background: var(--hueso); padding-block: clamp(56px, 7vw, 96px); }

.indice { width: 100%; border-collapse: collapse; }
.indice caption { text-align: left; }

.indice th {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--tinta);
  text-align: left;
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tinta);
}
.indice td {
  padding-block: 15px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--small);
  color: var(--tinta);
  vertical-align: baseline;
}
.indice td.ref { color: var(--piedra); }
.indice th.num, .indice td.num {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.indice tbody tr:hover td { background: var(--cal); }

.indice .obra-activa td { color: var(--cobalto); font-weight: 500; }
.indice .obra-activa td.ref { color: var(--cobalto); }

.indice tfoot td {
  padding-top: 18px;
  border-bottom: 0;
  border-top: 1px solid var(--tinta);
  font-weight: 600;
  color: var(--tinta);
}

.indice__nota {
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 74ch;
  font-size: 12px;
  line-height: 1.65;
  color: var(--piedra);
}

/* En teléfono la tabla se vuelve fichas apiladas. Nunca un
   scroll horizontal: si el usuario tiene que arrastrar para leer
   una columna, la columna está perdida. */
@media (max-width: 699px) {
  .indice, .indice tbody, .indice tr, .indice td { display: block; width: 100%; }
  .indice thead, .indice tfoot tr td:not(:first-child) { display: none; }
  .indice tr { padding-block: 14px; border-bottom: 1px solid var(--linea); }
  .indice td { padding: 0; border: 0; }
  .indice td.zona { font-weight: 600; margin-bottom: 2px; }
  .indice td.num, .indice td.ref {
    display: inline;
    text-align: left;
    color: var(--piedra);
  }
  .indice td.num::before { content: " · "; }
  .indice td.num[data-u]::after { content: " " attr(data-u); }
  .indice tfoot td { padding-top: 16px; border-top: 1px solid var(--tinta); }
}

/* Enlace dentro del índice. Va como bloque con alto mínimo: en línea
   dentro de una celda no llegaba a los 44px de área táctil, que fue
   justo lo que detectó la auditoría. */
.indice__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--cobalto);          /* 9.90:1 sobre hueso */
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: text-decoration-color 160ms linear;
}
.indice__enlace:hover { text-decoration-color: var(--cobalto); }

/* ---- Registro plegable ---------------------------------------
   La tabla completa pasó de ser un muro de once filas a un
   desplegable. El resumen por zona cuenta la misma verdad en siete
   líneas —"Av. Centenario · 11 viviendas" dice más que cinco
   renglones sueltos— y el detalle queda para quien quiera auditarlo.
   Se usa <details> nativo, igual que en las preguntas frecuentes. */
.registro {
  margin-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--linea);
}
.registro summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 56px;
  padding-block: 12px;
  cursor: pointer;
  list-style: none;
  font-size: var(--small);
  font-weight: 600;
  color: var(--cobalto);          /* 9.90:1 */
}
.registro summary::-webkit-details-marker { display: none; }
.registro summary:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 3px; }
.registro[open] summary { border-bottom: 1px solid var(--linea); }
.registro .faq__chevron { stroke: var(--cobalto); }
.registro[open] .faq__chevron { transform: rotate(180deg); }

.registro__cuerpo { padding-top: clamp(24px, 3vw, 36px); }
.registro__cuerpo .indice { margin-bottom: var(--s5); }
.registro__sub {
  margin: clamp(32px, 4vw, 48px) 0 var(--s4);
  font-size: var(--d3);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.registro[open] .registro__cuerpo { animation: faq-abre 320ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .registro[open] .registro__cuerpo { animation: none; }
  .registro .faq__chevron { transition: none; }
}

/* ============================================================
   La columna de medios de cada proyecto

   El problema que resuelve: en escritorio, con texto a un lado e
   imágenes al otro, está claro de qué proyecto es cada plano. Al
   apilarse en celular quedaba una lista de texto seguida de una
   lista de imágenes, y a la altura del segundo proyecto ya no se
   sabía a cuál pertenecían.

   Tres cambios:
     · cada proyecto abre con SU fachada — la imagen que nadie
       confunde, y la que ya identifica al proyecto en su página
     · en celular los medios van PRIMERO: cada bloque empieza con
       una foto de fachada, que funciona de separador entre uno y
       otro mucho mejor que un filete
     · el pie de cada imagen nombra el proyecto, no solo la planta
   ============================================================ */
.proy__medios { display: grid; gap: clamp(16px, 2vw, 24px); }

.proy__portada { margin: 0; }
.proy__portada img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--linea);
}

@media (max-width: 899px) {
  /* La fachada abre el bloque. Es el mismo orden que la página de
     cada proyecto —imagen, después el nombre— así que el sitio se
     lee igual en los dos lugares. */
  .proy__grid { display: flex; flex-direction: column; }
  .proy__medios { order: -1; }

  /* Y el corte entre proyectos se hace evidente: más aire y un
     filete más marcado que el de las fichas. */
  .proy + .proy { margin-top: clamp(56px, 12vw, 72px); }
  .proy { padding-top: clamp(32px, 7vw, 44px); }

  /* La fachada gana altura en vertical: a 375px un 16:10 queda
     como una franja y no muestra la casa. */
  .proy__portada img { aspect-ratio: 4 / 3; }
}

/* Enlace dentro de un pie de galería. Área táctil propia: la celda
   no la da, y sin esto queda en 18px de alto. */
.gal__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--cobalto);
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 3px;
}
.gal__enlace:hover { text-decoration-color: var(--cobalto); }
.entrega__pie .gal__enlace { color: var(--hueso); text-decoration-color: rgba(250,248,245,.4); }
.entrega__pie .gal__enlace:hover { text-decoration-color: var(--hueso); }

/* ============================================================
   EL DIRECTORIO

   Cada proyecto con página propia, en la primera pantalla. Antes
   había que bajar por secciones largas —ocho fotos de calle 11, la
   banda de Casa Alicia— para descubrir que esos proyectos tenían
   su propia página. Con el directorio arriba, la página índice
   vuelve a hacer un solo trabajo: enrutar.

   Las de venta primero, y marcadas: es lo único que se compra.
   ============================================================ */
.directorio { background: var(--hueso); padding-block: clamp(48px, 6vw, 80px); }

.dir {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
@media (min-width: 640px)  { .dir { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .dir { grid-template-columns: repeat(3, 1fr); } }

.dir__item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.dir__lamina { margin: 0 0 var(--s4); overflow: hidden; border-radius: 16px; }
.dir__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--linea);
  border-radius: 16px;
  transition: transform 200ms var(--ease);   /* era 420ms: una respuesta a hover tiene que ser inmediata, no deliberada */
}
.dir__item:hover .dir__lamina img { transform: scale(1.03); }

.dir__estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 var(--s3);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}
.dir__estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* Lo que está en venta se distingue: es lo único accionable. */
.dir__item--venta .dir__estado { color: var(--cobalto); }

.dir__nombre {
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.dir__item:hover .dir__nombre { text-decoration: underline; text-underline-offset: 4px; }
.dir__zona  { margin: 0 0 var(--s3); font-size: var(--small); color: var(--piedra); }
.dir__dato  { margin: 0; font-size: var(--small); font-weight: 500; color: var(--tinta); }

/* El área táctil la da la tarjeta entera, muy por encima de 44px. */
.dir__item:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 6px;
  border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dir__lamina img, .dir__item:hover .dir__lamina img { transition: none; transform: none; }
}

/* Las zonas que todavía no tienen página propia van como registro,
   no como enlace: un <div>, no un <a>. Un enlace que no lleva a
   ningún lado es peor que ningún enlace. La foto sí se puede ampliar
   con el visor, que es lo único que hay para ver.

   Quedan un punto más quietas —sin el subrayado al pasar, el punto
   de estado en gris piedra— para que se distinga de un vistazo qué
   se puede abrir y qué no. */
.dir__item--registro .dir__lamina img { cursor: zoom-in; }
.dir__item--registro:hover .dir__lamina img { transform: none; }
.dir__item--registro .dir__nombre { font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem); }

.dir__nota {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  max-width: 62ch;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--piedra);
}

/* Los lotes en preventa no tienen proyecto todavía, así que no tienen
   imagen. En vez de una caja gris, una placa que dice qué es: es el
   mismo criterio que el resto del sitio usa para lo que aún no existe
   —decir la ausencia en vez de disimularla. */
.dir__hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s4);
  border: 1px dashed var(--linea);
  border-radius: 16px;
  background: var(--cal);
}
.dir__hueco span {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--piedra);
}
.dir__item--placa .dir__estado { color: var(--laton); }

/* Con las tres obras nuevas el directorio pasó a 17 tarjetas, y 17 es
   impar: a dos columnas la última quedaba sola llenando el 48%, que se
   lee como una tarjeta que falta. Que ocupe la fila.

   La última fila con DOS de tres (63%) se deja como está: es la misma
   decisión que ya se tomó con 14 tarjetas — dos tarjetas juntas no se
   leen como un hueco, una sola sí.

   Al final del archivo a propósito: con igual especificidad gana la
   última regla. */
@media (min-width: 640px) and (max-width: 1049px) {
  .dir__item:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ═══ proyecto.css ═══ */
/* ============================================================
   PÁGINA DE PROYECTO

   Adaptada de la referencia (Grupo Briones), quitando lo que no
   aplica a una casa y quedándose con lo que sí.

   FUERA, porque es de edificios y no de viviendas:
     · Amenities  → una casa no tiene gimnasio ni sum. Va "La casa":
                    los ambientes.
     · Matriz de tipologías → hay un tipo de casa, no seis.
     · Sección de inversión y rentabilidad → el público de este
                    sitio compra para vivir, no para alquilar.
     · Tour 360°   → no existe el material.

   DENTRO, y es el mejor préstamo de la referencia:
     · UBICACIÓN con vista aérea. Para un comprador cruceño, "dónde
       queda" pesa tanto como "cómo es", y una foto de dron dice en
       un segundo lo que un párrafo no logra.

   La página existe por dos razones concretas, no por simetría con
   los competidores: puede rankear para "casa en venta [zona]
   Santa Cruz", y le da al vendedor UN link para mandar por
   WhatsApp en vez de "abrí proyectos y bajá".
   ============================================================ */

.pr-hero {
  position: relative;
  background: var(--tinta);
  color: var(--hueso);
  padding-top: var(--header-h);
}
.pr-hero__lamina { margin: 0; }
.pr-hero__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* El título va DEBAJO de la imagen, no encima. Es lo que separa
   una página editorial de una ficha de portal inmobiliario. */
.pr-hero__texto { padding-block: clamp(32px, 4vw, 56px); }
.pr-hero__coord {
  margin: 0 0 var(--s4);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalto-claro);   /* 6.8:1 sobre tinta */
}
.pr-hero__titulo {
  margin: 0 0 var(--s5);
  font-size: var(--d2);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.pr-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.pr-hero .btn-linea { border-color: rgba(250,248,245,.45); color: var(--hueso); }
.pr-hero .btn-linea:hover { border-color: var(--hueso); background: rgba(250,248,245,.08); }
.pr-hero :focus-visible { outline-color: var(--hueso); }

/* ---- La narrativa ------------------------------------------- */
/* Un texto escrito sobre la calle y el barrio. Ningún competidor
   de Santa Cruz escribe esto, y es lo más barato de producir. */
.pr-entrada { background: var(--hueso); padding-block: clamp(56px, 7vw, 96px); }
.pr-entrada__grid { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 900px) {
  .pr-entrada__grid { grid-template-columns: 4fr 8fr; align-items: start; }
}
/* El tope va también en el propio elemento: en Casa Alicia el párrafo
   ES `.pr-entrada__texto`, no un hijo suyo, así que la regla de abajo
   —que apunta a un `p` descendiente— nunca lo alcanzaba y el renglón
   llegaba a 76 caracteres. */
.pr-entrada__texto { max-width: 62ch; }
.pr-entrada__texto p {
  margin: 0 0 1.05em;
  max-width: 62ch;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.65;
}
.pr-entrada__texto p:last-child { margin-bottom: 0; }
.pr-entrada__firma {
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}

/* ---- La casa: los ambientes --------------------------------- */
.pr-casa { background: var(--cal); padding-block: clamp(56px, 7vw, 96px); }
.ambientes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 18px;
  overflow: hidden;
  margin-top: clamp(28px, 3.5vw, 44px);
}
/* Cinco datos, sin celdas huérfanas en ningún ancho.

   El problema: con un número impar de datos, la última fila queda a
   medias y el hueco se pinta del color del contenedor — se lee como
   un dato que falta, no como un espacio. La solución es que el último
   se estire para cerrar su fila.

   Móvil: dos columnas. El quinto ocupa las dos.
   Intermedio: seis columnas, cada dato ocupa dos → tres por fila. El
     quinto ocupa cuatro y cierra la segunda fila.
   Escritorio: cinco columnas iguales, no hace falta nada.

   ⚠️ Decía que con seis datos cerraba solo. Medido: NO. Desde 1050 px
   son cinco columnas iguales, así que el sexto queda solo en su fila
   llenando el 20% — justo el hueco que estas reglas existen para
   evitar. La regla general está más abajo: si el último dato cae
   primero en su fila, ocupa la fila entera, sean los que sean. */
.ambiente:nth-child(odd):last-child { grid-column: 1 / -1; }

@media (min-width: 620px) {
  .ambientes { grid-template-columns: repeat(6, 1fr); }
  .ambiente { grid-column: span 2; }
  .ambiente:nth-child(5):last-child { grid-column: span 4; }
}
@media (min-width: 1050px) {
  .ambientes { grid-template-columns: repeat(5, 1fr); }
  .ambiente,
  .ambiente:nth-child(5):last-child,
  .ambiente:nth-child(odd):last-child { grid-column: auto; }
  /* Último dato solo en su fila (6, 11, 16…): ocupa las cinco. Va
     después del reset porque con igual especificidad gana la última. */
  .ambiente:last-child:nth-child(5n + 1) { grid-column: span 5; }

  /* Y si el bloque trae MENOS de cinco, la rejilla se achica a esa
     cantidad en vez de dejar columnas vacías. Con tres cifras —el caso
     del Colegio Family Kids— quedaban tres celdas a la izquierda y el
     40% del ancho pintado del color del contenedor, que es el mismo
     hueco que estas reglas existen para evitar. */
  .ambientes:has(> .ambiente:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .ambientes:has(> .ambiente:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}
.ambiente {
  background: var(--cal);
  padding: clamp(20px, 2.4vw, 28px);
}
.ambiente__num {
  display: block;
  font-family: var(--serif);
  /* Estaba en `opsz 144, wght 300`: Fraunces en su peso más fino y su
     contraste más alto, que es justo donde los trazos horizontales de
     un número se adelgazan hasta casi desaparecer. A tamaño de dato
     —no de titular— eso se lee lavado.

     Se baja el tamaño óptico a 40 y se sube el peso a 600. Es el mismo
     ajuste que se hizo para los títulos sobre fondo oscuro, y por la
     misma razón: la Fraunces necesita menos contraste cuando no está
     enorme. No se cambia de tipografía —serían cuatro— sino de eje. */
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0, 'wght' 600;
  font-weight: 600;
  font-size: clamp(2.125rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cobalto);
  font-variant-numeric: lining-nums tabular-nums;
}
.ambiente__nombre {
  display: block;
  margin-top: 10px;
  font-size: var(--small);
  line-height: 1.35;
  color: var(--piedra);
}

/* ---- Ubicación ---------------------------------------------- */
.pr-ubica { background: var(--hueso); padding-block: clamp(56px, 7vw, 96px); }
.pr-ubica__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) {
  .pr-ubica__grid { grid-template-columns: 7fr 5fr; align-items: start; }
}
.pr-ubica__lamina { margin: 0; }
.pr-ubica__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--linea);
}
.pr-ubica__pie {
  margin-top: 10px;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}
.cerca { margin: clamp(20px, 2.5vw, 28px) 0 clamp(24px, 3vw, 32px); padding: 0; list-style: none; }
.cerca li {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: 11px;
  border-top: 1px solid var(--linea);
  font-size: var(--small);
  color: var(--tinta);
}
.cerca li:last-child { border-bottom: 1px solid var(--linea); }
.cerca span { color: var(--piedra); font-variant-numeric: lining-nums tabular-nums; }

/* ---- Acabados ----------------------------------------------- */
/* Lista de materiales por su nombre real, no una grilla de iconos.
   "Piedra laja" dice algo; un ícono de casita no. */
.pr-acabados { background: var(--cal); padding-block: clamp(56px, 7vw, 96px); }
.materiales {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}
@media (min-width: 760px) { .materiales { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 80px); } }
.materiales li {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: 13px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--small);
}
.materiales b { font-weight: 600; color: var(--tinta); }
.materiales span { color: var(--piedra); text-align: right; }

/* ---- Cierre ------------------------------------------------- */
.pr-cierre {
  background: var(--cobalto-hondo);
  color: var(--hueso);
  padding-block: clamp(56px, 7vw, 96px);
}
.pr-cierre__grid { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 860px) { .pr-cierre__grid { grid-template-columns: 7fr 5fr; align-items: end; } }
.pr-cierre__titulo {
  margin: 0;
  font-size: var(--d3);
  line-height: 1.08;
  letter-spacing: -0.01em;
  /* `min(…, 100%)` y no `20ch` a secas: a 320 px el contenedor mide
     280 y veinte caracteres de esta fuente miden 310, así que el
     título se salía de la pantalla. Un tope en ch no sabe nada del
     ancho disponible; hay que acotarlo con él. */
  max-width: min(20ch, 100%);
}
.pr-cierre__texto {
  margin: 0 0 var(--s5);
  max-width: 62ch;   /* medido: sin tope llegaba a 76 caracteres */
  color: rgba(250, 248, 245, 0.82);
  line-height: 1.6;
}
.pr-cierre .btn-solido {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--tinta);          /* 17.4:1 */
}
.pr-cierre .btn-solido:hover { background: #fff; border-color: #fff; }

/* ⚠️ El botón secundario del cierre estaba a 1,40:1 — invisible.
   `.pr-cierre` es una banda de --cobalto-hondo y `.btn-linea` traía su
   color por defecto (--tinta), que sobre azul oscuro no se lee. El
   registro ya lo advierte: el cobalto y el tinta NUNCA van sobre la
   superficie oscura. Existía la regla equivalente para `.pr-hero`
   (línea 59) y faltaba esta. Medido después del arreglo: 12,48:1. */
.pr-cierre .btn-linea {
  border-color: rgba(250, 248, 245, 0.45);
  color: var(--hueso);
}
.pr-cierre .btn-linea:hover {
  border-color: var(--hueso);
  background: rgba(250, 248, 245, 0.08);
}
.pr-cierre :focus-visible { outline-color: var(--hueso); }

/* El hueco de la aérea: una placa con el encargo escrito, no una
   caja gris y no la foto de la portada repetida. Mismo criterio que
   los retratos pendientes de Nosotros. */
.pr-ubica__hueco {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  aspect-ratio: 16 / 10;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--cal);
  border: 1px solid var(--linea);
  border-radius: 18px;
  color: var(--piedra);
}
.pr-ubica__hueco b {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin-bottom: 4px;
}
.pr-ubica__hueco span {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.pr-ubica__hueco .pendiente { align-self: flex-start; }

/* ---- "Qué hay cerca" — nombre y distancia, no logos ------------
   Se evaluó el patrón de carrusel de logotipos ("cerca de:" con las
   marcas de los comercios del barrio). Se descarta por tres razones,
   y se reemplaza por esto, que es la misma idea mejor ejecutada:

   1. Un logo no informa. La pregunta del comprador no es si Fidalga
      existe, es a cuántos minutos está. La distancia sí responde.
   2. Esas marcas no auspician nada acá. El patrón visual del carrusel
      de logotipos significa "nuestros socios / confían en nosotros"
      en todo internet; usarlo con marcas ajenas insinúa un acuerdo
      que no existe, y son marcas registradas de terceros.
   3. Seis logotipos de estilos distintos —cada uno con su color y su
      tipografía— es exactamente el ruido que este sitio evita.

   La forma es la lista de pauta fina que el sitio ya usa: rubro a la
   izquierda, nombre en el medio, distancia a la derecha.
   --------------------------------------------------------------- */
.cerca__titulo {
  margin: 0;
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--piedra);
}
.cerca li i {
  font-style: normal;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piedra);
}
.cerca li b { font-weight: 500; }
/* En celular el rubro sube a su propia línea. Los tres en fila a
   375px dejaban al rubro sin ancho y la fila quedaba apretada. */
.cerca li:has(i) {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "rubro rubro" "nombre dist";
  gap: 3px var(--s4);
}
.cerca li i    { grid-area: rubro; }
.cerca li b    { grid-area: nombre; }
.cerca li span { grid-area: dist; }
@media (min-width: 460px) {
  .cerca li:has(i) {
    grid-template-columns: 8.5rem 1fr auto;
    grid-template-areas: "rubro nombre dist";
    align-items: baseline;
    gap: var(--s4);
  }
}
.cerca__nota { margin: 0 0 clamp(20px, 2.4vw, 26px); font-size: var(--small); line-height: 1.55; }

/* ---- La salida a financiamiento, en el cierre ------------------ */
.pr-cierre__financia { margin: clamp(18px, 2.2vw, 24px) 0 0; font-size: var(--small); }
.pr-cierre__financia a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--hueso);
  text-decoration: underline;
  text-decoration-color: rgba(250, 248, 245, 0.35);
  text-underline-offset: 4px;
}
.pr-cierre__financia a:hover { text-decoration-color: var(--hueso); }

/* Todo el bloque va centrado, número y etiqueta.

   Es la única excepción a la composición asimétrica del sitio, y se
   sostiene porque esto no es una maqueta de página: son celdas
   iguales dentro de una grilla con filetes. Centradas, la columna de
   números se lee de un golpe; alineadas a la izquierda, cada dato
   arrancaba en un punto distinto según el ancho de su celda. */
.ambiente { text-align: center; }

/* ============================================================
   AVANCE DE OBRA

   La única sección con fotografía de ESTA casa: sin renders y sin
   obra de otra dirección. Por eso va fechada — una foto de obra
   sin fecha no prueba nada, podría ser de hace tres años. Con la
   fecha visible, la foto sostiene el plazo de entrega en vez de
   quedar suelta al lado de él.
   ============================================================ */
.avance { background: var(--cal); padding-block: clamp(56px, 7vw, 96px); }
.avance__entrada {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  max-width: 56ch;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.6;
}
.avance__fecha {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding: 8px 14px;
  border-radius: var(--radio-pildora);
  background: var(--hueso);
  border: 1px solid var(--linea);
}
.avance__fecha span {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}
.avance__fecha b {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0, 'wght' 600;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--tinta);
}

.avance__tira {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(26px, 3.2vw, 40px);
}
@media (min-width: 900px) {
  .avance__tira { grid-template-columns: repeat(3, 1fr); }
}
.avance__foto { margin: 0; }
.avance__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--linea);
}
.avance__pie {
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}
.avance__leyenda {
  margin-top: 10px;
  font-size: var(--small);
  line-height: 1.45;
  color: var(--piedra);
}

/* ============================================================
   ACABADOS CON FOTOGRAFÍA

   La sección era una lista de nombres de material. El nombre
   informa —"piedra laja" dice algo que un ícono no— pero no
   prueba nada. Con la fotografía al lado, cada renglón deja de
   ser una promesa y pasa a ser algo que se puede mirar.

   La línea de origen va ARRIBA y no en letra chica: las fotos son
   de otra casa, y eso hay que decirlo antes de que el visitante
   asuma otra cosa. Dicho de frente, además, refuerza — significa
   que ya lo entregaron así una vez.
   ============================================================ */
.acabado__origen {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  max-width: 58ch;
  color: var(--piedra);
  font-size: var(--small);
  line-height: 1.6;
}

.acabados-fotos {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(24px, 3vw, 36px);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) {
  .acabados-fotos { grid-template-columns: repeat(3, 1fr); }
}

.acabado { margin: 0; }
.acabado img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--linea);
}
.acabado__pie { margin-top: 10px; }
.acabado__pie b {
  display: block;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0, 'wght' 600;
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.2;
  color: var(--tinta);
}
.acabado__pie span {
  display: block;
  margin-top: 3px;
  font-size: var(--small);
  line-height: 1.4;
  color: var(--piedra);
}

/* ============================================================
   EL RECORRIDO — obra entregada, ambiente por ambiente

   Solo la usa la página de Roca y Coronado, que es la única con la
   casa completa fotografiada. No es una galería: es una visita. Por
   eso va en bloques numerados y en el orden en que se camina la
   casa —se llega, se entra, se sube— y no ordenada por "las mejores
   primero".
   ============================================================ */
.recorrido { background: var(--hueso); padding-block: clamp(56px, 7vw, 96px) 0; }
.recorrido__entrada {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  max-width: 56ch;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.6;
}
.recorrido__cuerpo { padding-bottom: clamp(56px, 7vw, 96px); }

.rec { padding-top: clamp(40px, 5vw, 64px); }
.rec + .rec { margin-top: clamp(8px, 1vw, 16px); border-top: 1px solid var(--linea); }

.rec__cab { margin-bottom: clamp(20px, 2.6vw, 28px); }
.rec__num {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--cobalto);
}
.rec__titulo {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.rec__entrada { margin: 0; max-width: 50ch; color: var(--piedra); line-height: 1.6; }

.rec__tira { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .rec__tira { grid-template-columns: repeat(3, 1fr); } }

.rec__foto { margin: 0; }
.rec__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--linea);
}
.rec__pie {
  margin-top: 8px;
  font-size: var(--small);
  line-height: 1.4;
  color: var(--piedra);
}

/* Un bloque del recorrido con una sola fotografía la muestra a lo
   ancho: sola en una grilla de tres deja dos huecos y se lee como si
   faltaran fotos, cuando en realidad es una toma de conjunto que
   merece el ancho completo. */
.rec__tira:has(> .rec__foto:only-child) { grid-template-columns: 1fr; }
.rec__tira:has(> .rec__foto:only-child) .rec__foto img { aspect-ratio: 16 / 9; }

/* Y un bloque de DOS fotos usa dos columnas, no tres. Con tres, las dos
   quedaban a la izquierda llenando el 64% y el tercio vacío se lee como
   una foto que falta — igual que la celda huérfana, pero peor, porque
   acá no es la última fila de muchas: es el bloque entero, siempre. */
@media (min-width: 900px) {
  .rec__tira:has(> .rec__foto:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
}

/* Mismo razonamiento cuando la última foto queda sola en la última
   fila —tres o cinco fotos en dos columnas, cuatro en tres—: una foto
   al costado con la mitad del ancho vacío se lee como si faltara otra.
   Ocupa la fila y pasa a 16/9, que es la proporción con la que se ve
   bien a lo ancho. Una última fila con DOS de tres se deja: llena el
   64% y eso no se lee como un hueco. */
.rec__foto:last-child:nth-child(odd) { grid-column: span 2; }
.rec__foto:last-child:nth-child(odd) img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .rec__foto:last-child:nth-child(odd) { grid-column: auto; }
  .rec__foto:last-child:nth-child(odd) img { aspect-ratio: 4 / 3; }
  .rec__foto:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .rec__foto:last-child:nth-child(3n + 1) img { aspect-ratio: 16 / 9; }
}

/* ═══ docs.css ═══ */
/* ============================================================
   DOCUMENTACIÓN

   El bloque más barato de producir y de los que más confianza
   genera. En el mercado inmobiliario boliviano el miedo del
   comprador no es que la casa sea fea: es que el papel esté mal.
   Ofrecer la carpeta antes de que la pidan invierte esa carga —
   y ningún competidor de los catorce revisados lo hace.

   Va sobre hueso, no sobre una banda de color: es información
   seria y no necesita subrayado visual.
   ============================================================ */

.docs {
  background: var(--hueso);
  padding-block: clamp(56px, 7vw, 96px);
}
.docs__grid { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 900px) {
  .docs__grid { grid-template-columns: 5fr 7fr; align-items: start; }
}
.docs__titulo {
  margin: 0 0 var(--s4);
  font-size: var(--d3);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 17ch;
}
.docs__texto {
  margin: 0 0 clamp(24px, 3vw, 32px);
  max-width: 46ch;
  color: var(--piedra);
  line-height: 1.62;
}

.docs__lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.docs__lista li {
  display: grid;
  gap: 2px;
  padding-block: 15px;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 640px) {
  .docs__lista li { grid-template-columns: 12rem 1fr; gap: var(--s5); align-items: baseline; }
}
.docs__lista b { font-weight: 600; color: var(--tinta); font-size: var(--small); }
.docs__lista span { color: var(--piedra); font-size: var(--small); line-height: 1.55; }

/* ---- La nota en la página de proyecto ------------------------ */
.pr-entrada__doc {
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--cal);
  max-width: 62ch;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--piedra);
}
.pr-entrada__doc b { display: block; margin-bottom: 4px; color: var(--tinta); font-weight: 600; }

/* ---- El enlace dentro de la ficha técnica -------------------- */
.ficha__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);        /* área táctil: la celda no la fija */
  color: var(--cobalto);
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 3px;
  font-weight: 500;
}
.ficha__enlace:hover { text-decoration-color: var(--cobalto); }

/* El enlace sale del renglón y toma su propia línea: dentro del
   párrafo quedaba en línea, sin los 44px de área táctil que exige
   el resto del sitio. */
.pr-entrada__doc-enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 6px;
  color: var(--cobalto);
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 3px;
  font-weight: 600;
}
.pr-entrada__doc-enlace:hover { text-decoration-color: var(--cobalto); }

/* ═══ galeria.css ═══ */
/* ============================================================
   ENTREGA + GALERÍA DE OBRA

   Dos bloques con propósitos opuestos.

   LA ENTREGA es la única fotografía del sitio que no se puede
   simular: la familia, la casa terminada y las llaves. Un render
   muestra lo que va a existir; esto prueba que ya existió. Va
   grande y sobre fondo oscuro, sin competencia.

   ⚠️ Aparecen personas identificables. Publicar la imagen de
   particulares reconocibles exige su autorización, así que la
   sección lleva marca de pendiente hasta tenerla — igual que los
   testimonios. No es un tecnicismo: es la familia de un cliente.

   LA GALERÍA es lo contrario: registro, no publicidad. Fotos de
   teléfono tomadas en las entregas, con luz plana y encuadres de
   ocasión. Se publican DELIBERADAMENTE contenidas —columnas de
   ~30 %— porque a ese tamaño la luz plana y la distorsión del
   lente dejan de leerse como defectos y empiezan a leerse como
   documento. Ampliadas a pantalla completa harían lo contrario.
   ============================================================ */

.entrega {
  background: var(--tinta);
  color: var(--hueso);
  padding-block: clamp(64px, 8vw, 104px);
}
.entrega__eyebrow {
  margin: 0 0 var(--s4);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.72);
}
.entrega__titulo {
  margin: 0 0 var(--s4);
  font-size: var(--d2);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.entrega__entrada {
  margin: 0 0 clamp(32px, 4vw, 52px);
  max-width: 54ch;
  color: rgba(250, 248, 245, 0.82);
  font-size: var(--lead);
  line-height: 1.6;
}
.entrega__lamina { margin: 0; }
.entrega__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
}
.entrega__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--s5);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(250, 248, 245, 0.22);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.72);
}

/* ---- La galería --------------------------------------------- */
.galeria { background: var(--hueso); padding-block: clamp(56px, 7vw, 96px); }

.gal {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 620px) { .gal { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); } }

.gal__item { margin: 0; }
.gal__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--linea);
}
.gal__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.gal__pie b {
  font-size: var(--small);
  font-weight: 600;
  color: var(--tinta);
}
.gal__pie span {
  font-size: 12px;
  color: var(--piedra);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- Marca de las tarjetas del grupo ------------------------- */
/* Los logos de los colegios son JPG cuadrados con fondo blanco.
   Sobre la banda oscura eso sería un recuadro blanco pegado, así
   que van dentro de un disco: el fondo del logo deja de leerse
   como error y pasa a ser parte de la forma. */
.unidad__marca {
  display: block;
  width: 44px; height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hueso);
  flex: none;
}
.unidad__marca img,
.unidad__marca picture { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Banda de Casa Alicia en el índice de Proyectos ----------
   Es el único edificio del portafolio, así que no entra en la
   lista de casas ni en la tabla de "otras obras": tiene su propia
   banda, con la fachada al lado. */
.alicia { background: var(--cal); padding-block: clamp(56px, 7vw, 96px); }
.alicia__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .alicia__grid { grid-template-columns: 6fr 5fr; }   /* desiguales */
}
.alicia__lamina { margin: 0; }
.alicia__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--linea);
}

/* ---- Proyecto entregado destacado (Calle 11) -----------------
   No es una página propia: sigue la regla de que solo lo que está
   en venta se gana una. Pero es la obra entregada mejor
   documentada que hay, así que va como sección con su fachada
   grande y la galería debajo. Sirve de prueba del estándar, no
   de aviso de venta — y el pie lo dice explícitamente. */
.destacada { background: var(--hueso); padding-block: clamp(56px, 7vw, 96px); }
.destacada__intro {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
@media (min-width: 900px) {
  .destacada__intro { grid-template-columns: 6fr 6fr; align-items: end; }
}
.destacada__lamina { margin: 0; }
.destacada__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--linea);
}
@media (min-width: 900px) {
  .destacada__lamina img { aspect-ratio: 16 / 9; }
}


/* La última fotografía sola en su fila deja medio ancho vacío y se lee
   como una imagen que falta. Que ocupe la fila. Al final del archivo a
   propósito: con igual especificidad gana la última regla, y en este
   proyecto ya se perdió tiempo poniendo overrides antes de su base. */
@media (min-width: 620px) and (max-width: 899px) {
  .gal__item:last-child:nth-child(odd) { grid-column: span 2; }
  .gal__item:last-child:nth-child(odd) img { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  .gal__item:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .gal__item:last-child:nth-child(3n + 1) img { aspect-ratio: 16 / 9; }
}

/* ═══ visor.css ═══ */
/* ============================================================
   VISOR DE IMÁGENES

   Fondo casi opaco en el azul de la marca —no negro— para que
   ampliar una foto siga sintiéndose parte del sitio y no una
   ventana del navegador.

   Los tres controles son círculos de 48px: es el único lugar del
   sitio donde hay botones redondos, y se justifica porque flotan
   sobre una fotografía, donde una píldora se leería como una
   calcomanía pegada.
   ============================================================ */

.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(9, 20, 42, 0.985);   /* medido: el 0,96 dejaba pasar el texto de atrás */
  animation: visor-entra 180ms var(--ease) both;
}
@keyframes visor-entra { from { opacity: 0; } to { opacity: 1; } }

/* El fondo no se desplaza mientras el visor está abierto. */
.visor-abierto { overflow: hidden; }

.visor__marco {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  max-width: min(100%, 1500px);
  max-height: 100%;
}

.visor__img {
  display: block;
  max-width: 100%;
  /* Se reserva el alto del pie y de la barra de controles para que
     una imagen alta no empuje la leyenda fuera de la pantalla. */
  max-height: calc(100svh - clamp(120px, 20vh, 190px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
/* La entrada es una TRANSICIÓN, no un keyframe, y esto se midió.
   Con `animation` reactivada por clase, avanzar dos fotos con 60ms de
   diferencia devolvía la opacidad a 0,00 y rehacía los 260ms enteros:
   un keyframe reinicia desde cero, no retoma. Una transición
   interpola desde el valor actual, así que pasar rápido se ve
   continuo en vez de parpadear.

   Además desaparece el problema de cascada que obligó a la clase: una
   propiedad animada le gana a cualquier declaración normal, pero una
   transición no — solo interpola entre valores calculados. Por eso
   `.visor--cargando` ya puede usar `opacity` y no `visibility`, y el
   JS se ahorra el baile de sacar la clase, forzar reflow y reponerla.

   Nota deliberada: cuando la foto ya está precargada —lo habitual,
   porque se piden las dos vecinas— no hay transición ninguna, porque
   `.visor--cargando` nunca llega a aplicarse. Es lo correcto: avanzar
   con la flecha es una acción de teclado, y esas no llevan animación.
   El fundido queda solo para cuando de verdad hubo que esperar. */
.visor__img {
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

.visor__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 16px;
  max-width: 62ch;
  text-align: center;
  font-size: var(--small);
  line-height: 1.5;
  color: rgba(250, 248, 245, 0.92);    /* 13,9:1 sobre el fondo */
}
.visor__cuenta {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(250, 248, 245, 0.62);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- Los tres controles ---- */
.visor__cerrar,
.visor__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(250, 248, 245, 0.28);
  border-radius: 50%;
  background: rgba(9, 20, 42, 0.55);
  color: var(--hueso);
  cursor: pointer;
  transition: background-color 160ms linear, border-color 160ms linear;
}
.visor__cerrar:hover,
.visor__nav:hover {
  background: rgba(250, 248, 245, 0.16);
  border-color: rgba(250, 248, 245, 0.55);
}
.visor__cerrar:focus-visible,
.visor__nav:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}
.visor__cerrar svg,
.visor__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visor__cerrar { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); }
.visor__nav--antes { left:  clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.visor__nav--luego { right: clamp(8px, 2vw, 24px); top: 50%; transform: translateY(-50%); }

/* En el teléfono las flechas bajan al pie: a los costados tapan la
   foto, y el pulgar llega mucho mejor abajo que al centro del borde. */
@media (max-width: 559px) {
  .visor__nav {
    top: auto;
    bottom: clamp(12px, 4vw, 20px);
    transform: none;
  }
  .visor__nav--antes { left: 50%; margin-left: -60px; }
  .visor__nav--luego { right: 50%; margin-right: -60px; }
  .visor__img { max-height: calc(100svh - 210px); }
  .visor__pie { padding-bottom: 56px; }
}

/* ---- La imagen ampliable, en la página ---- */
.visor-listo img { cursor: zoom-in; }
.visor-listo img:focus-visible {
  outline: 3px solid var(--cobalto);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .visor { animation: none; }
}

/* ============================================================
   INDICADOR DE CARGA

   Aparece solo cuando de verdad hay espera. El truco está en el
   `transition-delay` de 160 ms: si la imagen ya estaba en caché —que
   con la precarga de vecinas es el caso habitual— la clase se pone y
   se saca dentro de ese margen y el círculo nunca llega a verse. Un
   indicador que parpadea en cada toque hace sentir la interfaz MÁS
   lenta, no menos, porque anuncia una espera que no existió.

   Mientras carga, la imagen se oculta del todo. Es a propósito: antes
   se veía la foto anterior con el rótulo de la nueva, y un marco
   vacío con un indicador es honesto donde eso era falso.
   ============================================================ */
.visor__cargador {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid rgba(250, 248, 245, 0.22);
  border-top-color: var(--hueso);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms linear 160ms;
  animation: visor-gira 720ms linear infinite;
}
.visor--cargando .visor__cargador { opacity: 1; }

@keyframes visor-gira { to { transform: rotate(360deg); } }

/* Ya puede ser `opacity` y no `visibility`: sin animación de por medio
   la declaración se aplica, y encima es lo que la transición necesita
   para tener desde dónde interpolar. */
.visor--cargando .visor__img { opacity: 0; transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .visor__cargador { animation: none; border-top-color: rgba(250, 248, 245, 0.75); }
  /* El fundido se queda —no marea a nadie y avisa que la foto llegó—;
     lo que se va es el desplazamiento. */
  .visor__img { transition: opacity 160ms linear; }
  .visor--cargando .visor__img { transform: none; }
}

/* ═══ faq.css ═══ */
/* ============================================================
   PREGUNTAS FRECUENTES

   Imagen a un costado, acordeón al otro, 5/7.

   El acordeón usa <details>/<summary> nativos. No es pereza: sale
   accesible de fábrica —navegable con teclado, anunciado por
   lectores de pantalla, abrible con Enter y Espacio— y funciona
   aunque el JavaScript no cargue nunca. Un acordeón hecho a mano
   con divs y JS es más código para llegar, con suerte, al mismo
   comportamiento.

   El atributo `name` los vuelve excluyentes: abrir uno cierra el
   anterior, como en la referencia. Donde el navegador aún no lo
   soporte simplemente quedan varios abiertos, que es un
   comportamiento razonable y no un error.
   ============================================================ */

.faq {
  background: var(--hueso);
  color: var(--tinta);
  padding-block: clamp(64px, 8vw, 112px);
}

.faq__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: 5fr 7fr; }   /* nunca mitades */
}

.faq__lamina { margin: 0; }
.faq__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;          /* mismo radio que las tarjetas */
}

.faq__eyebrow {
  margin: 0 0 var(--s3);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--cobalto);        /* 9.90:1 sobre hueso */
}

.faq__titulo {
  margin: 0 0 var(--s4);
  font-size: var(--d2);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 15ch;
}

.faq__entrada {
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  max-width: 52ch;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.6;
}

/* ---- Acordeón ------------------------------------------------ */
/* `faq.js` mide el estado más alto y fija aquí un `min-height`, así
   abrir una respuesta pasa dentro de un espacio que ya existía y el
   pie de página no se mueve. Sin JS el acordeón sigue funcionando;
   solo vuelve a empujar el contenido, que es aceptable. */
.faq__lista { transition: min-height 200ms var(--ease); }

.faq__item {
  border-top: 1px solid var(--linea);
}
.faq__item:last-of-type { border-bottom: 1px solid var(--linea); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 68px;
  padding-block: 14px;
  cursor: pointer;
  list-style: none;             /* fuera el triángulo por defecto */
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta);
  transition: color 160ms linear;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--cobalto); }
.faq__item summary:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 3px;
}

/* .faq__chevron se movió a tokens.css: lo usan dos páginas. */
.faq__item[open] .faq__chevron { transform: rotate(180deg); stroke: var(--cobalto); }
.faq__item summary:hover .faq__chevron { stroke: var(--cobalto); }

.faq__cuerpo {
  padding-bottom: 22px;
  max-width: 58ch;
  color: var(--piedra);
  line-height: 1.65;
}
.faq__cuerpo p { margin: 0 0 0.9em; }
.faq__cuerpo p:last-child { margin-bottom: 0; }

/* Al abrir, el contenido entra en vez de aparecer de golpe. No se
   anima la altura: interpolarla en <details> es frágil y provoca
   saltos. Se anima solo lo que sí es barato y estable. */
.faq__item[open] .faq__cuerpo {
  animation: faq-abre 320ms var(--ease) both;
}
@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chevron { transition: stroke 160ms linear; }
  .faq__item[open] .faq__cuerpo { animation: none; }
}

/* ═══ landing.css ═══ */
/* ============================================================
   LANDING DE PROYECTO

   Estas páginas ya no son fichas de catálogo: reciben tráfico
   pagado. Alguien toca un anuncio, cae acá sin conocer la marca,
   y en esa pantalla se decide todo. Eso cambia tres cosas:

   1. SE DISEÑA PARA EL CELULAR PRIMERO. La vista de escritorio
      es la secundaria — es al revés que el resto del sitio.
   2. HAY UNA SOLA SALIDA. El menú de navegación desaparece:
      cada enlace del menú es una puerta para irse antes de
      consultar. Queda el logo (identidad) y el contacto.
   3. LA ACCIÓN NUNCA SE VA DE PANTALLA. Una barra fija abajo
      con el precio y el botón, presente en todo el scroll.

   Lo que NO se copia de las referencias:
   · Nada de contadores regresivos ni "últimas unidades" falsas.
     La urgencia acá es real —el conteo verdadero, la fecha de
     entrega— o no se pone. El argumento del sitio es que los
     números se pueden verificar; una cifra inflada lo tumba.
   · Nada de grilla de iconos para los acabados: los materiales
     van por su nombre.
   · Nada de vidrio esmerilado en el formulario (Briones): mismo
     mecanismo, panel sólido y filete.
   ============================================================ */

/* ------------------------------------------------------------
   Cromo reducido

   El menú se va. El logo sigue, porque para una constructora
   familiar la identidad ES el argumento: hay que poder ver de
   quién es esto y verificarlo.

   La barra va SÓLIDA, no transparente, y la foto NO le pasa por
   debajo: el hero arranca donde termina el header. La versión
   transparente se probó y se descartó — el logo peleaba con la
   fachada y la portada no arrancaba limpia.
   ------------------------------------------------------------ */
body.landing .hdr__nav,
body.landing .hdr__vrule,
body.landing .menu-btn { display: none !important; }

body.landing .hdr__inner { justify-content: space-between; }
body.landing .cartela { display: flex !important; }
body.landing .cta { display: inline-flex !important; }

/* El contenido empieza debajo de la barra, no detrás. */
body.landing main { padding-top: var(--header-h); }

/* ---- La barra se aparta al bajar y vuelve al subir ----
   Es la única página del sitio donde el header se esconde. En el
   resto está prohibido a propósito —un header que se mueve es el
   header actuando— pero acá la pantalla del teléfono ES el
   producto: cada 88px devueltos a la fotografía valen más que la
   constancia de la barra. Vuelve apenas se hace scroll hacia
   arriba, que es el gesto de "quiero navegar". */
body.landing .hdr {
  transition: transform 240ms var(--ease), background-color 180ms linear, color 180ms linear;
}
body.landing .hdr[data-oculto] { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  body.landing .hdr { transition: background-color 180ms linear, color 180ms linear; }
  body.landing .hdr[data-oculto] { transform: none; }
}

/* ============================================================
   1 · PORTADA — el tráiler
   ============================================================ */
/* ------------------------------------------------------------
   En CELULAR el hero se parte en dos: la foto arriba, entera, y
   el texto debajo sobre azul sólido.

   La razón es medible. Una foto apaisada dentro de una caja de
   390x844 (relación 0,46) se recorta aunque ya venga en 4:5 —
   `cover` vuelve a comerse los costados y las dos casas gemelas
   se pierden otra vez. Superponer el texto obliga además a un
   velo pesado que apaga la foto justo donde hay que mostrarla.

   Partido: la foto se ve completa, el texto tiene 13:1 garantizado
   sin velo, y la composición sigue leyéndose de una sola pieza
   porque el azul del fondo es el de la marca.

   En ESCRITORIO vuelve a ser una sola imagen a sangre con el texto
   encima: ahí la foto es apaisada y el viewport también, así que
   el recorte no duele y la portada gana fuerza.
   ------------------------------------------------------------ */
.lp-hero {
  position: relative;
  display: grid;
  background: var(--cobalto-hondo);
  color: var(--hueso);
  overflow: hidden;
}

.lp-hero__fondo { margin: 0; grid-area: 1 / 1; }
.lp-hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .lp-hero { grid-template-rows: auto auto; }
  .lp-hero__fondo { position: relative; }
  /* 1:1 y no 4:5. Con 4:5 el botón principal caía a 926px en una
     pantalla de 844: la acción quedaba bajo el pliegue en una
     página cuyo único trabajo es que la toquen. */
  .lp-hero__fondo img { aspect-ratio: 1 / 1; height: auto; }

  .lp-hero__titulo { font-size: clamp(2.25rem, 1.5rem + 4vw, 3rem); }
  .lp-hero__promesa { margin-bottom: clamp(18px, 3.5vw, 24px); }
  .lp-fichas { margin-bottom: clamp(18px, 3.5vw, 24px); }
  /* Sin superposición no hace falta velo: solo un degradado corto
     al pie de la foto, para que el corte con el azul no sea seco. */
  .lp-hero__velo {
    grid-area: 1 / 1;
    align-self: end;
    height: 22%;
    background: linear-gradient(to top, var(--cobalto-hondo), transparent);
  }
  .lp-hero__texto { grid-area: 2 / 1; padding-block: clamp(28px, 6vw, 40px) clamp(32px, 7vw, 44px); }
}

@media (min-width: 768px) {
  .lp-hero {
    min-height: calc(86svh - var(--header-h));
    align-items: end;
    background: var(--tinta);
  }
  .lp-hero__fondo { position: absolute; inset: 0; }
  .lp-hero__velo  { grid-area: 1 / 1; }
  .lp-hero__texto { grid-area: 1 / 1; align-self: end; }

  /* El aire va en el TEXTO, no en la sección. Con relleno en
     `.lp-hero`, el fondo —que es un item de grilla en position
     absolute— toma como referencia el área de la grilla, o sea
     el interior del relleno: quedaba una franja negra de 45px
     entre la barra y la fotografía. */
  .lp-hero__texto { padding-block: clamp(32px, 5vh, 56px) clamp(40px, 6vh, 80px); }
}

/* Velo teñido con el azul de la marca, no con negro: hunde la
   foto HACIA el color de Grupo Suca en vez de agrisarla. Se
   refuerza abajo, que es donde va el texto, y se deja la parte
   alta casi limpia para que la casa se vea. */
.lp-hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* En escritorio el velo va en HORIZONTAL, no de abajo hacia arriba.
   Medido: con el degradado vertical el bloque de texto empezaba a
   un 63% de altura, donde el velo valía 0,15, y sobre el estucado
   blanco daba 1,76:1 en la coordenada y 3,08:1 en la promesa. Un
   velo vertical más fuerte arreglaba el contraste apagando la casa
   entera, que es justo lo que hay que mostrar.

   Oscureciendo solo la franja izquierda —donde está el texto— la
   casa queda limpia a la derecha y el contraste sale por diseño y
   no por fuerza bruta. Se suma un refuerzo bajo, corto, para el pie
   de la composición. */
@media (min-width: 768px) {
  .lp-hero__velo {
    background:
      linear-gradient(to right,
        rgba(9, 20, 42, 0.93) 0%,
        rgba(9, 20, 42, 0.91) 38%,
        rgba(9, 20, 42, 0.80) 50%,
        rgba(9, 20, 42, 0.46) 64%,
        rgba(9, 20, 42, 0.16) 80%,
        rgba(9, 20, 42, 0.00) 100%),
      linear-gradient(to top,
        rgba(9, 20, 42, 0.55) 0%,
        rgba(9, 20, 42, 0.18) 30%,
        rgba(9, 20, 42, 0.00) 55%);
  }
}

.lp-hero__texto { position: relative; width: 100%; z-index: 1; }

.lp-hero__coord {
  margin: 0 0 var(--s4);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.88);
}

.lp-hero__titulo {
  margin: 0 0 var(--s4);
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* Sobre oscuro la Fraunces de mucho contraste pierde los
     trazos finos. Se baja el tamaño óptico y se sube el peso. */
  font-variation-settings: var(--fraunces-oscuro);
  max-width: 13ch;
}

.lp-hero__promesa {
  margin: 0 0 clamp(22px, 3vw, 30px);
  max-width: 34ch;
  font-size: var(--lead);
  line-height: 1.5;
  color: rgba(250, 248, 245, 0.92);
}

/* ---- La franja de datos duros ---- */
.lp-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(18px, 3vw, 32px);
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding: 0;
  list-style: none;
}
.lp-datos li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-datos b {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-oscuro);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-datos span {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.94);
}

/* La franja de cifras se va del hero en celular: los mismos números
   están dos secciones más abajo, en "La casa", y acá costaban 72px
   de alto justo por encima del botón principal. En escritorio se
   quedan, porque ahí sobra altura.
   Va DESPUÉS de la regla base a propósito: con la misma
   especificidad gana la última, y dentro del bloque @media de arriba
   —que está antes en el archivo— la base la pisaba. */
@media (max-width: 767px) {
  .lp-datos { display: none; }
}

/* ---- Las fichas de estado y disponibilidad ----
   Rectángulo blanco con letras azules, el mismo recurso que
   "EN PREVENTA" en el índice. Van acá y no flotando sobre la
   foto: junto a los datos se leen como un dato más, que es lo
   que son, y no como una calcomanía de oferta. */
.lp-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(20px, 2.6vw, 26px);
  padding: 0;
  list-style: none;
}
.lp-ficha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--radio-pildora);
  background: var(--hueso);
  color: var(--cobalto);              /* 9,90:1 */
  font-size: 0.875rem;
  font-weight: 600;
}
.lp-ficha::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cobalto);
  flex: none;
}
/* La ficha pendiente no se disfraza de dato confirmado: se marca
   entera, en vez de meter el resalte de latón dentro de la píldora
   blanca, que se leía como un error de maquetación. */
.lp-ficha--pend {
  background: color-mix(in srgb, var(--laton) 88%, #FFF);
  color: var(--tinta);                /* 6,4:1 */
}
.lp-ficha--pend::before { background: var(--tinta); }

.lp-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* En celular los dos botones ocupan el ancho: un botón angosto
   en el pulgar es la fricción más cara de la página. */
@media (max-width: 559px) {
  .lp-hero__acciones { flex-direction: column; align-items: stretch; }
  .lp-hero__acciones > * { justify-content: center; }
}
.lp-hero .btn-linea {
  color: var(--hueso);
  border-color: rgba(250, 248, 245, 0.45);
}
.lp-hero .btn-linea:hover {
  border-color: var(--hueso);
  background: rgba(250, 248, 245, 0.12);
}

/* ============================================================
   2 · BARRA FIJA — la acción nunca se va de pantalla
   ============================================================ */
.lp-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 10px clamp(16px, 4vw, 24px);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--cobalto-hondo);
  color: var(--hueso);
  border-top: 1px solid rgba(250, 248, 245, 0.18);
  /* Aparece recién cuando la portada se fue: sobre el hero ya
     hay dos botones y una tercera llamada compite consigo misma. */
  transform: translateY(105%);
  transition: transform 260ms var(--ease);
}
.lp-barra[data-visible] { transform: none; }

.lp-barra__precio { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lp-barra__precio span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.78);
}
.lp-barra__precio b {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-oscuro);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.1;
  white-space: nowrap;
}
.lp-barra .btn-solido {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--cobalto-hondo);        /* 13,23:1 */
  flex: none;
}
.lp-barra .btn-solido:hover { background: #fff; border-color: #fff; }

/* El pie necesita aire abajo para que la barra no lo tape. */
body.landing .pie { padding-bottom: calc(clamp(28px, 3vw, 40px) + 72px); }

@media (prefers-reduced-motion: reduce) {
  .lp-barra { transition: none; }
}

/* ============================================================
   3 · RAZONES — por qué esta casa y no otra
   Tres afirmaciones grandes, numeradas. Sin iconos: un ícono de
   casita no dice nada que la frase no diga mejor.
   ============================================================ */
.lp-razones {
  background: var(--hueso);
  padding-block: clamp(56px, 8vw, 104px);
}
.lp-razones__titulo {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-size: var(--d2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
.lp-razones__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
@media (min-width: 860px) {
  .lp-razones__lista { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
}
.lp-razon {
  padding-block: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--linea);
}
.lp-razon__num {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cobalto);
}
.lp-razon__tit {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lp-razon p { margin: 0; color: var(--piedra); line-height: 1.6; max-width: 42ch; }

/* ============================================================
   4 · LAS BANDAS — el tráiler

   Se reemplazó el carrusel de miniaturas. El motivo es aritmético
   antes que estético: hay tres o cuatro imágenes por proyecto, y
   una grilla de miniaturas GRITA que hay tres. Una banda a sangre
   por imagen, a pantalla casi completa, hace que tres fotos se
   sientan como un recorrido.

   Es el recurso de Raizant, que es el que se lee como tráiler de
   los cuatro que mandó el cliente: una imagen enorme, un rótulo
   encima, y nada más compitiendo. Acá el rótulo va en Fraunces
   —la voz de la marca— en vez de la grotesca condensada de ellos.

   Cada banda ocupa su propia pantalla: al deslizar en el teléfono
   entra una imagen por vez, que es exactamente el ritmo de un
   tráiler y lo contrario de una galería.
   ============================================================ */
.lp-cine { background: var(--tinta); }

.lp-banda {
  position: relative;
  display: grid;
  margin: 0;
  isolation: isolate;
}
/* El item de la grilla es <picture>, NO <img>: poner grid-area en la
   imagen no hacía nada y las tres capas se apilaban en filas —
   el rótulo terminaba arriba de la foto y la foto sin ancho. */
.lp-banda picture {
  grid-area: 1 / 1;
  display: block;
  min-height: 62svh;
  max-height: 88svh;
}

.lp-banda img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
  object-fit: cover;
  display: block;
}
@media (min-width: 900px) {
  .lp-banda picture { min-height: 76svh; }
}

/* Velo solo al pie, corto: la imagen es el argumento y taparla
   para poder escribir encima sería perder las dos cosas. */
.lp-banda::after {
  content: "";
  grid-area: 1 / 1;
  align-self: end;
  height: 58%;
  background: linear-gradient(to top,
    rgba(9, 20, 42, 0.97) 0%,
    rgba(9, 20, 42, 0.95) 30%,
    rgba(9, 20, 42, 0.66) 52%,
    rgba(9, 20, 42, 0.24) 78%,
    rgba(9, 20, 42, 0.00) 100%);
  z-index: 1;
}

.lp-banda figcaption {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  width: 100%;
  padding: clamp(24px, 5vw, 56px) 0 clamp(24px, 4vw, 48px);
  color: var(--hueso);
}
.lp-banda__marco {
  width: min(100% - 2 * var(--gutter, 20px), var(--ancho-max, 1360px));
  margin-inline: auto;
}
.lp-banda__num {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--hueso);
}
.lp-banda__tit {
  margin: 0 0 6px;
  font-family: var(--serif);
  /* Fraunces sobre oscuro pierde los trazos finos en tamaño óptico
     alto: se baja el opsz y se sube el peso. */
  font-variation-settings: var(--fraunces-oscuro);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lp-banda__pie {
  margin: 0;
  max-width: 46ch;
  font-size: var(--small);
  line-height: 1.55;
  color: rgba(250, 248, 245, 0.88);   /* 9,4:1 sobre el velo */
}

/* El encabezado de la sección, sobre el mismo suelo oscuro. */
.lp-cine__cab {
  padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px);
  color: var(--hueso);
}
.lp-cine__cab .pagina__eyebrow { color: rgba(250, 248, 245, 0.75); }
.lp-cine__titulo {
  margin: 0;
  font-size: var(--d2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: var(--fraunces-oscuro);
  max-width: 18ch;
}
.lp-cine__nota { padding-block: clamp(24px, 3.5vw, 40px); color: rgba(250, 248, 245, 0.86); }

/* ---- En celular la banda se parte, igual que la portada ----
   Los renders son 2,46:1: cine puro. Forzados a una caja vertical
   de teléfono se recortaba el 70% del ancho y desaparecía justo lo
   que nombra el rótulo —el ventanal de la suite, el comedor del
   estar. Misma solución que el hero y por la misma razón: la
   imagen entera arriba (con recorte 16:10 hecho sobre el original,
   encuadrado a mano), el rótulo debajo sobre el suelo oscuro.
   El texto además queda con contraste garantizado y sin velo. */
@media (max-width: 767px) {
  .lp-banda { grid-template-rows: auto auto; }
  .lp-banda picture { grid-area: 1 / 1; min-height: 0; max-height: none; }
  .lp-banda img { aspect-ratio: 16 / 10; height: auto; }
  .lp-banda::after { display: none; }
  .lp-banda figcaption {
    grid-area: 2 / 1;
    align-self: start;
    padding-block: clamp(20px, 5vw, 28px) clamp(28px, 7vw, 40px);
  }
  /* Un filete entre bandas: sin el velo, dos fotos seguidas se
     pegaban y el rótulo de una parecía de la otra. */
  .lp-banda + .lp-banda { border-top: 1px solid rgba(250, 248, 245, 0.14); }
}


/* ============================================================
   5 · FINANCIAMIENTO — el gancho, dicho como número
   ============================================================ */
.lp-financia {
  background: var(--cobalto-hondo);
  color: var(--hueso);
  padding-block: clamp(56px, 8vw, 104px);
}
.lp-financia__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .lp-financia__grid { grid-template-columns: 5fr 7fr; align-items: start; }
}
.lp-financia__titulo {
  margin: 0;
  font-size: var(--d2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: var(--fraunces-oscuro);
  max-width: 16ch;
}
.lp-financia__cifras { margin: 0 0 clamp(24px, 3vw, 32px); padding: 0; list-style: none; }
.lp-financia__cifras li {
  display: grid;
  gap: 2px;
  padding-block: 16px;
  border-top: 1px solid rgba(250, 248, 245, 0.22);
}
@media (min-width: 620px) {
  .lp-financia__cifras li { grid-template-columns: 13rem 1fr; gap: var(--s5); align-items: baseline; }
}
.lp-financia__cifras b {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-oscuro);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-financia__cifras span { color: rgba(250, 248, 245, 0.86); line-height: 1.55; }
.lp-financia p { color: rgba(250, 248, 245, 0.86); line-height: 1.6; max-width: 52ch; }
.lp-financia .btn-linea { color: var(--hueso); border-color: rgba(250, 248, 245, 0.45); }
.lp-financia .btn-linea:hover { border-color: var(--hueso); background: rgba(250, 248, 245, 0.12); }

/* ============================================================
   6 · QUIÉN CONSTRUYE — la diferencia real
   Ninguna de las cuatro referencias tiene esto en la landing del
   proyecto, y es justo lo que Grupo Suca sí puede probar: veinte
   viviendas entregadas, ocho años, y los papeles abiertos.
   ============================================================ */
.lp-quien { background: var(--hueso); padding-block: clamp(56px, 8vw, 104px); }
.lp-quien__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .lp-quien__grid { grid-template-columns: 7fr 5fr; align-items: center; }
}
.lp-quien__titulo {
  margin: 0 0 var(--s5);
  font-size: var(--d3);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.lp-quien p { margin: 0 0 1em; color: var(--piedra); line-height: 1.62; max-width: 50ch; }
.lp-quien p:last-of-type { margin-bottom: clamp(20px, 2.5vw, 28px); }

.lp-marcas { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.lp-marcas li { display: flex; flex-direction: column; gap: 2px; }
.lp-marcas b {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.lp-marcas span {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}

/* ============================================================
   7 · FORMULARIO — la captura
   Tres campos. Cada campo de más es gente que abandona; el
   vendedor puede preguntar lo demás por teléfono.
   ============================================================ */
.lp-form { background: var(--cal); padding-block: clamp(56px, 8vw, 104px); }
.lp-form__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) {
  .lp-form__grid { grid-template-columns: 5fr 7fr; align-items: start; }
}
.lp-form__titulo {
  margin: 0 0 var(--s4);
  font-size: var(--d2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.lp-form__texto { margin: 0; color: var(--piedra); line-height: 1.6; max-width: 42ch; }

.lp-form__caja {
  padding: clamp(22px, 3vw, 36px);
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 18px;
}
.lp-form__campos { display: grid; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 560px) {
  .lp-form__campos { grid-template-columns: 1fr 1fr; }
  .lp-form__campos > :last-of-type { grid-column: 1 / -1; }
}
.lp-form__caja .btn-solido { width: 100%; justify-content: center; margin-top: clamp(20px, 2.5vw, 26px); }

.lp-form__o {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: clamp(18px, 2.4vw, 24px) 0;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--piedra);
}
.lp-form__o::before,
.lp-form__o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.lp-form__wa { width: 100%; justify-content: center; }

.lp-form__nota {
  margin: clamp(16px, 2vw, 20px) 0 0;
  max-width: 62ch;   /* medido: sin tope llegaba a 77 caracteres */
  font-size: var(--small);
  line-height: 1.55;
  color: var(--piedra);
}

/* ============================================================
   8 · CIERRE de la landing
   ============================================================ */
.lp-cierre {
  background: var(--tinta);
  color: var(--hueso);
  padding-block: clamp(48px, 7vw, 88px);
  text-align: left;
}
.lp-cierre__titulo {
  margin: 0 0 var(--s5);
  font-size: var(--d2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: var(--fraunces-oscuro);
  max-width: 18ch;
}
.lp-cierre p { margin: 0 0 clamp(22px, 3vw, 30px); color: rgba(250, 248, 245, 0.86); line-height: 1.6; max-width: 46ch; }
.lp-cierre .btn-linea { color: var(--hueso); border-color: rgba(250, 248, 245, 0.45); }
.lp-cierre .btn-linea:hover { border-color: var(--hueso); background: rgba(250, 248, 245, 0.12); }
.lp-cierre__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 559px) {
  .lp-cierre__acciones { flex-direction: column; align-items: stretch; }
  .lp-cierre__acciones > * { justify-content: center; }
}

/* ============================================================
   La aérea rotulada, en celular

   El plano de entorno es la mejor respuesta a "qué hay cerca":
   los comercios aparecen en su posición geográfica real, que es
   cartografía y no un muro de auspiciantes. Pero a 390px de ancho
   los rótulos —"Amarket", "Clínica de las Américas"— quedan de
   unos 7px y no se leen.

   Dos correcciones baratas: la imagen sale a sangre para ganar
   los márgenes, y se puede tocar para abrirla a tamaño completo,
   que es como se lee un mapa en un teléfono.

   Lo que NO arregla el CSS: el arte final necesita rótulos más
   grandes. Un mapa de entorno se diseña para el celular primero.
   ============================================================ */
@media (max-width: 767px) {
  body.landing .pr-ubica__lamina {
    margin-inline: calc(-1 * var(--gutter, 20px));
  }
  body.landing .pr-ubica__lamina img { border-radius: 0; border-inline: 0; }
}

.pr-ubica__zoom { display: block; position: relative; }
.pr-ubica__zoom::after {
  content: "Tocar para ampliar";
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 14px;
  border-radius: var(--radio-pildora);
  background: var(--cobalto-hondo);
  color: var(--hueso);          /* 13,23:1 */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .pr-ubica__zoom::after { content: "Ver en grande"; }
}

/* ============================================================
   El precio en la portada

   Va grande y arriba, no escondido en la sección de
   financiamiento. Ninguno de los cuatro sitios de referencia
   publica precio: es la diferencia más barata que tiene esta
   página. Y para tráfico pagado filtra —el que no puede pagarlo
   no consulta, y el que sí deja de sospechar que el número se
   lo van a inventar según la cara.
   ============================================================ */
.lp-precio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
}
.lp-precio span {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.94);
}
.lp-precio b {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-oscuro);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- Render o fotografía, dicho en cada banda ----
   No es un tecnicismo. El argumento de la página es que las
   casas de al lado YA están hechas y se pueden ir a ver; si un
   render se confunde con la casa entregada, se cae justo eso.
   Decirlo cuesta una etiqueta y protege el activo entero. */
.lp-banda__tipo {
  font-style: normal;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(250, 248, 245, 0.35);
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--hueso);
}

/* ============================================================
   El foco en los campos de texto

   Se saca el recuadro azul: sobre un campo que ya es un filete
   inferior, un rectángulo flotando a 4px se ve pegado y no
   dibujado.

   Lo que NO se hace es quitar el foco y ya. Quien navega con
   teclado necesita ver dónde está parado, y un campo sin señal
   de foco es inusable a ciegas. Se reemplaza por una señal más
   fuerte y más propia del sistema: el filete pasa a cobalto y la
   etiqueta se pinta del mismo color. Dos señales a la vez, sin
   caja — se probó con un lavado de fondo y se veía como un campo
   relleno, que contradice el "filete inferior, sin caja" del
   resto del sitio.
   ============================================================ */
.campo input:focus-visible,
.campo textarea:focus-visible,
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--cobalto);
}
/* El campo no debe saltar 1px al enfocarse. */
.campo input,
.campo textarea { border-bottom-width: 2px; border-bottom-color: var(--linea); }

.campo:focus-within label { color: var(--cobalto); }


/* ============================================================
   El tope de ancho del texto de portada

   En escritorio el bloque de texto se queda dentro de la franja
   oscura del velo. Sin tope, `.lp-datos` estiraba hasta el borde
   del contenedor y su última etiqueta caía sobre la parte clara
   de la fotografía.

   Va al final del archivo a propósito: con la misma especificidad
   gana la última regla, y ubicarlo antes de las bases hacía que no
   se aplicara. (Pasó dos veces en esta hoja — vale la pena la nota.)
   ============================================================ */
@media (min-width: 768px) {
  .lp-hero__texto > * { max-width: min(54ch, 47%); }
  .lp-hero__titulo    { max-width: min(13ch, 47%); }
  .lp-hero__acciones  { max-width: none; }
}

/* Las dos salidas del bloque de financiamiento. En celular van
   apiladas a ancho completo: un botón angosto bajo el pulgar es la
   fricción más cara de la página. */
.lp-financia__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
@media (max-width: 559px) {
  .lp-financia__acciones { flex-direction: column; align-items: stretch; }
  .lp-financia__acciones > * { justify-content: center; }
}
.lp-financia .btn-solido {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--cobalto-hondo);      /* 13,23:1 */
}
.lp-financia .btn-solido:hover { background: #fff; border-color: #fff; }

/* ---- La zona universitaria, destacada sobre la lista ----
   Tres universidades a tres minutos no es un dato de entorno más:
   es un argumento —familias con hijos estudiando, y alquiler si
   alguien compra para eso. Repartido entre supermercados se pierde,
   así que va arriba y con peso propio. */
.cerca__dest {
  margin: var(--s4) 0 0;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
  border-left: 3px solid var(--cobalto);
  background: color-mix(in srgb, var(--cobalto) 6%, transparent);
  border-radius: 0 10px 10px 0;
}
.cerca__dest b {
  display: block;
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-texto);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta);              /* 16,4:1 sobre el lavado */
}
.cerca__dest span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--cobalto);            /* 9,3:1 sobre el lavado */
}

/* ═══ footer.css ═══ */
/* ============================================================
   PIE DE PÁGINA

   Cobalto profundo, el mismo suelo que la banda de cifras — así
   el sitio cierra con el color con el que abre.

   Columnas DESIGUALES (5/2/2/3): la marca se queda con el ancho,
   los índices ocupan lo que necesitan. Cuatro columnas idénticas
   son el pie de plantilla.

   La línea inferior nombra al grupo — constructora y los dos
   colegios. Eso establece hoy la estructura multi-negocio, así
   que sumarla en serio más adelante es un cambio de contenido y
   no un rediseño.
   ============================================================ */

.pie {
  background: var(--cobalto-hondo);
  color: rgba(250, 248, 245, 0.78);   /* 8.0:1 sobre #102A70 */
  padding-block: clamp(56px, 7vw, 96px) clamp(28px, 3vw, 40px);
  font-size: var(--small);
}

.pie__grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
@media (min-width: 900px) {
  .pie__grid {
    grid-template-columns: 5fr 2fr 2fr 3fr;
    gap: clamp(32px, 4vw, 72px);
  }
}

/* ---- Columna de marca ---- */
.pie__marca { max-width: 34ch; }
.pie__logo {
  display: inline-flex;
  align-items: center;
  color: var(--hueso);
  padding-block: 10px;      /* 24 + 10 + 10 = 44px de área táctil */
}
.pie__logo svg { display: block; width: 190px; height: 24px; }

.pie__nota {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  line-height: 1.6;
}

.pie__contacto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: clamp(20px, 2.4vw, 28px);
}
.pie__contacto a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--hueso);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms linear;
}
.pie__contacto a:hover { border-bottom-color: var(--laton); }

/* ---- Columnas de enlaces ---- */
.pie__titulo {
  margin: 0 0 var(--s4);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.60);
}

.pie__lista { margin: 0; padding: 0; list-style: none; }
.pie__lista a {
  display: flex;
  align-items: center;
  min-height: var(--tap);          /* 44px sin necesidad de rellenos */
  color: rgba(250, 248, 245, 0.86);
  text-decoration: none;
  transition: color 160ms linear;
}
.pie__lista a:hover { color: var(--hueso); }
.pie__lista a[aria-current="page"] { color: var(--hueso); }

/* Los enlaces externos llevan una marca discreta: se sale del
   sitio, y conviene decirlo antes del clic y no después. */
.pie__lista a[target="_blank"]::after {
  content: "↗";
  margin-left: 8px;
  font-size: 0.85em;
  color: rgba(250, 248, 245, 0.50);
}

/* ---- Barra inferior ---- */
.pie__base {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 20px;
  border-top: 1px solid rgba(250, 248, 245, 0.20);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px var(--s5);
  font-size: 12px;
  color: rgba(250, 248, 245, 0.66);
}
.pie__grupo { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pie__grupo span:not(:last-child)::after {
  content: " ·";
  margin-left: 8px;
  color: rgba(250, 248, 245, 0.40);
}

.pie :focus-visible { outline-color: var(--hueso); }


/* ============================================================
   Pie en celular

   Cuatro columnas apiladas dan un pie larguísimo: en un teléfono
   son casi dos pantallas de desplazamiento para llegar al final.
   Se compacta en tres pasos:
     · las dos listas de enlaces van a dos columnas, no a una
     · la descripción de marca se oculta: ya está en Nosotros y en
       el inicio, y acá solo estira
     · la línea del grupo del pie se oculta: repite la columna
       "El grupo" que está justo arriba

   Los 44px de área táctil NO se tocan: es la regla del sitio y
   ahorrar 4px por enlace no justifica romperla.
   ============================================================ */
@media (max-width: 767px) {
  .pie { padding-block: clamp(40px, 8vw, 56px) 24px; }
  .pie__grid { gap: 32px; }
  .pie__nota { display: none; }
  /* El logo se achica, pero el área táctil no: 20 + 12 + 12 = 44. */
  .pie__logo svg { width: 158px; height: 20px; }
  .pie__logo { padding-block: 12px; }

  /* Navegación y El grupo, lado a lado */
  .pie__grid > :nth-child(2),
  .pie__grid > :nth-child(3) {
    grid-column: span 1;
  }
  .pie__grid {
    grid-template-columns: 1fr 1fr;
  }
  .pie__grid > :first-child,
  .pie__grid > :last-child { grid-column: 1 / -1; }

  .pie__contacto { margin-top: 16px; }

  .pie__base {
    margin-top: 28px;
    padding-top: 16px;
    font-size: var(--micro);
  }
  /* La línea del grupo se repite con la columna "El grupo": sobra. */
  .pie__grupo { display: none; }
}

/* ═══ motion.css ═══ */
/* ============================================================
   MOVIMIENTO — un sistema, no efectos sueltos

   Reglas que sostienen todo lo de abajo:

   1. UNA SOLA CURVA. Todo usa --ease. Cuando cada elemento tiene
      su propio easing, el sitio se lee escrito por varias manos.
   2. DISTANCIAS CORTAS. 14px, no 40. Lo caro se mueve poco: un
      desplazamiento grande grita "animación", uno chico solo se
      siente.
   3. UNA SOLA VEZ. Nada se re-anima al volver a pasar. Repetir
      convierte el movimiento en ruido durante el resto de la
      sesión.
   4. NADA SE MUEVE ANTES DE ESTAR EN PANTALLA. El hero anima al
      cargar; el resto espera a entrar en cuadro.
   5. EL CONTENIDO EXISTE SIN JS. Si el script falla, todo queda
      visible: las clases de partida solo se aplican cuando el JS
      marca el documento con `js-mov`.
   ============================================================ */

:root {
  --mov-dist: 14px;
  --mov-dur: 700ms;
  --mov-paso: 80ms;      /* desfase entre hermanos de un grupo */

  /* Estas eran cifras fijas repartidas por el archivo. Son variables
     porque el celular necesita las mismas animaciones más cortas, y
     eso no se puede hacer si el valor está escrito en cada regla. */
  --mov-img-op:   900ms;   /* la imagen sube su opacidad          */
  --mov-img-tr:   600ms;   /* y cede la escala, algo más lenta    */
  --mov-hero-bg: 1800ms;   /* el fondo del hero                   */
  --mov-hero-tx:  900ms;   /* cada línea del hero                 */
  --mov-carga:    760ms;   /* cascada de entrada de página        */
  --mov-lamina:  1100ms;   /* la portada de las páginas de obra   */
  --mov-hero-d1:  180ms;
  --mov-hero-d2:  300ms;
  --mov-hero-d3:  520ms;
  --mov-hero-d4:  640ms;
}

/* ---- Aparición base ----------------------------------------- */
/* El estado de partida solo aplica si el JS está vivo. Sin JS no
   hay `js-mov` en el <html> y el contenido se ve normal. */
.js-mov .revelar {
  opacity: 0;
  transform: translateY(var(--mov-dist));
  transition: opacity var(--mov-dur) var(--ease),
              transform var(--mov-dur) var(--ease);
  transition-delay: var(--mov-retraso, 0ms);
}
.js-mov .revelar.esta-visible {
  opacity: 1;
  transform: none;
}

/* ---- Imágenes: se destapan, no aparecen ---------------------- */
/* La figura recorta y la imagen entra desde una escala levemente
   mayor. Da la sensación de que la foto ya estaba ahí y se
   descubre, en vez de materializarse. */
.js-mov .revelar-img {
  overflow: hidden;
}
.js-mov .revelar-img > img,
.js-mov .revelar-img > picture > img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--mov-img-op) var(--ease), transform var(--mov-img-tr) var(--ease);
  transition-delay: var(--mov-retraso, 0ms);
}
.js-mov .revelar-img.esta-visible > img,
.js-mov .revelar-img.esta-visible > picture > img {
  opacity: 1;
  transform: none;
}

/* ---- Hero: el único momento orquestado ----------------------- */
/* Ocurre al cargar, no al hacer scroll: ya está en pantalla.
   La imagen cede escala mientras el texto sube en cascada, así
   que las dos cosas terminan juntas y se lee como un solo gesto. */
.js-mov .hero__fondo img {
  animation: hero-fondo var(--mov-hero-bg) var(--ease) both;
}
@keyframes hero-fondo {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.js-mov .hero__eyebrow,
.js-mov .hero__titulo,
.js-mov .hero__filete,
.js-mov .hero__pie {
  animation: hero-sube var(--mov-hero-tx) var(--ease) both;
}
.js-mov .hero__eyebrow { animation-delay: var(--mov-hero-d1); }
.js-mov .hero__titulo  { animation-delay: var(--mov-hero-d2); }
.js-mov .hero__filete  { animation-delay: var(--mov-hero-d3); }
.js-mov .hero__pie     { animation-delay: var(--mov-hero-d4); }

@keyframes hero-sube {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* El filete además se dibuja hacia abajo en vez de aparecer. */
.js-mov .hero__filete {
  transform-origin: top;
  animation: hero-filete var(--mov-hero-tx) var(--ease) var(--mov-hero-d3) both;
}
@keyframes hero-filete {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* ---- Cifras: los números cuentan ----------------------------- */
/* `tabular-nums` es obligatorio acá: sin él el ancho del número
   cambia en cada cuadro y la etiqueta de al lado tiembla. */
.cifra__valor { font-variant-numeric: lining-nums tabular-nums; }

/* ---- Micro-interacciones ------------------------------------ */
/* Los enlaces del pie ya suben su filete; se le agrega el
   desplazamiento mínimo que indica "esto responde". */
.pie__lista a { transition: color 160ms linear, transform 220ms var(--ease); }
.pie__lista a:hover { transform: translateX(3px); }

/* El muro no se detiene nunca, así que un hover que levante la
   tarjeta obligaría a perseguir un objeto en movimiento. Solo
   cambia el borde: se nota sin pedirle puntería a nadie. */
.testimonio { transition: border-color 320ms var(--ease); }
.testimonio:hover { border-color: var(--piedra); }

/* ============================================================
   Sin movimiento: TODO se apaga.
   No es una versión degradada — es el sitio completo, quieto.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-mov .revelar,
  .js-mov .revelar-img > img,
  .js-mov .revelar-img > picture > img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-mov .hero__fondo img,
  .js-mov .hero__eyebrow,
  .js-mov .hero__titulo,
  .js-mov .hero__filete,
  .js-mov .hero__pie {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .pie__lista a:hover { transform: none; }
}

/* ============================================================
   TRANSICIÓN ENTRE PÁGINAS

   El sitio son archivos HTML separados, así que cada clic en el nav
   provocaba un parpadeo blanco y un salto seco. Con la API de View
   Transitions el navegador toma una instantánea de la página que se
   va, otra de la que llega, y las cruza — sin JavaScript y sin
   convertir el sitio en una SPA.

   Donde el navegador no la soporta, la navegación ocurre como antes:
   no hay degradación, simplemente no hay transición. Por eso se
   puede usar hoy sin condicionar nada.

   El armazón (header y pie) lleva `view-transition-name` propio, así
   que NO se desvanece con el resto: se queda quieto mientras cambia
   el contenido. Eso es lo que hace que se sienta una sola aplicación
   en vez de siete documentos.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: salir 220ms var(--flip-ease) both;
}
::view-transition-new(root) {
  animation: entrar 220ms var(--ease) both;   /* era 380ms: navegar es lo más frecuente que hay */
}
@keyframes salir {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(12px); }
}

/* El header y el pie no se cruzan: permanecen. */
.hdr { view-transition-name: armazon-header; }
.pie { view-transition-name: armazon-pie; }
::view-transition-group(armazon-header),
::view-transition-group(armazon-pie) { animation-duration: 0ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   Entrada al cargar — la portada de cada página

   El hero del inicio tenía su cascada al cargar, pero las demás
   páginas aparecían de golpe: su encabezado está sobre el pliegue,
   así que el observador de scroll se dispara antes de que se vea
   nada y la entrada se pierde. Es el mismo motivo por el que el
   hero se anima al cargar y no al entrar en cuadro.

   No se lista qué páginas ni qué secciones. `motion.js` toma la
   PRIMERA sección de <main> —sea cual sea— y a lo que hay adentro
   le pone `revelar--carga` en vez de observarlo. Una página nueva
   queda cubierta sin tocar nada.
   ============================================================ */
.js-mov .revelar--carga {
  opacity: 0;
  transform: translateY(var(--mov-dist, 14px));
  animation: mov-carga var(--mov-carga) var(--ease) both;
  animation-delay: var(--mov-retraso, 0ms);
}
@keyframes mov-carga {
  to { opacity: 1; transform: none; }
}

/* La imagen de portada de un proyecto entra antes que su título:
   se lee "primero la casa, después su nombre".

   ⚠️ La escala va en la IMAGEN dentro de una figura que recorta, no en
   la figura. Cuando la escala estaba en la figura, un 1,03 sobre 320 px
   son 329,6: durante el segundo que dura la entrada la página se podía
   arrastrar 10 px de costado en un teléfono angosto. Un transform NO se
   recorta a sí mismo — desborda a su padre —, así que ponerle overflow
   a la figura solo sirve si lo que se mueve es su contenido. Es además
   el mismo patrón que ya usa `.revelar-img`. */
.js-mov .pr-hero__lamina { overflow: hidden; }
.js-mov .pr-hero__lamina img {
  animation: pr-lamina var(--mov-lamina) var(--ease) both;
}
@keyframes pr-lamina {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-mov .revelar--carga,
  .js-mov .pr-hero__lamina img {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   PRESUPUESTO DE MOVIMIENTO EN CELULAR

   Medido: el scroll va a 60 fps con la CPU frenada 4×, con un salto
   máximo de 20 ms entre fotogramas. O sea que no era falta de
   fluidez — era duración. En un teléfono se hace scroll rápido y con
   el pulgar: un revelado de 1.200 ms sigue corriendo cuando el
   elemento ya salió de pantalla, y lo que se percibe no es una
   animación elegante sino contenido que llega tarde.

   Las distancias no cambian (14 px sigue siendo 14 px). Solo el
   tiempo. La misma coreografía, tocada más rápido.

   Va al final del archivo a propósito: con igual especificidad gana
   la última regla, y en este proyecto ya se perdieron tres tardes
   por poner un override antes de su base.
   ============================================================ */
@media (max-width: 860px) {
  :root {
    --mov-dur:      420ms;
    --mov-paso:      45ms;
    --mov-img-op:   520ms;
    --mov-img-tr:   700ms;
    --mov-hero-bg: 1100ms;
    --mov-hero-tx:  560ms;
    --mov-carga:    480ms;
    --mov-lamina:   650ms;
    --mov-hero-d1:   90ms;
    --mov-hero-d2:  160ms;
    --mov-hero-d3:  280ms;
    --mov-hero-d4:  350ms;
  }
}