/* ============================================================================
   EL TIO REAL ESTATE
   Concepto: la mensura. Lo que no esta acotado, no existe.

   Hoja propia. No comparte nada con vertical.css ni con gastronomia.css: si
   dos verticales comparten componentes vuelven a leerse como la misma pagina.

   La pagina es un juego de laminas de un legajo tecnico. El blanco es material
   de montaje, no relleno. Radio cero, sombra cero, gradiente cero: nada
   decorativo sobrevive salvo que mida algo.

   Contraste deliberado con gastronomia: papel frio contra papel calido, didona
   contra serif humanista, escala plana contra escala expresiva, lacre como
   filete de 1px contra brasa como relleno de boton.
   ========================================================================= */

:root {
  /* Esta pagina es clara y no tiene version oscura, y eso hay que declararlo.
     Sin `color-scheme`, Chrome en Android puede aplicar su oscurecido automatico e
     invertir el diseno entero, y ademas el navegador dibuja sus propios controles (la
     barra de desplazamiento, el resaltado de seleccion) segun la preferencia del sistema:
     alguien con el sistema en oscuro veia una barra negra contra una pagina de marfil.
     Declarado, el navegador sabe que la pagina eligio, y deja de adivinar. */
  color-scheme: light;

  /* La paleta de una casa senorial, no la de un legajo. El gris frio de papel de copia
     y la grotesca tecnica eran, juntos, lo que hacia que la pagina se leyera como un
     estudio de arquitectura por mucho que se cambiaran las fotos. */
  --marfil: #f4efe4;        /* papel de tina, calido, con grano */
  --marfil-alto: #fbf8f2;   /* el mismo papel, un tono mas alto: material de montaje */
  --tinta: #17211c;         /* verde tan oscuro que se lee negro, como la tinta de talla dulce */
  --tinta-suave: #4c5a52;
  --verde: #1f2f27;         /* el fondo de las secciones nocturnas */
  --laton: #a8874f;         /* el metal de la placa de la puerta. Es el unico acento. */
  /* El mismo metal, oscurecido, para cuando el laton es TEXTO y no ornamento.
     Medido: #a8874f sobre el marfil da 2,93 a 1 y el minimo para texto chico es 4,5. El
     trazo de un adorno puede ser claro porque no se lee; un rotulo de 10 pixeles no.
     Este da 5,07 y sigue siendo laton. */
  --laton-texto: #7d6128;
  --laton-claro: #c9ad78;
  --filete: #cbbca2;        /* el hairline grabado sobre marfil */

  /* Cormorant Garamond para el display y Jost para todo lo demas.
     Una romana finisima de alto contraste con una geometrica silenciosa es la
     combinacion del rubro de lujo de verdad, y no se parece a la de gastronomia, que es
     romana con romana calida. La que salio de aca, Chivo, es una grotesca de legajo: es
     de donde venia la mitad del problema. */
  --display: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --texto: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --dato: 'Jost', system-ui, sans-serif;

  /* Compatibilidad con lo que ya estaba escrito en la hoja. Se dejan como alias para no
     tocar seiscientas lineas de golpe; los nombres nuevos son los de arriba. */
  --papel: var(--marfil);
  --lamina: var(--marfil-alto);
  --grafito: var(--tinta);
  --grafito-suave: var(--tinta-suave);
  --lacre: var(--laton);
  --linea: var(--filete);

  --t1: 8px;  --t2: 16px; --t3: 24px; --t4: 32px;
  --alto-datos: 56px; --alto-dibujo: 96px; --alto-foto: 144px;

  --ancho: 1280px;
  --margen: clamp(20px, 5vw, 72px);
  --columna: 156px;
  /* El canal de los margenes donde corre la filigrana. */
  --canal: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
/* El atributo height del HTML entra como hint de presentacion y GANA sobre aspect-ratio,
   porque aspect-ratio solo aplica cuando una de las dos medidas queda en auto. Sin esta
   linea cada imagen se pintaba con la altura de su atributo (1024 o 1536 px) en vez de la
   proporcion que declara esta hoja: en un telefono eso es una pantalla entera de foto
   recortada entre parrafo y parrafo, y la portada de real estate no mostraba una sola
   palabra hasta el segundo scroll.
   Va antes que cualquier regla de imagen: las que necesitan alto fijo la pisan por
   especificidad. */
img { height: auto; }


/* Sin desplazamiento suave, a proposito.
   En esta pagina el unico ancla interno es el enlace de salto, y un enlace de salto tiene
   que aterrizar, no viajar: animarlo es exactamente lo contrario de lo que existe para
   hacer. Y como el foco tambien desplaza, cada tabulacion entre los ocho elementos
   enfocables se convertia en un vuelo animado de miles de pixeles, medido: al tabular
   desde el boton del hero al siguiente, el elemento enfocado quedaba fuera de pantalla
   setecientos milisegundos despues.

   Se deja la regla de movimiento reducido abajo por si manana aparece un menu con anclas
   y alguien vuelve a poner `smooth`. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--grafito);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ escala
   Cinco escalones y ninguno mas. La jerarquia la hacen la caja, el tracking y
   el aire, no el tamano: asi lo mas grande de la pantalla es siempre la foto,
   que es la regla dura del rubro. */
h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 1600px) { h1, h2 { font-size: 40px; } }
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.4;
  margin: 0;
}
p { margin: 0 0 var(--t3); max-width: 58ch; }

.bajada {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.4;
  color: var(--grafito-suave);
  max-width: 46ch;
}

.rotulo {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin: 0 0 var(--t2);
}

.dato {
  font-family: var(--dato);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--grafito-suave);
}
.dato.alta { text-transform: uppercase; letter-spacing: 0.06em; }

/* ------------------------------------------------------------------ grilla
   Plancha con columna de margen, como una lamina de arquitectura. La regla
   vertical de 1px corre de la caratula al cajetin sin cortarse nunca: es el
   margen del plano y es lo que sostiene la pagina entera. */
.plancha {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}
.lamina {
  display: grid;
  grid-template-columns: var(--columna) 1fr;
  align-items: start;
}
.lamina > .margen {
  padding-top: var(--t1);
  padding-right: var(--t3);
}
.lamina > .cuerpo {
  border-inline-start: 1px solid var(--linea);
  padding-inline-start: var(--t4);
  padding-block: var(--alto-dibujo);
  min-width: 0;
}
.lamina.datos > .cuerpo { padding-block: var(--alto-datos); }
.lamina.foto > .cuerpo { padding-block: var(--alto-foto); }

.margen .num {
  font-family: var(--dato);
  font-size: 13px;
  color: var(--grafito-suave);
  display: block;
}
.margen .rotulo { margin-top: var(--t1); }

@media (max-width: 1079px) {
  .lamina { grid-template-columns: 1fr; }
  .lamina > .margen {
    padding: 0 0 var(--t2);
    display: flex;
    gap: var(--t2);
    align-items: baseline;
  }
  .lamina > .margen .rotulo { margin: 0; }
  .lamina > .cuerpo {
    border-inline-start: 0;
    border-block-start: 1px solid var(--linea);
    padding-inline-start: 0;
    padding-block: var(--t4) var(--alto-dibujo);
  }
}

/* --------------------------------------------------------- la placa (firma)
   Panel de blanco puro apoyado sobre la zona vacia de la foto, saliendose de
   su borde. Es la traduccion digital de la placa de bronce en la puerta: da
   autoridad sin decorar, porque el papel opaco de esquinas rectas lee como
   documento y no como widget. */
.caratula { position: relative; }
.caratula-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.placa {
  background: var(--lamina);
  width: 320px;
  max-width: 100%;
  padding: var(--t4);
}
.placa .rotulo { margin-bottom: var(--t3); }
.placa h1 { margin-bottom: var(--t3); }
.placa dl {
  margin: 0 0 var(--t4);
  display: grid;
  gap: 0;
}
.placa dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--t2);
  padding: var(--t1) 0;
  border-block-end: 1px solid var(--linea);
  font-family: var(--dato);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.placa dt { color: var(--grafito-suave); }
.placa dd { margin: 0; }

@media (min-width: 1080px) {
  /* La placa se monta sobre la ZONA VACIA de la foto, nunca sobre el sujeto: se apoya
     donde el fotografo dejo aire. Por eso ocupa la primera columna y la foto corre por
     debajo de las dos, en vez de partir la fila en dos bloques que no se tocan. */
  .caratula-montaje {
    display: grid;
    grid-template-columns: 352px 1fr;
    align-items: start;
  }
  .caratula-montaje .figura {
    grid-area: 1 / 1 / 2 / 3;
  }
  .caratula-montaje .placa {
    grid-area: 1 / 1 / 2 / 2;
    margin-block-start: var(--alto-dibujo);
    margin-inline-start: var(--t4);
    position: relative;
    z-index: 2;
  }
  /* El pie no puede quedar tapado por la placa. */
  .caratula-montaje figcaption { text-align: right; }
}

/* El boton es fantasma: rectangulo de 1px. El lacre aparece como filete, nunca
   como relleno, que es lo que lo separa del boton de campana. */
.btn {
  display: inline-block;
  border: 1px solid var(--grafito);
  background: transparent;
  color: var(--grafito);
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.btn:hover { border-color: var(--lacre); color: var(--lacre); }
.btn:focus-visible { outline: 2px solid var(--lacre); outline-offset: 3px; }

.enlace {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafito);
  text-decoration: none;
  border-block-end: 1px solid var(--lacre);
  padding-block-end: 3px;
}
.enlace:hover { color: var(--lacre); }

/* ---------------------------------------------------------- la cota (firma)
   Regla de 1px con terminadores a 45 grados, como una acotacion de plano. */
