/* ═══════════════════════════════════════════════════════════════
   ESTILOS DEL SITIO PÚBLICO
   DIRECCIÓN VISUAL: "ÍNDICE"
   ───────────────────────────────────────────────────────────────
   La idea: una revista inmobiliaria, no un folleto.

   Tres decisiones sostienen todo el diseño:

   1. FONDO BLANCO PURO. Sin grises de relleno. El contraste lo
      ponen las reglas negras y las fotos, no los fondos.

   2. REGLAS HORIZONTALES MARCADAS. Cada sección abre con una línea
      gruesa. Es lo que separa "editorial" de "plantilla": la
      estructura se ve.

   3. LAS CIFRAS EN MONOESPACIADA. Precios, metros y referencias van
      en IBM Plex Mono, así los números se alinean en columna y se
      pueden comparar de un vistazo entre una propiedad y otra.
      En un catálogo que va a crecer, eso importa más que adornar.

   El dorado es un acento delgado: líneas, referencias y detalles.
   Nunca un fondo ni un bloque grande.

   ── Para cambiar el diseño ──
   Todos los colores y tipografías viven en el bloque :root de acá
   abajo. El resto del archivo nunca escribe un color a mano: usa
   variables. Cambiar de dirección visual es cambiar este bloque.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COLORES ── */
  --fondo: #ffffff;              /* blanco puro, sin gris de relleno */
  --superficie: #ffffff;
  --superficie-alterna: #f7f6f3; /* apenas un tono, para separar secciones */
  --texto: #22211e;              /* grafito cálido, no negro puro */
  --texto-tenue: #6b6a65;
  --linea: #dad8d2;
  --linea-fuerte: #22211e;       /* las reglas gruesas de la dirección */

  /* ── EL DORADO, EN TRES TONOS ──
     No es un capricho: cada uno cumple una función distinta.

     --acento        TEXTO Y BOTONES sobre fondo claro.
                     Es más oscuro que el dorado "bonito" porque el
                     original (#96793c) daba 4.07:1 de contraste
                     sobre blanco, por debajo del mínimo de 4.5:1
                     que necesita un texto para leerse bien. Este da
                     5.5:1. La diferencia se nota poco en pantalla;
                     lo que sí se nota es no poder leer el texto.

     --acento-linea  LÍNEAS Y BORDES. Acá sí va el dorado pleno: una
                     línea no tiene que cumplir contraste de texto,
                     así que conserva el color de la propuesta.

     --acento-claro  SOBRE FONDO OSCURO (navbar, pie, cierre), donde
                     el dorado oscuro desaparecería. Da 5.8:1. */
  --acento: #7d6430;
  --acento-linea: #96793c;
  --acento-claro: #b39352;

  --nav-fondo: #22211e;
  --nav-texto: #ffffff;
  --nav-tenue: #9c9a93;
  /* Negro para el versículo del pie: queda apenas más oscuro que
     el fondo, así que se percibe como un relieve tenue más que
     como un texto. Es una decisión de diseño pedida a propósito.
     Nota: a este contraste el versículo ya no es legible como
     texto; sigue estando en el HTML, así que los lectores de
     pantalla lo leen igual. */
  --pie-versiculo-color: #141310;

  /* ── VERDES DE WHATSAPP ──
     --wa         el verde de marca. Solo como FONDO con texto
                  oscuro encima (da 7:1), nunca con texto blanco.
     --wa-oscuro  para fondos con texto blanco.
     --wa-borde   verde claro para bordes sobre la barra oscura;
                  da 6.7:1 de contraste contra el fondo del navbar. */
  --wa: #25d366;
  --wa-oscuro: #1da851;
  --wa-borde: #5fb98a;

  --error-fondo: #fbeaea;
  --error-borde: #dda6a6;
  --error-texto: #8a2727;

  /* ── TIPOGRAFÍA ── */
  --fuente-titulos: "Instrument Serif", Georgia, "Times New Roman", serif;
  --fuente-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-datos: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --peso-titulos: 400;
  --espaciado-titulos: -0.015em;

  /* ── MEDIDAS ── */
  --ancho-maximo: 1240px;
  --ancho-texto: 68ch;
  --radio: 0px;                  /* esquinas rectas: es una publicación */
  --espacio-seccion: clamp(3rem, 7vw, 5.5rem);
  --margen-lateral: clamp(1rem, 4vw, 2.5rem);
}

