/* ==========================================================================
   R. H. Enricci Propiedades — Sistema de diseño
   Autoría: rediseño 2026. CSS propio, sin dependencias externas.
   Orden: 1) Fuentes 2) Tokens 3) Base 4) Layout 5) Componentes 6) Utilidades
   ========================================================================== */

/* 1) FUENTES (self-hosted, sin CDN) ---------------------------------------
   Formato WOFF2 y recortadas al alfabeto latino más los símbolos que usa el
   sitio: pesan la cuarta parte que los TTF originales y son lo primero que el
   navegador necesita para pintar el texto. */
@font-face {
    font-family: 'Vietnam';
    src: url('../fonts/web/vietnam-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vietnam';
    src: url('../fonts/web/vietnam-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vietnam';
    src: url('../fonts/web/vietnam-semibold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vietnam';
    src: url('../fonts/web/vietnam-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vietnam';
    src: url('../fonts/web/vietnam-extrabold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vietnam';
    src: url('../fonts/web/vietnam-black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}
/* El serif es decorativo —las palabras en itálica de los títulos y las citas—
   y siempre en peso normal, así que va fijado a 400 en vez de variable. */
@font-face {
    font-family: 'Editorial';
    src: url('../fonts/web/manuale-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Editorial';
    src: url('../fonts/web/manuale-italica.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}

/* 2) TOKENS --------------------------------------------------------------- */
:root {
    /* Marca */
    --rojo: #F5333F;
    --rojo-800: #C51F2C;
    --rojo-100: #FFE7E8;

    /* Superficies (tema claro) */
    --hueso: #F7F5F1;
    --hueso-2: #EFEBE4;
    --papel: #FFFFFF;
    --tinta: #111114;
    --tinta-2: #26262C;
    --gris: #6B6B76;
    --gris-2: #9A9AA6;
    --linea: rgba(17, 17, 20, .12);
    --linea-fuerte: rgba(17, 17, 20, .24);

    --bg: var(--hueso);
    --bg-elev: var(--papel);
    --bg-inverso: #0C0C0F;
    --texto: var(--tinta);
    --texto-suave: var(--gris);
    --sobre-inverso: #F4F2EE;

    /* Tipografía */
    --f-ui: 'Vietnam', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --f-display: 'Vietnam', 'Segoe UI', system-ui, sans-serif;
    --f-serif: 'Editorial', Georgia, 'Times New Roman', serif;

    /* Escala fluida */
    --t-xs: .75rem;
    --t-sm: .875rem;
    --t-base: 1rem;
    --t-lg: clamp(1.05rem, .98rem + .35vw, 1.25rem);
    --t-xl: clamp(1.3rem, 1.15rem + .7vw, 1.75rem);
    --t-2xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem);
    --t-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
    --t-4xl: clamp(2.2rem, 1.5rem + 3.2vw, 4rem);
    --t-5xl: clamp(2.5rem, 1.5rem + 4.1vw, 4.7rem);

    /* Ritmo */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
    --sp-9: 6rem;   --sp-10: 8rem;

    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;

    --sombra-sm: 0 1px 2px rgba(17,17,20,.06), 0 2px 8px rgba(17,17,20,.05);
    --sombra-md: 0 4px 12px rgba(17,17,20,.07), 0 18px 40px -12px rgba(17,17,20,.16);
    --sombra-lg: 0 8px 24px rgba(17,17,20,.08), 0 40px 80px -24px rgba(17,17,20,.28);

    --ancho: 1240px;
    --ancho-angosto: 780px;
    --nav-h: 76px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --dur: .45s;
}

/* Tema oscuro: automático por preferencia, y forzable con data-tema */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --bg: #0B0B0E;
        --bg-elev: #131318;
        --bg-inverso: #F7F5F1;
        --texto: #F2F0EC;
        --texto-suave: #A5A5B0;
        --sobre-inverso: #111114;
        --hueso-2: #191920;
        --linea: rgba(255, 255, 255, .14);
        --linea-fuerte: rgba(255, 255, 255, .3);
        --rojo-100: rgba(245, 51, 63, .16);
        --sombra-sm: 0 1px 2px rgba(0,0,0,.5);
        --sombra-md: 0 8px 30px rgba(0,0,0,.55);
        --sombra-lg: 0 20px 70px rgba(0,0,0,.65);
    }
}
:root[data-tema="oscuro"] {
    --bg: #0B0B0E;
    --bg-elev: #131318;
    --bg-inverso: #F7F5F1;
    --texto: #F2F0EC;
    --texto-suave: #A5A5B0;
    --sobre-inverso: #111114;
    --hueso-2: #191920;
    --linea: rgba(255, 255, 255, .14);
    --linea-fuerte: rgba(255, 255, 255, .3);
    --rojo-100: rgba(245, 51, 63, .16);
    --sombra-sm: 0 1px 2px rgba(0,0,0,.5);
    --sombra-md: 0 8px 30px rgba(0,0,0,.55);
    --sombra-lg: 0 20px 70px rgba(0,0,0,.65);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: var(--f-ui);
    font-size: var(--t-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* "clip" y no "hidden": recorta el desborde lateral sin crear un contenedor
       de scroll, que rompería el position:sticky de la ficha y del panel. */
    overflow-x: clip;
}

body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4, h5 {
    font-family: var(--f-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
    /* Un título largo sin espacios no debe empujar el ancho de la página. */
    overflow-wrap: break-word;
}

p { margin: 0 0 var(--sp-4); text-wrap: pretty; overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }

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

ul, ol { margin: 0; padding: 0; }

/* El atributo hidden lo pone el navegador como display:none, pero cualquier
   regla propia con más peso —.chip { display: inline-flex } — se lo lleva por
   delante. Con esto, hidden esconde siempre. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--rojo);
    outline-offset: 3px;
    border-radius: 4px;
}

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

.saltar-a-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--rojo);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--r-md) 0;
    font-weight: 700;
}
.saltar-a-contenido:focus { left: 0; }

/* 4) LAYOUT --------------------------------------------------------------- */
.contenedor {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}
.contenedor-angosto {
    width: min(100% - 2.5rem, var(--ancho-angosto));
    margin-inline: auto;
}
@media (max-width: 640px) {
    .contenedor, .contenedor-angosto { width: min(100% - 1.75rem, var(--ancho)); }
}

.seccion { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.seccion--compacta { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.seccion--inversa {
    background: var(--bg-inverso);
    color: var(--sobre-inverso);
    /* Sobre fondo invertido, los tonos secundarios se recalculan sobre el texto claro. */
    --texto-suave: color-mix(in srgb, var(--sobre-inverso) 66%, transparent);
    --linea: color-mix(in srgb, var(--sobre-inverso) 20%, transparent);
    --linea-fuerte: color-mix(in srgb, var(--sobre-inverso) 38%, transparent);
}
.seccion--inversa .btn--fantasma {
    --btn-fg: var(--sobre-inverso);
    border-color: color-mix(in srgb, var(--sobre-inverso) 32%, transparent);
}
.seccion--inversa .btn--fantasma:hover {
    --btn-bg: var(--sobre-inverso);
    --btn-fg: var(--bg-inverso);
}
.seccion--inversa .eyebrow { color: var(--rojo); }
.seccion--inversa .texto-suave { color: color-mix(in srgb, var(--sobre-inverso) 62%, transparent); }
.seccion--tono { background: var(--hueso-2); }

/* 5) COMPONENTES ---------------------------------------------------------- */

/* 5.1 Encabezado / navegación */
.barra {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), height var(--dur) var(--ease);
}
.barra::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid transparent;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.barra.esta-fija::before { opacity: 1; border-bottom-color: var(--linea); }
.barra > .contenedor {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    width: min(100% - 2.5rem, 1440px);
}

.marca { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.marca__logo { width: 40px; height: 40px; object-fit: contain; }
.marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1;
    /* Sin esto el nombre desborda su caja en vez de recortarse: un hijo de flex
       no baja de su ancho de contenido salvo que se lo autorice. */
    min-width: 0;
}
.marca__nombre {
    font-weight: 800;
    font-size: .98rem;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.marca__nombre em { font-style: normal; color: var(--rojo); }
/* En teléfonos angostos el nombre completo se montaba sobre el botón de tema.
   Se cae la última palabra: "R. H. Enricci · Inmobiliaria" sigue leyéndose como
   la marca, y recortar con puntos suspensivos quedaría peor. */
@media (max-width: 400px) {
    .marca__cola { display: none; }
}
.marca__bajada {
    font-size: .58rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 4px;
}

.menu { display: flex; align-items: center; gap: .15rem; margin-left: auto; list-style: none; }
.menu__item { position: relative; }
.menu__enlace {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .85rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border-radius: var(--r-full);
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.menu__enlace:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.menu__enlace[aria-current="page"] { color: var(--rojo); }
.menu__enlace .chevron { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.menu__item:hover .chevron, .menu__enlace[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    translate: -50% 0;
    min-width: 250px;
    padding: .5rem;
    list-style: none;
    background: var(--bg-elev);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.menu__item:hover > .submenu,
.menu__item:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .6rem .8rem;
    border-radius: var(--r-md);
    font-size: .88rem;
    font-weight: 600;
    transition: background .2s var(--ease);
}
.submenu a:hover { background: var(--rojo-100); color: var(--rojo-800); }
.submenu small { font-weight: 500; font-size: .74rem; color: var(--texto-suave); }
.submenu a:hover small { color: inherit; opacity: .8; }

.barra__acciones { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.tema-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    border: 1px solid var(--linea);
    background: transparent;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tema-btn:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); transform: rotate(-15deg); }
.tema-btn svg { width: 18px; height: 18px; }
.tema-btn .icono-luna { display: none; }
:root[data-tema="oscuro"] .tema-btn .icono-luna { display: block; }
:root[data-tema="oscuro"] .tema-btn .icono-sol { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .tema-btn .icono-luna { display: block; }
    :root:not([data-tema="claro"]) .tema-btn .icono-sol { display: none; }
}

.hamburguesa {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--linea);
    border-radius: var(--r-full);
    background: transparent;
    cursor: pointer;
    position: relative;
}
.hamburguesa span {
    position: absolute;
    left: 12px;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.hamburguesa span:nth-child(1) { top: 16px; }
.hamburguesa span:nth-child(2) { top: 21px; }
.hamburguesa span:nth-child(3) { top: 26px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panel móvil */
.panel-movil {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: 99;
    background: var(--bg);
    padding: var(--sp-5) 0 var(--sp-8);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
}
.panel-movil.abierto { transform: translateX(0); visibility: visible; }
.panel-movil ul { list-style: none; }
.panel-movil__grupo { border-bottom: 1px solid var(--linea); }
.panel-movil__cabeza {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem .25rem;
    background: none; border: 0; cursor: pointer;
    font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
    font-family: var(--f-display);
    text-align: left;
}
.panel-movil__cabeza .chevron { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.panel-movil__cabeza[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.panel-movil__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--ease);
}
.panel-movil__cabeza[aria-expanded="true"] + .panel-movil__sub { grid-template-rows: 1fr; }
.panel-movil__sub > div { overflow: hidden; }
.panel-movil__sub a {
    display: block;
    padding: .55rem .25rem .55rem 1rem;
    font-weight: 600;
    color: var(--texto-suave);
    border-left: 2px solid var(--linea);
    margin-left: .25rem;
}
.panel-movil__sub a:hover { color: var(--rojo); border-left-color: var(--rojo); }
.panel-movil__pie { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }

@media (max-width: 1080px) {
    .menu { display: none; }
    .hamburguesa { display: block; }
    .barra__acciones .btn { display: none; }
    .barra > .contenedor { gap: var(--sp-3); }
}

@media (max-width: 560px) {
    .marca__logo { width: 34px; height: 34px; }
    .marca__nombre { font-size: .86rem; }
    .marca__bajada { display: none; }
    .barra__acciones { gap: .25rem; }
}

/* 5.2 Botones */
.btn {
    --btn-bg: var(--rojo);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--btn-bg) 75%, transparent); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn--fantasma {
    --btn-bg: transparent;
    --btn-fg: var(--texto);
    border-color: var(--linea-fuerte);
}
.btn--fantasma:hover { --btn-bg: var(--texto); --btn-fg: var(--bg); box-shadow: none; }

.btn--tinta { --btn-bg: var(--texto); --btn-fg: var(--bg); }
.btn--claro { --btn-bg: #fff; --btn-fg: #111114; }
.btn--wsp { --btn-bg: #12A150; }
.btn--bloque { width: 100%; }
.btn--sm { padding: .6rem 1.1rem; font-size: .84rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }

/* 5.3 Tipografía de secciones */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--rojo);
    margin-bottom: var(--sp-4);
}
.eyebrow::before {
    content: "";
    width: 28px; height: 2px;
    background: currentColor;
    display: inline-block;
}

.titulo-seccion { font-size: var(--t-3xl); margin-bottom: var(--sp-4); }
.titulo-seccion em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.texto-suave { color: var(--texto-suave); }
.plomo { font-size: var(--t-lg); color: var(--texto-suave); max-width: 62ch; }

.cabecera-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
}
.cabecera-seccion > div { max-width: 62ch; }

/* 5.4 Hero */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 5rem));
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
    overflow: hidden;
}
.hero__fondo {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 90%;
    background:
        radial-gradient(closest-side at 25% 30%, color-mix(in srgb, var(--rojo) 22%, transparent), transparent),
        radial-gradient(closest-side at 78% 12%, color-mix(in srgb, #2E6BE6 14%, transparent), transparent);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
    animation: flotar 18s ease-in-out infinite alternate;
}
@keyframes flotar {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-3%, 3%, 0) scale(1.12); }
}
.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
@media (max-width: 960px) {
    .hero__grid { grid-template-columns: 1fr; }
}

.hero__titulo {
    font-size: var(--t-5xl);
    letter-spacing: -.045em;
    line-height: .92;
    margin-bottom: var(--sp-5);
}
.hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.hero__titulo .linea > span {
    display: block;
    animation: subir 1s var(--ease) both;
}
.hero__titulo .linea:nth-child(2) > span { animation-delay: .09s; }
.hero__titulo .linea:nth-child(3) > span { animation-delay: .18s; }
@keyframes subir { from { transform: translateY(105%); } to { transform: translateY(0); } }
.hero__titulo em {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--rojo);
    letter-spacing: -.02em;
}
.hero__plomo { max-width: 46ch; font-size: var(--t-lg); color: var(--texto-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__sello {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .95rem .45rem .5rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: var(--sp-5);
}
.hero__sello b {
    background: var(--rojo);
    color: #fff;
    border-radius: var(--r-full);
    padding: .2rem .6rem;
    font-size: .72rem;
    letter-spacing: .04em;
}

/* Collage de imágenes del hero */
.collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(52px, 7vw, 92px);
    gap: clamp(.6rem, 1.2vw, 1rem);
}
.collage__pieza {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--hueso-2);
    box-shadow: var(--sombra-md);
}
.collage__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.collage__pieza:hover img { transform: scale(1.07); }
.collage__pieza--a { grid-column: 1 / 5; grid-row: 1 / 4; }
.collage__pieza--b { grid-column: 5 / 7; grid-row: 1 / 3; }
.collage__pieza--c { grid-column: 5 / 7; grid-row: 3 / 6; }
.collage__pieza--d {
    grid-column: 1 / 5; grid-row: 4 / 6;
    display: grid;
    place-content: center;
    text-align: center;
    background: var(--texto);
    color: var(--bg);
    padding: var(--sp-4);
}
.collage__pieza--d .n { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.collage__pieza--d .l { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; opacity: .7; margin-top: .4rem; }
.collage__etiqueta {
    position: absolute;
    left: .75rem; bottom: .75rem;
    padding: .3rem .7rem;
    border-radius: var(--r-full);
    background: rgba(12, 12, 15, .72);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
}

/* 5.5 Buscador */
.buscador {
    position: relative;
    z-index: 2;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    padding: var(--sp-4);
    background: var(--bg-elev);
    border: 1px solid var(--linea);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-lg);
}
.buscador__tabs { display: flex; gap: .25rem; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.buscador__tab {
    padding: .5rem 1.1rem;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    background: transparent;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.buscador__tab:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.buscador__tab.activo { background: var(--texto); color: var(--bg); }
.buscador__campos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: var(--sp-3);
    align-items: end;
}
@media (max-width: 900px) { .buscador__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .buscador__campos { grid-template-columns: 1fr; } }
.buscador__campos .btn { height: 48px; }

/* 5.6 Formularios */
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo > label,
.campo-etiqueta {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.control {
    width: 100%;
    height: 48px;
    padding: 0 .9rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--texto);
    font-size: .95rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
textarea.control { height: auto; min-height: 140px; padding: .8rem .9rem; resize: vertical; line-height: 1.55; }
.control:hover { border-color: var(--linea-fuerte); }
.control:focus {
    outline: none;
    border-color: var(--rojo);
    box-shadow: 0 0 0 4px var(--rojo-100);
}
select.control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B6B76' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 11px;
    padding-right: 2.2rem;
    cursor: pointer;
}
/* Mostrar/ocultar la contraseña. El botón lo inserta enricci.js, así que sin
   JavaScript el campo sigue funcionando como siempre. */
.campo-clave { position: relative; display: flex; align-items: center; }
.campo-clave .control { padding-inline-end: 3rem; }

.ver-clave {
    position: absolute;
    inset-inline-end: .35rem;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.ver-clave:hover { color: var(--texto); background: color-mix(in srgb, var(--texto) 8%, transparent); }
.ver-clave svg { width: 19px; height: 19px; }
.ver-clave .icono-oculto { display: none; }
.ver-clave[aria-pressed="true"] { color: var(--rojo); }
.ver-clave[aria-pressed="true"] .icono-visible { display: none; }
.ver-clave[aria-pressed="true"] .icono-oculto { display: block; }

@media (pointer: coarse) { .ver-clave { width: 44px; height: 44px; } }

.error-campo { color: var(--rojo); font-size: .78rem; font-weight: 600; }
.validation-summary-errors ul { list-style: none; }
.validation-summary-errors { color: var(--rojo); font-size: .85rem; font-weight: 600; }
.control.input-validation-error { border-color: var(--rojo); }

.aviso {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--linea);
    background: var(--bg-elev);
    align-items: flex-start;
}
.aviso--ok { border-color: color-mix(in srgb, #12A150 45%, transparent); background: color-mix(in srgb, #12A150 10%, var(--bg-elev)); }
.aviso svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; }

/* 5.7 Tarjeta de propiedad */
.grilla-props {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.1rem, 2vw, 1.8rem);
}
/* El envoltorio de animación no debe romper la altura pareja de las tarjetas. */
.grilla-props > * { display: flex; }
.grilla-props > * > .prop { flex: 1 1 auto; }
.prop {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.prop:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-lg);
    border-color: transparent;
}
.prop__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hueso-2);
}
.prop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.prop:hover .prop__media img { transform: scale(1.06); }
.prop__media svg { width: 100%; height: 100%; }
.prop__etiquetas { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.etiqueta {
    padding: .28rem .65rem;
    border-radius: var(--r-full);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(12,12,15,.75);
    color: #fff;
    backdrop-filter: blur(6px);
}
.etiqueta--rojo { background: var(--rojo); }
.etiqueta--verde { background: #12A150; }
.etiqueta--ambar { background: #B4700A; }
/* Cuántas fotos tiene la publicación, abajo a la derecha de la portada. */
.prop__fotos {
    position: absolute;
    inset-inline-end: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: var(--r-full);
    background: rgba(12, 12, 15, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.prop__fotos svg { width: 14px; height: 14px; }

/* Guardar una propiedad: el corazón va por encima del enlace estirado de la
   tarjeta, si no el clic lo tomaría la tarjeta y navegaría en vez de guardar. */
.prop__favorito {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-full);
    background: rgba(12, 12, 15, .55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.prop__favorito svg { width: 19px; height: 19px; }
.prop__favorito:hover { background: rgba(12, 12, 15, .8); transform: scale(1.08); }
.prop__favorito[aria-pressed="true"] { background: var(--rojo); color: #fff; }
.prop__favorito[aria-pressed="true"] svg { fill: currentColor; }

.prop__cuerpo { padding: var(--sp-5); display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.prop__precio { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; }
.prop__precio small { font-size: .78rem; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.prop__precio-pesos {
    margin: -.3rem 0 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--texto-suave);
    letter-spacing: -.01em;
}
.prop__titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.25; }
/* El enlace del título se estira por encima de toda la tarjeta: en el teléfono
   se toca en cualquier parte y no sólo sobre dos renglones de texto. El foco
   del teclado sigue viéndose en el título, que es lo que se anuncia. */
.prop__titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.prop__titulo a:focus-visible { outline: none; }
.prop__titulo a:focus-visible::after { outline: 3px solid var(--rojo); outline-offset: -3px; border-radius: var(--r-lg); }
.prop__barrio { font-size: .85rem; color: var(--texto-suave); display: flex; align-items: center; gap: .35rem; }
.prop__barrio svg { width: 14px; height: 14px; }
.prop__specs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--linea);
    font-size: .8rem;
    color: var(--texto-suave);
    list-style: none;
}
.prop__specs li { display: flex; align-items: center; gap: .35rem; }
.prop__specs svg { width: 15px; height: 15px; opacity: .75; }

/* Carrusel horizontal con scroll-snap */
.riel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 360px);
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4);
    scrollbar-width: thin;
}
.riel > * { scroll-snap-align: start; }
.riel::-webkit-scrollbar { height: 6px; }
.riel::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 99px; }

/* 5.8 Bento de servicios */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(1rem, 1.6vw, 1.5rem);
}
.bento__celda {
    position: relative;
    grid-column: span 2;
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--linea);
    background: var(--bg-elev);
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    display: flex;
    flex-direction: column;
}
.bento__celda:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }
.bento__celda--ancha { grid-column: span 3; }
.bento__celda--destacada {
    grid-column: span 3;
    background: var(--texto);
    color: var(--bg);
    border-color: transparent;
}
.bento__celda--destacada .texto-suave { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.bento__celda--full { grid-column: span 6; }
@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento__celda, .bento__celda--ancha, .bento__celda--destacada, .bento__celda--full { grid-column: span 2; }
}
.icono-caja {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--rojo-100);
    color: var(--rojo);
    margin-bottom: var(--sp-4);
}
.icono-caja svg { width: 22px; height: 22px; }
.bento__celda--destacada .icono-caja { background: var(--rojo); color: #fff; }
.bento__celda h3 { font-size: var(--t-xl); margin-bottom: .6rem; }
.bento__num {
    position: absolute;
    top: 1rem; right: 1.25rem;
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -.06em;
    opacity: .07;
    line-height: 1;
}
.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: var(--sp-4);
    font-size: .86rem;
    font-weight: 700;
    color: var(--rojo);
}
.enlace-flecha svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.enlace-flecha:hover svg { transform: translateX(5px); }
.bento__celda--destacada .enlace-flecha { color: var(--bg); }

/* 5.9 Marquesina */
.marquesina {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 2rem;
    padding-block: var(--sp-5);
    border-block: 1px solid var(--linea);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina__pista {
    display: flex;
    gap: 2rem;
    flex: 0 0 auto;
    min-width: 100%;
    animation: desplazar 38s linear infinite;
}
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes desplazar { to { transform: translateX(calc(-100% - 2rem)); } }
.marquesina span {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    font-family: var(--f-display);
    font-size: clamp(1.1rem, 2vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.03em;
    white-space: nowrap;
    color: var(--texto-suave);
}
.marquesina span::after { content: "◆"; font-size: .5em; color: var(--rojo); }

/* 5.10 Métricas */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--sp-5) var(--sp-6);
}
.metrica { padding: var(--sp-5) 0; border-top: 2px solid var(--rojo); }
.metrica__n {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
}
.metrica__l { font-size: .85rem; color: var(--texto-suave); margin-top: .5rem; }

/* 5.11 Proceso / línea de tiempo */
.pasos { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: paso; }
.paso { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--linea-fuerte); }
.paso::before {
    counter-increment: paso;
    content: "0" counter(paso);
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--rojo);
    margin-bottom: .6rem;
}
.paso h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.paso p { font-size: .9rem; color: var(--texto-suave); margin: 0; }

