/*
 * LA WEB PUBLICA: portada (/), /inmuebles y /inmuebles/<codigo>.
 * Rediseño del 1/10/2026, "Varela, de cerca" (dirección B, "cuaderno de
 * barrio", con la noche de la A en la silueta; ver
 * contexto/memoria/web-publica-rediseno.md).
 *
 * La idea en dos líneas: papel, tinta y el verde de la marca; letra grande con
 * carácter (Newsreader), datos en letra de máquina (IBM Plex Mono) y el texto
 * corrido en Instrument Sans. Un solo momento con movimiento fuerte (la
 * silueta de Varela que se arma y se hace de noche), el resto quieto o casi.
 *
 * REGLAS:
 *   - PRIMERO EL CELULAR: lo de arriba de cada parte es el teléfono; los
 *     @media (min-width) de abajo agregan lo de la compu.
 *   - Colores SOLO por variable (:root). Si se cambia un verde de la marca,
 *     cambiarlo también en estilo.css (el hub de adentro).
 *   - Sin JavaScript no hay nada oculto: lo que mueve portada.js arranca
 *     visible. Las clases "con-js" y "con-gsap" las pone el JS.
 *   - Fuentes en /estatico/fuentes (licencias ahí). Nada de Google Fonts.
 */

/* ---------------------------------------------------------------- fuentes */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/estatico/fuentes/newsreader-5.3.0-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/estatico/fuentes/newsreader-5.3.0-italica.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/estatico/fuentes/instrument-sans-5.3.0.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/estatico/fuentes/ibm-plex-mono-5.3.0-500.woff2") format("woff2");
}

/* ---------------------------------------------------------------- colores */

:root {
  /* el papel y la tinta */
  --papel: #f3eee2;
  --papel-2: #e9e2d0;
  --papel-3: #ddd3bb;
  --tinta: #14201a;
  --tinta-2: #44524a;
  --tinta-3: #5b675f;
  --raya: rgba(20, 32, 26, 0.16);
  --raya-fuerte: rgba(20, 32, 26, 0.55);
  /* la marca */
  --verde: #156733;
  --verde-hover: #0f5328;
  --verde-logo: #4b806b;
  --verde-claro: #62ae8f;
  --coral: #e96c3c;
  --coral-texto: #b44a1e;
  /* la noche de la silueta */
  --noche: #0b1f0e;
  --noche-2: #163b20;
  --noche-3: #0f2b17;
  --noche-linea: #2c5a36;
  --luz: #ffc46b;
  --blanco: #ffffff;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --margen: 16px;
  --ancho: 1320px;
  --suave: cubic-bezier(0.2, 0.8, 0.2, 1);
  --foco: 0 0 0 3px rgba(233, 108, 60, 0.55);
  --alto-tope: 58px;
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-tope) + 12px); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 16.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 3px; }
em { font-style: italic; }

.ancho { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 11.5px; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; }
.sobretitulo { color: var(--tinta-3); }
.texto-chico { font-size: 14px; color: var(--tinta-3); }
.solo-ancho { display: none; }
html:not(.con-js) .solo-con-js { display: none; }
/* Las fotos que se piden al verse (data-src): sin JS va la copia de <noscript>. */
html:not(.con-js) img[data-src] { display: none; }
.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: 10px 14px;
}
.saltar:focus { left: 8px; }
.icono { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 22px; border-radius: 2px;
  font: 600 15.5px/1.2 var(--sans); text-decoration: none; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--suave);
}
.boton:active { transform: translateY(1px); }
.boton-verde { background: var(--verde); color: var(--papel); }
.boton-verde:hover { background: var(--verde-hover); }
.boton-linea-oscura { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton-linea-oscura:hover { background: var(--tinta); color: var(--papel); }
.boton-linea { border-color: rgba(243, 238, 226, 0.5); color: var(--papel); background: transparent; }
.boton-linea:hover { border-color: var(--papel); }
.boton-fantasma { background: none; border: 0; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 4px; padding-inline: 8px; }
.boton-fantasma:hover { color: var(--tinta); }

/* ------------------------------------------------------------------ marca */

.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca-ficha { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--noche); flex: none; }
.marca-logo { width: 24px; height: 28px; }
.marca-texto { font: 400 19px/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.marca-texto em { color: var(--verde); }

/* ------------------------------------------------------------------- tope */

.tope {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: var(--alto-tope); padding: 0 var(--margen);
  background: rgba(243, 238, 226, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--raya);
  transition: transform 0.35s var(--suave);
}
.tope.escondido { transform: translateY(-100%); }
.tope-nav { display: flex; gap: 22px; margin-left: auto; }
.tope-nav a, .tope-equipo {
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta-2); padding: 10px 0; position: relative;
}
.tope-nav a:hover, .tope-nav a.activa, .tope-equipo:hover { color: var(--tinta); }
.tope-nav a.activa::after, .tope-nav a.esta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--tinta);
}
/* En el celular, de la barra quedan "Propiedades" y "Equipo": WhatsApp y
   llamar van en la barrita de abajo. */
.tope-nav a:not(:first-child) { display: none; }
.tope-equipo { border: 1px solid var(--raya-fuerte); padding: 9px 12px; border-radius: 2px; }

/* ----------------------------------------------------------------- frente */

