/* ==========================================================================
   Brown Propiedades — sistema visual
   Rojo #E44319 muestreado del logo oficial (Brown_Frame_Video.png).
   El rojo es acento, nunca fondo de superficies grandes: la foto manda.
   ========================================================================== */

:root {
  --rojo: #e44319;
  --rojo-oscuro: #b7330f;
  --rojo-tenue: #fdf0ec;

  --tinta: #141414;
  --tinta-media: #4a4a4a;
  --tinta-suave: #7c7c7c;

  --papel: #ffffff;
  --papel-tibio: #faf8f6;
  --linea: #e6e2de;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --u: 4px;
  --ancho: 1240px;
  --radio: 2px;
  --sombra: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.06);
  --sombra-alta: 0 2px 4px rgba(20, 20, 20, 0.06), 0 16px 48px rgba(20, 20, 20, 0.12);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 calc(var(--u) * 4); }

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: calc(var(--u) * 6);
}

.seccion { padding-block: calc(var(--u) * 24); }
.seccion--tibia { background: var(--papel-tibio); }

/* Muro de ladrillo blanco, del frame oficial de la marca. Bajo de opacidad a
   propósito: tiene que insinuarse, no leerse como una grilla detrás del texto. */
.seccion--ladrillo {
  position: relative;
  background: var(--papel-tibio);
  isolation: isolate;
}

.seccion--ladrillo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/img/ladrillos.svg') repeat;
  background-size: 200px 100px;
  opacity: 0.7;
}

.rotulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo);
  margin: 0 0 calc(var(--u) * 3);
}

.entradilla {
  font-size: 1.075rem;
  color: var(--tinta-media);
  max-width: 60ch;
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  height: 76px;
}

.cabecera__logo img { height: 46px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}

.nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tinta-media);
  transition: color 0.18s ease;
}

.nav a:hover,
.nav a[aria-current='page'] { color: var(--rojo); }

/* El CTA de la barra va deliberadamente chico: el logo es lo que manda ahí.
   Compensa el tamaño con peso — blanco 700 sobre rojo lee más firme que
   un botón grande en 600. */
.nav .boton {
  padding: calc(var(--u) * 2.5) calc(var(--u) * 5);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

/* Sólo el sólido lleva texto blanco — el de contorno hereda tinta. */
.nav .boton--rojo { color: #fff; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3.25) calc(var(--u) * 7);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.boton--rojo { background: var(--rojo); color: #fff; }
.boton--rojo:hover { background: var(--rojo-oscuro); }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}
.boton--linea:hover { border-color: var(--rojo); color: var(--rojo); }

.boton--claro {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.boton--claro:hover { background: #fff; color: var(--tinta); }

/* ── Portada ────────────────────────────────────────────────────────────── */

/* El carrusel va montado sobre el muro de ladrillo, no a sangre: el marco de
   textura alrededor lo lee como una pieza puesta en la pared —el frame de la
   marca— en vez de una foto de banner corriente. */
.portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--papel-tibio);
  padding: calc(var(--u) * 10);
  isolation: isolate;
}

.portada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/img/ladrillos.svg') repeat;
  background-size: 200px 100px;
  opacity: 1;
}

/* El recorte redondeado vive acá y no en .portada, para que el ladrillo llegue
   cuadrado hasta el borde de la sección y solo la foto quede con esquinas. */
.portada__laminas {
  border-radius: calc(var(--u) * 2);
  overflow: hidden;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 10) rgb(0 0 0 / 0.18);
}

@media (max-width: 700px) {
  .portada { padding: calc(var(--u) * 2); }
}

/* ── Carrusel ───────────────────────────────────────────────────────────────
   Las láminas se apilan y se cruzan con opacidad. Van todas en el flujo para
   que la sección tome el alto de la más larga y no salte al cambiar. */

.portada__laminas {
  display: grid;
  width: 100%;
}

