/* ============ Overrides del sitio ============ */
:root {
    --link-accent: #6EA1CE;
}

/* ===== Header SIEMPRE blanco, sin sombra ===== */
.site-header,
.navbar.navbar-trans {
    background: #f6fbff !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* Marca más pegada y proporcionada */
.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: .4rem
}

.navbar-logo img {
    height: 64px
}

.logo-type {
    line-height: 1
}

    .logo-type .line-1,
    .logo-type .line-2 {
        display: block;
        font: 700 1.28rem/1 "Inter",system-ui
    }

/* Menú + redes muy a la derecha y alineadas verticalmente con el texto */
.navbar-collapse.d-lg-flex {
    flex: 1 1 auto
}

.navbar-nav.main-nav {
    margin-left: auto;
    gap: 2rem;
    align-items: center
}

.site-header .nav-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto !important;
    padding-right: clamp(16px,5vw,56px); /* empuja a la orilla derecha */
}
/* íconos un poquito más arriba para quedar al centro visual de los links */
@media (min-width: 992px) {
    .site-header .nav-icons a {
        transform: translateY(-2px);
    }
}

.nav-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #111;
    text-decoration: none
}

    .nav-icons a:hover {
        color: var(--link-accent)
    }

.ico {
    width: 22px;
    height: 22px
}

@media (max-width:991.98px) {
    .navbar-nav.main-nav {
        margin-left: 0
    }
}

/* ===== HERO: tipografía limpia (sin blur ni fondo) ===== */
.hero-owl {
    overflow: hidden
}

.hero-caption.hero-left {
    position: absolute;
    left: 2.2rem;
    bottom: 11%;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    max-width: min(680px,75vw);
    z-index: 3
}
/* eliminar cualquier glass/blur heredado del tema */
.hero-caption,
.hero-caption * {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.hc-location {
    font: 600 .95rem/1.1 "Inter",system-ui;
    color: #cfe3ff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.hc-title {
    font: 700 clamp(2rem,4vw,3.4rem)/.95 "Playfair Display",serif;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
    letter-spacing: .6px;
}

    .hc-title .light {
        opacity: .25
    }

.hc-price {
    display: inline-block;
    font: 700 1rem/1 "Inter",system-ui;
    color: #ffffff;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.95) !important; /* SOLO contorno */
    border-radius: 999px;
    padding: .6rem 1.2rem;
    background: transparent !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Dots circulares azules (hero) */
#home-hero .owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    display: flex;
    gap: 6px
}

#home-hero .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #c9defc;
    border: 1px solid #2b6ff8;
    display: block;
    transition: transform .15s ease,background .15s ease
}

#home-hero .owl-dot.active span {
    background: #2b6ff8;
    transform: scale(1.18)
}

/* Tarjetas redondeadas (inmuebles recientes) */
.card-box-a {
    border: 0;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    background: #fff;
    transition: transform .25s,box-shadow .25s
}

    .card-box-a:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px rgba(0,0,0,.14)
    }

    .card-box-a .img-box-a,
    .card-box-a .img-box-a img,
    .card-box-a .card-overlay {
        border-radius: inherit
    }

/* Footer: redes centradas */
.section-footer .nav-icons {
    justify-content: center !important;
    margin-left: 0 !important;
}

/* Quitar flecha back-to-top del tema */
.back-to-top {
    display: none !important
}

/* ====== TITULOS DEL HERO (estilo grande, azul + blanco) ====== */
.hc-title {
    /* Pasamos a sans para look moderno como la referencia */
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-weight: 800;
    /* CAMBIO: tamaño del título reducido */
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: .92;
    letter-spacing: .02em;
    color: #ffffff; /* blanco por defecto */
    text-shadow: 0 2px 6px rgba(0,0,0,.35); /* sutil para legibilidad */
    margin: 0; /* compacta el bloque */
}

    /* primera línea en azul (la que envuelves con <span class="light">) */
    .hc-title .light {
        color: var(--link-accent) !important; /* azul del sitio */
        opacity: 1 !important; /* nos aseguramos que no herede transparencias */
    }

/* Ajustamos también el subtítulo h2 por si lo usas en otros slides */
.hero-caption h2.hc-title {
    font-size: clamp(2.2rem, 6.5vw, 5.6rem);
}

/* ====== PRECIO DEL HERO – pill con contorno que calza al texto ====== */
.hc-price {
    display: inline-flex; /* altura centrada al texto */
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.15rem; /* compacto, tipo “chip grande” */
    border: 2px solid rgba(255,255,255,.95) !important;
    border-radius: 999px;
    background: transparent !important; /* sin fondo */
    color: #fff;
    font: 800 1rem/1 "Inter", system-ui;
    text-decoration: none;
    /* el truco para que NO sea largo: se ajuste al contenido */
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap; /* evita que se corte en 2 líneas */
    box-shadow: none !important;
}

/* si alguna regla antigua le da width:100%, la anulamos aquí */
@supports (width: fit-content) {
    .hc-price {
        width: fit-content !important;
    }
}

/* Ajustes de spacing del bloque del hero para acomodar el nuevo tamaño */
.hero-caption.hero-left {
    gap: .75rem; /* un poquito más de aire entre líneas */
    bottom: 11%;
}

.hc-location {
    margin-bottom: .25rem;
    font-weight: 600;
    color: #cfe3ff;
}

/* ===== HERO más alto / imagen alargada ===== */
.hero-owl .hero-img {
    /* Aumenta la altura visual del slide */
    height: clamp(520px, 68vh, 760px); /* ← sube/baja aquí si la quieres aún más alta */
    width: 100%;
    object-fit: cover; /* recorta sin deformar */
    object-position: center;
}

/* Mantén el contenedor redondeado ocupando todo el ancho disponible */
.hero-owl.rounded-xxl {
    border-radius: 28px;
    overflow: hidden;
}

/* ===== NAVBAR layout: brand izq / menú centro / redes extremo der ===== */
/* El header ya está con container-fluid: ahora centramos el menú y empujamos redes */
.navbar-brand-container {
    margin-right: 12px;
}

.navbar-collapse.d-lg-flex {
    display: flex;
    align-items: center;
    gap: 0
}

.navbar-nav.main-nav {
    /* menú centrado visualmente */
    margin: 0 auto !important;
    gap: 2.6rem; /* separa las 4 secciones */
    align-items: center;
}

.site-header .nav-icons {
    margin-left: auto !important; /* empuja redes a la derecha */
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: clamp(18px, 6vw, 72px); /* llévalas lo más a la orilla */
}

/* Pegamos más el texto “Soluciones Inmobiliarias” al logo */
.navbar-logo img {
    height: 64px
}

.logo-type {
    margin-left: .35rem
}

/* Íconos outline: tamaño y hover (con tu azul de la página) */
:root {
    --link-accent: #6EA1CE;
}
/* si quieres globalmente otro azul, cámbialo aquí */
.ico {
    width: 22px;
    height: 22px
}

.nav-icons a {
    color: #1a1a1a
}

    .nav-icons a:hover {
        color: var(--link-accent)
    }

/* Ajuste fino vertical para centrar visualmente los íconos con el texto del menú */
@media (min-width: 992px) {
    .site-header .nav-icons a {
        transform: translateY(-2px);
    }
}

/* ===== Hero: títulos y precio se mantienen como ya los tienes ===== */
/* (Solo se heredan los tamaños que definiste antes) */

/* === Redes en header y footer: color base + hover azul (usa tus íconos anteriores de FA) === */
:root {
    /* Asegúrate que este azul coincida con el del sitio */
    --link-accent: #6EA1CE;
}

/* Header */
.site-header .nav-icons a {
    color: #2b2b2b; /* gris oscuro base */
    transition: color .18s ease, transform .18s ease;
}

    .site-header .nav-icons a:hover {
        color: var(--link-accent); /* azul en hover */
        transform: translateY(-1px);
    }
    /* Tamaño uniforme para FA */
    .site-header .nav-icons a .fa {
        font-size: 20px;
        line-height: 1;
    }

/* Footer centrado (ya lo tenías), mismo hover azul */
.section-footer .nav-icons a {
    color: #2b2b2b;
    transition: color .18s ease, transform .18s ease;
}

    .section-footer .nav-icons a:hover {
        color: var(--link-accent);
        transform: translateY(-1px);
    }

    .section-footer .nav-icons a .fa {
        font-size: 20px;
        line-height: 1;
    }

/* Compatibilidad si en algún lugar quedaron SVGs outline:
   al cambiar color del <a>, el SVG toma ese color */
.nav-icons a svg {
    width: 20px;
    height: 22px;
}

.nav-icons a:hover svg * {
    /* Solo funcionará si el SVG usa stroke/fill = currentColor (los nuestros ya lo usan) */
    stroke: currentColor !important;
    fill: currentColor !important;
}

/* ===== Footer: iconos blancos ===== */
.section-footer .nav-icons a {
    color: #ffffff !important; /* blanco por defecto */
    opacity: .95;
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
}

    .section-footer .nav-icons a:hover {
        color: var(--link-accent) !important; /* azul del sitio al pasar el mouse */
        opacity: 1;
        transform: translateY(-1px);
    }

    /* Tamaño consistente para Font Awesome en footer */
    .section-footer .nav-icons a .fa {
        font-size: 22px;
        line-height: 1;
    }

    /* Si algún icono es SVG, hereda el color blanco/azul correctamente */
    .section-footer .nav-icons a svg {
        width: 20px;
        height: 22px;
    }

        .section-footer .nav-icons a svg * {
            stroke: currentColor !important;
            fill: currentColor !important;
        }

/* ===== NAVBAR: grid con espacios iguales y menú centrado ===== */
.site-header .container,
.site-header .container-fluid {
    /* mismo espacio a ambos lados y ancho máximo centrado */
    max-width: 1250px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 16px);
    /* layout en 3 columnas: brand | centro (menú) | redes */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: clamp(12px, 3vw, 12px);
}

/* Colocación explícita de cada bloque en la grilla */
.navbar-brand-container {
    grid-column: 1;
}

.navbar-collapse {
    grid-column: 2;
}

.site-header .nav-icons {
    grid-column: 3;
    justify-self: end;
}

/* Menú realmente centrado */
.navbar-nav.main-nav {
    margin: 0 !important; /* evita empujes */
    justify-content: center; /* centra contenido del ul */
    gap: clamp(20px, 4vw, 68px); /* separación entre secciones */
}

/* Iconos de redes pegados a la derecha del contenedor */
.site-header .nav-icons {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 0; /* sin relleno extra */
}

/* Logo + texto más juntos (como la referencia) */
.navbar-logo img {
    height: 70px;
}

.logo-type {
    margin-left: -.90rem;
}
    /* pega el texto al logo */
    .logo-type .line-1, .logo-type .line-2 {
        font-weight: 1100; /* más presencia como la muestra */
    }

/* Ajuste fino vertical para alinear iconos con el texto del menú */
@media (min-width: 992px) {
    .site-header .nav-icons a {
        transform: translateY(-1px);
    }
}

/* Responsivo: cuando se colapsa el menú, dejamos que el header fluya normal */
@media (max-width: 991.98px) {
    .site-header .container,
    .site-header .container-fluid {
        grid-template-columns: auto 1fr; /* brand | botón/collapse */
    }

    .navbar-collapse {
        grid-column: 1 / -1;
    }
    /* ocupa ancho completo al abrir */
    .navbar-nav.main-nav {
        justify-content: flex-start;
    }

    .site-header .nav-icons {
        justify-self: end;
    }
}

/* === HEADER: mismo espacio a izquierda y derecha (más aire) === */
:root {
    /* sube este valor si quieres todavía más margen lateral */
    --header-hpad: clamp(32px, 7vw, 96px); /* antes 24–80px */
    --header-max: 1440px; /* puedes dejarlo o subir a 1500 */
}