.frente { padding: 18px 0 36px; }
.frente-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--raya); color: var(--tinta-2);
}
.ahora { display: inline-flex; align-items: center; gap: 8px; }
.ahora-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); flex: none; }
.ahora.abierto .ahora-punto { background: var(--verde); box-shadow: 0 0 0 4px rgba(21, 103, 51, 0.18); }
.ahora.cerrado .ahora-punto { background: var(--coral); }
.frente-titulo {
  font-weight: 300; font-size: clamp(46px, 13.2vw, 184px); line-height: 0.92; letter-spacing: -0.035em;
  margin: 22px 0 26px; text-wrap: balance;
}
.frente-titulo em { color: var(--verde); font-weight: 300; }
.frente-pie { display: grid; gap: 22px; }
.frente-bajada { color: var(--tinta-2); font-size: 17px; max-width: 30em; }
.frente-acciones { display: grid; gap: 10px; }

/* ------------------------------------------------------ la escena (firma) */

/* Los colores de la silueta son variables: sin JS quedan los de la noche;
   portada.js los lleva del papel (dibujo a línea) a la noche con el scroll. */
.escena {
  --v-cielo: var(--noche);
  --v-cuerpo: var(--noche-2);
  --v-cuerpo2: var(--noche-3);
  --v-borde: rgba(243, 238, 226, 0);
  --v-palo: var(--noche-2);
  --v-ventana: #22472b;
  --v-luz: var(--luz);
  --v-texto: var(--papel);
  --v-texto-2: rgba(243, 238, 226, 0.72);
  --v-raya: rgba(243, 238, 226, 0.18);
  --v-noche: 1;
  position: relative; background: var(--v-cielo); color: var(--v-texto);
  border-top: 1px solid var(--raya);
}
.escena-interior { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 56px 0 32px; }
.escena-kicker { color: var(--v-texto-2); }
.escena-titulo {
  font-weight: 300; font-size: clamp(30px, 7.4vw, 68px); line-height: 1.02; letter-spacing: -0.02em;
  margin-top: 12px; max-width: 18em;
}
.escena-frase { display: block; }
.escena-frase-2 { font-style: italic; color: var(--v-luz); }
.escena-lienzo { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.escena-lienzo::-webkit-scrollbar { display: none; }
.escena-dibujo { width: 100%; margin-inline: auto; }
.varela { display: block; width: 100%; height: auto; overflow: visible; }
.v-cielo { fill: var(--v-cielo); }
.v-noche { opacity: var(--v-noche); }
.v-estrella, .v-luna { fill: #f3eee2; }
.v-cuerpo, .v-cuerpo2 { stroke: var(--v-borde); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.v-cuerpo { fill: var(--v-cuerpo); }
.v-cuerpo2 { fill: var(--v-cuerpo2); }
.v-linea { fill: none; stroke: var(--v-palo); stroke-width: 3; }
.v-vereda { stroke: var(--v-palo); stroke-width: 2; }
.v-ventana { fill: var(--v-ventana); stroke: var(--v-borde); stroke-width: 1.2; }
.v-ventana-luz { fill: var(--v-luz); }
.escena:not(.de-dia) .v-ventana-luz { filter: url(#v-brillo); }
.v-etiqueta line { stroke: var(--v-luz); stroke-width: 1.4; stroke-dasharray: 3 3; }
.v-etiqueta rect { fill: var(--v-luz); }
.v-etiqueta text { fill: var(--v-cielo); font: 500 13px var(--mono); text-anchor: middle; letter-spacing: 0.04em; }
.v-luz { cursor: pointer; }
.v-luz:hover .v-etiqueta rect, .v-luz:focus-visible .v-etiqueta rect { fill: var(--v-texto); }
.v-luz:focus-visible { box-shadow: none; outline: none; }
.v-luz:focus-visible .v-ventana-luz { stroke: var(--v-texto); stroke-width: 3; }

.escena-leyenda {
  list-style: none; padding: 0; margin-top: 4px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px;   /* en el celu, de a dos: que la ciudad no quede chiquita */
}
.escena-leyenda li { border-top: 1px solid var(--v-raya); min-width: 0; }
.escena-leyenda a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: baseline;
  padding: 10px 0; text-decoration: none; color: inherit;
}
.escena-num {
  grid-row: span 2; align-self: center;
  background: var(--v-luz); color: var(--v-cielo); padding: 4px 7px; border-radius: 2px; letter-spacing: 0.04em;
}
.escena-precio { font: 400 19px/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escena-que { color: var(--v-texto-2); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escena-leyenda a:hover .escena-precio { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.escena-mas a { display: block; padding: 12px 0; color: var(--v-texto-2); text-decoration: none; }

/* CON MOVIMIENTO la escena arranca de día, en papel y sin dibujar: portada.js
   (GSAP) la dibuja mientras se baja, cae la noche y se prenden las ventanas.
   NO se clava: la página sigue de largo (2/10/2026). Si GSAP no llega
   (html.sin-gsap) vuelve a lo de siempre: de noche, quieta, todo a la vista. */
.con-movimiento:not(.sin-gsap) .escena {
  --v-cielo: var(--papel); --v-cuerpo: var(--papel); --v-cuerpo2: var(--papel);
  --v-borde: var(--tinta); --v-palo: var(--tinta); --v-ventana: var(--papel); --v-luz: var(--coral);
  --v-texto: var(--tinta); --v-texto-2: rgba(20, 32, 26, 0.72); --v-raya: var(--raya); --v-noche: 0;
}
.con-movimiento:not(.sin-gsap) .v-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.con-movimiento:not(.sin-gsap) .v-ventana,
.con-movimiento:not(.sin-gsap) .v-luz { opacity: 0; }
.con-movimiento:not(.sin-gsap) .v-etiqueta { transform: scale(0); }
.con-movimiento:not(.sin-gsap) .escena-titulo { display: grid; }
.con-movimiento:not(.sin-gsap) .escena-frase { grid-area: 1 / 1; }
.con-movimiento:not(.sin-gsap) .escena-frase-2 { opacity: 0; visibility: hidden; }
.con-gsap .escena-frase { grid-area: 1 / 1; }

/* ---------------------------------------------------------------- bloques */

.bloque { padding: 72px 0; }
.bloque-papel2 { background: var(--papel-2); }
.cabeza {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--tinta); margin-bottom: 18px;
}
.titulo-seccion { font-weight: 300; font-size: clamp(38px, 9vw, 96px); line-height: 0.95; letter-spacing: -0.025em; text-wrap: balance; }
.titulo-seccion em { color: var(--verde); }
.cabeza-dato { color: var(--tinta-2); text-align: right; flex: none; padding-bottom: 6px; }
.cabeza-bajada { color: var(--tinta-2); max-width: 36em; margin-bottom: 30px; }
.partida-texto p + p { margin-top: 12px; }
.partida-texto { max-width: 36em; color: var(--tinta-2); }

/* ------------------------------------------------- tarjetas de propiedades */

.inmuebles-grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
/* En la portada y en el celular, una tira que se pasa con el dedo. */
.pagina-portada .inmuebles-grilla {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--margen)); padding: 0 var(--margen) 10px;
  scroll-padding-inline: var(--margen); scrollbar-width: none;
}
.pagina-portada .inmuebles-grilla::-webkit-scrollbar { display: none; }
.pagina-portada .inmuebles-grilla > li { flex: 0 0 84%; scroll-snap-align: start; }
.inmueble-tarjeta a { display: block; text-decoration: none; color: inherit; }
.inmueble-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel-3); }
.inmueble-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--suave); }
.inmueble-tarjeta a:hover .inmueble-foto img { transform: scale(1.035); }
.inmueble-rotulo { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 6px; color: var(--tinta-2); }
.inmueble-rotulo span { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.inmueble-titulo { font-size: 25px; line-height: 1.1; font-weight: 400; }
.inmueble-tarjeta a:hover .inmueble-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inmueble-lugar { color: var(--tinta-2); font-size: 15px; margin-top: 6px; }
.inmueble-precio { font: 500 15px/1.3 var(--mono); color: var(--verde); margin-top: 8px; letter-spacing: 0.02em; }
.inmueble-proxima a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 300px;
  padding: 22px; border: 1px dashed var(--raya-fuerte); background: var(--papel-2);
  color: var(--tinta-2); text-decoration: none; aspect-ratio: 4 / 5;
}
.inmueble-proxima strong { font: 300 34px/1 var(--serif); color: var(--tinta); letter-spacing: -0.02em; }
.inmueble-proxima a:hover { border-style: solid; color: var(--tinta); }
.inmuebles-mas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.inmuebles-vacio { color: var(--tinta-2); max-width: 36em; }