/* ── BASE ─────────────────────────────────────────────────────── */

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

/* ── TAMAÑO BASE DE TODO EL SITIO ──
   112.5% = 18px en vez de los 16px que trae el navegador.
   Como TODAS las medidas del sitio están en rem (que se calculan
   sobre este valor), subirlo acá agranda de golpe títulos, textos,
   botones y espacios, manteniendo las proporciones entre ellos.
   Es el lugar donde tocar si querés todo más grande o más chico. */
html {
  font-size: 112.5%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1rem; /* hereda los 18px de html */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--espaciado-titulos);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

a { color: inherit; }

/* Foco visible: quien navega con teclado tiene que ver dónde está */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.contenedor {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.contenedor-texto { max-width: 760px; }

.sutil { color: var(--texto-tenue); font-size: 0.9rem; }

/* Respeta los saltos de línea SIN insertar HTML (evita XSS) */
.texto-plano { white-space: pre-wrap; word-break: break-word; }

/* Enlace para saltar la navegación (accesibilidad) */
.saltar {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--nav-fondo);
  color: var(--nav-texto);
  padding: 0.75rem 1.25rem;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* ── NAVEGACIÓN ───────────────────────────────────────────────── */

.navbar {
  background: var(--nav-fondo);
  color: var(--nav-texto);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ── Barra en pantalla grande ──
   Todo va centrado como un solo bloque:

     PROPIEDADES VENDIDAS PRÓXIMAMENTE  [LOGO]  NOSOTROS CONTACTO WHATSAPP

   El truco está en "display: contents" sobre .menu: hace que el
   contenedor del menú deje de ser una caja y que sus tres partes
   (grupo izquierdo, grupo derecho y botón) se comporten como hijos
   directos de la barra. Recién ahí se los puede intercalar con el
   logo usando "order", sin tener que repetir el logo en el HTML. */
.navbar-interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: 0.75rem var(--margen-lateral);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  position: relative;
}

.marca {
  flex-shrink: 0;
  order: 2; /* entre los dos grupos de enlaces */
  line-height: 0;
}

.marca img {
  height: 64px; /* el logo es el centro de la barra: va más grande */
  width: auto;
}

.menu {
  display: contents;
}

.menu-grupo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

.menu-grupo-izq { order: 1; }
.menu-grupo-der { order: 3; }

/* ⚠ OJO CON EL SELECTOR: es .menu-grupo a, NO .menu a.
   Estas reglas son para los ENLACES del menú, que llevan un
   subrayado transparente que se enciende en la página actual.

   Cuando decía ".menu a" también alcanzaba al botón de WhatsApp
   —que también es un enlace dentro del menú— y su
   "border-bottom: transparent" le borraba el borde de abajo al
   botón: se veía el marco abierto por debajo.
   Ganaba porque ".menu a" (clase + elemento) tiene más
   especificidad que ".navbar-wa" (una sola clase).

   Acotándolo a .menu-grupo a, el botón queda fuera del alcance. */
.menu-grupo a {
  color: var(--nav-tenue);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.menu-grupo a:hover { color: var(--nav-texto); }
.menu-grupo a[aria-current="page"] {
  color: var(--nav-texto);
  border-bottom-color: var(--acento-claro);
}

/* ── Botón de WhatsApp de la barra ──
   Antes era un bloque de verde fosforescente con texto oscuro.
   Curiosamente el contraste medido estaba bien (7:1), así que el
   problema no era ese: era que un bloque tan saturado sobre la
   barra oscura se lleva toda la atención, y leer mayúsculas chicas
   y espaciadas sobre un verde así de vivo cansa la vista.

   Ahora es un botón de contorno: texto blanco (16:1 contra la
   barra) y un borde verde que lo identifica como WhatsApp sin
   gritar. Al pasar el mouse se rellena de verde oscuro, que sí
   aguanta texto blanco encima.

   La lección: cumplir el mínimo de contraste no garantiza que algo
   se lea cómodo. El número es un piso, no una meta. */
.navbar-wa {
  order: 4;
  display: inline-block;
  color: var(--nav-texto);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--wa-borde);
  border-radius: var(--radio);
  background: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.navbar-wa:hover {
  background: var(--wa-oscuro);
  border-color: var(--wa-oscuro);
  color: #fff;
}

/* ── Franja intermedia (pantallas de 861 a 1150 px) ──
   Entre el menú de celular y el escritorio holgado hay un rango
   donde la barra queda justa: "Vendidas / Rentadas" es largo y
   además todo el sitio subió a 18px de base. Acá se achican los
   espacios y el interletrado en vez de dejar que se desborde. */
@media (min-width: 861px) and (max-width: 1330px) {
  .navbar-interior { gap: 0.9rem; }
  .menu-grupo { gap: 0.9rem; }
  .menu-grupo a { font-size: 0.72rem; letter-spacing: 0.06em; }
  .navbar-wa { font-size: 0.66rem; padding: 0.5rem 0.75rem; letter-spacing: 0.06em; }
  .marca img { height: 56px; }
}

.hamburguesa {
  display: none;
  background: none;
  border: 1px solid var(--nav-tenue);
  border-radius: var(--radio);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.hamburguesa span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--nav-texto);
}

/* ── Barra en celular ──
   Acá el logo vuelve a la izquierda y el menú se despliega debajo.
   Se anula el "display: contents" para que el menú vuelva a ser una
   caja que se pueda mostrar y esconder. */
@media (max-width: 860px) {
  .navbar-interior { justify-content: space-between; gap: 1rem; }

  .marca { order: 0; }
  .marca img { height: 52px; }

  .hamburguesa { display: flex; order: 1; }

  .menu {
    display: none;
    order: 2;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--nav-fondo);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--margen-lateral) 1.25rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
  }

  .menu.abierto { display: flex; }

  /* En el desplegable los dos grupos se leen como una sola lista */
  .menu-grupo { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-grupo-izq, .menu-grupo-der { order: 0; }

  .menu-grupo a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.07);
  }

  .navbar-wa { order: 1; margin-top: 1rem; text-align: center; }
}

