/* =========================================================
   ALTURA PROPIEDADES — Demo / plantilla Pixel Inmobiliario
   Paleta editorial: tinta cálida + crema + bronce
   ========================================================= */

/* ---------------------------- TOKENS ---------------------------- */
:root {
  /* color */
  --ink:        #14120f;
  --ink-soft:   #1f1c17;
  --ink-700:    #3a352d;
  --muted:      #6d665a;
  --cream:      #faf8f4;
  --cream-2:    #f1ece3;
  --cream-3:    #e6dfd3;
  --line:       rgba(20, 18, 15, .12);
  --line-light: rgba(255, 255, 255, .18);
  --bronze:     #b08d57;
  --bronze-dk:  #937343;
  --forest:     #2f4f43;
  --wa:         #25d366;
  --white:      #ffffff;

  /* tipografía */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* medidas */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
  --radius-lg: 8px;

  /* sombras */
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, .05), 0 4px 14px rgba(20, 18, 15, .05);
  --shadow-md: 0 2px 6px rgba(20, 18, 15, .06), 0 18px 40px rgba(20, 18, 15, .1);
  --shadow-lg: 0 30px 70px rgba(20, 18, 15, .18);

  /* transición */
  --t: 320ms cubic-bezier(.22, .61, .36, 1);
}

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--bronze); color: #fff; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* --------------------------- LAYOUT ---------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section--alt { background: var(--cream-2); }

.section__head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem 4rem;
  align-items: end;
}
.section__desc { color: var(--muted); font-size: 1.0625rem; max-width: 46ch; }
.section__desc--center { margin-top: 1.25rem; }

/* --------------------------- TIPOGRAFÍA ------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.1rem;
}
.eyebrow--light { color: rgba(255, 255, 255, .82); }

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}
.h2 em { font-style: italic; font-weight: 400; }
.h2--light { color: var(--white); }

.lead {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 52ch;
  margin-top: 1.4rem;
}

/* ---------------------------- BOTONES --------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform var(--t); }
.btn:hover svg { transform: translateX(3px); }

.btn--dark  { --btn-bg: var(--ink);   --btn-fg: var(--cream); }
.btn--dark:hover { --btn-bg: var(--ink-soft); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.14); border-color: #fff; }
.btn--wa { --btn-bg: var(--wa); --btn-fg: #06331a; }
.btn--wa:hover { --btn-bg: #1fbb59; }

.btn--lg { padding: 1.1rem 2rem; font-size: .95rem; }
.btn--sm { padding: .7rem 1.2rem; font-size: .82rem; }

/* ---------------------------- HEADER ---------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background var(--t), padding var(--t), box-shadow var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(250, 248, 244, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  padding-block: .7rem;
  box-shadow: 0 1px 24px rgba(20, 18, 15, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--white);
  transition: color var(--t);
}
.header.is-stuck .logo { color: var(--ink); }
.logo__mark { display: grid; place-items: center; color: var(--bronze); }
.logo__text { display: grid; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.logo__sub {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: .22rem;
}

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav__list { display: flex; align-items: center; gap: 1.9rem; }
.nav__link {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  transition: color var(--t);
}
.header.is-stuck .nav__link { color: var(--ink-700); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--bronze); }

.header.is-stuck .nav__cta { --btn-bg: var(--ink); --btn-fg: var(--cream); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  place-items: center;
  /* Sin esto las tres filas se reparten los 44 px de alto y quedan de
     11,3 px en vez de ceñirse a la barra de 1,6 px. Las barras terminan
     separadas 16,3 px y el giro de la X —calculado para 6,6— no llegaba
     a cruzarlas: se veía un chevron en lugar de una cruz. */
  align-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  width: 22px; height: 1.6px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t), background var(--t);
}
.header.is-stuck .burger span { background: var(--ink); }
.burger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
/* Con el menú abierto el botón queda sobre el panel, que es crema. Las
   barras nacen blancas —van sobre el hero oscuro— así que la X quedaba
   invisible y parecía que no había manera de cerrar. */
.burger.is-open span { background: var(--ink); }

/* Velo detrás del panel: además de oscurecer la página, tocarlo cierra el
   menú. Lo crea el script, así que no hay que agregarlo a cada página.
   Va por debajo del encabezado (z 100) para no tapar el propio botón. */
.navscrim {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(12, 10, 9, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}
body.nav-open .navscrim { opacity: 1; pointer-events: auto; }

/* El panel del menú es hijo del encabezado y se posiciona con position:
   fixed contra la ventana. Pero al scrollear el encabezado gana un
   backdrop-filter, y un filtro de fondo convierte al elemento en el marco
   de referencia de sus hijos fijos: el panel pasaba a medir el alto del
   encabezado —66 px— en vez de la pantalla entera. Mientras el menú está
   abierto apagamos el desenfoque; el color de fondo queda igual y de
   todos modos el panel y el velo tapan esa zona. */
body.nav-open .header { backdrop-filter: none; }

/* ----------------------------- HERO ----------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 6rem;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15, 13, 11, .88) 0%, rgba(15, 13, 11, .68) 45%, rgba(15, 13, 11, .34) 78%),
    linear-gradient(to top, rgba(15, 13, 11, .7), transparent 48%),
    rgba(15, 13, 11, .16);
}

.hero__inner { position: relative; max-width: 760px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.9rem, 8vw, 6rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.hero__title em { font-style: italic; font-weight: 400; }

.hero__text {
  margin-top: 1.8rem;
  max-width: 54ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: rgba(255, 255, 255, .86);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }

.hero__seal {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 3rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .68);
}

/* El separado del piso tiene que superar los 3.75rem que la tarjeta del
   buscador se monta sobre el hero; si no, la punta de la flecha queda
   escondida detrás de la tarjeta. */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 4.2rem;
  translate: -50% 0;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  color: rgba(255, 255, 255, .7);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* --------------------------- BUSCADOR --------------------------- */
/* Esta sección se monta 60 px sobre el hero. Su caja es transparente,
   pero igual interceptaba los clics de lo que quedaba debajo: la flecha
   de bajar, el sello y —en la portada con carrusel— la pausa y los
   puntos del slider. Con esto sólo la tarjeta recibe clics. */
.search { margin-top: -3.75rem; position: relative; z-index: 5; pointer-events: none; }
.search__card { pointer-events: auto; }

.search__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.search__field {
  background: var(--white);
  padding: 1rem 1.25rem;
  display: grid;
  gap: .3rem;
}
.search__field label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.search__field select {
  border: 0;
  background: transparent;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d665a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: 15px;
  padding-right: 1.4rem;
}
.search__btn {
  border-radius: 0;
  padding-inline: 2.2rem;
  align-self: stretch;
  /* El separador de 1 px lo dibuja la grilla con el fondo de la tarjeta,
     que es negro al 12 %: sobre el hero se veía oscuro y sobre el fondo
     claro de la página, gris. Este anillo lo pinta del negro del botón en
     todo su recorrido. Los otros tres lados caen justo sobre el borde de
     la tarjeta y los recorta su overflow, así que no se ven. */
  box-shadow: 0 0 0 1px var(--ink);
}
.search__btn:hover { transform: none; background: var(--ink-soft); box-shadow: 0 0 0 1px var(--ink-soft); }
.search__btn:hover svg { transform: none; }

/* --------------------------- NOSOTROS --------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.about__intro .btn { margin-top: 2rem; }
.about__note {
  margin-top: 1.4rem;
  font-size: .9rem;
  font-style: italic;
  color: var(--muted);
  max-width: 38ch;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pillar {
  background: var(--cream);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: background var(--t);
}
.pillar:hover { background: var(--white); }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--cream-3);
  color: var(--ink);
  margin-bottom: 1.1rem;
  transition: background var(--t), color var(--t);
}
.pillar:hover .pillar__icon { background: var(--ink); color: var(--cream); }
.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
.pillar p { font-size: .92rem; color: var(--muted); }

/* estadísticas */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.stat { text-align: center; }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.stat span {
  display: block;
  margin-top: .55rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------- PROPIEDADES ------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.filter {
  padding: .6rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  transition: all var(--t);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.props__grid {
  display: grid;
  /* el min() es necesario: minmax(320px, …) a secas nunca baja de 320, así
     que en pantallas más angostas la tarjeta se salía y arrastraba toda la
     página con ella */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card.is-hidden { display: none; }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-3); }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.card:hover .card__media img { transform: scale(1.06); }

.tag {
  position: absolute;
  top: .85rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  border-radius: 999px;
  line-height: 1;
}
.tag--op   { background: var(--ink); color: var(--cream); }
.tag--type { background: rgba(255, 255, 255, .92); color: var(--ink); }

/* Las dos etiquetas van en una fila flexible en vez de a distancias
   fijas: así no importa cuánto mida cada texto. Con posiciones fijas,
   "Alquiler" se montaba sobre la etiqueta de tipo. */
.card__tags {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  max-width: calc(100% - 4.2rem);   /* deja libre el corazón de guardados */
}
.card__tags .tag { position: static; top: auto; left: auto; right: auto; }

.card__fav {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  transition: background var(--t), color var(--t), transform var(--t);
}
.card__fav:hover { transform: scale(1.08); }
.card__fav[aria-pressed="true"] { background: var(--ink); color: #ff6b6b; }
.card__fav[aria-pressed="true"] svg { fill: currentColor; }

.card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
}
.card__place {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .84rem;
  color: var(--muted);
}
.card__place svg { flex: none; color: var(--bronze); }

.specs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}
.specs li { display: inline-flex; align-items: center; gap: .35rem; }
.specs span { font-size: .8rem; filter: grayscale(1); opacity: .8; }

.card__foot {
  margin-top: auto;
  padding-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.price small { font-family: var(--font-sans); font-size: .72rem; font-weight: 500; color: var(--muted); }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}
.card__link:hover { color: var(--bronze); border-color: var(--bronze); }
.card__link svg { transition: transform var(--t); }
.card__link:hover svg { transform: translateX(3px); }

/* consulta directa por WhatsApp de esa propiedad
   (.card en portadas y listado en grilla, .scard en el listado con mapa) */
.card__wa,
.scard__wa {
  margin-left: auto;          /* se agrupa con "Ver ficha", lejos del precio */
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--wa);
  background: var(--white);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.card__wa:hover,
.scard__wa:hover {
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
  transform: scale(1.08);
}
/* la tarjeta del listado con mapa es más compacta */
.scard__wa { width: 30px; height: 30px; }
.scard__wa svg { width: 15px; height: 15px; }

@media (max-width: 520px) {
  /* Sin esto el pie se apila en tres filas y el botón de WhatsApp queda
     solo en el medio, pegado al borde. Así el precio va en su renglón y
     abajo quedan WhatsApp y "Ver ficha" juntos. */
  .card__foot:has(.card__wa) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
  }
  .card__foot:has(.card__wa) .price { width: 100%; }
  .card__foot .card__wa { margin-left: 0; }
}

.props__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.props__cta p { color: var(--muted); max-width: 46ch; }

/* ---------------------------- SERVICIOS -------------------------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service {
  background: var(--cream);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  transition: background var(--t);
  position: relative;
}
.service:hover { background: var(--white); }
.service__num {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--bronze);
}
.service h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ink);
  margin: .9rem 0 .7rem;
  letter-spacing: -.01em;
}
.service p { font-size: .93rem; color: var(--muted); }
.service--cta { background: var(--ink); }
.service--cta:hover { background: var(--ink-soft); }
.service--cta h3 { color: var(--white); margin-top: 0; }
.service--cta p { color: rgba(255, 255, 255, .7); margin-bottom: 1.4rem; }

/* ------------------------------ ZONAS ---------------------------- */
.zones__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: clamp(.75rem, 1.5vw, 1.1rem);
}
.zone {
  position: relative;
  grid-column: span 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.zone--tall { grid-row: span 2; }
.zone--wide { grid-column: span 2; }

.zone img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(.22, .61, .36, 1);
}
.zone::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(15, 13, 11, .88) 0%, rgba(15, 13, 11, .34) 45%, rgba(15, 13, 11, .06) 100%);
  transition: opacity var(--t);
}
.zone:hover img { transform: scale(1.07); }

