/* =====================================================================
   CasasWeb v26 - Azul cobalto + acento naranja #FF7D00 (etiqueta grande)
   Reemplaza a v25/responsive.css. Solo CSS: no requiere tocar los .aspx.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Figtree:wght@400;500;600;700&display=swap");

:root {
    /* Paleta CasasWeb */
    --cw-cobalto: #1D44C8;
    --cw-cobalto-osc: #16349C;
    --cw-cobalto-rgb: 29, 68, 200;
    --cw-azul-suave: #E6ECFB;
    --cw-azul-linea: #C9D5F5;
    --cw-tinta: #0E1A3A;
    --cw-gris: #526079;
    --cw-linea: #DCE2EE;
    --cw-fondo: #F3F5FA;
    --cw-naranja: #FF7D00;
    --cw-terciario: #F52F57; /* tercer color, reservado para cuando haga falta */
    --cw-terciario-rgb: 245, 47, 87;
    --cw-header-suave: #D3DDFA;
    --cw-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --cw-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Bootstrap */
    --bs-nav-link-font-size: 15px !important;
    --bs-light: #F3F5FA !important;
    --bs-light-rgb: 243, 245, 250 !important;
    --bs-primary: #1D44C8;
    --bs-primary-rgb: 29, 68, 200;
    --bs-link-color: #1D44C8;
    --bs-link-color-rgb: 29, 68, 200;
    --bs-link-hover-color: #16349C;
    --bs-link-hover-color-rgb: 22, 52, 156;
    --bs-body-font-family: var(--cw-texto);
    --bs-body-color: #0E1A3A;
    --bs-body-color-rgb: 14, 26, 58;
    --bs-border-color: #DCE2EE;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 14px;
    --bs-secondary-color: #526079;
    /* *-danger = tercer color, *-warning = naranja */
    --bs-danger: #F52F57;
    --bs-danger-rgb: 245, 47, 87;
    --bs-danger-text-emphasis: #620F20;
    --bs-danger-bg-subtle: #FDD5DD;
    --bs-danger-border-subtle: #FBACBC;
    --bs-warning: #FF7D00;
    --bs-warning-rgb: 255, 125, 0;
    --bs-warning-text-emphasis: #663200;
    --bs-warning-bg-subtle: #FFE5CC;
    --bs-warning-border-subtle: #FFCB99;
}

body {
    font-family: var(--cw-texto);
    font-size: 15px;
    color: var(--cw-tinta);
    background-color: var(--cw-fondo);
}

a:link {
    text-decoration: none;
    color: var(--cw-tinta);
}

h1 {
    font-family: var(--cw-display);
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 15px;
    margin-bottom: 3px;
    font-weight: 700;
}

h3 {
    font-size: 15px;
    margin-bottom: 3px;
    font-weight: 600;
}

.small, small {
    font-size: 13px;
}

.rrss {
    width: auto;
    height: 32px;
}

.logo {
    width: 230px;
}

.lupa {
    width: 20px !important;
    height: 20px !important;
}

.fondo {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.form-select, .form-control {
    font-size: unset !important;
    border-color: var(--cw-linea);
    border-radius: 10px;
}

    .form-select:focus, .form-control:focus {
        border-color: var(--cw-cobalto);
        box-shadow: 0 0 0 .2rem rgba(29, 68, 200, .18);
    }

/* ---------- Botones ---------- */
.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: #1D44C8;
    --bs-btn-border-color: #1D44C8;
    --bs-btn-hover-bg: #16349C;
    --bs-btn-hover-border-color: #16349C;
    --bs-btn-active-bg: #16349C;
    --bs-btn-active-border-color: #16349C;
    --bs-btn-disabled-bg: #1D44C8;
    --bs-btn-disabled-border-color: #1D44C8;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    font-weight: 700;
}

    .btn-primary.text-warning {
        color: #fff !important;
    }

/* Botones hechos con <a>: la regla general a:link los pintaba de negro */
a.btn:link,
a.btn:visited {
    color: var(--bs-btn-color);
}

a.btn:hover,
a.btn:focus,
a.btn:active {
    color: var(--bs-btn-hover-color);
}

