/* ==========================================================================
   Tillemann Properties — hoja de estilos
   Paleta tomada del isotipo de marca: azul marino #1E2634 y plata #A9A9A9.
   Tipografía sans-serif geométrica, en línea con el trazo del logo.
   ========================================================================== */

:root {
  /* Colores de marca: salen de muestrear el logo y no se tocan. */
  --navy: #1e2634;
  --navy-dark: #12161f;
  --silver: #a9a9a9;
  --silver-dark: #7c828b;

  --ink: #1e2634;
  --ink-soft: #4e5560;
  /* Gris cálido de los textos secundarios: rótulos, ubicaciones, códigos.
     El tono se eligió por contraste, no a ojo — a #8a8578, que era lo que
     pedía la estética, quedaba en 3.7:1 sobre las tarjetas blancas y no
     alcanzaba el mínimo legible de 4.5:1. A #666257 da 6.1:1 sobre blanco
     y 5.2:1 sobre el papel. */
  --ink-faint: #666257;
  --accent: #1e2634;
  --accent-dark: #12161f;
  --accent-tint: #efece4;

  /* El fondo es papel cálido, no gris frío. Es el cambio de una sola línea
     que más separa el sitio de la competencia de la zona: las tres usan
     blanco o gris azulado, que es el aspecto por defecto de un portal. */
  --bg: #faf8f4;
  --bg-alt: #f1eee7;
  --line: #e2ddd2;
  --white: #ffffff;
  --danger: #b3392c;

  /* Único acento de color, usado con cuentagotas: verde de bosque nativo.
     Marca los rótulos y los estados activos, nunca superficies grandes. */
  --verde: #45584a;

  /* Instrument Serif solo existe en peso 400: los titulares van en 400 y se
     apoyan en el cuerpo grande, no en la negrita. Si se le pone 700 el
     navegador la engorda a la fuerza y se ve sucia. Georgia es el respaldo
     porque tiene proporciones parecidas y está en todos los equipos. */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(30, 38, 52, 0.04), 0 10px 30px rgba(30, 38, 52, 0.07);
}

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

html { scroll-behavior: smooth; }

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

/* Los titulares llevan cuerpo grande y peso normal. El contraste lo hace el
   tamaño y el cambio de familia, no la negrita: es lo que separa una página
   editorial de un portal inmobiliario. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.2rem; line-height: 1.2; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

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

.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }

.btn-ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn-ghost:hover { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent); }

.btn-sm { padding: 9px 18px; font-size: 0.875rem; }
.btn-block { display: flex; width: 100%; }

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }

/* El logo horizontal ya trae el nombre incorporado, así que el ancho se deja
   libre y se controla por altura. El archivo incluye su propio margen. */
.brand-logo {
  height: 74px;
  width: auto;
  display: block;
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--ink-soft); font-size: 0.925rem; }
.nav a:hover { color: var(--ink); }
.nav a.btn { color: var(--white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { width: 20px; height: 1.5px; background: var(--ink); }

/* ---------- Portada ----------
   Imagen a sangre completa con el texto apoyado encima. Es el cambio que más
   diferencia al sitio: ninguna de las tres corredoras de Villarrica y Pucón
   usa una sola foto a ancho completo — todas abren con una grilla de
   miniaturas de 300 px. */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 760px);
  padding-bottom: clamp(44px, 6vw, 88px);
  overflow: hidden;
  background: var(--navy);
}

/* Colchón superior. `align-items: flex-end` solo separa el texto del
   encabezado cuando sobra alto, y en una pantalla de portátil no sobra: el
   bloque medía 509 px dentro de un hero de 655 y el rótulo quedaba a 60 px
   del logo. Como `box-sizing` es border-box, este relleno entra dentro del
   `min-height` y, cuando el texto no cabe, empuja el hero hacia abajo en vez
   de apretarlo contra la cabecera. */
.hero { padding-top: clamp(72px, 11vh, 132px); }

.hero-media { position: absolute; inset: 0; }