.linea-tiempo { display: grid; gap: 0; }
.hito {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--linea);
}
.hito:last-child { border-bottom: 1px solid var(--linea); }
.hito__anio {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -.05em;
    color: var(--rojo);
    line-height: 1;
}
.hito h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.hito p { margin: 0; color: var(--texto-suave); }
@media (max-width: 640px) { .hito { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* 5.12 Testimonios */
.testimonios { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.testimonio {
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    border: 1px solid var(--linea);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.testimonio blockquote {
    margin: 0;
    font-family: var(--f-serif);
    font-size: 1.12rem;
    line-height: 1.55;
    letter-spacing: -.01em;
}
.testimonio figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--rojo-100);
    color: var(--rojo-800);
    font-weight: 800;
    font-size: .9rem;
}
.estrellas { color: var(--rojo); letter-spacing: .18em; font-size: .85rem; }

/* 5.13 Franja CTA */
.franja-cta {
    position: relative;
    border-radius: var(--r-xl);
    padding: clamp(2.2rem, 5vw, 4.5rem);
    background: var(--texto);
    color: var(--bg);
    overflow: hidden;
}
.franja-cta::after {
    content: "";
    position: absolute;
    right: -12%; top: -60%;
    width: 60%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--rojo) 55%, transparent), transparent);
    filter: blur(10px);
}
.franja-cta > * { position: relative; z-index: 1; }
.franja-cta h2 { font-size: var(--t-3xl); }