/* Botones warning ("+ Filtros", "Limpiar"...) en naranja */
.btn-warning {
    --bs-btn-bg: #FF7D00;
    --bs-btn-border-color: #FF7D00;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #E56F00;
    --bs-btn-hover-border-color: #E56F00;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #CC6400;
    --bs-btn-active-border-color: #CC6400;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #FF7D00;
    --bs-btn-disabled-border-color: #FF7D00;
    font-weight: 700;
}

.btn-outline-warning {
    --bs-btn-color: #CC6400;
    --bs-btn-border-color: #FF7D00;
    --bs-btn-hover-bg: #FF7D00;
    --bs-btn-hover-border-color: #FF7D00;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #E56F00;
    --bs-btn-active-border-color: #E56F00;
    --bs-btn-active-color: #fff;
}

/* Botones danger en el tercer color */
.btn-danger {
    --bs-btn-bg: #F52F57;
    --bs-btn-border-color: #F52F57;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #DC2149;
    --bs-btn-hover-border-color: #DC2149;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #C31A3F;
    --bs-btn-active-border-color: #C31A3F;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #F52F57;
    --bs-btn-disabled-border-color: #F52F57;
    font-weight: 700;
}

.btn-outline-danger {
    --bs-btn-color: #C31A3F;
    --bs-btn-border-color: #F52F57;
    --bs-btn-hover-bg: #F52F57;
    --bs-btn-hover-border-color: #F52F57;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #DC2149;
    --bs-btn-active-border-color: #DC2149;
    --bs-btn-active-color: #fff;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #1D44C8;
    --bs-nav-pills-border-radius: 10px;
}

/* ---------- Cabecera: cobalto, letras blancas, linea naranja ---------- */
header .navbar.bg-white {
    background-color: var(--cw-cobalto) !important;
    box-shadow: inset 0 -4px 0 var(--cw-naranja);
    padding-top: .6rem;
    padding-bottom: .8rem;
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
}

    header .navbar.bg-white .nav-link {
        color: #fff;
        font-weight: 500;
        border-radius: 8px;
    }

        header .navbar.bg-white .nav-link:hover,
        header .navbar.bg-white .nav-link:focus {
            color: #fff;
            background-color: rgba(255, 255, 255, .12);
        }

    /* Logo blanco (el mismo que usa el pie) */
    header .navbar.bg-white img.logo {
        content: url("../v25/casaswebw.svg");
    }

    header .navbar.bg-white .navbar-toggler {
        border-color: rgba(255, 255, 255, .45);
    }

    header .navbar.bg-white .navbar-toggler-icon {
        filter: invert(1) brightness(2);
    }

    header .navbar.bg-white .form-control {
        background-color: var(--cw-cobalto-osc);
        border-color: var(--cw-cobalto-osc);
        color: #fff;
    }

        header .navbar.bg-white .form-control::placeholder {
            color: var(--cw-header-suave);
        }

    header .navbar.bg-white .btn-outline-secondary {
        background-color: var(--cw-cobalto-osc);
        border-color: var(--cw-cobalto-osc);
    }

        header .navbar.bg-white .btn-outline-secondary:hover {
            background-color: var(--cw-naranja);
            border-color: var(--cw-naranja);
        }

    header .navbar.bg-white .lupa {
        filter: invert(1) brightness(2);
    }

/* ---------- Barras de titulo (antes grises) ---------- */
.row.bg-secondary,
#header-result .col-12.bg-secondary,
.container-fluid.text-white.bg-secondary {
    background-color: transparent !important;
    color: var(--cw-tinta) !important;
    margin-left: 0;
    margin-right: 0;
}

    .row.bg-secondary .text-white,
    #header-result .col-12.bg-secondary,
    #header-result .col-12.bg-secondary h1,
    .container-fluid.text-white.bg-secondary h1,
    .container-fluid.text-white.bg-secondary {
        color: var(--cw-tinta) !important;
    }

    .row.bg-secondary h1,
    #header-result .col-12.bg-secondary h1,
    .container-fluid.text-white.bg-secondary h1 {
        font-size: 30px;
    }

    .row.bg-secondary small,
    .row.bg-secondary .small {
        color: var(--cw-gris);
    }

.offcanvas-header.bg-warning {
    color: #fff;
}

    .offcanvas-header.bg-warning .btn-close {
        filter: invert(1) grayscale(1) brightness(2);
    }