/* El `object-position` no es un centrado por defecto: la foto es más alta que
   el hueco del hero, así que se recorta por arriba y por abajo. Con el centro
   normal, la cumbre del volcán —que está al 13 % de la altura— quedaba justo
   en el filo. El 30 % corre la ventana hacia arriba lo justo para dejar la
   cumbre entera, a costa de un poco de agua al pie. Si se cambia la foto, hay
   que revisar este número. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Dos velos con oficios distintos.

   El vertical baja el brillo general y se cierra abajo, donde se apoya el
   texto. El horizontal es el que hace el trabajo fino: oscurece solo la
   columna derecha —donde va el titular— y se desvanece antes de llegar al
   volcán, que queda con su luz intacta.

   Hizo falta porque el rótulo y el titular caen sobre el cielo claro y la
   nieve de la cumbre: medidos sobre los píxeles reales daban 2,17:1 y 1,89:1,
   muy por debajo del mínimo legible. Oscurecer la foto entera lo habría
   resuelto también, pero a costa de apagar justo lo que se quiere mostrar. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to left,
      rgba(12, 16, 22, 0.84) 0%,
      rgba(12, 16, 22, 0.74) 34%,
      rgba(12, 16, 22, 0.42) 52%,
      rgba(12, 16, 22, 0.08) 64%,
      rgba(12, 16, 22, 0) 72%
    ),
    linear-gradient(
      to top,
      rgba(12, 16, 22, 0.86) 0%,
      rgba(12, 16, 22, 0.42) 38%,
      rgba(12, 16, 22, 0.24) 66%,
      rgba(12, 16, 22, 0.44) 100%
    );
}

/* En pantalla angosta el texto ocupa todo el ancho, así que el velo lateral
   —pensado para una columna a la izquierda— deja de protegerlo y el rótulo
   caía a 2,7:1 sobre el cielo. Acá el velo se reparte parejo. Se puede
   oscurecer más que en escritorio sin perder gran cosa: en vertical la foto
   ya se ve recortada a una franja central. */
@media (max-width: 720px) {
  .hero-media::after {
    background:
      linear-gradient(
        to left,
        rgba(12, 16, 22, 0.7) 0%,
        rgba(12, 16, 22, 0.52) 55%,
        rgba(12, 16, 22, 0.42) 100%
      ),
      linear-gradient(
        to top,
        rgba(12, 16, 22, 0.88) 0%,
        rgba(12, 16, 22, 0.46) 40%,
        rgba(12, 16, 22, 0.3) 70%,
        rgba(12, 16, 22, 0.46) 100%
      );
  }
}

.hero-inner { position: relative; color: #fff; }

/* La columna de texto se corre a la derecha para dejar despejado el cono del
   volcán, cuya cumbre está al 31 % del ancho de la foto. El texto sigue
   alineado a la izquierda dentro de la columna: un párrafo de tres líneas en
   bandera derecha se lee mal. */
.hero-copy { max-width: 34rem; margin-left: auto; }

/* Este `@media` va justo después de la regla base y no junto a los otros del
   hero: los media queries no suman especificidad, así que si quedara antes,
   la regla de arriba lo pisaría por orden de aparición. En una columna
   angosta no hay volcán que dejar libre y el bloque vuelve al ancho completo. */
@media (max-width: 720px) {
  .hero-copy { max-width: none; margin-left: 0; }
}

/* 0.9 y no 0.72: el rótulo es texto chico sobre foto, y al 72 % su contraste
   efectivo caía a 3,8:1. Sigue sin ser blanco puro para no competir con el
   titular, que sí lo es. */
.hero-inner .eyebrow { color: rgba(255, 255, 255, 0.9); }

/* En la portada el titular baja de cuerpo respecto al resto del sitio. No es
   capricho: la columna se estrechó para caber a la derecha del volcán, y a
   4,4rem se partía en tres líneas. A este cuerpo entra en dos y el bloque
   completo cabe sin apretar el encabezado. */
.hero-inner h1 {
  font-size: clamp(2.3rem, 3.9vw, 3.4rem);
  max-width: 20ch;
  margin-bottom: 0.35em;
  text-wrap: balance;
}

.hero-inner .lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.86);
  max-width: 48ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }

.hero-note { font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }

/* Botones sobre la foto: el primario mantiene el navy de marca y el
   secundario se dibuja con el borde, para no abrir un segundo bloque
   opaco encima de la imagen. */
.hero-actions .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(3px);
}
.hero-actions .btn-ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

/* ---------- Banda de la primera reunión ----------
   Es el contenido que antes vivía en la tarjeta del hero. Se movió acá para
   dejar la portada limpia, sin perder la promesa que convierte al
   propietario que está evaluando vender. */

.promesa {
  background: var(--navy);
  color: #fff;
  padding: clamp(44px, 5vw, 64px) 0;
}

.promesa-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr auto;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.promesa-intro h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); margin-bottom: 0; }
.promesa-intro .eyebrow { color: rgba(255, 255, 255, 0.55); margin-bottom: 0.6rem; }

/* Estas tres reglas van calificadas con `.promesa` a propósito. Las reglas
   base de `.check-list` se declaran más abajo en el archivo y tienen la misma
   especificidad, así que sin el calificador ganarían por orden y dejarían el
   texto y las marcas en navy sobre fondo navy: invisibles. */
.promesa .promesa-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  margin: 0;
}
.promesa .promesa-lista li { color: rgba(255, 255, 255, 0.84); margin-bottom: 6px; }
.promesa .promesa-lista li::before { border-color: rgba(255, 255, 255, 0.8); }

.promesa .btn {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  white-space: nowrap;
}
.promesa .btn:hover { background: var(--bg-alt); border-color: var(--bg-alt); color: var(--navy); }

.check-list { list-style: none; margin: 0 0 28px; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--accent);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

/* ---------- Secciones ---------- */
/* Compensa el header fijo al llegar por anclaje (#servicios, #agendar, ...). */
section[id] { scroll-margin-top: 108px; }

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 52ch; margin-bottom: 48px; }
.section-head h2 { margin-bottom: 0; }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Los numeradores van en la sans: a 0.8rem la serif de titulares no tiene
   peso 700 y el navegador la engorda a la fuerza. */
.card-num {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--verde);
  margin-bottom: 20px;
}
.card p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Proceso ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--verde);
  margin-bottom: 16px;
}
.steps h3 { margin-bottom: 0.35em; }
.steps p { color: var(--ink-soft); font-size: 0.925rem; }