.cota {
  position: relative;
  border-block-start: 1px solid var(--linea);
  margin: var(--t4) 0;
  height: 1px;
}
.cota::before, .cota::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 1px;
  height: 12px;
  background: var(--linea);
  transform: rotate(45deg);
}
.cota::before { left: 0; }
.cota::after { right: 0; }

/* ------------------------------------------- renglon de libro mayor (firma)
   Dos columnas justificadas: concepto a la izquierda, dato a la derecha en
   numerales tabulares. La alineacion a derecha de la cifra es la convencion
   contable de siempre y hace comparables dos filas sin insistir. */
.libro { list-style: none; margin: var(--t4) 0 0; padding: 0; }
.libro li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--t2) var(--t3);
  padding: var(--t3) 0;
  border-block-end: 1px solid var(--linea);
}
.libro .concepto { font-size: 17px; }
.libro .medida {
  font-family: var(--dato);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--lacre);
  text-align: right;
  white-space: nowrap;
}
.libro .nota {
  grid-column: 1 / -1;
  font-size: 15px;
  color: var(--grafito-suave);
  margin: 0;
  max-width: 62ch;
}

/* ------------------------------------------------------- el cajetin (firma)
   Rotulo de plano: grilla de celdas con bordes de 1px colapsados. */
.cajetin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--grafito);
  color: var(--papel);
}
.cajetin > div {
  border: 1px solid rgba(244, 239, 228, 0.28);
  margin: -1px 0 0 -1px;
  padding: var(--t3);
}
.cajetin .rotulo { color: rgba(244, 239, 228, 0.62); margin-bottom: var(--t1); }
.cajetin .valor { font-family: var(--dato); font-size: 13px; font-variant-numeric: tabular-nums; }

/* En las superficies oscuras el gris de lapiz no alcanza: sobre grafito mide 2,63 a 1
   y el minimo es 4,5. Se redefine el token en la propia superficie en vez de enumerar
   una por una las piezas que lo usan, asi cualquier pieza nueva queda bien sola. */
.cierre-oscuro, .cajetin { --grafito-suave: #bdb5a2; }
.cierre-oscuro { background: var(--grafito); color: var(--papel); }
.cierre-oscuro h2 { color: var(--papel); }
.cierre-oscuro .bajada { color: rgba(244, 239, 228, 0.72); }
.cierre-oscuro .btn { border-color: var(--papel); color: var(--papel); }
.cierre-oscuro .btn:hover { border-color: var(--laton-claro); color: var(--laton-claro); }

/* ------------------------------------------------------------------ figuras
   3:2 en absolutamente todo. La unica excepcion de la pagina es el retrato del
   avatar en 2:3, y esta declarada aparte a proposito. */
figure { margin: 0; }
.figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--lamina);
}
.figura.retrato img { aspect-ratio: 2 / 3; }
figcaption {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-top: var(--t2);
}

/* Montaje escalonado: las laminas nunca van a sangre ni al ancho total, y
   alternan de lado. Es el antidoto contra la tira uniforme de secciones. */
.montaje { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--t3); }
.montaje .izq { grid-column: 1 / 9; }
.montaje .der { grid-column: 4 / 13; }
.montaje .texto { grid-column: 1 / 8; }
@media (max-width: 860px) {
  .montaje { grid-template-columns: 1fr; }
  .montaje .izq, .montaje .der, .montaje .texto { grid-column: 1; }
}

.saltar { position: absolute; left: -9999px; background: var(--grafito); color: var(--papel); padding: var(--t2) var(--t3); z-index: 10; }
.saltar:focus { left: var(--t3); top: var(--t3); position: fixed; }

.pie-pagina {
  border-block-start: 1px solid var(--linea);
  padding: var(--t4) 0;
  font-family: var(--texto);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-suave);
}
/* Area tactil de 44px sin engordar el renglon: el padding lo da via min-height y
   el margen negativo lo devuelve, asi el pie se sigue leyendo como una linea. */
.pie-pagina a {
  color: var(--grafito);;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -14px;
}
.pie-pagina nav { display: flex; gap: var(--t3); flex-wrap: wrap; margin-top: var(--t1); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1, h2 { font-size: 27px; }
  h3, .bajada { font-size: 19px; }
  .dato, .libro .medida, .placa dl > div { font-size: 12px; }
  :root { --alto-datos: 40px; --alto-dibujo: 64px; --alto-foto: 88px; }
}

/* ============================================================== el recorrido

   La propiedad se camina y se carga al mismo tiempo. Seis ambientes encadenados
   en un bloque pinneado, con la camara avanzando hacia adentro, y la ficha de la
   derecha anotandose sola a medida que se pasa por cada uno.

   No se parece al pase de gastronomia a proposito: alla hay un objeto calido que
   gira sobre su eje, aca un espacio frio por el que se avanza. Comparten que los
   dos son WebGL propio y que los dos degradan a fotografia, nada mas.
   ========================================================================= */
.recorrido {
  position: relative;
  /* Ocho tomas, siete tramos. A 100vh por tramo el vuelo pasa demasiado rapido para
     que se lea cada lugar; a 90 queda corto en pantallas bajas. 660 son 94 por tramo
     mas el alto del propio hero, y con el suavizado de la camara encima eso da un
     descenso que se puede mirar sin que se atropelle ni se haga largo. */
  height: 660vh;
  background: var(--grafito);
}
.recorrido-marco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.recorrido-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* El respaldo sin motor: la tira de los seis ambientes, en orden y legible. */
.recorrido-respaldo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px var(--margen);
  overflow-x: auto;
}
.recorrido-lamina { flex: none; width: min(56vw, 520px); margin: 0; }
.recorrido-lamina img { width: 100%; height: auto; display: block; }
.recorrido-lamina figcaption {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel);
}
.recorrido-num { color: var(--lacre); }
.recorrido-vivo .recorrido-respaldo { display: none; }

/* --------------------------------------------- el hero nunca queda vacio
   El modulo se hace cargo del hero apenas compila WebGL, que es lo correcto para que la
   tira de respaldo no choque con la capa de texto. Pero entre ese momento y el primer
   cuadro pintado hay que bajar dos fotografias, y en una conexion de verdad eso son
   segundos de fondo verde: el hero aparecia vacio. En localhost la ventana dura
   milisegundos y por eso ninguna medicion lo vio.

   Mientras tanto se deja la PRIMERA figura de la tira, a sangre y sin su pie, haciendo de
   cartel. No cuesta una descarga nueva: es la misma imagen que el `preload` ya pidio.
   Cuando el canvas tiene con que dibujar, se va. */
.recorrido-vivo:not(.recorrido-pintando) .recorrido-respaldo {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.recorrido-vivo:not(.recorrido-pintando) .recorrido-respaldo > * { display: none; }
.recorrido-vivo:not(.recorrido-pintando) .recorrido-respaldo > *:first-child {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
}
.recorrido-vivo:not(.recorrido-pintando) .recorrido-respaldo > *:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.recorrido-vivo:not(.recorrido-pintando) .recorrido-respaldo figcaption { display: none; }

.recorrido-encima {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.44fr);
  align-items: end;
  gap: 40px;
  padding: 0 var(--margen) clamp(32px, 6vh, 76px);
  pointer-events: none;
}
.recorrido-encima::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Dos velos en el mismo pseudoelemento: uno por abajo, para el bloque de texto, y otro
     por la izquierda, para la columna entera.

     El de la izquierda no estaba y la medicion lo delato: el rotulo de marca daba 152 de
     luminancia sobre un fondo de 161 en la toma del acceso, o sea nueve puntos de
     diferencia. A ojo parecia "un poco flojo"; medido, era invisible. El texto del hero
     va sobre una fotografia que cambia ocho veces, asi que no puede depender del color
     que le toque a la foto abajo. */
  background:
    linear-gradient(to right,
      rgba(23, 33, 28, 0.82) 0%,
      rgba(23, 33, 28, 0.50) 30%,
      rgba(23, 33, 28, 0) 58%),
    linear-gradient(to top,
      rgba(23, 33, 28, 0.93) 0%,
      rgba(23, 33, 28, 0.72) 34%,
      rgba(23, 33, 28, 0.10) 62%,
      rgba(23, 33, 28, 0) 84%);
  pointer-events: none;
}
.recorrido-placa, .recorrido-ficha { position: relative; }
.recorrido-placa { max-width: 42ch; }
.recorrido-placa a { pointer-events: auto; }
.recorrido-placa .rotulo { color: var(--laton-claro); }
.recorrido-placa h1 {
  color: var(--lamina);
  /* Las referencias del rubro llegan a 216 px de display. La nuestra tenia 36 en
     toda la pagina, o sea ninguna tipografia de titular. */
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.96;
  margin: 12px 0 0;
}
.recorrido-bajada {
  color: #cdc4b1;
  font-size: clamp(15px, 1.35vw, 18px);
  max-width: 46ch;
  margin: 20px 0 28px;
}
.recorrido-precio {
  margin: 18px 0 0;
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #b5ad9a;
}

/* La ficha: el dato de cada ambiente se anota al pasar y se queda anotado. Al
   final del recorrido estan los seis, que es lo que la seccion afirma. */
.recorrido-encima::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: min(52%, 700px);
  background: linear-gradient(to left,
    rgba(23, 33, 28, 0.86) 0%,
    rgba(23, 33, 28, 0.66) 38%,
    rgba(23, 33, 28, 0.22) 72%,
    rgba(23, 33, 28, 0) 100%);
  pointer-events: none;
}