/* ---------- Tarjetas de propiedades (resultados y similares) ---------- */
.item-grid .card.border-0 {
    border: 1px solid var(--cw-linea) !important;
    border-radius: 18px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(14, 26, 58, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .item-grid .card.border-0:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(14, 26, 58, .10);
    }

.card-img {
    border-radius: 0;
}

.item-grid .card-img.fondo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Corazon: boton redondo sobre la foto */
.item-grid .card-img-overlay:has(.rrss) {
    top: 8px;
    right: 8px;
    bottom: unset;
    left: unset;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .94) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

    .item-grid .card-img-overlay:has(.rrss) br {
        display: none;
    }

    .item-grid .card-img-overlay .rrss {
        height: 22px;
    }

/* Proyectos: fecha de entrega como etiqueta blanca sobre la foto */
.item-grid .card-img-overlay:not(:has(.rrss)) {
    top: 10px;
    right: 10px;
    bottom: unset;
    left: unset;
    padding: 6px 12px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    text-align: center !important;
    line-height: 1.2;
    font-family: var(--cw-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--cw-tinta);
}

    .item-grid .card-img-overlay:not(:has(.rrss)) small {
        display: inline-block;
        font-family: var(--cw-texto);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--cw-gris) !important;
    }

/* Cuerpo: precio arriba, despues titulo, datos y zona */
.item-info {
    height: auto;
    min-height: 206px;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .item-info .item-precio {
        order: 0;
    }

    .item-info .item-title {
        order: 1;
    }

    .item-info .item-det {
        order: 2;
    }

    .item-info .tipo-propiedad-zona {
        order: 3;
        margin-top: auto;
        color: var(--cw-gris);
    }

.item-proyinfo {
    height: 140px;
}

.item-title {
    height: auto;
    min-height: 42px;
    justify-content: flex-start !important;
}

    .item-title.text-primary {
        color: var(--cw-tinta) !important;
    }

    .item-title h3 {
        text-align: left !important;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.item-det {
    height: auto;
    text-align: left !important;
    margin-bottom: 0 !important;
    color: var(--cw-tinta);
}

/* Precios: etiqueta naranja grande + precio en cobalto */
.item-precio {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 6px 18px;
    margin: 0;
}

.precio,
.precio:first-child,
.precio:last-child {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    text-align: left;
}

    .precio h3 {
        display: inline-block;
        margin: 0 0 6px 0 !important;
        padding: 6px 12px;
        border-radius: 999px;
        background-color: var(--cw-naranja);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1.2;
    }
    .precio h4 {
        display: inline-block;
        margin: 0 0 6px 0 !important;
        padding: 6px 12px;
        border-radius: 999px;
        background-color: var(--cw-naranja);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1.2;
    }

    .precio h2 {
        font-family: var(--cw-display);
        font-size: 24px;
        font-weight: 700;
        color: var(--cw-cobalto);
        letter-spacing: -0.01em;
        line-height: 1.15;
    }

        .precio h2 small {
            font-family: var(--cw-texto);
            font-size: 14px;
            font-weight: 600;
            color: var(--cw-gris);
        }

.item-grid .card-footer {
    background-color: #fff;
    border-top: 1px solid var(--cw-linea);
    text-align: left !important;
    padding: 10px 16px;
}

    .item-grid .card-footer h3 {
        font-size: 13px;
        font-weight: 500;
        color: var(--cw-gris);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Precios de las tarjetas: siempre dos columnas, alquiler/temporal a la izquierda y venta a la derecha */
.item-grid .item-precio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

    .item-grid .item-precio > .precio {
        grid-column: 1;
        min-width: 0;
    }

        .item-grid .item-precio > .precio:has(> h3:not(.cw-alquiler)) {
            grid-column: 2;
            grid-row: 1;
            text-align: right;
        }

    .item-grid .item-precio .precio h2 {
        font-size: 21px;
        overflow-wrap: anywhere;
    }

/* Etiquetas de operacion: alquiler/temporal en danger, venta en naranja */
.precio h4.cw-temporal {
    background-color: var(--cw-terciario);
}
.precio h3.cw-alquiler {
    background-color: var(--cw-terciario);
}
.cw-op {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--cw-texto);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    color: #fff;
    vertical-align: middle;
}

.cw-op-venta {
    background-color: var(--cw-naranja);
}

.cw-op-alquiler {
    background-color: var(--cw-terciario);
}

/* Precios de la ficha: uno por linea */
h2.cw-precio {
    display: block;
    margin: 0 0 8px;
    font-family: var(--cw-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--cw-cobalto);
}

    h2.cw-precio .cw-op {
        margin-right: 8px;
    }

    h2.cw-precio small {
        font-family: var(--cw-texto);
        font-size: 15px;
        font-weight: 500;
        color: var(--cw-gris);
    }

/* Precios con el mismo color que su etiqueta: alquiler/temporal = tercer color, venta = naranja */
.precio h2 {
    color: var(--cw-naranja);
}

.precio:has(> h3.cw-alquiler) h2 {
    color: var(--cw-terciario);
}

h2.cw-precio:has(.cw-op-venta) {
    color: var(--cw-naranja);
}

h2.cw-precio:has(.cw-op-alquiler),
h2.cw-precio:has(.cw-op-alquiler) ~ h2.cw-precio:not(:has(.cw-op)) {
    color: var(--cw-terciario);
}
.precio:has(> h4.cw-temporal) h2 {
    color: var(--cw-terciario);
}
/* Precios temporales de las tarjetas (M. Q. S. D.): uno por linea */
.precio h2 > span[title^="Precio"] {
    display: block;
}

.precio h2 > br {
    display: none;
}

/* Ficha: lista de Detalles en tres columnas (dos en tablet, una en celular) */
ul.cw-detalles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 24px;
}

    ul.cw-detalles > li {
        margin-bottom: 0;
        break-inside: avoid;
    }

@media (max-width: 991.98px) {
    ul.cw-detalles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    ul.cw-detalles {
        grid-template-columns: 1fr;
    }
}

/* ---------- Home ---------- */
.buscador > .container {
    background-color: rgba(255, 255, 255, .96);
    border-radius: 20px;
    padding: 20px 20px 4px;
    box-shadow: 0 12px 32px rgba(14, 26, 58, .25);
}

.buscador .opacity-90 {
    opacity: 1 !important;
}

#busquedasPredeterminadas .card {
    border: 1px solid var(--cw-linea);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(14, 26, 58, .04);
}

