* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    color: #1a1a1a;
    background: #fafafa;
    overflow-x: hidden;
}

.admin-status-wrap {
    position: fixed;
    bottom: 1rem;
    left: 1.25rem;
    z-index: 30;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    max-width: calc(100% - 2.5rem);
}

.admin-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.95);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: default;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease;
    min-width: 0;
}

.admin-status[data-admin-on="true"] {
    cursor: pointer;
}

.admin-status[data-admin-on="true"]:hover {
    background: rgba(0, 0, 0, 0.7);
}

.admin-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.admin-dot.on {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.admin-label {
    font-variant: small-caps;
    letter-spacing: 0.04em;
}

.admin-session {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    max-width: 60vw;
}

.admin-session[hidden] {
    display: none;
}

.admin-session-cliente {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-session-sep {
    opacity: 0.55;
}

.admin-session-busqueda {
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.admin-salir {
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease;
}

.admin-salir:hover {
    background: rgba(185, 28, 28, 1);
}

.admin-salir[hidden] {
    display: none;
}

.admin-chevron { flex: 0 0 auto; opacity: 0.8; transition: transform 0.15s ease; }
.admin-status[aria-expanded="false"] .admin-chevron { transform: rotate(180deg); }

/* Menú del operador: se abre hacia arriba, porque la píldora está abajo. */
.admin-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    min-width: 210px;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}
.admin-menu[hidden] { display: none; }
.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #111827;
    font-family: inherit;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.admin-menu-item svg { flex: 0 0 auto; color: #6b7280; }
.admin-menu-item:hover, .admin-menu-item:focus-visible { background: #f3f4f6; outline: none; }

main { margin: 0; padding: 0; }

/* ---- Buscador ---- */
/* La página principal: marca arriba, barra fija con el texto libre y los
   filtros, y debajo el listado de unidades. Los acentos (botones, filtros
   activos) salen del «Color oscuro» del proyecto cuando el buscador corre bajo
   su subdominio; en el sitio general, el gris del sitio. */

body.buscador {
    --bsc-acento: var(--lyf-oscuro, #111827);
    --bsc-acento-texto: var(--lyf-texto-claro, #fff);
    --bsc-borde: #e5e7eb;
    --bsc-muted: #6b7280;
    --bsc-radio: 14px;
    background: #f7f7f8;
}

.bsc-top { background: #fff; }

.bsc-brand-row {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bsc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #111827;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* El logo va tal cual se subió (puede traer su propio fondo): sin filtros. */
.bsc-brand img {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    border-radius: 4px;
}

.bsc-nav { display: flex; gap: 1.4rem; }

.bsc-nav a {
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.bsc-nav a:hover { color: #111827; }

/* Barra de búsqueda: queda pegada arriba al scrollear. Sin backdrop-filter a
   propósito: en el celular los desplegables se posicionan fijos respecto de la
   ventana, y un filtro acá los dejaría atrapados dentro de la barra. */
.bsc-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid var(--bsc-borde);
}

.bsc-bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
}

.bsc-search {
    flex: 1 1 340px;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 0.3rem 0 0.85rem;
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bsc-search:focus-within {
    border-color: var(--bsc-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bsc-acento) 14%, transparent);
}

.bsc-search > svg { flex: none; color: #9ca3af; }

.bsc-q {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.93rem;
    color: #111827;
}

.bsc-q::placeholder { color: #9ca3af; }
.bsc-q::-webkit-search-cancel-button { -webkit-appearance: none; }

.bsc-go {
    flex: none;
    height: 32px;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 999px;
    background: var(--bsc-acento);
    color: var(--bsc-acento-texto);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.bsc-go:hover { filter: brightness(0.92); }

.bsc-controles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Un filtro: botón-píldora que despliega sus opciones. */
.f { position: relative; flex: none; }

/* Mismo alto que el botón «Buscar» (32px): las píldoras oscuras —el botón y
   los filtros activos— tienen que verse iguales. */
.f-btn {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.f-btn:hover,
.f.open .f-btn { border-color: #9ca3af; }

.f-open,
.f-x {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    font: inherit;
    color: #1f2937;
    cursor: pointer;
}

.f-open {
    gap: 0.4rem;
    padding: 0 0.75rem 0 0.95rem;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
}

.f-open svg { color: #6b7280; transition: transform 0.15s ease; }
.f.open .f-open svg { transform: rotate(180deg); }
.f-static { cursor: default; }

.f-x { padding: 0 0.7rem 0 0.4rem; margin-left: -0.45rem; }
.f-x svg { opacity: 0.7; }
.f-x:hover svg { opacity: 1; }

/* Filtro activo: relleno con el acento, el valor como texto y la ✕ para
   quitarlo. La flechita sobra; el ícono de la zona (.f-ico) se queda. */
.f.on .f-btn { background: var(--bsc-acento); border-color: var(--bsc-acento); }
.f.on .f-open,
.f.on .f-x { color: var(--bsc-acento-texto); }
.f.on .f-open { padding-right: 0.5rem; }
.f.on .f-open svg:not(.f-ico) { display: none; }
.f.on .f-open .f-ico { color: inherit; opacity: 0.8; }

/* Desplegable */
.f-pop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    min-width: 230px;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--bsc-borde);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.f-pop.der { left: auto; right: 0; }

.f.open .f-pop { display: block; animation: bsc-pop 0.14s ease-out; }

@keyframes bsc-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.f-opt {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    color: #111827;
    text-align: left;
    cursor: pointer;
}

.f-opt:hover,
.f-opt:focus-visible { background: #f3f4f6; outline: none; }

.f-opt.sel {
    font-weight: 600;
    background: color-mix(in srgb, var(--bsc-acento) 8%, #fff);
}

.f-n { color: #9ca3af; font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Opción múltiple: casilla a la izquierda. */
.f-multi .f-opt { justify-content: flex-start; gap: 0.6rem; }
.f-multi .f-opt-txt { flex: 1; }
.f-multi .f-opt.sel { font-weight: 500; background: transparent; }
.f-multi .f-opt.sel:hover { background: #f3f4f6; }

.f-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    color: transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.f-listo {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--bsc-acento);
    color: var(--bsc-acento-texto);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.f-opt.sel .f-check {
    background: var(--bsc-acento);
    border-color: var(--bsc-acento);
    color: var(--bsc-acento-texto);
}

/* Precio: moneda, tope y atajos */
.f-pop-precio { min-width: 280px; padding: 0.9rem; }

.f-monedas { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; }

.f-moneda { position: relative; }
.f-moneda input { position: absolute; opacity: 0; pointer-events: none; }

.f-moneda span {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}

.f-moneda input:checked + span {
    background: var(--bsc-acento);
    border-color: var(--bsc-acento);
    color: var(--bsc-acento-texto);
}

.f-hasta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--bsc-borde);
    border-radius: 10px;
    font-size: 0.9rem;
    color: #374151;
}

.f-hasta:focus-within { border-color: var(--bsc-acento); }
.f-hasta > span:first-child { min-width: 3rem; }

.f-rango { display: grid; gap: 0.5rem; }
.f-simbolo { color: #9ca3af; }

.f-hasta input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    -moz-appearance: textfield;
}

.f-hasta input::-webkit-outer-spin-button,
.f-hasta input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.f-aplicar {
    width: 100%;
    height: 40px;
    /* Aire contra el campo «Hasta» (antes lo daban los atajos de tope). */
    margin-top: 0.85rem;
    border: 0;
    border-radius: 10px;
    background: var(--bsc-acento);
    color: var(--bsc-acento-texto);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.bsc-limpiar {
    flex: none;
    border: 0;
    background: none;
    padding: 0 0.3rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--bsc-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bsc-limpiar:hover { color: #111827; }

/* Barrita de progreso en el borde de la barra mientras se busca */
.bsc-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bsc-acento), transparent) no-repeat;
    background-size: 40% 100%;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.bsc-bar.cargando .bsc-progress { opacity: 1; animation: bsc-barra 1s linear infinite; }

@keyframes bsc-barra {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

/* ---- Resultados ---- */

.bsc-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
    transition: opacity 0.15s ease;
}

.bsc-main.cargando { opacity: 0.55; pointer-events: none; }

.bsc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.bsc-titulo {
    margin: 0 0 0.2rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #111827;
}

.bsc-sub { margin: 0; font-size: 0.9rem; color: var(--bsc-muted); }
.bsc-aviso { color: #b45309; }

.bsc-orden {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    font-size: 0.85rem;
    color: var(--bsc-muted);
}

.bsc-orden select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.42rem 2rem 0.42rem 0.85rem;
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 0.7rem center;
    background-size: 14px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
}

/* Banda del proyecto (cuando la búsqueda es de uno solo): la foto de portada
   de fondo, un velo oscuro para que se lea, y encima el nombre, el avance, los
   destacados y los números. La foto es más alta que la banda para que el JS la
   pueda deslizar al scrollear sin que se vean los bordes. */
.bsc-proy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    margin-bottom: 1.5rem;
    border-radius: 18px;
    background: var(--bsc-acento);
    color: #fff;
    display: flex;
    align-items: flex-end;
}

.bsc-proy-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -15%;
    z-index: -2;
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}

.bsc-proy-velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(10, 12, 16, 0.78) 0%, rgba(10, 12, 16, 0.45) 55%, rgba(10, 12, 16, 0.15) 100%),
        linear-gradient(0deg, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0) 60%);
}

.bsc-proy.sin-foto .bsc-proy-velo {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.25));
}

.bsc-proy-cont {
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem 1.25rem 1.25rem 2.25rem;
}

.bsc-proy-info { align-self: flex-end; min-width: 0; max-width: 560px; padding-bottom: 0.65rem; }

.bsc-proy-avance {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.22rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bsc-proy-nombre {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.bsc-proy-sub {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.bsc-proy-sub:empty { display: none; }

.bsc-proy-anclas {
    list-style: none;
    margin: 0.95rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bsc-proy-anclas li {
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(10, 12, 16, 0.45);
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Los números, en una placa clara a la derecha. */
.bsc-proy-datos {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    width: 300px;
    padding: 1.6rem 1.6rem 1.5rem;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.bsc-proy-dato { display: flex; flex-direction: column; gap: 0.2rem; }

.bsc-proy-dato .k {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4b5563;
}

.bsc-proy-dato strong {
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Las tipologías son un dato secundario al lado de unidades y precios. */
.bsc-proy-dato.ancho strong { font-size: 0.84rem; font-weight: 600; color: #374151; }

/* «Ver proyecto» y, si el proyecto lo tiene, el recorrido virtual: van
   juntos al pie de la placa. */
.bsc-proy-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.bsc-proy-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 38px;
    border-radius: 999px;
    background: var(--bsc-acento);
    color: var(--bsc-acento-texto);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.12s ease;
}

.bsc-proy-ver:hover { filter: brightness(0.92); }
.bsc-proy-ver svg { transition: transform 0.15s ease; }
.bsc-proy-ver:hover svg { transform: translateX(3px); }

/* El recorrido es secundario: mismo tamaño que «Ver proyecto», sin relleno. */
.bsc-proy-tour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 38px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.bsc-proy-tour:hover { border-color: var(--bsc-acento); background: #fafafa; }

/* Atajos a los proyectos (sitio general, sin proyecto elegido) */
.bsc-proys {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
}

.bsc-proys-k {
    margin-right: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsc-muted);
}

.bsc-proy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.8rem 0.28rem 0.3rem;
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: border-color 0.12s ease;
}

.bsc-proy-chip:hover { border-color: var(--bsc-acento); }

.bsc-proy-chip img,
.bsc-proy-chip-ph {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
}

.bsc-proy-chip-n { color: #9ca3af; font-size: 0.78rem; }

/* ---- Tarjetas de unidad ---- */

.bsc-lista { display: flex; flex-direction: column; gap: 1rem; }

.card {
    position: relative;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    background: #fff;
    border: 1px solid var(--bsc-borde);
    border-radius: var(--bsc-radio);
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    animation: bsc-card 0.35s ease-out both;
    animation-delay: min(calc(var(--i, 0) * 30ms), 360ms);
}

.card:hover {
    border-color: #d1d5db;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

@keyframes bsc-card {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Las fotos llenan la altura que tenga la tarjeta: la tira va en absoluto. */
.card-media { position: relative; min-height: 290px; background: #f1f3f5; }

.card-strip {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.card-strip::-webkit-scrollbar { display: none; }

.card-slide {
    display: block;
    flex: none;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.card-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Las imágenes «sin recorte» (planos) van enteras sobre blanco, con aire
   alrededor para que no toquen los bordes de la tarjeta. */
.card-slide img.no-crop { object-fit: contain; background: #fff; padding: 1.5rem 1.75rem; }

.card-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.card-arrow.prev { left: 0.6rem; }
.card-arrow.next { right: 0.6rem; }

.card-media:hover .card-arrow,
.card-arrow:focus-visible { opacity: 1; }

/* En pantallas táctiles las fotos se deslizan con el dedo. */
@media (hover: none) { .card-arrow { display: none; } }

.card-n {
    position: absolute;
    left: 0.7rem;
    bottom: 0.6rem;
    z-index: 3;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.25rem 1.5rem 1.25rem;
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.card-heading { min-width: 0; }

.card-proy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsc-acento);
}

.card-proy a { color: inherit; text-decoration: none; }
.card-proy a:hover { text-decoration: underline; }

.card-dir {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bsc-muted);
}

.card-titulo {
    margin: 0.3rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-titulo a { color: #111827; text-decoration: none; }

/* Sin link estirado sobre toda la tarjeta: así el texto se puede seleccionar.
   A la unidad se llega por las fotos, el nombre o «Ver unidad». */
.card-titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }

.card-tipo { margin: 0.1rem 0 0; font-size: 0.74rem; color: #9ca3af; text-transform: lowercase; }

.card-tipo-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #e5e7eb;
    text-underline-offset: 3px;
    cursor: pointer;
}

.card-tipo-link:hover { color: var(--bsc-acento); text-decoration-color: currentColor; }

.card-precios { flex: none; text-align: right; }

.card-precio strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.card-op {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bsc-muted);
}

.card-precio.sec { margin-top: 0.35rem; }
.card-precio.sec strong { font-size: 0.95rem; font-weight: 600; }

.card-specs {
    list-style: none;
    /* Separados del bloque de arriba (nombre y tipo de unidad). */
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.86rem;
    color: #1f2937;
}

.card-specs li { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.card-specs svg { color: #4b5563; flex: none; width: 19px; height: 19px; }

.card-desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--bsc-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-acciones {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.btn-ver,
.btn-wa,
.btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.btn-ver { background: var(--bsc-acento); color: var(--bsc-acento-texto); }
.btn-wa svg { width: 14px; height: 14px; }
.btn-ver:hover { filter: brightness(0.92); }

.btn-wa { border: 1px solid var(--bsc-borde); background: #fff; color: #128c7e; }
.btn-wa:hover { border-color: #25d366; background: #f0fdf4; }

.btn-admin { border: 1px dashed #9ca3af; background: #fff; color: #374151; }
.btn-admin:hover { border-style: solid; border-color: #374151; }

/* Ver más / vacío */
.bsc-mas-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }

.bsc-mas {
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--bsc-borde);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: border-color 0.12s ease;
}

.bsc-mas:hover { border-color: var(--bsc-acento); }
.bsc-mas:disabled { opacity: 0.6; cursor: wait; }
.bsc-mas-n { color: var(--bsc-muted); font-weight: 500; }

.bsc-vacio {
    padding: 3.5rem 1rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: var(--bsc-radio);
}

.bsc-vacio h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: #111827; }
.bsc-vacio p { margin: 0 0 1.1rem; font-size: 0.92rem; color: var(--bsc-muted); }

.bsc-vacio-btn {
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--bsc-acento);
    color: var(--bsc-acento-texto);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

/* Relleno gris para lo que no tiene foto (también lo usa la landing). */
.propiedad-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f1f3f5, #e5e7eb);
}

@media (max-width: 720px) {
    .bsc-brand-row { padding: 0.7rem 1rem; }
    .bsc-brand { font-size: 1.05rem; }
    .bsc-nav { gap: 1rem; }
    .bsc-nav a { font-size: 0.85rem; }

    .bsc-bar-inner { padding: 0.5rem 1rem 0.55rem; gap: 0.5rem; }
    .bsc-search { flex-basis: 100%; max-width: none; height: 40px; }

    /* Los filtros se deslizan de costado, de borde a borde. */
    .bsc-controles {
        flex-wrap: nowrap;
        flex-basis: calc(100% + 2rem);
        margin: 0 -1rem;
        padding: 2px 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bsc-controles::-webkit-scrollbar { display: none; }

    /* El desplegable sube desde abajo como una hoja, con un velo detrás. */
    .f-pop,
    .f-pop.der {
        position: fixed;
        top: auto;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-height: 70vh;
        overflow: auto;
        border-radius: 16px;
    }

    .f.open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(15, 23, 42, 0.3);
    }

    body:has(.f.open) .wa-float { opacity: 0; pointer-events: none; }

    .bsc-main { padding: 1rem 1rem 2.5rem; }
    .bsc-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .bsc-titulo { font-size: 1.15rem; }

    .bsc-proy { min-height: 0; border-radius: 16px; }
    .bsc-proy-cont { flex-direction: column; align-items: stretch; gap: 0.8rem; padding: 1.5rem 1rem 1rem; }
    .bsc-proy-info { align-self: auto; padding-bottom: 0; }
    .bsc-proy-nombre { font-size: 1.5rem; }
    .bsc-proy-sub { font-size: 0.86rem; }
    .bsc-proy-avance { margin-bottom: 0.45rem; }

    /* En el celular el texto va arriba a todo el ancho: el velo es vertical
       y cubre la zona del texto (el de escritorio aclara hacia la derecha). */
    .bsc-proy-velo {
        background: linear-gradient(180deg, rgba(10, 12, 16, 0.6) 0%, rgba(10, 12, 16, 0.72) 55%, rgba(10, 12, 16, 0.85) 100%);
    }

    /* Los destacados quedan para la landing: en el celular la banda tiene que
       dejar asomar la primera unidad sin scrollear. */
    .bsc-proy-anclas { display: none; }

    /* Los números en dos columnas; tipologías y el botón, a lo ancho. */
    .bsc-proy-datos {
        width: auto;
        display: grid;
        /* «Disponibles» toma lo que necesita y el rango de precios el resto,
           así no se parte en dos renglones. */
        grid-template-columns: auto 1fr;
        gap: 0.55rem 1.4rem;
        padding: 0.9rem 1rem 1rem;
    }
    .bsc-proy-dato.ancho,
    .bsc-proy-acciones { grid-column: 1 / -1; }
    .bsc-proy-dato strong { font-size: 0.92rem; }
    .bsc-proy-dato.ancho strong { font-size: 0.8rem; }
    .bsc-proy-acciones { margin-top: 0.15rem; gap: 0.4rem; }
    .bsc-proy-ver,
    .bsc-proy-tour { height: 34px; }

    .card { grid-template-columns: 1fr; }
    .card-media { aspect-ratio: 16 / 10; min-height: 0; }
    .card-slide img.no-crop { padding: 1rem 1.25rem; }
    .card-body { padding: 0.9rem 1rem 1rem; }
    .card-top { flex-direction: column; gap: 0.35rem; }
    .card-precios { text-align: left; }
}

/* ---- Admin lightbox + autosuggest ---- */

dialog.lightbox {
    border: none;
    border-radius: 18px;
    padding: 0;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.08);
    max-width: 480px;
    width: calc(100% - 2rem);
    height: 560px;
    max-height: calc(100vh - 3rem);
    margin: auto;
    overflow: hidden;
    animation: lb-in 0.18s ease-out;
    transition: max-width 0.22s ease;
}

dialog.lightbox.expanded {
    max-width: 920px;
}

dialog.lightbox::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    animation: lb-bd 0.18s ease-out;
}

@keyframes lb-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lb-bd {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-form {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100%;
    min-height: 0;
}

.lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
}

.btn-close {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}

.btn-close:hover {
    background: #f3f4f6;
    color: #111;
}

.lightbox-panes {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

.lightbox-pane {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.lightbox-pane-left {
    flex: 1 1 100%;
}

dialog.lightbox.expanded .lightbox-pane-left {
    flex: 1 1 50%;
    border-right: 1px solid #eef0f3;
    background: #f7f8fa;
}

dialog.lightbox.expanded .lightbox-pane-left .al-input,
dialog.lightbox.expanded .lightbox-pane-left .al-textarea {
    background: #fff;
}

.lightbox-pane-right {
    display: none;
}

dialog.lightbox.expanded .lightbox-pane-right {
    display: flex;
}

.pane-search,
.pane-cliente {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.pane-search {
    padding-top: 1.5rem;
}

.pane-search[hidden],
.pane-cliente[hidden] {
    display: none;
}

.pane-back {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem 0.3rem 0;
    font-size: 0.85rem;
    align-self: flex-start;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}

.pane-back:hover {
    color: #111;
    background: rgba(15, 23, 42, 0.05);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field > span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.field-grow {
    flex: 1 1 auto;
    min-height: 0;
}

.al-textarea {
    flex: 1 1 auto;
    min-height: 80px;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
}

.pane-title {
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.busquedas-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.busqueda-item,
.busquedas-list .autosuggest-new {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 0.9rem;
    color: #1f2937;
    position: relative;
}

.busquedas-list li:last-child {
    border-bottom: none;
}

.busqueda-item:hover {
    background: #f9fafb;
}

.busqueda-item strong {
    display: block;
    font-weight: 600;
    color: #111;
}

.busqueda-meta {
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.busqueda-fecha {
    position: absolute;
    top: 0.65rem;
    right: 2.7rem;
    font-size: 0.72rem;
    color: #9ca3af;
}

.busqueda-open {
    position: absolute;
    top: 0.4rem;
    right: 1.85rem;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.busqueda-open:hover {
    background: #f3f4f6;
    color: #111;
}

.busqueda-pendiente {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}

.busqueda-pendiente .busqueda-meta {
    color: #b45309;
    font-weight: 500;
}

.busqueda-x {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.busqueda-x:hover {
    background: #fde68a;
    color: #111;
}

.lightbox-footer {
    flex: 0 0 auto;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid #eef0f3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #fafbfc;
}

.lightbox-status {
    margin-right: auto;
    font-size: 0.82rem;
    color: #6b7280;
}

.lightbox-status[data-kind="ok"] { color: #047857; }
.lightbox-status[data-kind="warn"] { color: #b45309; }
.lightbox-status[data-kind="err"] { color: #b91c1c; }

.btn-primary {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.btn-primary:hover:not(:disabled) {
    background: #1d4ed8;
}

.btn-primary:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    dialog.lightbox.expanded {
        max-width: calc(100% - 2rem);
    }
    dialog.lightbox.expanded .lightbox-panes {
        flex-direction: column;
    }
    dialog.lightbox.expanded .lightbox-pane-left,
    dialog.lightbox.expanded .lightbox-pane-right {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid #eef0f3;
    }
    dialog.lightbox.expanded .lightbox-pane-right {
        border-bottom: none;
    }
}

.al-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    color: #111;
    background: #fff;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.al-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.autosuggest {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.autosuggest li {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 0.92rem;
    color: #1f2937;
}

.autosuggest li:last-child {
    border-bottom: none;
}

.autosuggest li:hover,
.autosuggest li.focused {
    background: #f9fafb;
}

.autosuggest-item strong {
    display: block;
    font-weight: 600;
    color: #111;
}

.autosuggest-item-meta {
    color: #6b7280;
    font-size: 0.8rem;
    display: block;
    margin-top: 0.1rem;
}

.autosuggest-new {
    color: #2563eb;
    font-weight: 500;
    background: #fafbff;
}

.autosuggest-new:hover {
    background: #eef2ff !important;
}

/* ---- Ficha de propiedad pública ---- */

/* ---- Navbar sticky de la ficha de proyecto ---- */
.proy-nav {
    position: fixed;
    /* El `header` genérico es flex y con su propio padding: los anulamos para que
       mande `.proy-nav-inner` (max-width 1200, marca a la izquierda y links a la derecha). */
    display: block;
    padding: 0;
    /* La barra ocupa todo el ancho: que no robe clicks a lo que queda debajo
       (p. ej. la ✕ del panel de resultados). Solo la marca y los links reciben. */
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.proy-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.proy-nav-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.proy-nav-brand,
.proy-nav-links a { pointer-events: auto; }

.proy-nav-brand {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    transition: color 0.25s ease;
}

/* Marca del menú: logo + nombre. El logo va tal cual se subió — puede tener su
   propio fondo — así que no lleva filtros de color. */
.proy-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.proy-nav-logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    border-radius: 4px;
}

.proy-nav-links {
    display: flex;
    gap: 1.6rem;
}

.proy-nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    opacity: 0.92;
    transition: color 0.25s ease, opacity 0.12s ease;
}

.proy-nav-links a:hover {
    opacity: 1;
}

/* Estado sólido (al scrollear más allá del hero) */
/* Páginas sin hero (ficha de unidad, proyecto sin fotos): la navbar es sólida
   desde el arranque y el contenido tiene que empezar debajo de ella. */
body.sin-hero main { padding-top: 56px; }

body.sin-hero .proy-nav { background: #fff; box-shadow: 0 1px 12px rgba(15, 23, 42, 0.08); }
body.sin-hero .proy-nav::before { opacity: 0; }
body.sin-hero .proy-nav-brand,
body.sin-hero .proy-nav-links a { color: #111827; }

.proy-nav.scrolled {
    background: #fff;
    box-shadow: 0 1px 12px rgba(15, 23, 42, 0.08);
}

.proy-nav.scrolled::before { opacity: 0; }

.proy-nav.scrolled .proy-nav-brand,
.proy-nav.scrolled .proy-nav-links a {
    color: #111827;
}

/* Las anclas no quedan tapadas por el navbar fijo */
#galeria, #unidades { scroll-margin-top: 70px; }

@media (max-width: 600px) {
    .proy-nav-inner { padding-left: 1rem; padding-right: 1rem; }
    /* Con logo, en el celular va solo el logo: el nombre al lado ocupaba dos
       renglones y no dejaba lugar a los links. Queda para lectores de pantalla. */
    .proy-nav-brand { flex: none; }
    .proy-nav-brand:has(.proy-nav-logo) > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* Los links no se parten en dos renglones; si en un teléfono muy angosto
       no entran, se deslizan de costado en vez de salirse de la pantalla. */
    .proy-nav-links { gap: 1rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .proy-nav-links::-webkit-scrollbar { display: none; }
    .proy-nav-links a { font-size: 0.85rem; white-space: nowrap; }
}

@media (max-width: 400px) {
    .proy-nav-links { gap: 0.8rem; }
    .proy-nav-links a { font-size: 0.82rem; }
}

@media (max-width: 370px) {
    .proy-nav-links { gap: 0.65rem; }
}

/* ---- Hero full-screen de la ficha de proyecto ---- */
.proy-hero {
    position: relative;
    height: 100vh;
    min-height: 460px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.proy-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0) 32%,
        rgba(0, 0, 0, 0.72) 100%);
}

.proy-hero-back {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    z-index: 2;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    transition: background 0.12s;
}

.proy-hero-back:hover {
    background: rgba(0, 0, 0, 0.6);
}

.proy-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 1.5rem 4.5rem;
    color: #fff;
}

.proy-hero-title {
    margin: 0;
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Texto de la sección «Hero»: va sobre la foto principal, debajo del título. */
.proy-hero-texto {
    margin: 1rem 0 0;
    max-width: 46ch;
    color: #fff;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

/* «por Desarrollador», en la misma línea que el nombre del proyecto */
.proy-hero-por {
    margin-left: 0.85rem;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.92;
    white-space: nowrap;
}

/* En el celular no entra en la misma línea (y, pegado al título sin espacio,
   no puede bajar solo): va en su propio renglón. */
@media (max-width: 600px) {
    .proy-hero-por { display: block; margin: 0.45rem 0 0; }
}

.proy-hero-sub {
    margin: 0.55rem 0 0;
    font-size: 1.05rem;
    opacity: 0.92;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.proy-hero-scroll {
    position: absolute;
    bottom: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    opacity: 0.85;
    animation: proy-hero-bounce 1.9s ease-in-out infinite;
}

@keyframes proy-hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

.ficha-prop {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: #111827;
}

.ficha-prop-back {
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}

.ficha-prop-back a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.12s;
}

.ficha-prop-back a:hover {
    color: #111;
}

.ficha-prop-head {
    margin-bottom: 1.5rem;
}

.ficha-prop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ficha-prop-title {
    margin: 0 0 0.3rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.ficha-prop-dir {
    margin: 0;
    color: #6b7280;
    font-size: 1rem;
}

/* Galería */

/* ---- Mosaico de imágenes (ficha de proyecto) ---- */
/* Grilla de tamaños variados con flujo denso: se adapta a la cantidad de fotos
   sin reservar filas vacías. Con 8 fotos queda un rectángulo 4×4 perfecto. */
.proy-mosaico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 170px;
    grid-auto-flow: dense;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.proy-mosaico-item {
    padding: 0;
    border: none;
    overflow: hidden;
    border-radius: 10px;
    cursor: zoom-in;
    background: #f1f3f5;
}

.proy-mosaico-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.proy-mosaico-item:hover img {
    transform: scale(1.05);
}

/* Tamaños variados por posición: 1ª de cada bloque de 4 grande (2×2), la 2ª ancha (2×1) */
.proy-mosaico-item:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; }
.proy-mosaico-item:nth-child(4n+2) { grid-column: span 2; }
/* Una sola foto: banner de ancho completo */
.proy-mosaico-item:only-child { grid-column: span 4; grid-row: span 2; }

@media (max-width: 640px) {
    .proy-mosaico {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }
    .proy-mosaico-item:only-child { grid-column: span 2; }
}

/* ---- Lightbox a pantalla completa ---- */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(2px);
}

.lb-overlay[hidden] { display: none; }

.lb-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease;
}

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease;
}

.lb-prev { left: 22px; }
.lb-next { right: 22px; }

.lb-close:hover,
.lb-nav:hover { background: rgba(255, 255, 255, 0.25); }

.lb-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

/* Título de la unidad, arriba de la foto. */
.ficha-titulo {
    margin: 0 0 1.4rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
}

.ficha-titulo-proyecto {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
}

/* Bloque de arriba de la ficha: foto a la izquierda, datos de detalle a la
   derecha. Misma proporción de columnas que `.ficha-prop-grid` de abajo, para
   que las dos zonas queden alineadas. */
.ficha-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.75rem;
}

/* Columna derecha de arriba: detalle y, debajo, precio + contacto. */
.ficha-top-datos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Sin fotos, los datos ocupan el ancho de una columna y no queda hueco. */
.ficha-top-sin-foto {
    grid-template-columns: minmax(0, 380px);
}

.galeria {
    margin-bottom: 0;
}

.galeria-main {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #f3f4f6;
}

/* Imágenes marcadas «No crop» en el admin: nunca se recortan. Entran enteras y
   lo que sobra del contenedor se rellena con blanco. Los selectores repiten el
   contexto para ganarle en especificidad al `object-fit: cover` de cada bloque. */
.galeria-main img.no-crop,
.galeria-thumb img.no-crop,
.proy-tipo-thumb img.no-crop {
    object-fit: contain;
    background: #fff;
}

.galeria-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tira de una sola fila con scroll lateral: al angostarse la columna de la foto,
   la grilla que envolvía crecía a tres filas y empujaba toda la ficha. */
.galeria-thumbs {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
}

.galeria-thumbs > .galeria-thumb {
    flex: 0 0 110px;
}

.galeria-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #f3f4f6;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.12s, opacity 0.12s;
    opacity: 0.85;
}

.galeria-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria-thumb:hover {
    opacity: 1;
}

.galeria-thumb.is-active {
    border-color: #2563eb;
    opacity: 1;
}

/* Layout dos columnas */

.ficha-prop-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

/* Proyecto sin amenities ni ubicación: no dejar el hueco de la columna principal. */
.ficha-prop-grid-solo-side {
    grid-template-columns: minmax(0, 380px);
}

.ficha-prop-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.ficha-card-pub {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
}

.ficha-card-pub-title {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.ficha-prop-desc {
    margin: 0;
    color: #374151;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ---- Unidades disponibles por tipología (bloque ancho completo) ---- */
.proy-tipologias {
    width: 100%;
    background: #f7f8fa;
    border-top: 1px solid #eef0f3;
    padding: 3rem 1.5rem 3.5rem;
    box-sizing: border-box;
}

.proy-tipologias-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.proy-tipologias-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

.proy-tipologias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.proy-tipo-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #111827;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.proy-tipo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    border-color: #c7d2fe;
}

.proy-tipo-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f3f5;
}

.proy-tipo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.proy-tipo-card:hover .proy-tipo-thumb img {
    transform: scale(1.04);
}

.proy-tipo-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem 1.3rem 1.1rem;
}

.proy-tipo-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.proy-tipo-label {
    font-size: 1.15rem;
    font-weight: 700;
}

.proy-tipo-count {
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
}

.proy-tipo-precio {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.proy-tipo-precio strong {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
}

.proy-tipo-precio-k {
    font-size: 0.8rem;
    color: #6b7280;
}

.proy-tipo-cta {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lyf-oscuro, #2563eb);
}

/* ---- Leyenda Ley de vivienda promovida ---- */
.proy-promovida {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
}

/* Dentro de la ficha ocupa el ancho de las dos columnas, debajo de ambas. */
.ficha-prop-grid > .proy-promovida {
    grid-column: 1 / -1;
    margin-top: 2rem;
}

.proy-promovida-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    color: #1d4ed8;
}

.proy-promovida-head svg {
    flex-shrink: 0;
}

.proy-promovida-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e3a8a;
}

.proy-promovida-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.proy-promovida-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #374151;
}

.proy-promovida-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
}

/* Descripción destacada, arriba de la galería */
.proy-descripcion {
    max-width: 820px;
    margin: 5.5rem auto 6rem;
    text-align: center;
    font-size: 1.55rem;
    line-height: 1.7;
    color: #374151;
}

.proy-descripcion p {
    margin: 0;
}

/* Título de sección de la landing (ej: Galería) */
.proy-seccion-titulo {
    margin: 0 0 1.6rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #111827;
    /* Compensa la navbar fija al saltar con el ancla #galeria */
    scroll-margin-top: 90px;
}

/* ---- Bloque de landing: imagen fija (parallax) con texto encima ---- */
.proy-bloque {
    --bloque-margen: 16px;
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Alto: buena parte de la pantalla, sin llegar a ocuparla entera. */
    min-height: 75vh;
    /* Ancho total de la página menos un margen chico a cada lado: se sale del
       contenedor con márgenes negativos (no con transform, que rompería el
       `background-attachment: fixed`). */
    margin-left: calc(50% - 50vw + var(--bloque-margen));
    margin-right: calc(50% - 50vw + var(--bloque-margen));
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding: 3rem;
    border-radius: 18px;
    overflow: hidden;
    /* La imagen queda congelada mientras la página scrollea. */
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Degradado abajo para que el texto blanco se lea siempre. */
.proy-bloque-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
}

.proy-bloque-texto {
    position: relative;
    margin: 0;
    max-width: 620px;
    text-align: left;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.45;
    font-weight: 600;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.site-footer-ig {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---- Contacto de la landing (antes del footer) ---- */
.proy-contacto {
    width: 100%;
    /* Un gris algo más marcado que el de «Unidades» para que se note el corte
       entre las dos bandas, más una línea separadora visible. */
    background: #eceef1;
    border-top: 1px solid #cbd2da;
    padding: 5rem 1.5rem;
    box-sizing: border-box;
}

.proy-contacto-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.proy-contacto-title {
    margin: 0 0 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.4rem;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--lyf-oscuro, #16243c);
}

.proy-contacto-sub {
    margin: 0 0 2.6rem;
    max-width: 30ch;
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--lyf-oscuro, #16243c);
}

.proy-contacto-ig {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* Un usuario de Instagram largo es una sola palabra sin espacios: sin esto
       no puede cortarse, y en mobile obliga a toda la página a ensancharse
       (el navegador la aleja para que entre). */
    max-width: 100%;
    overflow-wrap: anywhere;
    margin-bottom: 2.4rem;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--lyf-oscuro, #16243c);
}

.proy-contacto-ig:hover {
    color: var(--lyf-oscuro, #2563eb);
}

.proy-contacto-devs {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.proy-contacto-dev {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.proy-contacto-dev-label {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
}

.proy-contacto-dev-nombre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lyf-oscuro, #16243c);
    text-decoration: none;
}

a.proy-contacto-dev-nombre:hover {
    color: var(--lyf-oscuro, #2563eb);
}

/* Formulario: inputs con solo línea inferior, como el ejemplo. */
.proy-contacto-form {
    display: flex;
    flex-direction: column;
    gap: 2.1rem;
}

.pc-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0 0.7rem;
    border: none;
    border-bottom: 1px solid #c9ced6;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--lyf-oscuro, #16243c);
    transition: border-color 0.15s ease;
}

.pc-input::placeholder {
    color: #9ca3af;
}

.pc-input:focus {
    outline: none;
    border-bottom-color: var(--lyf-oscuro, #16243c);
}

.pc-textarea {
    resize: vertical;
    min-height: 2.6rem;
}

.pc-submit {
    margin-top: 1.2rem;
    padding: 1rem 2rem;
    border: 1px solid #c9ced6;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--lyf-oscuro, #16243c);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pc-submit:hover {
    background: var(--lyf-oscuro, #16243c);
    border-color: var(--lyf-oscuro, #16243c);
    color: var(--lyf-claro, #fff);
}

.pc-nota {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
}

/* Trampa para bots: fuera de la pantalla. Una persona no la ve ni llega con
   el tabulador; un bot que completa todos los campos, sí. */
.pc-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Lo que hay que corregir antes de enviar. */
.pc-error {
    margin: 0;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.92rem;
    line-height: 1.4;
}

.pc-error[hidden] { display: none; }

/* El campo a corregir: la línea en rojo y más gruesa (sin mover nada). */
.pc-input[aria-invalid="true"] {
    border-bottom-color: #dc2626;
    box-shadow: inset 0 -1px 0 #dc2626;
}

.pc-error:focus { outline: none; }

.pc-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.proy-contacto-ok {
    padding: 2rem;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
    color: #166534;
}

.proy-contacto-ok p {
    margin: 0.4rem 0 0;
}

@media (max-width: 860px) {
    .proy-contacto {
        padding: 3rem 1.2rem;
    }
    .proy-contacto-inner {
        grid-template-columns: 1fr;
        gap: 2.6rem;
    }
    .proy-contacto-title {
        font-size: 2.4rem;
    }
    .proy-contacto-sub {
        font-size: 1.15rem;
        margin-bottom: 1.8rem;
    }
}

/* ---- Botón flotante de WhatsApp (fijo, acompaña el scroll) ---- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wa-float:hover {
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.wa-float:active {
    transform: scale(0.98);
}

@media (max-width: 760px) {
    .wa-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}

/* Variante con fondo de color: texto a la izquierda, imagen a la derecha. */
.proy-bloque-color {
    --bloque-margen: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-left: calc(50% - 50vw + var(--bloque-margen));
    margin-right: calc(50% - 50vw + var(--bloque-margen));
    /* El grid de amenities no trae margen inferior: lo pone el bloque. */
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding: 3.5rem;
    border-radius: 18px;
    /* Fondo = «Color claro» del proyecto; el fallback es el gris oscuro de antes. */
    background: var(--lyf-claro, #111827);
}

.proy-bloque-color-texto p {
    margin: 0;
    /* Sobre el color claro el texto va en el oscuro del proyecto. */
    color: var(--lyf-oscuro, #fff);
    font-size: 1.75rem;
    line-height: 1.45;
    font-weight: 600;
    text-align: left;
}

.proy-bloque-color-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

@media (max-width: 760px) {
    .proy-bloque {
        --bloque-margen: 10px;
        padding: 1.6rem;
        border-radius: 14px;
        /* iOS no soporta bien `fixed`: se degrada a imagen normal. */
        background-attachment: scroll;
    }
    .proy-bloque-texto {
        font-size: 1.25rem;
    }
    /* En mobile: texto arriba, imagen abajo. */
    .proy-bloque-color {
        --bloque-margen: 10px;
        grid-template-columns: 1fr;
        gap: 1.6rem;
        padding: 1.8rem;
        border-radius: 14px;
    }
    .proy-bloque-color-texto p {
        font-size: 1.25rem;
    }
}

.ficha-amenities {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem 2rem;
    color: #374151;
}

.ficha-amenities li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.ficha-amenities li svg {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #111827;
}

.ficha-prop-dir-card {
    margin: 0 0 0.85rem;
    color: #374151;
    font-size: 0.95rem;
}

.ficha-map {
    display: block;
    width: 100%;
    height: 360px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
}

.ficha-vacio {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0;
}

/* Sidebar (precio + CTA) */

.ficha-prop-side {
    position: sticky;
    top: 1.5rem;
}

.ficha-side-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ficha-precio-tipo {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #2563eb;
    background: #eff6ff;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.ficha-precio {
    font-size: 1.85rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.ficha-precio-reservado,
.ficha-precio-vendido,
.ficha-precio-consultar {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.5rem;
}

.ficha-precio-reservado { color: #c2410c; }
.ficha-precio-vendido { color: #991b1b; }
.ficha-precio-consultar { color: #4b5563; }

.ficha-precio-sub {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: 0.88rem;
}

.ficha-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    padding: 0.85rem 1rem;
    background: var(--lyf-oscuro, #2563eb);
    /* Texto del botón: el «Texto claro» de la paleta. */
    color: var(--lyf-texto-claro, #fff);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.ficha-cta:hover {
    background: color-mix(in srgb, var(--lyf-oscuro, #1d4ed8) 85%, #000);
}

.ficha-side-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    margin-top: 0.5rem;
    padding: 0.7rem 1rem;
    background: #fff;
    color: var(--lyf-oscuro, #2563eb);
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: border-color 0.12s, background 0.12s;
}

.ficha-side-link:hover {
    border-color: var(--lyf-oscuro, #2563eb);
    background: #f8faff;
}

/* Recorrido virtual 3D: ícono de cubo al lado del texto, como Instagram. */
.ficha-side-tour {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.ficha-side-ig {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #c13584;
}

.ficha-side-ig:hover {
    border-color: #c13584;
    background: #fdf4fa;
}

/* Atajo al admin: mismo tamaño que el CTA pero secundario, para que no compita. */


.ficha-side-hint {
    margin: 0.7rem 0 0;
    color: #6b7280;
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 900px) {
    .ficha-prop-grid {
        grid-template-columns: 1fr;
    }
    .ficha-prop-side {
        position: static;
    }
    .ficha-prop-title {
        font-size: 1.5rem;
    }
}

/* CTA del sidebar: ahora es <a>, no <button> */
a.ficha-cta {
    display: block;
    text-decoration: none;
    text-align: center;
}

/* ---- Footer del sitio ---- */
.site-footer {
    /* Color oscuro del proyecto; gris por defecto si la página no tiene uno. */
    background: var(--lyf-oscuro, #111827);
    color: #d1d5db;
    padding: 2.75rem 1.5rem 1.6rem;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logo en el footer, tal cual se subió: sin filtros, porque puede traer su
   propio fondo y color. El © de abajo sigue en texto con el nombre. */
.site-footer-logo {
    display: block;
    height: 46px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 0.55rem;
    border-radius: 4px;
}

.site-footer-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.site-footer-tag {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: #9ca3af;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
}

.site-footer-links a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.12s ease;
}

.site-footer-links a:hover {
    color: #fff;
}

.site-footer-bottom {
    max-width: 1200px;
    margin: 1.3rem auto 0;
    font-size: 0.8rem;
    /* Color claro del proyecto; gris por defecto donde no hay paleta. */
    color: var(--lyf-claro, #6b7280);
}

/* Leyendas y © comparten formato: mismo tamaño, color y separación. */
.site-footer-bottom p {
    margin: 0 0 0.55rem;
    line-height: 1.5;
}

.site-footer-bottom p:last-child { margin-bottom: 0; }


/* ── Metrajes de la unidad ───────────────────────────────────────────────── */
/* Misma tarjeta clara que el resto de la ficha: etiqueta a la izquierda, valor
   a la derecha, y el total separado por una línea y con más peso. */
.ficha-metrajes {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
}

.ficha-metrajes-title {
    margin: 0 0 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.ficha-metrajes-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ficha-metrajes-dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.ficha-metrajes-dl dt {
    color: #6b7280;
    font-size: 1rem;
}

.ficha-metrajes-dl dd {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

/* El total cierra el bloque: línea arriba y tipografía más grande. */
.ficha-metrajes-total {
    margin-top: 0.3rem;
    padding-top: 0.95rem;
    border-top: 1px solid #e5e7eb;
}

.ficha-metrajes-total dt {
    color: #111827;
    font-size: 1.1rem;
}

.ficha-metrajes-total dd {
    font-size: 1.3rem;
}

/* Piso y año: bloque aparte del de metrajes, misma tarjeta clara. */
.ficha-datos {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
}


/* ── Fila de abajo de la ficha: características | ubicación ──────────────── */
/* Los títulos de esta fila respiran más que los del resto del sitio. */
.ficha-abajo .ficha-card-pub-title {
    margin-bottom: 1.7rem;
}

.ficha-abajo {
    display: grid;
    /* Mismas columnas que `.ficha-top`: la ubicación queda del ancho del
       bloque de metrajes que tiene arriba. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
    align-items: start;
}

/* Sin ubicación, las características ocupan todo el ancho. */
.ficha-abajo-solo { grid-template-columns: minmax(0, 1fr); }

/* En pantallas angostas la columna fija de 340px no entra: sin esto las dos
   filas de la ficha se salen del viewport y las tarjetas se superponen. */
@media (max-width: 760px) {
    .ficha-top,
    .ficha-abajo {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

/* La descripción vive dentro del bloque de características: la separa una línea. */
.ficha-desc-bloque {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.ficha-desc-bloque .ficha-card-pub-title { margin-bottom: 0.7rem; }


/* ── Anclas: tres destacados debajo del hero ─────────────────────────────── */
.proy-anclas {
    width: 100%;
    /* El gris arranca pleno y se diluye hacia el #fafafa del body, para que no
       se vea el corte contra la galería que viene abajo. */
    background: linear-gradient(180deg, #f2f2f2 0%, #f2f2f2 45%, #fafafa 100%);
    /* Mismo aire arriba y abajo: el bloque queda centrado en su franja. */
    padding: 5.5rem 1.5rem;
    box-sizing: border-box;
}

.proy-anclas-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
}

/* Todo el destacado va centrado. */
.proy-ancla { text-align: center; }

.proy-ancla-icono {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    color: #111827;
}

.proy-ancla-titulo {
    margin: 0 0 0.9rem;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    /* Azul oscuro del proyecto; el gris por defecto si no hay paleta. */
    color: var(--lyf-oscuro, #1f3350);
}

.proy-ancla-desc {
    margin: 0 auto;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.6;
    color: #6b7280;
}

/* En el celular las tres columnas no entran: los títulos en mayúsculas se
   pisaban entre sí y ensanchaban la página entera (el menú quedaba cortado).
   Van uno debajo del otro. */
@media (max-width: 720px) {
    .proy-anclas { padding: 3.5rem 1.5rem; }
    .proy-anclas-inner { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
    .proy-ancla-icono { margin-bottom: 1rem; }
    .proy-ancla-titulo { font-size: 1.15rem; margin-bottom: 0.6rem; overflow-wrap: anywhere; }
    .proy-ancla-desc { font-size: 0.95rem; }
}


/* Rótulo del pin del mapa: cartel blanco arriba de la gota. Google le aplica
   estilos inline al texto, así que acá va solo la cápsula. */
.map-pin-label {
    background: #fff;
    padding: 3px 9px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    white-space: nowrap;
    letter-spacing: 0.01em;
}


/* Link al buscador con la tipología de la unidad, al pie de sus características. */
.ficha-mas-unidades {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Un renglón más abajo que el final de la descripción. */
    margin-top: 3rem;
    font-size: 0.95rem;
    font-weight: 600;
    /* Color oscuro del proyecto (Look and Feel). */
    color: var(--lyf-oscuro, #111827);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.ficha-mas-unidades:hover {
    border-bottom-color: currentColor;
}

/* La flecha acompaña el hover. */
.ficha-mas-unidades svg { transition: transform 0.15s ease; }
.ficha-mas-unidades:hover svg { transform: translateX(2px); }