.site-header .container,
.site-header .container-fluid {
    max-width: var(--header-max);
    margin-inline: auto; /* centrado real del bloque */
    padding-inline: var(--header-hpad); /* ← margen igual en ambos lados */
    /* columnas: izquierda | centro | derecha (menú siempre centrado) */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(12px, 3vw, 32px);
}

/* posiciones */
.navbar-brand-container {
    grid-column: 1;
    justify-self: start;
}

.navbar-collapse {
    grid-column: 2;
    justify-self: center;
}

.site-header .nav-icons {
    grid-column: 3;
    justify-self: end;
}

/* menú centrado */
.navbar-nav.main-nav {
    margin: 0 !important;
    justify-content: center;
    gap: clamp(28px, 4.2vw, 64px);
}

/* branding más pegado y grande (sin empujar a la izquierda) */
.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: .22rem;
}

.navbar-logo img {
    height: 74px;
}

.logo-type {
    margin-left: 0;
}
    /* evita desbalancear el margen izq */
    .logo-type .line-1, .logo-type .line-2 {
        font-weight: 900;
        font-size: clamp(1.35rem, 1.7vw, 1.95rem);
        line-height: .92;
    }

/* iconos totalmente a la derecha */
.site-header .nav-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 0;
}

/* responsive */
@media (max-width: 991.98px) {
    .site-header .container,
    .site-header .container-fluid {
        grid-template-columns: auto 1fr;
    }

    .navbar-collapse {
        grid-column: 1 / -1;
    }

    .navbar-nav.main-nav {
        justify-content: flex-start;
    }

    .site-header .nav-icons {
        justify-self: end;
    }
}

/* ===== Botón de servicios: azul corporativo, hover solo texto ===== */
:root {
    --btn-deep: #0E3A78; /* azul de tu muestra (ajústalo si quieres) */
    --link-accent: #6EA1CE; /* azul claro que ya usas para hover */
}

.svc-btn {
    background: var(--btn-deep) !important;
    border: 1px solid var(--btn-deep) !important;
    color: #ffffff !important; /* texto blanco normal */
    transition: color .18s ease, transform .15s ease;
}

    .svc-btn:hover {
        background: var(--btn-deep) !important; /* NO cambia el fondo */
        border-color: var(--btn-deep) !important; /* NO cambia el borde */
        color: var(--link-accent) !important; /* SOLO cambian las letras a azul claro */
        transform: translateY(-1px);
    }

    .svc-btn:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--link-accent) 70%, white);
        outline-offset: 2px;
        box-shadow: none;
    }

/* ===== Property carousel: tarjetas uniformes ===== */
#property-carousel .carousel-item-b,
#property-carousel .card-box-a {
    height: clamp(420px, 58vh, 560px); /* ← un alto único para todas */
    border-radius: 28px;
    overflow: hidden; /* recorta imagen y overlay sin “mordidas” */
    box-shadow: 0 10px 30px rgba(0,0,0,.10); /* sombra limpia sin halos grises */
}

/* la caja de imagen ocupa TODO y recorta con object-fit */
#property-carousel .img-box-a {
    height: 100%;
}

    #property-carousel .img-box-a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* evita “línea fantasma” */
        backface-visibility: hidden; /* evita bordes pixelados al redondear */
        transform: translateZ(0); /* ayuda a WebKit con el borde redondo */
    }

/* overlay limpio, sin glass/blur, con degradado para legibilidad */
#property-carousel .card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,0) 100%);
    box-shadow: none !important; /* quita sombras del tema */
    backdrop-filter: none !important; /* elimina blur */
    -webkit-backdrop-filter: none !important;
}

/* contenedor de textos al fondo, con espacio suficiente */
#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(16px, 2.2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* títulos responsivos y sin wrap raro */
#property-carousel .card-title-a a,
#property-carousel .card-title-a {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    line-height: 1.1;
    color: #fff;
    word-break: keep-all;
    overflow: visible; /* sin recortes */
}

/* “precio” tipo chip, contorno nítido */
#property-carousel .price-box .price-a {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.94);
    background: transparent !important; /* sin fondo lechoso */
    color: #fff;
    box-shadow: none !important;
    width: fit-content;
    white-space: nowrap;
}

/* link “Click para ver ahora” */
#property-carousel .link-a {
    color: #e6eefc;
    text-decoration: none;
    font-weight: 600;
}

    #property-carousel .link-a:hover {
        color: var(--link-accent,#2b6ff8);
    }

/* nada de sombras sobre la imagen/overlay que creen halo */
#property-carousel .card-box-a .card-overlay,
#property-carousel .card-box-a .img-box-a img {
    box-shadow: none !important;
}
/* asegura borde perfecto con radius */
#property-carousel .card-box-a,
#property-carousel .img-box-a,
#property-carousel .card-overlay {
    border-radius: 28px;
    overflow: hidden;
}

/* ===== Dots del carrusel (estilo actual del sitio) ===== */
#property-carousel .owl-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

#property-carousel .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #111; /* negro */
    opacity: .35;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

#property-carousel .owl-dot:hover span {
    opacity: .65;
}

#property-carousel .owl-dot.active span {
    background: var(--link-accent,#2b6ff8); /* azul activo */
    opacity: 1;
    transform: scale(1.15);
}
/* si tu tema mete nav flechas o bullets distintos, los ocultamos */
#property-carousel .owl-nav {
    display: none !important;
}

@media (max-width: 576px) {
    #property-carousel .carousel-item-b,
    #property-carousel .card-box-a {
        height: clamp(360px, 62vh, 460px); /* altura adaptada a celular */
    }

    #property-carousel .card-overlay-a-content {
        padding: 16px;
        gap: 8px;
    }

    #property-carousel .card-title-a a,
    #property-carousel .card-title-a {
        font-size: clamp(1.2rem, 6vw, 1.6rem);
    }

    #property-carousel .price-box .price-a {
        padding: .55rem .9rem;
        border-width: 2px;
    }
}


/* ====== SECTION: Inmuebles Recientes – ajustes globales ====== */
.section-property.section-t8 {
    padding-top: clamp(24px,4vw,44px);
    padding-bottom: clamp(28px,5vw,56px);
}

.section-property .title-wrap {
    margin-bottom: clamp(12px,3vw,22px);
}

/* ====== Tarjeta uniforme y limpia (sin halos) ====== */
#property-carousel .carousel-item-b,
#property-carousel .card-box-a {
    position: relative;
    height: clamp(420px, 58vh, 560px); /* alto único para todas */
    border-radius: 28px;
    overflow: hidden; /* recorte duro */
    box-shadow: 0 10px 30px rgba(0,0,0,.10); /* sombra suave, sin halo */
    clip-path: inset(0 round 28px); /* evita el borde gris en navegadores */
}

#property-carousel .img-box-a {
    height: 100%;
}

    #property-carousel .img-box-a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* sin línea fantasma */
        backface-visibility: hidden;
        transform: translateZ(0);
    }

#property-carousel .owl-item,
#property-carousel .owl-stage-outer {
    background: transparent !important;
}

/* ====== Overlay de arriba: degradado limpio y textos que no se cortan ====== */
#property-carousel .card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,0) 100%);
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(14px, 2.2vw, 26px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#property-carousel .card-title-a,
#property-carousel .card-title-a a {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    line-height: 1.1;
    color: #fff;
    overflow: visible;
    word-break: keep-all;
}

/* “Precio” como chip con contorno nítido */
#property-carousel .price-box .price-a {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.94);
    background: transparent !important;
    color: #fff;
    width: fit-content;
    white-space: nowrap;
    box-shadow: none !important;
}

#property-carousel .link-a {
    color: #e6eefc;
    font-weight: 600;
    text-decoration: none;
}

    #property-carousel .link-a:hover {
        color: var(--link-accent,#2b6ff8);
    }

/* ====== Datos abajo con reveal on-hover (como antes) ====== */
#property-carousel .card-footer-a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 0;
    padding: 12px clamp(12px,2vw,18px);
    background: rgba(14,58,120,.88); /* azul corporativo translúcido */
    color: #fff;
    transform: translateY(100%); /* oculto por defecto */
    transition: transform .25s ease;
}

#property-carousel .card-box-a:hover .card-footer-a {
    transform: translateY(0); /* se desliza al pasar el mouse */
}

#property-carousel .card-footer-a .card-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

    #property-carousel .card-footer-a .card-info li {
        list-style: none;
    }

#property-carousel .card-footer-a .card-info-title {
    font: 700 .92rem/1 Inter,system-ui;
    color: #cfe3ff;
}

#property-carousel .card-footer-a span {
    color: #fff;
}

/* ====== Dots de navegación (negro → azul activo) ====== */
#property-carousel .owl-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

#property-carousel .owl-dot span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #111;
    opacity: .35;
    transition: transform .15s, opacity .15s, background .15s;
}

#property-carousel .owl-dot:hover span {
    opacity: .65;
}

#property-carousel .owl-dot.active span {
    background: var(--link-accent,#2b6ff8);
    opacity: 1;
    transform: scale(1.15);
}

#property-carousel .owl-nav {
    display: none !important;
}

/* ====== Mobile – misma idea, menos alto ====== */
@media (max-width:576px) {
    #property-carousel .carousel-item-b,
    #property-carousel .card-box-a {
        height: clamp(360px, 62vh, 460px);
    }

    #property-carousel .card-overlay-a-content {
        padding: 16px;
        gap: 8px;
    }

    #property-carousel .card-title-a,
    #property-carousel .card-title-a a {
        font-size: clamp(1.2rem, 6vw, 1.6rem);
    }

    #property-carousel .price-box .price-a {
        padding: .55rem .9rem;
        border-width: 2px;
    }

    #property-carousel .card-footer-a {
        padding: 10px 14px;
    }
}

/***** ====== 1) Tarjeta: subir título/CTA cuando aparece la banda de datos ====== *****/

/* altura de la banda inferior (datos) para calcular el “empuje” */
:root {
    --prop-footer-h: 5px; /* ajusta a ojo si tu banda es más alta/baja */
}

/* banda inferior: oculta por defecto y desliza hacia arriba en hover */
#property-carousel .card-footer-a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 0;
    padding: 12px clamp(12px,2vw,18px);
    background: rgba(14,58,120,.88);
    color: #fff;
    transform: translateY(100%);
    min-height: var(--prop-footer-h);
    transition: transform .25s ease;
}

#property-carousel .card-box-a:hover .card-footer-a {
    transform: translateY(0);
}

/* CONTENIDO SUPERIOR (título + precio + link): lo subimos cuando aparece la banda */
#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(14px, 2.2vw, 26px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .25s ease;
}
/* empuje hacia arriba: exactamente la altura de la banda */
#property-carousel .card-box-a:hover .card-overlay-a-content {
    transform: translateY(calc(-1 * var(--prop-footer-h)));
}

/* Mobile: banda un poco más compacta y empuje menor */
@media (max-width: 576px) {
    :root {
        --prop-footer-h: 64px;
    }

    #property-carousel .card-footer-a {
        padding: 10px 14px;
    }
}

/***** ====== 2) Título de la sección + “Más Inmuebles” con estilo del sitio ====== *****/

/* título grande con Playfair (look editorial) */
.section-property .title-box .title-a {
    font-family: "Playfair Display", serif;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    line-height: 1.05;
    color: #111;
    margin: 0; /* quita saltos raros */
}