.zone__body { padding: 1.4rem 1.5rem; color: #fff; }
.zone__body h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.zone__body p {
  font-size: .86rem;
  color: rgba(255, 255, 255, .78);
  margin-top: .35rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t), opacity var(--t), margin var(--t);
}
.zone:hover .zone__body p,
.zone:focus-visible .zone__body p { max-height: 6rem; opacity: 1; }

/* ---------------------- TIPOS DE PROPIEDADES --------------------- */
/* Mismo lenguaje que los tiles de Zonas —foto, degradado, nombre— pero acá
   debajo del nombre va una fila por operación, y cada una es un enlace al
   listado ya filtrado. Es lo que hace útil la sección: la foto sola no lleva a
   ningún lado. */
.types__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.1rem);
}
.type {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.type img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(.22, .61, .36, 1);
}
.type::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  /* Más oscuro que en Zonas: acá hay texto en toda la mitad de abajo —el
     nombre y hasta tres filas— y no sólo un título. */
  background: linear-gradient(to top, rgba(15, 13, 11, .92) 0%, rgba(15, 13, 11, .55) 55%, rgba(15, 13, 11, .12) 100%);
}
.type:hover img { transform: scale(1.06); }

.type__body { padding: 1.2rem 1.2rem 1rem; color: #fff; width: 100%; }
.type__body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}

.type__ops { list-style: none; display: grid; gap: .3rem; }
.type__ops a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .42rem .7rem;
  border-radius: var(--radius-sm, 8px);
  /* El vidrio sobre la foto: sin fondo propio, los renglones se pierden en las
     fotos claras. */
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .84rem;
  transition: background var(--t), color var(--t);
}
.type__ops a:hover,
.type__ops a:focus-visible { background: var(--bronze); color: var(--on-bronze, #fff); }
.type__ops b { font-weight: 700; font-variant-numeric: tabular-nums; }
.type__ops svg { flex: none; opacity: .8; }

/* Con muchos tipos la sección se hacía larguísima en el celular —once tiles son
   cuatro pantallas de scroll—, así que se muestran seis y el resto queda detrás
   de un botón. El recorte lo pone el JS (script.js, bloque "TIPOS: VER TODOS"):
   sin JS se ven todos, que es preferible a esconder tipos publicados detrás de
   un botón que no responde. El 7 de acá y el TOPE de allá son el mismo número,
   y el ancho es el mismo que el del matchMedia. */
.types__more { display: flex; justify-content: center; margin-top: 1.6rem; }
@media (max-width: 900px) {
  .types__grid.is-clipped .type:nth-child(n+7) { display: none; }
}

/* --------------------------- DESARROLLO -------------------------- */
.dev { background: var(--ink); color: rgba(255, 255, 255, .74); }
.dev__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.dev__media { border-radius: var(--radius-lg); overflow: hidden; }
.dev__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dev__body h2 { margin-bottom: .4rem; }
.dev__sub {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.6rem;
}
.dev__body p + p { margin-top: 1rem; }

.dev__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem 1.5rem;
  margin: 2rem 0;
  padding-block: 1.8rem;
  border-block: 1px solid var(--line-light);
}
.dev__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .82);
}
.dev__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--bronze);
}
.dev__quote {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .58);
}

/* -------------------------- NECESIDADES -------------------------- */
.needs .section__head { margin-inline: auto; text-align: center; }
.needs .section__desc--center { margin-inline: auto; }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
.chips a {
  display: inline-block;
  padding: .85rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  transition: all var(--t);
}
.chips a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  transform: translateY(-3px);
}
.needs__cta { text-align: center; margin-top: 3rem; }

/* -------------------------- TESTIMONIOS -------------------------- */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.quote {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t);
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .6;
  color: var(--bronze);
  opacity: .5;
  margin-bottom: 1rem;
}
.quote p {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
}
.quote__author {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .1rem;
}
.quote__author strong { font-size: .92rem; color: var(--ink); }
.quote__author span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------- CONTACTO --------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact__list { margin-top: 2.4rem; display: grid; gap: 1.1rem; }
.contact__list li { display: flex; align-items: flex-start; gap: .9rem; font-size: .95rem; }
.contact__ico {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--bronze);
}

/* El botón de WhatsApp va después de la lista y no traía separación: quedaba
   pegado al círculo del último dato, como si fuera un renglón más de la lista.

   1.8rem: más que el 1.1 que separa los datos entre sí —para que se lea como
   otra cosa— y menos que el 2.4 con que la lista se despega del texto de
   arriba. Va con el selector de hermano y no sobre `.btn--wa` a secas porque
   ese botón también está en la ficha de la propiedad, donde ya tiene su lugar. */
.contact__list + .btn--wa { margin-top: 1.8rem; }
.contact__list a { transition: color var(--t); }
.contact__list a:hover { color: var(--bronze); }

.contact__map {
  position: relative;
  margin-top: 2.4rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.contact__map img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.05); }
.contact__pin {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -100%;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bronze);
  box-shadow: 0 8px 22px rgba(20, 18, 15, .35);
}

/* formulario */
.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1.1rem;
}
.form__eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-700);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  font-size: .93rem;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .18);
}
.field input::placeholder,
.field textarea::placeholder { color: #a49b8c; }
.field.has-error input,
.field.has-error textarea { border-color: #c0392b; }
.error { font-size: .74rem; color: #c0392b; min-height: 0; }

.form__submit { width: 100%; }
.form__note { font-size: .78rem; color: var(--muted); text-align: center; }

/* La línea de reCAPTCHA. Google deja esconder su sello sólo si se muestra esta
   atribución, así que no se puede sacar. Va más chica que `.form__note`: es
   letra legal, no algo que el visitante tenga que leer. */
.form__legal {
  font-size: .68rem;
  line-height: 1.45;
  color: var(--muted);
  opacity: .75;
}
.form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form__legal a:hover { color: var(--ink); }

/* El sello flotante de v3. Se esconde porque tapa la esquina donde está el
   botón del chatbot; la atribución de arriba es lo que Google pide a cambio. */
.grecaptcha-badge { visibility: hidden; }

/* ----------------------------- FOOTER ---------------------------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.logo--footer { color: #fff; margin-bottom: 1.2rem; }
.footer__brand p { max-width: 38ch; }
.social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-light);
  color: rgba(255, 255, 255, .72);
  transition: all var(--t);
}
.social a:hover { background: var(--bronze); border-color: var(--bronze); color: var(--ink); transform: translateY(-3px); }

.footer h4 {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
  margin-bottom: 1.1rem;
}
.footer__nav ul,
.footer__contact ul { display: grid; gap: .6rem; }
.footer__nav a,
.footer__contact a { transition: color var(--t); }
.footer__nav a:hover,
.footer__contact a:hover { color: var(--bronze); }

.footer__bottom {
  border-top: 1px solid var(--line-light);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
}
.footer__bottom a { color: var(--bronze); }

/* -------------------------- WHATSAPP FLOAT ----------------------- */

/* Apagado a pedido: cada propiedad ya tiene su botón de WhatsApp y el
   formulario de contacto también, así que el flotante duplicaba la vía.
   Para volver a mostrarlo alcanza con borrar esta regla; el resto del
   bloque y el marcado de las 17 páginas quedan intactos. */
.wa { display: none !important; }

.wa {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 90;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .38);
  transition: transform var(--t), box-shadow var(--t);
}
.wa:hover { transform: scale(1.08) translateY(-2px); }
.wa::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid var(--wa);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* =========================================================
   PÁGINA INTERNA — LISTADO DE PROPIEDADES
   ========================================================= */

/* header siempre sólido en páginas internas */
.header--solid {
  background: rgba(250, 248, 244, .92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.header--solid .logo,
.header--solid .nav__link { color: var(--ink); }
.header--solid .nav__link.is-active { color: var(--bronze); }
.header--solid .burger span { background: var(--ink); }

.page-inner { padding-top: 76px; }

/* encabezado de página */
.pagehead {
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.crumbs a { transition: color var(--t); }
.crumbs a:hover { color: var(--bronze); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 500; }

.pagehead__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.pagehead__sub { margin-top: 1rem; max-width: 62ch; color: var(--muted); }

/* buscador del listado */
.listing { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(4rem, 8vw, 6rem); }

.lsearch {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lsearch__field { background: var(--white); padding: .85rem 1.15rem; display: grid; gap: .25rem; }
.lsearch__field label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.lsearch__field input,
.lsearch__field select {
  border: 0;
  background: transparent;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
}
.lsearch__field input:focus,
.lsearch__field select:focus { outline: none; }
.lsearch__field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d665a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: 15px;
  padding-right: 1.4rem;
}
.lsearch__clear {
  background: var(--white);
  padding-inline: 1.6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  transition: background var(--t), color var(--t);
}
.lsearch__clear:hover { background: var(--ink); color: var(--cream); }

/* chips de filtro */
.lchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.6rem;
}
.lchips__sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin-inline: .3rem;
}
.lchip {
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  transition: all var(--t);
}
.lchip:hover { border-color: var(--ink); color: var(--ink); }
.lchip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* barra de resultados */
.lbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.8rem 0 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.lbar__count { font-size: .92rem; color: var(--muted); }
.lbar__count strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.lbar__tools { display: flex; align-items: center; gap: 1.2rem; }
.lbar__sort { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--muted); }
.lbar__sort select {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem 2rem .45rem .9rem;
  background: var(--white);
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d665a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 14px;
}

.lview { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lview__btn {
  display: grid;
  place-items: center;
  width: 38px; height: 34px;
  color: var(--muted);
  background: var(--white);
  transition: background var(--t), color var(--t);
}
.lview__btn.is-active { background: var(--ink); color: var(--cream); }

/* vista en lista */
.props__grid.is-list { grid-template-columns: 1fr; }
.props__grid.is-list .card { flex-direction: row; }
.props__grid.is-list .card__media { flex: 0 0 clamp(200px, 32%, 340px); aspect-ratio: auto; }
.props__grid.is-list .card__body { padding: 1.5rem 1.8rem; }
.props__grid.is-list .card__title { font-size: 1.3rem; }
.props__grid.is-list .specs { margin-top: 1.2rem; }

.lempty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
}
.lempty a { color: var(--ink); border-bottom: 1px solid var(--bronze); }

/* La etiqueta de alquiler es verde en casi todas las paletas: `--forest` es el
   color de la categoría. En Bosque el acento TAMBIÉN es verde, así que ahí la
   etiqueta dejaría de leerse como una categoría y parecería otra pieza de la
   marca; esa paleta define `--rent` aparte. Las demás no lo declaran y caen al
   `--forest` de siempre, sin tocar nada.

   No se cambió `--forest` directamente porque ese token hace dos cosas: el
   color de la categoría y el del cartel de "consulta enviada" (`.form__ok`),
   donde el verde significa "salió bien" y no debe moverse. */
.tag--rent { background: var(--rent, var(--forest)); }

/* paginado */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.pager__num,
.pager__btn {
  display: grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  transition: all var(--t);
}
.pager__num:hover:not(.is-active),
.pager__btn:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
.pager__num.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pager__btn:disabled { opacity: .35; cursor: not-allowed; }

/* CTA final del listado */
.listcta { background: var(--ink); color: rgba(255, 255, 255, .72); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.listcta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.listcta__inner > div { max-width: 56ch; }
.listcta h2 { margin-bottom: .8rem; }

@media (max-width: 900px) {
  .lsearch { grid-template-columns: 1fr 1fr; }
  .lsearch__clear { grid-column: 1 / -1; padding-block: .9rem; }
  .props__grid.is-list .card { flex-direction: column; }
  .props__grid.is-list .card__media { flex: none; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .lsearch { grid-template-columns: 1fr; }
  .lbar { flex-direction: column; align-items: flex-start; }
  .lbar__tools { width: 100%; justify-content: space-between; }
  .lchips__sep { display: none; }
}

/* =========================================================
   FICHA DE PROPIEDAD
   ========================================================= */

.crumbs--detail { padding-block: 1.6rem .2rem; }
.crumbs--detail span[aria-current] {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------- GALERÍA --------------------------- */
.gallery { padding-bottom: clamp(2rem, 4vw, 3rem); }
.gallery__grid {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  height: clamp(320px, 52vh, 520px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery__main { grid-row: span 2; }
.gallery__main,
.gallery__thumb {
  position: relative;
  overflow: hidden;
  background: var(--cream-3);
  cursor: zoom-in;
}
.gallery__main img,
.gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.22, .61, .36, 1), filter var(--t);
}
.gallery__main:hover img,
.gallery__thumb:hover img { transform: scale(1.04); }
.gallery__thumb.is-extra { display: none; }

.gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: rgba(15, 13, 11, .55);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  backdrop-filter: blur(2px);
  transition: background var(--t);
}
.gallery__thumb:hover .gallery__more { background: rgba(15, 13, 11, .68); }

.gallery__counter {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(15, 13, 11, .72);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  pointer-events: none;
}

/* ----------------------------- DETALLE --------------------------- */
.detail { padding-bottom: clamp(4rem, 8vw, 6rem); }
.detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.detail__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.2rem;
}
.tag--static { position: static; }
.ref {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: .3rem;
}
.share {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  transition: all var(--t);
}
.share:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.share.is-done { background: var(--forest); border-color: var(--forest); color: #fff; }

.detail__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}
.detail__address {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .95rem;
  color: var(--muted);
}
.detail__address svg { flex: none; color: var(--bronze); }

.detail__price {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: 1.2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}

.detail__h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--ink);
  margin: 2.6rem 0 1.2rem;
  letter-spacing: -.01em;
}

/* características destacadas */
.feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feats li {
  background: var(--white);
  padding: 1.3rem 1rem;
  text-align: center;
}
.feats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.feats span {
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ficha técnica */
.datasheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
  margin-top: 1.6rem;
}
.datasheet > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.datasheet dt { color: var(--muted); }
.datasheet dd { font-weight: 600; color: var(--ink); }

.detail__text p { margin-bottom: 1rem; }
.detail__text p:last-child { margin-bottom: 0; }
.detail__note { font-size: .88rem; color: var(--muted); margin-top: -.5rem; margin-bottom: 1.2rem; }

/* amenities */
.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .55rem 1.5rem;
}
.amenities li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .92rem;
  color: var(--ink-700);
}
.amenities li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 14px; height: 8px;
  border-left: 1.8px solid var(--bronze);
  border-bottom: 1.8px solid var(--bronze);
  transform: rotate(-45deg);
}

