/* ============================================================================
   Tipografía
   ----------------------------------------------------------------------------
   Figtree, alojada aquí mismo. Es una variable font: un solo archivo de 20 KB
   cubre todos los grosores, en lugar de descargar uno por peso.

   Se sirve desde el propio dominio y no desde Google Fonts por tres razones:
   carga antes (sin conexión a un tercero), no filtra las visitas a nadie, y el
   sitio no se queda sin su letra si ese servicio falla.

   Licencia SIL Open Font 1.1 — ver assets/fonts/LICENSE-Figtree.txt
   ========================================================================== */

/*
 * Figtree, la tipografía del sitio.
 *
 * Se eligió por parecido con la de realtor.com: geométrica, de altura de x
 * alta, con la "a" de doble piso de ojal pequeño y la "y" de cola recta. La de
 * realtor.com es propietaria y no se puede incrustar legalmente; Figtree es la
 * equivalente abierta más cercana (licencia SIL Open Font, ver LICENSE-Figtree).
 *
 * Es una fuente variable: un solo archivo cubre todos los pesos, así que pesa
 * menos que las cinco variantes sueltas que harían falta.
 */
@font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/figtree-latin.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: normal;
    /* swap: el texto se ve de inmediato con la letra del sistema y cambia al
       llegar la definitiva. Nunca hay un hueco en blanco esperando. */
    font-display: swap;
    /* Alfabeto básico, que cubre el español (incluidas ñ, tildes y ¿¡). */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caracteres extendidos. Solo se descarga si la página los usa, así que en
   español y en inglés normalmente ni se pide. */
@font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   Natural Homes HN — sistema visual
   ----------------------------------------------------------------------------
   Dirección: portal inmobiliario moderno, al estilo de los grandes buscadores
   de vivienda. Sans-serif en todo, azul de marca para lo accionable, esquinas
   redondeadas, sombras suaves y mucho contraste entre el texto y el fondo.

   Reglas de la casa:
   - Ni una tipografía serif. La legibilidad en pantalla manda.
   - Un solo azul para todo lo que se pueda pulsar. Si es azul, se hace clic.
   - Los iconos son SVG de trazo, nunca emojis.
   - El color nunca es la única señal: siempre va con texto o icono.
   ========================================================================== */

:root {
    /* ── Color ─────────────────────────────────────────────────────────── */
    --azul: #0561D4;            /* marca — 5.4:1 sobre blanco, cumple AA */
    --azul-oscuro: #04429A;
    --azul-claro: #E8F0FE;
    --azul-borde: #9EC2F5;

    --tinta: #21232B;           /* titulares y texto principal */
    --tinta-2: #444752;         /* texto corrido */
    --tinta-3: #5D6472;         /* auxiliar — 5.6:1 sobre blanco */
    --ambar: #8A5B0B;           /* conversión a lempiras — 5.9:1 sobre blanco */
    --linea: #D9DCE3;
    --linea-suave: #E9EBEF;
    --fondo: #F5F6F8;           /* gris de página */
    --blanco: #fff;

    --verde: #0E7A4B;           /* disponible / venta */
    --verde-claro: #E4F4EC;
    --naranja: #B45309;         /* reservado */
    --naranja-claro: #FDF3E4;
    --rojo: #B3261E;            /* vendido / error */
    --rojo-claro: #FCEEED;

    /* ── Tipografía ────────────────────────────────────────────────────── */
    /* Pila de sistema: se ve nativa en cada equipo y no depende de descargar
       ninguna fuente, lo que además evita una petición bloqueante. */
    --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* ── Medidas ───────────────────────────────────────────────────────── */
    --ancho: 1600px;
    --nav: 64px;
    --riel: 0px;
    --r: 8px;                   /* radio general */
    --r-chico: 6px;
    --r-pastilla: 999px;
    --sombra: 0 1px 3px rgba(33, 35, 43, 0.12);
    --sombra-media: 0 2px 10px rgba(33, 35, 43, 0.13);
    --sombra-alta: 0 8px 28px rgba(33, 35, 43, 0.18);
    --transicion: 150ms ease;
}

@media (min-width: 1100px) { :root { --riel: 68px; } }

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

html { -webkit-text-size-adjust: 100%; }
html, body, #root { width: 100%; overflow-x: hidden; }

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tinta-2);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Cifras de ancho fijo: los precios de una columna quedan alineados en
       vertical en lugar de bailar según los dígitos. */
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

/* En una letra geométrica, los titulares grandes necesitan tracking negativo
   para no verse sueltos; los pequeños, ninguno. De ahí que cada tamaño lleve
   el suyo en vez de un valor único para todos. */
h1, h2, h3, h4 { font-weight: 700; color: var(--tinta); line-height: 1.2; letter-spacing: -0.015em; }

.d1 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.032em; line-height: 1.08; }
.d2 { font-size: clamp(25px, 2.7vw, 36px); font-weight: 700; letter-spacing: -0.024em; }
.d3 { font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -0.016em; }
.d4 { font-size: 18px; font-weight: 700; letter-spacing: -0.008em; }

/* Rótulo de sección: aquí es un titular pequeño en azul, no versalitas. */
.rotulo {
    font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
    color: var(--azul); text-transform: none;
}
.rotulo-oro { color: var(--azul); }
.rotulo-claro { color: rgba(255, 255, 255, 0.9); }

.entradilla { font-size: 17px; color: var(--tinta-2); max-width: 62ch; line-height: 1.6; }

::selection { background: var(--azul-claro); color: var(--tinta); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 2px;
    border-radius: var(--r-chico);
}

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

.saltar {
    position: absolute; left: 12px; top: -70px; z-index: 999;
    background: var(--azul); color: #fff; padding: 13px 22px;
    border-radius: var(--r); font-size: 15px; font-weight: 600;
    transition: top var(--transicion);
}
.saltar:focus { top: 10px; }

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

/* ── Rejilla ──────────────────────────────────────────────────────────── */