/* 5.14 Pie */
.pie {
    background: var(--bg-inverso);
    color: var(--sobre-inverso);
    padding-block: var(--sp-8) var(--sp-5);
}
.pie__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--sp-6);
}
@media (max-width: 860px) { .pie__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pie__grid { grid-template-columns: 1fr; } }
.pie h4 {
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .55;
    margin-bottom: var(--sp-4);
}
.pie ul { list-style: none; display: grid; gap: .6rem; }
.pie a { font-size: .9rem; opacity: .85; transition: opacity .2s var(--ease), color .2s var(--ease); }
.pie a:hover { opacity: 1; color: var(--rojo); }
.pie__legal {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid color-mix(in srgb, var(--sobre-inverso) 15%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    font-size: .78rem;
    opacity: .6;
}
/* Acceso al panel de administración: discreto, sólo para la inmobiliaria. */
.pie__panel {
    margin-inline-start: var(--sp-4);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.pie__marca {
    font-family: var(--f-display);
    font-size: clamp(2rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .9;
    margin-bottom: var(--sp-4);
}
.pie__marca em { font-style: normal; color: var(--rojo); }
.redes { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.redes a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--sobre-inverso) 22%, transparent);
    border-radius: var(--r-full);
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.redes a:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); transform: translateY(-3px); opacity: 1; }
.redes svg { width: 18px; height: 18px; }