/* ---------- Nosotros ---------- */
.about {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.about-copy p { color: var(--ink-soft); max-width: 54ch; }

.stats { margin: 0; display: grid; gap: 20px; }
.stats div { border-left: 2px solid var(--accent); padding-left: 18px; }
.stats dt {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stats dd { margin: 6px 0 0; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }

/* ---------- Agendar / formulario ---------- */
.booking {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
.booking-intro p { color: var(--ink-soft); }

.contact-list { list-style: none; margin: 32px 0 0; padding: 0; }
.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.contact-list span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}

.field { margin-bottom: 20px; border: 0; padding: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

label, legend {
  display: block;
  margin-bottom: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.optional { font-weight: 400; color: var(--ink-faint); }

input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, background 0.18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
}
textarea { resize: vertical; min-height: 88px; }

input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }

.error { margin: 6px 0 0; font-size: 0.8rem; color: var(--danger); min-height: 0; }
.error:empty { display: none; }

.radio-row { display: flex; gap: 24px; }
.radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}
.radio input { width: auto; padding: 0; accent-color: var(--accent); }

.form-note { margin: 14px 0 0; font-size: 0.8rem; color: var(--ink-faint); text-align: center; }

.form-success {
  grid-column: 2;
  background: var(--white);
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.form-success h3 { color: var(--accent); }
.form-success p { color: var(--ink-soft); margin-bottom: 20px; }
.form-success .btn-block { margin-bottom: 12px; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 32px 0;
  background: var(--navy);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--silver);
}
.footer-brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-logo { height: 56px; width: auto; display: block; }
.footer-inner p { margin: 0; }
/* `--silver-dark` sobre el navy del footer daba 3.9:1, por debajo del mínimo.
   `--silver` —el otro gris del logo— da 6.5:1 y sigue leyéndose como texto
   secundario frente a la línea de al lado, que va en blanco. */
.footer-inner .copy { color: var(--silver); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about, .booking { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .form-success { grid-column: 1; }

  /* La banda de la reunión pasa a una columna y el botón deja de ir al
     costado: en tres columnas ya no cabe sin apretar el listado. */
  .promesa-inner { grid-template-columns: 1fr; gap: 28px; }
  .promesa .btn { justify-self: start; }
}

@media (max-width: 720px) {
  .nav {
    display: none;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; }
  .nav a.btn { margin-top: 8px; justify-content: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 560px) {
  .grid-3, .steps, .field-row, .stats { grid-template-columns: 1fr; }
  .radio-row { flex-direction: column; gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .promesa-lista { grid-template-columns: 1fr; }
  .promesa .btn { width: 100%; }
  /* En teléfono la portada no necesita ocupar toda la pantalla: se gana
     que el primer bloque de contenido asome y invite a seguir bajando. */
  .hero { min-height: 78vh; }
}

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

/* ==========================================================================
   CATÁLOGO DE PROPIEDADES
   Todo lo que sigue es del catálogo y de las fichas. Va después de los medias
   queries de arriba a propósito: esas reglas no tocan ninguna de estas clases,
   y así el bloque nuevo queda entero y se lee de corrido.
   ========================================================================== */

/* ---------- Tarjeta de propiedad ----------
   La misma en la portada, en el catálogo y en las similares de la ficha. */

.prop-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.prop-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.prop-card-media {
  position: relative;
  display: block;
  background: var(--bg-alt);
}
/* La proporción fija evita que la grilla salte mientras cargan las fotos.
   El `height: auto` no es decorativo: sin él manda el atributo height="" del
   HTML y la regla aspect-ratio se ignora, porque la proporción solo se aplica
   cuando una de las dos medidas queda en automático. */
.prop-card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.prop-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  border-radius: 2px;
}
.prop-badge-alt {
  left: auto;
  right: 12px;
  background: var(--white);
  color: var(--navy);
}

/* Sello de reservada / vendida: cubre la foto porque la señal tiene que ser
   imposible de pasar por alto, no un detalle en una esquina. */
.prop-sello {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(18, 22, 31, 0.55);
}

.prop-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 2px; }

.prop-precio {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.prop-titulo {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 400;
  margin: 8px 0 0;
  line-height: 1.18;
}
.prop-titulo a { color: var(--ink); }
.prop-titulo a:hover { color: var(--verde); }

.prop-ubicacion { margin: 6px 0 0; font-size: 0.875rem; color: var(--ink-faint); }

.prop-datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.825rem;
  color: var(--ink-soft);
}

.prop-codigo {
  margin: 10px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Destacadas en la portada ---------- */

.destacadas-pie { margin-top: 40px; text-align: center; }

/* ---------- Página de catálogo ---------- */

.catalogo-page { padding: clamp(40px, 6vw, 72px) 0 0; }
.catalogo-head { max-width: 60ch; margin-bottom: 36px; }
.catalogo-head .lead { font-size: 1.05rem; color: var(--ink-soft); }

.buscador {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 32px;
}
.buscador-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.buscador .field { margin-bottom: 16px; }
.buscador-pie { display: flex; gap: 12px; flex-wrap: wrap; }

.catalogo-barra {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.catalogo-conteo {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.catalogo-orden { margin: 0; display: flex; align-items: center; gap: 10px; }
.catalogo-orden label { margin: 0; white-space: nowrap; font-size: 0.825rem; color: var(--ink-faint); }
.catalogo-orden select { width: auto; padding: 8px 12px; font-size: 0.875rem; }

.catalogo-vacio {
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.catalogo-vacio .btn { margin-left: 12px; }

.cta-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-simple h2 { margin-bottom: 0.4em; }
.cta-simple p { color: var(--ink-soft); max-width: 52ch; }
.cta-simple .btn { flex-shrink: 0; }

/* ---------- Ficha de propiedad ---------- */

.ficha-page { padding: 28px 0 0; }

.migas {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.migas a { color: var(--ink-faint); }
.migas a:hover { color: var(--accent); text-decoration: underline; }
.migas span { margin: 0 4px; }

.ficha-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ficha-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 0.3em; }
.ficha-ubicacion { margin: 0; color: var(--ink-soft); }

.ficha-precio {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}

.ficha-sello {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 12px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  border-radius: 2px;
}

/* ---------- Galería ---------- */

.galeria { margin-bottom: 44px; }

.galeria-principal {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}
.galeria-principal img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.galeria-contador {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--white);
  background: rgba(18, 22, 31, 0.72);
  border-radius: 999px;
}

.galeria-tiras {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}
.galeria-tira {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.galeria-tira img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.galeria-tira:hover { opacity: 1; }
.galeria-tira.is-activa { opacity: 1; border-color: var(--accent); border-width: 2px; }

.galeria-vacia {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-faint);
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin-bottom: 44px;
}

/* ---------- Lupa ---------- */

body.sin-scroll { overflow: hidden; }

.lupa {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 5vh 4vw;
  background: rgba(12, 15, 21, 0.94);
}
.lupa.is-abierta { display: flex; }

/* El `min-width: 0` es imprescindible: dentro de un contenedor flex una imagen
   no se encoge por debajo de su ancho natural, así que se quedaba con todo el
   espacio y empujaba las flechas fuera del visor. Con esto la foto cede el
   ancho que hagan falta y los botones quedan siempre dentro. */
.lupa-img {
  min-width: 0;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lupa-cerrar,
.lupa-nav {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.lupa-cerrar:hover,
.lupa-nav:hover { background: rgba(255, 255, 255, 0.24); }

.lupa-cerrar {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.6rem;
}

.lupa-pos {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.85rem;
  color: var(--silver);
}

/* ---------- Cuerpo de la ficha ---------- */

.ficha-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-bottom: 72px;
}

.ficha-bloque { margin-bottom: 44px; }
.ficha-bloque:last-child { margin-bottom: 0; }
.ficha-bloque h2 {
  font-size: 1.25rem;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.ficha-bloque p { color: var(--ink-soft); }

/* Cada celda lleva la etiqueta a la izquierda y el valor a la derecha. El
   espacio horizontal entre columnas no es decorativo: sin él el valor de una
   celda queda pegado a la etiqueta de la siguiente y se leen como una sola
   palabra ("TP-102Operación"). El espacio vertical sí es cero, para que los
   subrayados de una misma fila queden a la misma altura. */
.ficha-detalles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 40px;
  margin: 0;
}
.ficha-detalles > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.925rem;
}
.ficha-detalles dt { color: var(--ink-faint); flex-shrink: 0; }
.ficha-detalles dd { margin: 0; font-weight: 500; text-align: right; }

.ficha-caracteristicas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  font-size: 0.925rem;
  color: var(--ink-soft);
}
.ficha-caracteristicas li { position: relative; padding-left: 22px; }
.ficha-caracteristicas li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--accent);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.ficha-nota { font-size: 0.825rem; color: var(--ink-faint); }

.ficha-video {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}
.ficha-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Panel de contacto ---------- */

.ficha-contacto {
  position: sticky;
  top: 112px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.ficha-contacto-precio {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.ficha-contacto-ref {
  margin: 2px 0 20px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ficha-contacto-o {
  margin: 18px 0 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.ficha-contacto .contact-list { margin-top: 20px; }
.ficha-form .field { margin-bottom: 14px; }
.ficha-enviado { color: var(--ink-soft); font-size: 0.925rem; margin-bottom: 16px; }

/* ---------- Responsive del catálogo y la ficha ---------- */

@media (max-width: 980px) {
  .ficha-grid { grid-template-columns: 1fr; }
  .ficha-contacto { position: static; }
}

@media (max-width: 900px) {
  .buscador-fila { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .ficha-head { gap: 12px; }
  .catalogo-barra { align-items: flex-start; }
}

@media (max-width: 560px) {
  .buscador-fila { grid-template-columns: 1fr; }
  .catalogo-orden { width: 100%; }
  .catalogo-orden select { flex: 1; }
  .cta-simple .btn { width: 100%; }
  .lupa-cerrar, .lupa-nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .lupa { padding: 8vh 12px; gap: 6px; }
}