/* ---------------------------------------------------------------------------
 * Reglas de la variación MODERN (se encolan solo cuando está activa)
 *
 * Aquí va únicamente lo que necesita el diseño modern. Las reglas de classic
 * viven en style.css y llevan su contexto, así que no interfieren.
 *
 * La paleta se aplica por variables porque modern sí las usa: cambiando estas
 * cinco se repinta todo (precios, botones, enlaces, hovers) de una vez, en vez
 * de ir selector a selector como hubo que hacer en classic.
 * ------------------------------------------------------------------------- */

/* Paleta corporativa. Se declara en body y no en :root para que gane a la del
 * tema (las variables resuelven por herencia: body está más cerca). */
body {
    --rh-global-color-primary: #01b2aa;
    --rh-global-color-primary-rgb: 1, 178, 170;
    --rh-global-color-primary-light: #e0f6f5;
    --rh-global-color-primary-dark: #018f89;
    --rh-global-color-secondary: #dc4b1e;
    --rh-global-color-secondary-rgb: 220, 75, 30;
    --rh-global-color-secondary-light: #fbe3da;
    --rh-global-color-secondary-dark: #b83c15;
    --rh-global-color-headings-hover: #dc4b1e;
    --rh-global-color-link-hover: #dc4b1e;
}

/* El PNG del logo corporativo es grande y modern no lo acota: sin esto ocupa
 * media pantalla. Se limita por alto para no deformarlo. */
.rh_logo img {
    max-height: 64px;
    width: auto;
}

@media (max-width: 767px) {
    .rh_logo img {
        max-height: 44px;
    }
}

/* ---------------------------------------------------------------------------
 * Selector de idioma en la cabecera de modern
 *
 * Ninguna variación del tema lo pinta en la cabecera, así que se llama desde
 * assets/modern/partials/header/header-var1.php del child. Misma píldora que en
 * classic para que la marca se lea igual.
 * ------------------------------------------------------------------------- */
.inmocasa-lang--modern {
    margin-right: 18px;
    display: inline-flex;
    align-items: center;
}

.inmocasa-lang--modern .inspiry-language-switcher,
.inmocasa-lang--modern .inspiry-language-switcher ul,
.inmocasa-lang--modern .inspiry-language-switcher > ul > li,
.inmocasa-lang--modern .inspiry-language-switcher > ul > li > a,
.inmocasa-lang--modern .inspiry-language-switcher > ul > li > span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.inmocasa-lang--modern .inspiry-language-switcher > ul > li {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 8px 15px !important;
    border: 2px solid #01b2aa !important;
    border-radius: 30px;
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.15 !important;
    white-space: nowrap;
    cursor: pointer;
}

.inmocasa-lang--modern .inspiry-language-switcher > ul > li::after {
    content: "" !important;
    position: static !important;
    width: 7px;
    height: 7px;
    margin: -3px 0 0 3px;
    border-right: 2px solid #01b2aa;
    border-bottom: 2px solid #01b2aa;
    transform: rotate(45deg);
    background: none !important;
}

.inmocasa-lang--modern .inspiry-language-switcher img {
    width: 18px;
    height: auto;
    display: inline-block;
    border-radius: 2px;
}

.inmocasa-lang--modern .inspiry-language-switcher .inspiry-language-native {
    color: #1a1a1a !important;
    font-size: inherit;
    font-weight: 700;
}

.inmocasa-lang--modern .rh_languages_available {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 175px;
    width: auto !important;
    display: none;
    background: #fff !important;
    border: 2px solid #01b2aa !important;
    border-radius: 12px;
    padding: 6px 0 !important;
    overflow: visible !important;
    z-index: 999;
}

/* Puente invisible sobre los 8 px: sin esto el menú se cierra al ir a elegir */
.inmocasa-lang--modern .rh_languages_available::before {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: -10px;
    height: 10px;
}

.inmocasa-lang--modern .inspiry-language-switcher > ul > li:hover .rh_languages_available,
.inmocasa-lang--modern:focus-within .rh_languages_available {
    display: block;
}

.inmocasa-lang--modern:focus {
    outline: none;
}

.inmocasa-lang--modern .rh_languages_available li {
    display: block;
}

.inmocasa-lang--modern .rh_languages_available li a {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 9px 15px !important;
    font-weight: 500;
    color: #1a1a1a;
}