.detail__map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 8;
}
.detail__map img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.05); }

/* --------------------------- SIDEBAR ----------------------------- */
.detail__aside { position: sticky; top: 100px; }

.askbox {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--shadow-md);
}
.askbox__price {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
  margin: .5rem 0 1.4rem;
}
.askbox__price small {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.askbox form { display: grid; gap: .9rem; }
.askbox .btn { width: 100%; }
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); border-color: var(--ink); }

.agent {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.agent__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bronze);
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.agent strong { display: block; font-size: .92rem; color: var(--ink); }
.agent span { font-size: .78rem; color: var(--muted); }

/* ------------------------ BARRA FIJA MOBILE ---------------------- */
.stickybar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.1rem;
  background: rgba(250, 248, 244, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.stickybar__price {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.stickybar__ref { font-size: .72rem; color: var(--muted); }

/* ---------------------------- LIGHTBOX --------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 9, 8, .95);
  animation: lbIn 240ms ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  display: grid;
  gap: 1rem;
  justify-items: center;
  min-width: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__stage figcaption {
  font-size: .84rem;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .04em;
}

.lightbox__nav,
.lightbox__close {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.lightbox__nav:hover,
.lightbox__close:hover { background: rgba(255, 255, 255, .14); transform: scale(1.06); }
.lightbox__close { position: absolute; top: 1.2rem; right: 1.2rem; }

@media (max-width: 1024px) {
  .detail__grid { grid-template-columns: 1fr; }
  .detail__aside { position: static; }
}

@media (max-width: 780px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .gallery__main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .gallery__thumb { aspect-ratio: 4 / 3; }

  .feats { grid-template-columns: repeat(2, 1fr); }
  .datasheet { grid-template-columns: 1fr; gap: 0; }
  .share { margin-left: 0; }

  .stickybar { display: flex; }
  .wa { bottom: 5.4rem; }
  body { padding-bottom: 4.5rem; }

  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__stage { grid-row: 1; }
  /* Las dos flechas comparten la celda de abajo y se separan con justify-self.
     Sin fijarles la columna, la segunda se auto-ubica en una columna implícita
     de 46px que le come el ancho a la foto: en un teléfono de 390px la foto
     ampliada quedaba en 292px, más chica que la de la propia ficha (346px), o
     sea que el visor la achicaba en vez de agrandarla. Con la columna fija son
     354px. */
  .lightbox__nav { position: static; grid-column: 1; }
  .lightbox__nav--prev { justify-self: start; grid-row: 2; }
  .lightbox__nav--next { justify-self: end; grid-row: 2; }
}

/* =========================================================
   HERO CON SLIDER (index-slider.html)
   ========================================================= */

.hslider { display: block; }
.hslider__track { position: absolute; inset: 0; }

.hslide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-block: 8rem 9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1), visibility 900ms;
}
.hslide[hidden] { display: flex; }          /* el atributo lo maneja el JS por accesibilidad */
.hslide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* la imagen de cada slide sólo hace zoom mientras está activa */
.hslide .hero__media img { animation: none; transform: scale(1.06); transition: transform 7s linear; }
.hslide.is-active .hero__media img { transform: scale(1); }

/* entrada escalonada del texto */
.hslide .eyebrow,
.hslide .hero__title,
.hslide .hero__text,
.hslide .hero__actions {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.hslide.is-active .eyebrow       { opacity: 1; transform: none; transition-delay: 120ms; }
.hslide.is-active .hero__title   { opacity: 1; transform: none; transition-delay: 220ms; }
.hslide.is-active .hero__text    { opacity: 1; transform: none; transition-delay: 340ms; }
.hslide.is-active .hero__actions { opacity: 1; transform: none; transition-delay: 450ms; }

/* flechas */
.hslider__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
  background: rgba(15, 13, 11, .22);
  backdrop-filter: blur(6px);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.hslider__arrow:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.hslider__arrow--prev { left: clamp(.6rem, 2vw, 1.6rem); }
.hslider__arrow--next { right: clamp(.6rem, 2vw, 1.6rem); }
.hslider__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.hslider__arrow--next:hover { transform: translateY(-50%) translateX(3px); }

/* barra inferior: sello + controles */
.hslider__bottom {
  position: absolute;
  left: 50%; bottom: 2.2rem;
  translate: -50% 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.hslider__bottom .hero__seal { margin-top: 0; }

.hslider__controls { display: flex; align-items: center; gap: 1.1rem; }

.hslider__play {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  transition: background var(--t), border-color var(--t);
}
.hslider__play:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.hslider__ico-play { display: none; }
.hslider__play[aria-pressed="false"] .hslider__ico-pause { display: none; }
.hslider__play[aria-pressed="false"] .hslider__ico-play { display: block; }

.hslider__dots { display: flex; align-items: center; gap: .5rem; }
.hsdot {
  --w: 26px;
  width: var(--w);
  height: 20px;
  display: grid;
  align-items: center;
  transition: width var(--t);
}
.hsdot.is-active { --w: 58px; }
.hsdot span {
  display: block;
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .34);
  overflow: hidden;
  transition: background var(--t);
}
.hsdot:hover span { background: rgba(255, 255, 255, .6); }
.hsdot.is-active span { background: rgba(255, 255, 255, .3); }
.hsdot.is-active span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
  animation: hsProgress var(--hs-duration, 6500ms) linear forwards;
}
.hslider.is-paused .hsdot.is-active span::after { animation-play-state: paused; }
@keyframes hsProgress { to { transform: scaleX(1); } }

.hslider__count {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .68);
  font-variant-numeric: tabular-nums;
}
.hslider__count i { font-style: normal; opacity: .45; margin-inline: .1rem; }

/* la fila de controles del carrusel ocupa sólo la mitad derecha, así que
   la flecha puede subir a la misma altura sin pisarla */
.hslider .hero__scroll { bottom: 3.4rem; z-index: 4; }

@media (max-width: 900px) {
  .hslider__arrow { display: none; }
  .hslider__bottom {
    width: calc(100% - 2 * var(--gutter));
    bottom: 1.6rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    /* deja libre la esquina donde vive el botón de WhatsApp */
    padding-right: 4.6rem;
  }
  .hslide { padding-block: 7rem 11rem; }
  .hslider .hero__scroll { display: none; }

  /* Los slides van en posición absoluta, así que el hero no tomaba nada de
     su alto: se quedaba en 92svh y el contenido, centrado dentro, se salía
     por los dos extremos. En el teléfono eso metía el copete debajo del
     encabezado y apoyaba los botones sobre la fila de controles.
     Apilados en una sola celda de grilla siguen superpuestos igual, pero
     ahora el hero mide lo que mide el slide más alto y nada se encima. */
  .hslider__track { position: static; display: grid; }
  .hslide { position: static; grid-area: 1 / 1; }
  /* al entrar el slide en el flujo, su relleno y el del hero se sumaban y
     la portada pasaba de 714 a 999 px. El relleno lo pone el slide. */
  .hero.hslider { padding-block: 0; }   /* doble clase: gana sobre .hero de más abajo */
  .hslide { padding-block: 7rem 10.2rem; }  /* abajo: deja libre la fila de controles */
}

@media (prefers-reduced-motion: reduce) {
  .hslide .hero__media img,
  .hslide.is-active .hero__media img { transform: none; }
  .hsdot.is-active span::after { animation: none; transform: scaleX(1); }
}

/* =========================================================
   HERO CON VIDEO DE FONDO (index-video.html)
   ========================================================= */

/* el video se funde por encima de la imagen de respaldo */
.herovideo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.herovideo__video.is-playing { opacity: 1; }

/* sin zoom en la imagen de respaldo: acá el movimiento lo pone el video */
.herovideo .hero__media { background: var(--ink); }
.herovideo .hero__media > img { animation: none; }