.env { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; width: 100%; }
.env-medio { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.env-angosto { max-width: 740px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .env, .env-medio, .env-angosto { padding: 0 32px; } }

.bloque { padding-block: clamp(44px, 5vw, 76px); }
.bloque-corto { padding-block: clamp(28px, 3vw, 44px); }
.hueso { background: var(--fondo); }
.oscuro { background: var(--tinta); color: rgba(255, 255, 255, 0.85); }
.oscuro h1, .oscuro h2, .oscuro h3 { color: #fff; }

.cab-bloque { margin-bottom: clamp(22px, 2.6vw, 36px); }
.cab-bloque .rotulo { display: block; margin-bottom: 10px; }
.cab-bloque .entradilla { margin-top: 12px; }
.cab-linea { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 12px 24px;
    border: 1px solid transparent; border-radius: var(--r);
    font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background var(--transicion), color var(--transicion),
                border-color var(--transicion), box-shadow var(--transicion);
}
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn svg { flex-shrink: 0; }

.btn-solido { background: var(--azul); color: #fff; }
.btn-solido:hover:not(:disabled) { background: var(--azul-oscuro); }

.btn-linea { background: var(--blanco); color: var(--azul); border-color: var(--azul); }
.btn-linea:hover { background: var(--azul-claro); }

.btn-claro { background: var(--blanco); color: var(--tinta); }
.btn-claro:hover { background: var(--fondo); }

.btn-oro { background: var(--azul); color: #fff; }
.btn-oro:hover { background: var(--azul-oscuro); }

.btn-ancho { width: 100%; }
.btn-chico { min-height: 38px; padding: 9px 16px; font-size: 14px; }

.enlace {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    font-size: 15px; font-weight: 700; color: var(--azul); padding: 4px 0;
}
.enlace:hover { text-decoration: underline; }
.enlace-claro { color: #fff; }

/* ── Riel lateral ─────────────────────────────────────────────────────── */

.riel {
    display: none;
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--riel);
    background: var(--blanco); border-right: 1px solid var(--linea-suave);
    z-index: 120; padding-top: calc(var(--nav) + 10px);
    flex-direction: column; align-items: center;
}
@media (min-width: 1100px) { .riel { display: flex; } }

.riel-btn {
    width: 100%; padding: 12px 4px; background: none; border: none;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    gap: 5px; color: var(--tinta-3); position: relative;
    transition: color var(--transicion), background var(--transicion);
}
.riel-btn span { font-size: 10.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.riel-btn:hover { color: var(--azul); background: var(--fondo); }
.riel-btn[aria-current="page"] { color: var(--azul); }
.riel-btn[aria-current="page"] svg {
    background: var(--azul-claro); border-radius: var(--r-pastilla);
    padding: 5px; width: 32px; height: 32px;
}
.riel-globo {
    position: absolute; top: 6px; right: 14px;
    min-width: 17px; height: 17px; padding: 0 5px;
    background: var(--azul); color: #fff; border-radius: var(--r-pastilla);
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.lienzo { margin-left: var(--riel); }

/* ── Barra superior ───────────────────────────────────────────────────── */

.nav {
    position: fixed; top: 0; left: var(--riel); right: 0; height: var(--nav);
    z-index: 130; display: flex; align-items: center; gap: 16px;
    padding: 0 16px; background: var(--blanco);
    border-bottom: 1px solid var(--linea-suave);
    transition: background var(--transicion), border-color var(--transicion);
}
@media (min-width: 768px) { .nav { padding: 0 24px; } }

/* Sobre una foto a sangre la barra flota transparente hasta hacer scroll. */
.nav-transparente {
    background: transparent; border-bottom-color: transparent;
    box-shadow: none;
}
.nav-transparente .nav-enlace,
.nav-transparente .nav-marca-texto,
.nav-transparente .nav-icono { color: #fff; }
.nav-transparente .nav-marca-simbolo { color: #fff; }
.nav-transparente .idioma { border-color: rgba(255, 255, 255, 0.5); }
.nav-transparente .idioma button { color: rgba(255, 255, 255, 0.9); }
.nav-transparente .idioma button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.22); color: #fff; }
.nav-transparente .menu-btn { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.nav-transparente .nav-marca-texto small { color: rgba(255, 255, 255, 0.8); }

.nav-marca {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: none; border: none; flex-shrink: 0;
}
.nav-marca-simbolo { color: var(--azul); display: flex; }
.nav-marca-texto {
    font-size: 18px; font-weight: 800; color: var(--tinta);
    letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap;
}
.nav-marca-texto small {
    display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--tinta-3); margin-top: 2px;
}

.nav-links { display: none; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-enlace {
    background: none; border: none; cursor: pointer;
    padding: 9px 14px; border-radius: var(--r-chico);
    font-size: 15px; font-weight: 600; color: var(--tinta);
    transition: background var(--transicion);
}
.nav-enlace:hover { background: var(--fondo); }
.nav-transparente .nav-enlace:hover { background: rgba(255, 255, 255, 0.18); }
.nav-enlace[aria-current="page"] { color: var(--azul); }
.nav-transparente .nav-enlace[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; }

.nav-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-icono {
    background: none; border: none; cursor: pointer; color: var(--tinta);
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    border-radius: var(--r-chico); font-size: 14px; font-weight: 600;
}
.nav-icono:hover { background: var(--fondo); }
@media (min-width: 1100px) { .nav-favoritos { display: none; } }

.idioma { display: flex; border: 1px solid var(--linea); border-radius: var(--r-chico); overflow: hidden; }
.idioma button {
    background: none; border: none; cursor: pointer;
    padding: 7px 11px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; color: var(--tinta-3);
}
.idioma button[aria-pressed="true"] { background: var(--azul); color: #fff; }

.menu-btn {
    background: none; border: 1px solid var(--linea); border-radius: var(--r-chico);
    padding: 10px; cursor: pointer; display: flex; color: var(--tinta);
}
@media (min-width: 1024px) { .menu-btn { display: none; } }

.menu-desplegado {
    position: fixed; top: var(--nav); left: var(--riel); right: 0; z-index: 125;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    padding: 8px 16px 20px; max-height: calc(100vh - var(--nav)); overflow-y: auto;
    box-shadow: var(--sombra-media);
}
.menu-desplegado button {
    display: block; width: 100%; text-align: left; background: none; border: none;
    border-bottom: 1px solid var(--linea-suave); padding: 16px 4px; cursor: pointer;
    font-size: 16px; font-weight: 600; color: var(--tinta);
}
.menu-desplegado button[aria-current="page"] { color: var(--azul); }

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

.portada { position: relative; min-height: min(72vh, 640px); display: flex; align-items: center; }
.portada-media { position: absolute; inset: 0; overflow: hidden; background: var(--tinta); }
.portada-media img { width: 100%; height: 100%; object-fit: cover; }
.portada-velo {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(20, 22, 28, 0.55) 0, rgba(20, 22, 28, 0) 170px),
        linear-gradient(to bottom, rgba(20, 22, 28, 0.34), rgba(20, 22, 28, 0.5));
}
.portada-cuerpo { position: relative; width: 100%; padding: calc(var(--nav) + 40px) 0 44px; }
.portada h1 { color: #fff; max-width: 18ch; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.portada-bajada {
    color: rgba(255, 255, 255, 0.94); margin-top: 14px;
    font-size: clamp(16px, 1.3vw, 19px); max-width: 54ch;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.portada .rotulo { margin-bottom: 14px; display: block; }

.encabezado { min-height: 300px; }
.encabezado .portada-cuerpo { padding-top: calc(var(--nav) + 30px); padding-bottom: 34px; }

/* ── Buscador de la portada ───────────────────────────────────────────── */

.buscador-hero {
    margin-top: 26px; background: var(--blanco);
    border-radius: var(--r); max-width: 780px;
    box-shadow: var(--sombra-alta); overflow: hidden;
}
.buscador-pestanas { display: flex; border-bottom: 1px solid var(--linea-suave); }
.buscador-pestanas button {
    flex: 1; background: none; border: none; cursor: pointer;
    padding: 15px 10px; font-size: 15px; font-weight: 700; color: var(--tinta-3);
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.buscador-pestanas button:hover { color: var(--tinta); }
.buscador-pestanas button[aria-pressed="true"] { color: var(--azul); border-bottom-color: var(--azul); }
.buscador-fila { display: flex; flex-direction: column; padding: 10px; gap: 8px; }
@media (min-width: 760px) { .buscador-fila { flex-direction: row; align-items: center; } }
.buscador-campo { display: flex; align-items: center; gap: 11px; flex: 1; padding: 0 10px; min-width: 0; }
.buscador-campo input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    height: 48px; font-size: 16px; color: var(--tinta);
}
.buscador-campo input::placeholder { color: var(--tinta-3); }
.buscador-sep { display: none; width: 1px; align-self: stretch; background: var(--linea-suave); margin: 8px 0; }
@media (min-width: 760px) { .buscador-sep { display: block; } }
.buscador-select {
    border: none; background: none; outline: none; cursor: pointer;
    height: 48px; padding: 0 10px; font-size: 15px; color: var(--tinta-2); max-width: 200px;
}

/* ── Tarjeta de propiedad ─────────────────────────────────────────────── */

.rejilla { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1360px) { .rejilla-4 { grid-template-columns: repeat(4, 1fr); } }

.ficha {
    display: block; background: var(--blanco); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--sombra); position: relative;
    border: 1px solid var(--linea-suave);
    transition: box-shadow var(--transicion), transform var(--transicion);
}
.ficha:hover { box-shadow: var(--sombra-alta); text-decoration: none; }
.ficha-media { position: relative; overflow: hidden; background: var(--fondo); aspect-ratio: 4 / 3; }
.ficha-media img { width: 100%; height: 100%; object-fit: cover; }

.ficha-cuerpo { padding: 14px 16px 16px; }
.ficha-precio {
    font-size: 23px; font-weight: 800; color: var(--tinta);
    letter-spacing: -0.03em; line-height: 1.15;
}
.ficha-precio span { font-size: 14px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }

/* Equivalencia en lempiras: más pequeña y en dorado, para que se lea como
   dato de apoyo y no compita con el precio principal. */
.ficha-precio .precio-lempiras,
.precio-lempiras {
    display: block; font-family: var(--sans); font-size: 12.5px;
    font-weight: 500; letter-spacing: 0.01em; text-transform: none;
    color: var(--ambar); margin-top: 4px;
}
.agente-nota {
    font-size: 12.5px; color: var(--tinta-3); margin-top: 10px; line-height: 1.5;
}
.agente-nota span { display: block; color: var(--tinta); font-weight: 600; margin-top: 2px; }

.precio-lempiras-grande { font-size: 14.5px; margin-top: 8px; }
.precio-lempiras small {
    display: block; font-size: 10.5px; color: var(--tinta-3);
    letter-spacing: 0.03em; margin-top: 5px; font-weight: 400;
}
.ficha-datos {
    display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px;
    font-size: 15px; color: var(--tinta-2); align-items: center;
}
.ficha-datos li { display: flex; align-items: center; gap: 5px; }
/* El separador va DESPUÉS de cada dato, no antes del siguiente: si se pone
   antes, al partirse la línea el punto queda huérfano al principio y parece
   un error de maquetación. */
.ficha-datos li:not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--linea); }
.ficha-datos li b { font-weight: 700; color: var(--tinta); }
.ficha-titulo {
    font-size: 15px; font-weight: 400; color: var(--tinta-2); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha-zona {
    display: flex; align-items: center; gap: 5px;
    font-size: 14px; color: var(--tinta-3); margin-top: 6px;
}
.ficha-nota { font-size: 14px; color: var(--tinta-3); }
.ficha-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* Distintivos sobre la foto: pastillas redondeadas. */
.distintivos {
    position: absolute; top: 12px; left: 12px; right: 54px; z-index: 2;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.distintivo {
    font-size: 12px; font-weight: 700; padding: 6px 11px;
    border-radius: var(--r-pastilla); background: rgba(255, 255, 255, 0.95);
    color: var(--tinta); box-shadow: var(--sombra);
}
.distintivo-venta { background: var(--azul); color: #fff; }
.distintivo-alquiler { background: var(--tinta); color: #fff; }
.distintivo-cerrado { background: var(--rojo); color: #fff; }
.distintivo-reservado { background: var(--naranja); color: #fff; }

.corazon {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 36px; height: 36px; border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.94); color: var(--tinta);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-pastilla); box-shadow: var(--sombra);
    transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.corazon:hover { transform: scale(1.08); }
.corazon[aria-pressed="true"] { background: var(--azul); color: #fff; }

.sello {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; pointer-events: none; background: rgba(20, 22, 28, 0.5);
}
.sello span {
    background: var(--blanco); color: var(--tinta); border-radius: var(--r-chico);
    font-size: clamp(12px, 1.3vw, 14px); font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 18px;
    box-shadow: var(--sombra-media);
}

.marca-agua {
    position: absolute; right: 10px; bottom: 9px; z-index: 2;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
    pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Carrusel */
.carrusel { position: relative; height: 100%; touch-action: pan-y; }
.carrusel-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: none; cursor: pointer; z-index: 3;
    background: rgba(255, 255, 255, 0.95); color: var(--tinta);
    border-radius: var(--r-pastilla); box-shadow: var(--sombra);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--transicion);
}
.ficha:hover .carrusel-flecha, .carrusel:focus-within .carrusel-flecha { opacity: 1; }
.carrusel-prev { left: 10px; }
.carrusel-next { right: 10px; }
.carrusel-puntos {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; gap: 5px;
}
.carrusel-puntos button {
    width: 6px; height: 6px; border: none; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.6); border-radius: var(--r-pastilla);
    transition: background var(--transicion), transform var(--transicion);
}
.carrusel-puntos button[aria-current="true"] { background: #fff; transform: scale(1.4); }

/* Tarjeta horizontal */
.ficha-fila { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ficha-fila { grid-template-columns: 230px 1fr; } }
.ficha-fila .ficha-media { aspect-ratio: 4 / 3; height: 100%; }
.ficha-fila .ficha-cuerpo { padding: 14px 16px; }

/* ── Barra de resultados ──────────────────────────────────────────────── */

.barra {
    position: sticky; top: var(--nav); z-index: 90; background: var(--blanco);
    border-bottom: 1px solid var(--linea-suave);
}
.barra-inner {
    display: flex; gap: 8px; align-items: center; padding: 10px 16px;
    overflow-x: auto; scrollbar-width: none;
}
.barra-inner::-webkit-scrollbar { display: none; }

.pastel {
    display: inline-flex; align-items: center; gap: 7px; min-height: 42px;
    padding: 10px 16px; border: 1px solid var(--linea);
    background: var(--blanco); cursor: pointer; border-radius: var(--r-chico);
    font-size: 15px; font-weight: 600; color: var(--tinta); white-space: nowrap;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.pastel:hover { border-color: var(--tinta-3); }
.pastel-activo { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); color: var(--azul); }
.pastel-cuenta {
    background: var(--azul); color: #fff; border-radius: var(--r-pastilla);
    min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

.busca-linea {
    display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 200px;
    border: 1px solid var(--linea); border-radius: var(--r-chico);
    background: var(--blanco); padding: 0 14px; min-height: 42px;
}
.busca-linea:focus-within { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.busca-linea input { flex: 1; min-width: 0; border: none; outline: none; background: none; height: 40px; font-size: 15px; }
.busca-limpiar { border: none; background: none; cursor: pointer; color: var(--tinta-3); display: flex; padding: 4px; }

.vistas { display: flex; border: 1px solid var(--linea); border-radius: var(--r-chico); overflow: hidden; margin-left: auto; }
.vistas button {
    background: var(--blanco); border: none; cursor: pointer; padding: 11px 14px;
    display: flex; align-items: center; gap: 7px; color: var(--tinta-2);
    font-size: 14px; font-weight: 600; border-left: 1px solid var(--linea-suave);
}
.vistas button:first-child { border-left: none; }
.vistas button[aria-pressed="true"] { background: var(--azul); color: #fff; }
.vistas span { display: none; }
@media (min-width: 900px) { .vistas span { display: inline; } }

.resumen { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.resumen-total { font-size: 18px; color: var(--tinta-2); }
.resumen-total b { font-weight: 800; color: var(--tinta); font-size: 22px; }
.orden { display: flex; align-items: center; gap: 10px; }
.orden select {
    border: 1px solid var(--linea); border-radius: var(--r-chico); background: var(--blanco);
    padding: 9px 12px; font-size: 14px; cursor: pointer; color: var(--tinta);
}
.orden .rotulo { color: var(--tinta-3); font-weight: 600; }

/* ── Panel de filtros ─────────────────────────────────────────────────── */

.panel-fondo { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: flex-end; }
.panel-velo { position: absolute; inset: 0; background: rgba(20, 22, 28, 0.5); border: none; padding: 0; cursor: pointer; }
.panel { position: relative; width: 100%; max-width: 540px; height: 100%; background: var(--blanco); display: flex; flex-direction: column; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--linea-suave); }
.panel-cerrar { background: none; border: none; cursor: pointer; color: var(--tinta); display: flex; padding: 6px; border-radius: var(--r-chico); }
.panel-cerrar:hover { background: var(--fondo); }
.panel-cuerpo { flex: 1; overflow-y: auto; padding: 4px 24px 120px; }
.panel-pie {
    position: absolute; left: 0; right: 0; bottom: 0; background: var(--blanco);
    border-top: 1px solid var(--linea); display: flex; gap: 14px;
    align-items: center; justify-content: space-between;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(33, 35, 43, 0.08);
}

.grupo { border-bottom: 1px solid var(--linea-suave); padding: 22px 0; }
.grupo:last-child { border-bottom: none; }
.grupo > .rotulo { display: block; margin-bottom: 14px; font-size: 16px; color: var(--tinta); font-weight: 700; }
.subgrupo + .subgrupo { margin-top: 18px; }
.subgrupo-titulo { font-size: 14px; color: var(--tinta-3); margin-bottom: 9px; font-weight: 600; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
    padding: 10px 16px; border: 1px solid var(--linea); background: var(--blanco);
    cursor: pointer; border-radius: var(--r-pastilla); font-size: 14.5px; color: var(--tinta-2);
    transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.opcion:hover { border-color: var(--tinta-3); }
.opcion[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #fff; font-weight: 600; }

.opciones-tipo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 520px) { .opciones-tipo { grid-template-columns: repeat(3, 1fr); } }
.tipo {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px; border: 1px solid var(--linea); background: var(--blanco);
    cursor: pointer; border-radius: var(--r); text-align: left;
    font-size: 14px; font-weight: 600; color: var(--tinta-2);
}
.tipo:hover { border-color: var(--tinta-3); }
.tipo[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.tipo svg { color: var(--tinta-3); }
.tipo[aria-pressed="true"] svg { color: var(--azul); }

.zona-grupo + .zona-grupo { margin-top: 20px; }
.zona-grupo h4 { font-size: 14px; font-weight: 700; color: var(--tinta); margin-bottom: 10px; }

/* ── Formularios ──────────────────────────────────────────────────────── */

.campo + .campo { margin-top: 16px; }
.etiqueta { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); margin-bottom: 7px; }
.entrada, .selector, .area {
    width: 100%; padding: 12px 14px; border: 1px solid var(--linea);
    border-radius: var(--r-chico); background: var(--blanco); font-size: 16px;
    outline: none; color: var(--tinta); transition: border-color var(--transicion), box-shadow var(--transicion);
}
.entrada:focus, .selector:focus, .area:focus { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.entrada[aria-invalid="true"], .area[aria-invalid="true"], .selector[aria-invalid="true"] { border-color: var(--rojo); }
.area { resize: vertical; min-height: 120px; line-height: 1.6; }
.error { color: var(--rojo); font-size: 13.5px; margin-top: 6px; }
.rejilla-campos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .rejilla-campos-2 { grid-template-columns: repeat(2, 1fr); }
    .rejilla-campos-3 { grid-template-columns: repeat(3, 1fr); }
}
.rejilla-campos .campo + .campo { margin-top: 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.mensaje { padding: 14px 16px; border-radius: var(--r-chico); font-size: 15px; margin-top: 16px; border: 1px solid; }
.mensaje-ok { background: var(--verde-claro); border-color: #B7DEC9; color: #0B5C39; }
.mensaje-mal { background: var(--rojo-claro); border-color: #EFC6C3; color: var(--rojo); }

/* Subida de fotos en el formulario público */
.soltar {
    border: 2px dashed var(--linea); border-radius: var(--r); padding: 28px 20px;
    text-align: center; background: var(--fondo); cursor: pointer;
    transition: border-color var(--transicion), background var(--transicion);
}
.soltar:hover, .soltar.encima { border-color: var(--azul); background: var(--azul-claro); }
.soltar strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 4px; }
.soltar span { font-size: 14px; color: var(--tinta-3); }
.previsualizacion { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.previsualizacion figure { position: relative; border-radius: var(--r-chico); overflow: hidden; border: 1px solid var(--linea); background: var(--fondo); }
.previsualizacion img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.previsualizacion button {
    position: absolute; top: 5px; right: 5px; width: 26px; height: 26px;
    border: none; border-radius: var(--r-pastilla); cursor: pointer;
    background: rgba(20, 22, 28, 0.75); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.previsualizacion button:hover { background: var(--rojo); }
.previsualizacion figcaption {
    font-size: 11px; color: var(--tinta-3); padding: 5px 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Piezas de contenido ──────────────────────────────────────────────── */

.tarjeta { background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--r); padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--sombra); }
.tarjeta-hueso { background: var(--fondo); border-color: var(--linea-suave); box-shadow: none; }

.mosaico {
    position: relative; display: block; overflow: hidden; cursor: pointer;
    border: none; padding: 0; background: none; aspect-ratio: 4 / 3;
    border-radius: var(--r); box-shadow: var(--sombra);
}
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.mosaico:hover img { transform: scale(1.05); }
.mosaico::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 22, 28, 0.82), rgba(20, 22, 28, 0.05) 60%); }
.mosaico-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; text-align: left; }
.mosaico-texto h3 { color: #fff; font-size: 21px; margin-bottom: 4px; }
.mosaico-texto p { color: rgba(255, 255, 255, 0.88); font-size: 14px; font-weight: 600; }

.servicio { background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--r); padding: 24px; box-shadow: var(--sombra); }
.servicio-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-pastilla); background: var(--azul-claro); color: var(--azul); font-size: 14px; font-weight: 800; margin-bottom: 14px; }
.servicio h3 { font-size: 19px; margin-bottom: 9px; }
.servicio p { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.servicio-icono { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r); background: var(--azul-claro); color: var(--azul); margin-bottom: 14px; }

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--r); padding: 24px 20px; text-align: center; box-shadow: var(--sombra); }
.oscuro .cifra { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.cifra strong { display: block; font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; color: var(--azul); line-height: 1; margin-bottom: 8px; letter-spacing: -0.02em; }
.oscuro .cifra strong { color: #fff; }
.cifra span { font-size: 14px; font-weight: 600; color: var(--tinta-3); }
.oscuro .cifra span { color: rgba(255, 255, 255, 0.75); }

.dupla { display: grid; gap: clamp(24px, 3vw, 52px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .dupla { grid-template-columns: 1fr 1fr; } }
.dupla-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); box-shadow: var(--sombra-media); }
.dupla-media img { width: 100%; height: 100%; object-fit: cover; }

.malla-tipos { display: flex; flex-wrap: wrap; gap: 12px; }
.tipo-celda {
    flex: 1 1 200px; background: var(--blanco); border: 1px solid var(--linea-suave);
    border-radius: var(--r); cursor: pointer; text-align: left; padding: 20px;
    display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra);
    transition: box-shadow var(--transicion), border-color var(--transicion);
}
.tipo-celda:hover { box-shadow: var(--sombra-media); border-color: var(--azul-borde); }
.tipo-celda .d4 { font-weight: 700; color: var(--tinta); }
.tipo-celda .rotulo { color: var(--tinta-3); font-weight: 500; font-size: 14px; }

/* ── Ficha de propiedad ───────────────────────────────────────────────── */

.detalle { display: grid; gap: clamp(22px, 2.6vw, 40px); grid-template-columns: 1fr; align-items: start; }
/*
 * En pantalla ancha, el precio y el botón de consultar van a la izquierda:
 * es lo primero que se lee y no conviene que quede al final del recorrido.
 *
 * El orden del HTML no cambia (galería primero) para que en el teléfono, donde
 * todo va en una columna, se vean antes las fotos que el precio. Solo se
 * reordena visualmente con `order`, que es lo que hace la propiedad.
 */
@media (min-width: 1000px) {
    .detalle { grid-template-columns: 370px minmax(0, 1fr); }
    .detalle > .galeria-columna { order: 2; }
    .detalle > .aside-precio { order: 1; }
}

.galeria { touch-action: pan-y; user-select: none; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fondo); border-radius: var(--r); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }

/* Flechas de la galería. En el teléfono se ven siempre, porque no hay
   posibilidad de pasar el cursor por encima para descubrirlas. */
.galeria-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: none; cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.94); color: var(--tinta);
    border-radius: 999px; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
    transition: background 160ms, opacity 160ms, transform 160ms;
}
.galeria-flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.galeria-flecha:disabled { opacity: 0.35; cursor: default; }
.galeria-prev { left: 12px; }
.galeria-next { right: 12px; }
/*
 * Las flechas se ven siempre, también en escritorio.
 *
 * Antes aparecían solo al pasar el cursor por encima, para no tapar la foto.
 * El problema es que quien no mueve el ratón sobre la imagen nunca descubre
 * que puede cambiarla: la galería parecía una sola foto. Un control que hay
 * que adivinar no es un control.
 *
 * Se quedan algo translúcidas y se afirman al acercarse, que da la pista de
 * que responden sin robarle protagonismo a la fotografía.
 */
@media (min-width: 900px) {
    .galeria-flecha { opacity: 0.82; }
    .galeria:hover .galeria-flecha,
    .galeria:focus-within .galeria-flecha { opacity: 1; }
}

/* Contador de fotos: dice cuántas hay sin tener que contar las miniaturas. */
.galeria-contador {
    /* A la izquierda: la marca de agua ocupa la esquina derecha. */
    position: absolute; left: 12px; bottom: 12px; z-index: 3;
    background: rgba(16, 24, 40, 0.72); color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    padding: 5px 11px; border-radius: 999px;
}
.miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; }
.miniatura { border: none; padding: 0; background: none; cursor: pointer; flex-shrink: 0; position: relative; border-radius: var(--r-chico); overflow: hidden; }
.miniatura img { width: 96px; height: 68px; object-fit: cover; opacity: 0.65; transition: opacity var(--transicion); }
.miniatura[aria-current="true"] img, .miniatura:hover img { opacity: 1; }
.miniatura[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--azul); border-radius: var(--r-chico); }

.aside-precio { border: 1px solid var(--linea); border-radius: var(--r); padding: 24px; background: var(--blanco); box-shadow: var(--sombra-media); }
@media (min-width: 1000px) { .aside-precio { position: sticky; top: calc(var(--nav) + 16px); } }
.aside-precio .rotulo { color: var(--tinta-3); font-size: 14px; font-weight: 600; }
.aside-precio .precio { font-size: clamp(30px, 3vw, 38px); font-weight: 800; color: var(--tinta); line-height: 1.1; letter-spacing: -0.02em; }
.aside-precio .precio span { font-size: 15px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }

.especificaciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .especificaciones { grid-template-columns: repeat(4, 1fr); } }
.especificacion { background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--r); padding: 20px 16px; text-align: center; box-shadow: var(--sombra); }
.especificacion svg { color: var(--azul); margin: 0 auto 10px; }
.especificacion strong { display: block; font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; color: var(--tinta); line-height: 1.2; margin-bottom: 4px; overflow-wrap: anywhere; }
.especificacion span { font-size: 13.5px; color: var(--tinta-3); font-weight: 500; }

.seccion-detalle { border-top: 1px solid var(--linea-suave); padding-top: clamp(24px, 2.6vw, 38px); margin-top: clamp(24px, 2.6vw, 38px); }
.seccion-detalle h2 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 16px; }
.descripcion { white-space: pre-line; line-height: 1.7; font-size: 16px; color: var(--tinta-2); }
.comodidades { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 620px) { .comodidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .comodidades { grid-template-columns: repeat(3, 1fr); } }
.comodidad { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 15px; color: var(--tinta-2); }
.comodidad svg { color: var(--azul); flex-shrink: 0; margin-top: 3px; }

.migas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-3); }
.migas button { background: none; border: none; cursor: pointer; color: var(--azul); font: inherit; padding: 0; }
.migas button:hover { text-decoration: underline; }
.migas svg { color: var(--linea); }

