/* ═══════════════════════════════════════════ Templum — Landing de La Hera ══
   Landing aparte para el activo de San Esteban Tizatlán, Tlaxcala. Se monta
   encima de `templum.css` y `ficha.css`: no redefine ni un token y todo lo
   que puede salir de ahí —cejillas, numerales, botones, marcos, esquinas,
   cifras, faq, formulario y pie— sale de ahí. Aquí viven solo las piezas
   que esta página no comparte con ninguna otra.                            */

/* ═══════════════════════════════════════════════════════════════ Barra ══
   Esta barra es más larga que la del portafolio: seis anclas de página más
   el enlace de vuelta a Templum. `templum.css` retira el botón de contacto
   a 1250 px; aquí hay que retirarlo antes o el logotipo pisa «Inicio» y el
   botón sale cortado por el borde derecho. Se retira ese y no un enlace
   porque es lo único duplicado: el contacto está en el menú, en el pie y en
   el disco flotante. */
@media (max-width: 1400px) {
  .barra .boton { display: none; }
}

/* Sobre la portada la barra va a cristal, igual que sobre el recorrido del
   portafolio: la banda semiopaca corta el cielo por arriba y parte la
   fotografía en dos. Lo que sostiene el texto es un resguardo degradado —no
   una banda— más alto que la propia barra: si terminara justo en sus 76 px
   se vería el canto cruzando el encuadre. `templum.js` pone `con-portada`. */
.con-portada .barra:not(.es-solida) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.con-portada .barra::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; z-index: -1;
  height: 210px; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(10, 9, 8, .80) 0%, rgba(10, 9, 8, .34) 42%, rgba(10, 9, 8, 0) 100%);
  transition: opacity var(--transicion);
}
.con-portada .barra.es-solida::after { opacity: 0; }
.con-portada .barra:not(.es-solida) .menu a,
.con-portada .barra:not(.es-solida) .nombre {
  text-shadow: 0 2px 16px rgba(10, 9, 8, .85), 0 0 34px rgba(10, 9, 8, .6);
}
.con-portada .barra:not(.es-solida) .marca img {
  filter: drop-shadow(0 2px 14px rgba(10, 9, 8, .9));
}

/* ══════════════════════════════════════════════════════════════ Portada ══
   Fotografía real del predio, no una escena compuesta. El recorrido
   cinemático de la portada de Templum no se reutiliza: sus seis capas son
   la hacienda de la firma y aquí el sujeto es un terreno.                 */
.portada {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-content: end;
  padding-top: calc(var(--barra) + var(--s-6));
  padding-bottom: clamp(40px, 7vh, 84px);
  overflow: hidden;
}

.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img {
  width: 100%; height: 100%; object-fit: cover;
  /* 38 % y no el centro: lo que hay que ver es el pórtico con el rótulo, que
     vive en la mitad de arriba del render. Centrado, el recorte de una
     ventana apaisada se comía la cornisa y dejaba de leerse el nombre. */
  object-position: 50% 38%;
}

/* El velo NO oscurece el pórtico: se le deja ver.

   Hubo una versión anterior que lo apagaba con un foco oscuro en el centro,
   para tapar el «La Hera» iluminado que el propio render lleva en la torre y
   que caía justo detrás del título. Se veía apagado y era el problema
   equivocado de resolver: reencuadrar tampoco servía —con 781×541 en una
   ventana apaisada apenas sobran 98 px de recorte vertical—. **Lo que se
   movió fue el texto**, que ahora vive en el tercio de abajo, sobre el
   pavimento, y deja el pórtico entero e iluminado por encima.

   Así el degradado solo tiene que hacer dos cosas honestas: apagar un poco el
   cielo para que la barra se lea sin volverse una banda negra, y cerrar el
   borde inferior contra el negro de la página, que es donde va el texto. El
   tramo del medio —el pórtico— se queda casi limpio. */
.portada__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* Un asiento suave y bajo, solo debajo del texto. La cejilla y la primera
       línea del título caen sobre la caseta iluminada y la pluma de acceso,
       que es la zona más clara y más ruidosa de todo el render. Va elíptico y
       centrado en el 66 % para no rozar la cornisa ni el rótulo. */
    radial-gradient(58% 34% at 50% 66%,
      rgba(10, 9, 8, .42) 0%, rgba(10, 9, 8, .18) 58%, rgba(10, 9, 8, 0) 78%),
    linear-gradient(180deg,
      rgba(10, 9, 8, .56) 0%, rgba(10, 9, 8, .10) 18%,
      rgba(10, 9, 8, .05) 38%, rgba(10, 9, 8, .40) 54%,
      rgba(10, 9, 8, .76) 70%, rgba(10, 9, 8, .93) 84%, #0a0908 96%);
}

