/* ==========================================================================
   Sitio público — Estudio Técnico Integral e Inmobiliario Franzoi

   Estructura y aire tomados de sartorinmobiliaria.com: líneas rectas, sin
   bordes redondeados, títulos en mayúsculas, tipografía sans moderna y
   sombras casi inexistentes. La paleta es azul (la de la marca Franzoi).
   ========================================================================== */

:root {
  --tinta:      #0b1a30;   /* azul casi negro: textos y fondos oscuros */
  --azul:       #14325c;
  --azul-medio: #1f4d8f;
  --acento:     #4e73df;   /* azul de marca (el mismo del sistema) */
  --acento-claro: #9db4ee;  /* para fondos oscuros: el de marca no contrasta */

  --papel:      #ffffff;
  --papel-alt:  #f4f6fa;
  --apagado:    #5a6a80;
  --linea:      #dde3ec;

  --display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texto: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 1280px;
  --transicion: 380ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 32px; }

/* --- Tipografía ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin: 0;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.15rem; letter-spacing: .01em; }

.sobretitulo {
  display: inline-block;
  font-family: var(--texto);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 500;
}
/* Sobre fondo oscuro el azul de marca no contrasta lo suficiente. */
.seccion--oscura .sobretitulo { color: var(--acento-claro); }
/* Sobre la foto del hero ni el azul claro alcanza: va casi blanco. */
.hero .sobretitulo { color: rgba(255,255,255,.9); }
.seccion--oscura .pilar-linea { background: var(--acento-claro); }

/* --- Encabezado ---------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 20px 0;
  border-bottom: 1px solid transparent;
  transition: background var(--transicion), padding var(--transicion),
              border-color var(--transicion);
}
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.cabecera.solida {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--linea);
  padding: 12px 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.1;
}
.marca-texto { display: block; }
.marca small {
  display: block;
  font-family: var(--texto);
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--apagado);
  margin-top: 3px;
}

/* Isotipo: solo la casa. El logo completo trae texto propio que a esta
   altura resultaría ilegible, así que el nombre lo pone el HTML al lado. */
.marca-iso { height: 42px; width: auto; flex: none; transition: height var(--transicion); }
.cabecera.solida .marca-iso { height: 34px; }

/* Se muestra la versión que contrasta con el fondo de la cabecera. */
.marca-iso--oscuro { display: none; }
.cabecera.solida .marca-iso--claro { display: none; }
.cabecera.solida .marca-iso--oscuro { display: block; }

/* Sobre el hero la cabecera es transparente y el texto va en blanco. */
.cabecera:not(.solida) { color: #fff; }
.cabecera:not(.solida) .marca small { color: rgba(255,255,255,.7); }

.navegacion { display: flex; gap: 30px; align-items: center; }
.navegacion a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
.navegacion a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicion);
}
.navegacion a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-boton { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; }
.menu-boton span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; }
.menu-boton.abierto { color: var(--tinta) !important; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--tinta);
  overflow: hidden;
}
/* La foto va en img/hero.jpg. Si no está, queda el degradado azul. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* El degradado se aclara arriba (para que se vea la casa) y se oscurece
     desde el 30% en adelante, que es la banda donde va el texto. Con el
     punto claro en el medio el sobretítulo quedaba ilegible sobre las zonas
     iluminadas de la foto. */
  background:
    linear-gradient(180deg,
      rgba(11,26,48,.58) 0%,
      rgba(11,26,48,.24) 24%,
      rgba(11,26,48,.70) 56%,
      rgba(11,26,48,.94) 100%),
    /* El ?v= se cambia cada vez que se reemplaza la foto: las imágenes se
       guardan una semana en el navegador y con el mismo nombre la gente
       seguiría viendo la anterior. */
    var(--hero-foto) center/cover no-repeat,
    linear-gradient(140deg, var(--azul-medio) 0%, var(--tinta) 100%);
}
/* WebP (168 KB) con el JPG como respaldo; en celular, una de 900 px (57 KB). */
.hero {
  --hero-foto: url("../img/hero.jpg?v=2");
  --hero-foto: image-set(url("../img/hero.webp?v=3") type("image/webp"), url("../img/hero.jpg?v=2") type("image/jpeg"));
}
@media (max-width: 720px) {
  .hero { --hero-foto: image-set(url("../img/hero-m.webp?v=3") type("image/webp"), url("../img/hero.jpg?v=2") type("image/jpeg")); }
}
.hero .envoltura { position: relative; padding-top: 150px; padding-bottom: 56px; }
/* 20% más chico que el h1 general (2.4rem, 5.2vw, 4.2rem). */
.hero h1 { max-width: 20ch; margin-top: 16px; font-size: clamp(1.92rem, 4.16vw, 3.36rem); }
.hero p {
  max-width: 48ch;
  margin: 22px 0 0;
  font-size: 1.05rem;
  color: rgba(255,255,255,.84);
}