.recorrido-ficha {
  position: relative;   /* por encima de los dos velos, que estan posicionados */
  border-top: 1px solid rgba(244, 239, 228, 0.42);
  padding-top: 14px;
}
.ficha-titulo {
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(244, 239, 228, 0.74);
  margin: 0 0 12px;
}
.recorrido-ficha ul { list-style: none; margin: 0; padding: 0; }
.recorrido-ficha li {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas: 'num lugar' 'num dato';
  gap: 0 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(244, 239, 228, 0.14);
  opacity: 0.3;
  transition: opacity 0.45s ease;
}
.recorrido-ficha li.anotada { opacity: 1; }
.recorrido-ficha li.activa { border-bottom-color: var(--lacre); }
.ficha-num {
  grid-area: num;
  font-family: var(--dato);
  font-size: 10px;
  color: var(--lacre);
  align-self: center;
}
.ficha-lugar {
  grid-area: lugar;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b5ad9a;
}
.ficha-dato { grid-area: dato; color: var(--lamina); font-size: 15px; }

/* Sin JavaScript el bloque deja de ser un recorrido y pasa a ser una tira. Nada
   queda invisible ni fuera del alcance del teclado. */
html:not(.js) .recorrido { height: auto; }
html:not(.js) .recorrido-marco { position: static; height: auto; }
html:not(.js) .recorrido-respaldo { position: static; }
html:not(.js) .recorrido-encima {
  position: static;
  padding-top: 48px;
  align-items: start;
}
html:not(.js) .recorrido-encima::before { display: none; }
html:not(.js) .recorrido-ficha li { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .recorrido-ficha li { transition: none; }
}

@media (max-width: 900px) {
  .recorrido { height: 420vh; }
  .recorrido-encima {
    grid-template-columns: 1fr;
    align-items: end;
    gap: 20px;
  }
  /* La ficha completa no entra al lado en vertical: quedan los dos ultimos datos
     anotados, que es lo que sostiene el argumento sin tapar el titular. */
  .recorrido-ficha li:not(.activa):not(.anotada) { display: none; }
  .recorrido-ficha li.anotada:not(.activa) { display: none; }
}

/* -------------------------------------------------- fotografia en las laminas

   La hoja tenia cinco imagenes en catorce pantallas. Las referencias del rubro
   (Storey, Kononenko, Base31, LIKOVA) van de 49 a 194. La diferencia no es de
   gusto: en arquitectura la fotografia ES el argumento, y un legajo sin fotos de
   obra es una propuesta, no un proyecto.
   ------------------------------------------------------------------------- */

/* El plano al lado del libro mayor. La foto no ilustra el texto: es el objeto del
   que el texto habla. */
.con-lamina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: 48px;
  align-items: start;
}
.lamina-tecnica { margin: 0; position: sticky; top: 40px; }
.lamina-tecnica img {
  width: 100%;
  height: auto;
  display: block;
  /* Marco de lamina: filete de un pixel y fondo blanco puro, que en esta hoja es
     material de montaje y no relleno. */
  border: 1px solid var(--linea);
  background: var(--lamina);
  padding: 10px;
}
.lamina-tecnica figcaption {
  margin-top: 10px;
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--grafito-suave);
}

/* Tres detalles de obra, a sangre, sin margen entre ellos: en un juego de planos
   las fotos de obra van pegadas, no espaciadas como tarjetas. */
.detalles-obra { padding: 0; }
.tira-obra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.tira-obra figure { margin: 0; position: relative; }
/* Cuatro por cinco y no cuadrado: es la proporcion con la que un portal muestra una
   propiedad, y ademas la unica que aguanta las tres tomas de la cartera sin perderlas.
   Una torre de Manhattan recortada a cuadrado deja de ser una torre. */
.tira-obra img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.tira-obra figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--lamina);
  background: rgba(23, 33, 28, 0.82);
  padding: 6px 10px;
}

/* La unica imagen calida de la hoja. */
.sangre-noche { position: relative; }
.sangre-noche img {
  width: 100%;
  height: clamp(260px, 46vh, 520px);
  object-fit: cover;
  display: block;
}
.pie-noche {
  position: absolute;
  left: var(--margen);
  bottom: 20px;
  max-width: 36ch;
  margin: 0;
  font-family: var(--dato);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--lamina);
  background: rgba(23, 33, 28, 0.86);
  padding: 10px 14px;
}

[data-revela] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-revela].visible { opacity: 1; transform: none; }
html:not(.js) [data-revela] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revela] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .con-lamina { grid-template-columns: 1fr; gap: 32px; }
  .lamina-tecnica { position: static; }
  .tira-obra img { aspect-ratio: 3 / 4; }
  .tira-obra figcaption { font-size: 9px; letter-spacing: 0.14em; padding: 6px 8px; }
}

/* El CTA sobre el recorrido va invertido.

   `.btn` es un filete oscuro con texto oscuro, que es lo correcto sobre el papel
   frio de la hoja y es invisible sobre la fotografia oscura del recorrido. El test
   de contraste no lo agarra, y no es una falla del test: mide el texto contra la
   cadena de fondos declarada en CSS, y detras de este boton no hay un fondo
   declarado, hay un canvas. Es el mismo punto ciego que aparecio con el pie de la
   panoramica en gastronomia.

   Se rellena con el blanco de lamina, que en esta hoja es material de montaje. NO
   con lacre: el rojo del sello notarial no rellena un boton, esa regla es del
   sistema y vale mas que la comodidad de este caso. */
/* Sobre el hero oscuro el boton era blanco lleno con texto oscuro. Con la paleta nueva
   `--lamina` paso de blanco puro a marfil y el texto quedo marfil sobre marfil: un
   rectangulo vacio. Aca va la placa de laton, que es la version nocturna de la misma
   idea: filete doble, versalitas y el metal como unico color. */
.recorrido .btn {
  border-color: var(--laton);
  outline-color: rgba(168, 135, 79, 0.45);
  background: transparent;
  color: var(--marfil-alto);
}
.recorrido .btn:hover,
.recorrido .btn:focus-visible {
  background: var(--laton);
  color: var(--verde);
  outline-color: var(--laton);
}

/* ============================================================ lo que se implementa

   Misma columna vertebral que gastronomia y resuelta distinto, que es la unica forma de
   que dos paginas del mismo producto no se lean iguales.

   Alla el mosaico se reparte en columnas porque las piezas son objetos de un local y no
   tienen orden. Aca hay orden: las tres primeras son producto desplegado y las cinco
   siguientes son la base que se monta encima. Por eso van en filas numeradas, como las
   laminas de un legajo, y la captura ocupa el lugar grande.
   ========================================================================= */
.entrega { padding: 92px 0 62px; }
/* Esta hoja no tiene `.inner`: su sistema de contenedor es `.plancha`, con el ancho y
   el margen lateral propios. Escribi el vocabulario de gastronomia otra vez y el bloque
   salio pegado al borde izquierdo, sin ancho maximo. Es la segunda vez que me pasa entre
   estas dos hojas, y por eso ahora las secciones nuevas usan `.plancha`. */
.entrega > .plancha { max-width: 1440px; }
/* La plancha de montaje. Antes era una lista de ocho filas, cada una con una foto de 578
   pixeles de alto al lado de 131 de texto: 447 de vacio por fila, unos 3.500 en total, y
   es literalmente lo que marco el founder en la pagina anterior ("imagenes verticales y
   al lado tres renglones de texto y lleno de blanco arriba y abajo").

   La correccion de fondo no es achicar la foto sino sacar el texto de al lado: debajo de
   la imagen no puede sobrar altura, porque el bloque mide lo que mide su contenido. Y
   sobre doce columnas cada pieza puede tener el ancho que le corresponde en vez del
   mismo para las ocho, que es lo que hacia que ocho entregables se leyeran como una
   tabla. */
.entregables {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 34px 30px;
  align-items: start;
}
.ent {
  grid-column: span var(--span, 6);
  margin-top: var(--baja, 0px);
}

.ent:last-child { border-bottom: 1px solid var(--linea); }
/* Las impares dan vuelta la plantilla, no el orden de los hijos: con `order` el
   elemento cambia de lugar pero las columnas no, y la captura terminaba en la columna
   angosta. Ya paso en el metodo de gastronomia. */
.ent:nth-child(even) { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
/* `order: 2`, no `-1`. La figura ya es el primer hijo, asi que un orden negativo no la
   movia y lo unico que quedaba en pie era la plantilla invertida: la captura terminaba
   en la columna angosta y en las filas pares se leia la mitad de chica. */
.ent:nth-child(even) > .ent-foto { order: 2; }

.ent-foto { margin: 0; }
.ent-foto img { width: 100%; height: auto; display: block; }
/* La captura de producto lleva marco de lamina: filete de un pixel y fondo blanco, que
   en esta hoja es material de montaje. Una pantalla oscura sin marco flota sobre el
   papel frio. */
.ent-foto--producto img {
  border: 1px solid var(--linea);
  background: var(--lamina);
  padding: 8px;
}
.ent-foto--producto figcaption {
  margin-top: 8px;
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--grafito-suave);
}
.ent-foto--obra img { aspect-ratio: var(--forma, 4 / 3); object-fit: cover; }

/* Cada pieza con su proporcion. Ocho fotos con el mismo recorte vuelven a ser una tabla
   por mucho que cambien de ancho. */
.ent-texto { margin-top: 18px; }
.ent-texto h3 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.12;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ent-texto p { font-size: 15px; line-height: 1.55; }
.ent-num { font-family: var(--dato); font-size: 11px; color: var(--lacre); }

@media (max-width: 900px) {
  .entregables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
  .ent { grid-column: span 1; margin-top: 0; }
}
@media (max-width: 560px) {
  .entregables { grid-template-columns: 1fr; }
}

.ent-num {
  font-family: var(--dato);
  font-size: 12px;
  color: var(--lacre);
  flex: none;
}
.ent-texto p { margin: 0; color: var(--grafito-suave); }