/* 5.15 Botón flotante de WhatsApp */
.wsp-flotante {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.25rem;
    border-radius: var(--r-full);
    background: #12A150;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    box-shadow: 0 14px 34px -12px rgba(18, 161, 80, .9);
    transition: transform .3s var(--ease);
}
.wsp-flotante:hover { transform: translateY(-3px) scale(1.03); }
.wsp-flotante svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .wsp-flotante span { display: none; } .wsp-flotante { padding: .95rem; } }

/* 5.16 Página interna: encabezado */
.encabezado-pagina {
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4.5rem));
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    position: relative;
    overflow: hidden;
}
.encabezado-pagina::before {
    content: "";
    position: absolute;
    inset: auto -10% -60% 40%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--rojo) 16%, transparent), transparent);
    pointer-events: none;
}
.encabezado-pagina h1 { font-size: var(--t-4xl); letter-spacing: -.045em; }
.migas { display: flex; gap: .5rem; font-size: .78rem; color: var(--texto-suave); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.migas a:hover { color: var(--rojo); }

/* 5.17 Contenido editorial */
.prosa { max-width: 68ch; font-size: var(--t-lg); }
.prosa p { margin-bottom: var(--sp-5); }
.prosa h2 { font-size: var(--t-2xl); margin-top: var(--sp-7); }
.prosa h3 { font-size: var(--t-xl); margin-top: var(--sp-6); }
.prosa ul, .prosa ol { padding-left: 1.2rem; margin-bottom: var(--sp-5); display: grid; gap: .6rem; }
.prosa li { padding-left: .3rem; }
.prosa strong { font-weight: 700; }
.destacado {
    border-left: 3px solid var(--rojo);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    font-family: var(--f-serif);
    font-size: 1.25rem;
    font-style: italic;
    margin: var(--sp-6) 0;
}

.lista-chequeo { list-style: none; display: grid; gap: var(--sp-3); }
.lista-chequeo li { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; }
.lista-chequeo svg { width: 20px; height: 20px; color: var(--rojo); flex: 0 0 auto; margin-top: 2px; }

/* 5.18 Acordeón (preguntas frecuentes) */
.faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--f-display);
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -.02em;
}
.faq__mas { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq__mas::before, .faq__mas::after {
    content: ""; position: absolute; background: var(--rojo); border-radius: 2px;
    transition: transform .3s var(--ease);
}
.faq__mas::before { inset: 8px 0 8px 0; height: 2px; }
.faq__mas::after { inset: 0 8px 0 8px; width: 2px; }
.faq__boton[aria-expanded="true"] .faq__mas::after { transform: rotate(90deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq__boton[aria-expanded="true"] + .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { color: var(--texto-suave); padding-bottom: var(--sp-5); margin: 0; max-width: 72ch; }

/* 5.19 Visor de fotos de la propiedad ------------------------------------- */
.visor { display: grid; gap: var(--sp-3); }

.visor__escenario {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--hueso-2);
    isolation: isolate;
}
.visor__escenario img,
.visor__escenario svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El cambio de foto se acompaña con un desvanecido corto. */
.visor__foto { transition: opacity .28s var(--ease); }
.visor__foto.cambiando { opacity: 0; }

/* Degradado inferior: sostiene el contador sobre fotos claras. */
.visor__escenario::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(12,12,15,.55), transparent);
    pointer-events: none;
    z-index: 1;
}
.visor--ilustrado .visor__escenario::after { display: none; }