/* --- Buscador del hero --------------------------------------------------- */
.buscador {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 1px;
  margin-top: 44px;
  background: var(--linea);
  border: 1px solid rgba(255,255,255,.18);
}
.buscador-campo { background: rgba(255,255,255,.97); padding: 14px 18px; }
.buscador-campo label {
  display: block;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 2px;
}
.buscador-campo select {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--texto);
  font-size: .95rem;
  color: var(--tinta);
  cursor: pointer;
}
.buscador-campo select:focus { outline: none; }
.buscador button {
  border: 0;
  background: var(--acento);
  color: #fff;
  font-family: var(--texto);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 38px;
  cursor: pointer;
  transition: background var(--transicion);
}
.buscador button:hover { background: var(--azul-medio); }

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font-family: var(--texto);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.boton:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.boton--relleno { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--relleno:hover { background: var(--azul-medio); border-color: var(--azul-medio); color: #fff; }

/* --- Secciones ----------------------------------------------------------- */
.seccion { padding: clamp(66px, 8.5vw, 118px) 0; }
.seccion--alt { background: var(--papel-alt); }
.seccion--oscura { background: var(--tinta); color: rgba(255,255,255,.78); }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }

.seccion-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
}
.seccion--oscura .seccion-encabezado { border-bottom-color: rgba(255,255,255,.16); }
.seccion-encabezado h2 { margin-top: 12px; }
.seccion-encabezado p { color: var(--apagado); margin: 14px 0 0; max-width: 58ch; }
.seccion-encabezado-texto { max-width: 62ch; }

.enlace-mas {
  flex: none;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  white-space: nowrap;
}
.enlace-mas:hover { color: var(--azul-medio); }

/* --- Filtros rápidos ---------------------------------------------------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.filtro {
  background: none;
  border: 1px solid var(--linea);
  padding: 9px 20px;
  font-family: var(--texto);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  cursor: pointer;
  transition: all var(--transicion);
}
.filtro:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* --- Grilla de propiedades ---------------------------------------------- */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 44px 32px;
}

/* La tarjeta es una columna flexible y ocupa todo el alto de su celda: así,
   con títulos de distinto largo, el precio de todas las tarjetas de una fila
   queda alineado a la misma altura. */
.tarjeta { display: flex; flex-direction: column; height: 100%; }
.tarjeta-imagen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--papel-alt);
  margin-bottom: 18px;
}
.tarjeta-imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 820ms cubic-bezier(.22,.61,.36,1);
}
.tarjeta:hover .tarjeta-imagen img { transform: scale(1.045); }