.herovideo__toggle {
  position: absolute;
  right: 6.4rem;          /* deja libre la esquina del botón de WhatsApp */
  bottom: 2.2rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
  background: rgba(15, 13, 11, .28);
  backdrop-filter: blur(6px);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.herovideo__toggle[hidden] { display: none; }
.herovideo__toggle:hover { background: rgba(255, 255, 255, .18); border-color: #fff; transform: scale(1.06); }
.herovideo__ico-play { display: none; }
.herovideo__toggle[aria-pressed="false"] .herovideo__ico-pause { display: none; }
.herovideo__toggle[aria-pressed="false"] .herovideo__ico-play { display: block; }

@media (max-width: 780px) {
  .herovideo__toggle { bottom: 1.6rem; right: 5.8rem; }
}

/* =========================================================
   HERO CON MAPA DE PROPIEDADES (index-map.html)
   ========================================================= */

/* Hero partido en dos: el texto tiene su propia columna sólida y el mapa
   ocupa la otra sin nada encima. Es la única variante donde el fondo es
   contenido navegable, así que no se le superpone tipografía. */
.heromap {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  align-items: stretch;
  /* el mapa arranca por debajo del header para que el nav tampoco
     quede apoyado encima */
  padding: 84px 0 0;
  background: var(--ink);
}

.heromap .hero__media {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
}
.heromap .hero__media > img { animation: none; }

/* la columna de texto: sólida, centrada verticalmente, sin panel flotante */
.heromap .hero__inner {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  width: 100%;
  margin: 0;
  align-self: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.6rem, 3.4vw, 3.4rem);
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.heromap .hero__title { font-size: clamp(2.1rem, 3.4vw, 3.5rem); }
.heromap .hero__text { margin-top: 1.2rem; font-size: 1rem; max-width: 42ch; }
.heromap .hero__actions { margin-top: 1.9rem; }
.heromap .hero__seal { margin-top: 2rem; }

.heromap__canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  background: #16130f;
}
.heromap__canvas.is-ready { opacity: 1; }

/* La foto de respaldo se saca en cuanto se sabe que el mapa se va a dibujar
   —la clase la pone el script, ver `heromap--sin-foto`—. Mientras cargan los
   mosaicos se ve el color de fondo del lienzo, que ya es el que corresponde a
   la combinación elegida, y el mapa entra encima con su fundido.

   Sin esta regla la foto quedaba a la vista unos segundos y después el mapa la
   tapaba: dos imágenes distintas una atrás de la otra. Si el mapa no se puede
   dibujar la clase no se pone y la foto se queda, que es su razón de ser. */
.heromap--sin-foto .hero__media > img { display: none; }

/* IMPORTANTE: el hero estiliza sus imágenes de fondo con
   `.hero__media img { animation: heroZoom }`, y esa regla alcanza también
   a los mosaicos del mapa. Una animación CSS pisa el `transform` inline
   con el que Leaflet ubica cada mosaico, así que todos terminan apilados
   en la esquina superior izquierda. Hay que neutralizarla acá. */
.heromap__canvas img {
  animation: none;
  width: auto;
  height: auto;
  object-fit: fill;
}

/* Los mosaicos de OSM son claros: invertirlos da un mapa oscuro y cálido
   acorde a la paleta, sin depender de un proveedor de estilo pago.

   La inmobiliaria elige entre oscuro y claro desde el panel; el filtro va
   acotado a `--oscuro` para que el claro sea el mosaico tal cual viene. Sin la
   clase (una portada guardada antes de que existiera la opción) se pinta
   oscuro, que es como venía. */
.heromap__canvas .leaflet-tile,
.heromap--oscuro .heromap__canvas .leaflet-tile {
  filter: grayscale(1) invert(1) brightness(.82) contrast(1.06) sepia(.3);
}

/* ------------------------- el mapa en claro ----------------------- */
/* El claro es el mismo tratamiento que el oscuro pero sin invertir: se le saca
   todo el color, se le sube el brillo y se le baja el contraste, y el sepia le
   devuelve el tono cálido de la paleta. Queda un mapa crema, no el mosaico de
   OSM tal cual: con sus verdes, azules y amarillos, la portada parecía otro
   sitio y los precios se perdían entre los colores.

   `--map-cream` es el tono al que quedan las tierras con ese filtro. Está
   escrito a mano y no sale de la paleta a propósito: el mapa se ve igual de
   cálido con cualquier paleta —el filtro no sabe nada de los tokens— así que
   la columna de "Todo crema" tiene que igualar ESTE color y no el crema de la
   paleta, que en Marino o Bosque es frío y se notaría el corte. */
.heromap--mapa-crema { --map-cream: #ece8e0; }

.heromap--mapa-crema .heromap__canvas .leaflet-tile {
  filter: grayscale(1) brightness(1.06) contrast(.9) sepia(.22);
}

/* El fondo del lienzo se ve mientras bajan los mosaicos: en claro tiene que
   ser claro, o la portada arranca con un rectángulo negro que después se
   aclara de golpe. */
.heromap--mapa-crema .heromap__canvas { background: var(--map-cream); }

/* ------------------------ el mapa a color ------------------------ */
/* Los mosaicos tal cual los sirve OpenStreetMap: verdes, ríos, rutas. No lleva
   filtro, y por eso hay que apagar el que la regla de arriba aplica a todo lo
   que no declare uno propio —está escrita así para que una portada guardada
   antes de que existieran las opciones siga saliendo oscura—.

   La columna de texto queda con `--ink`, que es el color de la combinación
   elegida: sobre un mapa colorido, un fondo neutro dejaría la portada sin nada
   de la marca.

   El lienzo se pinta del beige de las tierras de OSM mientras bajan los
   mosaicos, así el arranque no es un rectángulo oscuro que se aclara de golpe.
   Es el color del mapa, no de la paleta: cualquier otro se vería como un error
   de carga durante ese segundo. */
.heromap--colorido .heromap__canvas .leaflet-tile { filter: none; }
.heromap--colorido .heromap__canvas { background: #f2efe9; }

/* Los pines pasan a fondo oscuro: sobre un mapa claro, uno crema desaparece. */
.heromap--mapa-claro .mappin {
  background: var(--ink);
  color: var(--cream);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.heromap--mapa-claro .mappin::after { border-top-color: var(--ink); }
.heromap--mapa-claro .leaflet-marker-icon:hover .mappin,
.heromap--mapa-claro .mappin.is-active {
  background: var(--bronze);
  color: var(--ink);
}
.heromap--mapa-claro .leaflet-marker-icon:hover .mappin::after,
.heromap--mapa-claro .mappin.is-active::after { border-top-color: var(--bronze); }

/* Controles y atribución: los de arriba están pensados para fondo oscuro. */
.heromap--mapa-claro .heromap__canvas .leaflet-control-zoom a {
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  border-color: rgba(0, 0, 0, .12);
}
.heromap--mapa-claro .heromap__canvas .leaflet-control-zoom a:hover {
  background: var(--ink);
  color: var(--bronze);
}
.heromap--mapa-claro .heromap__canvas .leaflet-control-attribution {
  background: rgba(255, 255, 255, .72);
  color: rgba(28, 24, 20, .62);
}
.heromap--mapa-claro .heromap__canvas .leaflet-control-attribution a { color: rgba(28, 24, 20, .82); }

/* ---------------------- la portada entera en crema ---------------------- */
/* La columna de texto toma el MISMO crema al que queda el mapa, así la portada
   se lee como una sola pieza y no como dos mitades pegadas. Es la única
   combinación donde el hero deja de ser oscuro, así que hay que dar vuelta
   todo lo que estaba escrito para fondo oscuro: los textos, los dos botones,
   los controles del mapa y —desde el blade— la cabecera, que va encima.

   Nada de esto toca la paleta: el resto del sitio sigue igual. */
.heromap--crema { background: var(--map-cream); }

.heromap--crema .eyebrow--light { color: var(--muted); }
.heromap--crema .hero__title { color: var(--ink); }
.heromap--crema .hero__text { color: var(--ink-700); }
.heromap--crema .hero__seal { color: var(--muted); }
.heromap--crema .hero__scroll { color: rgba(20, 18, 15, .55); }

/* El botón principal era blanco sobre oscuro; acá se da vuelta. El secundario
   pasa de contorno blanco a contorno tinta. */
.heromap--crema .btn--light { --btn-bg: var(--ink); --btn-fg: var(--cream); }
.heromap--crema .btn--ghost {
  --btn-fg: var(--ink);
  border-color: rgba(20, 18, 15, .28);
}
.heromap--crema .btn--ghost:hover {
  --btn-bg: rgba(20, 18, 15, .06);
  border-color: var(--ink);
}

.heromap--crema .heromap__tools { border-top-color: var(--line); }
.heromap--crema .heromap__count { color: var(--ink-700); }
.heromap--crema .heromap__count strong { color: var(--ink); }
.heromap--crema .heromap__unlock {
  border-color: rgba(20, 18, 15, .22);
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
}
.heromap--crema .heromap__unlock:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* --------- cabecera con texto oscuro sobre una portada clara --------- */
/* Distinta de `header--solid`: aquélla además pinta un fondo, que acá se vería
   como una banda más clara sobre el crema. Ésta sólo da vuelta los colores y
   deja la cabecera transparente, como en el resto de las portadas.
   La pone el blade de la home; el blanqueo del logo la contempla en crm.css. */
.header--ink .logo,
.header--ink .nav__link { color: var(--ink); }
.header--ink .nav__link.is-active { color: var(--bronze); }
.header--ink .burger span { background: var(--ink); }
.header--ink .nav__cta { --btn-bg: var(--ink); --btn-fg: var(--cream); }

/* El mapa no lleva degradado encima: sólo una costura suave contra la
   columna de texto para que el corte no quede duro. z-index 400 lo deja
   sobre los mosaicos (panel 200) y bajo los pines (panel 600). */
.heromap .hero__scrim {
  z-index: 400;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .35) 5%, rgba(20, 18, 15, 0) 13%);
}

/* Las dos costuras de abajo tienen la MISMA especificidad que la de arriba,
   así que van después a propósito: puestas antes no se aplicaban y el mapa
   claro seguía con la sombra pensada para el oscuro. */

/* Sobre el mapa claro el degradado oscuro se leía como una mancha sucia y no
   como un empalme: se acorta y se aclara. */
.heromap--claro .hero__scrim {
  background: linear-gradient(90deg, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .28) 3%, rgba(20, 18, 15, 0) 8%);
}

/* En "Todo crema" los dos lados son del mismo color, así que la sombra no
   separa nada: le da profundidad al borde del mapa, como si estuviera apoyado
   sobre la columna. Va mucho más suave que en las otras dos —arranca en .30 y
   no en .92— porque sobre crema una sombra fuerte se lee como suciedad. */
.heromap--crema .hero__scrim {
  background: linear-gradient(90deg, rgba(20, 18, 15, .30) 0%, rgba(20, 18, 15, .12) 3%, rgba(20, 18, 15, 0) 10%);
}

/* El mapa a color es claro como el crema, así que le sirve la costura corta:
   la larga del oscuro le tapa el primer barrio con una sombra. */
.heromap--colorido .hero__scrim {
  background: linear-gradient(90deg, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .28) 3%, rgba(20, 18, 15, 0) 8%);
}

/* ---------------------------- los pines --------------------------- */
.mappin {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .38rem .7rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .5);
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1), background 200ms, color 200ms;
}
.mappin::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  translate: -50% -1px;
  border: 5px solid transparent;
  border-top-color: var(--cream);
  transition: border-top-color 200ms;
}
.leaflet-marker-icon:hover .mappin,
.mappin.is-active {
  background: var(--bronze);
  color: var(--ink);
  transform: translateY(-3px) scale(1.06);
}
.leaflet-marker-icon:hover .mappin::after,
.mappin.is-active::after { border-top-color: var(--bronze); }

/* controles propios de Leaflet, adaptados a la marca */
.heromap__canvas .leaflet-control-zoom a {
  background: rgba(15, 13, 11, .78);
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}
.heromap__canvas .leaflet-control-zoom a:hover { background: var(--ink); color: var(--bronze); }
.heromap__canvas .leaflet-control-attribution {
  background: rgba(15, 13, 11, .6);
  color: rgba(255, 255, 255, .55);
  font-size: .64rem;
  /* la tarjeta del buscador se monta sobre el borde inferior del hero:
     subimos la atribución para que no quede tapada (mostrarla es
     obligatorio mientras se usen los mosaicos de OpenStreetMap) */
  margin-bottom: 3.4rem;
}
.heromap__canvas .leaflet-control-attribution a { color: rgba(255, 255, 255, .8); }

