/* ===================================
    Habity
====================================== */
/* fonts - Tipografía oficial Habity */
@font-face {
    font-family: 'Nexa Heavy';
    src: url('../../fonts/habity/NexaTextHeavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nexa Light';
    src: url('../../fonts/habity/NexaTextLight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nexa ExtraLight';
    src: url('../../fonts/habity/NexaTextExtraLight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
/* variable - Paleta Habity */
:root {
    --alt-font: 'Nexa Heavy', sans-serif;
    --primary-font: 'Nexa Light', sans-serif;
    --base-color: #CE0505;   /* Rojo acción Habity */
    --green: #1C2B57;        /* Azul muy oscuro Habity */
    --dark-gray: #262627;    /* Negro mate Habity */
    --medium-gray: #828282;
    --very-light-gray: #f5f5f5;
}
body {
    font-size: 16px;
    line-height: 28px;
}
/* header */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    width: 300px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    font-size: 16px;
    color: var(--dark-gray);
    font-weight: 600;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a {
    background-color: var(--base-color);
    color: var(--white);
}
.navbar .navbar-nav .dropdown .dropdown-menu a i,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
    font-size: 40px;
    margin-right: 10px;
    width: 40px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover i {
    color: var(--white);
}
/* Desktop (≥992px): default-logo y alt-logo */
header .navbar-brand img {
    max-height: 60px;
    width: auto;
}
/* Tablet y móvil (<992px): mobile-logo */
@media (max-width: 991px) {
    header .navbar-brand img {
        max-height: 47px;
        width: auto;
    }
}
/* Móvil pequeño (<576px) */
@media (max-width: 575px) {
    header .navbar-brand img {
        max-height: 38px;
        width: auto;
    }
}
.navbar .navbar-nav .nav-link {
    font-weight: 600;
    font-size: 18px;
}
/* button */
.btn {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0px;
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 17px 38px;
    font-size: 17px; 
}
.btn.btn-switch-text.btn-large > span {
    padding: 13px 32px;
    font-size:15px;
}
.btn.btn-switch-text.btn-medium > span {
    padding: 12px 26px;
    font-size:14px;
}
/* heading */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
    font-family: var(--alt-font);
}
/* Text gradient color */
.text-gradient-light-green-white {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #E1EAF6 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Background color */
.bg-light-green {
    background-color: #c5d8f0;
}
.bg-very-light-green {
    background-color: #E1EAF6;
}
/* Transparent background color */
.bg-gradient-green-transparent {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #E1EAF6 100%);
}

.right-210px {
  right: 210px;
}

/* page title */
.page-title-large h1 {
    font-size: 4.2rem;
    line-height: 4rem;
}
.page-title-large h2 {
    font-size: 18px;
}

/* Border color */
.border-color-dark-green {
    border-color: var(--green);
}
/* Subcribe style 02 */
.newsletter-style-02 .btn:hover {
    background-color: var(--green);
}
.newsletter-style-02 .btn {
    height: 85%;
    margin: 4px;
    padding: 5px 20px 5px;
}
.newsletter-style-02 input {
    padding-right: 75px !important;
}

/* Will change */
.animation-rotation {
    -webkit-animation: rotation 2.5s infinite linear;
}
/* video icon - primera sección únicamente */
.top-space-margin .video-icon-large .video-icon {
    width: 65px;
    height: 65px;
    font-size: 15px;
}
.top-space-margin .video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-bfr {
    width: 105px;
    height: 105px;
}
/* Contacto mobile: mas separacion entre el mapa y "Siguenos en redes sociales" */
@media (max-width: 767px) {
    #contacto .habity-map-frame {
        margin-bottom: 40px;
    }
}
/* Hero mobile: ocultar "Ver Servicios" y centrar "Ver Inmuebles" */
@media (max-width: 767px) {
    .top-space-margin a[href="habity-services.html"] {
        display: none !important;
    }
    .top-space-margin a[href="#propiedades"].btn-white {
        margin-right: 0 !important;
    }
    /* La numeracion 01/02 se posiciona con bottom absoluto pensado para el alto
       de pantalla completa del hero en desktop; en mobile el slider usa alto
       automatico y esa posicion queda montada sobre el borde con la siguiente
       seccion, por lo que se oculta. */
    .top-space-margin .swiper-pagination {
        display: none !important;
    }
}
/* ===== Patrones de identidad Habity ===== */

/* 1. Hero slider - fondo compartido (azul + separator.png) para TODA la fila,
   detrás de los dos paneles. Antes cada panel pintaba su propio fondo
   (patrón centrado en su propia caja), lo que generaba un corte visible
   justo en la división entre el texto y la imagen. Ahora es una sola capa
   continua detrás de ambos paneles, y cada panel solo aporta su propio
   contenido (texto o imagen) encima, transparente en lo demás. */
.swiper.full-screen .row.h-100.p-0 {
    position: relative;
    background-color: #1C2B57;
}
.swiper.full-screen .row.h-100.p-0::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../images_2026/separator.png');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
.swiper.full-screen .row.h-100.p-0::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 43, 87, 0.85) 0%, rgba(28, 43, 87, 0.4) 45%, rgba(28, 43, 87, 0) 75%);
    z-index: 0;
    pointer-events: none;
}
.swiper.full-screen .row.h-100.p-0 > div {
    position: relative;
    z-index: 1;
}
.swiper.full-screen .bg-very-light-green.cover-background {
    background-color: transparent !important;
    background-image: none !important;
}