.tarjeta-vacia {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--apagado);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.etiqueta {
  position: absolute;
  top: 0; left: 0;
  background: var(--acento);
  color: #fff;
  padding: 7px 15px;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.etiqueta--reservada { background: var(--azul-medio); }
.etiqueta--cerrada { background: var(--tinta); }

.tarjeta-tipo {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}
/* Título y ubicación a dos líneas como máximo: un título muy largo no tiene
   que estirar la fila entera. El texto completo está en la ficha. */
.tarjeta h3, .tarjeta-ubicacion {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta h3 { margin: 8px 0 6px; font-size: 1.1rem; -webkit-line-clamp: 2; }
.tarjeta-ubicacion { color: var(--apagado); font-size: .9rem; -webkit-line-clamp: 2; }
.tarjeta-pie {
  display: flex;
  flex-wrap: wrap;                 /* precio y datos no se pisan en pantallas angostas */
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--linea);
}
.tarjeta-texto { flex: 1 1 auto; }
.tarjeta-precio {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
}
.tarjeta-datos { color: var(--apagado); font-size: .78rem; }

/* --- Servicios numerados ------------------------------------------------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.servicio {
  background: var(--papel);
  padding: 38px 32px 42px;
  transition: background var(--transicion);
}
.servicio:hover { background: var(--papel-alt); }
.servicio-num {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--acento);
}
.servicio h3 { margin: 16px 0 12px; }
.servicio p { color: var(--apagado); font-size: .92rem; margin: 0; }
/* Detalle de cada rubro: lista corta, sin viñetas redondas. */
.servicio-lista {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  color: var(--apagado);
  font-size: .88rem;
}
.servicio-lista li { padding-left: 16px; position: relative; }
.servicio-lista li::before { content: "·"; position: absolute; left: 4px; color: var(--acento); }
/* La tarjeta de Tasaciones es un enlace. */
a.servicio { display: block; color: inherit; }
.servicio-mas {
  display: inline-block;
  margin-top: 18px;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}

@media (min-width: 901px) {
  /* Tres por fila: seis rubros entran en dos filas parejas. */
  .servicios { grid-template-columns: repeat(3, 1fr); }
}

/* --- Pilares ------------------------------------------------------------- */
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 44px; }
.pilar h3 { margin-bottom: 12px; }
.pilar p { color: var(--apagado); margin: 0; font-size: .94rem; }
.seccion--oscura .pilar p { color: rgba(255,255,255,.7); }
.pilar-linea { width: 42px; height: 2px; background: var(--acento); margin-bottom: 22px; }