/* Filete interior de la página, como en el hero de la portada de Templum. */
.portada__marco {
  position: absolute; inset: calc(var(--barra) + 22px) 22px 22px;
  border: 1px solid var(--oro-tenue); pointer-events: none; z-index: 0;
}
.portada__marco::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid var(--oro-humo);
}

.portada .envoltura { position: relative; z-index: 1; text-align: center; }

.portada .lugar {
  justify-content: center;
  color: var(--oro-claro);
}

/* El nombre del activo. Playfair en cursiva y con el acabado de oro
   recortado sobre el texto.
   NADA de `text-shadow` aquí: con `background-clip: text` el fondo se pinta
   en la fase de fondo y la sombra en la de contenido, así que la sombra
   queda ENCIMA del oro y lo apaga. Lo que da contraste es el velo. */
/* Más contenido que un titular a pantalla completa: el bloque entero tiene
   que caber en el tercio de abajo, por debajo del pórtico. A 8.5rem el
   título solo se comía la mitad de la portada y empujaba el texto contra el
   rótulo del render. */
.portada__nombre {
  margin-top: var(--s-2);
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: clamp(2.9rem, 7vw, 5rem);
  line-height: .96; letter-spacing: -.015em;
  background: var(--acabado-oro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.portada__lema {
  margin-top: var(--s-3);
  font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  color: var(--marfil);
}

.portada .filete { max-width: 380px; margin: var(--s-3) auto; }

.portada__entrada {
  margin-top: var(--s-3);
  margin-inline: auto; max-width: 56ch;
  font-family: var(--sans); font-size: var(--t-ui); line-height: 1.7;
  color: var(--marfil-2);
}
.portada__entrada b { color: var(--oro-claro); font-weight: 600; }

.portada__acciones {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
}

/* El bloque de «114,810 m²» que vivía aquí se retiró de la portada. No fue
   por sitio: la cifra salía tres veces en la misma pantalla —en el párrafo de
   entrada, en su propia caja, y otra vez en letra enorme en la banda de
   cifras que viene justo debajo— y era lo que empujaba el texto hacia arriba,
   contra el pórtico. */

/* Un render no es obra construida y la página lo dice donde se ve, no en la
   letra pequeña del final. Va en el peso mínimo que sigue siendo legible:
   es una nota al pie de la imagen, no un aviso legal. */
.portada__credito {
  margin-top: var(--s-3);
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--marfil-2);
}

/* ═══════════════════════════════════════════════════ Cuerpo de secciones ══ */

/* Una fotografía suelta con su pie. El pie no es adorno: estas fotos son de
   un terreno sin construir y sin decir qué se está mirando —el acceso, el
   camino, la explanada— las cuatro parecen la misma. */
.figura { margin: 0; }
.figura figcaption {
  margin-top: var(--s-2);
  font-family: var(--sans); font-size: .78rem; line-height: 1.55;
  letter-spacing: .04em; color: var(--marfil-2);
  padding-left: 14px; border-left: 1px solid var(--oro-linea);
}

/* Galería del predio ------------------------------------------------------ */
.galeria {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4); margin-top: var(--s-6);
}
.galeria .marco { --proporcion: 3 / 2; }
.galeria .marco img { transition: transform 900ms cubic-bezier(.22,.61,.36,1); }
.galeria .figura:hover .marco img { transform: scale(1.04); }

/* El plano aéreo y la infografía se leen de cerca: van a ancho completo y sin
   recorte, con `object-fit: contain` sobre el fondo de la casa. Recortados a
   una proporción fija se perdían el borde del polígono y los rótulos. */
.lamina {
  margin-top: var(--s-6);
  border: 1px solid var(--oro-linea);
  background:
    linear-gradient(148deg, rgba(201, 162, 75, .12) 0%,
      rgba(201, 162, 75, .04) 34%, rgba(10, 9, 8, 0) 66%),
    var(--negro-3);
  padding: clamp(10px, 1.6vw, 20px);
}
.lamina img { width: 100%; height: auto; }

/* El entorno: distancias -------------------------------------------------- */
/* Columnas fijas y no `auto-fill`, y la última celda se estira si el número
   de hitos es impar: la retícula se dibuja con el fondo asomando por huecos
   de 1 px, así que una celda vacía se ve como un bloque más claro. */