.visor__paso {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 0;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    color: var(--texto);
    cursor: pointer;
    box-shadow: var(--sombra-md);
    opacity: 0;
    transition: opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.visor:hover .visor__paso,
.visor__paso:focus-visible { opacity: 1; }
.visor__paso:hover { background: var(--bg-elev); transform: translateY(-50%) scale(1.06); }
.visor__paso svg { width: 20px; height: 20px; }
.visor__paso--atras { inset-inline-start: var(--sp-4); }
.visor__paso--atras svg { transform: rotate(90deg); }
.visor__paso--adelante { inset-inline-end: var(--sp-4); }
.visor__paso--adelante svg { transform: rotate(-90deg); }
/* En pantallas táctiles no hay hover: las flechas quedan siempre visibles. */
@media (pointer: coarse) { .visor__paso { opacity: 1; width: 44px; height: 44px; } }

.visor__lupa {
    position: absolute;
    top: var(--sp-4);
    inset-inline-end: var(--sp-4);
    z-index: 2;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 0;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    color: var(--texto);
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.visor__lupa:hover { background: var(--bg-elev); transform: scale(1.06); }
.visor__lupa svg { width: 19px; height: 19px; }

.visor__contador {
    position: absolute;
    inset-inline-start: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 2;
    margin: 0;
    padding: .3rem .8rem;
    border-radius: var(--r-full);
    background: rgba(12, 12, 15, .62);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    backdrop-filter: blur(6px);
}

.visor__aviso {
    position: absolute;
    inset-inline: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    color: var(--texto-suave);
    font-size: .78rem;
    width: fit-content;
}
.visor__aviso svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Tira de miniaturas */
.visor__tira {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(28vw, 112px), 1fr);
    gap: var(--sp-3);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
.visor__tira::-webkit-scrollbar { height: 6px; }
.visor__tira::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 99px; }

.visor__mini {
    position: relative;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--hueso-2);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .25s var(--ease), opacity .25s var(--ease);
    opacity: .62;
}
.visor__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor__mini:hover { opacity: 1; }
.visor__mini.activo { border-color: var(--rojo); opacity: 1; }