/* --- Bloque a dos columnas ---------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.duo-figura { aspect-ratio: 4 / 5; background: var(--papel-alt); overflow: hidden; }
.duo p { color: var(--apagado); }

/* --- Matrículas (credenciales reales) ----------------------------------- */
.matriculas { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.matriculas li {
  padding: 14px 0;
  border-top: 1px solid var(--linea);
  font-size: .92rem;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.matriculas li:last-child { border-bottom: 1px solid var(--linea); }
.matriculas strong { font-weight: 500; }
.matriculas span { color: var(--apagado); }

/* --- Paginador de la portada --------------------------------------------- */
.paginador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
}
.pagina {
  min-width: 42px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: .86rem;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.pagina:hover:not(:disabled) { background: var(--papel-alt); border-color: var(--acento); }
.pagina.activa { background: var(--acento); border-color: var(--acento); color: #fff; }
.pagina:disabled { opacity: .35; cursor: default; }
.paginador-cuenta { margin-left: auto; font-size: .8rem; color: var(--apagado); }

/* --- Estados ------------------------------------------------------------- */
.estado { padding: 72px 0; text-align: center; color: var(--apagado); }
.cargador {
  width: 26px; height: 26px;
  border: 2px solid var(--linea);
  border-top-color: var(--acento);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Formulario ---------------------------------------------------------- */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
}
.campo input, .campo textarea, .campo select {
  border: 1px solid var(--linea);
  background: var(--papel);
  padding: 12px 14px;
  font-family: var(--texto);
  font-size: .98rem;
  color: var(--tinta);
  transition: border-color var(--transicion);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--acento);
}
.campo textarea { resize: vertical; min-height: 110px; }

.aviso { grid-column: 1 / -1; padding: 13px 17px; font-size: .9rem; }
.aviso--ok { background: #e8f1e6; color: #2f5029; }
.aviso--error { background: #fbecec; color: #7d2f2f; }

/* --- Contacto: datos al costado ---------------------------------------- */
.contacto-grilla { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; }
.oficina { margin-bottom: 34px; }
.oficina h3 { font-size: 1rem; margin-bottom: 10px; }
.oficina p { color: var(--apagado); margin: 0; font-size: .94rem; }
.oficina a:hover { color: var(--acento); }

/* --- Pie ----------------------------------------------------------------- */
/* La línea de arriba separa el pie de una sección oscura que termine justo antes
   (el bloque de WhatsApp de Tasaciones); sobre fondo claro casi no se ve. */
.pie { background: var(--tinta); color: rgba(255,255,255,.7); padding: 68px 0 30px; border-top: 1px solid rgba(255,255,255,.1); }
.pie a { color: rgba(255,255,255,.7); }
.pie a:hover { color: #fff; }
.pie-grilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; }
.pie .marca { color: #fff; }
/* En el pie sí entra el logo completo, con su propio texto. */
.pie-logo { width: 200px; height: auto; }
.pie h4 {
  color: #fff;
  margin: 0 0 15px;
  font-family: var(--texto);
  font-size: .68rem;
  letter-spacing: .2em;
  font-weight: 500;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .9rem; }
.pie-legal {
  margin-top: 54px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,255,255,.48);
}

/* --- Ficha de propiedad -------------------------------------------------- */
.ficha { padding-top: 124px; padding-bottom: 120px; }
.volver { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.volver:hover { color: var(--acento); }

.galeria { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 28px 0 56px; }
.galeria-principal { aspect-ratio: 3 / 2; overflow: hidden; background: var(--papel-alt); }
/* Las fotos se ubican absolutas dentro de su recuadro: así su tamaño natural
   (una foto vertical es mucho más alta) no estira la grilla ni la hace pisar
   el texto de abajo. El recuadro manda; la foto se recorta con cover. */
.galeria-principal, .galeria-lado > div { position: relative; min-height: 0; }
.galeria-principal img, .galeria-lado img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer;
}
.galeria-lado { display: grid; gap: 10px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.galeria-lado > div { overflow: hidden; background: var(--papel-alt); }
/* Con dos fotos hay una sola miniatura: ocupa toda la columna. */
.galeria-lado > div:only-child { grid-row: 1 / -1; grid-column: 1 / -1; }

@media (min-width: 901px) {
  .galeria { height: min(45vw, 640px); grid-template-rows: minmax(0, 1fr); }
  .galeria > .galeria-principal { aspect-ratio: auto; }
}

/* Miniatura con contador de fotos restantes ("+3"): la imagen se oscurece
   por estilo en línea y el número va encima, centrado. */
.galeria-miniatura { position: relative; }
.galeria-mas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  pointer-events: none;   /* el clic lo maneja la imagen de abajo */
}

.ficha-cuerpo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 72px; align-items: start; }
.ficha-precio { font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1; }

.datos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.datos li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: .94rem;
}
.datos li span:first-child { color: var(--apagado); }

/* Etiqueta "Destacada": va sobre la foto, debajo de la de estado. */
.etiqueta--destacada {
  top: auto;
  bottom: 0;
  background: var(--acento);
  color: #fff;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  border: 1px solid var(--linea);
  padding: 7px 15px;
  font-size: .78rem;
  color: var(--apagado);
}

.panel-contacto { border: 1px solid var(--linea); padding: 32px; position: sticky; top: 100px; }
/* El botón de WhatsApp va antes del formulario: es la vía que más se usa. */
.boton--whatsapp {
  width: 100%;
  justify-content: center;
  margin-bottom: 26px;
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.boton--whatsapp:hover { background: #1db954; border-color: #1db954; color: #fff; }

.panel-contacto h3 { margin-bottom: 8px; font-size: 1rem; }
.panel-contacto p { color: var(--apagado); font-size: .9rem; margin: 0 0 22px; }

/* --- Visor de imagen ----------------------------------------------------- */
.visor {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,16,28,.95);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.visor.abierto { display: flex; }
.visor img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.visor-cerrar {
  position: absolute; top: 24px; right: 30px;
  background: none; border: 0; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff;
  font-size: 2.6rem; cursor: pointer; padding: 20px;
  opacity: .6; transition: opacity var(--transicion);
}
.visor-nav:hover { opacity: 1; }
.visor-nav--prev { left: 10px; }
.visor-nav--sig { right: 10px; }

/* --- Aparición al hacer scroll ------------------------------------------
   Mejora progresiva: el contenido es visible por defecto y solo se oculta
   cuando el JS marca <html class="js-animar">. Así, si el script falla o el
   IntersectionObserver no llega a dispararse, la página se ve igual en vez
   de quedar en blanco. */
.js-animar .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 750ms ease, transform 750ms ease;
}
.js-animar .revelar.visible { opacity: 1; transform: none; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .buscador { grid-template-columns: 1fr 1fr; }
  .buscador button { grid-column: 1 / -1; padding: 16px; }
}

@media (max-width: 900px) {
  .duo, .ficha-cuerpo, .pie-grilla, .contacto-grilla { grid-template-columns: 1fr; gap: 40px; }
  .galeria { grid-template-columns: 1fr; }
  .galeria-lado { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .galeria-lado > div { aspect-ratio: 3 / 2; }
  .ficha { padding-bottom: 80px; }
  .panel-contacto { position: static; }
  .seccion-encabezado { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 720px) {
  .envoltura { padding: 0 22px; }
  .navegacion {
    position: fixed; inset: 0;
    background: var(--papel);
    color: var(--tinta);
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    transform: translateX(100%);
    transition: transform var(--transicion);
  }
  .navegacion.abierta { transform: none; }
  .navegacion a { font-size: 1.05rem; }
  .menu-boton { display: block; z-index: 60; }
  /* El subtítulo es largo y competiría con el botón de menú. */
  .marca small { display: none; }
  .marca { gap: 10px; font-size: 1.15rem; }
  .marca-iso, .cabecera.solida .marca-iso { height: 32px; }
  .grilla { grid-template-columns: 1fr; gap: 38px; }
  .formulario { grid-template-columns: 1fr; }
  .buscador { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js-animar .revelar { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Mapa de la ficha
   El iframe de OpenStreetMap trae su propia botonera y sus enlaces al pie, y
   no se pueden tocar desde acá porque es de otro origen. La solución es
   enmarcarlo: el recuadro le da el lenguaje del sitio y la tarjeta flotante
   lleva la dirección y el botón, que es lo que la persona vino a buscar.
   --------------------------------------------------------------------------- */
.mapa {
  position: relative;
  margin-top: 18px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  overflow: hidden;                 /* recorta las esquinas del iframe */
  background: var(--papel-alt);
  box-shadow: 0 18px 40px -28px rgba(11, 26, 48, .45);
}

.mapa__lienzo {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  /* La paleta cruda de OSM es más saturada que el resto del sitio; esto la
     acerca sin volverla gris ni comerse el marcador. */
  filter: saturate(.82) contrast(1.04);
}

/* La tarjeta se apoya sobre el mapa, dejando ver el pie de OSM (que hay que
   conservar: es la atribución que exige la licencia). */
.mapa__tarjeta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(11, 26, 48, .5);
}

.mapa__rotulo {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apagado);
}
.mapa__texto {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.35;
}

.mapa__accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transicion), transform var(--transicion);
}
.mapa__accion:hover { background: var(--azul-medio); transform: translateY(-1px); }
.mapa__accion svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 640px) {
  .mapa__lienzo { height: 320px; }
  .mapa__tarjeta { left: 12px; right: 12px; bottom: 38px; padding: 14px; }
  .mapa__accion { width: 100%; justify-content: center; }
}

/* Quien pidió menos movimiento no necesita el desplazamiento del botón. */
@media (prefers-reduced-motion: reduce) {
  .mapa__accion:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Tasaciones
   Una sola pantalla: el texto a la izquierda y los contactos a la derecha,
   como una lista con líneas finas. Sin cajas ni botones de color.
   --------------------------------------------------------------------------- */
.tasar { padding: 190px 0 140px; }
.tasar-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.tasar h1 { margin: 16px 0 0; font-size: clamp(1.92rem, 4.16vw, 3.36rem); }
.tasar-texto p { max-width: 42ch; margin: 22px 0 0; color: var(--apagado); font-size: 1.05rem; }
.tasar-texto .tasar-tipos { max-width: none; font-size: .82rem; letter-spacing: .08em; color: var(--tinta); margin-top: 30px; }
.tasar-texto .tasar-zona { margin-top: 8px; font-size: .92rem; color: var(--acento); }

.tasar-lista { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.tasar-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--linea);
}
.tasar-numero {
  font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 400;
  letter-spacing: .02em; color: var(--tinta); transition: color var(--transicion);
}
.tasar-numero:hover { color: var(--acento); }
.tasar-acciones { display: flex; gap: 22px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.tasar-acciones a { color: var(--apagado); transition: color var(--transicion); }
.tasar-acciones a:hover { color: var(--acento); }
.tasar-correo, .tasar-direccion { display: block; font-size: .92rem; color: var(--apagado); }
.tasar-correo { margin-top: 26px; }
.tasar-direccion { margin-top: 8px; }
.tasar-correo:hover, .tasar-direccion:hover { color: var(--acento); }

.navegacion a[aria-current="page"] { color: var(--acento); }

@media (max-width: 900px) {
  .tasar { padding: 130px 0 90px; }
  .tasar-grilla { grid-template-columns: 1fr; gap: 56px; }
}

/* Teléfonos del bloque de contacto de la portada. */
.oficina-telefonos { list-style: none; margin: 0; padding: 0; }
.oficina-telefonos li { color: var(--apagado); font-size: .94rem; }
.oficina-telefonos a { color: var(--tinta); font-weight: 500; }

@media (max-width: 720px) {
  .tasar-fila { flex-direction: column; gap: 8px; }
}

/* Íconos de redes en el pie: solo el trazo, sin círculos ni fondos. */
.pie-redes { display: flex; gap: 18px; margin-top: 24px; }
.pie-redes a { display: inline-flex; width: 22px; height: 22px; color: rgba(255,255,255,.7); transition: color var(--transicion); }
.pie-redes a:hover { color: #fff; }
.pie-redes svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------------------------------------------------------------------------
   Botón flotante de WhatsApp
   Acompaña el scroll en todas las páginas. Al tocarlo se despliegan los dos
   números; cada uno abre el chat con el mensaje ya escrito. Va por debajo del
   visor de fotos (z-index 100) para no taparlo.
   --------------------------------------------------------------------------- */
.wapp { position: fixed; right: 20px; bottom: 20px; z-index: 45; }

.wapp summary {
  list-style: none;                  /* saca la flechita del <details> */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(11, 26, 48, .55);
  transition: transform var(--transicion), background var(--transicion);
}
.wapp summary::-webkit-details-marker { display: none; }
.wapp summary:hover { background: #1db954; transform: scale(1.05); }
.wapp[open] summary { background: var(--tinta); }

/* Los números salen hacia arriba, alineados con el botón. */
.wapp-numeros {
  position: absolute;
  right: 0;
  bottom: 70px;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.wapp-numeros a {
  display: block;
  white-space: nowrap;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--tinta);
  font-size: .88rem;
  font-weight: 500;
  box-shadow: 0 8px 22px -10px rgba(11, 26, 48, .5);
}
.wapp-numeros a:hover { background: #25d366; border-color: #25d366; color: #fff; }

@media (max-width: 720px) {
  .wapp { right: 16px; bottom: 16px; }
  .wapp summary { width: 54px; height: 54px; }
}

/* ---------------------------------------------------------------------------
   Página de la cartera (propiedades.html)
   --------------------------------------------------------------------------- */
.cartera { padding: 150px 0 110px; }
.cartera-encabezado { max-width: 60ch; margin-bottom: 36px; }
.cartera-encabezado h1 { margin-top: 12px; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.cartera-encabezado p { color: var(--apagado); margin: 14px 0 0; }

/* El buscador de la cartera: cada campo es una caja aparte que se acomoda
   sola al ancho. No usa la grilla del hero porque, al partirse en dos filas,
   la celda vacía del último renglón quedaba como un bloque gris. */
.buscador--cartera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
  background: none;
  border: 0;
}
.buscador--cartera .buscador-campo {
  flex: 1 1 200px;
  border: 1px solid var(--linea);
  background: var(--papel);
}
.buscador--cartera button {
  flex: 0 0 auto;
  padding: 0 28px;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--apagado);
}
.buscador--cartera button:hover { background: var(--papel-alt); color: var(--tinta); }

.cartera-enlace { margin-top: 48px; text-align: center; }

/* ---------------------------------------------------------------------------
   Mapa del listado de propiedades
   Leaflet se descarga recién cuando el mapa está por entrar en pantalla: es
   una biblioteca externa y no tiene por qué pesar en la carga inicial.
   --------------------------------------------------------------------------- */
.mapa-listado { margin-top: 56px; }
.mapa-listado-lienzo {
  height: 560px;
  border: 1px solid var(--linea);
  background: var(--papel-alt);
  box-shadow: 0 24px 50px -34px rgba(11, 26, 48, .55);
}
@media (max-width: 720px) { .mapa-listado-lienzo { height: 400px; } }

/* El fondo del mapa va casi al gris: así los pines azules son lo único con
   color fuerte. El filtro se aplica solo al panel de baldosas, no al mapa
   entero, para que pines, globo y controles queden con su color pleno. */
.mapa-listado-lienzo .leaflet-tile-pane {
  filter: grayscale(.45) saturate(.75) contrast(1.05) brightness(1.04);
}

/* Pin propio, con el azul de la marca. */
.mapa-pin svg { filter: drop-shadow(0 4px 6px rgba(11, 26, 48, .35)); }
.mapa-pin path { fill: var(--acento); }
.mapa-pin circle { fill: #fff; }
.mapa-pin:hover path { fill: var(--azul-medio); }

/* Globo de la propiedad: cuadrado y con la tipografía del sitio, como las
   tarjetas del listado. Las reglas llevan el contenedor adelante porque la
   hoja de Leaflet se agrega después que esta y, a igual peso, ganaría ella. */
.leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: 0;
  padding: 0;
  box-shadow: 0 18px 40px -20px rgba(11, 26, 48, .55);
}
.leaflet-popup .leaflet-popup-content { margin: 0; font-family: var(--texto); }
.leaflet-popup .leaflet-popup-tip { box-shadow: none; }
/* Sobre la foto el botón de cerrar en blanco desaparecía en las propiedades
   sin foto (fondo blanco): va con su propio fondo. */
.leaflet-container a.leaflet-popup-close-button {
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  line-height: 20px;
  color: var(--tinta);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 6px -2px rgba(11, 26, 48, .5);
}

.mapa-ficha { display: block; width: 100%; color: var(--tinta); }
.mapa-ficha img { width: 100%; height: 120px; object-fit: cover; }
.mapa-ficha-tipo,
.mapa-ficha strong,
.mapa-ficha-lugar,
.mapa-ficha-precio,
.mapa-ficha em { display: block; padding: 0 14px; }
.mapa-ficha-tipo {
  padding-top: 12px;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}
.mapa-ficha strong { margin-top: 4px; font-size: .95rem; line-height: 1.25; }
.mapa-ficha-lugar { margin-top: 3px; color: var(--apagado); font-size: .8rem; }
.mapa-ficha-precio {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}
.mapa-ficha em {
  margin: 10px 0 0;
  padding-bottom: 12px;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}
.mapa-ficha:hover .mapa-ficha em { text-decoration: underline; }

/* Controles: cuadrados y con el borde del sitio, no los redondeados de serie. */
.leaflet-touch .leaflet-bar,
.leaflet-bar {
  border: 1px solid var(--linea);
  border-radius: 0;
  box-shadow: 0 8px 20px -12px rgba(11, 26, 48, .5);
}
.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  border-radius: 0 !important;
  color: var(--tinta);
  border-bottom-color: var(--linea);
}
.leaflet-bar a:hover { background: var(--papel-alt); color: var(--acento); }
.leaflet-control-attribution {
  font-size: .66rem;
  background: rgba(255, 255, 255, .84) !important;
}
.leaflet-control-scale-line {
  border-color: var(--linea);
  background: rgba(255, 255, 255, .84);
  color: var(--apagado);
  font-size: .66rem;
}
.leaflet-control-attribution a { color: var(--apagado); }

/* Círculo de los pines agrupados. Con la hoja del complemento alcanza para el
   comportamiento; el aspecto lo pone el sitio. */
/* Lleva .leaflet-marker-icon adelante a propósito: la hoja de Leaflet, que se
   carga después que esta, pone display:block en los pines y, a igual peso,
   ganaría ella y el número quedaría arriba a la izquierda del círculo. */
.leaflet-marker-icon.mapa-grupo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 16px -6px rgba(11, 26, 48, .6);
}
.leaflet-marker-icon.mapa-grupo:hover { background: var(--azul-medio); }

/* Cartel con la cantidad de propiedades ubicadas, arriba a la izquierda. */
.mapa-cuenta {
  padding: 9px 15px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--linea);
  box-shadow: 0 8px 22px -14px rgba(11, 26, 48, .6);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* Botón para volver a encuadrar todas las propiedades. */
.mapa-encuadrar {
  margin-bottom: 8px;
  padding: 9px 15px;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 8px 22px -14px rgba(11, 26, 48, .6);
  font-family: var(--texto);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
}
.mapa-encuadrar:hover { background: var(--papel-alt); color: var(--acento); }

/* El pin crece apenas al pasarle el mouse: ayuda a saber cuál se va a abrir. */
.mapa-pin svg { transition: transform 200ms ease; }
.mapa-pin:hover svg { transform: translateY(-2px) scale(1.08); }