#busquedasPredeterminadas .card-title {
    font-size: 24px;
}

#busquedasPredeterminadas h2 {
    font-weight: 600;
    padding: 4px 0;
}

#busquedasPredeterminadas a:hover h2 {
    color: var(--cw-cobalto);
}

/* ---------- Ficha (detalle) ---------- */
.breadcrumb {
    font-size: 13px;
    --bs-breadcrumb-item-active-color: var(--cw-gris);
    margin-bottom: unset;
}

/* Precio principal */
h2.h3.d-inline {
    font-family: var(--cw-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--cw-cobalto);
}

    h2.h3.d-inline .venta.fw-normal,
    h2.h3.d-inline .alquiler.fw-normal,
    h2.h3.d-inline .temporal.fw-normal {
        font-weight: 700 !important;
    }

    h2.h3.d-inline .venta {
        display: inline-block;
        vertical-align: middle;
        padding: 6px 12px;
        border-radius: 999px;
        background-color: var(--cw-naranja);
        color: #fff;
        font-family: var(--cw-texto);
        font-size: 14px;
        letter-spacing: .02em;
    }

    h2.h3.d-inline small {
        font-family: var(--cw-texto);
        font-size: 15px;
        font-weight: 500;
        color: var(--cw-gris);
    }

/* Dormitorios / banos / m2 / ref como etiquetas */
ul.cw-caracteristicas,
section.container.pt-4 ul.d-flex.list-unstyled {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

    ul.cw-caracteristicas li,
    section.container.pt-4 ul.d-flex.list-unstyled li {
        border: 0 !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        border-radius: 999px;
        background-color: var(--cw-azul-suave);
        color: var(--cw-cobalto-osc);
        display: inline-flex;
        align-items: center;
    }

/* Pestanas Mapa / Video de edificio (los botones vienen con text-white desde el .vb) */
#nav-tab.nav-tabs {
    border-bottom-color: var(--cw-linea);
}

    #nav-tab .nav-link,
    #nav-tab .nav-link.text-white {
        color: var(--cw-gris) !important;
        font-weight: 600;
    }

        #nav-tab .nav-link.active {
            color: var(--cw-cobalto) !important;
            border-color: var(--cw-linea) var(--cw-linea) #fff;
        }