/* Pantalla completa ------------------------------------------------------- */
.faro {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(8, 8, 11, .96);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}
.faro.abierto { opacity: 1; visibility: visible; }

.faro__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) clamp(1rem, 3vw, 2rem);
    color: #fff;
}
.faro__contador { font-size: .85rem; font-weight: 700; letter-spacing: .06em; opacity: .8; }

.faro__cerrar,
.faro__paso {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-full);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.faro__cerrar:hover, .faro__paso:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.faro__cerrar svg, .faro__paso svg { width: 20px; height: 20px; }

.faro__cuerpo {
    display: grid;
    place-items: center;
    padding: 0 clamp(.5rem, 2vw, 1.5rem);
    min-height: 0;
}
.faro__cuerpo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-md);
}

.faro__pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    padding: var(--sp-4) clamp(1rem, 3vw, 2rem) var(--sp-5);
}
.faro__paso--atras svg { transform: rotate(90deg); }
.faro__paso--adelante svg { transform: rotate(-90deg); }

/* 5.19b Galería anterior (se conserva por si alguna vista la usa) */
.galeria {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-3);
    border-radius: var(--r-lg);
    overflow: hidden;
}
@media (max-width: 760px) { .galeria { grid-template-columns: 1fr; } }
.galeria__principal { aspect-ratio: 16 / 10; background: var(--hueso-2); overflow: hidden; }
.galeria__principal img, .galeria__principal svg { width: 100%; height: 100%; object-fit: cover; }
.galeria__lado { display: grid; gap: var(--sp-3); }
.galeria__lado > div { background: var(--hueso-2); border-radius: var(--r-md); overflow: hidden; min-height: 120px; }
.galeria__lado img, .galeria__lado svg { width: 100%; height: 100%; object-fit: cover; }