.foto-ancha { margin: 0; position: relative; }
.foto-ancha img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-ancha figcaption { position: absolute; left: var(--margen); bottom: 14px; background: var(--papel); padding: 6px 10px; }

/* ------------------------------------------------------------------ casos */

.casos { display: grid; gap: 22px; }
.casos-lista { display: flex; flex-direction: column; border-top: 1px solid var(--raya); position: relative; }
.caso-boton {
  display: flex; align-items: baseline; gap: 16px; width: 100%;
  padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--raya);
  text-align: left; cursor: pointer; color: var(--tinta-2);
  transition: color 0.2s, padding-left 0.3s var(--suave);
}
.caso-numero { color: var(--tinta-3); min-width: 24px; }
.caso-nombre { font: 400 clamp(24px, 4.6vw, 38px)/1.1 var(--serif); letter-spacing: -0.015em; }
.caso-boton:hover { color: var(--tinta); }
.caso-boton[aria-selected="true"] { color: var(--verde); }
.caso-boton[aria-selected="true"] .caso-nombre { font-style: italic; }
.caso-boton[aria-selected="true"] .caso-numero { color: var(--coral-texto); }
.caso {
  background: var(--papel); border: 1px solid var(--raya); padding: 26px 22px; outline: none;
}
.caso + .caso { margin-top: 14px; }
.caso-numero-grande { color: var(--tinta-3); margin-bottom: 14px; }
.caso h3 { font-weight: 300; font-size: clamp(28px, 4vw, 42px); }
.caso-bajada { margin: 14px 0 24px; color: var(--tinta-2); }
.caso-rotulo { color: var(--tinta-3); margin-bottom: 6px; }
.caso-datos { list-style: none; margin: 0 0 28px; padding: 0; }
.caso-datos li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--raya); position: relative; }
.caso-datos li::before { content: "—"; position: absolute; left: 0; color: var(--verde); }
.caso .boton { width: 100%; }
/* Pagos seguros (S-80): la misma lista de rayas que los casos, mas angosta. */
.pagos-lista { max-width: 44em; margin-bottom: 18px; }
.pagos-lista a { color: var(--verde); }
.caso-nota { margin-top: 14px; font-size: 14px; color: var(--tinta-3); }

/* Con JS: los casos son pestañas (un panel por vez). En el celular, la lista
   pasa a ser una tira de botones que se desliza. */