/* ------------------------------------------------------------- la auditoria */
.como { padding: 92px 0 62px; background: var(--papel); }
.como > .plancha { max-width: 1440px; }
.como-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
  gap: 62px;
  align-items: start;
}
.como-texto h2 { font-size: clamp(30px, 3.6vw, 48px); }
.pasos { list-style: none; margin: 44px 0 0; padding: 0; }
.pasos li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--linea);
}
.paso-num { font-family: var(--dato); font-size: 12px; color: var(--lacre); }
.pasos h3 { margin: 0 0 6px; font-size: 22px; }
.pasos p { margin: 0; color: var(--grafito-suave); max-width: 48ch; }

.como-tio { margin: 0; position: sticky; top: 44px; }
.como-tio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--linea);
}
.como-tio figcaption {
  margin-top: 10px;
  font-family: var(--dato);
  font-size: 11px;
  color: var(--grafito-suave);
}

@media (max-width: 900px) {
  .ent, .ent:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .ent:nth-child(even) > .ent-foto { order: 0; }
  .como-grid { grid-template-columns: 1fr; gap: 32px; }
  .como-tio { position: static; max-width: 340px; }
}


/* -------------------------------------------------- la ficha de la inmobiliaria
   Rima con la ficha del hero, donde la de la propiedad se va completando mientras se
   baja. Aca la propiedad es la inmobiliaria. Va sobre el blanco puro, que en esta paleta
   es material de montaje y no fondo: es una hoja apoyada sobre el papel de la pagina. */
.ficha-agencia {
  margin-top: var(--t4);
  background: var(--lamina);
  border: 1px solid var(--linea);
  padding: var(--t3) clamp(20px, 3vw, 40px) var(--t4);
}
.fi-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--t3);
  padding-bottom: var(--t2);
  border-bottom: 1px solid var(--linea);
}
.fi-titulo {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 25px);
}
/* La chapa de estado, como la que un portal le pone a una publicacion. */
.fi-estado {
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--lamina);
  background: var(--lacre);
  padding: 5px 10px;
  white-space: nowrap;
}

.fi-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.fi-lista li {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-areas: 'num area' 'num dato';
  gap: 0 var(--t2);
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
}
/* La septima queda sola en la ultima fila: sin esto arrastra un filete a la nada. */
.fi-lista li:last-child { grid-column: 1 / -1; border-bottom: none; }
.fi-num {
  grid-area: num;
  font-family: var(--dato);
  font-size: 10px;
  color: var(--lacre);
  align-self: center;
}
.fi-area {
  grid-area: area;
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--grafito);
}
.fi-dato {
  grid-area: dato;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grafito-suave);
  margin-top: 3px;
}
.fi-pie {
  margin: var(--t3) 0 0;
  font-family: var(--dato);
  font-size: 11.5px;
  color: var(--grafito-suave);
}

@media (max-width: 720px) {
  .fi-lista { grid-template-columns: 1fr; }
  .fi-lista li:last-child { border-bottom: none; }
}


/* ----------------------------------------------------------------- el cajetin
   El rotulo de la lamina, que en un plano va en el angulo inferior derecho y ordena
   todos los datos de la hoja en celdas con su titulo. Aca ordena el cierre entero.

   El borde se arma con un solo filete y `gap: 1px` sobre fondo de linea: asi las celdas
   comparten borde en vez de duplicarlo, que es como se dibuja una grilla de verdad y no
   como se ve una tabla de HTML con dos pixeles en cada junta. */
.rotulo-lamina {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: #33403a;
  border: 1px solid #33403a;
}
.rotulo-lamina .cel {
  background: var(--grafito);
  padding: var(--t3);
  min-width: 0;
}
/* Las celdas de dato ocupan un cuarto de fila; las que llevan contenido, lo que
   necesitan. Esta regla va antes que las especificas a proposito. */
.rotulo-lamina .cel { grid-column: span 3; }
.rotulo-lamina .cel--retrato { grid-column: span 3; padding: 0; }
.rotulo-lamina .cel--retrato img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.rotulo-lamina .cel--titulo { grid-column: span 6; display: flex; flex-direction: column; justify-content: center; }
.rotulo-lamina .cel--accion { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; gap: var(--t2); }
.rotulo-lamina .cel--correo { grid-column: span 6; }
.rotulo-lamina .cel--firma { grid-column: span 6; display: flex; flex-direction: column; justify-content: space-between; }

.rotulo-lamina .rotulo { margin: 0 0 var(--t1); }
.rotulo-lamina h2 { margin: 0 0 var(--t2); }
.rotulo-lamina .bajada { margin: 0; }
.rotulo-lamina .valor { margin: 0; font-family: var(--dato); font-size: 14px; }
.rotulo-lamina .valor a { color: inherit; }
.rotulo-lamina .pie-cel {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grafito-suave);
}
.rotulo-lamina .marca {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--papel);
}

@media (max-width: 900px) {
  .rotulo-lamina { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rotulo-lamina .cel { grid-column: span 3; }
  .rotulo-lamina .cel--retrato { grid-column: span 6; }
  .rotulo-lamina .cel--retrato img { min-height: 260px; max-height: 380px; }
  .rotulo-lamina .cel--titulo,
  .rotulo-lamina .cel--accion,
  .rotulo-lamina .cel--correo,
  .rotulo-lamina .cel--firma { grid-column: span 6; }
}


/* ------------------------------------------------------- el computo y presupuesto
   La hoja de presupuesto, sobre la hoja de verdad. El blanco puro es material de montaje
   en esta paleta, no fondo: aca es la unica vez que aparece como superficie completa, y
   por eso el bloque se despega del papel de copia sin necesitar sombra. */
.honorarios-grid {
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: end;
}
.pres-lado { display: flex; flex-direction: column; gap: var(--t3); padding-bottom: var(--t3); }
.pres-lado .btn { align-self: start; }
.pres-plazo { margin: 0; font-family: var(--dato); font-size: 11.5px; color: var(--grafito-suave); }

@media (max-width: 900px) {
  .honorarios-grid { grid-template-columns: 1fr; }
  .pres-lado { padding-bottom: 0; }
}

.presupuesto {
  position: relative;
  background: var(--lamina);
  border: 1px solid var(--linea);
  padding: var(--t4) clamp(24px, 4vw, 56px) var(--t4);
  margin-top: var(--t4);
  max-width: 780px;
}
.pres-membrete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--t3);
  padding-bottom: var(--t2);
  border-bottom: 1px solid var(--linea);
}
.pres-membrete .rotulo { margin: 0; }
.pres-obra { margin: 0; font-family: var(--dato); font-size: 12.5px; color: var(--grafito-suave); }

.pres-items { margin: var(--t2) 0 0; }
.pres-items li { padding: 13px 0; }
.pres-items li:last-child { border-block-end: none; }
.pres-items .concepto { font-size: 15.5px; }

/* El total lleva doble filete arriba, que es la convencion del cierre de una planilla y
   la unica razon por la que se lee como total y no como un renglon mas. */
.pres-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--t3);
  margin: var(--t2) 0 0;
  padding-top: var(--t2);
  border-top: 3px double var(--grafito);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
}
.pres-cifra { font-family: var(--dato); letter-spacing: 0.04em; }
.pres-nota {
  margin: var(--t1) 0 0;
  font-family: var(--dato);
  font-size: 11.5px;
  color: var(--grafito-suave);
}
.pres-pie { margin: 0; max-width: 44ch; }

/* El sello pisa el angulo de la hoja y se sale un poco, como un sello de goma de verdad.
   No lleva z-index: al estar posicionado ya pinta sobre el contenido en flujo, y un
   z-index numerico aca crearia contexto de apilado sin ninguna necesidad. */
.sello {
  position: absolute;
  left: -38px;
  bottom: -44px;
  width: clamp(118px, 13vw, 156px);
  height: auto;
  opacity: 0.82;
  transform: rotate(-13deg);
  pointer-events: none;
}
.sello .aro { fill: none; stroke: var(--lacre); stroke-width: 4; }
.sello .aro--fino { stroke-width: 1.4; }
.sello .giro text {
  font: 700 13px/1 var(--dato);
  fill: var(--lacre);
  text-anchor: middle;
}
.sello-marca {
  font: 400 24px/1 var(--display);
  fill: var(--lacre);
  text-anchor: middle;
  letter-spacing: 0.04em;
}
.sello-pie {
  font: 400 10px/1 var(--dato);
  fill: var(--lacre);
  text-anchor: middle;
  letter-spacing: 0.24em;
}

@media (max-width: 620px) {
  .sello { width: 104px; left: -14px; bottom: -30px; }
}

/* El boton del cajetin ocupa su celda: recortado al ancho del texto quedaba partido en
   dos renglones adentro de una celda mucho mas ancha. */
.rotulo-lamina .cel--accion .btn { display: block; text-align: center; }


/* La primera lamina: la lista manda la altura y la foto la acompania al costado, en vez
   de apilarse una sobre la otra dejando el ancho libre a los dos lados. */
.emplaza-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
  margin-top: var(--t4);
}
.emplaza-grid .libro { margin-top: 0; }
.emplaza-foto { margin: 0; }
.emplaza-foto img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (max-width: 860px) {
  .emplaza-grid { grid-template-columns: 1fr; }
  .emplaza-foto img { aspect-ratio: 3 / 2; }
}

/* ============================================================== identidad senorial
   El rediseno de fondo. El founder lo pidio en cinco frases: "tiene q ser una web de
   real state de lujo", "tiene todas lineas rectas", "esto debe ser mas barroco", "super
   detallista", "cada centimetro de la web tiene q tener detalles".

   Las cinco se contestan con lo mismo, que ademas es de donde viene la grafica del rubro
   de lujo: el grabado. Un titulo de propiedad, una escritura, un certificado y el
   membrete de una casa de subastas estan grabados. Nada de eso es una linea recta.

   Lo que cambia aca: la tipografia, el arco en todas las fotografias, el filete con
   losange en lugar del `border-bottom: 1px`, el grano del papel, las capitulares, el
   monograma y la filigrana de los margenes. */