.lamina {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 660px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.lamina.activa { opacity: 1; visibility: visible; }

.lamina__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La foto entra apenas ampliada y vuelve a su lugar mientras la lámina está
   arriba: da profundidad sin que el texto se mueva. */
.lamina.activa .lamina__foto {
  animation: acercar 7s ease-out both;
}

@keyframes acercar {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

.lamina__texto {
  position: relative;
  padding-block: calc(var(--u) * 18) calc(var(--u) * 22);
  max-width: 40rem;
}

.portada__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(12, 10, 9, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.portada__flecha:hover { background: var(--rojo); border-color: var(--rojo); }
.portada__flecha--ant { left: calc(var(--u) * 5); }
.portada__flecha--sig { right: calc(var(--u) * 5); }

.portada__puntos {
  position: absolute;
  left: 0;
  right: 0;
  /* Por encima del buscador, que sube 40px sobre el borde de la portada. */
  bottom: calc(var(--u) * 19);
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 2.5);
}

.portada__puntos button {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: background 0.22s ease, width 0.22s ease;
}

.portada__puntos button[aria-selected='true'] {
  background: var(--rojo);
  width: 52px;
}

.portada__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 10, 9, 0.86) 0%,
    rgba(12, 10, 9, 0.42) 45%,
    rgba(12, 10, 9, 0.18) 100%
  );
}

.portada h1 { color: #fff; text-wrap: balance; }

.portada p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.075rem;
  margin-top: calc(var(--u) * 4);
  max-width: 46ch;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 7);
}

/* ── Buscador ───────────────────────────────────────────────────────────── */

.buscador {
  position: relative;
  margin-top: calc(var(--u) * -10);
  z-index: 10;
  background: var(--papel);
  box-shadow: var(--sombra-alta);
  border-radius: var(--radio);
  padding: calc(var(--u) * 6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: calc(var(--u) * 4);
  align-items: end;
}

.campo { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }

.campo label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.campo select,
.campo input,
.campo textarea {
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--tinta);
  padding: calc(var(--u) * 2.75) calc(var(--u) * 3);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  width: 100%;
  transition: border-color 0.18s ease;
}

.campo select:focus,
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--rojo);
}

.campo textarea { resize: vertical; min-height: 110px; }

/* ── Tarjetas de propiedad ──────────────────────────────────────────────── */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: calc(var(--u) * 8);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.tarjeta:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}

.tarjeta__foto {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--papel-tibio);
}

.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }

.marbete {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  background: var(--rojo);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border-radius: var(--radio);
}

.tarjeta__cuerpo {
  padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  flex: 1;
}

.tarjeta__lugar {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.tarjeta__titulo {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}

.tarjeta__precio {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rojo);
  margin-top: calc(var(--u) * 1);
}

.atributos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4);
  margin-top: auto;
  padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  color: var(--tinta-media);
}

.atributos span { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.5); }

/* ── Listado con filtros ────────────────────────────────────────────────── */

.listado {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: calc(var(--u) * 12);
  align-items: start;
}

.filtros {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 6);
  background: var(--papel-tibio);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.resultados__barra {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 4);
  border-bottom: 1px solid var(--linea);
}

.resultados__conteo { font-size: 0.9rem; color: var(--tinta-suave); }

/* ── Ficha ──────────────────────────────────────────────────────────────── */

.galeria {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: calc(var(--u) * 2);
  aspect-ratio: 16 / 9;
}

.galeria__principal,
.galeria__lado { overflow: hidden; background: var(--papel-tibio); }

.galeria__principal { position: relative; }

/* Total de fotos sobre la foto grande. Sólo en el teléfono: ahí el lateral
   (y su "+N fotos") está oculto, y sin esta señal la galería parece de una
   sola foto. En escritorio el lateral ya lo dice. */
.galeria__total {
  position: absolute;
  right: calc(var(--u) * 3);
  bottom: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border-radius: 999px;
  background: rgba(12, 10, 9, 0.62);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  display: none;
  pointer-events: none;
}

.galeria__lado {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: calc(var(--u) * 2);
}

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.18s ease;
}

.galeria img:hover { opacity: 0.9; }

.galeria__mas {
  position: relative;
  display: grid;
  place-items: center;
}

.galeria__mas span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 10, 9, 0.55);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  pointer-events: none;
}

.ficha {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: calc(var(--u) * 14);
  align-items: start;
}

.ficha__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: calc(var(--u) * 6);
  padding-block: calc(var(--u) * 7);
  border-block: 1px solid var(--linea);
  margin-block: calc(var(--u) * 8);
}

.spec__valor { font-family: var(--serif); font-size: 1.85rem; font-weight: 600; }

.spec__clave {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.lista-limpia { list-style: none; padding: 0; margin: 0; }

.lista-marcas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: calc(var(--u) * 3);
}

.lista-marcas li {
  position: relative;
  padding-left: calc(var(--u) * 6);
  color: var(--tinta-media);
}