.inmocasa-lang--modern .rh_languages_available li a:hover,
.inmocasa-lang--modern .rh_languages_available li a:hover .inspiry-language-native {
    background: #eafaf9 !important;
    color: #01b2aa !important;
}

/* ---------------------------------------------------------------------------
 * Precio en la tarjeta del listado (vista "list")
 *
 * El tema pinta .rh_list_card__price .price en blanco, porque el diseño original
 * espera una tarjeta con fondo oscuro. En la vista de lista la tarjeta es blanca,
 * así que el precio quedaba invisible. Se fuerza el color corporativo.
 * ------------------------------------------------------------------------- */
.rh_list_card__priceLabel .rh_list_card__price .price,
.rh_list_card__priceLabel .rh_list_card__price .status {
    color: #01b2aa !important;
}

.rh_list_card__priceLabel .rh_list_card__price .price del,
.rh_list_card__priceLabel .rh_list_card__price .price ins {
    color: #dc4b1e !important;
}

/* ---------------------------------------------------------------------------
 * Menú responsive (mobile)
 *
 * El panel del menú se abre con js/child-modern.js. La cabecera en sí NO se toca:
 * el desmaquetado que sufría venía de child-custom.css (la hoja de la etapa
 * classic, con un #logo img de 110px y un .header-wrapper !important), que ya no
 * se carga en esta variación.
 * ------------------------------------------------------------------------- */
ul.rh_menu__responsive.rh_menu__responsive_show {
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    border-top: 2px solid #01b2aa;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 9999;
}

/* El selector de idioma dentro del menú móvil: en línea, sin píldoras */
.rh_menu__responsive .inmocasa-lang--menu {
    padding: 14px 20px 6px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.rh_menu__responsive .inmocasa-lang--menu .inspiry-language-switcher > ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.rh_menu__responsive .inmocasa-lang--menu .inspiry-language-switcher > ul > li {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    flex-shrink: 0;
}

.rh_menu__responsive .inmocasa-lang--menu .inspiry-language-switcher > ul > li::after {
    display: none !important;
}

.rh_menu__responsive .inmocasa-lang--menu .inspiry-language-native {
    color: #1a1a1a !important;
}

.rh_menu__responsive .inmocasa-lang--menu .inspiry-language.current .inspiry-language-native {
    color: #01b2aa !important;
}

.rh_menu__responsive .inmocasa-lang--menu .rh_languages_available {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ---------------------------------------------------------------------------
 * Footer corporativo (portado desde child-custom.css)
 *
 * El fondo verde del footer, los colores de sus textos y la barra inferior oscura
 * son identidad de marca, no maquetación de classic: por eso se traen aquí en vez
 * de dejar que se pierdan al no cargar aquella hoja.
 * ------------------------------------------------------------------------- */
#footer-wrapper {
    background: transparent;
    background-color: #01b2aa;
    padding-bottom: 0;
}

#footer-bottom {
    background: #252A2B;
    width: 100%;
    border-top: 0;
}

#footer .widget {
    padding-top: 18px;
}

#footer .widget .title {
    margin-bottom: 12px;
    line-height: 24px;
}

#footer .widget .textwidget {
    color: #e7eff7 !important;
}

#footer .widget ul li a,
#footer .widget a,
#footer-bottom a {
    color: #D6DEE6 !important;
}

#footer .widget a:hover,
#footer-bottom a:hover {
    color: #BCC4CC !important;
}

/* El buscador enseña la etiqueta "Referencia" y además el placeholder del campo,
 * así que el texto sale duplicado. En la etapa classic lo ocultaba
 * child-custom.css; al dejar de cargar esa hoja hay que decirlo aquí.
 * Se oculta la etiqueta y se queda el placeholder, que ya cumple esa función. */
label[for="property-id-txt"] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Ajustes de la lista del cliente (Modern como referencia; de Classic solo los
 * colores corporativos).
 * ------------------------------------------------------------------------- */

/* 1. Menú de la cabecera sobre el hero.
 * El tema pinta los enlaces del menú en gris (#AFB4B5) y la cabecera va
 * transparente sobre la foto: se leen mal. En blanco, que es lo que espera el
 * diseño de cabecera transparente de Modern. */
.rh_header_var_1 ul.rh_menu__main > li > a,
.rh_header_var_1 ul.rh_menu__main > li > a:hover {
    color: #fff !important;
}