/* link a la derecha estilo limpio con flecha y color del tema */
.section-property .title-link a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font: 700 clamp(.95rem, 2.4vw, 1.1rem)/1 "Inter",system-ui;
    color: #222;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
}

    .section-property .title-link a::after {
        content: "›";
        display: inline-block;
        transform: translateY(1px);
    }

    .section-property .title-link a:hover {
        color: var(--link-accent, #2b6ff8);
        transform: translateX(2px);
    }

/***** ====== 3) Menos espacio entre secciones (apenas) ====== *****/
.section-property.section-t8 {
    padding-top: clamp(20px,3.4vw,36px); /* un poco menos que antes */
    padding-bottom: clamp(24px,4vw,44px);
}

.section-property .title-wrap {
    margin-bottom: clamp(10px,2.6vw,18px);
}

/***** ====== (coherencia visual) Títulos y CTA dentro de tarjeta ====== *****/

/* Título de la propiedad */
#property-carousel .card-title-a,
#property-carousel .card-title-a a {
    font-family: "Playfair Display", serif;
    font-weight: 800;
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    line-height: 1.08;
    color: #fff;
    text-decoration: none;
}

/* Precio tipo chip (contorno nítido) */
#property-carousel .price-box .price-a {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.94);
    background: transparent !important;
    color: #fff;
    white-space: nowrap;
    width: fit-content;
}

/* CTA “Click para ver ahora” – texto con hover azul */
#property-carousel .link-a {
    color: #e6eefc;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    #property-carousel .link-a::after {
        content: "›";
        transform: translateY(1px);
    }

    #property-carousel .link-a:hover {
        color: var(--link-accent,#2b6ff8);
    }

/* ===== FIX 1: CTA y título siempre por encima y más arriba ===== */

/* altura efectiva de la banda (incluye padding) */
:root {
    --prop-footer-h: -15px;
}
/* súbelo/bájalo si tu banda es mayor/menor */

/* banda de datos abajo */
#property-carousel .card-footer-a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* debajo del bloque de textos */
    transform: translateY(100%);
    transition: transform .25s ease;
    min-height: var(--prop-footer-h);
}

/* bloque superior (título + precio + CTA) */
#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* por encima de la banda */
    transition: transform .25s ease;
}

/* al hover: mostramos banda y SUBIMOS título/CTA lo suficiente */
#property-carousel .card-box-a:hover .card-footer-a {
    transform: translateY(0);
}

#property-carousel .card-box-a:hover .card-overlay-a-content {
    transform: translateY(calc(-1 * (var(--prop-footer-h) + 6px)));
}

/* móvil: un empuje un poco menor */
@media (max-width:576px) {
    :root {
        --prop-footer-h: 72px;
    }

    #property-carousel .card-box-a:hover .card-overlay-a-content {
        transform: translateY(calc(-1 * (var(--prop-footer-h) + 4px)));
    }
}

/* ===== FIX 2: flechas duplicadas — dejamos SOLO la chiquita del HTML ===== */

/* “Más Inmuebles”: elimina la pseudo-flecha añadida */
.section-property .title-link a::after {
    content: none !important;
}

/* “Click para ver ahora”: elimina la pseudo-flecha añadida */
#property-carousel .link-a::after {
    content: none !important;
}

/* si algún tema mete doble icono por ::before, lo anulamos también */
.section-property .title-link a::before,
#property-carousel .link-a::before {
    content: none !important;
}

/* ==================== CARDS – FIX OVERLAY ==================== */
/* Altura real de la banda de datos (ajústala si la tuya varía) */
:root {
    --prop-footer-h: 90px;
}
/* 86–100px según tu contenido */

/* Asegura geometría limpia (sin halos) */
#property-carousel .card-box-a {
    position: relative;
    border-radius: 28px; /* redondo consistente */
    overflow: hidden; /* recorta sombras/halos */
    background: transparent; /* evita “gris” detrás */
}

#property-carousel .img-box-a,
#property-carousel .img-box-a img,
#property-carousel .card-overlay {
    border-radius: inherit !important;
}

    #property-carousel .img-box-a img {
        display: block
    }

/* BANDA de datos abajo: escondida hasta hover */
#property-carousel .card-footer-a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* debajo de textos */
    transform: translateY(100%);
    min-height: var(--prop-footer-h);
    transition: transform .28s ease;
    will-change: transform;
}

/* BLOQUE superior (título + precio + “Click para ver ahora”)   */
/* Reservamos espacio inferior == altura de la banda (¡clave!)   */
#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-bottom: calc(var(--prop-footer-h) + 12px);
    transition: transform .28s ease;
    will-change: transform;
}

/* Hover: sube la banda y el bloque de textos “acompaña” */
#property-carousel .card-box-a:hover .card-footer-a {
    transform: translateY(0);
}

#property-carousel .card-box-a:hover .card-overlay-a-content {
    transform: translateY(-10px); /* leve lift (ajústalo si quieres) */
}

/* Mobile: banda un pelín más compacta */
@media (max-width: 576px) {
    :root {
        --prop-footer-h: 80px;
    }

    #property-carousel .card-box-a:hover .card-overlay-a-content {
        transform: translateY(-6px);
    }
}

/* Cards siempre misma altura aunque cambie la foto */
#property-carousel .carousel-item-b,
#property-carousel .card-box-a {
    height: 450px; /* AJUSTA a tu gusto (520–600) */
}

@media (max-width: 991.98px) {
    #property-carousel .carousel-item-b,
    #property-carousel .card-box-a {
        height: 520px;
    }
}

#property-carousel .img-box-a {
    height: 100%;
}

    #property-carousel .img-box-a img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

/* Reduce suavemente la separación vertical entre bloques principales */
.section-t8,
.section-property {
    padding-block: clamp(35px, 3vw, 10px);
}

    .section-property + .section-property {
        margin-top: clamp(20px, 3vw, 22px);
    }


/* ===========================================================
   INMUEBLES RECIENTES – Tarjeta con banda inferior pegada,
   textos que “suben”, alturas iguales y espaciados compactos
   =========================================================== */

:root {
    --prop-card-h-desktop: 480px; /* alto fijo tarjeta (desktop) */
    --prop-card-h-mobile: 480px; /* alto fijo tarjeta (mobile)  */
    --prop-footer-h: 90px; /* alto de la banda de datos  */
    --prop-lift: 0px; /* cuánto “sube” el bloque de textos */
}

/* Geometría limpia (sin halos/grises) */
#property-carousel .card-box-a {
    position: relative;
    border-radius: 28px;
    overflow: hidden; /* recorta cualquier resto */
    background: transparent !important;
    box-shadow: none;
}

#property-carousel .img-box-a,
#property-carousel .img-box-a img,
#property-carousel .card-overlay {
    border-radius: inherit !important;
}

#property-carousel .img-box-a {
    height: 100%;
}

    #property-carousel .img-box-a img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Alto idéntico para todas las tarjetas */
#property-carousel .carousel-item-b,
#property-carousel .card-box-a {
    height: var(--prop-card-h-desktop);
}

@media (max-width: 991.98px) {
    #property-carousel .carousel-item-b,
    #property-carousel .card-box-a {
        height: var(--prop-card-h-mobile);
    }
}

/* BANDA de datos pegada al borde inferior (oculta hasta activar) */
#property-carousel .card-footer-a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0 !important;
    z-index: 1; /* debajo del bloque de textos */
    min-height: var(--prop-footer-h);
    transform: translateY(100%); /* totalmente escondida */
    margin: 0 !important;
    transition: transform .28s ease;
    will-change: transform;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Bloque de textos (título + precio + link): reserva espacio de la banda */
#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-bottom: calc(var(--prop-footer-h) + 12px) !important;
    transition: transform .28s ease;
    will-change: transform;
}

/* Activación: hover/focus/estado activo */
#property-carousel .card-box-a:hover .card-footer-a,
#property-carousel .card-box-a.is-active .card-footer-a,
#property-carousel .card-box-a:focus-within .card-footer-a {
    transform: translateY(0);
}

#property-carousel .card-box-a:hover .card-overlay-a-content,
#property-carousel .card-box-a.is-active .card-overlay-a-content,
#property-carousel .card-box-a:focus-within .card-overlay-a-content {
    transform: translateY(calc(-1 * var(--prop-lift)));
}

/* Mobile: un poco menos de “lift” y banda */
@media (max-width: 576px) {
    :root {
        --prop-footer-h: 88px;
        --prop-lift: 0px;
    }
}

/* ——— Ajustes visuales coherentes con tu estilo ——— */
#property-carousel .card-title-a a {
    color: #fff;
    text-decoration: none;
}

#property-carousel .price-a {
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 999px;
    padding: .65rem 1.2rem;
    background: transparent !important;
    color: #fff;
    font-weight: 800;
}

#property-carousel .link-a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    text-decoration: none;
}

    #property-carousel .link-a .ion-ios-arrow-forward {
        font-size: 1rem;
        line-height: 1; /* flecha pequeña */
    }

/* ——— Espacio entre secciones (Servicios ↔ Inmuebles) más compacto ——— */
/* Si tu bloque de servicios tiene otra clase, cámbiala aquí */
.section-services {
    margin-bottom: clamp(10px,3.6vw,20px);
}

.section-property, .section-t8 {
    padding-block: clamp(24px,3vw,40px);
}

.section-services + .section-property {
    margin-top: clamp(10px,2.4vw,10px) !important;
}

/* Blindaje: evita que estilos del tema reposicionen capas o dejen halos */
#property-carousel .card-overlay {
    pointer-events: none;
}

#property-carousel .card-overlay-a-content,
#property-carousel .card-footer-a {
    background-clip: padding-box;
}

/* --- FIX: que el link "Click para ver ahora" sí reciba el click --- */
#property-carousel .card-footer-a {
    pointer-events: none; /* NO intercepta clicks cuando está oculta */
}

#property-carousel .card-box-a:hover .card-footer-a,
#property-carousel .card-box-a.is-active .card-footer-a {
    pointer-events: auto; /* solo clickeable cuando está visible */
}

/* Asegura que el bloque de textos y links siempre sea clickeable */
#property-carousel .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: auto; /* recibe los clicks */
}

/* (opcional) por si algún overlay global estorba */
#property-carousel .card-overlay {
    pointer-events: none; /* el contenedor no intercepta */
}

#property-carousel .card-overlay-a-content,
#property-carousel .card-header-a,
#property-carousel .card-body-a {
    pointer-events: auto; /* pero el contenido sí */
}

/* ========== COMPACTAR AL MÁXIMO EL ESPACIO ANTES DE LAS TARJETAS ========== */

/* 1) Cierra el bloque de Servicios (reduce margen/padding inferior) */
#servicios,
.svc-rows {
    margin-bottom: clamp(6px, 1.2vw, 12px) !important;
    padding-bottom: clamp(4px, 0.8vw, 8px) !important;
}

/* 2) Neutraliza el aire grande del tema en la sección de inmuebles */
.section-t8,
.section-property.section-t8,
section.section-property.section-t8 {
    padding-top: clamp(8px, 1.2vw, 12px) !important;
    padding-bottom: clamp(16px, 2vw, 20px) !important;
    margin-top: 0 !important;
}

/* 3) Junta explícitamente “Servicios” con “Inmuebles recientes”.
      Un pequeño margen negativo ayuda si algo aún empuja */
#servicios + .section-property,
.svc-rows + .section-property {
    margin-top: -10px !important; /* ajusta a -6 / -12 según necesites */
}

/* 4) Título del bloque: recorta el espacio extra */
.section-property .title-wrap {
    margin-top: 0 !important;
    margin-bottom: clamp(6px, 1vw, 12px) !important;
    padding-bottom: 0 !important;
}

/* 5) Contenedor Bootstrap: elimina padding vertical extra */
.section-property .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 6) Owl Carousel a filo (sin rellenos que sumen hueco) */
#property-carousel.owl-carousel {
    margin: 0 !important;
    padding: 0 !important;
}

#property-carousel .owl-stage-outer {
    margin: 0 !important;
    padding: 0 !important;
}