/* --------------------------- ficha del pin ------------------------ */
/* única pieza que se apoya sobre el mapa, y sólo al hacer clic en un pin */
.mapcard {
  position: absolute;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(5.6rem, 9vh, 6.6rem);
  z-index: 6;
  width: min(330px, calc(100vw - 2.5rem));
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: mapcardIn 320ms cubic-bezier(.22, .61, .36, 1);
}
.mapcard[hidden] { display: none; }
@keyframes mapcardIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.mapcard > img { width: 100%; height: 132px; object-fit: cover; }
.mapcard__body { padding: 1rem 1.1rem 1.15rem; }
.mapcard__zone {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.mapcard__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-top: .35rem;
}
.mapcard__specs { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.mapcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.mapcard__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.mapcard__close {
  position: absolute;
  top: .6rem; right: .6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  transition: background var(--t);
}
.mapcard__close:hover { background: #fff; transform: scale(1.08); }

/* ---------------------- contador + desbloqueo --------------------- */
.heromap__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.2rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.heromap__count {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
}
.heromap__count[hidden] { display: none; }
.heromap__count strong { color: #fff; font-weight: 600; }
.heromap__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(176, 141, 87, .6);
  animation: mapPulse 2.4s ease-out infinite;
}
@keyframes mapPulse {
  0%   { box-shadow: 0 0 0 0 rgba(176, 141, 87, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(176, 141, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0); }
}

.heromap__unlock {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(15, 13, 11, .3);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: background var(--t), border-color var(--t);
}
.heromap__unlock[hidden] { display: none; }
.heromap__unlock:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.heromap__unlock[aria-pressed="true"] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

/* la flecha de bajar quedaría sobre el mapa: en esta variante se omite */
.heromap .hero__scroll { display: none; }

/* En pantallas chicas el JS no inicializa el mapa (ver script.js): queda la
   imagen de respaldo, igual que en index.html, y el hero se comporta igual. */
/* en pantallas chicas las dos columnas se apilan: primero el texto,
   después el mapa como bloque propio. Tampoco acá hay nada encima. */
@media (max-width: 900px) {
  .heromap {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 0;
  }
  .heromap .hero__inner {
    grid-column: 1;
    grid-row: 1;
    padding: 6.4rem var(--gutter) 2rem;
  }
  .heromap .hero__text { margin-top: 1rem; }
  .heromap .hero__actions { margin-top: 1.5rem; }
  /* deja libre la esquina donde flota el botón de WhatsApp */
  .heromap .hero__seal { margin-top: 1.5rem; padding-right: 4.6rem; }
  .heromap__tools { margin-top: 1.5rem; padding-top: 1.2rem; }
  .heromap .hero__media {
    grid-column: 1;
    grid-row: 2;
    height: clamp(320px, 46vh, 420px);
  }
  .heromap .hero__title { font-size: clamp(2.6rem, 9vw, 3.6rem); }
  .heromap .hero__text { max-width: none; }
  /* Apilado, la costura pasa a ser horizontal: el texto queda arriba y el mapa
     abajo. Las dos variantes claras la repiten acá porque esta regla está en
     un media query y le gana a las de arriba, que tienen la misma
     especificidad. */
  .heromap .hero__scrim {
    background: linear-gradient(180deg, rgba(20, 18, 15, .9) 0%, rgba(20, 18, 15, 0) 12%);
  }
  .heromap--claro .hero__scrim {
    background: linear-gradient(180deg, rgba(20, 18, 15, .9) 0%, rgba(20, 18, 15, 0) 7%);
  }
  .heromap--crema .hero__scrim {
    background: linear-gradient(180deg, rgba(20, 18, 15, .30) 0%, rgba(20, 18, 15, .12) 2%, rgba(20, 18, 15, 0) 7%);
  }
  .heromap--colorido .hero__scrim {
    background: linear-gradient(180deg, rgba(20, 18, 15, .9) 0%, rgba(20, 18, 15, 0) 7%);
  }
  .mapcard {
    right: 50%;
    translate: 50% 0;
    bottom: 1.2rem;
  }
}

/* =========================================================
   HERO CON VISOR DE PROPIEDADES (index-viewer.html)
   ========================================================= */

.heroviewer { padding-block: 7rem 12rem; }

/* dos capas superpuestas que se funden al cambiar de propiedad.
   OJO: hay que anular `animation` porque `.hero__media img` aplica
   heroZoom, y una animación CSS pisa el transform de la transición. */
.viewer__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 800ms ease, transform 9s linear;
}
.viewer__layer.is-active { opacity: 1; transform: scale(1); }

.heroviewer .hero__scrim {
  background:
    linear-gradient(100deg, rgba(15, 13, 11, .9) 0%, rgba(15, 13, 11, .72) 38%, rgba(15, 13, 11, .38) 66%, rgba(15, 13, 11, .3) 100%),
    linear-gradient(to top, rgba(15, 13, 11, .82) 0%, transparent 46%);
}

.heroviewer__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
}
.heroviewer__copy { max-width: 40rem; }
.heroviewer .hero__title { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.heroviewer .hero__text { max-width: 44ch; }

/* ------------------------ ficha de la propiedad ------------------- */
.vcard {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: rgba(14, 12, 10, .68);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: var(--shadow-lg);
  transition: opacity 220ms ease;
}
.vcard.is-swapping { opacity: 0; }

.vcard__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.vcard__ref {
  margin-left: auto;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.vcard__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: #fff;
  margin-top: .95rem;
}
.vcard__place {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  font-size: .86rem;
  color: rgba(255, 255, 255, .7);
}
.vcard__place svg { flex: none; color: var(--bronze); }

.vcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .82rem;
  color: rgba(255, 255, 255, .78);
}
.vcard__specs li { position: relative; padding-left: .9rem; }
.vcard__specs li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--bronze);
}

/* Los alquileres traen un precio largo —"$ 890.000 / mes"— que junto al
   botón no entra en los 317 px del pie. Antes se partían los dos: el
   precio en dos renglones y el botón mostrando "Ver" arriba y "ficha"
   abajo. Ahora la fila se parte entera: el botón baja completo. */
.vcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}
.vcard__foot .btn {
  flex: none;
  white-space: nowrap;
  margin-left: auto;        /* si baja de renglón, queda igual a la derecha */
}
.vcard__price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #fff;
  white-space: nowrap;      /* que no se corte "/ mes" */
}

/* ---------------------------- riel inferior ----------------------- */
.viewer__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  /* El separado de abajo tiene que superar lo que la tarjeta del buscador
     se monta sobre el hero: con 1.6rem las miniaturas quedaban tapadas por
     su mitad inferior. El degradado sigue llegando al piso. */
  padding-block: 1.4rem 4.2rem;
  background: linear-gradient(to top, rgba(12, 10, 9, .9), rgba(12, 10, 9, 0));
}
.viewer__barInner { display: flex; align-items: center; gap: 1rem; }

.viewer__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  background: rgba(15, 13, 11, .3);
  backdrop-filter: blur(6px);
  transition: background var(--t), border-color var(--t);
}
.viewer__arrow:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }

.viewer__rail {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: .2rem;
}
.viewer__rail::-webkit-scrollbar { display: none; }

.vthumb {
  flex: none;
  width: 92px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  opacity: .55;
  outline: 1px solid rgba(255, 255, 255, .18);
  outline-offset: -1px;
  transition: opacity var(--t), outline-color var(--t), transform var(--t);
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb:hover { opacity: .85; transform: translateY(-2px); }
.vthumb.is-active {
  opacity: 1;
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}

/* botón de reproducción automática */
.viewer__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  background: rgba(15, 13, 11, .3);
  backdrop-filter: blur(6px);
  transition: background var(--t), border-color var(--t);
}
.viewer__play:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.viewer__ico-play { display: none; }
.viewer__play[aria-pressed="false"] .viewer__ico-pause { display: none; }
.viewer__play[aria-pressed="false"] .viewer__ico-play { display: block; }

/* barra de avance sobre la miniatura activa, sólo con el automático andando */
.vthumb.is-active::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--bronze);
  transform-origin: left;
  transform: scaleX(0);
}
.heroviewer.is-auto .vthumb.is-active::after {
  animation: vProgress var(--v-duration, 7000ms) linear forwards;
}
.heroviewer.is-auto.is-paused .vthumb.is-active::after { animation-play-state: paused; }
@keyframes vProgress { to { transform: scaleX(1); } }

.viewer__count {
  flex: none;
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}
.viewer__count i { font-style: normal; opacity: .45; }

.heroviewer .hero__scroll { display: none; }

@media (max-width: 1024px) {
  .heroviewer__inner { grid-template-columns: 1fr; align-items: start; }
  .vcard { max-width: 440px; }
}

@media (max-width: 780px) {
  /* En mobile el contenido supera el alto de pantalla, así que el riel deja
     de estar posicionado en absoluto y pasa a fluir después de la ficha.
     Si no, se superponen ficha, contador y miniaturas. */
  .heroviewer {
    flex-direction: column;
    justify-content: flex-start;
    padding-block: 6.5rem 0;
  }
  .heroviewer__inner { flex: 1; align-content: center; }
  .heroviewer .hero__text { display: none; }   /* la ficha ya aporta el detalle */
  .heroviewer .hero__seal { margin-top: 1.5rem; padding-right: 4.6rem; }

  .viewer__bar {
    position: static;
    width: 100%;
    margin-top: 1.6rem;
    padding-block: 1rem 1.3rem;
    background: rgba(12, 10, 9, .86);
  }
  .viewer__barInner { flex-wrap: wrap; gap: .7rem; }
  .viewer__arrow { display: none; }
  .viewer__rail { order: 2; width: 100%; }
  /* el control de pausa queda visible: es el modo de detener el automático.
     Va con el contador a la izquierda para dejar libre la esquina donde
     flota el botón de WhatsApp. */
  .viewer__play { order: 1; }
  .viewer__count { order: 1; margin-left: .3rem; margin-right: auto; }
  .vthumb { width: 74px; }

  /* precio y botón apilados: entran holgados y el botón queda utilizable
     aunque el flotante de WhatsApp se apoye sobre su borde derecho */
  .vcard__foot { flex-direction: column; align-items: stretch; gap: .9rem; }
  .vcard__foot .btn { width: 100%; }
}

/* =========================================================
   HERO CON BUSCADOR PROTAGONISTA (index-buscador.html)
   ========================================================= */

/* Hero más bajo que en el resto: la idea es que las propiedades
   destacadas asomen enseguida e inviten a seguir bajando. */
.herosearch {
  min-height: min(78svh, 760px);
  padding-block: 8.5rem 5.5rem;
  background: var(--ink);
  text-align: center;
}

/* mosaico de fondo: textura, no protagonista */
.herosearch__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
}
.herosearch__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.5) contrast(1.05);
  animation: none;
}
.herosearch__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* es sólo un velo decorativo: no debe atrapar clics.
     Sin esto tapaba la flecha de bajar. */
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(15, 13, 11, .82) 0%, rgba(15, 13, 11, .93) 55%, rgba(15, 13, 11, .98) 100%);
}

.herosearch__inner { position: relative; z-index: 2; }
.herosearch .eyebrow { justify-content: center; }

.herosearch__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance;
}
.herosearch__title em { font-style: italic; font-weight: 400; }

.herosearch__text {
  margin: 1.3rem auto 0;
  max-width: 56ch;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .74);
}