.con-js .caso[hidden] { display: none; }
.con-js .caso + .caso { margin-top: 0; }
.con-js .casos-lista {
  flex-direction: row; overflow-x: auto; gap: 8px; border-top: 0; scrollbar-width: none;
  margin-inline: calc(-1 * var(--margen)); padding: 0 var(--margen) 4px;
}
.con-js .casos-lista::-webkit-scrollbar { display: none; }
.con-js .caso-boton {
  flex: none; width: auto; padding: 10px 14px; border: 1px solid var(--raya-fuerte); border-radius: 2px;
  align-items: center; gap: 8px; color: var(--tinta);
}
.con-js .caso-boton .caso-nombre { font: 600 15px/1.2 var(--sans); letter-spacing: 0; }
.con-js .caso-boton[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.con-js .caso-boton[aria-selected="true"] .caso-nombre { font-style: normal; }
.con-js .caso-boton[aria-selected="true"] .caso-numero { color: var(--luz); }

/* --------------------------------------------------------------- oficina */

.oficina { display: grid; gap: 34px; }
.oficina-localidad { color: var(--tinta-2); margin-top: 10px; }
.oficina-datos .titulo-seccion { margin-top: 10px; }
.horario { width: 100%; border-collapse: collapse; margin: 26px 0 12px; }
.horario caption { text-align: left; color: var(--tinta-3); padding-bottom: 8px; }
.horario th, .horario td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--raya); font-weight: 500; }
.horario td { text-align: right; }
.horario tr.cerrado { color: var(--tinta-3); }
.horario tr.hoy { color: var(--verde); }
.horario tr.hoy th::after { content: " · hoy"; }
.oficina-acciones { display: grid; gap: 10px; margin-top: 24px; }
.oficina-foto { margin: 0; }
.oficina-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.oficina-foto-alta img { aspect-ratio: 3 / 4; }
/* El mapita de Google, teñido con la paleta: un filtro sobre el iframe (no
   toca nada de Google, solo cómo se ve). */
.mapa { position: relative; aspect-ratio: 4 / 3; background: var(--papel-2); border: 1px solid var(--raya); overflow: hidden; }
.mapa-tapa { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; padding: 20px; }
.mapa-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-dibujo path { fill: none; stroke: var(--raya); stroke-width: 10; }
.mapa-dibujo .mapa-avenida { stroke: var(--papel-3); stroke-width: 22; }
.mapa-dibujo .mapa-tren { stroke: var(--tinta-3); stroke-width: 2; stroke-dasharray: 8 6; }
.mapa-rotulo { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--tinta); color: var(--papel); padding: 8px 12px; }
.mapa-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--luz); }
.mapa-ver { position: relative; background: var(--papel); }
html:not(.con-js) .mapa-tapa { display: none; }
.mapa iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(1) sepia(0.55) hue-rotate(28deg) saturate(0.6) contrast(0.94) brightness(1.01);
}

/* ------------------------------------------------------------------- pie */

.pie { background: var(--noche); color: var(--papel); padding: 56px 0 120px; }
.pie a { color: var(--papel); text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie-grilla { display: grid; gap: 30px; }
.marca-pie .marca-ficha { background: var(--noche-2); }
.marca-pie .marca-texto em { color: var(--verde-claro); }
.pie-lema { font: 300 30px/1.1 var(--serif); letter-spacing: -0.015em; margin-top: 18px; max-width: 14em; }
.pie-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: rgba(243, 238, 226, 0.75); font-size: 15px; }
.pie-legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(243, 238, 226, 0.16); font-size: 13px; color: rgba(243, 238, 226, 0.65); }

/* ---------------------------------------------------- la barrita del celu */

.a-mano {
  position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 8px;
  background: var(--tinta); border-radius: 4px; box-shadow: 0 16px 34px -14px rgba(11, 31, 14, 0.7);
  transform: translateY(150%); transition: transform 0.35s var(--suave);
}
.a-mano.visible { transform: none; }
html:not(.con-js) .a-mano { transform: none; }
.a-mano .boton { min-height: 46px; padding: 10px; }

/* ------------------------------------------------- la ficha de una propiedad */

.bloque-ficha { padding: 14px 0 72px; }
.ficha-volver { margin-bottom: 12px; }
.ficha-volver a { color: var(--tinta-2); text-decoration: none; }
.ficha-volver a:hover { color: var(--tinta); }

/* La galería: una tira que se desliza con el dedo, de punta a punta. */
.galeria { margin-bottom: 30px; }
.galeria-pista {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--margen); scroll-padding-inline: var(--margen); scrollbar-width: none; outline: none;
}
.galeria-pista::-webkit-scrollbar { display: none; }
.galeria-foto { flex: 0 0 90%; scroll-snap-align: start; background: var(--papel-3); aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria-control { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: min(var(--ancho), 100% - 2 * var(--margen)); margin: 12px auto 0; }
.galeria-cuenta { color: var(--tinta-2); }
.galeria-cuenta b { color: var(--tinta); font-weight: 500; }
.galeria-botones { display: flex; gap: 6px; }
html:not(.con-js) .galeria-botones { display: none; }
.galeria-boton {
  min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--raya-fuerte); background: transparent;
  border-radius: 2px; cursor: pointer; font: 500 15px/1 var(--mono);
}
.galeria-boton:hover { background: var(--tinta); color: var(--papel); }
.galeria-grande { display: none; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }

.ficha-grilla { display: grid; gap: 34px; }
.ficha-titulo { font-weight: 300; font-size: clamp(36px, 8.4vw, 72px); line-height: 0.98; letter-spacing: -0.025em; margin-top: 10px; text-wrap: balance; }
.ficha-lugar { color: var(--tinta-2); margin-top: 12px; font-size: 17px; }
.ficha-clave { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tinta); }
.ficha-clave li { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--raya); }
.ficha-clave strong { display: block; font: 300 40px/1 var(--serif); letter-spacing: -0.02em; }
.ficha-clave span { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-descripcion { margin-top: 30px; }
.ficha-descripcion p { font: 400 19px/1.6 var(--serif); max-width: 34em; }
.ficha-descripcion p + p { margin-top: 14px; }
.ficha-subtitulo { margin-top: 36px; padding-bottom: 10px; border-bottom: 1px solid var(--tinta); font-size: 11.5px; letter-spacing: 0.06em; font-family: var(--mono); font-weight: 500; }
.ficha-caracteristicas { list-style: none; margin: 0; padding: 0; column-gap: 28px; }
.ficha-caracteristicas li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--raya); font-size: 15px; }
.ficha-tarjeta { border: 1px solid var(--tinta); padding: 22px; background: var(--papel); }
.ficha-precio { font: 400 44px/1 var(--serif); letter-spacing: -0.02em; color: var(--verde); }
.ficha-precio-consultar { font-size: 32px; }
.ficha-precio-celu { margin-top: 18px; }
.ficha-tarjeta-que { color: var(--tinta-2); margin-top: 8px; }
.ficha-acciones { display: grid; gap: 8px; margin: 20px 0 14px; }
.ficha-tarjeta .texto-chico + .texto-chico { margin-top: 8px; }

/* La foto a pantalla completa (la arma portada.js con un <dialog>). */
.visor {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #0a0f0c; color: var(--papel);
}
.visor::backdrop { background: #0a0f0c; }
.visor-pista {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
}
.visor-pista::-webkit-scrollbar { display: none; }
.visor-foto { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; }
.visor-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-arriba {
  position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px; background: linear-gradient(rgba(10, 15, 12, 0.7), transparent);
}
.visor-boton {
  min-width: 46px; height: 46px; border-radius: 2px; border: 1px solid rgba(243, 238, 226, 0.4);
  background: rgba(10, 15, 12, 0.5); color: var(--papel); cursor: pointer; font: 500 15px/1 var(--mono);
}
.visor-boton:hover { background: var(--papel); color: var(--tinta); }
.visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); display: none; }
.visor-antes { left: 14px; }
.visor-despues { right: 14px; }

/* La ficha en el panel del mapa: todo en una columna, más chico. */
.ficha-en-panel { padding: 0 0 28px; margin-top: -48px; }
.ficha-en-panel .galeria-pista { padding-inline: 18px; scroll-padding-inline: 18px; }
.ficha-en-panel .galeria-foto { flex-basis: 88%; }
.ficha-en-panel .galeria-control { width: auto; margin: 10px 18px 0; }
.ficha-en-panel .galeria-grande { display: none; }
.ficha-en-panel .ficha-grilla { padding: 0 18px; gap: 24px; }
.ficha-en-panel .ficha-titulo { font-size: 30px; }
.ficha-en-panel .ficha-clave strong { font-size: 30px; }
.ficha-en-panel .ficha-descripcion p { font-size: 17px; }

/* ------------------------------------------------ /inmuebles: el buscador */