/* ------------------------------------------------------------- el papel y la tinta
   El grano es una turbulencia de SVG en linea, no una imagen: un JPG de grano son
   trescientos kilobytes por una textura que nadie mira de cerca, y ademas se repite
   visiblemente. Va en el `body` y no en un pseudoelemento para que no cree contexto de
   apilado, que es la trampa que ya costo tres veces en gastronomia. */
body {
  font-family: var(--texto);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.72;
  letter-spacing: 0.005em;
  background-color: var(--marfil);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23g)' opacity='0.055'/></svg>");
}

h1, h2, h3, .bajada, .fi-titulo, .pres-total, .rotulo-lamina .marca {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.005em;
}

/* Cormorant es finisima y crece bien: pide cuerpos grandes e interlineado corto. Puesta
   al tamanio de una grotesca se ve debil, que es el error clasico al cambiar de
   grotesca a romana de alto contraste. */
h1 { font-weight: 300; line-height: 0.92; letter-spacing: -0.018em; }
h2 {
  font-size: clamp(32px, 4.6vw, 66px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  margin: 0 0 var(--t2);
}
h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }

/* La bajada en cursiva. Es lo que separa una pagina de lujo de una pagina prolija: la
   cursiva de una romana fina dice "esto lo escribio alguien", y la version en redonda
   dice "esto lo escribio un formulario". */
.bajada {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.34;
  letter-spacing: 0;
  color: var(--tinta-suave);
}

/* Los rotulos en versalitas espaciadas de Jost, en laton. Es la placa de bronce de la
   puerta, no una etiqueta de formulario. */
.rotulo, .ficha-titulo, .fi-area, .fi-estado, .pres-obra, .recorrido-precio,
.tira-obra figcaption, .ent-foto--producto figcaption, .figura figcaption,
.ciudad-texto .rotulo, .paso-num, .ficha-lugar {
  font-family: var(--dato);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.rotulo { font-size: 10.5px; color: var(--laton-texto); }

/* --------------------------------------------------------------------- el arco
   Ninguna fotografia de esta pagina vuelve a ser un rectangulo. El arco de medio punto
   es la forma de una casa senorial y es, ademas, la respuesta literal a "tiene todas
   lineas rectas": la primera curva que ve el ojo al bajar.

   El radio va en porcentaje del alto y no en pixeles, asi que el arco sigue siendo un
   arco cuando la imagen cambia de tamanio. */
.ent-foto img, .emplaza-foto img, .como-tio img,
.tira-obra img, .cel--retrato img, .lamina-tecnica img {
  border-radius: 50% 50% 3px 3px / var(--arco, 26%) var(--arco, 26%) 0 0;
}
.tira-obra img { --arco: 30%; }
.emplaza-foto img { --arco: 24%; }
.cel--retrato img { --arco: 20%; }
.ent-foto--producto img { border-radius: 3px; }   /* una captura de pantalla no lleva arco */

/* El marco de laton que sigue al arco. Un filete de un pixel a media distancia del borde
   es como se enmarca un grabado, y es la clase de detalle que se ve sin mirarlo. */
.ent-foto--obra, .emplaza-foto, .como-tio {
  position: relative;
}
.ent-foto--obra::after, .emplaza-foto::after, .como-tio::after {
  content: '';
  position: absolute;
  inset: 7px 7px auto 7px;
  height: calc(100% - 14px);
  border: 1px solid rgba(168, 135, 79, 0.42);
  border-radius: 50% 50% 3px 3px / var(--arco, 26%) var(--arco, 26%) 0 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------- los filetes
   El `border-bottom: 1px solid` de toda la hoja pasa a filete grabado. Se resuelve con
   un degradado repetido y un losange dibujado en el pseudoelemento, asi no hay que
   meter un SVG en cada renglon de cada lista. */
.libro li, .fi-lista li, .pasos-lista li, .ent, .notas li {
  border-bottom: none;
  position: relative;
}
.libro li::after, .fi-lista li::after, .notas li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background:
    linear-gradient(to right, var(--filete), var(--filete)) top left / 100% 1px repeat-x,
    linear-gradient(to right, rgba(203, 188, 162, 0.55), rgba(203, 188, 162, 0.55)) bottom left / 100% 1px repeat-x;
  background-repeat: no-repeat;
}
.fi-lista li:last-child::after, .libro li:last-child::after { display: none; }

/* El losange que parte un filete al medio: el adorno de imprenta. */
.filete-flor {
  display: block;
  width: min(100%, 520px);
  height: 22px;
  margin: var(--t3) 0;
  overflow: visible;
}
.filete-flor .fl-linea { stroke: var(--filete); stroke-width: 1; }
.filete-flor .fl-flor path { fill: var(--laton); }

/* ------------------------------------------------------------------ la capitular
   La primera letra de la bajada de cada lamina, en grande y en laton. Es el detalle mas
   viejo de la tipografia y el que mas rapido dice "esto esta compuesto, no maquetado". */
.capitular::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 400;
  /* El alto de la capitular tiene que ser un multiplo exacto del interlineado, o el
     ultimo renglon que la rodea queda sangrado a media palabra. Alto = tamanio por
     interlineado = 3.573 * 0.75 = 2.68 em del parrafo, y el renglon del parrafo mide
     1.34: exactamente dos. Sin padding vertical, que sumaria al alto de la caja flotante
     y volveria a romper la cuenta.

     Dos y no tres porque la tinta de una capital de Cormorant es mas alta que su caja de
     linea: a tres renglones el trazo se salia por abajo del parrafo en dos de las tres
     bajadas, medido. A dos, la tinta mide 66 pixeles contra 70 de caja. */
  font-size: 3.573em;
  line-height: 0.75;
  padding: 0 0.1em 0 0;
  color: var(--laton-texto);
  font-style: normal;
}

/* --------------------------------------------------------------------- el boton
   Doble filete con aire entre los dos, versalitas espaciadas y el laton adentro. Es la
   placa de bronce, no un boton de aplicacion. */
.btn {
  font-family: var(--dato);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  padding: 17px 34px;
  border: 1px solid var(--laton);
  outline: 1px solid rgba(168, 135, 79, 0.34);
  outline-offset: 4px;
  color: var(--tinta);
  background: transparent;
  transition: background 260ms ease, color 260ms ease, outline-color 260ms ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--laton);
  color: var(--marfil-alto);
  outline-color: var(--laton);
}
.cierre-oscuro .btn, .recorrido .btn { color: var(--marfil-alto); }
.cierre-oscuro .btn:hover, .recorrido .btn:hover { color: var(--verde); }

/* ------------------------------------------------------------------ el monograma */
.monograma { display: block; overflow: visible; }
.monograma .mo-guilloche { fill: none; stroke: var(--laton); stroke-width: 0.5; opacity: 0.5; }
.monograma .mo-ovalo { fill: none; stroke: var(--laton); stroke-width: 1.3; }
.monograma .mo-ovalo--fino { stroke-width: 0.6; opacity: 0.7; }
.monograma .mo-hoja { fill: var(--laton); opacity: 0.75; }
.monograma .mo-letras {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  fill: var(--tinta);
}
.cierre-oscuro .monograma .mo-letras, .recorrido .monograma .mo-letras { fill: var(--marfil-alto); }

/* ------------------------------------------------------------------- la filigrana
   La capa animada, y el reemplazo de la ciudad que se encendia. Corre por los dos
   canales que quedan entre el borde de la ventana y la caja de texto, que en la version
   anterior eran margen muerto, y se va dibujando mientras se baja.

   No lleva z-index: esta posicionada y las secciones no, asi que pinta encima de sus
   fondos sin pedir permiso, y como todo cae en el canal no tapa una sola letra. */
.cuerpo-plano { position: relative; }
.filigrana {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--canal);
  pointer-events: none;
  overflow: hidden;
}
.filigrana > svg { display: block; }
/* La cortina que descubre el grabado al bajar. Es del color del papel y se mueve con
   `transform`, que el compositor resuelve sin repintar: la version con mascara de SVG
   cambiaba la geometria en cada cuadro y obligaba a rasterizar de nuevo un patron de
   ocho mil seiscientos pixeles de alto. Medido, el peor cuadro pasaba de dos segundos. */
.fg-cortina {
  position: absolute;
  inset: 0;
  background: var(--marfil);
  transform: translateY(0);
  will-change: transform;
}
.filigrana--izq { left: 0; }
.filigrana--der { right: 0; }
.filigrana .fg-tallo { fill: none; stroke: var(--laton); stroke-width: 1.6; opacity: 0.85; }
.filigrana .fg-voluta { fill: none; stroke: var(--laton); stroke-width: 1.2; opacity: 0.78; }
.filigrana .fg-hoja { fill: var(--laton); opacity: 0.5; }
.filigrana .fg-hoja--chica { opacity: 0.68; }
.filigrana .fg-roseta { fill: none; stroke: var(--laton); stroke-width: 1.4; opacity: 0.6; }
.filigrana .fg-roseta--chica { opacity: 0.3; }
.filigrana .fg-nudo { fill: var(--laton); opacity: 0.5; }

/* Debajo de 1100px el canal se cierra y el grabado se montaria sobre el texto. */
@media (max-width: 1099px) {
  .filigrana { display: none; }
}

/* --------------------------------------------------------- las cajas, sin esquinas
   Los dos paneles de la pagina (la ficha de la inmobiliaria y la hoja de presupuesto)
   dejan de ser rectangulos con borde: llevan el filete doble y las esquinas grabadas. */