/* 1b. Hero slider - panel derecho (imagen collage): se muestra completa,
   sin recortes, en todos los tamaños de pantalla (background-size: contain).
   Sin fondo propio: en el espacio sobrante se ve el fondo compartido de la
   fila (azul + separator.png), continuo con el panel de texto. */
.swiper.full-screen .hero-image-panel {
    background-color: transparent;
    background-image: url('../../images_2026/collage/collage.jpg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
/* En computadora (panel a la derecha, junto al texto) se pega lo más
   posible al borde derecho de la pantalla en vez de quedar centrada. */
@media (min-width: 992px) {
    .swiper.full-screen .hero-image-panel {
        background-position: right center !important;
    }
}
/* En móvil/tablet el panel de imagen va arriba (antes que el texto), pegado
   al menú. Se alinea la imagen contenida arriba del panel para que no quede
   fondo visible entre el menú y la imagen. */
@media (max-width: 991px) {
    .swiper.full-screen .hero-image-panel {
        background-position: center top !important;
    }
}

/* 2. Sección "Recent projects" - CYMK.png en esquina inferior izquierda */
.bg-very-light-green.border-radius-20px {
    position: relative;
}
.bg-very-light-green.border-radius-20px::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35%;
    height: 85%;
    background-image: url('../../images_2026/CYMK.png');
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
}
.bg-very-light-green.border-radius-20px .container {
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .bg-very-light-green.border-radius-20px::before {
        width: 55%;
        height: 45%;
        opacity: 0.30;
    }
}
@media (max-width: 575px) {
    .bg-very-light-green.border-radius-20px::before {
        width: 70%;
        height: 35%;
        opacity: 0.22;
    }
}

/* 4. Hero - tarjeta flotante "Tu Espacio, Tu Historia" */
.top-space-margin .row.border-radius-10px.lg-no-border-radius.overflow-hidden .bg-white.text-center {
    position: relative;
}
.top-space-margin .row.border-radius-10px.lg-no-border-radius.overflow-hidden .bg-white.text-center::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45%;
    height: 60%;
    background-image: url('../../images_2026/CYMK.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    opacity: 0.10;
    z-index: 0;
    pointer-events: none;
}
.top-space-margin .row.border-radius-10px.lg-no-border-radius.overflow-hidden .bg-white.text-center > * {
    position: relative;
    z-index: 1;
}

/* 5. Tarjeta roja de estadística (CO2) */
.feature-box.feature-box-left-icon-middle.bg-base-color {
    position: relative;
}
.feature-box.feature-box-left-icon-middle.bg-base-color::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../images_2026/separator.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}
.feature-box.feature-box-left-icon-middle.bg-base-color > * {
    position: relative;
    z-index: 1;
}

/* 6. Panel de testimonio destacado */
.row.g-0.overflow-hidden.border-radius-10px .bg-very-light-green.p-50px {
    position: relative;
}
.row.g-0.overflow-hidden.border-radius-10px .bg-very-light-green.p-50px::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 90%;
    background-image: url('../../images_2026/CYMK.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    opacity: 0.30;
    z-index: 0;
    pointer-events: none;
}
.row.g-0.overflow-hidden.border-radius-10px .bg-very-light-green.p-50px > * {
    position: relative;
    z-index: 1;
}

/* 7. Tarjeta de contacto "Ready to help you!" */
.bg-white.border-radius-6px.box-shadow-quadruple-large {
    position: relative;
    overflow: hidden;
}
.bg-white.border-radius-6px.box-shadow-quadruple-large::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 35%;
    height: 70%;
    background-image: url('../../images_2026/CYMK.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
}
.bg-white.border-radius-6px.box-shadow-quadruple-large > * {
    position: relative;
    z-index: 1;
}