/* ── BOTONES ──────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.boton-principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.boton-principal:hover { background: #6f5a2c; border-color: #6f5a2c; }

.boton-contorno {
  border-color: var(--acento);
  color: var(--acento);
  background: transparent;
}
.boton-contorno:hover { background: var(--acento); color: #fff; }

.boton-claro {
  border-color: rgb(255 255 255 / 0.7);
  color: #fff;
  background: rgb(255 255 255 / 0.08);
}
.boton-claro:hover { background: #fff; color: var(--texto); }

.boton-wa { background: var(--wa); border-color: var(--wa); color: #06331a; }
.boton-wa:hover { background: var(--wa-oscuro); border-color: var(--wa-oscuro); color: #fff; }

.boton-ancho { display: block; width: 100%; }

/* ── HERO ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  /* No es 100vh a propósito: se deja ver que hay algo más abajo. */
  min-height: min(78vh, 660px);
  display: grid;
  align-items: end;
}

.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(15 16 18 / 0.86) 0%,
    rgb(15 16 18 / 0.42) 45%,
    rgb(15 16 18 / 0.2) 100%
  );
}

.hero-texto {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  width: 100%;
  padding: clamp(2.5rem, 7vw, 5rem) var(--margen-lateral);
  color: #fff;
  display: grid;
  gap: 1rem;
  justify-items: start;
}

/* "TEGUCIGALPA · SAN PEDRO SULA": es lo primero que ubica al
   visitante, así que se lee de verdad y no como letra chica. */
.hero-kicker {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: clamp(0.82rem, 0.74rem + 0.3vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento-claro);
}