.ficha-agencia, .presupuesto {
  position: relative;
  border: 1px solid var(--filete);
  outline: 1px solid rgba(203, 188, 162, 0.5);
  outline-offset: 5px;
  background: var(--marfil-alto);
}
.esq {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
/* Se apoyan sobre el filete exterior, que corre a cinco pixeles del borde. */
.esq--ai { top: -6px; left: -6px; }
.esq--ad { top: -6px; right: -6px; }
.esq--bi { bottom: -6px; left: -6px; }
.esq--bd { bottom: -6px; right: -6px; }
.esq .es-arco { fill: none; stroke: var(--laton); stroke-width: 1.3; }
.esq .es-rulo { fill: none; stroke: var(--laton); stroke-width: 0.9; opacity: 0.8; }
.esq .es-punto { fill: var(--laton); opacity: 0.9; }

.fi-estado {
  background: transparent;
  color: var(--laton-texto);
  border: 1px solid var(--laton);
  font-size: 9.5px;
  letter-spacing: 0.3em;
}

/* ------------------------------------------------------- las secciones nocturnas */
.cierre-oscuro { background: var(--verde); color: var(--marfil); }
.rotulo-lamina { background: rgba(168, 135, 79, 0.42); border-color: rgba(168, 135, 79, 0.28); }
.rotulo-lamina .cel { background: var(--verde); }
.cierre-oscuro .rotulo { color: var(--laton-claro); }
.recorrido { background: var(--verde); }


/* ------------------------------------------------------------- las hornacinas
   Los cuatro tiempos. Arco de medio punto, filete doble de laton, clave con fleuron y
   una roseta de guilloche al fondo como marca de agua. Se iluminan en orden mientras se
   baja, que es lo que hacian los edificios que salieron de aca, pero en el idioma de la
   pagina y no en el de una ilustracion. */
.hornacinas {
  list-style: none;
  margin: var(--t4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 38px);
  align-items: start;
}
.hornacinas li { transition: opacity 520ms ease; opacity: 0.42; }
.hornacinas li.vivo { opacity: 1; }

.horn { display: block; width: 100%; height: auto; overflow: visible; }
.horn-fondo { fill: var(--marfil-alto); }
.horn-filete { fill: none; stroke: var(--laton); stroke-width: 1.4; }
.horn-filete--fino { stroke-width: 0.7; opacity: 0.6; }
.horn-roseta path { fill: none; stroke: var(--laton); stroke-width: 1.1; opacity: 0.20; }
.hornacinas li.vivo .horn-roseta path { opacity: 0.42; }
.horn-roseta path { transition: opacity 620ms ease; }
.horn-clave path { fill: var(--laton); }
.horn-num {
  font-family: var(--display);
  font-weight: 300;
  font-size: 74px;
  text-anchor: middle;
  fill: var(--tinta);
  letter-spacing: 0.04em;
}

.horn-texto { margin-top: var(--t2); }
.horn-texto h3 {
  margin: 0 0 6px;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.1;
}
.horn-texto p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------- la vista de noche
   El cierre: una fotografia grande bajo arco, con su filete, como cuelga un cuadro una
   casa de subastas. Reemplaza a la banda de la ciudad. */
.vista { padding: clamp(48px, 8vh, 110px) var(--margen); background: var(--marfil); }
.vista-marco {
  position: relative;
  margin: 0 auto;
  max-width: 1180px;
}
.vista-marco img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 50% 50% 3px 3px / 20% 20% 0 0;
}
.vista-marco::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(244, 239, 228, 0.5);
  border-radius: 50% 50% 3px 3px / 20% 20% 0 0;
  pointer-events: none;
}
.vista-marco figcaption {
  margin-top: var(--t3);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.3;
  color: var(--tinta);
}

@media (max-width: 860px) {
  .hornacinas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t3) var(--t2); }
  .vista-marco img { aspect-ratio: 4 / 3; }
}


/* Las listas de dos columnas. Un renglon de pregunta y respuesta ocupa media columna:
   puesto a lo ancho deja cuatrocientos cuarenta pixeles muertos a la derecha, que es
   parte del blanco que el founder marco. */
.libro--par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
}
.libro--par li { align-content: start; }
@media (max-width: 760px) {
  .libro--par { grid-template-columns: 1fr; }
}


/* Los numeros y las medidas, que son texto y no adorno, en el laton oscuro. Sobre fondo
   nocturno vuelven al claro, donde el contraste va al reves. */
.ent-num, .paso-num, .fi-num, .libro .medida, .lam-num, .margen .num,
.pres-cifra { color: var(--laton-texto); }
.cierre-oscuro .ent-num, .cierre-oscuro .rotulo, .recorrido .rotulo,
.cierre-oscuro .fi-num, .recorrido-ficha .ficha-num,
.recorrido-precio { color: var(--laton-claro); }


/* --------------------------------------------------------------- la marginalia
   La columna de margen de cada lamina llevaba un numero de trece pixeles y un rotulo, y
   nada mas: ciento treinta y dos pixeles por toda la altura de la seccion, vacios. Es el
   blanco estructural que quedaba despues de arreglar los huecos sueltos.

   Ahora lleva lo que lleva el margen de un libro grabado: el numeral grande, el nombre
   de la seccion girado sobre un hilo, y una roseta al pie. Se lee de arriba abajo y
   acompania al texto en vez de rotularlo. */
.lamina > .margen {
  position: relative;
  padding-top: var(--t2);
  padding-right: var(--t3);
  min-height: 340px;
}
.margen .num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--tinta);
  display: block;
  text-align: right;
}
/* El nombre girado noventa grados sobre el hilo, como el lomo de un tomo. */
/* El rotulo girado, leyendose de arriba abajo sobre el hilo.
   Con `transform-origin: 100% 0` la rotacion de noventa grados manda el texto hacia
   ARRIBA desde su ancla, que es por lo que se montaba sobre el numeral: la caja rotada
   ocupa y en [-ancho, 0]. Con el origen en la esquina superior izquierda ocupa
   y en [0, ancho], que es hacia abajo, y x en [-alto, 0], o sea a la izquierda del
   ancla. De ahi que el ancla vaya a la derecha del hilo y no encima. */
.rotulo--vertical {
  position: absolute;
  top: 122px;
  left: 108px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  white-space: nowrap;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.34em;
}
.marg-hilo {
  position: absolute;
  top: 122px;
  bottom: 104px;
  right: 14px;
  width: 24px;
  height: auto;
}
.marg-hilo line { stroke: var(--filete); stroke-width: 1; }
.marg-roseta {
  position: absolute;
  bottom: 26px;
  right: 6px;
  width: 76px;
  height: 76px;
  overflow: visible;
}
.marg-roseta path { fill: none; stroke: var(--laton); stroke-width: 1.1; opacity: 0.5; }

@media (max-width: 900px) {
  /* En el telefono la lamina es de una columna y el margen se vuelve una cabecera: el
     hilo y la roseta se van, el numeral y el nombre se ponen en linea. */
  .lamina > .margen {
    min-height: 0;
    display: flex;
    align-items: baseline;
    gap: var(--t2);
    padding-right: 0;
  }
  .margen .num { font-size: 30px; text-align: left; }
  .rotulo--vertical { position: static; transform: none; }
  .marg-hilo, .marg-roseta { display: none; }
}


/* ------------------------------------------------ el canal, respetado por todos
   La filigrana ocupa setenta y cuatro pixeles de cada margen. Las secciones que usan la
   lamina ya empiezan en 243 y no la tocan, pero las tres que no la usan arrancaban en 72
   y el grabado les caia sobre la primera letra. Medido, no mirado: el canal mide 74 y el
   texto empezaba en 72. */
.entrega > .inner, .entrega > .plancha, .como > .plancha, .como > .inner {
  padding-inline: calc(var(--canal) + var(--t3));
}
/* La tira de propiedades va a sangre y tiene que TAPAR el grabado, no llevarlo encima.
   Alcanza con posicionarla: la filigrana esta posicionada y va antes en el DOM, asi que
   cualquier seccion posicionada que venga despues pinta arriba. Nada de z-index, que
   crearia contexto de apilado sin necesidad. */
.detalles-obra { position: relative; }

@media (max-width: 1099px) {
  /* Sin filigrana no hay canal que respetar. */
  .entrega > .inner, .entrega > .plancha, .como > .plancha, .como > .inner {
    padding-inline: var(--margen);
  }
}


/* -------------------------------------------------- el cierre, sin la celda vacia
   La celda de consultas ocupaba media fila con un correo adentro: medio ancho de pagina
   con una direccion de veinte caracteres y nada mas, que es el hueco de 121 pixeles que
   marcaba la medicion. Consultas baja a un cuarto y la firma se lleva los tres cuartos,
   que es donde estan el monograma y el wordmark y donde el aire si trabaja. */
.rotulo-lamina .cel--correo { grid-column: span 3; }
.rotulo-lamina .cel--firma {
  grid-column: span 9;
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
}
.rotulo-lamina .cel--firma .monograma { flex: none; }
.rotulo-lamina .cel--firma .marca { margin: 0; }
/* El rotulo de la firma sale del flujo para no empujar al monograma, pero con posicion
   explicita: sin `top` ni `left` se quedaba donde lo dejaba el flex, o sea justo encima
   del monograma. */
.rotulo-lamina .cel--firma > .rotulo {
  position: absolute;
  top: var(--t3);
  left: var(--t3);
  margin: 0;
}
.rotulo-lamina .cel--firma {
  position: relative;
  padding-top: calc(var(--t3) + 26px);
  /* Sin `space-between`: heredado, mandaba el wordmark al borde derecho de una celda de
     tres cuartos de ancho y lo dejaba solo a media pagina del monograma. */
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .rotulo-lamina .cel--correo, .rotulo-lamina .cel--firma { grid-column: span 6; }
  .rotulo-lamina .cel--firma { flex-direction: column; align-items: flex-start; }
}