/* Fotos a partir de la cuarta: tira desplazable bajo la galería principal. */
.galeria__tira {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, 140px), 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
}
.galeria__tira > div {
    aspect-ratio: 4 / 3;
    background: var(--hueso-2);
    border-radius: var(--r-md);
    overflow: hidden;
}
.galeria__tira img { width: 100%; height: 100%; object-fit: cover; display: block; }

[data-galeria-mini] { cursor: pointer; }
[data-galeria-mini]:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

.ficha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 960px) { .ficha { grid-template-columns: 1fr; } }
.ficha__panel {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    padding: var(--sp-6);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    box-shadow: var(--sombra-sm);
    display: grid;
    gap: var(--sp-4);
}
/* Calculadora de gastos de escrituración: el formulario y la lista de conceptos.
   Se arma con filas de grilla y no con una tabla porque en el teléfono una
   tabla de tres columnas obliga a desplazar a lo ancho. */
.calculadora {
    padding: clamp(1.25rem, 3vw, var(--sp-6));
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    box-shadow: var(--sombra-sm);
}
.calculadora .campo { margin-bottom: 0; }

.gastos { border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden; }
.gastos__fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
    gap: var(--sp-2) var(--sp-4);
    align-items: baseline;
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--linea);
}
.gastos__fila:first-child { border-top: 0; }
.gastos__fila--cabecera {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    background: var(--hueso-2);
    padding-block: var(--sp-3);
}
.gastos__fila--total { background: var(--hueso-2); font-size: 1.05rem; }
.gastos__detalle { display: block; font-size: .82rem; color: var(--texto-suave); margin-top: .15rem; }
.gastos__paga { font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.gastos__importe { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }

@media (max-width: 560px) {
    /* En pantallas angostas el importe pasa a su propia línea, alineado a la
       izquierda: si no, el nombre del concepto queda partido en cuatro. */
    .gastos__fila { grid-template-columns: 1fr auto; }
    .gastos__fila--cabecera { display: none; }
    .gastos__importe { grid-column: 1 / -1; text-align: left; }
    .gastos__fila--total .gastos__importe { font-size: 1.15rem; }
}

/* Formulario de consulta dentro de la ficha. Se separa del texto con un panel
   propio para que no se lea como un párrafo más de la descripción. */
.consulta-ficha {
    padding: clamp(1.25rem, 3vw, var(--sp-6));
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    box-shadow: var(--sombra-sm);
    /* El botón "Coordinar una visita" del panel baja hasta acá: sin este
       margen, el título queda pegado al borde superior de la pantalla. */
    scroll-margin-top: calc(var(--nav-h) + 20px);
}
.consulta-ficha .dos-columnas { margin-top: var(--sp-5); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: var(--sp-4); }
.dato { padding: var(--sp-4); border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--bg-elev); }
.dato dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); font-weight: 700; }
.dato dd { margin: .3rem 0 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }

/* 5.20 Filtros de listado */
.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    align-items: end;
}
.filtros__acciones { display: flex; gap: .5rem; }

/* La búsqueda libre ocupa todo el ancho de la grilla: es el campo principal,
   no uno más de la fila. */