.bloque-inmuebles { padding-top: 28px; }
.buscador { border: 1px solid var(--tinta); background: var(--papel); padding: 16px; margin-bottom: 40px; }
.buscador fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.buscador legend, .buscador-q > span, .buscador-orden > span { color: var(--tinta-2); padding: 0; margin-bottom: 8px; display: block; }
.buscador-fila { display: grid; gap: 16px; }
.buscador-q input {
  width: 100%; border: 0; border-bottom: 1px solid var(--tinta); background: transparent; border-radius: 0;
  font: 300 24px/1.2 var(--serif); color: var(--tinta); padding: 6px 0 10px; outline: none;
}
.buscador-q input::placeholder { color: var(--tinta-3); }
.buscador-q input:focus { border-bottom-width: 2px; padding-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips legend { width: 100%; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 9px 13px; border: 1px solid var(--raya-fuerte); border-radius: 2px;
  font: 600 14px/1 var(--sans); transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover span { border-color: var(--tinta); }
.chip input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chip input:focus-visible + span { box-shadow: var(--foco); }
.buscador-mas { margin-top: 16px; border-top: 1px solid var(--raya); padding-top: 12px; }
.buscador-mas summary { cursor: pointer; color: var(--tinta); list-style: none; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }
.buscador-mas summary::-webkit-details-marker { display: none; }
.buscador-mas summary::after { content: "+"; font-size: 16px; }
.buscador-mas[open] summary::after { content: "−"; }
.buscador-grilla { display: grid; gap: 18px; margin-top: 12px; }
.buscador-precio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.buscador-precio legend { width: 100%; }
.buscador select, .buscador-precio input {
  font: 500 15px/1 var(--sans); color: var(--tinta); background: var(--papel); height: 42px;
  border: 1px solid var(--raya-fuerte); border-radius: 2px; padding: 0 10px;
}
.buscador-precio input { width: 150px; }
.buscador-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.buscador-limpiar { color: var(--tinta-2); text-decoration: underline; text-underline-offset: 4px; }
/* Con JS filtra solo, al instante: el botón "Buscar" sobra. */
.con-buscador .buscador-boton { display: none; }
.resultados { transition: opacity 0.25s; }
.resultados.buscando { opacity: 0.45; }
.mapa-aviso[hidden] { display: none; }

/* --------------------------------------------------------- /inmuebles: el mapa */

/* Arriba de todo en /inmuebles: el mapa a lo ancho. Con una propiedad
   abierta (clase con-panel, la pone mapa.js) el mapa se achica a la
   izquierda y la ficha ocupa un panel a la derecha, a la misma altura. */
.mapa-zona {
  display: grid; grid-template-columns: minmax(0, 1fr) 0px;
  height: min(70svh, 760px); min-height: 380px;
  background: var(--papel-2); border-bottom: 1px solid var(--tinta);
  transition: grid-template-columns 0.3s var(--suave);
}
.mapa-zona.con-panel { grid-template-columns: minmax(0, 1fr) min(480px, 42vw); }
.mapa-caja { position: relative; min-width: 0; }
.mapa-inmuebles { position: absolute; inset: 0; background: var(--papel-2); z-index: 0; font-family: var(--sans); }
.mapa-sin-js { margin: 0; padding: 24px; color: var(--tinta-2); }
/* El mapa con los colores de la marca: los cuadritos de OpenStreetMap pasan
   a papel y verde con un filtro (no se baja nada distinto). */
.mapa-inmuebles .leaflet-tile-pane { filter: grayscale(1) sepia(0.55) hue-rotate(28deg) saturate(0.6) contrast(0.94) brightness(1.01); }
.mapa-inmuebles .leaflet-control-attribution { font: 11px var(--sans); background: rgba(243, 238, 226, 0.9); }
.mapa-inmuebles .leaflet-bar a { color: var(--tinta); border-radius: 0 !important; }
.mapa-inmuebles .leaflet-bar { border: 1px solid var(--tinta); border-radius: 2px; box-shadow: none; }
.mapa-filtro {
  position: absolute; top: 12px; left: 56px; z-index: 500;
  display: flex; gap: 0; background: var(--papel); border: 1px solid var(--tinta); border-radius: 2px;
}
.mapa-filtro a { padding: 10px 14px; text-decoration: none; color: var(--tinta-2); }
.mapa-filtro a + a { border-left: 1px solid var(--tinta); }
.mapa-filtro a:hover { color: var(--tinta); }
.mapa-filtro a.activa { background: var(--tinta); color: var(--papel); }
.mapa-aviso {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 500; margin: 0; width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; background: var(--tinta); color: var(--papel); font-size: 15px;
}

/* El pin: una etiqueta como las de las ventanas de la portada, con palito. */
.pin { background: none; border: 0; }
.pin-precio {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px));
  padding: 7px 9px; border-radius: 2px; white-space: nowrap; cursor: pointer;
  background: var(--tinta); color: var(--papel); font: 500 12.5px/1 var(--mono); letter-spacing: 0.02em;
  box-shadow: 0 6px 14px -8px rgba(11, 31, 14, 0.8);
  transition: transform 0.2s var(--suave), background-color 0.2s;
}
.pin-precio::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: currentColor;
  border-left: 1px dashed var(--tinta); transform: translateX(-50%);
}
.pin-precio::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 10px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinta); transform: translateX(-50%);
}
.pin-alquiler { background: var(--coral-texto); }
.pin-alquiler::before { background: var(--coral-texto); }
.pin:hover .pin-precio { transform: translate(-50%, calc(-100% - 16px)); }
.pin-activo .pin-precio { background: var(--verde); transform: translate(-50%, calc(-100% - 16px)); }