/* 7) Por si algún .row añade espacio vertical */
.section-property .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 8) Móvil: aún más pegado */
@media (max-width: 576px) {
    #servicios, .svc-rows {
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    .section-t8,
    .section-property.section-t8,
    section.section-property.section-t8 {
        padding-top: 8px !important;
        padding-bottom: 14px !important;
    }

    .section-property .title-wrap {
        margin-bottom: 8px !important;
    }
}

/* Ruta base de ejemplo: /assets/fonts/theseasons/ */
@font-face {
    font-family: "TheSeasons";
    src: url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-reg.woff2") format("woff2"), url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-reg.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TheSeasons";
    src: url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-it.woff2") format("woff2"), url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-it.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "TheSeasons";
    src: url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-lt.woff2") format("woff2"), url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-lt.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TheSeasons";
    src: url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-ltit.woff2") format("woff2"), url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-ltit.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "TheSeasons";
    src: url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-bd.woff2") format("woff2"), url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-bd.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TheSeasons";
    src: url("/assets-redesign/fontsthe-seasons/fonnts.com-theseasons-bdit.woff2") format("woff2"), url("/assets-redesign/fonts/the-seasons/fonnts.com-theseasons-bdit.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ====== Forzar TheSeasons en toda la app ====== */
:root {
    --ui-font: "TheSeasons", serif;
}

/* Base y elementos generales */
html, body,
button, input, select, textarea,
.navbar, .dropdown-menu, .btn,
.card, .modal, .breadcrumb, .pagination,
.table, .form-control, label,
.alert, .badge, .list-group, .accordion,
small, .lead, .text-*, p, span, li, a {
    font-family: var(--ui-font) !important;
    font-weight: 400;
    letter-spacing: 0; /* The Seasons luce bien sin tracking extra */
}

/* Títulos y headers */
h1, h2, h3, h4, h5, h6,
.title-a, .title-box h2, .w-title-a,
.svc-title, .hc-title, .card-title-a,
.section-footer h3, .w-header-a h3 {
    font-family: var(--ui-font) !important;
    font-weight: 700;
}

/* Itálicas donde aplique */
em, i, .fst-italic {
    font-style: italic;
}

/* Componentes que tu tema fijaba a Inter: los neutralizamos */
.hero-caption .hc-title,
.logo-type .line-1, .logo-type .line-2,
.navbar-nav .nav-link,
.price-a, .link-a, .link-c, .link-icon,
.card-info-title, .card-info span,
.svc-kicker, .svc-text, .svc-btn,
footer, .content-r, .content-p {
    font-family: var(--ui-font) !important;
}

/* Si alguna clase “agresiva” del tema insiste en Inter: */
[class*="inter"], [data-font="inter"] {
    font-family: var(--ui-font) !important;
}

/* Ajustes finos opcionales (puedes mantenerlos o quitarlos) */
.title-a {
    font-weight: 700;
}

.navbar .nav-link {
    font-weight: 500;
}

.price-a {
    font-weight: 600;
}

.svc-kicker {
    font-weight: 400;
    letter-spacing: .02em;
}

/* ======= THE SEASONS – FORZAR EN TODA LA UI ======= */
/* No toques íconos (FontAwesome/Ionicons) ni Owl flechas */
:root {
    --ui-font: "TheSeasons", serif;
}

/* Base más amplia (incluye pseudo-elementos) */
html, body,
html *:not(i):not([class^="fa"]):not([class*=" fa-"]):not(.ion):not([class^="ion-"]),
html *::before,
html *::after {
    font-family: var(--ui-font) !important;
}

/* Formularios (inputs/selects a veces resisten) */
button, input, select, textarea, label,
.form-control, .custom-select, .custom-file-label {
    font-family: var(--ui-font) !important;
}

/* Placeholders */
::placeholder {
    font-family: var(--ui-font) !important;
}

/* Titulares del tema y de secciones comunes */
h1, h2, h3, h4, h5, h6,
.title-a, .w-title-a, .w-header-a h3,
.card-title-a, .svc-title, .hc-title,
.navbar .navbar-brand, .navbar .nav-link,
.section-footer h3, footer, .content-r, .content-p,
.price-a, .link-a, .link-c, .link-icon,
.card-info-title, .card-info span,
.owl-theme .owl-dots .owl-dot span,
.btn, .badge, .breadcrumb, .pagination, .modal,
.table, .alert, .list-group, .accordion {
    font-family: var(--ui-font) !important;
}

/* Si algo trae inline style con font-family=Inter… */
*[style*="font-family"] {
    font-family: var(--ui-font) !important;
}

/* Aclara pesos habituales en tu sitio (opcional) */
h1, h2, .title-a, .svc-title, .hc-title {
    font-weight: 700;
}

.navbar .nav-link, .btn {
    font-weight: 500;
}

.price-a {
    font-weight: 600;
}

em, i, .fst-italic {
    font-style: italic;
}

    /* ===== FIX: NO tocar fuentes de íconos ===== */

    /* 1) Quita la herencia de TheSeasons en íconos */
    i[class^="fa"], i[class*=" fa-"],
    span[class^="fa-"], span[class*=" fa-"],
    .fa, .fa::before, .fa::after {
        font-family: "FontAwesome" !important; /* FA v4 */
        font-weight: normal !important;
    }

/* Si usas FA5, descomenta: */
/* .fa, .fas, .far, .fab, .fa::before, .fas::before, .far::before, .fab::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
} */

/* Ionicons (v2) – usado por .ion-ios-arrow-forward */
.ion, [class^="ion-"], [class*=" ion-"],
.ion::before, [class^="ion-"]::before {
    font-family: "Ionicons" !important;
    font-weight: normal !important;
}

/* 2) Si tu regla global tenía ::before/::after, neutralízala excepto íconos */
html *::before, html *::after {
    font-family: inherit !important;
}

/* 3) Owl dots redondos (por si quedaron “cuadritos”) */
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 999px;
    background: #c9defc;
    border: 1px solid #2b6ff8;
    transition: transform .15s ease, background .15s ease;
}

.owl-theme .owl-dots .owl-dot.active span {
    background: #2b6ff8;
    transform: scale(1.18);
}

/* ================= SINGLE: esquinas redondas sin sombras ================= */
.property-single .gallery-property,
.property-single .gallery-property .owl-stage-outer,
.property-single .gallery-property .owl-stage,
.property-single .gallery-property .owl-item,
.property-single .gallery-property .carousel-item-b {
    border-radius: 24px;
    overflow: hidden; /* recorta perfectamente */
    box-shadow: none !important;
    background: transparent !important;
}

    .property-single .gallery-property img,
    .property-single .img-d,
    .property-single .img-fluid,
    .property-single .card-img-top {
        display: block;
        width: 100%;
        height: auto;
        border: 0 !important;
        border-radius: 24px; /* la misma curva del index */
        box-shadow: none !important;
        background: transparent !important;
    }

/* elimina cualquier borde/gris de contenedores internos del tema */
.property-single .card,
.property-single .box-collapse {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/* ================= SINGLE: precio como “pill” redondo ================= */
.property-single .property-price .card-header-c,
.property-single .property-price .card-body-c {
    background: transparent;
    border: 0;
}

/* el contenedor del precio */
.property-single .property-price .card-box-ico {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.1rem;
    border-radius: 999px; /* pill */
    border: 2px solid #2b6ff8; /* azul del sitio (ajústalo si quieres) */
    background: rgba(255,255,255,.92);
    color: #0b2e54;
    box-shadow: none !important;
}

    /* el símbolo $ del tema suele venir como .ion-money o similar */
    .property-single .property-price .card-box-ico .ion-money,
    .property-single .property-price .ion-money {
        position: static !important; /* lo metemos dentro del pill */
        transform: none !important;
        margin: 0 !important;
        font-size: 1.15rem;
        color: #2b6ff8; /* mismo azul */
        line-height: 1;
    }

/* el número del precio */
.property-single .property-price .title-c,
.property-single .property-price .price-c,
.property-single .property-price .price {
    margin: 0;
    font: 800 1.15rem/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0b2e54;
}

/* por si el tema dibuja un $ afuera con posición absoluta: lo escondemos */
.property-single .property-price .price-outside,
.property-single .property-price .icon-circle,
.property-single .property-price .card-box-ico::before {
    display: none !important;
}

/* espaciado compacto alrededor del precio */
.property-single .property-price {
    margin: .75rem 0 1rem;
}

/* ======= SINGLE: precio más grande (pill) ======= */
:root {
    /* Azul clarito del sitio (ya lo usas como --link-accent) */
    --link-accent: #6EA1CE;
}

.property-single .property-price .card-box-ico {
    padding: .85rem 1.35rem;
    border-radius: 999px;
    border: 2px solid var(--link-accent);
    background: rgba(255,255,255,.95);
    gap: .7rem;
}

.property-single .property-price .ion-money {
    font-size: 1.25rem;
    color: #111 !important; /* $ en negro */
}

.property-single .property-price .title-c,
.property-single .property-price .price-c,
.property-single .property-price .price {
    font: 800 1.35rem/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0b2e54;
}

/* ======= SINGLE: flechas del carrusel (hover-only, centradas) ======= */
/* contenedor de la galería */
.property-single .gallery-property {
    position: relative;
}

    /* nav por defecto oculto */
    .property-single .gallery-property .owl-nav {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    /* al pasar mouse, aparecen */
    .property-single .gallery-property:hover .owl-nav {
        opacity: 1;
        pointer-events: auto;
    }

   

   

/* ============ SINGLE: PRECIO (pill grande) ============ */
:root {
    --link-accent: #6EA1CE;
}
/* tu azul clarito */

.property-single .property-price .card-box-ico {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: 1.05rem 1.55rem;
    border-radius: 999px;
    border: 3px solid var(--link-accent);
    background: rgba(255,255,255,.96);
    box-shadow: none;
}

.property-single .property-price .ion-money {
    /* el símbolo $ del MISMO tamaño que la cifra */
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1;
    color: #6EA1CE !important; /* azul */
}

.property-single .property-price .price,
.property-single .property-price .title-c,
.property-single .property-price .price-c {
    font-weight: 800;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1;
    color: #6EA1CE;
}

/* ============ SINGLE: GALERÍA – Flechas grandes (hover only) ============ */
/* Asegura que el contenedor permite posicionar relativo */
.property-single .gallery-property {
    position: relative;
}

    /* Ocultas por defecto */
    .property-single .gallery-property .owl-nav {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    

/* ============ SINGLE: TITULARES Y TEXTO ============ */
/* Aplica solo dentro de la página de propiedad */
.property-single h3,
.property-single .title-d,
.property-single .title-a {
    font-family: "TheSeasons", "Playfair Display", Georgia, serif;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0b2e54;
    font-size: clamp(28px, 3vw, 42px);
    margin-bottom: .75rem;
    line-height: 1.1;
}

    /* Barrita azul bajo títulos */
    .property-single h3::after,
    .property-single .title-d::after,
    .property-single .title-a::after {
        content: "";
        display: block;
        width: 86px;
        height: 4px;
        background: var(--link-accent);
        border-radius: 999px;
        margin-top: .4rem;
    }

/* Párrafos descriptivos */
.property-single .property-description p {
    font: 500 clamp(14px, 1.2vw, 18px)/1.8 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #2b2b2b;
}



        

            


        
    

/* ===== CHIP DE PRECIO redondo ===== */
.price-chip {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem 1.25rem;
    border: 2px solid #8FB0D2;
    border-radius: 999px;
    background: transparent;
}

    /* mismo tamaño para ambos; $ en negro */
    .price-chip .peso {
        color: #0C3471;
        font-weight: 800;
        font-size: clamp(28px, 3.6vw, 40px);
        line-height: 1;
    }

    .price-chip .amount {
        color: #0E3660;
        font-weight: 800;
        letter-spacing: .3px;
        font-size: clamp(28px, 3.6vw, 40px);
        line-height: 1;
    }


/* ====== PROPERTY SINGLE – GALLERY: tamaño normal + flechas default ====== */
/* Contenedor del carrusel de imágenes de la propiedad */


    .property-gallery .owl-nav button.owl-prev,
    .property-gallery .owl-nav button.owl-next,
    .property-carousel .owl-nav button.owl-prev,
    .property-carousel .owl-nav button.owl-next,
    #property-single-carousel .owl-nav button.owl-prev,
    #property-single-carousel .owl-nav button.owl-next {
        
        border-radius: 30px;
        
        color: #111 !important;
      
       
    }

        

/* ====== DETALLE — Galería: altura y SIN transparencias no deseadas ====== */
:root {
    --gal-h: 650px;
}
/* ajusta la altura a tu gusto */

#property-single-carousel,
#property-single-carousel.owl-height,
#property-single-carousel .owl-stage-outer,
#property-single-carousel .owl-stage,
#property-single-carousel .owl-item,
#property-single-carousel .item {
    height: var(--gal-h) !important;
    min-height: var(--gal-h) !important;
    opacity: 1 !important; /* evita que algo quede semitransparente */
    background: none !important; /* no pintes un velo encima */
}

    #property-single-carousel .item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 22px; /* esquinas redondas como en el index */
        background-color: #fff; /* base sólida para evitar halos/“transparencias” */
        box-shadow: none !important;
        filter: none !important; /* por si algún tema mete filtros */
        opacity: 1 !important;
    }

    /* Asegura que overlays/chips NO hereden una transparencia global */
    #property-single-carousel .owl-item * {
        opacity: 1 !important;
    }

    /* Si llegaste a probar dimming de slides no activos, neutralízalo: */
    #property-single-carousel .owl-item:not(.active) {
        opacity: 1 !important;
    }