.aviso-aprox { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--tinta-3); line-height: 1.5; margin-top: 14px; }
.aviso-aprox svg { flex-shrink: 0; margin-top: 2px; }

.mapa-inserto { aspect-ratio: 16 / 9; border: 1px solid var(--linea-suave); border-radius: var(--r); overflow: hidden; background: var(--fondo); }
.mapa-inserto iframe { width: 100%; height: 100%; border: none; }

/* ── Vista dividida: mapa + resultados ────────────────────────────────── */

.mapa-split { display: grid; grid-template-columns: 1fr; }

/* Tarjetas dentro del panel del mapa: caben tres por fila, algo más
   apretadas que en el listado normal porque el espacio es menor. */
.rejilla-mapa { grid-template-columns: 1fr; gap: 20px 16px; }
@media (min-width: 700px) { .rejilla.rejilla-mapa { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .rejilla.rejilla-mapa { grid-template-columns: repeat(3, 1fr); } }
.rejilla-mapa .ficha-titulo { font-size: 17px; }
.rejilla-mapa .ficha-datos { gap: 12px; font-size: 12px; }
/* El mapa ocupa menos y el listado más, para que quepan tres propiedades por
   fila en lugar de una o dos: recorrer la búsqueda se vuelve mucho más rápido. */
@media (min-width: 1000px) {
    .mapa-split {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        height: calc(100vh - var(--nav) - 63px);
    }
}
@media (min-width: 1400px) { .mapa-split { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); } }