.mini-tooltip, .mini-popup .leaflet-popup-content-wrapper {
  padding: 0; border: 1px solid var(--tinta); border-radius: 2px; background: var(--papel); color: var(--tinta);
  box-shadow: 0 14px 30px -14px rgba(11, 31, 14, 0.6);
}
.mini-tooltip::before { border-top-color: var(--tinta); }
.mini-popup .leaflet-popup-content { margin: 0; }
.mini-popup .leaflet-popup-tip { background: var(--papel); }
.mini-ficha { display: block; padding: 10px 14px; min-width: 160px; font: 14px/1.4 var(--sans); color: var(--tinta); text-decoration: none; }
.mini-precio { font: 400 22px/1.1 var(--serif); color: var(--verde); }
.mini-que { font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.mini-numeros { color: var(--tinta-2); }
.mini-ir { margin-top: 6px; color: var(--coral-texto); font-weight: 600; }

.mapa-panel { background: var(--papel); overflow-y: auto; overscroll-behavior: contain; min-width: 0; outline: none; border-left: 1px solid var(--tinta); }
.panel-cabeza { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 10px 12px 0; }
.panel-cerrar {
  width: 40px; height: 40px; border-radius: 2px; border: 0; cursor: pointer;
  background: var(--tinta); color: var(--papel); font: 400 24px/1 var(--sans);
}
.panel-cerrar:hover { background: var(--verde); }

/* ----------------------------------------------- movimiento (todo el sitio) */

/* Todo esto vale solo con html.con-movimiento: lo pone la cabeza antes de
   pintar si la persona NO pidió menos movimiento (y lo saca si portada.js no
   arranca). Sin eso, todo está quieto y a la vista. */

/* El frente entra al abrir la página (CSS puro: no espera a ningún JS). */
@keyframes subir { from { opacity: 0; transform: translateY(26px); } }
@keyframes deslizar { from { opacity: 0; transform: translateX(60px); } }
@keyframes caer { from { opacity: 0; transform: translate(-50%, calc(-100% - 46px)); } }
.con-movimiento .frente-meta { animation: subir 0.8s var(--suave) both; }
.con-movimiento .frente-titulo { animation: subir 1s var(--suave) 0.08s both; }
.con-movimiento .frente-pie { animation: subir 1s var(--suave) 0.3s both; }
.con-movimiento .ficha-volver, .con-movimiento .bloque-inmuebles .cabeza { animation: subir 0.8s var(--suave) both; }
/* La galería de la ficha entra deslizándose, foto por foto. */
.con-movimiento .galeria-foto { animation: deslizar 1s var(--suave) backwards; }
.con-movimiento .galeria-foto:nth-child(2) { animation-delay: 0.1s; }
.con-movimiento .galeria-foto:nth-child(3) { animation-delay: 0.2s; }
.con-movimiento .galeria-foto:nth-child(n + 4) { animation-delay: 0.3s; }
/* Los pines del mapa caen en su lugar. */
.con-movimiento .pin-precio { animation: caer 0.7s var(--suave) 0.2s backwards; }

/* Lo marcado con data-revela aparece al llegar a la pantalla (portada.js le
   pone "visto"). --d escalona los que vienen juntos (tarjetas, datos). */
.con-movimiento [data-revela] {
  transition: opacity 0.9s var(--suave), transform 0.9s var(--suave);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.con-movimiento [data-revela]:not(.visto) { opacity: 0; transform: translateY(34px); }
/* Las fotos de las tarjetas, además, se acercan despacio al aparecer. */
.con-movimiento .inmueble-tarjeta .inmueble-foto img { transition: transform 1.6s var(--suave); }
.con-movimiento .inmueble-tarjeta:not(.visto) .inmueble-foto img { transform: scale(1.14); }
/* Las listas (consultas, horario, características) entran renglón por renglón. */
.con-movimiento .casos:not(.visto) .caso-boton,
.con-movimiento .oficina-datos:not(.visto) .horario tr,
.con-movimiento .ficha-caracteristicas:not(.visto) li { opacity: 0; transform: translateX(-16px); }
.con-movimiento .caso-boton, .con-movimiento .horario tr, .con-movimiento .ficha-caracteristicas li {
  transition: opacity 0.6s var(--suave), transform 0.6s var(--suave), color 0.2s, padding-left 0.3s var(--suave);
}
.con-movimiento .caso-boton:nth-child(2), .con-movimiento .horario tr:nth-child(2), .con-movimiento .ficha-caracteristicas li:nth-child(2) { transition-delay: 0.07s; }
.con-movimiento .caso-boton:nth-child(3), .con-movimiento .horario tr:nth-child(3), .con-movimiento .ficha-caracteristicas li:nth-child(3) { transition-delay: 0.14s; }
.con-movimiento .caso-boton:nth-child(4), .con-movimiento .horario tr:nth-child(4), .con-movimiento .ficha-caracteristicas li:nth-child(4) { transition-delay: 0.21s; }
.con-movimiento .caso-boton:nth-child(5), .con-movimiento .horario tr:nth-child(5), .con-movimiento .ficha-caracteristicas li:nth-child(5) { transition-delay: 0.28s; }
.con-movimiento .horario tr:nth-child(n + 6), .con-movimiento .ficha-caracteristicas li:nth-child(n + 6) { transition-delay: 0.35s; }
/* El panel de un caso, al cambiar de pestaña. */
.con-movimiento .caso:not([hidden]) { animation: subir 0.5s var(--suave) both; }

/* ------------------------------------------------------------ más ancho */

@media (min-width: 600px) {
  :root { --margen: 28px; }
  .frente-acciones { display: flex; flex-wrap: wrap; }
  .oficina-acciones { display: flex; flex-wrap: wrap; }
  .solo-ancho { display: inline; }
  .pagina-portada .inmuebles-grilla > li { flex-basis: 46%; }
  .inmuebles-grilla { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .ficha-caracteristicas { columns: 2; }
}

@media (min-width: 900px) {
  :root { --margen: 40px; --alto-tope: 66px; }
  body { font-size: 17px; }
  .tope-nav a:not(:first-child) { display: inline; }
  .tope-nav { gap: 30px; }
  .tope-equipo { margin-left: 8px; }
  .marca-texto { font-size: 23px; }

  .frente { padding: 26px 0 56px; }
  .frente-titulo { margin: 34px 0 40px; }
  .frente-pie { grid-template-columns: 1fr auto; align-items: end; }

  .escena-interior { padding: 90px 0 40px; }
  .escena-dibujo { width: min(100%, 1500px); }
  .escena-leyenda { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
  .escena-leyenda li { border-bottom: 1px solid var(--v-raya); }
  .escena-leyenda a { column-gap: 14px; padding: 12px 0; }
  .escena-precio { font-size: 22px; }
  .escena-que { font-size: 10.5px; }

  .bloque { padding: 120px 0; }
  .cabeza { margin-bottom: 22px; }
  .cabeza-bajada { margin-bottom: 44px; }

  .pagina-portada .inmuebles-grilla {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; overflow: visible;
    margin-inline: 0; padding: 0;
  }
  .pagina-portada .inmuebles-grilla > li:nth-child(3n + 2) { margin-top: 90px; }
  .inmuebles-grilla { grid-template-columns: repeat(3, 1fr); gap: 56px 28px; }
  .inmuebles-grilla > li:nth-child(3n + 2) { margin-top: 0; }

  .foto-ancha img { aspect-ratio: 21 / 9; }
  .foto-ancha figcaption { left: var(--margen); bottom: 24px; }

  /* Los casos: la lista a la izquierda (grande, en la letra del título), el
     panel a la derecha. */
  .casos { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
  .con-js .casos-lista { flex-direction: column; overflow: visible; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--raya); }
  .con-js .caso-boton {
    width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--raya); border-radius: 0;
    align-items: baseline; gap: 18px; color: var(--tinta-2);
  }
  .con-js .caso-boton .caso-nombre { font: 400 clamp(26px, 2.8vw, 40px)/1.1 var(--serif); letter-spacing: -0.015em; }
  .con-js .caso-boton:hover { color: var(--tinta); padding-left: 8px; }
  .con-js .caso-boton[aria-selected="true"] { background: none; color: var(--verde); padding-left: 16px; }
  .con-js .caso-boton[aria-selected="true"] .caso-nombre { font-style: italic; }
  .con-js .caso-boton[aria-selected="true"] .caso-numero { color: var(--coral-texto); }
  .con-js .casos-lista::after {
    content: ""; position: absolute; left: 0; top: var(--ind-y, 0); width: 2px; height: var(--ind-alto, 0);
    background: var(--coral); transition: top 0.35s var(--suave), height 0.35s var(--suave);
  }
  .caso { padding: 40px; position: sticky; top: calc(var(--alto-tope) + 24px); }
  .caso .boton { width: auto; }
  html:not(.con-js) .casos { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  html:not(.con-js) .casos-lista { display: none; }

  .buscador { padding: 22px 26px; }
  .bloque-inmuebles { padding-top: 40px; }
  .buscador-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
  .buscador-grilla { grid-template-columns: auto auto auto auto; justify-content: start; gap: 28px; align-items: end; }
  .oficina { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .oficina-con-fotos .mapa { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
  .mapa { aspect-ratio: auto; height: 100%; min-height: 460px; }

  .pie { padding: 90px 0 60px; }
  .pie-grilla { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
  .pie-lema { font-size: 40px; }
  .a-mano { display: none; }

  /* La ficha: galería alta de punta a punta, y precio + WhatsApp fijos al costado. */
  .bloque-ficha { padding: 22px 0 120px; }
  .galeria-foto { flex: 0 0 auto; height: min(68svh, 640px); aspect-ratio: 4 / 3; }
  .galeria-grande { display: inline-flex; align-items: center; }
  .ficha-grilla { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 72px; align-items: start; }
  .ficha-aside { position: sticky; top: calc(var(--alto-tope) + 24px); }
  .ficha-clave { grid-template-columns: repeat(4, 1fr); }
  .ficha-precio-celu { display: none; }
  .ficha-caracteristicas { columns: 2; }
  .ficha-clave strong { font-size: 48px; }
  .ficha-tarjeta { padding: 28px; }
  .ficha-precio { font-size: 52px; }
  .visor-flecha { display: block; }

  .ficha-en-panel .ficha-grilla { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ficha-en-panel .galeria-foto { height: auto; flex: 0 0 88%; }
  .ficha-en-panel .ficha-aside { position: static; }
  .ficha-en-panel .ficha-clave { grid-template-columns: 1fr 1fr; }
  .ficha-en-panel .ficha-clave strong { font-size: 32px; }
  .ficha-en-panel .ficha-precio { font-size: 40px; }
}

/* En el celular sin mouse, el mapa no muestra el filtro tapando los +/-. */
@media (max-width: 599px) {
  .mapa-filtro { left: 50%; transform: translateX(-50%); top: 10px; }
  .mapa-inmuebles .leaflet-top.leaflet-left { top: 52px; }
}

/* "Menos movimiento": nada se desliza ni se agranda. (Lo de GSAP ni se carga:
   ver portada.js.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------- La fila que se desliza (3/10/2026): portada y "otras propiedades" de la ficha.
   Sin JavaScript se pasa con el dedo o la ruedita; con JS (portada.js), flechas en la compu. */
.carrusel { position: relative; }
.inmuebles-carrusel {
  list-style: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen) 12px;
  scroll-padding-inline: var(--margen); scrollbar-width: none; overscroll-behavior-x: contain;
}
.inmuebles-carrusel::-webkit-scrollbar { display: none; }
.inmuebles-carrusel > li { flex: 0 0 84%; scroll-snap-align: start; }
.inmuebles-carrusel:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
.inmueble-ver-todas a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; aspect-ratio: 4 / 5;
  padding: 22px; background: var(--verde); color: #fff; text-decoration: none;
}
.inmueble-ver-todas strong { font: 300 34px/1 var(--serif); letter-spacing: -0.02em; }
.inmueble-ver-todas span:not(.mono) { opacity: .88; }
.inmueble-ver-todas a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.carrusel-flechas { display: none; }
@media (min-width: 600px) {
  .inmuebles-carrusel > li { flex-basis: 46%; }
}
@media (min-width: 900px) {
  .inmuebles-carrusel { gap: 28px; margin: 0; padding: 0 0 12px; scroll-padding-inline: 0; }
  .inmuebles-carrusel > li { flex-basis: calc((100% - 56px) / 3); }
  .con-js .carrusel-flechas { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 16px; }
  .carrusel-boton { width: 42px; height: 42px; border: 1px solid var(--raya-fuerte); background: transparent;
    color: var(--tinta); font-size: 18px; cursor: pointer; }
  .carrusel-boton:hover:not(:disabled) { background: var(--tinta); color: var(--papel); }
  .carrusel-boton:disabled { opacity: .3; cursor: default; }
}

/* 3/10/2026: la tira de "casos" ensanchaba la pagina en el celular (448 px en 390): la grilla dejaba crecer
   a sus hijos al ancho de la tira. Con minmax(0, 1fr) la tira se desliza adentro y la pagina no. */
@media (max-width: 899px) { .casos { grid-template-columns: minmax(0, 1fr); } }
/* El dato de la derecha de un titulo ("Para que nadie te estafe...", en Pagos seguros) no entraba en el
   celular y ensanchaba la pagina: puede cortar renglon. */
.cabeza-dato { flex: 0 1 auto; min-width: 0; }