/* 2. Precio de las tarjetas.
 * El tema lo pinta en BLANCO (diseño "stylish", pensado para tarjeta sobre
 * imagen oscura). En la home y el listado la tarjeta es clara, así que el precio
 * desaparecía. Se usa el primario corporativo, que es también el color con el
 * que Modern pinta el precio en la ficha. */
.rh_prop_card .rh_prop_card__details .rh_prop_card__priceLabel .rh_prop_card__price,
.rh_theme_card__priceLabel_sty .rh_theme_card__price_sty,
.rh_list_card__priceLabel .rh_list_card__price .price,
.rh_list_card__wrap .rh_list_card__map_details .rh_list_card__priceLabel .rh_list_card__price .price {
    color: #01b2aa !important;
}

/* 3. Teléfono de la cabecera en móvil: fuera. El teléfono sigue accesible en el
 * pie y en el menú. */
@media (max-width: 767px) {
    .rh_responsive_header_temp .rh_menu__user_phone {
        display: none !important;
    }
}

/* 4. Galería de la ficha.
 * El slider mete la foto en una caja de altura fija, así que las verticales
 * salían cortadas. Con object-fit: cover la foto llena el marco sin deformarse
 * y sin recortes visibles, que es como resuelve Modern sus imágenes de tarjeta.
 * Se quita también el hueco que quedaba entre la galería y el texto. */
#property-detail-flexslider .slides > li > a,
#property-detail-flexslider .slides > li > a > img {
    display: block;
    width: 100%;
}

#property-detail-flexslider .slides > li > a > img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#property-detail-flexslider {
    margin-bottom: 0;
}

#property-detail-flexslider .slides > li {
    overflow: hidden;
}

/* 5. Separador huérfano del footer.
 * El parcial imprime `<div class="rh-footer-bottom-items-separator">|</div>`
 * SIEMPRE, y el bloque "Desarrollado por" solo si tiene texto. Al vaciar ese
 * texto (petición del cliente) el "|" quedaba suelto. Si es el último hijo, se
 * oculta; si vuelve la firma, deja de serlo y reaparece.
 */