#nav-tabContent {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

/* ---------- Unidades de edificio: filtro por tipologia + tarjetas ---------- */
.cw-tipologias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 18px;
}

.cw-tipologia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--cw-linea);
    border-radius: 14px;
    background-color: #fff;
    color: var(--cw-tinta);
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}

    .cw-tipologia:hover {
        border-color: var(--cw-cobalto);
    }

    .cw-tipologia.activa {
        background-color: var(--cw-cobalto);
        border-color: var(--cw-cobalto);
        color: #fff;
    }

.cw-tipologia-nombre {
    font-size: 15px;
    font-weight: 700;
}

.cw-tipologia-desde {
    font-size: 13px;
    color: var(--cw-gris);
}

.cw-tipologia.activa .cw-tipologia-desde {
    color: var(--cw-header-suave);
}

.cw-unidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

a.cw-unidad,
a.cw-unidad:link,
a.cw-unidad:visited {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 12px;
    border: 1px solid var(--cw-linea);
    border-radius: 16px;
    background-color: #fff;
    color: var(--cw-tinta);
    box-shadow: 0 1px 2px rgba(14, 26, 58, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    a.cw-unidad:hover {
        border-color: var(--cw-cobalto);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(14, 26, 58, .10);
    }

.cw-unidad[hidden] {
    display: none !important;
}

.cw-unidad-titulo {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cw-gris);
}

.cw-unidad-precio {
    font-family: var(--cw-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cw-cobalto);
}

    .cw-unidad-precio small {
        font-family: var(--cw-texto);
        font-size: 14px;
        font-weight: 600;
        color: var(--cw-gris);
    }

.cw-unidad-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 14px;
    font-weight: 600;
}

    .cw-unidad-datos > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .cw-unidad-datos .icono {
        height: 18px;
    }

.cw-unidad-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .cw-unidad-chips:empty {
        display: none;
    }

.cw-unidad-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--cw-azul-suave);
    color: var(--cw-cobalto-osc);
    font-size: 12.5px;
    font-weight: 600;
}

.cw-unidad-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--cw-linea);
    font-size: 13px;
    color: var(--cw-gris);
}

.cw-unidad-ver {
    font-weight: 700;
    color: var(--cw-cobalto);
}

/* Iconos de caracteristicas (v26/dormitorio.svg, bano.svg, garaje.svg, metros.svg, ambiente.svg) */
.cw-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

ul.cw-caracteristicas li {
    gap: 6px;
}

/* Badges de edificio: VIS (danger) y entrega (primary) */
.cw-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

    .cw-badges:empty {
        display: none;
    }

.cw-vis,
.cw-badge {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--cw-texto);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}

/* Boton Compartir (edificio) */
.cw-compartir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--cw-linea);
    border-radius: 12px;
    background-color: #fff;
    color: var(--cw-tinta);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(14, 26, 58, .05);
}

    .cw-compartir img {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }

    .cw-compartir:hover,
    .cw-compartir:focus-visible,
    .cw-compartir.show {
        background-color: #fff;
        border-color: var(--cw-cobalto);
        color: var(--cw-cobalto);
    }

.cw-compartir-menu {
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--cw-linea);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(14, 26, 58, .14);
}

    /* diversas.compartir() devuelve los links en fila: los pasamos a lista */
    .cw-compartir-menu > div {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        text-align: left !important;
    }

    .cw-compartir-menu a.btn {
        margin: 0 !important;
        padding: 10px 12px;
        border: 0;
        border-radius: 10px;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        color: var(--cw-tinta);
    }

        .cw-compartir-menu a.btn:hover {
            background-color: var(--cw-azul-suave) !important;
            color: var(--cw-cobalto-osc);
        }

.comparte {
    border-radius: 12px;
    border: 1px solid var(--cw-linea);
}