.lista-marcas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--rojo);
  border-radius: 50%;
}

.panel {
  position: sticky;
  top: 100px;
  padding: calc(var(--u) * 7);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: var(--papel);
}

.panel__precio {
  font-family: var(--serif);
  font-size: 2.35rem;
  font-weight: 600;
  color: var(--rojo);
  line-height: 1;
}

/* Equivalencia en pesos con la UF del día. Deliberadamente discreta: el precio
   es la UF —es lo que se firma—, esto es sólo la referencia para dimensionarlo. */
.panel__pesos {
  margin: calc(var(--u) * 2) 0 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

/* Contacto: texto y formulario lado a lado. Vivía como estilo inline
   (grid 1fr 1fr) que ninguna media query podía colapsar: en un teléfono el
   formulario quedaba de 102px y desbordaba 54px la pantalla entera. */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 20);
  align-items: start;
}

@media (max-width: 860px) {
  .contacto__grid { grid-template-columns: 1fr; gap: calc(var(--u) * 12); }
}

.formulario { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }

.aviso {
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-left: 3px solid var(--rojo);
  background: var(--rojo-tenue);
  font-size: 0.9rem;
  color: var(--tinta-media);
  border-radius: 0 var(--radio) var(--radio) 0;
}

.aviso--ok { border-left-color: #1c8b4b; background: #eef8f2; }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.66);
  padding-block: calc(var(--u) * 18) calc(var(--u) * 10);
  font-size: 0.9rem;
}

.pie__grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: calc(var(--u) * 12);
  padding-bottom: calc(var(--u) * 12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pie h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: calc(var(--u) * 4);
}

.pie a:hover { color: #fff; }
.pie li { margin-bottom: calc(var(--u) * 2); }

.pie__legal {
  padding-top: calc(var(--u) * 7);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 4);
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.44);
}

.pie img { height: 46px; }

/* Firma del estudio: presente para quien la busca, invisible para quien no.
   Sube apenas de tono al pasar el mouse — es firma, no aviso. */
.pie__firma {
  width: 100%;
  text-align: center;
  margin-top: calc(var(--u) * 6);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.14);
  transition: color 0.25s ease;
}

.pie__firma:hover { color: rgba(255, 255, 255, 0.4); }

/* ── Visor de fotos ─────────────────────────────────────────────────────── */

.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 9, 8, 0.96);
  display: none;
  place-items: center;
}

.visor[open] { display: grid; }

.visor img {
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
}

.visor__cerrar,
.visor__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
  transition: background 0.18s ease;
}

.visor__cerrar:hover,
.visor__nav:hover { background: rgba(255, 255, 255, 0.26); }

.visor__cerrar { top: 28px; right: 28px; }
.visor__nav--ant { left: 28px; top: 50%; transform: translateY(-50%); }
.visor__nav--sig { right: 28px; top: 50%; transform: translateY(-50%); }

.visor__contador {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}

/* ── WhatsApp ───────────────────────────────────────────────────────────── */

/* El verde saturado de extremo a extremo lee como plugin pegado encima y pelea
   con el rojo de la marca. La pastilla va en tinta y el verde queda sólo en el
   glifo: sigue reconociéndose como WhatsApp sin gritar. */
.wasap {
  position: fixed;
  right: calc(var(--u) * 5);
  bottom: calc(var(--u) * 5 + env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 3) calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 3);
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(20, 20, 20, 0.12), 0 12px 32px rgba(20, 20, 20, 0.22);
  transition: transform 0.22s ease, box-shadow 0.18s ease, background 0.18s ease,
    opacity 0.22s ease, visibility 0.22s ease;

  /* Oculto hasta que se baja — ver montarBotonFlotante(). Sin JavaScript nunca
     se agrega el botón, así que no hay riesgo de que quede invisible para siempre. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 3));
}

.wasap--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wasap:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 20, 20, 0.16), 0 18px 44px rgba(20, 20, 20, 0.3);
}

/* El glifo en su disco verde: es lo que se reconoce de un vistazo, y separarlo
   del fondo evita que el verde tiña toda la pieza. */
.wasap svg {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 6px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}

@media (max-width: 560px) {
  .wasap span { display: none; }
  .wasap { padding: calc(var(--u) * 2); gap: 0; }
}

.boton--wasap {
  background: #25d366;
  color: #0b3d24;
  border-color: #25d366;
}

