/* ==========================================================================
   Google Translate: al activarse agrega inline style "body{top:40px}" para
   dejar lugar a su barra superior -- ese es el "salto" visual al cambiar de
   idioma. El iframe de la barra ya se oculta en zoomvilla.css (.skiptranslate
   iframe), pero el desplazamiento del body queda igual si no se neutraliza
   aparte.
   ========================================================================== */
body { top: 0px !important; }

/* ==========================================================================
   Corrige la viñeta doble (negra + verde) en cualquier <ul><li> de un campo
   RTE dentro de .servicio-info__list (detalle-servicio.php). El CSS del
   theme (.servicio-info__list li::before) ya pinta el punto verde, pero
   solo apaga list-style en el <div> contenedor, nunca en el <ul> real que
   imprime el editor -- el <ul> sigue con el disco negro por defecto del
   navegador porque esa regla nativa nunca se sobreescribe.
   ========================================================================== */
.servicio-info__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Resumen "Resultados de tu búsqueda" (inmuebles.php) -- reutiliza las
   clases .zoomvilla-breadcrumb, pero esa clase trae texto blanco pensado
   para el fondo oscuro del encabezado, no para el fondo blanco de esta
   sección. Se sobreescribe el color aquí, sin tocar el CSS del theme.
   ========================================================================== */