/* Instrument Serif es condensada, así que soporta un cuerpo más
   grande sin desbordar. Es el momento tipográfico de la página. */
.hero-titulo {
  font-size: clamp(2.4rem, 1.3rem + 5vw, 5rem);
  line-height: 1.02;
  max-width: 16ch;
  color: #fff;
}

.hero-bajada {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: rgb(255 255 255 / 0.88);
}

.hero-acciones {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ── SECCIONES ────────────────────────────────────────────────── */

.seccion { padding-block: var(--espacio-seccion); }
.seccion-alterna { background: var(--superficie-alterna); }
/* La barra de filtros va pegada al hero y arranca con la regla
   gruesa: es el corte entre la portada y el contenido. */
.seccion-filtros {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--linea-fuerte);
}

/* En las páginas de listado el corte ya lo hace la cabecera. */
.encabezado-pagina + .seccion-filtros { border-top: 0; }

/* Encabezado de sección al estilo editorial: alineado a la
   izquierda y cerrado por una regla que cruza todo el ancho.
   La regla es lo que hace que la página se lea como una
   publicación y no como una sucesión de bloques sueltos. */
.seccion-encabezado {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  text-align: left;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--linea-fuerte);
}

.kicker {
  margin: 0;
  font-family: var(--fuente-datos);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}

.seccion-titulo {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.05;
}

.seccion-bajada {
  margin: 0.35rem 0 0;
  max-width: 58ch;
  color: var(--texto-tenue);
}

/* La línea dorada delgada.
   En esta dirección casi no se usa dentro de las secciones —esa
   función la cumple la regla gruesa del encabezado— pero se
   mantiene para los encabezados de página y los bloques de texto. */
.filo {
  width: 56px;
  height: 1px;
  border: 0;
  background: var(--acento-linea);
  margin: 0.35rem 0;
}

.filo-izquierda { margin-left: 0; }

/* En los encabezados de sección la regla gruesa ya separa, así que
   la línea dorada sobraría. */
.seccion-encabezado .filo { display: none; }

.seccion-pie {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── ENCABEZADO DE PÁGINA ─────────────────────────────────────── */

/* Cabecera de página al estilo publicación: fondo blanco y una
   regla gruesa que la cierra. El gris de relleno sobraba. */
.encabezado-pagina {
  background: var(--fondo);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 2px solid var(--linea-fuerte);
}

.pagina-titulo { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }

.pagina-bajada {
  margin: 0.6rem 0 0;
  max-width: 56ch;
  color: var(--texto-tenue);
}

/* ── FILTROS ──────────────────────────────────────────────────── */

.filtros {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
  align-items: end;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
}

.filtro { display: grid; gap: 0.3rem; }

.filtro label {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.filtro select {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.6rem 0.65rem;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--superficie);
  color: var(--texto);
}

.filtro-boton { padding-block: 0.7rem; }

.filtro-limpiar {
  align-self: center;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  text-align: center;
}

/* ── REJILLA DE TARJETAS ──────────────────────────────────────── */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.conteo {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--texto-tenue);
  letter-spacing: 0.02em;
}

/* ── TARJETA ──────────────────────────────────────────────────── */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tarjeta:hover { border-color: var(--acento-linea); transform: translateY(-2px); }

.tarjeta-enlace {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.tarjeta-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--superficie-alterna);
  overflow: hidden;
}

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

.tarjeta-sinfoto {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--texto-tenue);
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Las vendidas se ven, pero apagadas: no compiten con las
   disponibles, que son las que se pueden comprar hoy. */
.tarjeta-cerrada .tarjeta-foto img { filter: grayscale(0.55); opacity: 0.85; }

.tarjeta-insignias {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.insignia {
  display: inline-block;
  background: var(--linea-fuerte);
  color: #fff;
  font-family: var(--fuente-datos);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radio);
}