/* === MAPA RECTANGULAR CON ESQUINAS REDONDEADAS (tab #pills-map) === */
:root {
    --map-radius: 24px; /* radios de las esquinas */
    --map-aspect: 16/9; /* relación de aspecto: 16:9 */
    --map-maxw: 900px; /* ancho máximo opcional */
}

#pills-map > iframe {
    display: block;
    width: min(100%, var(--map-maxw));
    height: auto !important; /* anula el height fijo del HTML */
    aspect-ratio: var(--map-aspect); /* controla la altura según el ancho */
    border: 0;
    border-radius: var(--map-radius);
    overflow: hidden; /* por si el navegador lo respeta en iframe */
    margin: 0 auto; /* centrado */
    background: #eaf2fb; /* color de fondo de carga opcional */
}

/* — Opcional: variante con altura fija si prefieres (descomenta y quita aspect-ratio)
#pills-map > iframe{
  width: min(100%, var(--map-maxw));
  height: 420px !important;          // altura fija
  border-radius: var(--map-radius);
}
*/

/* Ajustes en móvil (esquinas un poco más suaves) */
@media (max-width: 575.98px) {
    :root {
        --map-radius: 18px;
    }
}

/* === MAPA RECTANGULAR CON ESQUINAS REDONDEADAS (sección contacto) === */
:root {
    --map-radius: 24px; /* radios de las esquinas, igual que el otro */
    --map-aspect: 16/9; /* relación de aspecto */
    --map-maxw: 900px; /* ancho máximo opcional */
}

#map.contact-map > iframe {
    display: block;
    width: min(100%, var(--map-maxw));
    height: auto !important; /* anula el height fijo del HTML */
    aspect-ratio: var(--map-aspect); /* controla la altura según el ancho */
    border: 0;
    border-radius: var(--map-radius);
    overflow: hidden; /* recorte del borde */
    margin: 0 auto; /* centrado */
    background: #eaf2fb; /* fondo de carga (opcional) */
    box-shadow: none; /* sin sombra (como el otro) */
}

/* Móvil: esquinas un poco más suaves (opcional) */
@media (max-width: 575.98px) {
    :root {
        --map-radius: 18px;
    }
}

/* =========================================================
   GRID (property-grid) — Estilo como el Index SOLO en grids
   ========================================================= */

/* Variables solo para grid (puedes afinarlas a tu gusto) */
.property-grid {
    --grid-card-h: 480px; /* alto de cada tarjeta */
    --grid-footer-h: 90px; /* altura de la banda azul (datos) */
    --grid-footer-hide: 100%; /* 100% = oculta del todo, 95% = asoma tantito */
    --grid-hover-lift: 65px; /* cuánto sube el bloque de textos al hover */
    --grid-radius: 28px; /* radio de las esquinas */
    --grid-band: rgba(28,78,126,.92); /* azul de la banda de datos */
    --grid-pill-outline: #f6fbff; /* contorno del pill de precio */
    --grid-badge-top: 0px; /* distancia desde arriba del badge Rentado/Vendido */
}

    /* Geometría base: misma “caja” redondeada del index */
    .property-grid .card-box-a {
        position: relative;
        height: var(--grid-card-h) !important;
        border-radius: var(--grid-radius);
        overflow: hidden;
        background: transparent;
        box-shadow: 0 10px 30px rgba(0,0,0,.10);
    }

@media (max-width:1199.98px) {
    .property-grid .card-box-a {
        height: 500px !important;
    }
}

@media (max-width:575.98px) {
    .property-grid .card-box-a {
        height: 480px !important;
    }
}



/* Imagen a full cover */
.property-grid .img-box-a {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .property-grid .img-box-a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
    }

/* Overlay con degradado (legibilidad) */
.property-grid .card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,0) 100%);
    pointer-events: none; /* no bloquea los links del contenido */
}

/* Bloque de textos pegado abajo, reservando espacio de la banda */
.property-grid .card-overlay-a-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 28px calc(var(--grid-footer-h) + 14px) !important;
    transition: transform .28s ease;
    will-change: transform;
}



/* Título y pill de precio como en Index */
.property-grid .card-title-a a {
    color: #fff;
    text-decoration: none;
    text-shadow: 0 6px 28px rgba(0,0,0,.45);
}

.property-grid .price-box .price-a {
    display: inline-block;
    padding: 14px 26px;
    border: 2px solid var(--grid-pill-outline);
    border-radius: 999px;
    background: transparent;
    color: #f6fbff;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: none;
}

/* CTA “Click para ver ahora” con glow */
.property-grid .link-a {
    color: #f6fbff;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    position: relative;
    isolation: isolate;
    transition: color .18s ease;
}

    .property-grid .link-a::before {
        content: "";
        position: absolute;
        inset: -6px -10px;
        z-index: -1;
        border-radius: 999px;
        background: radial-gradient(closest-side, rgba(86,146,220,.45) 0%, rgba(86,146,220,.25) 45%, rgba(86,146,220,0) 70%);
        filter: blur(8px);
        opacity: 0;
        transform: scale(.98);
        transition: opacity .18s ease, transform .18s ease;
    }

    .property-grid .link-a:hover {
        color: #bcd9ff;
    }

        .property-grid .link-a:hover::before {
            opacity: 1;
            transform: scale(1.03);
        }

    .property-grid .link-a .ion-ios-arrow-forward {
        transition: transform .18s ease;
    }

    .property-grid .link-a:hover .ion-ios-arrow-forward {
        transform: translateX(3px);
    }

/* Banda azul (datos) pegada abajo y con reveal al hover */
.property-grid .card-footer-a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    min-height: var(--grid-footer-h);
    background: var(--grid-band);
    color: #f6fbff;
    transform: translateY(var(--grid-footer-hide)) !important;
    transition: transform .28s ease;
    will-change: transform;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.property-grid .card-info {
    margin: 14px 16px;
}

.property-grid .card-info-title {
    color: #dceafc;
    font-weight: 700;
    font-size: 15px;
}

.property-grid .card-info span {
    color: #f6fbff;
    font-weight: 600;
}

/* ===== FIX: Banda azul visible correctamente en celular ===== */
@media (max-width: 576px) {
  /* altura un poco mayor para dejar espacio a la banda */
  .property-grid {
    --grid-card-h: 520px !important;
    --grid-footer-h: 105px !important;
    --grid-hover-lift: 0px !important; /* desactiva “subida” del texto */
  }

  /* banda azul siempre visible, sin depender del hover */
  .property-grid .card-footer-a {
    transform: translateY(0) !important;
  }

  /* ajusta el bloque de texto superior para no cortarse */
  .property-grid .card-overlay-a-content {
    padding-bottom: calc(var(--grid-footer-h) + 8px) !important;
    transform: none !important;
  }

  /* corrige superposición del degradado */
  .property-grid .card-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.15) 60%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}



/* Hover: sube la banda y acompaña el bloque de textos */
.property-grid .card-box-a:hover .card-footer-a {
    transform: translateY(0) !important;
}

.property-grid .card-box-a:hover .card-overlay-a-content {
    transform: translateY(var(--grid-hover-lift));
}

/* Mobile: un poco menos de “lift” y banda */
@media (max-width: 576px) {
    :root {
        --prop-footer-h: 88px;
        --prop-lift: 0px;
    }
}