h3.h4 {
    font-family: var(--cw-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

aside .card.shadow-sm {
    border: 1px solid var(--cw-linea);
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(14, 26, 58, .07) !important;
}

    aside .card.shadow-sm #nombreInmo {
        font-family: var(--cw-display);
        font-size: 20px;
    }

.fotoBKG, .thumb {
    border-radius: 14px !important;
}

/* ---------- Galeria de ficha y edificio: las dos fotos chicas ocupan el alto de la grande ---------- */
@media (min-width: 768px) {
    #lightGallery .row:not(.cw-fotos6) > .col-md-4:has(> .gallery-item2) {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

        #lightGallery .row:not(.cw-fotos6) > .col-md-4:has(> .gallery-item2) > .gallery-item2 {
            position: relative;
            flex: 1 1 0;
            min-height: 0;
            display: block;
            overflow: hidden;
            border-radius: 14px;
        }

            #lightGallery .row:not(.cw-fotos6) > .col-md-4:has(> .gallery-item2) > .gallery-item2 > img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100% !important;
                margin: 0 !important;
                object-fit: cover;
                border-radius: 0 !important;
            }

}

/* Galeria a todo el ancho (edificio): que la foto grande no pase de ~3/4 de pantalla */
@media (min-width: 768px) {
    .cw-galeria #lightGallery .row > .fotoBKG {
        max-height: 72vh;
        overflow: hidden;
        /* la foto grande es el fondo de la columna: sin esto se extiende sobre el espacio entre columnas
           y queda desalineada con las fotos de abajo */
        padding-left: 0;
        padding-right: 0;
        margin-left: calc(var(--bs-gutter-x) * .5);
        margin-right: calc(var(--bs-gutter-x) * .5);
        width: calc(66.66666667% - var(--bs-gutter-x));
    }
}

/* Video destacado de la ficha: ocupa el lugar de la foto grande */
.cw-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    border-radius: 14px;
    overflow: hidden;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

    /* El reproductor es mas alto que el recuadro y se recorta arriba y abajo:
       asi quedan afuera el titulo, el logo y "Mas videos" de YouTube */
    .cw-video iframe {
        position: absolute;
        left: 0;
        top: -60px;
        width: 100%;
        height: calc(100% + 120px);
        border: 0;
    }

    /* Pausado, cargando o terminado: se oculta el reproductor y se ve la foto de portada */
    .cw-video.cw-video-quieto iframe {
        opacity: 0;
    }

    .cw-video iframe {
        transition: opacity .25s ease;
    }

    /* Capa que tapa el reproductor: tocar el video activa o silencia el sonido */
    .cw-video .cw-video-escudo {
        position: absolute;
        inset: 0;
        z-index: 2;
        cursor: pointer;
    }

    /* Boton propio de sonido */
    .cw-video .cw-video-sonido {
        position: absolute;
        right: 12px;
        bottom: 12px;
        z-index: 3;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cw-video .cw-video-sonido svg {
            width: 22px;
            height: 22px;
        }

/* Video vertical (Shorts) en el celular: recuadro vertical para que se vea grande */
@media (max-width: 767.98px) {
    .cw-video.cw-video-vertical {
        aspect-ratio: 9 / 16;
        max-height: 80vh;
    }
}

/* El boton "+ Fotos" de la galeria no se muestra (panel masfotos en detalle y edificio) */
#lightGallery .content-overlay {
    display: none !important;
}

/* ---------- Tarjeta de contacto (ficha y edificio): solo WhatsApp, bien destacada ---------- */
.cw-contacto {
    border: 1px solid var(--cw-linea) !important;
    border-top: 6px solid var(--cw-naranja) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(14, 26, 58, .12) !important;
    overflow: hidden;
}

    .cw-contacto .card-body {
        padding: 22px 22px 8px;
    }

    .cw-contacto .needs-validation {
        margin-bottom: 8px !important;
    }

.cw-contacto-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cw-gris);
    margin-bottom: 6px;
}

.cw-contacto h2,
.cw-contacto h3.border-bottom {
    font-family: var(--cw-display);
    font-size: 22px !important;
    font-weight: 700;
    color: var(--cw-tinta);
    border: 0 !important;
    margin-bottom: 6px !important;
    padding: 0;
}