/* 9. Sección "About renewable energy" - CYMK.png esquina inferior derecha */
.pattern-about-section .container {
    position: relative;
    z-index: 1;
}
.pattern-about-section::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 95%;
    background-image: url('../../images_2026/CYMK.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    opacity: 0.40;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 991px) {
    .pattern-about-section::before {
        width: 55%;
        height: 55%;
        opacity: 0.28;
    }
}
@media (max-width: 575px) {
    .pattern-about-section::before {
        width: 70%;
        height: 40%;
        opacity: 0.20;
    }
}

/* 10. Sección "A World Wide Distributor Of Solar Supplies" - CYMK.png esquina inferior izquierda */
.pb-14.sm-pb-50px.position-relative.overflow-hidden .container {
    position: relative;
    z-index: 1;
}
.pb-14.sm-pb-50px.position-relative.overflow-hidden::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 95%;
    background-image: url('../../images_2026/CYMK.png');
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    opacity: 0.40;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 991px) {
    .pb-14.sm-pb-50px.position-relative.overflow-hidden::before {
        width: 55%;
        height: 55%;
        opacity: 0.28;
    }
}
@media (max-width: 575px) {
    .pb-14.sm-pb-50px.position-relative.overflow-hidden::before {
        width: 70%;
        height: 40%;
        opacity: 0.20;
    }
}

/* 11. Franja divisoria entre "Raíces Célebes" y "Looking for any help?" */
.habity-strip-divider {
    width: 100%;
    height: 80px;
    background-image: url('../../images_2026/separator.png');
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}
@media (max-width: 991px) {
    .habity-strip-divider {
        height: 40px;
    }
}
@media (max-width: 575px) {
    .habity-strip-divider {
        height: 28px;
    }
}

/* footer */
footer.bg-dark-gray {
    background-color: #1C2B57;
    position: relative;
}
/* 8. Footer - separator.png muy sutil */
footer.bg-dark-gray::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../images_2026/separator.png');
    background-size: cover;
    background-position: center bottom;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}
footer.bg-dark-gray .container {
    position: relative;
    z-index: 1;
}
footer .footer-logo img {
    max-height: 43px;
    width: auto;
}
footer a:hover {
    color: var(--white);
}
footer ul li {
    margin-bottom: 2px;
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}
@media (max-width: 1600px) {
    /* Font size */
    .fs-80 {
        font-size: 4rem;
        line-height: 4rem;
    }
}
@media (max-width: 1199px){
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding: 10px 10px;
    }
}
@media (max-width: 991px){
    /* Background image */
    .md-background-position-top-center {
        background-position: top center !important;
    } 
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        padding-bottom: 15px;
    }
}
@media (max-width: 767px){
    /* Background image */
    .sm-background-position-top-center {
        background-position: top center !important;
    }
}

/* Mapa de ubicacion (seccion contacto) - misma altura que la tarjeta de contacto en desktop */
.habity-map-frame {
    box-shadow: 0 20px 40px rgba(28, 43, 87, 0.2);
    min-height: 350px;
}
.habity-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 350px;
}
@media (max-width: 991px) {
    .habity-map-frame,
    .habity-map-frame iframe {
        min-height: 0;
        height: 350px;
    }
}
@media (max-width: 575px) {
    .habity-map-frame,
    .habity-map-frame iframe {
        height: 280px;
    }
}

/* Servicios: imagen central a la misma altura que las tarjetas en desktop */
.habity-service-img {
    display: block;
    object-fit: cover;
}
@media (max-width: 991px) {
    .habity-service-img {
        height: 320px !important;
    }
}
@media (max-width: 575px) {
    .habity-service-img {
        height: 240px !important;
    }
}

/* Servicios: logos DS / Inmobilien junto al texto, en lugar de icono */
.habity-service-logo {
    display: block;
    flex-shrink: 0;
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 575px) {
    .habity-service-logo {
        height: 64px;
    }
}
@media (min-width: 992px) {
    .habity-service-title {
        white-space: nowrap;
    }
}