/* Select de ordenar solo en grid (esquinas redondas + “flechitas”) */
.property-grid .select-filter select {
    border-radius: 14px !important;
    background: #f6fbff !important;
    border: 1px solid rgba(0,0,0,.25) !important;
    padding: .65rem .95rem !important;
    color: #1d2b3a;
    line-height: 1.25;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* tus “flechitas” en doble raya */
    background-image: linear-gradient(#1d2b3a,#1d2b3a), linear-gradient(#1d2b3a,#1d2b3a);
    background-repeat: no-repeat;
    background-size: 8px 1px, 8px 1px;
    background-position: calc(100% - 18px) 45%, calc(100% - 18px) 60%;
    padding-right: 40px !important;
}

    .property-grid .select-filter select:hover,
    .property-grid .select-filter select:focus {
        border-color: #8fb9e9 !important;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(143,185,233,.2);
    }

/* Paginación “píldoras” redondeadas */
.property-grid .pagination .page-link {
    border-radius: 999px !important;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 !important;
    border: 1px solid rgba(17,58,92,.12);
    background: #fff;
    color: #0e1b2a;
    transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .property-grid .pagination .page-link:hover {
        transform: translateY(-1px);
        background: #f6fbff;
        box-shadow: 0 6px 14px rgba(0,0,0,.07);
    }

.property-grid .pagination .page-item.active .page-link {
    background: #6fa7d1; /* azul clarito activo */
    border-color: transparent;
    color: #0a1a2a;
    font-weight: 600;
}

/* === FIX: CTA clickeable y con glow visible SOLO en grids === */
.property-grid .img-box-a,
.property-grid .card-overlay{
  pointer-events: none;                 /* no bloquean clics */
}
.property-grid .card-overlay-a-content,
.property-grid .card-overlay-a-content *{
  pointer-events: auto;                 /* sí recibe clics */
}




/* (Opcional) Si alguna capa invisible estuviera encima, la desarmamos */
.property-grid .card-box-a::after{
  content:none !important;
}

/* Badge Rentado/Vendido centrado y por ENCIMA de todo */
.property-grid .tag-sold,
.property-grid .status-pill,
.property-grid .ribbon,
.property-grid .badge-status {
    position: absolute !important;
    left: 50% !important;
    top: var(--grid-badge-top) !important;
    transform: translateX(-50%) !important;
    z-index: 12 !important;
    padding: 10px 28px !important;
    min-height: 44px;
    border-radius: 999px;
    background: var(--grid-band);
    color: #f6fbff;
    font-weight: 700;
    letter-spacing: .2px;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: saturate(130%) blur(4px);
    -webkit-backdrop-filter: saturate(130%) blur(4px);
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ===== FIX: espacio blanco bajo carrusel en móvil y tablet ===== */

/* 1️⃣ Altura flexible en lugar de fija */
@media (max-width: 991.98px) {
    :root {
        --gal-h: auto !important; /* anula el alto forzado */
    }

    #property-single-carousel,
    #property-single-carousel .owl-stage-outer,
    #property-single-carousel .owl-stage,
    #property-single-carousel .owl-item,
    #property-single-carousel .carousel-item-b {
        height: auto !important;
        min-height: unset !important;
    }

        #property-single-carousel img {
            width: 100%;
            height: auto !important;
            object-fit: cover;
            display: block;
        }
}

/* 2️⃣ Elimina márgenes/paddings extra del contenedor */
@media (max-width: 991.98px) {
    .property-single .container,
    .property-single .row,
    .property-single .col-sm-12 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .property-single .gallery-property {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Compacta todo el bloque */
    section.property-single {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}



/* ============ Secciones de contenido (servicios, about, contact) ============ */



/* Breadcrumb con pastilla suave */
.intro-single .breadcrumb {
    background: #f6fbff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    padding: .45rem .85rem;
}

/* Bloques “letrero/box” suavecitos (si usas cajas laterales) */
.title-single-box,
.post-information,
.post-content blockquote {
    border-radius: 18px;
}

/* Contacto: mapa con esquinas redondas igual que el otro */
.contact-map iframe {
    border-radius: 22px !important;
}

/* Contacto: campos redondeados + botón */
.contact .form-control {
    border-radius: 14px;
    background: #f6fbff;
    border: 1px solid rgba(0,0,0,.18);
    transition: border-color .2s, box-shadow .2s;
}

    .contact .form-control:focus {
        border-color: #8fb9e9;
        box-shadow: 0 0 0 4px rgba(143,185,233,.25);
        background: #fff;
    }

.contact .btn {
    border-radius: 999px;
    padding: .8rem 1.3rem;
    font-weight: 700;
    background: #1c4e7e; /* azul de la página */
    color: #f6fbff;
    border: 1px solid rgba(255,255,255,.25);
}

    .contact .btn:hover {
        filter: brightness(1.06);
    }

/* Checkbox “Acepto” redondeado */
.contact input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid #1c4e7e;
    border-radius: 6px;
    display: inline-grid;
    place-content: center;
    background: #f6fbff;
    margin-right: .45rem;
}

    .contact input[type="checkbox"]:checked {
        background: #1c4e7e;
        border-color: #1c4e7e;
    }

        .contact input[type="checkbox"]:checked::after {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 3px;
            background: #f6fbff;
        }

/* Botón/CTA de compartir etc, por si aparece con formas duras */
.socials a {
    border-radius: 10px;
}


/* ================== ABOUT (solo about.html) ================== */
.about-page {
    --ink: #0f2740;
    --muted: #5c6f86;
    --wash: #f6fbff;
    --brand: #1c4e7e;
    --r-xxl: 28px;
    --r-xl: 22px;
    --r-lg: 18px;
}

    /* Hero con esquinas redondas y badge */
    .about-page .about-hero {
        position: relative;
        border-radius: var(--r-xxl);
        overflow: hidden
    }

        .about-page .about-hero img {
            width: 100%;
            height: clamp(260px,42vw,440px);
            object-fit: cover;
            display: block
        }

        .about-page .about-hero .hero-badge {
            position: absolute;
            left: 20px;
            bottom: 20px;
            background: rgba(28,78,126,.88);
            color: #f6fbff;
            padding: 10px 16px;
            border-radius: 999px;
            font-weight: 700;
            letter-spacing: .2px;
            backdrop-filter: saturate(130%) blur(3px)
        }



    /* Tarjetas minimal (¿Quién es?, Misión, Visión, Valores) */
    .about-page .card-min {
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: var(--r-xl);
        padding: clamp(16px,2.2vw,22px);
        box-shadow: 0 10px 28px rgba(0,0,0,.04)
    }

        .about-page .card-min h2,
        .about-page .card-min h3 {
            margin: 0 0 8px;
            font-weight: 800;
            color: var(--ink)
        }

        .about-page .card-min p {
            margin: 0;
            color: var(--muted);
            line-height: 1.65
        }

    /* Imágenes internas redondas */
    .about-page .img-rounded {
        border-radius: var(--r-xl);
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover
    }

    /* Grids minimal */
    .about-page .grid-min {
        display: grid;
        gap: clamp(16px,2.6vw,24px)
    }

    .about-page .tri {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: clamp(14px,2vw,18px)
    }

@media (max-width:991.98px) {
    .about-page .tri {
        grid-template-columns: 1fr
    }
}

/* Chips para valores */
.about-page .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.about-page .chip {
    background: var(--wash);
    border: 1px solid rgba(28,78,126,.18);
    color: var(--ink);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 14px
}

/* ================== RESEÑAS (estilo limpio) ================== */
.about-page .reviews {
    border-radius: var(--r-xxl);
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    padding: clamp(18px,2.4vw,28px)
}

.about-page .reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px
}

    .about-page .reviews-head h3 {
        margin: 0;
        color: var(--ink);
        font-weight: 800
    }

.about-page .btn-google {
    padding: 10px 14px;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700
}

    .about-page .btn-google:hover {
        background: var(--wash)
    }

.about-page .rating {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 700
}

.about-page .stars {
    color: #ffb300;
    letter-spacing: 2px
}

.about-page .rev-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

.about-page .rev {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: start;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    background: #fff
}

    .about-page .rev .avatar {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: #dfe9f6;
        display: grid;
        place-items: center;
        color: #1c3870;
        font-weight: 800
    }

    .about-page .rev .name {
        font-weight: 700;
        color: var(--ink)
    }

    .about-page .rev .when {
        color: #8fa1b4;
        font-size: .9rem
    }

    .about-page .rev .g-badge {
        margin-left: auto;
        color: #4285f4;
        font-weight: 700
    }

/* ================== MENÚ MÓVIL ================== */
@media (max-width:991.98px) {
    .m-burger {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 1100;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #ffffffd9;
        border: 1px solid rgba(0,0,0,.12);
        display: grid;
        place-items: center;
        box-shadow: 0 6px 20px rgba(0,0,0,.08)
    }

        .m-burger span, .m-burger span::before, .m-burger span::after {
            content: "";
            display: block;
            width: 22px;
            height: 2px;
            background: #0f2740;
            position: relative
        }

            .m-burger span::before {
                position: absolute;
                top: -7px
            }

            .m-burger span::after {
                position: absolute;
                top: 7px
            }

    .m-drawer {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(86vw,360px);
        background: #fff;
        z-index: 1200;
        transform: translateX(100%);
        transition: transform .28s ease;
        box-shadow: -16px 0 40px rgba(0,0,0,.18);
        padding: 20px 18px
    }

        .m-drawer.open {
            transform: translateX(0)
        }

    .m-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px
    }

        .m-head img {
            height: 34px
        }

    .m-close {
        border: none;
        background: transparent;
        font-size: 26px
    }

    .m-nav a {
        display: block;
        padding: 12px 6px;
        color: #0f2740;
        text-decoration: none;
        font-weight: 700;
        border-bottom: 1px solid rgba(0,0,0,.06)
    }

        .m-nav a:hover {
            background: #f6fbff
        }

    .m-social {
        display: flex;
        gap: 12px;
        margin-top: 14px
    }

        .m-social a {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            border: 1px solid rgba(0,0,0,.12);
            display: grid;
            place-items: center
        }
}

/* === ABOUT: HERO FULL COVER ================================================= */
.about-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden; /* recorta cualquier borde en blanco */
    box-shadow: 0 35px 80px rgba(7,28,56,.10);
    background: #dfe8f5; /* color de fondo por si tarda en cargar */
}

    .about-hero > img {
        display: block;
        width: 100%;
        height: min(68vh, 680px); /* alto “bonito” en desktop */
        object-fit: cover; /* ¡clave! cubre sin dejar espacios */
        object-position: center;
    }

/* móvil: un poco más bajo para que no tape contenido */
@media (max-width: 768px) {
    .about-hero > img {
        height: 48vh;
    }
}

/* === ABOUT: VALORES ========================================================= */
.valores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

@media (max-width: 992px) {
    .valores-grid {
        grid-template-columns: 1fr;
    }
}

.valor-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 20px;
    background: #f6fbff;
    border: 1px solid rgba(12,37,78,.08);
    box-shadow: 0 8px 30px rgba(12,37,78,.06);
}

    .valor-card .v-icon {
        flex: 0 0 auto;
        width: 72px;
        height: 72px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 24px rgba(12,37,78,.10);
    }

        .valor-card .v-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .valor-card h5 {
        font-weight: 800;
        margin: 0 0 4px;
        letter-spacing: .2px;
    }

    .valor-card p {
        margin: 0;
        opacity: .85;
    }

/* un pelín más grande en desktop amplio */
@media (min-width:1200px) {
    .valor-card {
        padding: 26px 28px;
    }

        .valor-card h5 {
            font-size: 1.25rem;
        }

        .valor-card p {
            font-size: 1.05rem;
        }
}

/* === ABOUT: CLAIM SIN BACK ================================================== */
.about-claim {
    margin: 22px 0 8px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

    .about-claim h2 {
        margin: 0;
    }

        .about-claim h2::after {
            content: "";
            display: block;
            width: 84px;
            height: 6px;
            margin-top: .6rem;
            border-radius: 999px;
            background: linear-gradient(90deg,#8fb9e9,#2b568d);
        }

/* === MOBILE NAV (HAMBURGER + DRAWER) ======================================= */
.mp-burger {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    z-index: 1041;
}

    .mp-burger span {
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: #0e2a50;
        transition: transform .2s ease, opacity .2s ease;
    }

@media (min-width: 992px) {
    .mp-burger {
        display: none;
    }
}

/* estado activo (X) */
.mp-burger.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mp-burger.is-open span:nth-child(2) {
    opacity: 0;
}

.mp-burger.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Drawer */
.mp-drawer {
    position: fixed;
    inset: 64px auto 0 0; /* bajo la navbar fija */
    width: 82vw;
    max-width: 360px;
    height: calc(100dvh - 64px);
    background: #0e2a50;
    color: #f6fbff;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1040;
    border-top-right-radius: 18px;
    box-shadow: 0 40px 120px rgba(0,0,0,.35);
}

.site-header {
    min-height: 64px;
}
/* por si tu navbar no la tenía */

.mp-drawer.is-open {
    transform: translateX(0);
}

.mp-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
}

.mp-drawer__nav a {
    display: block;
    padding: 14px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #f6fbff;
    font-weight: 700;
}

    .mp-drawer__nav a:hover {
        background: rgba(255,255,255,.08);
    }

.mp-drawer__social {
    margin-top: auto;
    display: flex;
    gap: 14px;
    font-size: 1.2rem;
}

    .mp-drawer__social a {
        color: #cfe3ff;
    }

        .mp-drawer__social a:hover {
            color: #ffffff;
        }

/* Backdrop */
.mp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3,16,33,.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1039;
}

    .mp-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

/* Oculta el menú desktop bajo 992px (si tu tema no lo hace) */
@media (max-width:991.98px) {
    .navbar .navbar-nav.main-nav {
        display: none !important;
    }
}

/* ======= Mobile drawer + botón hamburguesa (izquierda del logo) ======= */
:root {
    --mp-blue: #1c4e7e;
    --mp-bg: #f6fbff;
}

.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Botón hamburguesa solo en móvil */
.mp-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(28,78,126,.08);
    color: var(--mp-blue);
}

    .mp-burger i {
        font-size: 20px;
        line-height: 1
    }

@media (min-width:992px) {
    .mp-burger {
        display: none
    }
}