.mapa-lienzo { width: 100%; height: 58vh; background: #E8EAED; position: relative; }
@media (min-width: 1000px) { .mapa-lienzo { height: 100%; position: sticky; top: 0; } }
.mapa-panel { overflow-y: auto; padding: 18px 16px 40px; background: var(--blanco); }
@media (min-width: 1000px) { .mapa-panel { padding: 20px 24px 40px; } }
/* Tres por fila en pantallas anchas. Antes era una sola columna, lo que
   obligaba a desplazarse muchísimo para recorrer los resultados. */
.mapa-panel .rejilla { grid-template-columns: 1fr; gap: 18px 16px; }
@media (min-width: 760px) { .mapa-panel .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mapa-panel .rejilla { grid-template-columns: repeat(3, 1fr); } }
.mapa-estado { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center; font-size: 15px; color: var(--tinta-3); background: var(--fondo); }
.mapa-aviso { padding: 10px 20px; border-top: 1px solid var(--linea-suave); background: var(--fondo); }
.seleccionada .ficha { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul), var(--sombra-media); }

/* Pin de precio sobre el mapa */
.pin-precio {
    display: inline-block; white-space: nowrap; padding: 6px 11px;
    font: 700 13px/1 var(--sans);
    border-radius: var(--r-pastilla); background: var(--blanco); color: var(--tinta);
    border: 1px solid var(--linea); box-shadow: 0 1px 5px rgba(20, 22, 28, 0.28);
    cursor: pointer; transform: translate(-50%, -50%);
}
.pin-precio.activo { background: var(--azul); color: #fff; border-color: var(--azul); z-index: 10; }
.pin-precio.visto { background: var(--fondo); color: var(--tinta-3); }
.leaflet-container { font-family: var(--sans) !important; }

/* Invitación al asistente en la portada. */
.invitacion {
    display: flex; gap: 28px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; border: 1px solid var(--linea); background: var(--hueso);
    padding: clamp(26px, 3vw, 40px);
}

/* Barra de contacto fija, solo en móvil. En escritorio el botón ya está
   siempre visible en la columna lateral. */
.barra-contacto {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: 14px; justify-content: space-between;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
}
@media (min-width: 1000px) { .barra-contacto { display: none; } }
.barra-contacto-precio { min-width: 0; line-height: 1.25; }
.barra-contacto-precio strong { display: block; font-size: 17px; font-weight: 800; color: var(--tinta); }
.barra-contacto-precio span { display: block; font-size: 11.5px; color: var(--ambar); font-weight: 600; }
.barra-contacto .btn { flex-shrink: 0; }
/* Para que la barra no tape el final de la página. */
@media (max-width: 999px) { .pie { padding-bottom: 76px; } }

/* Barra fija de contacto en la ficha. Solo en móvil: en escritorio el botón
   ya está siempre visible en la columna lateral. */
.barra-contacto {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--blanco); border-top: 1px solid var(--linea);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
}
.barra-contacto strong {
    display: block; font-size: 19px; font-weight: 800; color: var(--tinta);
    letter-spacing: -0.02em; line-height: 1.15;
}
.barra-contacto strong span { font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.barra-contacto > div > span {
    display: block; font-size: 12px; color: var(--ambar); margin-top: 2px; font-weight: 500;
}
.barra-contacto .btn { flex-shrink: 0; }
@media (min-width: 900px) { .barra-contacto { display: none; } }
/* Para que la barra no tape el final de la página. */
@media (max-width: 899px) { .pie-legal { padding-bottom: 90px; } }

/* Selector de moneda: mismo aspecto que el de idioma, pero más estrecho.
   Con el ancho normal, en un teléfono de 390 px la barra se desbordaba y el
   botón del menú quedaba fuera de la pantalla. */
.moneda button { min-width: 28px; padding-inline: 8px; font-size: 12px; }
@media (max-width: 520px) {
    .moneda button { min-width: 24px; padding-inline: 6px; }
    .selector-idioma button { padding-inline: 7px; }
    /* En pantallas muy estrechas el idioma cede sitio: ya está en el menú. */
    .nav-derecha { gap: 6px; }
}
@media (max-width: 400px) {
    .selector-idioma { display: none; }
}

/* ── Asistente ────────────────────────────────────────────────────────── */

.asistente-progreso { display: flex; gap: 6px; margin-bottom: 30px; }
.asistente-progreso span {
    height: 2px; flex: 1; background: var(--linea);
    transition: background var(--transicion);
}
.asistente-progreso span.activo { background: var(--verde); }

.asistente-opciones {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    margin-top: clamp(28px, 3vw, 40px);
}
@media (min-width: 620px) { .asistente-opciones { grid-template-columns: repeat(2, 1fr); } }

.asistente-opcion {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 22px 24px; border: 1px solid var(--linea-fuerte); background: #fff;
    cursor: pointer; border-radius: var(--r); text-align: left;
    font-family: var(--display); font-size: 19px; color: var(--tinta);
    transition: border-color var(--transicion), background var(--transicion);
}
.asistente-opcion:hover { border-color: var(--verde); background: var(--hueso); }
.asistente-opcion[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); }
.asistente-opcion small {
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
}