.boton--wasap:hover { background: #1fb857; border-color: #1fb857; }
.boton--wasap svg { width: 18px; height: 18px; }

/* ── Pendón lateral de anuncios ──────────────────────────────────────────
   El formato del pendón de Solo Gourmet (200px, 9/16, fijo a la derecha,
   entra deslizándose pasado el hero) con la sobriedad de Brown. */

.pendon {
  position: fixed;
  right: 18px;
  top: 50%;
  width: 200px;
  aspect-ratio: 9 / 16;
  z-index: 35;
  border-radius: var(--radio);
  overflow: hidden;
  /* La sombra de la casa: el pendón no puede proyectar más que el buscador. */
  box-shadow: var(--sombra-alta);
  border: 1px solid rgba(228, 67, 25, 0.28);

  /* Entra deslizándose desde el borde, recién pasada la portada. */
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(100% + 26px), -50%);
  transition: transform 0.55s cubic-bezier(0.2, 0.85, 0.3, 1.04), opacity 0.4s;
}

.pendon--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.pendon__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(20, 20, 20, 0.65);
  color: var(--papel);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.pendon__cerrar:hover { background: rgba(20, 20, 20, 0.9); }

.pendon__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  /* Todo el bloque (cabeza incluida) se centra con los margin auto de
     .pendon__cabeza y .pendon__cta; el padding superior mayor lo sesga
     un poco bajo el centro, sin anclarlo al borde. */
  padding: calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 4);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background:
    radial-gradient(circle at 30% 18%, rgba(228, 67, 25, 0.32), transparent 55%),
    radial-gradient(circle at 82% 92%, rgba(228, 67, 25, 0.16), transparent 50%),
    var(--tinta);
}

.pendon__slide.activa {
  opacity: 1;
  pointer-events: auto;
}

/* Lámina con foto: la imagen al fondo, un velo para que el texto respire,
   y el contenido (icono, textos) por encima. */
.pendon__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pendon__foto--izquierda { object-position: left center; }

.pendon__velo {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* La rampa se adelanta y se sostiene: el bloque de texto (que quedó más
     arriba) necesita cobertura real donde la foto trae claros. */
  background: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.36) 0%,
    rgba(20, 20, 20, 0.1) 24%,
    rgba(20, 20, 20, 0.55) 46%,
    rgba(20, 20, 20, 0.96) 72%
  );
}

.pendon__slide > :not(.pendon__foto):not(.pendon__velo) {
  position: relative;
  z-index: 1;
}

.pendon__cabeza {
  /* Ya no vive pegada arriba (no se leía sobre la foto): baja con el bloque,
     lejos de la ✕ — por eso puede ser más grande sin pelear con la esquina. */
  margin-top: auto; /* con el margin-bottom auto del CTA, el bloque se centra */
  margin-bottom: calc(var(--u) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
}

/* Lámina centrada (sin icono): composición simétrica, tipo anuncio. */
.pendon__slide--centrada {
  align-items: center;
  text-align: center;
}

.pendon__icono {
  width: 48px;
  flex: none;
  color: var(--rojo);
  margin-left: calc(var(--u) * -1.5); /* el trazo parte en x=6: alineación óptica */
}

.pendon__rotulo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
}

.pendon__titulo {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--papel);
}

.pendon__texto {
  margin-top: calc(var(--u) * 1); /* jerarquía 4/8/12: más aire tras el título */
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.pendon__cta {
  margin: calc(var(--u) * 2) 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rojo);
  text-underline-offset: 3px;
}

.pendon__slide:hover .pendon__cta { text-decoration: underline; }

@media (max-width: 1180px) {
  .pendon { display: none; }
}

.bloque-ficha { width: 100%; margin-top: calc(var(--u) * 6); }

/* "o déjanos tus datos" con una línea a cada lado. */
.separador {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  margin: calc(var(--u) * 5) 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.separador::before,
.separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linea);
}

@media (max-width: 720px) {
  /* En el teléfono queda sólo el ícono: la etiqueta se come el ancho útil. */
  .wasap { padding: calc(var(--u) * 3.5); }
  .wasap span { display: none; }
  .wasap svg { width: 26px; height: 26px; }
}

/* ── Panel ─────────────────────────────────────────────────────────── */

/* El enlace del pie es a propósito discreto: es una puerta de servicio, no una
   sección del sitio. Se ve al pasar el mouse y el lector de pantalla lo lee. */
.puerta {
  color: rgba(255, 255, 255, 0.24);
  font-size: 0.78rem;
  transition: color 0.18s ease;
}