/* ------------------------- el buscador --------------------------- */
.bigsearch {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1px;
  max-width: 940px;
  margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  background: var(--line);
  border-radius: 999px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
  text-align: left;
}
.bigsearch__field {
  background: var(--white);
  padding: .95rem 1.5rem;
  display: grid;
  gap: .2rem;
  transition: background var(--t);
}
.bigsearch__field:hover { background: var(--cream); }
.bigsearch__field label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bigsearch__field select {
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d665a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: 15px;
  padding-right: 1.5rem;
}
.bigsearch__field select:focus { outline: none; }

/* El botón va con el acento y no con la tinta: esta portada apoya el buscador
   sobre una foto oscurecida, y un botón casi negro contra ese fondo se perdía
   —la barra parecía terminar en el último campo—. El acento es el único color
   de la paleta que se despega tanto del blanco de los campos como del fondo.

   El texto sale de `--on-bronze`, que calcula el backend (AlturaTheme::
   readableOn): hay inmobiliarias con acentos claros, donde el blanco fijo
   desaparecería. */
.bigsearch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding-inline: clamp(1.6rem, 3vw, 2.6rem);
  /* Va el acento OSCURO y no el de base: con el acento claro, el texto blanco
     que devuelve `--on-bronze` queda en 3,4:1 en cuatro de las seis paletas, y
     acá el texto es chico. Con el oscuro ninguna baja de 4,5:1. Al pasar el
     mouse se aclara al acento de base, que es el cambio de estado. */
  background: var(--bronze-dk);
  color: var(--on-bronze, #fff);
  /* Un punto más grande y en negrita que el resto de los botones: sobre el
     acento, el texto necesita cuerpo para leerse de un vistazo. */
  font-size: 1rem;
  font-weight: 700;
  transition: background var(--t);
}
.bigsearch__btn:hover { background: var(--bronze); }

/* --------------------- búsquedas frecuentes ---------------------- */
.quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
  margin-top: 1.6rem;
}
.quick__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.quick__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.quick__list a {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .82rem;
  color: rgba(255, 255, 255, .85);
  transition: all var(--t);
}
.quick__list a:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  transform: translateY(-2px);
}

/* --------------------------- respaldo ---------------------------- */
.herosearch__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}
.herosearch__stats strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-right: .2rem;
}
.herosearch__stats i {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

/* esta portada no tiene la tarjeta del buscador montada abajo, así que la
   flecha vuelve al piso: más arriba se apoyaría sobre la línea de datos */
.herosearch .hero__scroll { color: rgba(255, 255, 255, .45); bottom: 1.8rem; }

/* En esta versión el botón "Buscar" es la acción principal y el flotante de
   WhatsApp se le apoya encima en pantallas chicas. Lo ocultamos mientras el
   hero está a la vista y lo mostramos al pasarlo (lo activa script.js). */
.wa.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(.8);
  pointer-events: none;
}

@media (max-width: 900px) {
  .herosearch__bg { grid-template-columns: repeat(3, 1fr); }
  .bigsearch {
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-lg);
  }
  .bigsearch__btn { grid-column: 1 / -1; padding-block: 1.1rem; }
}

@media (max-width: 560px) {
  .herosearch { padding-block: 7.5rem 4.5rem; }
  .herosearch__bg { grid-template-columns: repeat(2, 1fr); }
  .bigsearch { grid-template-columns: 1fr; }
  .quick__label { width: 100%; }
  .herosearch .hero__scroll { display: none; }
}

/* =========================================================
   LISTADO CON MAPA SINCRONIZADO (propiedades-mapa.html)
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* la página ocupa exactamente la pantalla: cada mitad scrollea por su cuenta */
.page-split { padding-top: 0; overflow: hidden; }
.split {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100svh;
  padding-top: 76px;
}

/* ---------------------------- barra ------------------------------ */
.split__bar {
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.split__barInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  padding: .8rem clamp(1rem, 2.5vw, 1.6rem);
}
.split__bar .lchips { margin: 0; }
.split__bar .lchip { padding: .45rem .95rem; font-size: .8rem; }

.split__select select,
.split__live {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: .82rem;
  color: var(--ink);
}
.split__select select {
  padding: .45rem 2rem .45rem .9rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d665a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 14px;
}
.split__live {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  cursor: pointer;
  user-select: none;
}
.split__live input { accent-color: var(--ink); }
.split__liveShort { display: none; }

.split__count { margin-left: auto; font-size: .85rem; color: var(--muted); }
.split__count strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }

.split__alt {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  transition: all var(--t);
}
.split__alt:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------------------------- cuerpo ----------------------------- */
.split__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}

.split__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(.9rem, 2vw, 1.4rem);
  background: var(--cream-2);
}
.split__grid { display: grid; gap: .8rem; }

/* -------------------------- tarjeta compacta --------------------- */
.scard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.scard.is-hidden { display: none; }
.scard:hover,
.scard.is-active {
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(20, 18, 15, .07), 0 14px 30px rgba(20, 18, 15, .12);
}
.scard.is-active { outline: 2px solid var(--bronze); outline-offset: -2px; }

.scard__media { position: relative; overflow: hidden; background: var(--cream-3); }
.scard__media img { width: 100%; height: 100%; object-fit: cover; }
.scard__media .tag { top: .5rem; left: .5rem; }

.scard__body { padding: .9rem 1.1rem 1rem; display: flex; flex-direction: column; }
.scard__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.scard__place { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.scard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .8rem;
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--muted);
}
.scard__specs li { position: relative; padding-left: .8rem; }
.scard__specs li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--bronze);
}
.scard__foot {
  margin-top: auto;
  padding-top: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.scard__price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.scard__price small { font-family: var(--font-sans); font-size: .7rem; font-weight: 500; color: var(--muted); }
.scard__link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color var(--t), border-color var(--t);
}
.scard__link:hover { color: var(--bronze); border-color: var(--bronze); }

.split__empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); font-size: .92rem; }
.split__empty a { color: var(--ink); border-bottom: 1px solid var(--bronze); }

/* ----------------------------- mapa ------------------------------ */
.split__map { position: relative; background: var(--ink); }
#splitMap { position: absolute; inset: 0; }

/* misma precaución que en el hero con mapa: ninguna regla de imágenes
   del sitio debe alcanzar a los mosaicos, o se descolocan */
#splitMap img { animation: none; width: auto; height: auto; object-fit: fill; }
#splitMap .leaflet-tile { filter: grayscale(1) brightness(.94) contrast(1.02) sepia(.12); }

#splitMap .leaflet-control-zoom a {
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  border-color: var(--line);
}
#splitMap .leaflet-control-attribution { font-size: .64rem; }

/* pin resaltado cuando se pasa por su tarjeta */
.mappin.is-hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-3px) scale(1.08);
  z-index: 1000;
}
.mappin.is-hover::after { border-top-color: var(--ink); }

/* botones de cambio en celular */
.split__open,
.split__back {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  bottom: 1.4rem;
  z-index: 40;
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: .86rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(20, 18, 15, .35);
}
.split__back { position: absolute; bottom: 1.2rem; }

@media (max-width: 900px) {
  /* en celular no se parten: la lista ocupa todo y el mapa se superpone */
  .split__body { grid-template-columns: 1fr; }
  .split__map {
    position: fixed;
    inset: 76px 0 0 0;
    z-index: 30;
    display: none;
  }
  .split.is-map .split__map { display: block; }
  .split.is-map .split__list { visibility: hidden; }

  .split__open { display: inline-flex; }
  .split.is-map .split__open { display: none; }
  .split__back { display: inline-flex; }

  .split__count { margin-left: 0; }
  .split__alt { display: none; }
  .scard { grid-template-columns: 118px minmax(0, 1fr); }
  /* que la última tarjeta no quede debajo del botón flotante */
  .split__list { padding-bottom: 5.5rem; }
}

@media (max-width: 560px) {
  .split__barInner { gap: .5rem .7rem; padding: .7rem 1rem; }
  .split__live { padding: .42rem .7rem; }
  /* etiqueta más corta, pero nunca un casillero sin texto */
  .split__liveLong { display: none; }
  .split__liveShort { display: inline; }
}

/* =========================================================
   PLANO, VIDEO Y TOUR — comunes a las dos fichas
   ========================================================= */

/* ------------------------------ PLANO ---------------------------- */
.plan__tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.plan__tab {
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  transition: all var(--t);
}
.plan__tab:hover { border-color: var(--ink); color: var(--ink); }
.plan__tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.plan__stage {
  position: relative;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(.6rem, 2vw, 1.4rem);
}
.plan__svg { display: none; width: 100%; height: auto; }
.plan__svg.is-active { display: block; }

.plan__svg .room rect {
  fill: var(--white);
  stroke: var(--ink-700);
  stroke-width: 2;
  transition: fill var(--t);
}
.plan__svg .room text {
  text-anchor: middle;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ink);
  pointer-events: none;
}
.plan__svg .room text.m { font-size: 13px; font-weight: 500; fill: var(--muted); }
.plan__svg .room:hover rect { fill: var(--bronze); }
.plan__svg .room:hover text { fill: var(--ink); }

.plan__wall {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  pointer-events: none;
}

.plan__note { margin-top: .8rem; font-size: .8rem; color: var(--muted); font-style: italic; }

/* ------------------------------ VIDEO ---------------------------- */
.mediabox {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.mediabox > img,
.mediabox > video { width: 100%; height: 100%; object-fit: cover; display: block; }

.mediabox__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  background: rgba(15, 13, 11, .42);
  color: #fff;
  transition: background var(--t);
}
.mediabox__play:hover { background: rgba(15, 13, 11, .55); }
.mediabox__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  padding-left: 4px;
  transition: transform var(--t);
}
.mediabox__play:hover .mediabox__icon { transform: scale(1.08); }
.mediabox__label { font-size: .85rem; font-weight: 600; letter-spacing: .02em; }

/* ------------------------------- TOUR ---------------------------- */

/* La foto del tour es panorámica y va a 2400 px de ancho a propósito, para
   que haya algo que arrastrar. Como el marco es hijo de una celda de
   grilla, y una celda no baja de su ancho mínimo salvo que se le diga,
   esa foto estiraba la columna entera a 1117 px en el teléfono y se
   llevaba puesto todo lo que estaba debajo, el plano incluido. */
.detail__main,
.pgal__info { min-width: 0; }

.tour__stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: clamp(240px, 42vh, 380px);
  background: var(--ink);
  cursor: grab;
  touch-action: pan-y;
}
.tour__stage.is-dragging { cursor: grabbing; }
.tour__stage img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.tour__hint {
  position: absolute;
  left: 50%; bottom: 1rem;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(15, 13, 11, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .78rem;
  font-weight: 500;
  pointer-events: none;
  transition: opacity var(--t);
}
.tour__hint.is-gone { opacity: 0; }

@media (max-width: 560px) {
  .plan__svg .room text { font-size: 17px; }
  .plan__svg .room text.m { font-size: 15px; }
}

/* =========================================================
   FICHA CON GALERÍA FIJA (propiedad-galeria.html)
   ========================================================= */

.pgal__grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1500px;
  margin-inline: auto;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

/* --------------------- columna fija: galería --------------------- */
.pgal__media {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: .6rem;
  /* sirve de referencia para medir la foto contra el ancho de la columna */
  container-type: inline-size;
}

.pgal__stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-3);
  /* 75cqw es la proporción 4:3 sobre el ancho de la columna. El segundo
     término es el tope: en monitores bajos la columna entera se pasaba
     del borde y las miniaturas quedaban cortadas, así que la foto cede
     alto. Se descuentan el encabezado (92), el riel (62) y los espacios.
     Va con alto y no con aspect-ratio porque un tope sobre la proporción
     también angosta la foto y la dejaba corta contra la columna. */
  height: min(75cqw, calc(100vh - 180px));
}
.pgal__stage img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: none;
  transition: opacity 420ms ease;
}
.pgal__stage img.is-swapping { opacity: 0; }