/* Motivos por los que se propone cada propiedad. */
.razones { margin-top: 14px; display: grid; gap: 7px; }
.razones li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 13px; line-height: 1.5; color: var(--tinta-2);
}
.razones svg { flex-shrink: 0; margin-top: 3px; }

/* ── Paginación ───────────────────────────────────────────────────────── */

.paginacion { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.paginacion button {
    min-width: 42px; height: 42px; padding: 0 13px; border: 1px solid var(--linea);
    background: var(--blanco); cursor: pointer; font-size: 15px; color: var(--tinta-2);
    border-radius: var(--r-chico); display: inline-flex; align-items: center; justify-content: center;
    transition: border-color var(--transicion), background var(--transicion);
}
.paginacion button:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.paginacion button[aria-current="page"] { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
.paginacion button:disabled { opacity: 0.4; cursor: default; }
.paginacion .puntos { border: none; background: none; min-width: 20px; }

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

.pie { background: var(--fondo); color: var(--tinta-2); border-top: 1px solid var(--linea-suave); }
.pie-rejilla { max-width: var(--ancho); margin: 0 auto; padding: clamp(36px, 4vw, 60px) 20px 32px; display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pie-rejilla { grid-template-columns: repeat(2, 1fr); padding-inline: 32px; } }
@media (min-width: 1060px) { .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 44px; } }
.pie h3 { font-size: 15px; font-weight: 700; color: var(--tinta); margin-bottom: 16px; }
.pie-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--azul); }
.pie-marca .nav-marca-texto { color: var(--tinta); }
.pie-nav button { display: block; background: none; border: none; cursor: pointer; color: var(--tinta-2); font-size: 15px; padding: 6px 0; text-align: left; }
.pie-nav button:hover { color: var(--azul); text-decoration: underline; }
.pie-dato { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; }
.pie-dato svg { color: var(--azul); flex-shrink: 0; margin-top: 3px; }
.pie-social { display: flex; gap: 10px; margin-top: 18px; }
.pie-social a {
    width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: var(--r-pastilla);
    display: flex; align-items: center; justify-content: center; color: var(--azul); background: var(--blanco);
    transition: background var(--transicion), color var(--transicion);
}
.pie-social a:hover { background: var(--azul); color: #fff; }
.pie-legal {
    border-top: 1px solid var(--linea); max-width: var(--ancho); margin: 0 auto;
    padding: 20px; display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-3);
}
@media (min-width: 700px) { .pie-legal { padding-inline: 32px; } }
.pie-legal nav { display: flex; gap: 22px; }
.pie-legal button { background: none; border: none; cursor: pointer; color: var(--azul); font: inherit; }
.pie-legal button:hover { text-decoration: underline; }

/* ── Vacíos y error ───────────────────────────────────────────────────── */

.vacio { background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--r); padding: clamp(32px, 4vw, 56px) 24px; text-align: center; box-shadow: var(--sombra); }
.vacio h2 { margin-bottom: 12px; }
.vacio p { color: var(--tinta-2); margin-bottom: 22px; max-width: 46ch; margin-inline: auto; }
.error-404 { min-height: 74vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav) + 40px) 20px 70px; text-align: center; }
.error-404 .codigo { font-size: clamp(64px, 11vw, 130px); font-weight: 800; color: var(--azul-claro); line-height: 0.9; margin-bottom: 8px; }
.ruta-fallida { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--tinta-3); word-break: break-all; margin-bottom: 26px; }

.aviso-idioma {
    position: fixed; left: calc(var(--riel) + 16px); right: 16px; bottom: 16px; z-index: 200;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
    padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    box-shadow: var(--sombra-alta);
}
@media (min-width: 700px) { .aviso-idioma { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }
.aviso-idioma p { font-size: 15px; flex: 1 1 190px; }

.cargando { min-height: 70vh; display: flex; align-items: center; justify-content: center; color: var(--tinta-3); font-size: 15px; }

/* ── Legal ────────────────────────────────────────────────────────────── */

.legal h2 { font-size: 21px; margin: 34px 0 12px; }
.legal p { margin-bottom: 12px; line-height: 1.7; }
.legal .fecha { font-size: 14px; color: var(--tinta-3); }

.foto-rota { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--fondo); color: var(--linea); }

/* ============================================================================
   Interacción
   ----------------------------------------------------------------------------
   Todo lo que se pueda pulsar responde de tres formas: al pasar por encima,
   al presionar y al soltar. Sin esa respuesta la interfaz se siente muerta,
   sobre todo en móvil, donde no existe el "pasar por encima".

   Todo lo de aquí queda anulado por `prefers-reduced-motion`, más abajo.
   ========================================================================== */

/* ── Onda de clic ─────────────────────────────────────────────────────── */
/* Nace donde cae el dedo y se expande. La añade un único escuchador delegado
   en app.js, así que ningún componente tiene que enterarse. */