.puerta:hover,
.puerta:focus-visible { color: rgba(255, 255, 255, 0.7); }

.entrada {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--papel-tibio);
  padding: calc(var(--u) * 6);
}

.entrada__caja {
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: calc(var(--u) * 10) calc(var(--u) * 8);
  text-align: center;
}

.entrada__logo { height: 48px; width: auto; margin: 0 auto; }

.entrada h1 {
  font-size: 1.9rem;
  margin-top: calc(var(--u) * 7);
}

.entrada__bajada {
  font-size: 0.88rem;
  color: var(--tinta-suave);
  margin-bottom: calc(var(--u) * 8);
}

.entrada .formulario { text-align: left; }

.entrada__volver {
  margin: calc(var(--u) * 7) 0 0;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}

.entrada__volver a:hover { color: var(--rojo); }

/* ── Utilidades ─────────────────────────────────────────────────────────── */

.vacio {
  padding: calc(var(--u) * 20) calc(var(--u) * 6);
  text-align: center;
  color: var(--tinta-suave);
}

.esqueleto {
  background: linear-gradient(90deg, #f2efec 25%, #e9e5e1 50%, #f2efec 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}

@keyframes brillo {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── Adaptaciones ───────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .listado,
  .ficha { grid-template-columns: 1fr; }

  .filtros,
  .panel { position: static; }

  .pie__grilla { grid-template-columns: 1fr; gap: calc(var(--u) * 8); }
}

@media (max-width: 720px) {
  .seccion { padding-block: calc(var(--u) * 16); }
  .contenedor { padding-inline: calc(var(--u) * 5); }
  .nav { gap: calc(var(--u) * 4); }
  /* En el teléfono sobreviven los dos catálogos — son el negocio. El resto se
     va ("Contacto" lo cubre el propio CTA rojo, "Nosotros" se descubre bajando). */
  .nav a:not(.boton):not([href$='propiedades.html']):not([href$='terrenos.html']) { display: none; }
  .nav a[href$='terrenos.html'] { font-size: 0; }
  .nav a[href$='terrenos.html']::before { content: 'Terrenos'; font-size: 0.9rem; font-weight: 500; }

  .cabecera__fila { height: 66px; }
  .cabecera__logo img { height: 34px; }

  /* El CTA no puede envolverse: partiría en dos líneas y reventaría la barra. */
  .nav .boton {
    padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .galeria { grid-template-columns: 1fr; aspect-ratio: 4 / 3; }
  .galeria__lado { display: none; }
  .galeria__total { display: inline-block; }
  .buscador { margin-top: calc(var(--u) * 6); }

  /* En el teléfono el carrusel se pasa con el dedo: las flechas sólo tapan foto. */
  .portada__flecha { display: none; }
  .lamina__texto { padding-block: calc(var(--u) * 14) calc(var(--u) * 20); }
}

/* ── Bienvenida de cada catálogo ──────────────────────────────────────────
   Una foto que sitúa el área y una línea que dice a qué se viene — en
   terrenos, a invertir además de a descansar. */

.catalogo-hero {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
}

.catalogo-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalogo-hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 9, 0.3), rgba(12, 10, 9, 0.62));
}

.catalogo-hero .contenedor {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--u) * 20) calc(var(--u) * 14);
}

.catalogo-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }

.catalogo-hero .entradilla {
  color: rgba(255, 255, 255, 0.88);
  margin-top: calc(var(--u) * 3);
}

/* ── Micro movimiento ─────────────────────────────────────────────────────
   Tres gestos y nada más: aparecer al entrar en pantalla (revela.js), el
   subrayado del menú, y la foto de la tarjeta que se acerca. Todo corto y
   con easing suave — dinamismo se percibe, no se mira. */

.revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--retraso, 0ms);
}

.revela.visto { opacity: 1; transform: none; }

.nav a:not(.boton) { position: relative; }

.nav a:not(.boton)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--rojo);
  transition: right 0.22s ease;
}

.nav a:not(.boton):hover::after,
.nav a:not(.boton)[aria-current='page']::after { right: 0; }

.tarjeta__foto img { transition: transform 0.5s ease; }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.035); }

.boton { transition-property: background, color, border-color, transform; }
.boton:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Sin el acercamiento la foto queda ampliada al 106%: hay que devolverla. */
  .lamina.activa .lamina__foto { animation: none; transform: none; }
}