/* CSS específico de Propiedades — extraído del <style> inline (Etapa 3 refactor). */

/* ===== Paleta alineada al branding UnenGroup ===== */
        :root {
            --brand: #71C6D4;
            /* celeste oficial */
            --brand-dark: #4aa9b8;
            --brown: #5A4E4E;
            /* marrón oficial */
            --brown-2: #887878;
            /* marrón claro (navbar/footer) */
            --warm: #ffcc80;
            /* melón (acento cálido de marca) */
            --cream: #F6E6C9;
            --bg: #faf7f3;
            /* fondo cálido muy claro */
            --card: #ffffff;
            --ink: #3f3838;
            /* texto cálido oscuro */
            --muted: #8a7f7f;
            /* gris cálido */
            --line: #ece5dd;
            --shadow: 0 10px 30px rgba(90, 78, 78, .10);
            --shadow-lg: 0 18px 50px rgba(90, 78, 78, .18);
            --radius: 18px;
        }

        /* La innovación arranca debajo del header: solo estilo el contenido propio */
        body {
            background: var(--bg);
            color: var(--ink);
        }

        .prop-scope h1,
        .prop-scope h2,
        .prop-scope h3,
        .prop-scope h4,
        .prop-scope h5,
        .font-head {
            font-family: 'Montserrat', sans-serif;
        }

        .container-xxl {
            max-width: 1320px;
        }

        .text-brand {
            color: var(--brand);
        }

        /* La navbar del sitio es position:fixed → damos aire al hero */
        .hero {
            position: relative;
            color: #fff;
            padding: 130px 0 clamp(4rem, 9vw, 7rem);
            background:
                linear-gradient(180deg, rgba(90, 78, 78, .74), rgba(52, 45, 45, .90)),
                url('/images/home/heroBienvenida/heroFrist.jpg') center/cover no-repeat;
        }

        .hero .eyebrow {
            letter-spacing: .28em;
            text-transform: uppercase;
            font-size: .78rem;
            color: var(--brand);
            font-weight: 600;
        }

        .hero h1 {
            font-weight: 800;
            font-size: clamp(2.1rem, 5vw, 3.6rem);
            line-height: 1.06;
            margin: .5rem 0;
        }

        .hero p.lead {
            color: #efe6dd;
            max-width: 620px;
            font-weight: 300;
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: 1.2rem;
        }

        .chip {
            border: 1px solid rgba(255, 255, 255, .4);
            color: #fbf4ec;
            background: rgba(255, 255, 255, .08);
            padding: .4rem 1rem;
            border-radius: 999px;
            font-size: .85rem;
            cursor: pointer;
            transition: .2s;
            white-space: nowrap;
        }

        .chip:hover {
            border-color: var(--brand);
            color: #fff;
        }

        .chip.active {
            background: var(--brand);
            color: #093036;
            border-color: var(--brand);
            font-weight: 700;
        }

        /* ---- Barra de filtros flotante ---- */
        /* Ancla del navbar (?tipo=...#filtros): despeja el header fijo sin afectar el layout */
        #filtros {
            scroll-margin-top: 90px;
        }

        .filterbar {
            margin-top: 1.8rem;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            padding: 1rem;
        }

        .filterbar label {
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--muted);
            font-weight: 600;
            margin-bottom: .25rem;
        }

        .filterbar .form-control,
        .filterbar .form-select {
            border-radius: 12px;
            border: 1px solid var(--line);
            padding: .6rem .8rem;
            color: var(--ink);
        }

        .filterbar .form-control:focus,
        .filterbar .form-select:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 .2rem rgba(113, 198, 212, .25);
        }

        .counter-pill {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(113, 198, 212, .16);
            color: var(--brown);
            border-radius: 999px;
            padding: .35rem .9rem;
            font-weight: 600;
            font-size: .9rem;
        }

        /* ---- Grid + Cards ---- */
        .section-props {
            padding: 2.5rem 0 4rem;
        }

        .prop-card {
            background: var(--card);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            border: 1px solid var(--line);
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: transform .25s, box-shadow .25s;
        }

        

        .prop-media {
            position: relative;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #efe9e2;
        }

        .prop-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s;
        }

        

        .badge-op {
            position: absolute;
            top: .8rem;
            left: .8rem;
            background: rgba(90, 78, 78, .88);
            color: #fdf6ee;
            padding: .3rem .8rem;
            border-radius: 999px;
            font-size: .74rem;
            font-weight: 600;
            letter-spacing: .02em;
            text-transform: capitalize;
        }

        

        

        

        .prop-price {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 1.25rem;
            color: var(--brown);
        }

        .prop-title {
            font-weight: 600;
            font-size: 1rem;
            line-height: 1.3;
            margin: 0;
            color: var(--ink);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        

        

        

        

        

        .btn-interes {
            flex: 1;
            border: none;
            background: var(--brand);
            color: #063038;
            border-radius: 12px;
            font-weight: 700;
            padding: .55rem;
            transition: .2s;
        }

        

        /* "Ver detalle" en marrón (paleta oficial del sitio) */
        

        

        /* Secundario (outline) para diferenciar jerarquía */
        .btn-ghost {
            flex: 1;
            border: 1px solid var(--brand);
            background: transparent;
            color: var(--brand-dark);
            border-radius: 12px;
            font-weight: 700;
            padding: .55rem;
            transition: .2s;
        }

        .btn-ghost:hover {
            background: rgba(113, 198, 212, .12);
            color: var(--brand-dark);
        }

        

        

        /* ---- Estados ---- */
        .state {
            text-align: center;
            padding: 4rem 1rem;
            color: var(--muted);
        }

        

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* ---- Detalle (offcanvas premium) ---- */
        

        

        .detail-hero .swiper {
            width: 100%;
            aspect-ratio: 16 / 10;
            background: #3f3838;
        }

        

        

        

        .detail-price {
            font-family: 'Montserrat';
            font-weight: 800;
            font-size: 1.8rem;
            color: var(--brown);
        }

        

        .fact {
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: .8rem;
            text-align: center;
        }

        

        .fact .v {
            font-weight: 700;
            font-family: 'Montserrat';
            margin-top: .2rem;
            color: var(--ink);
        }

        .fact .k {
            font-size: .74rem;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        

        

        

        /* ---- Lightbox ---- */
        

        

        

        

        

        

        

        /* ---- Sección de contacto (premium, con imagen + capas) ---- */
        #contacto {
            position: relative;
            scroll-margin-top: 90px;
            /* Ancla despejada del navbar fijo */
            padding: clamp(3.5rem, 7vw, 6rem) 0;
            background: url('/images/vistaPropiedades/portadaPropiedaes.jpg') center/cover no-repeat;
            overflow: hidden;
        }

        /* Capa 1: oscurecido cálido uniforme (legibilidad) */
        #contacto::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(38, 31, 31, .78);
            z-index: 0;
        }

        #contacto>.container-xxl {
            position: relative;
            z-index: 1;
        }

        #contacto .contact-head .eyebrow {
            color: var(--brand);
        }

        #contacto .contact-head h2 {
            color: #fff;
        }

        #contacto .contact-head p {
            color: #efe6dd;
        }

        .contact-card {
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--line);
            padding: clamp(1.5rem, 4vw, 2.6rem);
            max-width: 820px;
        }

        .contact-card .form-label {
            font-weight: 600;
            color: var(--brown);
            font-size: .85rem;
        }

        .contact-card .form-control {
            border-radius: 12px;
            border: 1px solid var(--line);
            padding: .65rem .85rem;
        }

        .contact-card .form-control:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 .2rem rgba(113, 198, 212, .25);
        }

        .btn-enviar {
            background: var(--brand);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: .8rem 1rem;
            transition: background .2s;
        }

        .btn-enviar:hover:not(:disabled) {
            background: var(--brand-dark);
            color: #fff;
        }

        .btn-enviar:disabled {
            opacity: .85;
            cursor: not-allowed;
        }

        .wa-alt {
            color: var(--muted);
            font-size: .9rem;
        }

        .wa-alt a {
            color: #1da851;
            font-weight: 700;
        }

        .wa-alt a:hover {
            text-decoration: underline;
        }

        @media (max-width: 575.98px) {
            .detail-actions {
                flex-direction: column;
            }
        }