/* La capa vive fuera del árbol de React y nunca intercepta el ratón. */
#nh-ondas {
    position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden;
}
.onda-marco { position: fixed; overflow: hidden; pointer-events: none; }
.onda {
    position: absolute; border-radius: 50%; pointer-events: none;
    transform: scale(0); opacity: 0.22;
    animation: onda 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes onda {
    to { transform: scale(2.6); opacity: 0; }
}

/* ── Estados de pulsación ─────────────────────────────────────────────── */

.btn, .pastel, .opcion, .tipo, .vistas button, .paginacion button,
.riel-btn, .nav-enlace, .menu-btn, .idioma button, .corazon,
.carrusel-flecha, .miniatura, .tipo-celda, .mosaico, .buscador-pestanas button {
    transition: transform 120ms cubic-bezier(0.2, 0, 0.2, 1),
                background var(--transicion), color var(--transicion),
                border-color var(--transicion), box-shadow var(--transicion);
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled),
.pastel:active, .opcion:active, .tipo:active,
.vistas button:active, .paginacion button:active:not(:disabled),
.menu-btn:active, .idioma button:active, .miniatura:active,
.buscador-pestanas button:active {
    transform: scale(0.97);
}
.corazon:active, .carrusel-flecha:active { transform: scale(0.9); }
.tipo-celda:active, .mosaico:active { transform: scale(0.99); }
.riel-btn:active { transform: scale(0.94); }

/* Elevación al pasar por encima: sutil, solo en dispositivos con puntero. */
@media (hover: hover) {
    .btn-solido:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(5, 97, 212, 0.32); }
    .ficha:hover { transform: translateY(-3px); }
    .ficha:hover .ficha-media img { transform: scale(1.05); }
    .tipo-celda:hover { transform: translateY(-2px); }
}
.ficha { transition: transform 220ms cubic-bezier(0.2, 0.6, 0.3, 1), box-shadow var(--transicion), border-color var(--transicion); }
.ficha-media img { transition: transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1); }

/* ── Favorito: latido al marcar ───────────────────────────────────────── */