.insignia-cerrada { background: var(--superficie); color: var(--texto-tenue); border: 1px solid var(--linea); }
.insignia-proxima { background: var(--acento); color: #fff; }  /* fondo oscuro: texto blanco, contraste 5.5:1 */
.insignia-suave { background: transparent; color: var(--texto-tenue); border: 1px solid var(--linea); }
.insignia-grande { font-size: 0.68rem; padding: 0.4rem 0.75rem; }

.tarjeta-cuerpo {
  padding: 1.15rem 1.25rem 1.35rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.tarjeta-lugar {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ── Título de la tarjeta ──
   Va en Hanken Grotesk y no en la serif de despliegue.
   Instrument Serif tiene trazos muy finos y mucho contraste: se ve
   preciosa en un título grande, pero en el tamaño de una tarjeta
   cuesta leerla, sobre todo en celular. La sans en semibold se lee
   de un golpe.

   El contraste titular-serif / ítem-sans es además el patrón de
   cualquier revista, así que acompaña a la dirección "Índice". */
.tarjeta-titulo {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.tarjeta-caracteristicas {
  margin: 0;
  /* Monoespaciada: los metros y las habitaciones se alinean en
     columna entre tarjeta y tarjeta, y se comparan de un vistazo. */
  font-family: var(--fuente-datos);
  font-size: 0.88rem;
  letter-spacing: -0.02em;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

.tarjeta-fecha {
  margin: 0;
  font-size: 0.88rem;
  color: var(--acento);
}

.tarjeta-precio {
  margin: 0.5rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-datos);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ── PAGINACIÓN ───────────────────────────────────────────────── */

.paginacion {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pagina {
  min-width: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  text-align: center;
  font-family: var(--fuente-datos);
  font-size: 0.82rem;
  background: var(--superficie);
  font-variant-numeric: tabular-nums;
}

.pagina:hover { border-color: var(--acento); color: var(--acento); }

.pagina-actual {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.pagina-flecha { letter-spacing: 0.04em; }

/* ── RAZONES ──────────────────────────────────────────────────── */

.rejilla-razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 1.5rem;
}

.razon { display: grid; gap: 0.5rem; align-content: start; }

/* Mismo criterio que el título de tarjeta: es un título chico, va
   en la sans para que se lea sin esfuerzo. */
.razon h3 {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  padding-top: 0.9rem;
  border-top: 1px solid var(--acento);
}

.razon p { margin: 0; color: var(--texto-tenue); font-size: 0.95rem; }

/* ── CIUDADES ─────────────────────────────────────────────────── */

.rejilla-ciudades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.ciudad {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  isolation: isolate;
}

.ciudad img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.ciudad-texto {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  color: #fff;
  background: linear-gradient(to top, rgb(15 16 18 / 0.85), transparent);
  display: grid;
  gap: 0.3rem;
}

.ciudad-texto h3 { font-size: 1.5rem; color: #fff; }

.ciudad-texto a {
  color: var(--acento-claro);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── MIGAS DE PAN ─────────────────────────────────────────────── */

.migas {
  background: var(--superficie-alterna);
  border-bottom: 1px solid var(--linea);
  padding-block: 0.85rem;
  font-size: 0.8rem;
  color: var(--texto-tenue);
}

.migas .contenedor { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.migas a { color: var(--texto-tenue); text-decoration: none; }
.migas a:hover { color: var(--acento); }
.migas-actual { color: var(--texto); }

/* ── GALERÍA ──────────────────────────────────────────────────── */

.galeria { padding-block: clamp(1.25rem, 2.5vw, 2rem); }

.galeria-principal {
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-alterna);
}

.galeria-principal img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.galeria-miniaturas {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.miniatura {
  flex: 0 0 auto;
  width: 110px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.miniatura img { width: 110px; height: 76px; object-fit: cover; }
.miniatura:hover { border-color: var(--acento-claro); }
.miniatura-activa { border-color: var(--acento); border-width: 2px; }

.galeria-sinfoto {
  background: var(--superficie-alterna);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--texto-tenue);
}

/* ── DETALLE ──────────────────────────────────────────────────── */

.detalle-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 940px) {
  .detalle-columnas { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); }
  .detalle-lateral { order: 2; }
}

/* En celular el precio y el botón de WhatsApp van ARRIBA de la
   descripción: es lo primero que la gente busca. */
@media (max-width: 939px) {
  .detalle-lateral { order: -1; }
}

.detalle-insignias {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.detalle-lugar {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.detalle-titulo { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); }

.detalle-aviso {
  background: var(--superficie-alterna);
  border-left: 2px solid var(--acento-linea);
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
}

.detalle-aviso-cerrado { border-left-color: #2c2d2a; }
.detalle-aviso a { color: var(--acento); }

.caracteristicas {
  list-style: none;
  margin: 1.75rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1rem;
}

.caracteristicas li { display: grid; gap: 0.15rem; }

.caracteristica-numero {
  font-family: var(--fuente-datos);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.caracteristica-nombre {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.detalle-subtitulo {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.detalle-descripcion { margin: 0; max-width: var(--ancho-texto); }

.amenidades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 1.25rem;
}

.amenidades li {
  padding-left: 1.1rem;
  position: relative;
  font-size: 0.95rem;
}

.amenidades li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 1px;
  background: var(--acento-linea);
}

.detalle-ubicacion { margin: 0; }

/* ── PANEL DE CONTACTO (lateral del detalle) ──────────────────── */

.panel-contacto {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: grid;
  gap: 0.75rem;
  position: sticky;
  top: 90px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
}

.panel-precio {
  margin: 0 0 0.35rem;
  font-family: var(--fuente-datos);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}


.panel-datos {
  margin: 0.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.panel-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.panel-datos dt { color: var(--texto-tenue); }
.panel-datos dd { margin: 0; text-align: right; }

/* ── CONTACTO ─────────────────────────────────────────────────── */

.contacto-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 860px) {
  .contacto-columnas { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); }
}

.contacto-vias { display: grid; gap: 0.75rem; align-content: start; }

.via {
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
}

.via-destacada { border-color: var(--wa); border-left-width: 3px; }
a.via:hover { border-color: var(--acento); }

.via-etiqueta {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.via-valor { font-size: 1.05rem; }
.via-nota { font-size: 0.8rem; color: var(--texto-tenue); }
.via-redes { display: flex; gap: 1rem; font-size: 0.95rem; }
.via-redes a { color: var(--acento); }

/* ── FORMULARIOS ──────────────────────────────────────────────── */

.formulario { display: grid; gap: 1.1rem; max-width: 560px; }

.campo { display: grid; gap: 0.3rem; }

.campo label { font-size: 0.88rem; }

.obligatorio { color: #a33; }

.campo input,
.campo textarea {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  background: var(--superficie);
  color: var(--texto);
}

.campo textarea { resize: vertical; line-height: 1.5; }

.ayuda { font-size: 0.8rem; color: var(--texto-tenue); }

.error-campo { font-size: 0.83rem; color: var(--error-texto); }

.campo:has(.error-campo) input,
.campo:has(.error-campo) textarea {
  border-color: var(--error-borde);
  background: #fefafa;
}

.aviso-error {
  background: var(--error-fondo);
  border: 1px solid var(--error-borde);
  color: var(--error-texto);
  padding: 0.85rem 1rem;
  border-radius: var(--radio);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}

/* ⚠ TRAMPA ANTI-ROBOTS
   Este campo tiene que ser invisible para las personas pero seguir
   existiendo en el HTML para que los robots lo llenen.
   NO usamos display:none porque algunos robots lo detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mensaje-exito {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--wa);
  border-radius: var(--radio);
  padding: 2rem;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.mensaje-exito h2 {
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 1.2rem;
}
.mensaje-exito p { margin: 0; }
.mensaje-exito .boton { margin-top: 0.75rem; }

/* ── ESTADO VACÍO Y PENDIENTES ────────────────────────────────── */

.vacio {
  background: var(--superficie);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  display: grid;
  gap: 1.15rem;
  justify-items: center;
}

.vacio p { margin: 0; color: var(--texto-tenue); }

/* Marca visualmente el contenido que falta escribir, para que no
   se publique por olvido creyendo que ya estaba listo. */
.pendiente {
  background: #fdf6e6;
  border: 1px dashed #d9b96a;
  border-radius: var(--radio);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  gap: 0.6rem;
}

.pendiente p { margin: 0; }

.pendiente-etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6d1f;
}

/* ── CIERRE ───────────────────────────────────────────────────── */

.cierre { background: var(--nav-fondo); color: var(--nav-texto); }

.cierre-interior {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}

.cierre .seccion-titulo { color: #fff; }
.cierre p { margin: 0; color: var(--nav-tenue); max-width: 48ch; }

/* ── BOTÓN FLOTANTE DE WHATSAPP ───────────────────────────────── */

/* El ícono blanco sobre el verde brillante daba 2:1 de contraste;
   con el verde oscuro sube a 3.1:1, que es el mínimo para un
   elemento gráfico. Sigue leyéndose como WhatsApp, sin encandilar. */
.wa-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wa-oscuro);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}

.wa-flotante:hover { background: #157a45; }

/* ── PIE ──────────────────────────────────────────────────────── */

.pie {
  background: var(--nav-fondo);
  color: var(--nav-tenue);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.92rem;
}

.pie-interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.pie-columna { display: grid; gap: 0.75rem; align-content: start; }

.pie-marca img { height: 72px; width: auto; }

.pie-lema { margin: 0; max-width: 34ch; }

.pie-redes { display: flex; gap: 1.25rem; }
.pie-redes a { color: var(--acento-claro); text-decoration: none; font-size: 0.88rem; }
.pie-redes a:hover { color: #fff; }

.pie-titulo {
  font-family: var(--fuente-datos);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  margin: 0;
}

.pie-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pie-lista a { text-decoration: none; }
.pie-lista a:hover { color: #fff; }
.pie-dato { color: rgb(255 255 255 / 0.45); }

/* ── El versículo del pie ──
   Negro sobre el fondo oscuro del pie: se insinúa apenas, como una
   marca de agua. Está pedido así a propósito.

   Para volverlo legible de nuevo, cambiá --pie-versiculo-color en
   el bloque de variables de arriba: #8a887f lo deja discreto pero
   leíble, y #b39352 es el dorado con el que estaba antes. */
.pie-versiculo {
  text-align: center;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  color: var(--pie-versiculo-color);
  letter-spacing: 0.18em;
}

.pie-legal {
  margin-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding: 1.25rem var(--margen-lateral);
  text-align: center;
  font-size: 0.8rem;
  color: rgb(255 255 255 / 0.4);
}

.pie-legal p { margin: 0; }

/* ── PÁGINAS DE ERROR ─────────────────────────────────────────── */

.error-pagina {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

.error-acciones {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.75rem;
}

.error-detalle {
  margin-top: 2.5rem;
  width: 100%;
  text-align: left;
  background: #fdf6e6;
  border: 1px dashed #d9b96a;
  border-radius: var(--radio);
  padding: 1.25rem;
}

.error-detalle pre {
  overflow-x: auto;
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
  color: var(--texto);
}

/* ── CÓDIGO DE REFERENCIA ─────────────────────────────────────────
   El detalle que hace propia esta dirección. En un negocio que
   cierra por WhatsApp, un código corto que el cliente pueda dictar
   ("me interesa la PLG-004") ahorra media conversación.
   Va en monoespaciada y en dorado: se lee como número de catálogo,
   sin competir con el título. */

.referencia {
  font-family: var(--fuente-datos);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--acento);
  white-space: nowrap;
}

.referencia-grande { font-size: 0.8rem; }

/* Encabezado de tarjeta: referencia a la izquierda, ubicación a la
   derecha, separadas por una línea fina. */
.tarjeta-encabezado,
.detalle-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linea);
}

.detalle-encabezado {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
}

.panel-ref {
  font-family: var(--fuente-datos);
  font-size: 0.82rem;
  color: var(--acento);
}