.distancias {
  list-style: none; padding-inline-start: 0; margin: var(--s-6) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--oro-tenue);
  border: 1px solid var(--oro-tenue);
}
.distancias li {
  background: var(--negro-2); padding: var(--s-4) var(--s-3);
  display: grid; gap: 6px; align-content: start;
}
.distancias b {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700; line-height: 1.1;
  background: var(--acabado-oro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.distancias span {
  font-family: var(--sans); font-size: var(--t-ui); line-height: 1.5;
  color: var(--marfil-2);
}

/* Los hospitales de la Ciudad de la Salud colindante. Lista de nombres, no
   de tarjetas: lo que importa es cuántos son y cuáles. En fila de tres
   porque en columna, con la medida de lectura de 62ch, tres renglones
   cortos dejaban vacía la mitad derecha de la sección. */
.hospitales {
  list-style: none; padding-inline-start: 0; margin: var(--s-5) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.hospitales li {
  position: relative; padding-left: 26px;
  font-family: var(--serif); font-size: var(--t-cuerpo); color: var(--marfil-2);
}
.hospitales li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; transform: rotate(45deg); background: var(--oro);
}

/* El expediente ----------------------------------------------------------- */
/* Siete documentos en dos columnas dejarían una celda huérfana en la última
   fila; el último se estira a las dos. */
.documentos {
  list-style: none; padding-inline-start: 0; margin: var(--s-6) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--oro-tenue);
  border: 1px solid var(--oro-tenue);
}
.documentos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.documentos a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 20px 22px; height: 100%;
  background: var(--negro-2); text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.documentos a:hover { background: var(--negro-3); }
.documentos .icono {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--oro-linea); color: var(--oro);
  transition: background var(--transicion), color var(--transicion);
}
.documentos a:hover .icono { background: var(--oro); color: var(--negro); }
.documentos .titulo-doc {
  display: block;
  font-family: var(--serif); font-size: 1.075rem; color: var(--marfil);
}
.documentos .archivo {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--marfil-2);
}
.documentos .flecha {
  margin-left: auto; color: var(--oro); flex: none;
  transition: transform var(--transicion);
}
.documentos a:hover .flecha { transform: translateX(5px); }

/* El vídeo del predio va en su marco de oro, con la proporción reservada
   para que la página no salte cuando el reproductor de Drive termine de
   cargar. */
.video {
  position: relative; margin-top: var(--s-6);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--oro-linea); background: var(--negro-3);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* La carta del director --------------------------------------------------- */
.carta {
  margin-top: var(--s-6);
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
  padding: clamp(28px, 4vw, 52px);
  background:
    linear-gradient(var(--negro-3), var(--negro-3)) padding-box,
    var(--acabado-oro) border-box;
  border: 1px solid transparent;
}
.carta .retrato { --proporcion: 1 / 1; }
.carta p + p { margin-top: var(--s-3); }
.carta .rubrica {
  display: block; margin-top: var(--s-4);
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro);
}
.carta .acciones { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Aviso al pie de una imagen de proyecto. Los renders de aprovechamiento no
   son obra construida y la página lo dice donde se ven, no en la letra
   pequeña del final. */
.aviso {
  margin-top: var(--s-3);
  font-family: var(--sans); font-size: .78rem; line-height: 1.55;
  color: var(--marfil-2);
  padding-left: 16px; border-left: 1px solid var(--oro-tenue);
}

/* ════════════════════════════════════════════════════════════ Responsivo ══ */
@media (max-width: 900px) {
  .carta { grid-template-columns: minmax(0, 1fr); }
  .carta .retrato { max-width: 190px; }
  .distancias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .distancias li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hospitales { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* En vertical el render se encuadra por altura —el marco es más estrecho que
   la imagen—, así que no queda ni un píxel de recorte arriba o abajo y el
   rótulo del pórtico cae exactamente sobre el título. Aquí sí se puede
   mover: se estira el marco de la fotografía por encima del borde superior y
   la escena entera sube, con el rótulo por delante del texto y no debajo. Lo
   que se pierde por abajo son los últimos centímetros de pavimento, que ya
   estaban en negro. */
@media (max-width: 820px) {
  .portada__foto { top: -18%; height: 118%; bottom: auto; }

  /* Y el velo baja su rampa. En vertical el texto ocupa del 34 % al 92 % de
     la pantalla —en escritorio empieza en el 50 %—, así que el degradado
     tiene que oscurecer mucho antes. Lo que se protege es el tramo de arriba,
     hasta el 26 %, que es donde queda el pórtico con su rótulo. */
  .portada__velo {
    background:
      linear-gradient(180deg,
        rgba(10, 9, 8, .55) 0%, rgba(10, 9, 8, .14) 13%,
        rgba(10, 9, 8, .10) 24%, rgba(10, 9, 8, .58) 38%,
        rgba(10, 9, 8, .84) 56%, rgba(10, 9, 8, .95) 76%, #0a0908 90%);
  }
}

@media (max-width: 640px) {
  .portada__marco { display: none; }   /* a 390 px el filete pisa el texto */
  .galeria { grid-template-columns: minmax(0, 1fr); }
  .documentos { grid-template-columns: minmax(0, 1fr); }
  .distancias { grid-template-columns: minmax(0, 1fr); }
  .portada__acciones .boton { width: 100%; }
  .carta .acciones .boton { width: 100%; }
}