@keyframes latido {
    0% { transform: scale(1); }
    35% { transform: scale(1.32); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.corazon.marcando svg { animation: latido 420ms cubic-bezier(0.2, 0.6, 0.3, 1); }

/* ── Esqueleto de carga de las fotos ──────────────────────────────────── */
/* Un rectángulo gris fijo se percibe como un error; un brillo que recorre se
   percibe como "está llegando". */

/* El esqueleto se posiciona sobre su contenedor, así que todos los que
   albergan una foto necesitan ser el marco de referencia. */
/* `.portada-media` no entra aquí: ya está posicionada de forma absoluta y
   volverla relativa la convertía en un elemento flex más, encogiéndola al
   tamaño de la foto. */
.ficha-media, .galeria, .mosaico, .dupla-media, .carrusel {
    position: relative;
}

.foto-esqueleto {
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        var(--fondo) 30%, #EDEFF3 50%, var(--fondo) 70%);
    background-size: 220% 100%;
    animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo {
    from { background-position: 180% 0; }
    to { background-position: -60% 0; }
}

.foto-entra { animation: aparecer 420ms ease-out; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ── Revelado al hacer scroll ─────────────────────────────────────────── */
/* Las secciones entran una vez, al asomar. No se repite al volver a subir:
   repetirlo marea y hace que la página parezca inestable. */

.revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms cubic-bezier(0.2, 0.6, 0.3, 1),
                transform 620ms cubic-bezier(0.2, 0.6, 0.3, 1);
    will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; will-change: auto; }

/* ── Entradas de paneles y avisos ─────────────────────────────────────── */

@keyframes panel-entra { from { transform: translateX(100%); } to { transform: none; } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
.panel { animation: panel-entra 300ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.panel-velo { animation: velo-entra 220ms ease-out; }

@keyframes aviso-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.aviso-idioma { animation: aviso-entra 340ms cubic-bezier(0.2, 0.7, 0.3, 1); }

@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-desplegado { animation: menu-entra 200ms ease-out; }

/* ── Barra superior al hacer scroll ───────────────────────────────────── */

.nav-elevada { box-shadow: 0 1px 12px rgba(33, 35, 43, 0.1); }
/* Flotando sobre una foto la sombra se vería como una raya suelta en medio de
   la imagen, así que ahí se anula. */
.nav-transparente.nav-elevada { box-shadow: none; }

/* ── Sincronía tarjeta ↔ pin del mapa ─────────────────────────────────── */

.seleccionada { scroll-margin-top: 16px; }
.seleccionada .ficha { transition: box-shadow 200ms ease, border-color 200ms ease; }

@keyframes pin-aparece { from { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } to { opacity: 1; } }
.pin-precio { animation: pin-aparece 260ms cubic-bezier(0.2, 0.7, 0.3, 1); transition: background 160ms, color 160ms, border-color 160ms, transform 160ms; }
@media (hover: hover) { .pin-precio:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 20; } }

/* ── Respeto por quien pide menos movimiento ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .onda { display: none; }
    .revelar { opacity: 1; transform: none; transition: none; }
.foto-esqueleto { animation: none; }
    .panel, .panel-velo, .aviso-idioma, .menu-desplegado, .pin-precio,
    .corazon.marcando svg, .foto-entra { animation: none; }
    .btn:active, .pastel:active, .opcion:active, .ficha:hover,
    .tipo-celda:hover, .corazon:active { transform: none; }
}

/* Distancia en la tarjeta, cuando el visitante activó "Cerca de mí". */
.ficha-distancia { margin-left: 6px; color: var(--tinta-3); font-weight: 500; }

/* Aviso de que el orden cambió por la ubicación. */
.aviso-cercania {
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
    font-size: 13.5px; color: var(--tinta-2);
}

/* Datos de la zona: pares clave-valor en la ficha. */
.datos-zona {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px; background: var(--linea); border: 1px solid var(--linea);
    margin-top: 20px;
}
.datos-zona li { background: var(--blanco, #fff); padding: 16px 18px; }
.datos-zona .rotulo { display: block; margin-bottom: 5px; }
.datos-zona strong { font-size: 16px; color: var(--tinta); }

/* ── Comparar ─────────────────────────────────────────────────────────── */

.comparar-envoltura { overflow-x: auto; border: 1px solid var(--linea); }
.comparar { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.comparar th, .comparar td {
    padding: 14px 16px; border-bottom: 1px solid var(--linea); text-align: left;
    vertical-align: middle;
}
.comparar thead th { background: var(--fondo, #F7F8FA); vertical-align: top; width: 22%; }
.comparar thead th:first-child { width: 12%; }
.comparar thead img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-chico, 4px); margin-bottom: 8px; }
.comparar thead span { display: block; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.comparar tbody th {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tinta-3); white-space: nowrap;
}
/* Las filas donde las propiedades difieren: es lo que se busca al comparar. */
.comparar tr.difiere td { background: var(--verde-claro, #EAF0EA); font-weight: 600; color: var(--tinta); }
.comparar tfoot td { padding-top: 18px; }

/* Bajada de precio: se marca en ámbar, el mismo color de la conversión, para
   que se lea como información de precio y no como estado de disponibilidad. */
.distintivo-baja { background: var(--ambar); color: #fff; }
.precio-anterior {
    display: inline-block; margin-left: 10px; font-size: 14px;
    color: var(--tinta-3); text-decoration: line-through; font-weight: 500;
}

/* ============================================================================
   Accesibilidad en móvil
   ----------------------------------------------------------------------------
   Pensado para que el sitio se pueda usar con comodidad a los 70 años, con la
   vista cansada y sin precisión fina en el dedo. Tres reglas:

   1. Nada de texto por debajo de 13 px. El diseño usaba 10 y 12 px en datos
      importantes —zona, habitaciones, la conversión a lempiras— que es
      justo lo que hay que poder leer.

   2. Todo lo que se toca mide al menos 48 px de alto. Es la recomendación de
      Apple y Google, y por debajo de eso los errores de pulsación se disparan.

   3. Más aire entre elementos, para no pulsar el de al lado sin querer.

   Solo se aplica en pantallas pequeñas: en escritorio el diseño original ya
   es cómodo y agrandarlo lo estropearía.
   ========================================================================== */

@media (max-width: 767px) {
    body { font-size: 17px; line-height: 1.65; }

    /* ── Tamaños mínimos de texto ─────────────────────────────────────── */
    .rotulo { font-size: 12.5px; letter-spacing: 0.1em; }
    .ficha-zona { font-size: 13.5px; }
    .ficha-titulo { font-size: 19px; line-height: 1.35; }
    .ficha-datos { font-size: 14.5px; gap: 14px 18px; }
    .ficha-precio { font-size: 25px; }
    .precio-lempiras { font-size: 14.5px; }
    .ayuda, .aviso-aprox, .aviso-cercania { font-size: 14px; line-height: 1.6; }
    .distintivo { font-size: 11.5px; padding: 7px 11px; }
    .entradilla, .descripcion { font-size: 17px; line-height: 1.75; }
    .comodidad { font-size: 16px; padding: 14px 0; }
    .migas { font-size: 12.5px; }
    .pie-nav button, .pie-dato { font-size: 16px; }
    .pie-legal { font-size: 14px; }

    /* ── Zonas de toque ───────────────────────────────────────────────── */
    .btn { min-height: 54px; font-size: 14px; padding: 15px 24px; }
    .btn-chico { min-height: 48px; font-size: 13px; }
    .pastel { min-height: 54px; font-size: 13.5px; padding: 14px 20px; }
    .enlace { font-size: 13.5px; padding: 12px 0; }

    .vistas button { padding: 15px 16px; font-size: 12.5px; min-height: 52px; }
    .idioma button, .moneda button { min-width: 46px; min-height: 46px; font-size: 14px; }
    .nav-icono { min-width: 46px; min-height: 46px; }
    .menu-btn { min-width: 50px; min-height: 50px; }
    .menu-desplegado button { padding: 20px 4px; font-size: 16px; }

    .corazon { width: 48px; height: 48px; }
    .galeria-flecha { width: 52px; height: 52px; }
    .miniatura img { width: 84px; height: 62px; }
    .paginacion button { min-width: 52px; height: 52px; font-size: 15px; }
    .opcion, .asistente-opcion { min-height: 52px; font-size: 16px; }
    .tipo { min-height: 88px; font-size: 15px; }

    /* Los puntos del carrusel eran de 5 px: imposibles de acertar. El punto
       sigue siendo pequeño, pero el área que responde al dedo no. */
    .carrusel-puntos { gap: 2px; bottom: 8px; left: 10px; }
    .carrusel-puntos button {
        width: 26px; height: 26px; padding: 10px; background-clip: content-box;
        border-radius: 999px;
    }
    .carrusel-puntos button[aria-current="true"] { width: 34px; }

    /* ── Formularios ──────────────────────────────────────────────────── */
    /* 16 px o más evita que el iPhone haga zoom automático al escribir. */
    .entrada, .selector, .area, .busca-linea input, .buscador-campo input {
        font-size: 16.5px; padding: 16px; min-height: 54px;
    }
    .etiqueta { font-size: 13px; letter-spacing: 0.08em; }
    .orden select { min-height: 52px; font-size: 15px; }

    /* ── Más aire ─────────────────────────────────────────────────────── */
    .rejilla { gap: 30px; }
    .barra-inner { padding: 14px 16px; gap: 12px; }
    .panel-cuerpo { padding-inline: 20px; }
    .grupo { padding: 22px 0; }
    .opciones { gap: 10px; }
}

/* Quien tiene configurado su teléfono con letra grande ya pidió texto mayor:
   se respeta en lugar de forzar tamaños fijos. */
@media (max-width: 767px) and (min-resolution: 2dppx) {
    body { text-rendering: optimizeLegibility; }
}

/* Segunda pasada de accesibilidad móvil.
   Las reglas de arriba perdían por especificidad frente a las del diseño
   original (por ejemplo `.ficha-precio .precio-lempiras`), así que aquí se
   repiten con el peso suficiente. Verificado midiendo en el navegador. */
@media (max-width: 767px) {
    .ficha-precio .precio-lempiras,
    .aside-precio .precio-lempiras { font-size: 14.5px; }
    .ficha-datos b, .ficha-datos strong,
    .ficha-datos li, .ficha-datos span { font-size: 14.5px; }
    .resumen-total { font-size: 20px; }
    .carrusel-flecha { width: 46px; height: 46px; }
    .miniaturas .miniatura img { width: 82px; height: 60px; }
    .distintivo { font-size: 12px; }
    /* Los controles de zoom de Leaflet vienen a 30 px de fábrica. */
    .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 20px; }
}

/* Tercera pasada: los puntos del carrusel seguían midiendo 26 px.
   El punto visible sigue siendo pequeño —si no, tapa la foto— pero el área
   que responde al dedo pasa a 44 px usando relleno transparente. */
@media (max-width: 767px) {
    .carrusel-puntos { gap: 0; bottom: 2px; left: 4px; }
    .carrusel-puntos button {
        width: 44px; height: 44px; padding: 19px 18px;
        background-clip: content-box; border-radius: 999px;
    }
    .carrusel-puntos button[aria-current="true"] { padding-inline: 12px; }
    .distintivo { font-size: 13px; padding: 8px 12px; }
}

/* La barra de búsqueda en móvil.
   Era una tira que se desplazaba en horizontal: los botones de la derecha
   quedaban fuera de la pantalla y no había forma de saber que estaban ahí.
   Ahora se reparte en dos filas, con el buscador ocupando todo el ancho. */
@media (max-width: 767px) {
    .barra-inner { flex-wrap: wrap; overflow-x: visible; padding: 12px 16px; gap: 10px; }
    .busca-linea { flex: 1 1 100%; order: -1; }
    .barra-inner .pastel { flex: 1 1 calc(50% - 5px); justify-content: center; }
    .vistas { flex: 1 1 100%; margin-left: 0; }
    .vistas button { flex: 1; justify-content: center; }
    .vistas span { display: inline; }
}

/* ============================================================================
   Móvil: ver propiedades rápido
   ----------------------------------------------------------------------------
   Medido antes de tocar: había que bajar 756 px —una pantalla entera— para ver
   la primera propiedad, y cada tarjeta ocupaba 434 px, así que cabían 1,7 por
   pantalla. Recorrer 142 propiedades así es interminable, y quien busca casa
   en el teléfono se va antes.

   Tres cambios, sin tocar el tamaño del texto ni de los botones, que ya están
   ajustados para leerse y pulsarse con comodidad:
     · La cabecera con foto se reduce a una franja: en el teléfono no aporta
       nada y se comía la primera pantalla completa.
     · La foto de cada tarjeta pasa de 4:3 a 16:10, que es la proporción en que
       se toman casi todas y recorta menos.
     · Menos aire entre tarjeta y tarjeta.
   ========================================================================== */

@media (max-width: 767px) {
    /* Cabecera compacta: se conserva el título, se quita la foto gigante. */
    .encabezado { min-height: 0; }
    .encabezado .portada-media,
    .encabezado .portada-velo { display: none; }
    .encabezado .portada-cuerpo {
        padding: calc(var(--nav) + 16px) 0 14px;
        background: var(--blanco, #fff);
    }
    .encabezado h1 { color: var(--tinta); font-size: 27px; }
    .encabezado .rotulo { color: var(--tinta-3); }
    .encabezado .portada-bajada {
        color: var(--tinta-2); font-size: 15px; margin-top: 8px;
        /* Dos líneas bastan para situar; el resto es scroll perdido. */
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Tarjetas más bajas: se ven dos y media por pantalla en lugar de una. */
    .ficha-media { aspect-ratio: 16 / 10; }
    .ficha-cuerpo { padding-top: 12px; }
    .rejilla { gap: 22px; }
    .ficha-titulo { margin-bottom: 8px; }
    .ficha-datos { margin-top: 10px; padding-top: 10px; }

    /* La barra de búsqueda acompaña al desplazamiento: filtrar u ordenar no
       debería obligar a volver arriba del todo. */
    .barra { position: sticky; top: var(--nav); z-index: 90; }

    /* El resumen y el orden en una sola línea, no en dos bloques. */
    .resumen { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 16px; }
    .resumen-total { font-size: 17px; }
    .orden { margin-left: auto; }
    .orden .rotulo { display: none; }
    .orden select { min-width: 150px; }
}

/* Segunda pasada: la barra de búsqueda ocupaba 273 px en tres filas y el
   encabezado otros 219, así que la primera propiedad caía fuera de la
   pantalla. Se compacta todo a una fila de búsqueda y otra de controles. */
@media (max-width: 767px) {
    /* Encabezado: título y nada más. La descripción la repite el propio
       listado, y aquí cada píxel es scroll que el cliente no hace. */
    .encabezado .portada-cuerpo { padding: calc(var(--nav) + 12px) 0 10px; }
    .encabezado h1 { font-size: 24px; }
    .encabezado .portada-bajada { display: none; }
    .encabezado .rotulo { font-size: 11.5px; }

    .barra-inner { padding: 10px 16px; gap: 8px; }

    /* Fila 1: el buscador ocupa el ancho. Fila 2: los controles, en iconos. */
    .busca-linea { flex: 1 1 100%; }
    .barra-inner .pastel {
        flex: 0 0 auto; padding: 14px 16px; font-size: 13px;
    }
    /* "Cerca de mí" y "Venta / Alquiler" caben con el texto justo. */
    .barra-inner .pastel:first-of-type { flex: 1 1 auto; }
    .vistas { flex: 0 0 auto; margin-left: auto; }
    .vistas button { padding: 14px 13px; min-height: 48px; }
    /* Los rótulos de vista sobran: los iconos se entienden y ahorran una fila. */
    .vistas span { display: none; }

    /* El resumen, en una línea baja. */
    .resumen { margin-bottom: 12px; gap: 8px; }
    .resumen-total { font-size: 16px; }
    .orden select { min-width: 132px; font-size: 14px; padding: 12px; min-height: 48px; }
}

/* Tercera pasada: una fila menos.
   "Venta / Alquiler" y "Cerca de mí" siguen disponibles —el primero dentro de
   Filtros, el segundo como icono—, así los controles caben en una sola fila
   junto al selector de vista. */
@media (max-width: 767px) {
    .barra-inner .pastel-tx { display: none; }
    .barra-inner .pastel-cerca { flex: 0 0 auto; padding: 14px; }
    .barra-inner .pastel-cerca span { display: none; }
    .barra-inner .pastel-filtros { flex: 1 1 auto; justify-content: center; }
}

/* Ajuste final del listado en móvil.
   · "Lista" y "Cuadrícula" se ven igual en una sola columna, así que se oculta
     una y el hueco se usa para que "Cerca" recupere su texto: un icono de pin
     suelto no se entiende, y menos con la vista cansada.
   · El resumen y el orden caben en una línea. */
@media (max-width: 767px) {
    .vistas button:nth-child(3) { display: none; }
    .barra-inner .pastel-cerca { padding: 14px 14px; }
    .barra-inner .pastel-cerca span { display: inline; }

    .resumen { flex-wrap: nowrap; align-items: center; }
    .resumen-total { flex: 1; min-width: 0; }
    .orden { flex: 0 0 auto; }
    .orden select { min-width: 0; max-width: 150px; }
}

/* Salida directa al catálogo desde la portada. */
.portada-acciones {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 20px;
}
.portada-cuenta {
    color: rgba(255, 255, 255, 0.85); font-size: 14.5px; font-weight: 500;
}

/* La barra superior en teléfonos estrechos.
   Con marca, favoritos, moneda, idioma y menú no cabía todo: los últimos
   quedaban fuera de la pantalla, sin ninguna señal de que existieran. */
@media (max-width: 480px) {
    .nav { padding-inline: 12px; gap: 8px; }
    .nav-derecha { gap: 4px; }
    .nav-marca-simbolo svg { width: 34px; height: 34px; }
    .nav-marca-texto { font-size: 15px; }
    .nav-marca-texto small { font-size: 8px; letter-spacing: 0.18em; }
    /* Favoritos ya está en el menú y en el riel: en pantalla estrecha estorba. */
    .nav-favoritos { display: none; }
    .moneda button { min-width: 40px; padding-inline: 6px; }
    .selector-idioma button { min-width: 38px; padding-inline: 6px; }
}
@media (max-width: 380px) {
    /* Lo último en caer es el idioma, que sigue accesible desde el menú. */
    .selector-idioma { display: none; }
}

/* ── Buscador de la portada ───────────────────────────────────────────── */

.buscador-boton { flex: 0 0 auto; }
.buscador-pie {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 0 14px 14px;
}
.buscador-filtros {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--linea); border-radius: var(--r);
    padding: 11px 16px; min-height: 44px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--tinta);
}
.buscador-filtros:hover { border-color: var(--tinta); }

/* Ejemplos: enseñan que se puede escribir en lenguaje normal. */
.buscador-ejemplos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buscador-ejemplos > span { font-size: 13px; color: var(--tinta-3); }
.buscador-ejemplos button {
    background: var(--fondo); border: none; border-radius: 999px;
    padding: 9px 14px; min-height: 40px; cursor: pointer;
    font-size: 13px; color: var(--tinta-2);
}
.buscador-ejemplos button:hover { background: var(--linea); color: var(--tinta); }

/* ── Resultados parecidos y salida al catálogo ────────────────────────── */

.parecidas {
    margin-top: clamp(36px, 5vw, 60px);
    padding-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--linea);
}

.ver-todas {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-top: clamp(32px, 4vw, 52px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--linea);
    text-align: center;
}
.ver-todas span { font-size: 13.5px; color: var(--tinta-3); }

@media (max-width: 767px) {
    .buscador-pie { padding: 0 12px 12px; gap: 10px; }
    .buscador-ejemplos { width: 100%; }
    .buscador-ejemplos > span { display: none; }
    .buscador-ejemplos button { font-size: 13.5px; min-height: 44px; }
    .buscador-filtros { flex: 1 1 auto; justify-content: center; min-height: 48px; }
    .buscador-boton { width: 100%; }
    .ver-todas .btn { width: 100%; }
}

/* Aviso breve cuando no hay coincidencias pero sí alternativas debajo. */
.sin-exactas {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; background: var(--fondo);
    border: 1px solid var(--linea); border-radius: var(--r);
    font-size: 15px; color: var(--tinta-2);
}
.sin-exactas svg { flex-shrink: 0; color: var(--tinta-3); }

@media (max-width: 767px) {
    /* El conteo se partía en tres líneas al competir con el desplegable. */
    .resumen { flex-wrap: wrap; }
    .resumen-total { flex: 1 1 100%; }
    .orden { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
    .orden select { flex: 1; max-width: none; }
}

/* Los ejemplos se apilaban uno por línea y comían media pantalla.
   En horizontal, con desplazamiento si no caben. */
.buscador-ejemplos button { flex: 0 0 auto; width: auto; white-space: nowrap; }
@media (max-width: 767px) {
    .buscador-ejemplos {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    }
    .buscador-ejemplos::-webkit-scrollbar { display: none; }
    .buscador-pie { flex-direction: column; align-items: stretch; }
}

/* ── Sugerencias del buscador ─────────────────────────────────────────── */

.busca-envoltura { position: relative; flex: 1 1 260px; min-width: 0; }

.sugerencias {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 120;
    background: var(--blanco, #fff); border: 1px solid var(--linea);
    border-radius: var(--r); box-shadow: 0 12px 34px rgba(16, 24, 40, 0.14);
    max-height: 340px; overflow-y: auto; padding: 6px;
}
.sugerencias li { list-style: none; }
.sugerencias button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 12px 12px; min-height: 48px; border-radius: var(--r);
    font-size: 15px; color: var(--tinta);
}
.sugerencias button.resaltada { background: var(--fondo); }
.sugerencias svg { color: var(--tinta-3); flex-shrink: 0; }
.sug-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-tipo {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--tinta-3); flex-shrink: 0;
}
/* Cuántas propiedades hay detrás: evita entrar a una zona con una sola. */
.sug-cuenta {
    min-width: 26px; text-align: center; flex-shrink: 0;
    background: var(--fondo); border-radius: 999px; padding: 3px 8px;
    font-size: 12px; font-weight: 700; color: var(--tinta-2);
}

/* La barra recortaba el desplegable de sugerencias: `overflow-x: auto` corta
   todo lo que se salga, incluidos los elementos posicionados encima. */
.barra-inner { overflow-x: visible; flex-wrap: wrap; }
.barra { overflow: visible; }

/* El navegador dibuja su propia "x" en los campos de tipo search, y quedaba
   junto a la nuestra: dos botones de borrar seguidos. */
.busca-linea input::-webkit-search-cancel-button,
.buscador-campo input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* El desplegable en la portada cuelga del campo, no de la fila entera. */
.buscador-fila { position: relative; }
.buscador-campo { position: relative; }
.buscador-campo .sugerencias { top: calc(100% + 10px); }

/* ── Agendar visita ───────────────────────────────────────────────────── */

.agendar {
    margin-top: 16px; padding: 20px; border: 1px solid var(--linea);
    border-radius: var(--r); background: var(--fondo);
}
.agendar h3 { font-size: 16px; margin-bottom: 16px; color: var(--tinta); }
.agendar-hecho {
    margin-top: 16px; padding: 24px 20px; border: 1px solid var(--linea);
    border-radius: var(--r); background: var(--fondo); text-align: center;
}
.agendar-hecho h3 { font-size: 18px; margin: 10px 0 6px; color: var(--tinta); }
.agendar-hecho p { color: var(--tinta-2); margin-bottom: 16px; font-size: 15px; }

/* ── Calculadora de costo ─────────────────────────────────────────────── */

.calculadora { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .calculadora { grid-template-columns: 1fr 1fr; } }
.calc-campos { display: grid; gap: 14px; align-content: start; }
.campo-sufijo { display: flex; align-items: center; gap: 10px; }
.campo-sufijo input { flex: 1; min-width: 0; }
.campo-sufijo span { font-size: 13.5px; color: var(--tinta-3); white-space: nowrap; }

.calc-tabla { width: 100%; border-collapse: collapse; align-self: start; }
.calc-tabla td { padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.calc-tabla td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); }
.calc-tabla tfoot td {
    border-bottom: none; border-top: 2px solid var(--tinta);
    padding-top: 14px; font-weight: 800; font-size: 18px; color: var(--tinta);
}

/* ── Precio por m² ────────────────────────────────────────────────────── */

.precio-m2 { font-size: 14px; color: var(--tinta-3); margin-top: 6px; }
.precio-m2 span {
    display: block; margin-top: 3px; font-size: 13px; font-weight: 600;
    color: var(--ambar);
}
/* Estar por debajo de la mediana es un argumento de venta, no una alerta. */
.precio-m2 span.bueno { color: var(--verde, #0E7A4B); }

/* ── Compartir ────────────────────────────────────────────────────────── */

.compartir { display: flex; gap: 8px; margin-top: 12px; }
.compartir-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; min-height: 46px; padding: 12px 10px; cursor: pointer;
    background: none; border: 1px solid var(--linea); border-radius: var(--r);
    font-size: 13.5px; font-weight: 600; color: var(--tinta-2); text-decoration: none;
}
.compartir-btn:hover { border-color: var(--tinta); color: var(--tinta); }

/* Motivo por el que se propone una propiedad similar. */
.razon-similar {
    display: flex; align-items: center; gap: 7px; margin-top: 10px;
    font-size: 13px; color: var(--tinta-3);
}
.razon-similar svg { color: var(--verde, #0E7A4B); flex-shrink: 0; }

/* Vídeo y recorrido: enlaces, no reproductores incrustados. */
.multimedia { display: flex; gap: 12px; flex-wrap: wrap; }
.multimedia-btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 16px 22px; min-height: 56px; text-decoration: none;
    border: 1px solid var(--linea); border-radius: var(--r);
    background: var(--fondo); color: var(--tinta); font-weight: 600; font-size: 15px;
}
.multimedia-btn:hover { border-color: var(--tinta); }
.multimedia-btn svg { color: var(--azul, #1F5FD8); }