.pgal__zoom {
  position: absolute;
  top: .8rem; right: .8rem;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  transition: transform var(--t), background var(--t);
}
.pgal__zoom:hover { transform: scale(1.08); background: #fff; }

.pgal__counter {
  position: absolute;
  left: .9rem; bottom: .9rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(15, 13, 11, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  pointer-events: none;
}

.pgal__rail {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .2rem;
}
.pgal__rail::-webkit-scrollbar { display: none; }

.pgal__thumb {
  flex: none;
  width: 78px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: .5;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  transition: opacity var(--t), outline-color var(--t);
}
.pgal__thumb img { width: 100%; height: 100%; object-fit: cover; animation: none; }
.pgal__thumb:hover { opacity: .85; }
.pgal__thumb.is-active { opacity: 1; outline: 2px solid var(--bronze); outline-offset: -2px; }

/* ------------------- columna que scrollea ------------------------ */
.pgal__info { min-width: 0; }
.pgal__info .crumbs { padding-block: 0 1.2rem; }
.pgal__info .detail__price { padding-bottom: 1.4rem; }

.pgal__sec { scroll-margin-top: 100px; }
.pgal__sec .detail__h2 { margin-top: 2.4rem; }
.pgal__sec .askbox { margin-top: 2.4rem; }

@media (max-width: 1024px) {
  /* la galería deja de ser fija y pasa a encabezar la página */
  .pgal__grid { grid-template-columns: 1fr; }
  .pgal__media { position: static; }
  /* acá la galería ya no es fija: no hace falta el tope de pantalla */
  .pgal__stage { height: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 780px) {
  .pgal__grid { padding-bottom: 6rem; }
  .pgal__thumb { width: 64px; }
}

/* =========================================================
   PÁGINA DE CAPTACIÓN (vender.html)
   ========================================================= */

.sell {
  background: var(--ink);
  color: rgba(255, 255, 255, .76);
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
.sell__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.sell__copy { max-width: 34rem; }
.sell__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance;
}
.sell__title em { font-style: italic; font-weight: 400; }
.sell__text { margin-top: 1.3rem; font-size: 1.02rem; }

.sell__points { display: grid; gap: .7rem; margin-top: 2rem; }
.sell__points li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; }
.sell__points svg { flex: none; color: var(--bronze); margin-top: .15rem; }

.sell__seal {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  font-size: .82rem;
  color: rgba(255, 255, 255, .5);
}

/* ---------------------- formulario en pasos ---------------------- */
.steps {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lg);
  color: var(--ink-700);
}
.steps__head { margin-bottom: 1.5rem; }
.steps__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: .6rem;
}
.steps__bar { height: 3px; border-radius: 2px; background: var(--cream-3); overflow: hidden; }
.steps__bar span {
  display: block;
  height: 100%;
  width: 33.33%;
  background: var(--ink);
  border-radius: 2px;
  transition: width 420ms cubic-bezier(.22, .61, .36, 1);
}

.step { border: 0; padding: 0; display: grid; gap: 1rem; }
.step[hidden] { display: none; }
.step__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
  margin-bottom: .3rem;
}
.field__opt { font-weight: 400; color: var(--muted); }
.field__hint { font-size: .75rem; color: var(--muted); }

.steps__nav { display: flex; gap: .7rem; margin-top: 1.6rem; }
.steps__nav .btn { flex: 1; }
.steps__nav .btn[hidden] { display: none; }

/* ----------------------------- proceso --------------------------- */
.road {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.road__item { background: var(--cream); padding: clamp(1.4rem, 2.6vw, 2rem); transition: background var(--t); }
.road__item:hover { background: var(--white); }
.road__num {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--bronze);
}
.road__item h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  margin: .7rem 0 .5rem;
}
.road__item p { font-size: .9rem; color: var(--muted); }

/* --------------------------- testimonio -------------------------- */
.sellquote {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.sellquote .quote__mark { display: block; margin-bottom: .5rem; }
.sellquote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink);
}
.sellquote footer { margin-top: 1.6rem; display: grid; gap: .15rem; }
.sellquote strong { font-family: var(--font-sans); font-size: .95rem; color: var(--ink); }
.sellquote span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------- FAQ ----------------------------- */
.faq__list { display: grid; gap: .6rem; max-width: 48rem; }
.faq__item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq__item summary {
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--bronze);
  border-bottom: 2px solid var(--bronze);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__item summary:hover { background: var(--white); }
.faq__item p { padding: 0 1.4rem 1.3rem; font-size: .93rem; color: var(--muted); max-width: 62ch; }

@media (max-width: 900px) {
  .sell__grid { grid-template-columns: 1fr; }
  .sell__copy { max-width: none; }
}

/* =========================================================
   BLOG — índice (blog.html) y nota (blog-articulo.html)
   ========================================================= */

.blog { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(4rem, 8vw, 6rem); }

/* ---------------------- metadatos de la nota --------------------- */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  font-size: .78rem;
  color: var(--muted);
}
.post__cat {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .7rem;
}

/* --------------------------- destacada --------------------------- */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feat:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-md); }
.feat__media { overflow: hidden; background: var(--cream-3); }
.feat__media img {
  width: 100%; height: 100%;
  min-height: 280px;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.feat:hover .feat__media img { transform: scale(1.05); }

.feat__body {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feat__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-top: 1rem;
}
.feat__text { margin-top: .9rem; font-size: .96rem; color: var(--muted); }
.feat .v__go { margin-top: 1.6rem; padding-top: 0; }

/* ---------------------- barra de categorías ---------------------- */
.blog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.blog__bar .lchips { margin: 0; }
.blog__count { margin-left: auto; font-size: .88rem; color: var(--muted); }
.blog__count strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }

/* ---------------------------- la grilla -------------------------- */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.post {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.post.is-hidden { display: none; }
.post:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--shadow-md); }
.post > a { display: flex; flex-direction: column; height: 100%; }

.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-3); }
.post__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.post:hover .post__media img { transform: scale(1.06); }

.post__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  margin-top: .8rem;
}
.post__text { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.post__more {
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bronze);
}

.blog__empty { padding: 3.5rem 1rem; text-align: center; color: var(--muted); }
.blog__empty a { color: var(--ink); border-bottom: 1px solid var(--bronze); }

/* --------------------------- suscripción ------------------------- */
.subs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, .74);
}
.subs__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: .8rem;
}
.subs__title em { font-style: italic; font-weight: 400; }
.subs__form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  display: grid;
  gap: .9rem;
  color: var(--ink-700);
}
.subs__form .btn { width: 100%; }

/* En las portadas la franja va dentro de una sección con su propio
   espaciado, así que no necesita el margen superior del blog.
   Tampoco el relleno inferior: la sección que sigue ya trae el suyo y,
   como acá el borde de la tarjeta oscura se ve, los dos juntos dejaban
   un hueco enorme. */
.subs-band .subs { margin-top: 0; }
/* Arriba sí necesita aire: la sección anterior termina en un cambio de
   color, y sin este margen la tarjeta oscura arranca pegada al borde.
   Abajo no hace falta, porque la sección de contacto ya trae el suyo. */
.subs-band { padding-block: clamp(3rem, 6vw, 5rem) 0; }

/* ============================ LA NOTA ============================= */

/* barra de avance de lectura */
.readbar {
  position: fixed;
  top: 76px; left: 0; right: 0;
  z-index: 95;
  height: 2px;
  background: transparent;
}
.readbar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bronze);
  transition: width 90ms linear;
}

.note__head { background: var(--cream-2); border-bottom: 1px solid var(--line); padding-block: clamp(2rem, 4vw, 3rem); }
.note__headInner { max-width: 46rem; }
.note__headInner .crumbs { padding-block: 0 1.2rem; }
.note__headInner .post__meta { margin-bottom: 1.2rem; }

.note__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
.note__lead {
  margin-top: 1.2rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted);
}
.note__head .share { margin-top: 1.8rem; }

.note__hero { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.note__hero img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  animation: none;
}
.note__hero figcaption,
.note__fig figcaption {
  max-width: var(--container);
  margin: .8rem auto 0;
  padding-inline: var(--gutter);
  font-size: .82rem;
  font-style: italic;
  color: var(--muted);
}

.note__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ---------------------- tipografía del cuerpo -------------------- */
.note__body { max-width: 40rem; font-size: 1.05rem; line-height: 1.75; }
.note__body p { margin-bottom: 1.2rem; }
.note__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 2.4rem 0 .9rem;
  /* al saltar desde el índice, que el header fijo no tape el subtítulo */
  scroll-margin-top: 100px;
}
.note__body blockquote {
  margin: 2rem 0;
  padding: 1.3rem 1.6rem;
  border-left: 3px solid var(--bronze);
  background: var(--cream-2);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}
.note__fig { margin: 2rem 0; }
.note__fig img { width: 100%; border-radius: var(--radius-lg); animation: none; }
.note__fig figcaption { max-width: none; padding-inline: 0; }

.note__author { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }

/* ----------------------------- lateral --------------------------- */
.note__aside { position: sticky; top: 100px; display: grid; gap: 1rem; }

.notebox {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
}
.notebox__toc { counter-reset: toc; display: grid; gap: .55rem; margin-top: .9rem; }
.notebox__toc li {
  counter-increment: toc;
  display: flex;
  gap: .6rem;
  font-size: .88rem;
}
.notebox__toc li::before {
  content: counter(toc);
  flex: none;
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--bronze);
}
.notebox__toc a { color: var(--ink-700); transition: color var(--t); }
.notebox__toc a:hover { color: var(--bronze); }

.notebox--cta { background: var(--ink); border-color: transparent; color: rgba(255, 255, 255, .74); }
.notebox--cta h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: .5rem;
}
.notebox--cta p { font-size: .88rem; margin-bottom: 1.1rem; }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; }
  .feat__media img { min-height: 220px; }
  .subs { grid-template-columns: 1fr; }
  .note__grid { grid-template-columns: 1fr; }
  .note__aside { position: static; }
  .blog__count { margin-left: 0; }
}

/* --------------------------- ANIMACIONES ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 750ms cubic-bezier(.22, .61, .36, 1),
              transform 750ms cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------- RESPONSIVE ------------------------- */