.inmuebles-filtro__resumen .zoomvilla-breadcrumb li {
    color: var(--zoomvilla-black, #222);
}

.inmuebles-filtro__resumen .zoomvilla-breadcrumb li:not(:first-child) span {
    color: var(--zoomvilla-base, #D7984E);
}

/* ==========================================================================
   Botones de "Compartir" (detalle-blog.php, patrón 3.70)
   ========================================================================== */
.detalle-blog__compartir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.detalle-blog__compartir__label {
    font-weight: 600;
    color: var(--zoomvilla-black, #222);
    margin-right: 4px;
}

.detalle-blog__compartir__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zoomvilla-base, #D7984E);
    color: #fff;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: opacity .2s ease;
}

.detalle-blog__compartir__btn:hover {
    opacity: .85;
    color: #fff;
}

.detalle-blog__compartir__btn--facebook { background: #1877f2; }
.detalle-blog__compartir__btn--twitter { background: #1da1f2; }
.detalle-blog__compartir__btn--whatsapp { background: #25d366; }
.detalle-blog__compartir__btn--linkedin { background: #0a66c2; }

/* ==========================================================================
   Logo girando de la sección de contadores (includes/numeracion.php) —
   pedido explícito del propietario del proyecto: rotación continua, sin
   detenerse.
   ========================================================================== */
@keyframes numeracion-girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.numeracion__logo-girando {
    animation: numeracion-girar 10s linear infinite;
}

/* ==========================================================================
   Widget flotante de WhatsApp (patrón 3.16) — acento y tipografía propios
   de ASIJUR (var(--zoomvilla-base), var(--zoomvilla-font)).
   ========================================================================== */
.whatsapp-widget {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1000040;
    font-family: var(--zoomvilla-font, "Poppins", sans-serif);
}

.whatsapp-widget__boton {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    border: none;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: transform .2s ease;
}

.whatsapp-widget__boton:hover {
    transform: scale(1.06);
}

.whatsapp-widget__popup {
    display: none;
    position: absolute;
    bottom: 84px;
    left: 0;
    width: 340px;
    max-width: calc(100vw - 48px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    background: #fff;
}

.whatsapp-widget__popup--abierto {
    display: block;
}

.whatsapp-widget__header {
    background: #1a1a1a;
    border-bottom: 3px solid var(--zoomvilla-base, #D7984E);
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.whatsapp-widget__logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--zoomvilla-base, #D7984E);
    object-fit: cover;
    flex-shrink: 0;
}

.whatsapp-widget__info {
    flex: 1;
    color: #fff;
    min-width: 0;
}

.whatsapp-widget__info strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.whatsapp-widget__estado {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: #d8d8d8;
    margin-top: 2px;
}

.whatsapp-widget__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    flex-shrink: 0;
}

.whatsapp-widget__cerrar {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    opacity: .8;
    align-self: flex-start;
}

.whatsapp-widget__cerrar:hover {
    opacity: 1;
}

.whatsapp-widget__cuerpo {
    background: #f4efe6;
    background-image: radial-gradient(#e6ded0 1px, transparent 1px);
    background-size: 16px 16px;
    padding: 20px 16px;
}

.whatsapp-widget__burbuja {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: .95rem;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.whatsapp-widget__remitente {
    display: block;
    color: var(--zoomvilla-base, #D7984E);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.whatsapp-widget__form {
    display: flex;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid #eee;
    background: #fff;
}

.whatsapp-widget__input,
.whatsapp-widget__input:focus {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--zoomvilla-base, #D7984E);
    border-radius: 22px;
    padding: 10px 16px;
    font-size: .9rem;
    font-family: inherit;
    color: #222;
}

.whatsapp-widget__enviar {
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 22px;
    padding: 10px 22px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.whatsapp-widget__enviar:hover {
    filter: brightness(1.05);
}

@media (max-width: 480px) {
    .whatsapp-widget {
        left: 16px;
        bottom: 16px;
    }

    .whatsapp-widget__boton {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .whatsapp-widget__popup {
        bottom: 72px;
        width: 300px;
    }
}

/* ==========================================================================
   Popup promocional del index (patrón 3.40) — sin tarjeta/fondo propio,
   tamaño calculado desde el ancho/alto real de la imagen activa.
   ========================================================================== */
.mfp-bg {
    z-index: 1000050;
}

.mfp-wrap {
    z-index: 1000060;
}

.popup-promocional {
    position: relative;
    margin: 0 auto;
}

.popup-promocional__slider.owl-carousel {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.popup-promocional__slider .owl-stage-outer,
.popup-promocional__slider .owl-item img {
    display: block;
    width: 100%;
    height: auto;
}

.popup-promocional__slide {
    position: relative;
}

.popup-promocional__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    padding: 0 8%;
    z-index: 2;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.popup-promocional__overlay--izquierda {
    text-align: left;
}

.popup-promocional__overlay--derecha {
    text-align: right;
}

.popup-promocional__overlay p,
.popup-promocional__overlay div {
    margin: 0 0 12px;
    font-size: 1.05rem;
    line-height: 1.4;
}

.popup-promocional__boton {
    display: inline-block;
    background: var(--zoomvilla-base, #D7984E);
    color: #fff;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: .9rem;
}

.popup-promocional__cerrar {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #222;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    z-index: 3;
    cursor: pointer;
}

.popup-promocional .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2;
    text-align: center;
}

.popup-promocional .owl-dots .owl-dot span {
    background: rgba(255, 255, 255, .6);
}

.popup-promocional .owl-dots .owl-dot.active span {
    background: #fff;
}

/* ==========================================================================
   Banner de portada (patrón 3.46) — el diseño maquetado original no traía
   texto ni botón; overlay elegante inventado a pedido explícito del
   propietario del proyecto, con la tipografía/acento reales de ASIJUR.
   ========================================================================== */
.banner-hero {
    position: relative;
    overflow: hidden;
}

.banner-hero__carousel.owl-carousel {
    display: block;
}

.banner-hero__slide {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .banner-hero__slide {
        min-height: 520px;
    }
}

@media (max-width: 575px) {
    .banner-hero__slide {
        min-height: 440px;
    }
}

.banner-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.banner-hero__video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #111;
}

.banner-hero__video-preloader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.banner-hero__video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: 0;
    z-index: 1;
    pointer-events: none;
}

.banner-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 15, 15, .72) 0%, rgba(15, 15, 15, .42) 55%, rgba(15, 15, 15, .12) 100%);
    z-index: 1;
}

.banner-hero .container {
    position: relative;
    z-index: 2;
}

.banner-hero__content {
    max-width: 640px;
    font-family: var(--zoomvilla-font, "Poppins", sans-serif);
    transition: opacity 1.2s ease;
}

.banner-hero__content--difuminado {
    opacity: 0;
    pointer-events: none;
}

.banner-hero__content--centro {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.banner-hero__content--derecha {
    margin-left: auto;
    text-align: right;
}

.banner-hero__title {
    color: #fff;
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 18px;
    text-wrap: balance;
}

@media (max-width: 991px) {
    .banner-hero__title {
        font-size: 2.4rem;
    }
}

@media (max-width: 575px) {
    .banner-hero__title {
        font-size: 1.8rem;
    }
}

.banner-hero__subtitle {
    color: var(--zoomvilla-base, #D7984E);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 14px;
}

@media (max-width: 575px) {
    .banner-hero__subtitle {
        font-size: 1.05rem;
    }
}

/* ==========================================================================
   Botón de "Recorrido 360°" centrado sobre la foto (detalle-inmueble.php) --
   mismo tratamiento visual que .paralax-360__link (diseño original), pero
   posicionado en absoluto porque .detalle-360__photo no usa flexbox como
   .paralax-360__photo.
   ========================================================================== */
.detalle-360__link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--zoomvilla-white, #fff);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 50px;
    padding: 18px 22px;
    text-align: center;
    transition: background-color 300ms, color 300ms;
}

.detalle-360__link:hover {
    background-color: var(--color-secondary);
    color: var(--zoomvilla-white, #fff);
}

/* ==========================================================================
   Botón "Visualizar 360°" centrado sobre la foto (includes/tour-360.php,
   sección "Conoce los inmuebles en 360°" del index). El theme define
   .tour-360__link como un hotspot invisible (background/color transparent,
   font-size 0) pensado para una imagen con un botón ya dibujado encima --
   aquí se sobrescribe para que sea un botón real y visible, mismo
   tratamiento que .paralax-360__link (referencia: asesoria-juridica, sección
   "Vive El Espacio Antes De Visitarlo").
   ========================================================================== */
.tour-360__link {
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--zoomvilla-white, #fff);
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 50px;
    padding: 18px 22px;
    transition: background-color 300ms, color 300ms;
}

.tour-360__link:hover {
    background-color: var(--color-secondary);
    color: var(--zoomvilla-white, #fff);
}

@media (max-width: 767px) {
    .tour-360__link {
        padding: 14px 20px;
        font-size: 14px;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .detalle-360__link {
        padding: 14px 20px;
        font-size: 14px;
        white-space: normal;
    }
}

/* El popup promocional (patrón 3.40, más arriba en este mismo archivo) usa
   .mfp-wrap { z-index: 1000060 } A PROPÓSITO, para quedar siempre por
   encima de TODO, header incluido (así debe verse). Ya NO se sube el
   z-index del header por encima del popup (se probó y quedaba mal: el
   popup terminaba tapado por el header). El primer clic en una bandera de
   idioma mientras el popup está abierto ahora simplemente cierra el popup
   (ver el manejador de clic-afuera en assets/js/popup-promocional.js, que
   trata cualquier clic fuera de .popup-promocional como "cerrar") -- un
   segundo clic en la bandera, ya sin popup encima, funciona normalmente.
   ========================================================================== */

.banner-hero__text {
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 26px;
    max-width: 540px;
}

.banner-hero__content--centro .banner-hero__text {
    margin-left: auto;
    margin-right: auto;
}

.banner-hero__btn {
    margin-top: 6px;
    font-size: 1rem;
    padding: 14px 34px;
}

.banner-hero__carousel .owl-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.banner-hero__carousel .owl-dots .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: all .3s ease;
}

.banner-hero__carousel .owl-dots .owl-dot.active span {
    background: var(--zoomvilla-base, #D7984E);
    width: 28px;
    border-radius: 6px;
}

/* ==========================================================================
   Badge de tipo de negocio (Venta/Arriendo/...) en la ficha técnica del
   detalle de inmueble - inmuebles_tipos, distinto de "Tipo:" (categoría
   física del inmueble, inmuebles_categorias).
   ========================================================================== */
.detalle-ficha__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--zoomvilla-base, #D7984E);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* ==========================================================================
   Galería del detalle de inmueble (detalle-inmueble.php): toda la imagen es
   clicable para el zoom (Magnific Popup vía .img-popup), no solo el ícono —
   el <a> ahora envuelve el frame completo; el ícono queda solo como pista
   visual encima, ya no es su propio trigger independiente.
   ========================================================================== */
.detalle-galeria__link {
    display: block;
    position: relative;
    cursor: zoom-in;
}