/* Drawer */
.mp-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw,360px);
    background: #0f2134;
    color: #e6f0ff;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 18px;
    box-shadow: -24px 0 80px rgba(0,0,0,.35);
}

    .mp-drawer.show {
        transform: translateX(0)
    }

    .mp-drawer .top {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

        .mp-drawer .top img {
            height: 40px
        }

.mp-close {
    border: 0;
    background: transparent;
    color: #e6f0ff;
    font-size: 26px;
    line-height: 1
}

.mp-drawer nav {
    margin-top: 18px
}

.mp-drawer a {
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #e6f0ff
}

    .mp-drawer a:hover {
        background: rgba(255,255,255,.08)
    }

.mp-drawer .social {
    margin-top: auto;
    display: flex;
    gap: 12px
}

    .mp-drawer .social a {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.08);
        color: #e6f0ff;
    }

/* ====== Burger a la izquierda del logo (inline, sin montarse) ====== */
.navbar-brand-container {
    gap: .35rem;
}

.mp-burger {
    position: static; /* quita absolute */
    margin-right: .25rem;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-content: center;
    border: 0;
    border-radius: 12px;
    background: rgba(28,78,126,.08);
}

    .mp-burger span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #0e2a50;
    }

        .mp-burger span:nth-child(2) {
            margin: 6px 0;
        }

    /* Icono “X” cuando está abierto */
    .mp-burger.is-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mp-burger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mp-burger.is-open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

/* Drawer móvil por encima del contenido */
.mp-drawer {
    z-index: 1050;
}

.site-header {
    min-height: 59px;
}
/* altura segura del header */

/* ====== ABOUT: Imagen principal visible y sin línea blanca ====== */
.about-img-box {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 35px 80px rgba(7, 28, 56, 0.10);
    background-color: #f6fbff;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: min(80vh, 620px);
    isolation: isolate;
    
}

    .about-img-box img {
        position: absolute;
        inset: 0;
        width: 101%;
        height: 101%;
        object-fit: cover;
        object-position: center top;
        border-radius: inherit;
        transform: scale(1.001);
        z-index: 0;
        backface-visibility: hidden;
        
    }

/* 🔹 En pantallas grandes: ajustar zoom de imagen sin recorte ni bordes */
@media (min-width: 992px) {
    .about-img-box img {
        object-fit: cover; /* mantiene el relleno completo */
        object-position: center top; /* centra mejor sin cortar tanto */
        transform: scale(1.001); /* evita subpíxel blanco */
        background-color: #f6fbff; /* color de fondo de seguridad */
    }

    /* 🔸 Ajusta la altura en desktop para mostrar más de la imagen */
    .about-img-box {
        height: 80vh; /* un poco más alta para compensar el recorte */
    }
}

/* ===== Ajuste específico para laptops / desktop ===== */
@media (min-width: 992px) and (max-width: 1600px) {
    .about-img-box {
        height: 75vh; /* muestra más área vertical de la imagen */
    }

        .about-img-box img {
            object-fit: cover;
            object-position: center; /* sube la imagen un poco para centrar el foco */
            transform: scale(1.002); /* corrige líneas blancas invisibles */
            background-color: #f6fbff;
        }
}

/* ===== Para pantallas muy grandes (monitores anchos) ===== */
@media (min-width: 1601px) {
    .about-img-box {
        height: 70vh;
    }

        .about-img-box img {
            object-fit: contain; /* muestra toda la imagen si hay espacio */
            background-color: #f6fbff; /* mismo color del sitio */
            transform: scale(1.0005); /* mantiene sin línea blanca */
        }
}




/* Cuadro azul con texto */
.sinse-box {
    position: relative;
    left: 25px;
    bottom: 25px;
    background: rgba(28, 78, 126, 0.88);
    color: #f6fbff;
    border-radius: 14px;
    padding: 16px 32px;
    width: clamp(360px, 58%, 640px);
    min-height: 160px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4;
}

.sinse-title {
    font-weight: 700;
    font-size: clamp(1rem, 1.7vw, 1.45rem);
    margin-bottom: 8px;
}

.sinse-box p {
    margin: 0;
    font-weight: 600;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .about-img-box {
        height: 340px;
    }

    .sinse-box {
        max-width: 260px;
        padding: 8px 14px;
        border-radius: 10px;
    }
}


/* ====== About: quita el “rectángulo blanco” del claim inicial ====== */
.about-page .title-single-box {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

    /* (opcional) subtítulo con subrayado degradado como guía visual */
    .about-page .title-single-box .title-single::after {
        content: "";
        display: block;
        width: 84px;
        height: 6px;
        margin-top: .6rem;
        border-radius: 999px;
        background: linear-gradient(90deg,#8fb9e9,#2b568d);
    }

/* ====== NAVBAR MÓVIL: botón a la izquierda del logo ====== */
@media (max-width: 991.98px) {
    .site-header .container {
        display: flex;
        align-items: center;
        gap: 5rem;
    }

    .site-header .burger-left {
        order: 0;
        margin-right: 10rem;
        flex: 0 0 auto;
        position: relative;
        z-index: 1051; /* que no lo tape nada */
        border: 0;
        background: transparent;
        padding: 2px 2px;
    }

    .site-header .navbar-brand-container {
        order: 1;
        display: flex;
        align-items: center;
        gap: .55rem;
        margin-left: 0;
    }

    .site-header .navbar-logo img {
        height: 40px;
        width: auto;
        display: block;
    }

    /* líneas del ícono hamburguesa */
    .site-header .navbar-toggler span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #1d3e6e;
        margin: 4px 0;
        transition: transform .2s, opacity .2s;
    }

    .site-header .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }
}

/* ====== ABOUT: hero full bleed y sin bordes raros ====== */
.about-hero.fullbleed {
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    /* eliminar “tiras” de color por padding del container */
    margin-left: clamp(-16px, -3vw, -28px);
    margin-right: clamp(-16px, -3vw, -28px);
}

    /* la imagen ocupa todo el bloque con recorte elegante */
    .about-hero.fullbleed .hero-img {
        display: block;
        width: 100%;
        height: min(62vh, 500px);
        object-fit: cover;
        object-position: center;
    }

/* Cita/leyenda encima de la foto (tu estilo actual) */
.about-hero .about-quote {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 22px;
    background: rgba(24,60,102,.75);
    color: #f6fbff;
    padding: 22px 24px;
    border-radius: 18px;
    font-weight: 700;
    line-height: 1.25;
    backdrop-filter: blur(2px) saturate(120%);
}

/* ====== Título del bloque (quitar rectángulo blanco) ====== */
.about-tagline, .about-tagline-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
}

/* =========================
   NAVBAR MÓVIL – FORZAR HAMBURGUESA A LA IZQUIERDA
   ========================= */
@media (max-width: 991.98px) {
    .site-header .container {
        position: relative;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    /* Botón hamburguesa fijo a la orilla izquierda */
    .site-header .navbar-toggler.burger-left {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 4px;
        margin: 0;
        border: 0;
        background: transparent;
        z-index: 1052; /* por encima del logo */
    }

        .site-header .navbar-toggler.burger-left:focus {
            outline: 0;
            box-shadow: none;
        }

        /* Líneas del icono */
        .site-header .navbar-toggler.burger-left span {
            display: block;
            width: 24px;
            height: 2px;
            border-radius: 2px;
            background: #1d3e6e;
            margin: 4px 0;
            transition: transform .2s, opacity .2s;
        }

    /* Damos “aire” al logo para que no lo pise el botón */
    .site-header .navbar-brand-container {
        margin-left: 42px !important; /* separa el bloque del logo */
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .site-header .navbar-logo img {
        height: 40px;
        width: auto;
        display: block;
    }
}

/* =========================
   ABOUT – HERO FULL-BLEED (SIN FRANJAS) + ESQUINAS REDONDAS
   ========================= */
.about-hero.fullbleed {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    /* Truco full-bleed real a lo ancho de la ventana */
    left: 50%;
    right: 50%;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw; /* ocupa todo el viewport a lo ancho */
}

    .about-hero.fullbleed .hero-img {
        display: block;
        width: 100%;
        height: min(66vh, 680px); /* ajusta si quieres */
        object-fit: cover;
        object-position: center;
    }

/* Cita sobre la foto (mantén tu copy) */
.about-hero .about-quote {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    background: rgba(24,60,102,.72);
    color: #f6fbff;
    padding: 18px 22px;
    border-radius: 16px;
    font-weight: 700;
    line-height: 1.22;
    backdrop-filter: blur(2px) saturate(120%);
}

/* Quitar cualquier caja/blanco del título intro si aparece */
.about-tagline, .about-tagline-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 22px 0 !important;
}

/* =========================
   ABOUT – MISIÓN / VISIÓN: imagen más chica y redondeada
   ========================= */
.about-mv .mv-media {
    border-radius: 22px;
    overflow: hidden;
}

    .about-mv .mv-media img {
        width: 100%;
        height: 300px; /* << más chica */
        object-fit: cover;
        object-position: center;
        display: block;
    }

@media (min-width:992px) {
    .about-mv .mv-media img {
        height: 420px;
    }
    /* en desktop un poco mayor */
}

/* ===== NAV MÓVIL: hamburguesa acoplable ===== */
@media (max-width: 991.98px) {
    /* botón */
    .site-header .navbar-toggler {
        position: absolute;
        top: 50%;
        transform: translateY(-80%);
        z-index: 1052;
        padding: 6px 4px;
        border: 0;
        background: transparent;
        /* offset editable (px) */
        --dock-offset: 24px;
    }
        /* dock izquierdo o derecho (elige una clase en el HTML) */
        .site-header .navbar-toggler.burger-left-dock {
            left: var(--dock-offset);
        }

        .site-header .navbar-toggler.burger-right-dock {
            right: var(--dock-offset);
        }

        /* líneas del ícono */
        .site-header .navbar-toggler span {
            display: block;
            width: 24px;
            height: 2px;
            border-radius: 2px;
            background: #1d3e6e;
            margin: 4px 0;
            transition: transform .2s, opacity .2s;
        }

    /* que no se encime con el logo según el dock */
    .site-header.has-burger-left .navbar-brand-container {
        margin-left: 48px !important;
    }

    .site-header.has-burger-right .navbar-brand-container {
        margin-right: 48px !important;
    }

    .site-header .navbar-logo img {
        height: 40px;
        width: auto;
        display: block;
    }
}

/* en desktop ocultamos el botón de bootstrap */
@media (min-width: 992px) {
    .site-header .navbar-toggler {
        display: none !important;
    }
}

/* ===== ABOUT: HERO full-bleed con radio ===== */
:root {
    --about-hero-h: 62vh; /* alto default del hero (ajustable) */
    --about-hero-radius: 28px;
}

.about-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--about-hero-radius);
    /* full-bleed real, anula franjas laterales de container */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw;
}

    .about-hero .hero-img {
        display: block;
        width: 100%;
        height: var(--about-hero-h); /* << controla el alto */
        object-fit: cover;
        object-position: center;
    }

@media (max-width:575.98px) {
    :root {
        --about-hero-h: 50vh;
    }
    /* un poco más bajo en móviles */
}

/* elimina cualquier contorno/sombra impuesto por otros estilos */
.about-hero, .about-hero * {
    background: transparent !important;
    box-shadow: none !important;
}

/* ===== ABOUT: MISIÓN/VISIÓN más compactas ===== */
:root {
    --mv-h-mob: 260px; /* alto en móvil (ajústalo) */
    --mv-h-desktop: 280px; /* alto en desktop */
    --mv-radius: 30px;
}

.about-mv .mv-media {
    border-radius: var(--mv-radius);
    overflow: hidden;
}

    .about-mv .mv-media img {
        width: 100%;
        height: var(--mv-h-mob);
        object-fit: cover;
        object-position: center;
        display: block;
    }

@media (min-width:992px) {
    .about-mv .mv-media img {
        height: var(--mv-h-desktop);
    }
}

/* ================= NAV: modo móvil alineado ================ */
:root {
    /* mueve manualmente si quieres ajustar fino */
    --burger-x: -100px; /* + derecha / – izquierda */
    --brand-gap: 80px; /* separación entre burger y logo */
}