.cw-contacto h3,
.cw-contacto h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--cw-tinta);
}

/* El link de WhatsApp (diversas.DarWP) pasa a ser un boton grande */
.cw-contacto a[href^="https://wa.me/"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 4px 0 6px;
    padding: 8px 18px !important;
    border-radius: 14px;
    background-color: #0B7A4B;
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(11, 122, 75, .35);
    transition: background-color .15s ease, transform .15s ease;
}

    .cw-contacto a[href^="https://wa.me/"]::after {
        content: "Escribir por WhatsApp";
    }

    .cw-contacto a[href^="https://wa.me/"]:hover {
        background-color: #086840;
        transform: translateY(-1px);
    }

    .cw-contacto a[href^="https://wa.me/"] svg {
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
    }

    .cw-contacto a[href^="https://wa.me/"] + br {
        display: none;
    }

/* Sin salto de linea entre el telefono y el boton de WhatsApp */
.cw-contacto h3 + br {
    display: none;
}

/* "Ver mas propiedades de ..." debajo del WhatsApp (detalle) */
.cw-ver-mas {
    margin-top: 16px;
}

    .cw-ver-mas a {
        color: var(--cw-naranja);
        font-weight: 600;
        text-decoration: none;
    }

        .cw-ver-mas a:hover {
            text-decoration: underline;
        }

/* Pagina de inmobiliaria: la tarjeta de contacto acompana el scroll en pantallas grandes */
@media (min-width: 992px) {
    .cw-inmo-contacto {
        position: sticky;
        top: 100px;
    }
}

/* Titulos que antes eran H1 (tarjetas de la home y de proyectos): mismo aspecto, pero como H2 (un solo H1 por pagina) */
.cw-h1 {
    font-family: var(--cw-display);
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* H1 de la home, sobre la foto del buscador */
.cw-home-h1 {
    color: #fff;
    text-align: center;
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    margin-bottom: 1rem;
}

/* ---------- Pie ---------- */
footer.bg-secondary {
    background-color: var(--cw-tinta) !important;
    border-top: 4px solid var(--cw-naranja);
}

footer a:link, footer a {
    color: #fff;
}

    footer a:hover {
        color: var(--cw-naranja);
    }

/* Galeria de 6 fotos medianas, todas del mismo tamano (compartida / hibrida) */
.cw-fotos6 img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------- Detalle en celulares ---------- */
@media (max-width: 767.98px) {
    /* Solo 3 fotos: la grande (o el video) y dos chicas lado a lado. Las demas siguen en la galeria al tocar. */
    #lightGallery .cw-fotos-mas {
        display: none;
    }

    #lightGallery > .row:first-child {
        --bs-gutter-y: .75rem;
        margin-bottom: 0 !important;
    }

    #lightGallery .cw-fotos-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

        #lightGallery .cw-fotos-top > .gallery-item2:only-child {
            grid-column: 1 / -1;
        }

        #lightGallery .cw-fotos-top img {
            margin-top: 0 !important;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            height: auto;
        }

    /* "Consulta por esta propiedad" antes de las amenities (el mapa sigue al final) */
    .cw-cuerpo {
        flex-direction: column;
    }

        .cw-cuerpo > .cw-cuerpo-main,
        .cw-cuerpo > aside {
            display: contents;
        }

            .cw-cuerpo > .cw-cuerpo-main > *,
            .cw-cuerpo > aside > * {
                margin-left: calc(var(--bs-gutter-x) * .5);
                margin-right: calc(var(--bs-gutter-x) * .5);
            }

        .cw-cuerpo .cw-contacto {
            order: -1;
            margin-bottom: .5rem !important;
        }

    /* Amenities en dos columnas */
    .cw-amenities ul.text-nowrap {
        white-space: normal !important;
    }

        .cw-amenities ul > li {
            flex: 0 0 auto;
            width: 50%;
            display: flex;
            align-items: flex-start;
            margin-bottom: .35rem;
        }

            .cw-amenities ul > li > img {
                margin-top: .2rem;
                flex-shrink: 0;
            }
}

/* ---------- Responsive ---------- */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    header .navbar.bg-white .nav-link {
        padding-left: .8rem;
        padding-right: .8rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}