/* ---------------------------------------------------------------- el sello, afuera
   El sello volvio a caer sobre la cifra del total y sobre la nota de pago unico. La
   primera vez se corrio a la izquierda y el rediseno le movio el piso: la hoja cambio de
   padding y de filete y el sello quedo otra vez encima del unico dato que no puede
   taparse.

   Ahora cuelga por debajo del borde inferior, del lado donde la ultima fila no tiene
   texto. Un sello de goma se apoya sobre el papel y se sale un poco, que es justo esto,
   y ademas asi no hay dato posible debajo. */
.presupuesto .sello {
  left: auto;
  right: clamp(10px, 2vw, 34px);
  bottom: clamp(-66px, -5vw, -46px);
  width: clamp(104px, 11vw, 138px);
}
@media (max-width: 860px) {
  /* En pantalla angosta la nota del pie se parte en dos renglones y llega hasta el borde
     derecho, asi que no queda esquina libre: el sello baja entero por fuera de la hoja. */
  .presupuesto .sello {
    right: auto;
    left: 50%;
    bottom: -58px;
    width: 96px;
    transform: translateX(-50%) rotate(-13deg);
  }
  /* Apilado, lo que sigue a la hoja es la nota del costado: sin este aire el sello que
     cuelga por abajo le cae encima al primer renglon. */
  .pres-lado { margin-top: 64px; }
}


/* La hoja cede ancho a la nota del costado: con 780 fijos la columna de al lado quedaba
   en 130 pixeles, o sea tres o cuatro palabras por renglon, que se lee peor que un
   parrafo angosto a proposito. */
.honorarios-grid { grid-template-columns: minmax(0, 660px) minmax(240px, 1fr); }
.pres-pie { max-width: 34ch; }
@media (max-width: 900px) {
  .honorarios-grid { grid-template-columns: 1fr; }
}


/* El pie de la vista de cierre es una frase entera, no un rotulo: va en cursiva y en caja
   normal. Las versalitas espaciadas son para etiquetas de dos palabras; una oracion
   completa en mayusculas con un cuarto de eme de espaciado se lee como un cartel. */
.vista-marco figcaption {
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--display);
}


/* El correo del cierre medido en telefono daba 81 por 20 pixeles de area tactil, contra
   los 44 de minimo. Se agranda con padding y no cambiando el `display` a inline-block a
   secas: ese cambio, hecho en la portada, descentro el texto del enlace porque
   inline-block anula el `align-items` del contenedor. Aca el contexto es de bloque, asi
   que el padding alcanza y no mueve nada. */
.rotulo-lamina .valor a {
  display: inline-block;
  padding-block: 12px;
}


/* ------------------------------------------------- el grabado en alto contraste
   En `forced-colors: active` el navegador fuerza los colores del HTML pero NO los
   `fill` ni los `stroke` de un SVG: medido, el cuerpo pasaba a blanco con texto negro
   mientras los filetes, las rosetas, la filigrana y las hornacinas seguian en laton, o
   sea un ornamento de otra paleta flotando sobre una pagina que ya no existe. Y el fondo
   de las hornacinas quedaba en crema sobre blanco puro.

   Quien enciende alto contraste pidio maximo contraste, no nuestra paleta. Todo el
   grabado pasa a `CanvasText`, que es el color de texto que eligio esa persona, y las
   superficies a `Canvas`. El dibujo se mantiene entero: lo que cambia es de que color
   esta hecho. */
@media (forced-colors: active) {
  .filete-flor .fl-linea,
  .filete-flor .fl-flor path,
  .marg-hilo line,
  .marg-roseta path,
  .horn-filete,
  .horn-roseta path,
  .horn-clave path,
  .filigrana .fg-tallo,
  .filigrana .fg-voluta,
  .filigrana .fg-hoja,
  .filigrana .fg-roseta,
  .filigrana .fg-nudo,
  .esq .es-arco,
  .esq .es-rulo,
  .esq .es-punto,
  .monograma .mo-guilloche,
  .monograma .mo-ovalo,
  .monograma .mo-hoja,
  .sello .aro,
  .sello .giro text,
  .sello-marca,
  .sello-pie,
  .horn-num,
  .monograma .mo-letras {
    stroke: CanvasText;
    fill: none;
  }
  /* Las que son macizas conservan el relleno, con el color del sistema. */
  .filete-flor .fl-flor path,
  .filigrana .fg-hoja,
  .filigrana .fg-nudo,
  .esq .es-punto,
  .monograma .mo-hoja,
  .monograma .mo-letras,
  .horn-num,
  .horn-clave path,
  .sello-marca,
  .sello-pie,
  .sello .giro text {
    fill: CanvasText;
    stroke: none;
  }
  /* Las superficies, al fondo del sistema. */
  .horn-fondo,
  .ciudad .piso { fill: Canvas; }
  .fg-cortina { background: Canvas; }
  /* La opacidad baja se lee como "casi invisible" cuando el fondo dejo de ser marfil. */
  .filigrana .fg-tallo,
  .filigrana .fg-voluta,
  .filigrana .fg-hoja,
  .filigrana .fg-roseta,
  .marg-roseta path,
  .horn-roseta path,
  .monograma .mo-guilloche { opacity: 1; }
  /* El arco de las fotografias necesita su filete visible, y en alto contraste un borde
     con alfa desaparece. */
  .ent-foto--obra::after,
  .emplaza-foto::after,
  .como-tio::after,
  .vista-marco::after { border-color: CanvasText; }
}


/* --------------------------------------------- el hero en ventanas muy bajas
   El hero apila su placa y su ficha adentro de un marco pegado de 100vh. Con una ventana
   alta eso sobra; con una baja no entra, y la capa, que va posicionada, se derrama sobre
   la seccion siguiente. Medido a 320 por 256 pixeles CSS, que es lo que ve alguien con el
   navegador al cuatrocientos por ciento sobre una pantalla de 1280: seis textos del hero
   cayendo encima del titulo y la bajada de la primera lamina.

   Debajo de 560 de alto el recorrido deja de ser pegado y pasa a fluir. Se pierde el
   scrub, que a esa altura no se podia mirar igual, y se gana que el contenido entre. La
   fotografia queda arriba con una proporcion fija y el texto abajo, que es como se lee
   una portada cuando no hay alto para superponer. */
@media (max-height: 560px) {
  .recorrido { height: auto; }
  .recorrido-marco {
    position: static;
    height: auto;
    overflow: visible;
  }
  .recorrido-canvas {
    position: relative;
    inset: auto;
    height: 62vh;
    min-height: 220px;
  }
  .recorrido-encima {
    position: static;
    padding: clamp(20px, 5vh, 40px) var(--margen) clamp(24px, 6vh, 48px);
    background: var(--verde);
  }
  /* Los dos velos existen para separar el texto de la fotografia. Sin superposicion no
     separan nada y solo oscurecen el fondo. */
  .recorrido-encima::before,
  .recorrido-encima::after { display: none; }
  /* Sin JavaScript el respaldo es la tira de fotografias, que ya fluye sola. */
  .recorrido-vivo .recorrido-respaldo { display: none; }
}

/* Y en una ventana baja Y angosta, la ficha pasa debajo de la placa en vez de al lado. */
@media (max-height: 560px) and (max-width: 900px) {
  .recorrido-encima { grid-template-columns: 1fr; gap: var(--t3); }
}


/* ------------------------------------- las filas que tienen que poder envolver
   Con el espaciado de texto forzado (interlineado 1,5 y un doceavo de eme entre letras,
   que el lector puede pedir) las filas de dos columnas dejan de entrar. Una fila flex sin
   `wrap` no achica: empuja el ancho minimo de su contenedor, y a 320 pixeles el panel del
   presupuesto crecia hasta que sus esquinas grabadas se salian dos pixeles de la ventana.

   Medido en la combinacion de zoom al cuatrocientos por ciento CON espaciado forzado, que
   es la unica donde aparece: cada cosa por separado pasaba. */
.pres-membrete,
.pres-total,
.fi-cabeza,
.ent-texto h3,
.pie-pagina .plancha {
  flex-wrap: wrap;
}
.pres-membrete > *,
.pres-total > *,
.fi-cabeza > * {
  min-width: 0;
}
/* Y el ornamento de esquina no cuelga hacia afuera en pantallas angostas, donde esos seis
   pixeles son la diferencia entre entrar y no entrar. */
@media (max-width: 520px) {
  .esq--ai { top: 0; left: 0; }
  .esq--ad { top: 0; right: 0; }
  .esq--bi { bottom: 0; left: 0; }
  .esq--bd { bottom: 0; right: 0; }
  .ficha-agencia, .presupuesto { outline-offset: 2px; }
}




/* ============================================================ para quien es esto
   La banda que declara el encuadre, entre el hero y el diagnostico.

   Va oscura a proposito. Es lo primero despues del recorrido, que termina en la
   terraza al atardecer, y una banda de marfil ahi cortaba el descenso en seco.
   En verde el hero desemboca en esto y recien despues abre el papel. */

.para-quien {
  background: var(--verde);
  color: var(--marfil-alto);
  padding: clamp(52px, 7vw, 96px) var(--margen);
}
.pq-marco {
  max-width: var(--ancho);
  margin: 0 auto;
  border: 1px solid rgba(201, 173, 120, 0.32);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
}
/* Dos filetes cortos en las esquinas superiores, como el marco de una placa. */
.pq-marco::before,
.pq-marco::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 56px;
  height: 3px;
  border-top: 1px solid var(--laton-claro);
  border-bottom: 1px solid var(--laton-claro);
}
.pq-marco::before { left: -1px; }
.pq-marco::after { right: -1px; }

.para-quien .rotulo { color: var(--laton-claro); }
.para-quien h2 { color: var(--marfil-alto); max-width: 20ch; }
.pq-bajada {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.45;
  color: rgba(244, 239, 228, 0.78);
  max-width: 54ch;
  margin: var(--t3) 0 0;
}