@media (max-width: 1080px) {
  .search__card { grid-template-columns: repeat(2, 1fr); }
  .search__btn { grid-column: 1 / -1; padding-block: 1.1rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .section__head--split { grid-template-columns: 1fr; }
  .about__grid,
  .dev__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .dev__media img { aspect-ratio: 16 / 10; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .zones__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .zone--tall { grid-row: span 1; }
  .zone--wide { grid-column: span 2; }
  .zone__body p { max-height: 6rem; opacity: 1; }
  .types__grid { grid-template-columns: repeat(2, 1fr); }
}

/* El menú de escritorio necesita 1086 px de ventana: logo 139 + navegación
   747 + el selector de idioma 64, más las separaciones. Por debajo de eso
   el botón "Contactar" se salía del encabezado —pasaba desde antes de
   sumar el idioma—, así que el panel deslizante arranca acá y no a 780. */
@media (max-width: 1100px) {
  .burger { display: grid; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    background: var(--cream);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(102%);
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav__link {
    display: block;
    color: var(--ink) !important;
    font-family: var(--font-display);
    font-size: 1.5rem;
    padding-block: .55rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav__cta { --btn-bg: var(--ink) !important; --btn-fg: var(--cream) !important; width: 100%; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 780px) {
  html { scroll-padding-top: 76px; }

  .hero { min-height: 92svh; padding-block: 7rem 5rem; }
  .hero__seal { margin-top: 2rem; }
  .hero__actions .btn { flex: 1 1 auto; }

  .search { margin-top: -2rem; }
  .search__card { grid-template-columns: 1fr; }

  .pillars { grid-template-columns: 1fr; }
  .dev__list { grid-template-columns: 1fr; }
  .props__cta { flex-direction: column; align-items: flex-start; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .zones__grid { grid-template-columns: 1fr; }
  .zone--wide { grid-column: span 1; }
  /* Uno por fila: con dos columnas los tres renglones de operación quedan
     apretados y los números pierden legibilidad. */
  .types__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* la fila flexible ya se acomoda sola: no hace falta reubicar nada */
  .card__foot { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* =========================================================
   ACCESIBILIDAD TÁCTIL EN CELULAR
   Los desplegables de los buscadores heredan su alto de la línea de
   texto y quedaban en 26 px, muy por debajo de lo que se puede tocar
   con comodidad. Se los lleva a 44 px sólo en pantallas chicas, donde
   se usan con el dedo.
   ========================================================= */
@media (max-width: 780px) {
  .search__field select,
  .lsearch__field select,
  .lsearch__field input,
  .bigsearch__field select,
  .split__select select,
  .lbar__sort select {
    min-height: 44px;
  }
  /* Las filas de operación de Tipos quedaban en 36 px: el blanco más chico de
     todo el tema (los botones son 46, el menú 59) y encima van de a tres,
     pegadas. En la computadora 36 está bien —se apunta con el mouse y las
     columnas son angostas—, así que sólo se agrandan acá. Entran de sobra: tres
     filas de 44 más el título suman 224 de los 260 del tile. */
  .type__ops a { min-height: 44px; }
}

/* ------------------------ PREFERENCIAS DE USUARIO ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   ALQUILER TEMPORAL (alquiler-temporal.html)
   ---------------------------------------------------------
   El buscador tiene más campos que el del listado común
   —dos fechas, capacidad y extras—, así que no entra en una
   fila fija: las columnas se acomodan solas según el ancho.
   ========================================================= */

.tsearch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  /* stretch y no end: con end las celdas no llegaban al alto de la fila y
     asomaba una franja gris —el fondo de la grilla— por encima */
  align-items: stretch;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.6rem;
}

.tsearch__field {
  background: var(--white);
  padding: .85rem 1.15rem;
  display: grid;
  gap: .25rem;
  min-width: 0;
}
.tsearch__field label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tsearch__field select,
.tsearch__field input {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.tsearch__field select { cursor: pointer; }
.tsearch__field select:focus,
.tsearch__field input:focus { outline: none; }

/* Los extras son dos casillas en una sola celda. Llevan el mismo relleno
   y el mismo rótulo que los demás campos para que todo apoye en la misma
   línea; antes iban en un <fieldset>, cuyo <legend> se dibuja fuera de la
   caja y sobresalía por arriba. */
.tsearch__extras {
  background: var(--white);
  padding: .85rem 1.15rem;
  display: grid;
  gap: .25rem;
  align-content: start;
  min-width: 0;
}
.tsearch__rotulo {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tsearch__extras label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: var(--ink-700);
  cursor: pointer;
}
.tsearch__extras input { accent-color: var(--bronze); width: 15px; height: 15px; cursor: pointer; }

.tsearch__btn {
  border-radius: 0;
  height: 100%;
  min-height: 62px;
  padding-inline: 1.6rem;
}
.tsearch__btn:hover { transform: none; box-shadow: none; background: var(--ink-soft); }

/* aviso cuando las fechas están al revés o falta una */
.tsearch__aviso {
  margin: -.9rem 0 1.4rem;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-700);
}

.props__empty {
  margin: 2.5rem 0;
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
}

/* el precio por noche lleva una aclaración chica al lado */
.price small { font-family: var(--font-sans); font-size: .72rem; font-weight: 500; color: var(--muted); }

@media (max-width: 780px) {
  /* en el teléfono cada campo ocupa el ancho completo: con dos por fila
     las fechas quedaban ilegibles */
  .tsearch { grid-template-columns: 1fr; }
  .tsearch__btn { min-height: 52px; padding-block: 1rem; }
  .tsearch__field input[type="date"] { min-height: 30px; }
}

/* Con columnas automáticas entraban seis por fila y el botón caía solo a
   una séptima celda, abajo a la izquierda. Cuando hay lugar fijamos las
   siete columnas para que quede todo en una fila, con el botón al final
   como en cualquier buscador de reservas. */
@media (min-width: 1080px) {
  .tsearch { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(140px, .85fr) auto; }
}
/* y cuando no entra, que el botón ocupe el ancho entero en vez de un rincón */
@media (max-width: 1079px) {
  .tsearch__btn { grid-column: 1 / -1; }
}

/* =========================================================
   FICHA DE ALQUILER TEMPORAL (propiedad-temporal.html)
   ========================================================= */

.pagehead--slim { padding-block: 6.5rem 1.2rem; background: transparent; }

.feats--wide { grid-template-columns: repeat(3, 1fr); }

/* comodidades: lista a dos o tres columnas, sin viñetas */
.amen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: .55rem 1.6rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
}
.amen li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--ink-700); }

/* normas de la casa */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  margin: 0 0 2.4rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rules__item { background: var(--white); padding: .9rem 1.1rem; }
.rules dt { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rules dd { margin: .25rem 0 0; font-size: .95rem; color: var(--ink); }

/* ------------------------- CALENDARIO ------------------------- */
.cal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem 1.3rem;
  margin-bottom: 2.4rem;
  background: var(--white);
}
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
/* nada de text-transform: capitalize, que ponía mayúscula también en la
   'y' del medio. La primera letra la pone el script. */
.cal__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.cal__nav {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.cal__nav:hover { background: var(--cream-2); border-color: var(--ink); }

.cal__meses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.cal__mesNombre { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; text-align: center; }

.cal__semana, .cal__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__semana span { text-align: center; font-size: .66rem; font-weight: 700; color: var(--muted); padding-bottom: .3rem; }

.cal__dia {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .82rem;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.cal__dia:hover:not(:disabled) { background: var(--cream-3); }
.cal__dia--vacio { background: transparent; cursor: default; }
/* tachado, no sólo gris: el color solo no alcanza para quien no lo distingue */
.cal__dia.is-ocupado {
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: .55;
}
/* Fuera de la ventana: ya pasó, o va más allá de lo que se cargó. No se puede
   elegir, pero NO es una reserva —por eso va apagado y sin tachar, que es lo
   que distingue a los días tomados. */
.cal__dia.is-fuera {
  background: transparent;
  color: var(--muted);
  cursor: default;
  opacity: .3;
}
.cal__dia.is-elegido { background: var(--cream-3); }
.cal__dia.is-borde { background: var(--ink); color: var(--cream); font-weight: 600; }

.cal__leyenda { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem; font-size: .8rem; color: var(--muted); }
.cal__leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.cal__muestra { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.cal__muestra--libre { background: var(--cream-2); border: 1px solid var(--line); }
.cal__muestra--ocupado { background: transparent; border: 1px dashed var(--line); }
.cal__muestra--elegido { background: var(--ink); }
/* El mismo aro que el calendario: si la muestra no coincide con lo que se ve
   al lado, la leyenda no aclara nada. */
.cal__muestra--hoy { background: transparent; box-shadow: inset 0 0 0 2px var(--bronze); }

/* --------------------- CAJA DE RESERVA --------------------- */
.book {
  position: sticky;
  top: 100px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.book__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin-bottom: 1rem; }
.book__price small { font-family: var(--font-sans); font-size: .82rem; font-weight: 500; color: var(--muted); }

.book__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.book__field { display: grid; gap: .3rem; margin-bottom: .8rem; }
.book__field label { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.book__field input,
.book__field select {
  width: 100%;
  min-width: 0;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--ink);
}
.book__field input:focus,
.book__field select:focus { outline: none; border-color: var(--ink); }

.book__aviso {
  margin-bottom: .9rem;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-700);
}

.book__detalle { margin: .3rem 0 1rem; font-size: .9rem; }
.book__detalle > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; color: var(--ink-700); }
.book__detalle dd { margin: 0; }
.book__total {
  border-top: 1px solid var(--line);
  margin-top: .4rem;
  padding-top: .7rem !important;
  font-weight: 700;
  color: var(--ink) !important;
}

.book__cta { width: 100%; justify-content: center; }
.book__nota { margin-top: .8rem; font-size: .78rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) {
  .feats--wide { grid-template-columns: repeat(2, 1fr); }
  /* dos meses no entran a lo ancho: se apilan */
  .cal__meses { grid-template-columns: 1fr; }
  .book { position: static; }
}

/* El botón de limpiar iba debajo del recuento y con aspecto de enlace:
   pasaba desapercibido. Ahora va arriba, alineado a la derecha del
   buscador y con forma de botón. */
.tsearch__acciones {
  display: flex;
  justify-content: flex-end;
  margin: -.6rem 0 1rem;
}
.tsearch__limpiar { gap: .45rem; }
/* mientras no haya ningún filtro puesto se atenúa: sigue estando, pero no
   compite con el buscador */
.tsearch__limpiar[data-vacio="1"] { opacity: .5; }
.tsearch__limpiar[data-vacio="1"]:hover { opacity: 1; }

.list__count { margin-bottom: 1.4rem; }

@media (max-width: 780px) {
  .tsearch__acciones { justify-content: stretch; }
  .tsearch__limpiar { width: 100%; justify-content: center; }
}

/* -------------------- LISTA DE PRECIOS POR PERÍODO ---------------- */
/* La tabla con la que cotiza la costa: quincenas, no noches. */
.pricelist {
  width: 100%;
  border-collapse: collapse;
  margin: .6rem 0 1.4rem;
  font-family: var(--font-sans);
  font-size: .9rem;
}
.pricelist th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--line);
}
.pricelist td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line);
}
.pricelist tr:last-child td { border-bottom: 0; }
.pricelist__dates { color: var(--muted); font-size: .84rem; white-space: nowrap; }
/* El valor a la derecha y con cifras de ancho fijo: una columna de precios
   que no alinea se compara mal. */
.pricelist__price {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  /* En un teléfono la columna de fechas es la primera que sobra: el período
     ya dice de qué se trata. */
  .pricelist__dates { display: none; }
  .pricelist th:nth-child(2) { display: none; }
}

/* El calendario cuando se lo señala desde los campos de fecha: un destello
   corto, para que quien tocó "Entrada" vea a dónde lo mandaron. */
.cal.is-señalado {
  animation: calSenalado 1.2s ease-out;
}
@keyframes calSenalado {
  0%   { box-shadow: 0 0 0 0 rgba(176, 141, 87, .55); }
  100% { box-shadow: 0 0 0 14px rgba(176, 141, 87, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cal.is-señalado { animation: none; }
}
/* El aviso de dónde se eligen las fechas: pegado a los campos, no al pie de
   la tarjeta, para que se lea antes de intentar escribir. */
.book__nota--fechas {
  margin: -.2rem 0 .9rem;
  cursor: pointer;
}
/* Los campos ya no se escriben: el cursor no puede seguir invitando a hacerlo. */
.book__field input[readonly] {
  cursor: pointer;
}

/* Un día que no sirve como salida —queda por debajo de la estadía mínima, o hay
   una reserva en el medio— mientras se está eligiendo. Apagado y sin tachar: no
   está reservado, simplemente no cierra con la entrada elegida. */
.cal__dia.is-corta {
  opacity: .3;
  cursor: not-allowed;
}

/* Las noches de la estadía, debajo de las fechas. */
.book__noches {
  margin: -.4rem 0 .9rem;
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
/* Hoy: un aro en el bronce del tema. Va como aro y no como relleno para no
   competir con los otros estados —libre, reservado y "tu estadía"— y para que
   se siga viendo cuando el día de hoy es además el de entrada. */
.cal__dia.is-hoy {
  box-shadow: inset 0 0 0 2px var(--bronze);
  font-weight: 600;
}