/* Servicios: botón circular flotante para reproducir el video de cada servicio */
.habity-video-play-btn {
    width: 60px;
    height: 60px;
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.habity-video-play-btn i {
    margin-left: 3px;
}
.habity-video-play-btn:hover, .habity-video-play-btn:focus {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Navegacion con scroll suave a las secciones */
html {
    scroll-behavior: smooth;
}
section[id] {
    scroll-margin-top: 96px;
}
@media (max-width: 991px) {
    section[id] {
        scroll-margin-top: 76px;
    }
}

/* Galeria de inmuebles: mismo tamano para todas las fotos */
#propiedades .gallery-image {
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    transition: box-shadow 350ms cubic-bezier(0.37, 0, 0.63, 1);
}
#propiedades .gallery-box:hover .gallery-image {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}
#propiedades .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Titulo de cada inmueble, esquina inferior izquierda: fondo solido para que
   siempre se lea, sin importar los colores de la foto de fondo */
#propiedades .property-caption {
    z-index: 2;
    max-width: calc(100% - 24px);
    margin: 0 0 12px 12px;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    background-color: rgba(28, 43, 87, 0.8);
}
#propiedades .property-caption span {
    display: block;
    color: #fff;
    font-family: var(--alt-font);
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
}
@media (max-width: 575px) {
    #propiedades .property-caption span {
        font-size: 12px;
    }
}

/* Carrusel de Muebles MDF: franja inferior con el nombre de cada mueble,
   siempre legible sin importar los colores de la foto de fondo */
.mdf-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 40px 30px 22px;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.85) 0%, rgba(17, 24, 39, 0.55) 60%, rgba(17, 24, 39, 0) 100%);
}
.mdf-slide-caption span {
    display: block;
    color: #fff;
    font-family: var(--alt-font);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
}
@media (max-width: 991px) {
    .mdf-slide-caption {
        padding: 30px 20px 16px;
    }
    .mdf-slide-caption span {
        font-size: 17px;
    }
}
@media (max-width: 575px) {
    .mdf-slide-caption {
        padding: 22px 16px 14px;
    }
    .mdf-slide-caption span {
        font-size: 15px;
    }
}

/* Reduce el espacio excesivo arriba de "Venta y renta" en desktop (pt-7 = 7% del ancho) */
@media (min-width: 1200px) {
    #propiedades .border-radius-20px {
        padding-top: 60px !important;
    }
}

/* ===================================
   Estilos movidos del <style> inline de index.html
====================================== */
.raices-video-btn { transition: transform 0.3s ease; }
.raices-video-btn:hover { transform: translate(-50%, -50%) scale(1.15); }
.raices-video-btn .video-icon i { margin-left: 0; }
.raices-float-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 65px;
    height: 65px;
    z-index: 999;
    display: block;
    transition: transform 0.3s ease;
    overflow: visible !important;
    background-image: url('../../images_2026/work/L1-crop.png');
    background-color: #000;
}
.raices-float-btn:hover { transform: scale(1.08); }
.raices-float-sonar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    animation: video-icon-sonar 2s linear infinite;
}
.raices-float-sonar::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-radius: 50%;
    border: 3px solid var(--base-color);
}
@media (max-width: 575px) {
    .raices-float-btn { right: 15px; bottom: 15px; width: 55px; height: 55px; }
}
/* ===================================
   Utilidades para reemplazar style="" inline repetidos
====================================== */

/* Botones flotantes/circulares de WhatsApp (color de marca + sombra) */
.whatsapp-btn {
    background-color: #25d366;
    box-shadow: 0 4px 12px rgba(37,211,102,0.45);
}

/* Fondo del panel izquierdo del hero (slider-one-slide), repetido en ambos slides */
.hero-slide-bg-left {
    background-image: url('../../images/habity-slider-left-01.jpg');
}

/* Flechas de navegacion del carrusel de Muebles MDF */
.mdf-slider-prev,
.mdf-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.mdf-slider-prev { left: 20px; right: auto; }
.mdf-slider-next { right: 20px; left: auto; }

/* Flechas de navegacion del carrusel de Estructura Corporativa */
.corp-slider-prev,
.corp-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}
.corp-slider-prev { left: 30px; right: auto; }
.corp-slider-next { right: 30px; left: auto; }
.corp-slider-prev i,
.corp-slider-next i {
    font-size: 14px !important;
}

/* El iframe del mapa no necesita su propio borde (ya lo da .habity-map-frame) */
.habity-map-frame iframe {
    border: 0;
}

/* Utilidad generica: permite que un flex item con text-truncate se encoja bajo su contenido */
.min-w-0 {
    min-width: 0;
}

/* Hero: "Ver Inmuebles" y "Ver Servicios" se ven encimados/apretados uno junto al otro
   en pantallas chicas; en xs los apilamos en columna y centrados en vez de en linea.
   !important necesario: el elemento ya trae la clase ".d-inline-block" de Bootstrap,
   que fija "display: inline-block !important" y le ganaria a un display sin !important. */
@media (max-width: 575px) {
    .hero-cta-group {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    .hero-cta-group .btn {
        margin-right: 0 !important;
    }
}