.campo--ancho { grid-column: 1 / -1; }

.campo-con-icono { position: relative; display: flex; align-items: center; }
.campo-con-icono svg {
    position: absolute;
    left: .85rem;
    width: 18px;
    height: 18px;
    color: var(--texto-suave);
    pointer-events: none;
}
.campo-con-icono .control { padding-left: 2.6rem; }
/* La cruz que Chrome agrega en los campos de búsqueda desentona con el resto. */
.campo-con-icono input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: var(--r-full);
    border: 1px solid var(--linea);
    font-size: .82rem;
    font-weight: 600;
    background: var(--bg-elev);
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--linea-fuerte); }
.chip.activo { background: var(--texto); color: var(--bg); border-color: transparent; }

.sin-resultados {
    text-align: center;
    padding: var(--sp-9) var(--sp-5);
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--r-lg);
}

/* 5.21 Mapa de barrios */
.barrios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); }
.barrio {
    position: relative;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--linea);
    overflow: hidden;
    transition: color .35s var(--ease), border-color .35s var(--ease);
    background: var(--bg-elev);
}
.barrio::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rojo);
    transform: translateY(101%);
    transition: transform .45s var(--ease);
}
.barrio:hover { color: #fff; border-color: var(--rojo); }
.barrio:hover::before { transform: translateY(0); }
.barrio > * { position: relative; }
.barrio strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.barrio span { font-size: .8rem; opacity: .7; }

/* 6) UTILIDADES ----------------------------------------------------------- */
/* Solo se oculta el contenido si hay JavaScript para volver a mostrarlo. */
.js .revelar {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .revelar.visible { opacity: 1; transform: none; }
.revelar-1 { transition-delay: .07s; }
.revelar-2 { transition-delay: .14s; }
.revelar-3 { transition-delay: .21s; }
.revelar-4 { transition-delay: .28s; }
.revelar-5 { transition-delay: .35s; }

.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.centro { text-align: center; }
.centro .eyebrow::before { display: none; }
.centro .plomo { margin-inline: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.dos-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
}
.pegajoso { position: sticky; top: calc(var(--nav-h) + 20px); }

/* Pantallas táctiles: los enlaces de texto suelto —pie, migas, datos de
   contacto— miden 18 o 20 px de alto, muy por debajo de lo que un dedo acierta
   con comodidad. Se agranda el área sensible sin tocar el diseño de escritorio,
   porque la regla sólo aplica cuando el puntero es grueso. */
@media (pointer: coarse) {
    .pie ul { gap: 0; }
    .pie ul li a,
    .pie__panel,
    .migas a,
    .lista-chequeo a,
    .submenu a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .migas { gap: .1rem .6rem; }

    /* Las fichas de contacto quedan con el ícono y el enlace alineados. */
    .lista-chequeo li { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js .revelar { opacity: 1; transform: none; }
}

@media print {
    .barra, .wsp-flotante, .panel-movil, .pie, .buscador, .barra__admin { display: none !important; }
    body { background: #fff; color: #000; }
}

/* 7) ACCESO AL PANEL DESDE LA BARRA --------------------------------------- */
/* Botón discreto: no compite con el llamado a la acción comercial, pero está
   siempre a mano para la inmobiliaria. En móvil queda sólo el ícono. */
.barra__admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 40px;
    padding: 0 .95rem;
    border-radius: var(--r-full);
    border: 1px solid var(--linea);
    background: transparent;
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.barra__admin svg { width: 16px; height: 16px; flex: 0 0 auto; }
.barra__admin:hover {
    background: color-mix(in srgb, var(--texto) 8%, transparent);
    border-color: var(--linea-fuerte);
    color: var(--texto);
}
/* Con la sesión abierta se destaca, porque pasa a ser el acceso de trabajo. */
.barra__admin--activo {
    border-color: transparent;
    background: var(--rojo-100);
    color: var(--rojo-800);
}
.barra__admin--activo:hover { background: var(--rojo); color: #fff; }

@media (max-width: 760px) {
    .barra__admin { width: 40px; padding: 0; }
    .barra__admin span { display: none; }
}

/* 8) AJUSTES DE PANTALLA CHICA Y TÁCTIL ----------------------------------- */

/* Safari en iPhone amplía la página al enfocar un campo de menos de 16px.
   Subir el tamaño en pantallas chicas evita ese salto. */
@media (max-width: 860px) {
    .control { font-size: 16px; }
}

/* En pantallas táctiles los blancos chicos son difíciles de acertar: el mínimo
   recomendado es 44 px. */
@media (pointer: coarse) {
    .btn--sm { padding: .75rem 1.1rem; }
    .chip { padding: .6rem 1rem; }
    .menu__enlace { padding: .75rem .85rem; }
    .redes a { width: 44px; height: 44px; }
    .tema-btn { width: 44px; height: 44px; }
    .faq__boton { padding-block: var(--sp-5); }
    .panel-movil__sub a { padding-block: .75rem; }
}

/* El botón flotante de WhatsApp no debe tapar lo último de cada página. */
@media (max-width: 640px) {
    main { padding-bottom: 4.5rem; }
    .pie { padding-bottom: var(--sp-7); }
}

/* Teléfono apaisado: la barra fija se come casi toda la altura útil. */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --nav-h: 60px; }
    .panel-movil { padding-block: var(--sp-4); }
    .panel-movil__cabeza { font-size: 1.05rem; padding-block: .7rem; }
}