.rh_footer__bottom_wrap .rh-footer-bottom-items-separator:last-child {
    display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Selector de idioma en el footer.
 *
 * Se movió desde la cabecera (y desde el menú móvil). Va justo después de las
 * redes sociales, dentro de la franja centrada del footer. Lleva también la
 * clase `inmocasa-lang--modern` para heredar la píldora y el desplegable; aquí
 * solo lo específico de esta posición.
 * ------------------------------------------------------------------------ */
.inmocasa-lang--footer {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 26px auto 0 !important;
}

/* El desplegable abre hacia ARRIBA: en el footer, hacia abajo se sale de la
 * página y no se podría elegir idioma. Además se centra bajo la píldora en vez
 * de alinearse a la derecha, que era lo que hacía en la cabecera. */
.inmocasa-lang--footer .rh_languages_available {
    top: auto;
    bottom: calc(100% + 8px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* El puente invisible (los 8 px de separación) pasa a estar debajo. */
.inmocasa-lang--footer .rh_languages_available::before {
    top: auto;
    bottom: -10px;
}

/* El desplegable en el footer necesita fondo y borde explícitos: el tema pone
 * `border: 0` y `background: transparent` con !important a TODOS los <ul> del
 * selector, y esa regla gana por especificidad (dos clases + elemento). Aquí se
 * repite el selector con el <ul> incluido para superarla. Sobre el footer
 * oscuro, sin fondo blanco los enlaces no se leerían. */
.inmocasa-lang--footer .inspiry-language-switcher ul.rh_languages_available {
    background: #fff !important;
    border: 2px solid #01b2aa !important;
}

/* ---------------------------------------------------------------------------
 * 7. Carrusel de fotos en las tarjetas de propiedad.
 *
 * La galería de cada inmueble se pinta dentro de la tarjeta (list-card del
 * buscador y listados, grid-card-1 de la home). El tema solo enseñaba la foto
 * destacada. Las flechas quedan fuera del <a> a la ficha: un botón dentro de un
 * enlace es HTML inválido.
 * ------------------------------------------------------------------------ */
.inmocasa-slider {
    position: relative;
    display: block;
    overflow: hidden;
}

/* En la tarjeta de listado el contenedor hereda el alto de `post_thumbnail`. */
.inmocasa-slider--list {
    width: 100%;
    height: 100%;
}

/* La tarjeta de la home fija su proporción (946x627, la que ya tenían). Con
 * `object-fit: cover` la foto se recorta para llenar la caja sin deformarse. */
.inmocasa-slider--grid {
    aspect-ratio: 946 / 627;
}

.inmocasa-slider--grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inmocasa-slider__slides {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Todas las diapositivas se superponen: NINGUNA dicta el alto de la tarjeta.
 * Antes la activa era `position: relative`, y una foto vertical de la galería
 * (hay propiedades con 509x768 mezcladas con 1024x678) estiraba la tarjeta de
 * 365 a ~830 px y descuadraba la rejilla. */
.inmocasa-slider__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.inmocasa-slider__slide.is-active {
    opacity: 1;
    z-index: 1;
}

.inmocasa-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inmocasa-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}

.inmocasa-slider__nav--prev { left: 10px; }
.inmocasa-slider__nav--next { right: 10px; }

.inmocasa-slider__nav:hover,
.inmocasa-slider__nav:focus {
    background: #01b2aa;
}

.inmocasa-slider__count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}

/* Con ratón, las flechas aparecen al pasar por la tarjeta. En pantalla táctil
 * no hay hover, así que van siempre visibles. */
@media (hover: hover) and (pointer: fine) {
    .rh_list_card:hover .inmocasa-slider__nav,
    .rh_prop_card:hover .inmocasa-slider__nav,
    .inmocasa-slider__nav:focus {
        opacity: 1;
    }
}

@media (hover: none) {
    .inmocasa-slider__nav {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
 * 8. Artículos de la home: misma proporción en las tres tarjetas.
 *
 * Las imágenes llegan con proporciones distintas (680x453 y 680x510) y el tema
 * no fija el alto de `.rh-wrapper-post-media`, así que cada tarjeta medía lo
 * que midiera su foto. Caja fija + `object-fit: cover`: se recorta, no se
 * deforma.
 * ------------------------------------------------------------------------ */
.rh_section__news .rh-wrapper-post-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.rh_section__news .rh-wrapper-post-media figure,
.rh_section__news .rh-wrapper-post-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.rh_section__news .rh-wrapper-post-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 9. Tarjetas con carrusel: sin "Ver propiedad" al pasar el ratón.
 *
 * El tema anima ese botón subiéndolo del 80% al 50%; como las flechas están
 * encima de la foto, al pulsarlas se disparaba ese :hover y el botón saltaba.
 * Se quita solo en las tarjetas con carrusel: las de una sola foto lo
 * conservan, y el enlace a la ficha sigue en la foto y en el título.
 * ------------------------------------------------------------------------ */
.rh_figure_property_one:has(.inmocasa-slider) .rh_overlay__contents,
.rh_figure_property_list_one:has(.inmocasa-slider) .rh_overlay__contents {
    display: none !important;
}

/* Arrastrar la foto debe mover el carrusel, no arrastrar la imagen. */
.inmocasa-slider {
    touch-action: pan-y;
}

.inmocasa-slider img {
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------------------------------------------------------------------------
 * 10. Galería de la ficha: todas las fotos en la misma caja.
 *
 * El slider apila las diapositivas (modo fade) y el contenedor tomaba el alto de
 * la más alta: las panorámicas (830x323) medían 238 px y el resto 388, así que al
 * mostrar una panorámica quedaba un hueco de ~150 px hasta el bloque del título.
 * El CSS del tema prevé una caja fija, pero la escribe para `.flex-viewport`, un
 * contenedor que este slider no genera, así que nunca se aplicaba.
 * ------------------------------------------------------------------------ */
/* La clase `inspiry_property_portrait_slider` la llevan las DOS variantes del
 * slider de la ficha: la de siempre (#property-detail-flexslider) y la de
 * miniaturas (#property-detail-slider-two). Se apunta a la clase para que el
 * arreglo valga en ambas. */
.inspiry_property_portrait_slider .slides li a {
    display: block;
    width: 100%;
    padding: 0 !important;   /* el tema pone padding-top: 45,6 % en la de miniaturas */
    overflow: hidden;
}

.inspiry_property_portrait_slider .slides li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* llena y recorta, no deforma */
}

/* Cada variante conserva la proporción que eligió el tema para ella. */
#property-detail-flexslider .slides li a {
    aspect-ratio: 1.72;      /* 58,1 % */
}

#property-detail-slider-two .slides li a {
    aspect-ratio: 2.19;      /* 45,6 % */
}

/* ---------------------------------------------------------------------------
 * 11. Galería "con miniaturas dos" (variante img-pagination).
 *
 * Es una tercera variante, con otro contenedor (`property-detail-slider-three`)
 * y sin la clase `inspiry_property_portrait_slider`, así que el arreglo de las
 * otras dos no la alcanzaba. El tema solo pone `img { width: 100% }`: sin alto
 * ni recorte, cada foto manda con su altura natural. Una vertical de 509x768 a
 * 1425 px de ancho ocupa ~2.150 px y empuja toda la página hacia abajo.
 *
 * Proporción 1,72: es la que usa la demo oficial de RealHomes y el 58,1 % que el
 * propio tema aplica a los sliders de la ficha. Con 2,19 (el 45,6 % de la
 * variante de miniaturas) se recortaba un 31 % de la altura de cada foto; con
 * 1,72 el recorte baja al 12 % y, si la imagen llega a 1240x720 (su relación
 * exacta), no se recorta nada.
 * ------------------------------------------------------------------------ */
.property-detail-slider-three a {
    display: block;
    width: 100%;
    aspect-ratio: 1.72;
    overflow: hidden;
}

.property-detail-slider-three a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 12. Estado "Vendido" / "Alquilado": destacado.
 *
 * Son los dos estados que indican que el inmueble ya no está disponible. El
 * estado se pinta en la tarjeta (listado y home) y en la ficha, siempre en el
 * mismo hueco; aquí pasa a ser una píldora con el naranja corporativo. "En venta"
 * y "En alquiler" se quedan como estaban, en su gris neutro.
 * ------------------------------------------------------------------------ */
/* El color se repite con las mismas cadenas que usa el tema para el precio: en
 * la tarjeta de listado el estado está forzado a verde corporativo con
 * !important y más especificidad, así que una regla suelta perdía y la píldora
 * salía con el texto en verde en vez de blanco. */
.inmocasa-estado--no-disponible,
.rh_list_card__priceLabel .rh_list_card__price .inmocasa-estado--no-disponible,
.rh_prop_card .rh_prop_card__details .rh_prop_card__priceLabel .inmocasa-estado--no-disponible,
.rh_prop_card__priceLabel .inmocasa-estado--no-disponible,
.inmocasa-propiedad-no-disponible .rh_page__property_price .status {
    display: inline-block !important;
    padding: 4px 12px;
    border-radius: 30px;
    background: #dc4b1e;
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
    margin-bottom: .6rem !important;
}

/* En la ficha la píldora va un poco más grande, que se lee de un vistazo. */
.inmocasa-propiedad-no-disponible .rh_page__property_price .status {
    padding: 6px 16px;
    font-size: 1.3rem !important;
}

/* ---------------------------------------------------------------------------
 * 13. Sección de contenido de la home (feed de Instagram).
 *
 * La sección "contenido" de la plantilla mete el cuerpo de la página en un
 * contenedor con ancho de lectura, pensado para texto. Una rejilla de fotos
 * necesita el ancho del resto de secciones, así que se iguala.
 * ------------------------------------------------------------------------ */
.rh_section__content .rh_content {
    max-width: none !important;
    width: 100%;
}

/* Mientras no haya feed conectado, Smash Balloon pinta un aviso que solo ven los
 * administradores. En la home sobra: se oculta. */
#sbi_mod_error {
    display: none;
}

/* Mientras no haya feed, la sección quedaría como una banda vacía con su
 * padding. Se oculta solo en ese caso: en cuanto haya feed, el aviso desaparece
 * y la sección se muestra sola. */
.rh_section__content:has(#sbi_mod_error) {
    display: none;
}

/* ------------------------------------------------------------------------
 * Ficha de propiedad: «Propiedades similares» en móvil, una tarjeta por fila.
 *
 * El tema no lo consigue: su regla responsive (100 % por debajo de 767 px)
 * pierde contra `.rh_property__similar_properties .rh_prop_card--listing`
 * {width:50%}, que va sin media query y aparece después en main.min.css.
 * Misma especificidad, pero el child carga después: aquí sí gana.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    .similar-properties-content-wrapper .rh_prop_card--listing,
    .rh_property__similar_properties .rh_prop_card--listing {
        width: 100%;
    }
}