.pq-modos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid rgba(201, 173, 120, 0.26);
  /* La regla de abajo va en el contenedor y no en el pie. El pie tiene el ancho de
     lectura limitado, asi que su propio borde cortaba a media plancha. */
  border-bottom: 1px solid rgba(201, 173, 120, 0.18);
}
.pq-modo { display: grid; grid-template-columns: auto 1fr; column-gap: var(--t3); row-gap: 6px; }
.pq-num {
  grid-row: 1 / 3;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--laton-claro);
  border: 1px solid rgba(201, 173, 120, 0.42);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.pq-modo h3 { color: var(--marfil-alto); align-self: end; }
.pq-modo p {
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 239, 228, 0.66);
  margin: 0;
  max-width: 34ch;
}
/* Lo que ya esta andando y lo que se arma para cada operacion.
   Va aca y no en cada seccion nueva: la pagina promete bastante capacidad en las tres
   laminas que siguen, y la regla de esta marca es que un respaldo inventado la mata. */
.pq-pie {
  font-family: var(--texto);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(244, 239, 228, 0.56);
  margin: var(--t3) 0 0;
  max-width: 62ch;
}

@media (max-width: 720px) {
  .pq-modos { grid-template-columns: 1fr; }
}


/* ================================================================= lo que vendes
   Los cinco tipos de activo. Foto grande y ficha al lado, alternando el lado.

   La foto manda: es la regla del rubro y ademas es lo que el founder pidio, que la
   pagina venda el sueno. La ficha se apoya sobre ella con su rotulo, su frase y sus
   datos, separados por un filete corto para que no se lean como un parrafo solo. */

.activos {
  display: grid;
  gap: clamp(48px, 7vw, 104px);
  margin-top: clamp(36px, 5vw, 64px);
}
.act {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.act--der { direction: rtl; }
.act--der > * { direction: ltr; }

.act-foto {
  margin: 0;
  position: relative;
  outline: 1px solid var(--filete);
  outline-offset: 8px;
}
.act-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* El rotulo del lugar, sobre la foto, como la chapa de una lamina enmarcada. */
.act-foto figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: var(--texto);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--marfil-alto);
  background: rgba(23, 33, 28, 0.82);
  padding: 8px 14px;
}

.act-rotulo {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton-texto);
  margin: 0 0 var(--t2);
}
.act-ficha h3 {
  font-size: 27px;
  line-height: 1.22;
  max-width: 18ch;
}
@media (min-width: 1200px) { .act-ficha h3 { font-size: 30px; } }
.act-filete { margin: var(--t3) 0; }
.act-datos {
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.68;
  color: var(--grafito-suave);
  max-width: 40ch;
  margin: 0;
}
@media (max-width: 820px) {
  .act { grid-template-columns: 1fr; gap: var(--t4); }
  .act--der { direction: ltr; }
  .act-foto { outline-offset: 5px; }
}


/* ================================================================== el expediente
   Las tres trabas del cierre. Tres tarjetas altas, foto arriba y texto abajo.

   Distinto montaje que los activos a proposito: alla la foto compite con el texto
   porque vende, aca la foto es contexto y el que manda es lo que dice. */

.expediente {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 56px);
}
.exp {
  border-top: 1px solid var(--filete);
  padding-top: var(--t3);
}
.exp-foto { margin: 0 0 var(--t3); }
.exp-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.86);
}
.exp-rotulo {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--laton-texto);
  margin: 0 0 var(--t1);
}
.exp h3 {
  font-size: 22px;
  line-height: 1.26;
  margin-bottom: var(--t2);
  max-width: 22ch;
}
.exp p {
  font-family: var(--texto);
  font-size: 14px;
  line-height: 1.68;
  color: var(--grafito-suave);
  margin: 0;
  max-width: none;
}
@media (max-width: 900px) {
  .expediente { grid-template-columns: 1fr; gap: var(--t4); }
  .exp-foto img { aspect-ratio: 21 / 9; }
}


/* La llave: el remate simbolico de la lamina del expediente. Va ancha y con el mismo
   filete que las demas figuras, no a sangre: la lamina tiene margen y una foto que lo
   pisa rompe la columna vertebral de la pagina. */
.llave {
  margin: clamp(28px, 4vw, 44px) 0 0;
  outline: 1px solid var(--filete);
  outline-offset: 7px;
}
.llave img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 820px) { .llave { outline-offset: 4px; } }


/* ==================================================================== el analisis
   Los dos instrumentos. Sin fotografia: la pagina ya tiene doce y lo que falta aca
   es lo contrario, algo dibujado con la misma pluma que los filetes.

   Las dos figuras comparten `.instrumento` para que el papel, el filete y el pie
   sean identicos, y lo que cambie sea solo el dibujo. */

.analisis {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  margin: clamp(32px, 4vw, 56px) 0 var(--t4);
}
.anl {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.instrumento {
  margin: 0;
  background: var(--marfil-alto);
  border: 1px solid var(--filete);
  padding: clamp(16px, 2.5vw, 28px);
}
.instrumento svg { display: block; width: 100%; height: auto; }
.instrumento figcaption {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grafito-suave);
  margin-top: var(--t2);
  padding-top: var(--t1);
  border-top: 1px solid var(--filete);
}
.anl-rotulo {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton-texto);
  margin: 0 0 var(--t2);
}
.anl-texto h3 { font-size: 25px; line-height: 1.24; margin-bottom: var(--t2); max-width: 20ch; }
.anl-texto p {
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.68;
  color: var(--grafito-suave);
  margin: 0;
  max-width: 38ch;
}
@media (max-width: 900px) {
  .anl { grid-template-columns: 1fr; gap: var(--t4); }
}

/* --------------------------------------------------- los dos paneles del analisis

   Van oscuros y no grabados sobre papel. El founder pidio que se vieran "super
   tecnologicos, pro, y como una muestra real de la herramienta": el grabado los hacia
   leer como el ornamento de la lamina, que es lo contrario de un instrumento de medicion.

   Lo que NO son es una captura falsa. Dos secciones mas abajo la pagina afirma que sus
   tres capturas son producto desplegado y no interfaces dibujadas, y una ventana de
   mentira aca dejaria esa afirmacion sin valor. Por eso no hay cromo de ventana, ni
   barra de titulo, ni botones: es un diagrama con la piel del producto, rotulado como
   ejemplo. */

.instrumento--panel {
  background: var(--tinta);
  border-color: rgba(201, 173, 120, 0.22);
  padding: 0;
  overflow: hidden;
}
.instrumento--panel svg { padding: 0 clamp(12px, 2vw, 20px); }

.ins-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--t2);
  padding: 14px clamp(12px, 2vw, 20px);
  border-bottom: 1px solid rgba(201, 173, 120, 0.16);
}
.ins-tit {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--marfil-alto);
}
.ins-chip {
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--laton-claro);
  border: 1px solid rgba(201, 173, 120, 0.34);
  padding: 4px 8px;
  white-space: nowrap;
}

.ins-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(14px, 2.5vw, 30px);
  padding: 13px clamp(12px, 2vw, 20px);
  border-top: 1px solid rgba(201, 173, 120, 0.16);
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(244, 239, 228, 0.56);
}
.ins-pie b { color: var(--laton-claro); font-weight: 500; }
.ins-pie--leyenda span { display: inline-flex; align-items: center; gap: 8px; }
/* La leyenda repite las tres formas del dibujo, no un cuadrado de color: el diagrama
   distingue por forma y no por color, asi que la leyenda tiene que distinguir igual. */
.lg { width: 9px; height: 9px; display: inline-block; }
.lg--obra { border: 1px solid var(--laton-claro); }
.lg--serv { border: 1px solid rgba(244, 239, 228, 0.66); border-radius: 50%; }
.lg--acc {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid rgba(244, 239, 228, 0.5);
}

.ins-rejilla { stroke: rgba(201, 173, 120, 0.10); stroke-width: 1; }

/* El mockup ocupa el marco entero.
   Trae su propia cabecera dibujada adentro de la imagen, asi que la figura no pone otra:
   la repetia y ademas empujaba el dibujo hacia abajo, dejando el mockup chico en el
   medio de un campo de marfil. Queda el marco, la imagen a sangre y el pie. */
.instrumento--mock {
  padding: 0;
  overflow: hidden;
  background: var(--tinta);
}
/* Sin `aspect-ratio` ni `object-fit`. El generador devuelve 1536x1024 aunque el brief
   pida 16:9, asi que recortar a 16:9 se comia la cabecera del mockup, que es justo la
   linea que dice de que lugar es. La imagen manda su propia proporcion. */
.instrumento--mock img {
  display: block;
  width: 100%;
  height: auto;
}
.instrumento--mock figcaption {
  margin: 0;
  padding: 11px clamp(12px, 2vw, 18px);
  border-top: 1px solid rgba(201, 173, 120, 0.18);
  color: rgba(244, 239, 228, 0.52);
}

/* Alto contraste. Los `fill` y `stroke` de un SVG no los fuerza `forced-colors`, asi que
   sin esto los dos instrumentos desaparecen contra el fondo del sistema. */
@media (forced-colors: active) {
  .instrumento--panel, .instrumento--mock,
  .pq-marco, .ins-cabeza, .ins-pie, .ins-chip { border-color: CanvasText; }
}


/* La seleccion de texto, en la tinta y el laton de la casa. El azul del sistema sobre
   marfil es lo unico de la pagina que no eligio nadie. */
::selection {
  background: rgba(168, 135, 79, 0.28);
  color: var(--tinta);
}
.cierre-oscuro ::selection,
.recorrido ::selection {
  background: rgba(201, 173, 120, 0.40);
  color: var(--marfil-alto);
}