@media (max-width: 991.98px) {
    .site-header .container,
    .site-header .container-fluid {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--brand-gap);
    }
    /* Botón hamburguesa SIEMPRE a la izquierda del logo */
    .site-header .navbar-toggler {
        order: 0;
        margin: 0px;
       
        z-index: 6; /* sobre el logo */
    }
    /* Logo + “Soluciones Inmobiliarias” */
    .site-header .navbar-brand-container {
        order: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: .6rem;
    }

   
        .site-header .navbar-collapse .main-nav .nav-link {
            border-radius: 12px;
            padding: .8rem 1rem;
        }

        .site-header .navbar-collapse .nav-icons {
            margin-top: .5rem;
            display: flex;
            gap: .6rem;
        }
}

/* Burguer “estilo minimal”: tres barras delgadas */
.navbar-toggler {
    border: 0;
    outline: 0;
}

    .navbar-toggler span {
        display: block;
        width: 26px;
        height: 2px;
        background: #17395f;
        border-radius: 3px;
        margin: 6px 0;
        transition: transform .2s ease, opacity .2s ease;
    }

    .navbar-toggler[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

/* ============== ABOUT: héroe full-bleed y texto ============== */
.about-hero {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: #f6fbff;
    box-shadow: 0 18px 60px rgba(0,0,0,.10);
}

    .about-hero > img {
        width: 100%;
        height: clamp(420px, 52vw, 640px);
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: inherit;
    }
    /* Letrero/slogan: SIN caja blanca, sobre la imagen */
    .about-hero .slogan {
        position: absolute;
        left: 32px;
        right: 32px;
        bottom: 26px;
        color: #f6fbff;
        font-weight: 800;
        line-height: 1.22;
        text-shadow: 0 6px 28px rgba(0,0,0,.45);
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }

/* ============== ABOUT: Misión / Visión – imagen más chica ======= */
.mv-img {
    width: 100%;
    max-width: 720px; /* fuerza tamaño menor */
    height: auto;
    display: block;
    border-radius: 22px;
    object-fit: cover;
    box-shadow: 0 10px 36px rgba(0,0,0,.08);
}
/* Si la foto se veía cortada con un “borde” distinto: */
.about-hero,
.mv-img {
    background: #f6fbff;
}

/* ============== ABOUT: Valores (tarjetas un poco más grandes) ==== */
.valores-grid .valor-card {
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(23,57,95,.10);
    padding: 22px 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

    .valores-grid .valor-card .icono {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        overflow: hidden;
        flex: 0 0 auto;
    }

        .valores-grid .valor-card .icono img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .valores-grid .valor-card h5 {
        margin: 0 0 6px;
    }

/* ============== Utilidades rápidas para mover tamaños ========= */
:root {
    --mv-max: 720px; /* cámbialo si quieres más chica la foto de M/V */
}

.mv-img {
    max-width: var(--mv-max);
}

/* ======= NAV: burger pegado a la izquierda y layout móvil ======= */
:root {
    --brand-gap: 8px; /* separa burger y logo (ajústalo) */
}

.site-header .container-fluid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--brand-gap);
}

/* En móvil quitamos paddings grandes de Bootstrap para pegarlo a la izq */
@media (max-width: 991.98px) {
    .site-header .container-fluid {
        padding-left: 10px !important;
        padding-right: 12px !important;
    }

    .navbar-brand-container {
        display: flex;
        align-items: center;
        gap: .55rem;
    }
}

/* Botón hamburguesa minimal */
.mp-burger {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #e7f1ff;
    color: #17395f;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

    .mp-burger:active {
        transform: scale(.98);
    }

/* ================== DRAWER (sale desde la IZQUIERDA) ================== */
.mp-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
    z-index: 998;
}

    .mp-scrim.show {
        opacity: 1;
        visibility: visible;
    }

.mp-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(85vw,360px);
    background: #f6fbff;
    color: #163354;
    box-shadow: 10px 0 30px rgba(0,0,0,.15);
    transform: translateX(-102%);
    transition: transform .25s ease;
    z-index: 999;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    display: flex;
    flex-direction: column;
}

    .mp-drawer.open {
        transform: translateX(0);
    }

    .mp-drawer .mp-close {
        align-self: flex-end;
        margin: 14px 12px 0 0;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 12px;
        background: #e7f1ff;
        color: #17395f;
        font-size: 22px;
    }

.drawer-body {
    padding: 10px 16px 20px;
    overflow: auto;
}

    .drawer-body .drawer-link {
        display: block;
        padding: 12px 12px;
        margin: 6px 0;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        color: #163354;
        background: transparent;
    }

        .drawer-body .drawer-link:hover {
            background: #e9f2ff;
        }

.drawer-social {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    padding: 8px 12px 16px;
}

    .drawer-social a {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: #e7f1ff;
        color: #17395f;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

/* Evita scroll del body cuando el drawer está abierto */
body.no-scroll {
    overflow: hidden;
}

/* --- Hamburguesa pegada a la izquierda del logo --- */
.mp-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(29,43,58,.25);
    border-radius: 10px;
    background: #f6fbff;
    color: #1d2b3a;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

    .mp-burger i {
        font-size: 18px;
        line-height: 1;
    }

@media (min-width: 992px) {
    .mp-burger {
        display: none;
    }
}

/* --- Drawer izquierdo --- */
.mp-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(88vw, 320px);
    height: 100dvh;
    background: #0e2b50; /* tu azul oscuro */
    color: #f6fbff;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1100; /* por encima de navbar */
    padding: 16px 18px 28px;
    box-shadow: 6px 0 24px rgba(0,0,0,.25);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

    .mp-drawer.open {
        transform: translateX(0);
    }

.mp-drawer-close {
    background: transparent;
    border: 0;
    color: #f6fbff;
    font-size: 22px;
    line-height: 1;
    padding: 6px;
    margin-bottom: 8px;
}

.mp-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

    .mp-drawer-nav .mp-item {
        display: block;
        padding: 12px 14px;
        border-radius: 12px;
        color: #f6fbff;
        text-decoration: none;
        font-weight: 600;
    }

        .mp-drawer-nav .mp-item:hover {
            background: rgba(255,255,255,.10);
        }

.mp-drawer-social {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.2);
}

    .mp-drawer-social a {
        color: #f6fbff;
        font-size: 18px;
    }

/* --- Overlay --- */
.mp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1095;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

    .mp-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Hero imagen de About */
.about-hero {
    border-radius: 28px;
    overflow: hidden;
}

    .about-hero img {
        display: block;
        width: 100%;
        height: clamp(300px, 40vw, 520px);
        object-fit: cover; /* llena sin franjas */
    }

.section-about-hero .container,
.section-about-hero .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============ ABOUT: HERO ============ */
/* Altura controlada + texto con fondo azul */

.about-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px; /* esquinas redondas */
    background: #eaf3ff; /* color de fondo de seguridad */
    max-height: 580px; /* <-- AJUSTA altura DESKTOP */
}

@media (max-width: 991.98px) {
    .about-hero {
        max-height: 420px;
    }
    /* <-- altura tablet */
}

@media (max-width: 575.98px) {
    .about-hero {
        max-height: 340px;
    }
    /* <-- altura móvil */
}

.about-hero > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* llena sin distorsionar */
    display: block;
    border-radius: inherit;
}

/* Caja del slogan – vuelve al azul (no transparente) */
.about-hero .sinse-box {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 28px;
    background: rgba(23, 61, 107, 0.92) !important; /* azul sólido con un pelín de transparencia */
    color: #f6fbff;
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 8px 28px rgba(0,0,0,.25) inset;
}

.about-hero .sinse-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.18;
}

.about-hero .sinse-box p {
    margin: 10px 0 0;
    opacity: .9;
    font-weight: 600;
}

/* ============ DRAWER / MENÚ MÓVIL ============ */
/* Estructura en columnas y footer pegado abajo */

.drawer {
    position: fixed;
    inset: 0 0 0 auto; /* ocupa pantalla completa */
    z-index: 1100;
    display: none; /* se abre con .open */
}

    .drawer.open {
        display: block;
    }

.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.drawer-panel {
    position: absolute;
    inset: 0 auto 0 0; /* panel desde la IZQUIERDA */
    width: min(88vw, 420px);
    background: #08223a; /* azul muy oscuro */
    color: #f6fbff;
    display: flex;
    flex-direction: column;
    padding: 18px 22px 16px;
    box-shadow: 10px 0 36px rgba(0,0,0,.35);
}

/* Header con logo izq. y X derecha */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

    .drawer-header .drawer-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .drawer-header img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

.drawer-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #f6fbff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* Cuerpo con links */
.drawer-body {
    padding: 10px 2px;
}

    .drawer-body a {
        display: block;
        color: #f6fbff;
        text-decoration: none;
        font-weight: 700;
        padding: 14px 4px;
        border-radius: 10px;
    }

        .drawer-body a:hover {
            background: rgba(255,255,255,.06);
        }

/* Footer pegado abajo: línea + redes */
.drawer-footer {
    margin-top: auto; /* ¡ancla abajo! */
    padding-top: 16px;
}

    .drawer-footer hr {
        border: 0;
        height: 1px;
        background: rgba(255,255,255,.18);
        margin: 0 0 14px;
    }

.drawer-social {
    display: flex;
    gap: 24px;
    align-items: center;
}

    .drawer-social a {
        color: #f6fbff;
        font-size: 20px;
        text-decoration: none;
        display: inline-flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,255,255,.06);
    }

        .drawer-social a:hover {
            background: rgba(255,255,255,.12);
        }

/* Botón burger: a la izquierda del logo, sin chocar */
.mp-burger {
    border: 0;
    background: #eaf3ff;
    color: #133a63;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

    .mp-burger i {
        font-size: 18px;
    }

@media (min-width: 992px) {
    .mp-burger {
        display: none;
    }
}

/* Hero alturas */
.about-hero {
    max-height: 480px !important;
}
/* desktop */
@media (max-width:300.98px) {
    .about-hero {
        max-height: 680px;
    }
}

@media (max-width:575.98px) {
    .about-hero {
        max-height: 320px;
    }
}

/* Posición del slogan */
.about-hero .sinse-box {
    left: 28px;
    right: 28px;
    bottom: 22px;
}

/* Ancho del drawer */
.drawer-panel {
    width: min(86vw, 400px);
}

/* Hero alturas */
.about-hero  { max-height: 680px;      /* desktop */
@media (max-width:991.98px){ .about-hero{ max-height: 400px; } }
@media (max-width:575.98px){ .about-hero{ max-height: 320px; } }

/* Posición del slogan */
.about-hero .sinse-box { left:28px; right:28px; bottom:20px; }

/* Ancho del drawer */
.drawer-panel { width: min(86vw, 400px); }

/* El bloque toma una proporción; la imagen se muestra completa */
.about-hero.keep-ratio {
    aspect-ratio: 16 / 9; /* cámbialo a tu foto (16:9, 21:9, 4:3…) */
    height: auto; /* deja que la altura sea automática */
    max-height: none; /* no limites por altura si usas aspect-ratio */
}

    .about-hero.keep-ratio > img {
        object-fit: contain; /* ver todo */
        background: #f6fbff;
    }



/* 3) Variante “bonita” en pantallas grandes (cover) y “contain” cuando el 
      bloque es bajito. Quita este bloque si quieres SIEMPRE contain. */
@media (min-width: 992px) {
    .about-img-box.about-hero.tall > img {
        object-fit: cover !important; /* en grande, rellena aunque recorte */
    }
}


/* 5) (Opcional) Tamaños más pequeños */
@media (max-width: 575.98px) {
    .about-img-box.about-hero {
        height: 300px;
    }
        /* reduce el cuadro */
        .about-img-box.about-hero .sinse-box {
            left: 16px;
            right: 16px;
            bottom: 16px;
        }

}