/* ===========================================================
   PARADISA — retoques propios (cargado al final, sobrescribe)
   =========================================================== */

/* --- Flechas del slider principal de las propiedades: más visibles ---
   Antes: chevron oscuro sin fondo (se perdía sobre las fotos).
   Ahora: botón circular oscuro semi-transparente con flecha blanca,
   visible sobre cualquier imagen. */
.elementor-swiper-button {
  width: 46px;
  height: 46px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(43, 39, 36, 0.45);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.elementor-swiper-button:hover {
  background: rgba(43, 39, 36, 0.78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.elementor-swiper-button i,
.elementor-swiper-button svg,
.elementor-swiper-button .eicon-chevron-left,
.elementor-swiper-button .eicon-chevron-right {
  color: #ffffff !important;
  fill: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* --- Galería "See All Photos" (popup): flechas de la imagen grande ---
   Antes: chevron tenue casi invisible sobre la foto.
   Ahora: mismo botón circular oscuro con flecha blanca. */
.eae-swiper-button.eae-slider-nav-button {
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(43, 39, 36, 0.5) !important;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.eae-swiper-button.eae-slider-nav-button:hover {
  background: rgba(43, 39, 36, 0.82) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.eae-swiper-button.eae-slider-nav-button i {
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* --- Flechas de las miniaturas: fuera ---
   El visor tenia DOS pares de flechas casi encima: las grandes de 52px
   (.eae-slider-nav-button, las que mueven la foto principal) y estas otras
   de 34px, que solo pasan pagina en la tira de miniaturas. Se solapaban y
   confundian. Se quitan: las miniaturas se siguen pudiendo arrastrar y
   pulsar, y la navegacion de verdad la llevan las grandes. */
.eae-thumb-button.eae-swiper-button {
  display: none !important;
}

/* --- Galería "See All Photos" (popup 256): la "tachita" de cerrar ---
   Antes: 16x16 px y el SVG pintado con var(--e-global-color-f7cd19b) = #F8F6F4,
   el MISMO color que el fondo del panel del popup → casi invisible.
   Ahora: botón circular oscuro de 40px con la X blanca, mismo criterio que
   las flechas del slider. */
#elementor-popup-modal-256 .dialog-close-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(43, 39, 36, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
#elementor-popup-modal-256 .dialog-close-button:hover {
  background: #2b2724;
  transform: scale(1.08);
}
#elementor-popup-modal-256 .dialog-close-button svg,
#elementor-popup-modal-256 .dialog-close-button i,
#elementor-popup-modal-256 .dialog-close-button:hover svg,
#elementor-popup-modal-256 .dialog-close-button:hover i {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* --- Galeria "See All Photos" (popup 256): el visor entero ---
   Antes: el panel era 75vw y la foto un calc(97vh - 215px). En una ventana
   de 1450x802 la foto salia 1044x563: sobraban 362px de ancho de ventana sin
   usar y, como el fondo va en "cover" y la caja no era 16:9, encima recortaba
   un 4% por arriba y por abajo. En movil era peor: el popup no tenia ajuste
   propio, heredaba el mismo 75vw (293px en una pantalla de 390) y la caja
   salia vertical, 249x604, o sea que de un render 16:9 solo se veia la franja
   central, un 37% de la foto.

   Ahora TODAS las cajas -- la foto grande y cada miniatura -- son 16:9
   exacto, la proporcion de los renders, asi que no se recorta nada en ningun
   sitio. La foto crece hasta topar con la ventana, por alto o por ancho, lo
   que llegue antes.

   El calculo del alto. Debajo de la foto va la tira de miniaturas, y su alto
   depende de lo ancha que sea la foto: con N miniaturas por fila, cada una
   mide (ancho/N) y, siendo 16:9, su alto es 0.5625 * ancho/N. Como el ancho
   de la foto es 16/9 de su alto, sale que la tira mide aproximadamente
   alto_foto / N. O sea que el hueco disponible se reparte asi:

       alto_foto * (1 + 1/N) + 20px = 97vh        20 = 6 de marco arriba
                                                     + 6 abajo + 8 de hueco

   de donde alto_foto = (97vh - 20px) / (1 + 1/N). Por eso hay tres bloques,
   uno por breakpoint, que es donde cambia N: 9 miniaturas en escritorio,
   7 en tablet y 5 en movil (definido en el data-swiper-settings del widget,
   en el HTML de las fichas -- si se cambia alli, hay que cambiar el divisor
   de aqui).

   Resultado en 1450x802: la foto pasa de 1044x563 a 1213x682 (+40% de
   superficie) y las miniaturas de 300x66 recortadas a 126x71 completas.
   En un movil de 390: de 249x604 recortadisima a 355x199 entera. */

/* comun a todos los tamanos: marco beige de 6px y miniaturas en 16:9 */
#elementor-popup-modal-256 .dialog-message {
  height: auto !important;
}
.elementor-256 .elementor-element.elementor-element-91f9f69 {
  padding: 0 !important;
}
.elementor-256 .elementor-element.elementor-element-4592c48 {
  padding: 6px !important;
}
.elementor-256 .elementor-element.elementor-element-4592c48 .eae-swiper-slide {
  /* el widget le pone min-height:300px; en ventanas bajas (un movil en
     horizontal, p.ej. 844x390) ese minimo mandaba y desajustaba el 16:9 */
  min-height: 0 !important;
}
.elementor-256 .elementor-element.elementor-element-4592c48 .eae-thumb-slide .eae-fit-aspect-ratio {
  /* venia al 44% del ancho: de un render 16:9 solo se veia una franja
     horizontal del centro. Al 56.25% (9/16) entra el cuadro completo. */
  padding-bottom: 56.25% !important;
}
.elementor-256 .elementor-element.elementor-element-4592c48 .eae-thumb-container {
  margin-top: 8px !important;
}

/* escritorio: 9 miniaturas por fila -> divisor 1 + 1/9 */
@media (min-width: 1025px) {
  #elementor-popup-modal-256 .dialog-message {
    width: min(94vw, calc((97vh - 20px) / 1.1111 * 16 / 9 + 12px)) !important;
  }
  .elementor-256 .elementor-element.elementor-element-4592c48 .eae-swiper-slide {
    height: min(calc((97vh - 20px) / 1.1111), calc((94vw - 12px) * 9 / 16)) !important;
  }
}

/* tablet: 7 por fila */
@media (min-width: 768px) and (max-width: 1024px) {
  #elementor-popup-modal-256 .dialog-message {
    width: min(94vw, calc((97vh - 20px) / 1.1429 * 16 / 9 + 12px)) !important;
  }
  .elementor-256 .elementor-element.elementor-element-4592c48 .eae-swiper-slide {
    height: min(calc((97vh - 20px) / 1.1429), calc((94vw - 12px) * 9 / 16)) !important;
  }
}

/* movil: 5 por fila */
@media (max-width: 767px) {
  #elementor-popup-modal-256 .dialog-message {
    width: min(94vw, calc((97vh - 20px) / 1.2 * 16 / 9 + 12px)) !important;
  }
  .elementor-256 .elementor-element.elementor-element-4592c48 .eae-swiper-slide {
    height: min(calc((97vh - 20px) / 1.2), calc((94vw - 12px) * 9 / 16)) !important;
  }
}

/* --- 1505 Redd: solo tiene 2 fotos ---
   Con 9 huecos por fila y 2 fotos, la tira se quedaba a medias y sobraba
   beige a la derecha. En esa ficha se esconde la tira (con dos fotos las
   flechas bastan) y la foto se queda con todo el alto. El :has() es para
   poder ensanchar el panel, que es un antepasado del widget marcado; va
   dentro de @supports para que, donde no exista, se quede en el reparto
   normal en vez de descuadrar el 16:9. */
@supports selector(:has(*)) {
  #elementor-popup-modal-256 .dialog-message:has(.pdsa-pocas-fotos) {
    width: min(94vw, calc((97vh - 12px) * 16 / 9 + 12px)) !important;
  }
  .elementor-256 .elementor-element.elementor-element-4592c48.pdsa-pocas-fotos .eae-swiper-slide {
    height: min(calc(97vh - 12px), calc((94vw - 12px) * 9 / 16)) !important;
  }
  .elementor-256 .elementor-element.elementor-element-4592c48.pdsa-pocas-fotos .eae-thumb-container {
    display: none !important;
  }
}

/* Los botones del visor, a escala de movil: con la foto en 199px de alto,
   las flechas de 52px y la X de 40px se comian media imagen. 40 y 34 siguen
   siendo blanco de dedo comodo (el minimo recomendado son 40px de zona). */
@media (max-width: 767px) {
  .eae-swiper-button.eae-slider-nav-button {
    width: 40px !important;
    height: 40px !important;
  }
  .eae-swiper-button.eae-slider-nav-button i {
    font-size: 17px !important;
  }
  #elementor-popup-modal-256 .dialog-close-button {
    width: 34px;
    height: 34px;
  }
  #elementor-popup-modal-256 .dialog-close-button svg,
  #elementor-popup-modal-256 .dialog-close-button i,
  #elementor-popup-modal-256 .dialog-close-button:hover svg,
  #elementor-popup-modal-256 .dialog-close-button:hover i {
    width: 15px;
    height: 15px;
    font-size: 15px;
  }
}

/* --- Hero de las fichas de casa: mas cielo, menos entrada de cocheras ---
   Las fotos son 16:9 (2560x1440) y el hero es 2:1, asi que "cover" recorta
   un 11% de alto. Con el 'center center' de origen ese 11% se repartia mitad
   arriba (cielo, y a veces el tejado) y mitad abajo.
   Con 50% 0% el recorte se va entero a la parte baja: la casa se ve completa
   con cielo encima, y se pierde la explanada de la entrada.
   No toca ningun archivo de imagen: es solo encuadre. */
.elementor-154 .elementor-element.elementor-element-d074abe:not(.elementor-motion-effects-element-type-background),
.elementor-154 .elementor-element.elementor-element-d074abe > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-position: 50% 0%;
}

/* El hero venia medido en 80vh, asi que el recorte dependia del ALTO de la
   ventana: en una pantalla apaisada (1850x930) llegaba a comerse el 29% de
   la foto y la casa se perdia. Fijando la proporcion, el encuadre es el
   mismo en cualquier pantalla: 11% de recorte, casa completa con jardin.
   Solo de tablet hacia arriba; en movil un 2:1 seria una franja de 195px. */
@media (min-width: 768px) {
  .elementor-154 .elementor-element.elementor-element-d074abe {
    --min-height: 0px;
    min-height: 0;
    aspect-ratio: 2 / 1;
  }
}

/* --- 1904 Sharon: el hero, sin recortar ---
   La foto de esta casa no tiene practicamente cielo: el tejado esta casi
   pegado al borde de arriba del encuadre original. Con el hero en 2:1 (o en
   los 40vh del movil, que salen aun mas estrechos) el recorte apretaba mas
   todavia y la casa quedaba comida por el borde.
   Poniendo la caja en 16:9 -- la proporcion de la propia foto -- no se
   recorta nada: se ve el encuadre entero del fotografo, con su cielo y su
   jardin, y la casa queda centrada.
   Solo esta ficha; el resto sigue en 2:1. Si gusta, es cambiar el selector. */
.elementor-154 .elementor-element.elementor-element-d074abe.pdsa-hero-completo {
  --min-height: 0px !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background-position: 50% 50%;
}

/* --- Carrusel "Similar Homes": el nombre de la casa salia cortado ---
   El contenedor del carrusel tiene overflow:hidden y su contenido sobresalia
   unos 5px por abajo. Pasa en todos los anchos, no solo en movil. Un
   min-height fijo no sirve porque la tarjeta crece con el ancho; ajustar el
   interlineado del titulo escala solo, porque va con la fuente. */
.elementor-154 .elementor-element-b0ef5d9,
.elementor-154 .elementor-element-b0ef5d9 p {
  line-height: 1 !important;
  margin-bottom: 0 !important;
}
/* --- Ficha de casa en movil: el badge y el precio se montaban sobre el nombre ---
   El bloque a0370d9 (estado + precio) va en position:absolute sobre el titulo.
   En escritorio cabe; por debajo de 768px el titulo crece (font-size:10vw) y
   se solapaban hasta 99px. Aqui se saca del posicionamiento absoluto para que
   fluya debajo del nombre, y se pone el contenedor en 'column' (venia en
   column-reverse, que dejaria el precio encima del nombre). */
@media (max-width: 767px) {
  .elementor-154 .elementor-element.elementor-element-5eebd9e {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  /* post-154.css lo fija con !important (position:absolute, right, width:fit-content),
     asi que hay que anularlo con la misma fuerza */
  .elementor-154 .elementor-element.elementor-element-a0370d9 {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: flex-start;
    margin: 0 !important;
    text-align: left;
  }
  .elementor-154 .elementor-element.elementor-element-39e067b {
    width: 100%;
    max-width: 100%;
    --container-widget-width: 100%;
  }

  /* --- El nombre de la casa iba pegado al borde de la foto ---
     7c11e3f (todo lo que va debajo del hero) trae padding 5% a los lados y
     abajo, pero 0 arriba, asi que el titulo arrancaba justo donde acaba la
     imagen. En escritorio si tiene los cuatro lados. Se le pone arriba el
     mismo 5%, en % para que escale igual que los laterales. Con tope de 26px
     porque a 767px el 5% son 38px, mas de los 29px que usa el escritorio. */
  .elementor-154 .elementor-element.elementor-element-7c11e3f {
    padding-top: min(5%, 26px);
  }

  /* --- Hueco vacio entre el mapa y Highlights ---
     8955e13 reservaba min-height:450px porque su unico hijo (72cb9f0, el panel
     de botones + el mapa) va en position:absolute: al estar fuera de flujo, el
     contenedor colapsaria a 0 sin esa altura. Pero el contenido mide 368px, asi
     que sobraban 82px de vacio. Se saca el hijo del absoluto y el contenedor se
     ajusta solo. (Quitar el min-height a secas hace desaparecer el mapa.) */
  .elementor-154 .elementor-element.elementor-element-72cb9f0 {
    position: static !important;
  }
  .elementor-154 .elementor-element.elementor-element-8955e13 {
    min-height: 0 !important;
    height: auto !important;
    /* 7c11e3f es flex-row con gap 0: al envolver, el mapa quedaba pegado
       al boton de arriba sin ninguna separacion */
    margin-top: 28px !important;
  }

  /* ==========================================================
     FICHA DE CASA EN MOVIL: cabecera compacta
     Orden buscado:  estado / nombre / precio / medidas / barrio
     El HTML va nombre -> (estado + precio) -> medidas -> barrio, con el
     estado y el precio metidos juntos dentro de a0370d9. Para poder
     intercalarlos se le pone 'display: contents' a a0370d9: desaparece
     como caja y sus dos hijos pasan a ser hijos directos de 5eebd9e,
     con lo que ya se pueden ordenar de uno en uno con 'order'.
     ========================================================== */
  .elementor-154 .elementor-element.elementor-element-a0370d9 {
    display: contents !important;
  }
  .elementor-154 .elementor-element.elementor-element-pdsa_inner_badge { order: 1; }
  .elementor-154 .elementor-element.elementor-element-39e067b        { order: 2; }
  .elementor-154 .elementor-element.elementor-element-pdsa_price_01  { order: 3; }
  /* los dos venian con align-self:center heredado del diseno de escritorio;
     como ahora son hijos directos de la columna, saldrian centrados */
  .elementor-154 .elementor-element.elementor-element-pdsa_inner_badge,
  .elementor-154 .elementor-element.elementor-element-pdsa_price_01 {
    align-self: flex-start !important;
    --align-self: flex-start;
  }

  /* respiracion corta y pareja entre las cinco lineas */
  .elementor-154 .elementor-element.elementor-element-5eebd9e,
  .elementor-154 .elementor-element.elementor-element-c935f81 {
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .elementor-154 .elementor-element.elementor-element-753c86c {
    gap: 16px !important;
  }

  /* el badge deja de ser un bloque grande y pasa a etiqueta discreta */
  .elementor-154 .elementor-element.elementor-element-pdsa_inner_badge {
    width: auto !important;
    max-width: none !important;
    /* traia min-height de escritorio: 55px de alto para 15px de texto */
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 13px !important;
    border-radius: 4px;
    margin-bottom: 2px;
  }
  /* --- Tamanos: la escala propia del sitio, sin topes ---
     Cuando arregle el solape los baje a clamp() con maximos (32/24/16/13px)
     y la cabecera quedaba pequena al lado del resto de la pagina, que va en
     vw sin tope. Ya no hace falta encogerlos: el solape lo resuelve el
     apilado, no el tamano. Se vuelve a la escala original de la ficha
     -- nombre 10vw, precio 8.5vw, badge y datos 4.4vw -- y solo se conserva
     el interlineado ajustado para que el bloque siga compacto. */
  .elementor-154 .elementor-element.elementor-element-38994d6 {
    font-size: 4.4vw;
    line-height: 1.25;
    text-align: left;
  }
  /* El original era 10vw / 8.5vw (39 y 33px a 390) y quedaba demasiado
     grande apilado. Se deja a medio camino: bastante mas que los 32/24px
     que tenia antes, pero sin comerse la pantalla. */
  .elementor-154 .elementor-element.elementor-element-39e067b {
    font-size: 8.6vw !important;
    line-height: 1.1 !important;
  }
  .elementor-154 .elementor-element.elementor-element-pdsa_price_01 {
    font-size: 6.8vw !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .elementor-154 .elementor-element.elementor-element-8c49f78,
  .elementor-154 .elementor-element.elementor-element-c1b2a7f {
    font-size: 4.4vw;
    line-height: 1.35;
  }

  /* --- Los dos botones, uno debajo del otro y a todo el ancho ---
     f8b5ff8 ya trae un "See All Photos" justo debajo de "Request Private
     Tour", pero el plugin de visibilidad lo deja en display:none. Se
     recupera ahi, que es donde toca, y a cambio se quita el panel beige
     fe61ebe de dentro del mapa, que repetia LOS DOS botones otra vez. */
  .elementor-154 .elementor-element.elementor-element-72c9338 {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .elementor-154 .elementor-element.elementor-element-42e3c59,
  .elementor-154 .elementor-element.elementor-element-f8b5ff8 {
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-154 .elementor-element.elementor-element-f8b5ff8,
  .elementor-154 .elementor-element.elementor-element-1288126 {
    display: block !important;
  }
  .elementor-154 .elementor-element.elementor-element-1288126 .elementor-button {
    display: block;
    width: 100%;
    /* 11px en vez de 12 para compensar el borde y quedar a la misma altura
       exacta que el boton oscuro de arriba */
    padding: 11px 24px;
    background: transparent;
    border: 1px solid rgba(89, 82, 76, 0.35);
    color: #59524c;
  }
  .elementor-154 .elementor-element.elementor-element-fe61ebe {
    display: none !important;
  }

  /* --- Zona del mapa ---
     72cb9f0 es una tarjeta "de cristal" (blanco al 20% + borde blanco al 30%
     + blur) pensada para ir sobre una foto. En movil cae sobre el fondo beige
     claro, asi que solo se ve un rectangulo fantasma mal alineado y ademas
     mete 17px de sangria que descuadran el rotulo respecto al resto. Se quita
     el cristal y el mapa pasa a ocupar el ancho completo, como los botones. */
  .elementor-154 .elementor-element.elementor-element-72cb9f0 {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* el rotulo va sobre el widget del mapa, no sobre el contenedor: Elementor
     ya usa ::before en los .e-con para la capa de fondo y pisa el content.
     Tipografia igual que "Highlights", que es el titulo hermano de al lado:
     antes salia en Inter y desentonaba con toda la pagina. */
  .elementor-154 .elementor-element.elementor-element-c3c0066::before {
    content: "Location" !important;
    display: block !important;
    width: 100%;
    margin-bottom: 12px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 5.8vw, 24px);
    font-weight: 400;
    line-height: 1.2;
    color: #494545;
  }
  /* df2cfc2 lleva box-shadow 0 0 10px, y como envuelve rotulo + mapa dibujaba
     un halo rectangular alrededor de los dos: eso era la "tarjeta fantasma".
     La sombra se pasa al mapa solo, que es lo que si debe parecer una tarjeta. */
  .elementor-154 .elementor-element.elementor-element-df2cfc2 {
    box-shadow: none !important;
  }
  /* El mapa como tarjeta: sombra suave propia en vez del halo que envolvia
     tambien al rotulo.
     Nota: NO se le ponen esquinas redondeadas. Un iframe se pinta en su
     propia capa y ni 'overflow:hidden' ni 'border-radius' en el padre lo
     recortan; 'clip-path' si recorta, pero deja el mapa en blanco. */
  .elementor-154 .elementor-element.elementor-element-c3c0066 > div {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }
  .elementor-154 .elementor-element.elementor-element-c3c0066 iframe {
    display: block;
  }
}

/* --- Timeline de Custom Homes: que el TEXTO no toque el borde del card ---
   (solo los widgets de texto; la imagen es fondo de contenedor y no se toca) */
.e-n-accordion-item .elementor-widget-text-editor {
  padding-right: 18px !important;
  box-sizing: border-box;
}

/* --- Modal "Contact Us" (popup 3667): la imagen de fondo se repetía/cortaba ---
   antes: background-size: 120% auto (se repetía en vertical).
   ahora: cover, centrada, sin repetir → imagen expandida que cubre todo. */
.elementor-element-d0a522a,
.elementor-3667 .elementor-element.elementor-element-d0a522a {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ===========================================================
   MENU A PANTALLA COMPLETA EN MOVIL Y TABLET
   Antes: por debajo de 768px salia un desplegable marron de 326px de alto
   colgando del header, y entre 768 y 1024 se mostraba el menu horizontal
   apretado. Ahora en todo ese rango hay burger y, al pulsarlo, un panel
   que ocupa la pantalla entera.

   Como se engancha sin tocar el HTML: Elementor pone aria-expanded="true"
   en el boton al abrir, y el <nav> del desplegable es su hermano inmediato.
   El selector solo aplica cuando esta abierto, asi que cuando se cierra
   vuelve a mandar el display:none de Elementor y no queda pillado abierto.
   =========================================================== */
@media (max-width: 1024px) {
  /* Con el menu abierto se bloquea el scroll de la pagina. El panel es fijo,
     pero el boton de cerrar vive en la cabecera, que si scrollea: al bajar,
     la X se iba de pantalla y no habia forma de cerrar. La clase la pone
     paradisa-forms.js al pulsar el burger. */
  html.pdsa-menu-abierto,
  html.pdsa-menu-abierto body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* burger tambien en tablet (el widget traia elementor-hidden-tablet) */
  .elementor-element.elementor-element-075eb81.elementor-hidden-tablet {
    display: block !important;
  }
  /* y fuera el menu horizontal en ese rango */
  .elementor-element.elementor-element-8b2df3d {
    display: none !important;
  }

  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    /* degradado muy sutil en vez de un plano liso: da profundidad sin
       llamar la atencion */
    background: linear-gradient(180deg, #322D29 0%, #2B2724 45%, #241F1C 100%) !important;
    z-index: 9990;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    padding: 18px 8vw 34px;
    box-sizing: border-box;
  }
  /* --- Logotipo arriba, a la altura de la X --- */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown::before {
    content: "";
    flex: none;
    display: block;
    width: 148px;
    height: 21px;   /* el wordmark es 7.25:1 */
    margin: 0 auto;
    background: url("/wp-content/uploads/2026/02/paradisa-wordmark-blanco.png") center / contain no-repeat;
    opacity: .92;
    animation: pdsaMenuEntra .55s cubic-bezier(.22,.61,.36,1) both;
  }
  /* --- Telefono y correo abajo --- */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown::after {
    content: "(512) 910 \2013  4505\A INFO@PARADISAHOMES.COM";
    flex: none;
    white-space: pre-line;
    text-align: center;
    font-family: "Inter", Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 2.2px;
    line-height: 2.1;
    color: rgba(248, 246, 244, .45);
    animation: pdsaMenuEntra .55s cubic-bezier(.22,.61,.36,1) .42s both;
  }
  /* el boton y el panel son hermanos dentro del mismo widget: basta con
     apilar el boton por encima para que se pueda cerrar */
  .elementor-menu-toggle {
    position: relative;
    z-index: 9995;
  }
  /* El boton tiene fondo claro en el header. Sobre el panel oscuro hay que
     quitarselo, o la X blanca cae sobre blanco y no se ve nada.
     Y sobre todo: mientras esta abierto pasa a position:fixed. El panel es
     fijo, pero el boton vivia en la cabecera, que si forma parte del flujo:
     al hacer scroll la X se iba de pantalla y te quedabas sin cerrar. Fijo
     y a 8vw queda ademas alineado con la columna del menu. */
  .elementor-menu-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 12px;
    left: 8vw;
    width: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .elementor-menu-toggle[aria-expanded="true"] i,
  .elementor-menu-toggle[aria-expanded="true"] svg,
  .elementor-menu-toggle[aria-expanded="true"] .eicon-close {
    color: #F8F6F4 !important;
    fill: #F8F6F4 !important;
    font-size: 26px !important;
    width: 26px;
    height: 26px;
  }

  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown ul.elementor-nav-menu {
    width: 100%;
    /* para la numeracion 01, 02, 03... */
    counter-reset: pdsa-menu;
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li {
    counter-increment: pdsa-menu;
    /* filete finisimo entre entradas: da estructura sin cargar */
    border-bottom: 1px solid rgba(248, 246, 244, .11);
    animation: pdsaMenuEntra .5s cubic-bezier(.22,.61,.36,1) both;
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:first-child {
    border-top: 1px solid rgba(248, 246, 244, .11);
  }
  /* la entrada escalonada es lo que hace que se sienta cuidado */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:nth-child(1) { animation-delay: .08s; }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:nth-child(2) { animation-delay: .14s; }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:nth-child(3) { animation-delay: .20s; }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:nth-child(4) { animation-delay: .26s; }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:nth-child(5) { animation-delay: .32s; }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown li:nth-child(6) { animation-delay: .38s; }

  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item {
    /* Elementor fija el tipo de estos enlaces con un selector muy especifico
       (incluye el id del widget), de ahi los !important */
    display: flex !important;
    /* Elementor trae justify-content:center en estos enlaces; sin anularlo
       el numero y el texto salen centrados y no se alinean en columna */
    justify-content: flex-start !important;
    align-items: baseline;
    gap: 20px;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    /* antes 8vw: los renglones casi se tocaban y llenaban la pantalla.
       Con tope, porque a 767px un 6.6vw serian 50px y el menu volvia a
       ocupar toda la altura. */
    font-size: min(6.6vw, 30px) !important;
    line-height: 1.25 !important;
    letter-spacing: .4px;
    padding: min(3.4vw, 18px) 2px !important;
    color: #F8F6F4 !important;
    text-align: left;
    border: 0 !important;
    background: none !important;
    transition: color .25s ease, padding-left .25s ease;
  }
  /* numero de orden, en el tono arena de la marca */
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item::before {
    content: counter(pdsa-menu, decimal-leading-zero);
    /* Elementor ya usa este ::before para su efecto de subrayado y lo deja
       en position:absolute con opacity:0; sin anular las dos, el numero
       existe en el DOM pero no se ve ni ocupa sitio */
    position: static !important;
    opacity: 1 !important;
    flex: none;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-family: "Inter", Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: #9C8A79;
    transform: translateY(-.35em);
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item:focus-visible,
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: #C9B79C !important;
    padding-left: 8px !important;
  }
}

@keyframes pdsaMenuEntra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* en tablet el mismo panel, con el tipo mas contenido */
@media (min-width: 768px) and (max-width: 1024px) {
  /* El widget lleva la clase 'elementor-nav-menu--dropdown-mobile': por
     encima de 767px Elementor esconde el boton y saca en su lugar el menu
     horizontal interno. Se invierte para que el burger siga mandando. */
  .elementor-element.elementor-element-075eb81 .elementor-menu-toggle {
    display: flex !important;
  }
  .elementor-element.elementor-element-075eb81 .elementor-nav-menu--main {
    display: none !important;
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown {
    padding-left: 14vw;
    padding-right: 14vw;
    /* en tablet el header es mas alto y el boton de cerrar cae a y~83;
       se baja el logo para que queden en la misma linea */
    padding-top: 66px;
  }
  .elementor-menu-toggle[aria-expanded="true"] {
    top: 62px;
    left: 14vw;   /* misma columna que el menu en tablet */
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown::before {
    width: 190px;
    height: 27px;
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item {
    font-size: 3.8vw !important;
    padding: 1.9vw 2px !important;
    gap: 26px;
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown .elementor-item::before {
    font-size: 11px;
  }
}

/* --- Posts del blog: aire a los lados del texto ---
   5d4a27dc es el contenedor del cuerpo del articulo (solo el texto: el hero
   y la cabecera van fuera). Traia 'padding: 0 10px', asi que en un movil de
   390px las lineas empezaban a 10px del borde y se leia apretado. Tambien
   afecta al indice "Behind the Build" y a las cajas destacadas, que cuelgan
   del mismo contenedor.
   Se sube a 5.5% con tope de 28px; en escritorio no cambia nada porque ahi
   el texto ya va centrado en una columna de 820px. */
/* --- Featured Homes de la portada: la etiqueta de estado, como pastilla ---
   En los listados el estado es un boton con fondo; aqui eran tres widgets de
   texto plano y quedaban como una linea suelta bajo el nombre. Se les da el
   mismo aspecto que en /available-homes/ y /past-homes/, con el color que
   corresponde a cada estado. Aplica en escritorio y en movil.
   Ojo: van por id de widget, asi que si cambias que casa ocupa cada tarjeta
   hay que revisar que el color siga correspondiendo al estado. */
.elementor-element-852a333 p,
.elementor-element-0433967 p,
.elementor-element-d191e14 p {
  display: inline-block;
  margin: 8px 0 0;
  padding: .7em 1.1em;
  border-radius: 3px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
}
.elementor-element-0433967 p {          /* Available Now (antes Coming Soon) */
  background: #9C8A79;                  /* el mismo marron que usa el boton
                                           199ec69 de Available Now en el listado */
  color: #FFFFFF;
}
.elementor-element-d191e14 p {          /* Past Projects */
  background: #9C8A79;
  color: #FFFFFF;
}
.elementor-element-852a333 p {          /* Under Contract: contorno, sin relleno */
  background: transparent;
  color: var(--e-global-color-secondary, #2B2724);
  border: 2px solid var(--e-global-color-secondary, #2B2724);
}

/* --- Formulario del final de la portada: los dos rotulos, en movil ---
   "Want to build on your property?" y "Request a free consultation..." caen
   a 3.3vw en movil, o sea 12.87px a 390: mas pequenos incluso que los campos
   del formulario (14px). Y ademas quedan los dos del mismo tamano, con lo que
   se pierde la jerarquia que si hay en escritorio (50.4px y 36px).
   Se les da la escala de movil del sitio -- titulo 6vw, subtitulo 4.4vw --
   con tope para que a 767px no se disparen. */
@media (max-width: 767px) {
  .elementor-element-88677ec p {
    font-size: min(7.2vw, 34px) !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;   /* traia 14.4px */
  }
  .elementor-element-5b71133 p {
    font-size: min(5.2vw, 24px) !important;
    line-height: 1.35 !important;
  }
  /* los dos rotulos van pegados: el contenedor tenia 20px de gap y, sumado
     al margen del <p>, dejaba 34px entre una linea y otra */
  .elementor-element-9191175 {
    gap: 0 !important;
  }
  /* y la seccion arranca con algo de aire: traia 11.7px arriba */
  .elementor-element-848992c {
    padding-top: 44px !important;
  }

  /* Spec Homes: su columna solo tenia padding abajo (0 0 18.3px), asi que el
     titulo salia pegado al borde del bloque. Custom Homes e Investor Builds
     no lo necesitan porque llevan el filete divisor encima. */
  .elementor-element-6e00e81 {
    padding-top: 26px !important;
  }
}

/* --- Featured Homes en movil: separar una tarjeta de la siguiente ---
   La rejilla c345aeb tiene gap 20px, pero la etiqueta de estado sobresale
   ~15px de su tarjeta, asi que entre el badge de una casa y la imagen de la
   siguiente quedaban 5px: al tocar una tarjeta, el overlay se comia el texto
   de la de arriba. Con 60px de separacion quedan ~45px reales.
   En escritorio las tres van en fila y esto no aplica. */
@media (max-width: 767px) {
  .elementor-element-c345aeb {
    gap: 60px !important;
  }
}

/* --- available-homes: la caja "Get Private Access", despegada del badge ---
   En escritorio hay 72px entre el ultimo "Coming Soon" y la caja; en movil
   solo 11, porque su padding cae de 68px a 18. Se compensa con margen. */
@media (max-width: 767px) {
  .elementor-element-7d0a44d {
    margin-top: 44px !important;
  }
}

/* --- Modal "Access Private Listings": los dos rotulos de abajo ---
   "Enter with your password" y "Get your password" van a 1.3vw SIN minimo:
   a 1440px son 18.7px, pero en un movil de 390 quedaban en 5.1px, ilegibles.
   Se les pone suelo de 13px. Por encima de ~1000px el 1.3vw ya es mayor, asi
   que en escritorio no cambia nada. */
@media (max-width: 767px) {
  /* Los tres elementos del modal, uno por linea y a todo el ancho: las dos
     pestanas iban en fila (155px cada una) y no dejaban sitio para el texto.
     39eb0a1 es la barra de pestanas; 01456a9 y e92da3c, cada pestana.
     Ojo: son elementos "atomic" de Elementor y NO llevan la clase
     elementor-element-XXX, solo el atributo data-id. Hay que seleccionarlos
     por atributo o la regla no engancha. */
  .elementor-459 [data-id="39eb0a1"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    /* el grupo del boton Enter arrastra 33px de margen inferior que no se
       puede quitar sin descuadrar el truco de margenes negativos que usa
       Elementor en el formulario; se compensa subiendo la barra */
    margin-top: -22px !important;
  }
  /* Entre el boton Enter y la primera pestana habia 60px: 30 de gap del
     envoltorio de pestanas (88dc661) y otros 30 que el contenedor del
     formulario sobresale por debajo del boton. Se quita el gap. */
  .elementor-459 [data-id="88dc661"] {
    gap: 0 !important;
  }
  .elementor-459 [data-id="01456a9"],
  .elementor-459 [data-id="e92da3c"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    text-align: center;
    /* El contenedor de la pestana hereda font-size 29.6px y con el su
       line-height de 44px, que genera una caja de linea vacia: la pestana
       medía 60px de alto para 24px de texto y el rotulo quedaba hundido
       21px. El texto va en un hijo con su propio tamano, asi que anular
       aqui el interlineado no le afecta. */
    line-height: 0 !important;
    padding: 12px 8px !important;
  }
}

@media (max-width: 1024px) {
  /* las dos pestanas ("Enter with your password" / "Get your password") */
  .e-51b40f7-45d07ce,
  .e-f2b9abc-bad96d1 {
    font-size: min(5vw, 20px) !important;
    line-height: 1.3 !important;
  }
  /* el titulo del modal, que iba a 12.9px */
  .elementor-459 p {
    font-size: min(5.8vw, 26px) !important;
    line-height: 1.3 !important;
  }
  /* el campo y el boton: 16px es ademas el minimo para que iOS no haga
     zoom al enfocar el input */
  .elementor-459 input[type="text"],
  .elementor-459 input[type="password"],
  .elementor-459 .elementor-field,
  .elementor-459 .elementor-button {
    font-size: 16px !important;
  }
}

/* --- "Current Availability" de la portada: la lista, alineada ---
   En movil el widget 86948fd va con text-align:center, asi que cada <li>
   centra SU texto dentro de su propia caja: las vinetas se quedan fijas en
   x=60 pero los tres renglones arrancaban en 89, 84 y 78 segun lo que
   midiera cada frase. En escritorio va alineado a la izquierda y por eso
   ahi si empiezan todos igual. Se replica ese comportamiento en movil. */
@media (max-width: 767px) {
  .elementor-element-86948fd ul,
  .elementor-element-86948fd ol,
  .elementor-element-86948fd li {
    text-align: left;
  }
}

/* --- Botones del hero de la portada: que no partan en dos lineas ---
   "Access Private Listings" y "View Current Offerings" viven en una caja fija
   de 280px, o sea 232px utiles descontando el padding de 24px por lado. El
   tipo iba a 6vw sin tope: a 390px de pantalla son 23.4px y el texto pide
   241px; a 520px son 31.2px y pide 314px. Por eso partian.
   Con tope de 21px el mas largo ocupa 218px y entra de una sola linea en
   todo el rango movil. Los dos widgets solo existen en la portada. */
@media (max-width: 767px) {
  .elementor-element-d5c1257 .elementor-button,
  .elementor-element-b5c7660 .elementor-button {
    font-size: min(6vw, 21px) !important;
  }
}

/* --- Tarjetas de post en la home: mismo tamano que en el listado del blog ---
   La home usa la rejilla de Essential Addons (widget 3dab2c3) y ahi los
   titulos van a 3vw en escritorio y 8vw en movil, bastante mas grandes que
   esos mismos titulos en /blog/, que usa el widget de archivo a 2.2vw y
   4.4vw. Se igualan a la escala del blog, con su interlineado de 1.2 (en la
   home venia a 1 y las lineas se tocaban).
   El widget 3dab2c3 solo existe en la portada, asi que no hace falta acotar
   mas el selector. */
.elementor-element-3dab2c3 .eael-entry-title,
.elementor-element-3dab2c3 .eael-entry-title a {
  font-size: 2.2vw !important;
  line-height: 1.2 !important;
}
/* El "Read More" tambien: iba a 1.88vw con interlineado 2.5 y, al encoger el
   titulo, se quedaba MAS grande que el. En /blog/ es 17px fijo en escritorio,
   2.2vw en tablet y 4.4vw en movil, con interlineado 1.2.
   En escritorio se sube a 19px: a 17 quedaba demasiado discreto bajo un
   titular de 31px. */
.elementor-element-3dab2c3 .eael-post-elements-readmore-btn {
  font-size: 19px !important;
  line-height: 1.2 !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-3dab2c3 .eael-post-elements-readmore-btn {
    font-size: 2.2vw !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-3dab2c3 .eael-entry-title,
  .elementor-element-3dab2c3 .eael-entry-title a {
    font-size: 4.4vw !important;
  }
  .elementor-element-3dab2c3 .eael-post-elements-readmore-btn {
    font-size: 4.4vw !important;
  }
}

/* --- Listado del blog: demasiado margen lateral en movil ---
   01604b8 (la rejilla de posts de la plantilla de archivo) trae
   'padding: 60px 100px' fijo. En escritorio no molesta porque hay 3 columnas,
   pero en un movil de 390 se comia 200px y a las tarjetas les quedaba el 49%
   del ancho. Curiosamente en tablet ya usa menos (62-68px), asi que el 100px
   solo hace dano por debajo de 768. Mismo valor que el resto del sitio. */
@media (max-width: 767px) {
  .elementor-4411 .elementor-element.elementor-element-01604b8 {
    padding-left: min(5.5%, 28px) !important;
    padding-right: min(5.5%, 28px) !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* El hero (6904369, el que lleva la foto de fondo) trae 'padding: 15px 0 0':
   cero a los lados. En escritorio no se nota porque el titulo va en x=43,
   pero de 1024 para abajo el titular y la entradilla arrancaban pegados al
   borde. Mismo valor que el cuerpo para que todo quede en la misma vertical.
   El fondo no se encoge: una imagen de fondo cubre tambien el padding. */
@media (max-width: 1024px) {
  .elementor-3814 .elementor-element.elementor-element-6904369 {
    padding-left: min(5.5%, 28px);
    padding-right: min(5.5%, 28px);
    padding-bottom: 26px;
  }
}

/* --- Hero de los posts: encuadre y altura ---
   Venia con 'background-size: auto' y 'repeat', o sea la foto a tamano real
   anclada arriba a la izquierda: se veia el trozo superior izquierdo y la
   casa quedaba descolocada y cortada. Con 'cover' + centrado la casa manda
   en el encuadre a cualquier ancho.
   La altura era 594px fijos: en un monitor de 1840 eso daba 3.10:1, una
   franja. Ahora escala con el ancho, con suelo y techo para que ni se
   achate en pantallas anchas ni se coma la pagina.
   Solo de 1025px hacia arriba: en movil el hero es mas alto que ancho
   (390x613) y 'cover' obliga a escalar por altura, con lo que solo se ve un
   tercio del ancho de la foto -- la casa sale ampliadisima y el subtitulo
   cae encima del edificio. Ahi se deja el encuadre que ya tenia. */
@media (min-width: 1025px) {
  .elementor-3814 .elementor-element.elementor-element-6904369 {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: auto !important;
    min-height: clamp(660px, 46vw, 820px) !important;
  }
  /* Ajuste fino por post: cada foto tiene la casa a distinta altura, asi que
     un 50% igual para las tres deja alguna algo alta con mucha sombra debajo.
     Bajar el porcentaje sube la ventana visible dentro de la foto, lo que
     empuja la casa hacia el centro del encuadre. */
  body.postid-3792 .elementor-element.elementor-element-6904369 {   /* Spec Home vs Custom */
    background-position: center 42% !important;
  }
  body.postid-4419 .elementor-element.elementor-element-6904369 {   /* Why buying / 2703 Oak Park */
    background-position: center 45% !important;
  }
}

@media (max-width: 767px) {
  .elementor-3814 .elementor-element.elementor-element-5d4a27dc {
    padding-left: min(5.5%, 28px);
    padding-right: min(5.5%, 28px);
  }

  /* La tabla comparativa desbordaba la pagina a lo ancho (405px de contenido
     en una pantalla de 390) y provocaba scroll horizontal en TODO el post.
     Lleva width:100% en linea, pero una tabla no encoge por debajo de su
     contenido: con 3 columnas a 16px de padding cada lado son 96px solo de
     margenes interiores. Se aprieta el tipo y el padding en movil.
     Los estilos van en linea en el HTML del post, de ahi los !important. */
  .elementor-3814 .elementor-element-5d4a27dc table { font-size: 14px !important; }
  .elementor-3814 .elementor-element-5d4a27dc table th,
  .elementor-3814 .elementor-element-5d4a27dc table td {
    padding: 10px 7px !important;
    font-size: 13px !important;
    letter-spacing: .6px !important;
  }
  /* red de seguridad: si aun asi no cupiera, que scrolle la tabla y no la pagina */
  .elementor-3814 .elementor-element-5d4a27dc table { max-width: 100%; }
}

/* ===========================================================
   GALERIA DESTACADA DE LAS FICHAS DE CASA
   Va debajo de Highlights en las 32 fichas. En vez de volcar
   las 10-24 fotos que tiene cada casa, se muestran hasta 5
   elegidas -- una destacada al cuadruple de area y cuatro de
   apoyo -- y el resto queda detras del boton "See All Photos",
   que abre el visor que ya existe en la pagina (id=seeallpho).

   Por que todas las teselas son 16:9: las fotos de origen son
   2560x1440. Un recorte cuadrado o vertical se comeria medio
   encuadre. Con 4 columnas, la destacada ocupa 2x2 celdas, y
   dos celdas mas el hueco intermedio vuelven a dar 16:9.

   data-n dice cuantas fotos tiene la ficha: seis casas tienen
   menos de 5 y necesitan otra reparticion para no dejar huecos.
   =========================================================== */
.pdsa-galeria {
  /* Highlights ya aporta separacion por abajo: arriba minimo
     para no duplicar el hueco */
  padding: clamp(4px, 0.6vw, 10px) 10px clamp(38px, 4.5vw, 78px);
  font-family: var(--e-global-typography-primary-font-family, 'Cormorant Garamond', Georgia), serif;
}
/* Elementor cambia el ancho de sus contenedores en 1024px (94% por
   encima, completo por debajo). Se replica para que el titulo de la
   galeria arranque en la misma vertical que el de Highlights. */
.pdsa-galeria .pdsa-g-inner { width: 100%; margin: 0 auto; }
@media (min-width: 1025px) {
  .pdsa-galeria .pdsa-g-inner { width: 94%; }
}
.pdsa-galeria .pdsa-g-cab {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 26px;
}
/* --- Tipografia: la MISMA escala que el resto de la pagina ---
   El sitio mide toda su tipografia en vw y SIN tope, asi que crece con la
   pantalla. Aqui habia clamp() con maximos (40/15/18px) y a partir de ~1400px
   la galeria se quedaba parada mientras Highlights y los botones seguian
   creciendo: en un monitor de 1840px el titulo de la seccion salia a 40px
   contra los 55px de "Highlights".
   Valores medidos en la propia pagina:
       titulo de seccion  3vw  / 4vw   / 6vw    (escritorio / tablet / movil)
       boton              2vw  / 2.2vw / 4.4vw
   El contador no tiene equivalente en la pagina; va proporcional al titulo. */
.pdsa-galeria h2 {
  font-size: 3vw;
  font-weight: 400;
  color: #2B2724;
  margin: 0;
}
.pdsa-galeria .pdsa-g-cuenta {
  font-size: 1.1vw;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9C8A79;
}
@media (max-width: 1024px) {
  .pdsa-galeria h2 { font-size: 4vw; }
  .pdsa-galeria .pdsa-g-cuenta { font-size: 1.5vw; }
}
.pdsa-galeria .pdsa-g-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 0.9vw, 16px);
}
.pdsa-galeria .pdsa-g-item {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
/* la destacada: 2x2 celdas, cuatro veces el area del resto.
   aspect-ratio:auto porque su alto ya lo fijan las dos filas */
.pdsa-galeria .pdsa-g-item--alta {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
/* --- casas con menos de 5 fotos: reparticiones que no dejan celdas vacias --- */
.pdsa-galeria .pdsa-g-grid[data-n="4"] { grid-template-columns: repeat(3, 1fr); }
.pdsa-galeria .pdsa-g-grid[data-n="4"] .pdsa-g-item--alta {
  grid-column: span 3; grid-row: auto; aspect-ratio: 21 / 9;
}
.pdsa-galeria .pdsa-g-grid[data-n="3"] { grid-template-columns: repeat(2, 1fr); }
.pdsa-galeria .pdsa-g-grid[data-n="3"] .pdsa-g-item--alta {
  grid-column: span 2; grid-row: auto; aspect-ratio: 21 / 9;
}
.pdsa-galeria .pdsa-g-grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.pdsa-galeria .pdsa-g-grid[data-n="2"] .pdsa-g-item--alta {
  grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9;
}

.pdsa-galeria .pdsa-g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.pdsa-galeria .pdsa-g-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2B2724;
  opacity: 0;
  transition: opacity .3s ease;
}
.pdsa-galeria .pdsa-g-item:hover img,
.pdsa-galeria .pdsa-g-item:focus-visible img { transform: scale(1.06); }
.pdsa-galeria .pdsa-g-item:hover::after,
.pdsa-galeria .pdsa-g-item:focus-visible::after { opacity: .18; }
.pdsa-galeria .pdsa-g-item:focus-visible { outline: 2px solid #2B2724; outline-offset: 2px; }

.pdsa-galeria .pdsa-g-pie {
  margin-top: clamp(18px, 2vw, 30px);
  text-align: center;
}
.pdsa-galeria .pdsa-g-todas {
  display: inline-block;
  /* los botones de la pagina llevan 12px 24px; aqui 11px porque el borde
     de 1px suma, y mas holgura a los lados por ser una llamada suelta */
  padding: 11px 42px;
  border: 1px solid rgba(43, 39, 36, 0.4);
  background: none;
  color: #2B2724;
  font-family: inherit;
  font-size: 2vw;   /* igual que "Request Private Tour" */
  letter-spacing: .4px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
@media (max-width: 1024px) {
  .pdsa-galeria .pdsa-g-todas { font-size: 2.2vw; }
}
.pdsa-galeria .pdsa-g-todas:hover,
.pdsa-galeria .pdsa-g-todas:focus-visible {
  background: #2B2724;
  border-color: #2B2724;
  color: #ffffff;
}

@media (max-width: 767px) {
  /* la destacada pasa a ancho completo y las otras caen en 2x2 */
  .pdsa-galeria .pdsa-g-grid,
  .pdsa-galeria .pdsa-g-grid[data-n="4"],
  .pdsa-galeria .pdsa-g-grid[data-n="3"],
  .pdsa-galeria .pdsa-g-grid[data-n="2"] {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  /* Ojo con la especificidad: las reglas de arriba para la destacada van
     calificadas con [data-n=...] (0,4,0), asi que un simple
     '.pdsa-galeria .pdsa-g-item--alta' (0,2,0) NO las gana y la destacada se
     quedaba ocupando 3 columnas dentro de una rejilla de 2. Hay que repetir
     la misma calificacion. */
  .pdsa-galeria .pdsa-g-grid .pdsa-g-item--alta,
  .pdsa-galeria .pdsa-g-grid[data-n="4"] .pdsa-g-item--alta,
  .pdsa-galeria .pdsa-g-grid[data-n="3"] .pdsa-g-item--alta {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
  /* con solo 2 fotos siguen una al lado de la otra: si la destacada ocupase
     el ancho completo, la segunda quedaria a media fila */
  .pdsa-galeria .pdsa-g-grid[data-n="2"] .pdsa-g-item--alta {
    grid-column: auto;
    aspect-ratio: 16 / 9;
  }
  /* la banda de Highlights va centrada en movil; la cabecera la acompana */
  .pdsa-galeria .pdsa-g-cab {
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
  }
  .pdsa-galeria h2 { font-size: 6vw; }
  /* tope de 16px como hace el texto del sitio en este tramo: a 767px
     un 3.4vw serian 26px y el contador competiria con el titulo */
  .pdsa-galeria .pdsa-g-cuenta { font-size: min(3.4vw, 16px); }
  .pdsa-galeria .pdsa-g-todas {
    display: block;
    width: 100%;
    padding: 11px 20px;
    font-size: 4.4vw;   /* igual que los botones de la ficha en movil */
  }
}

/* --- Tarjetas de casa: el velo de "See Property Full Page" ya no parpadea ---
   Esa capa (texto + velo marron sobre la foto) solo deberia verse al pasar el
   raton: el CSS de la plantilla la tiene en opacity 0 y la sube a 1 en :hover.
   Pero al widget le habian dejado puesta una animacion de entrada de Elementor
   ("fadeIn"). Elementor arranca esos elementos con la clase elementor-invisible
   y, al entrar en pantalla, se la quita y les pone "animated fadeIn".

   Mientras la animacion corre, manda ella y no el CSS, asi que la capa subia de
   0 a 1 en 0,75s; al acabar, como lleva fill-mode:none, no conserva el valor
   final y volvia a 0. Resultado: cada fila de tarjetas destellaba el velo entera
   al asomar por abajo, sin que nadie pasara el raton. Medido muestreando la
   opacidad cada 60 ms: 0 0 .03 .11 .25 .44 .61 .74 .87 .96 1 -> 0.

   Se anula la animacion y se deja la capa siempre "visible" (que es como queda
   igualmente tras el scroll); el que la muestra y la esconde vuelve a ser solo
   el :hover. Afecta a los dos listados y a Featured Homes, que comparten
   plantilla. */
.prop-hover-texta {
  animation: none !important;
  visibility: visible !important;
}

/* --- Aviso de "mensaje enviado" de los formularios ---
   Lo pinta paradisa-forms.js al recibir la respuesta de /enviar.php. Venia
   sin estilos propios, asi que heredaba los de Elementor: texto azul oscuro
   (#324A6D), sin fondo ni recuadro, y un icono de una fuente que no carga y
   salia como un cuadrito. Sobre el fondo oscuro de la seccion de contacto
   era practicamente ilegible: parecia que el formulario no hacia nada.

   Ahora es un panel con fondo propio, asi que se lee igual de bien sobre
   claro que sobre oscuro, en cualquier pagina del sitio. */
.paradisa-msg {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 0 !important;
  padding: 16px 20px !important;
  border: 0 !important;
  border-left: 3px solid #6E8E6A;
  border-radius: 3px;
  background: #F2F6F1 !important;
  color: #2B2724 !important;
  /* sin font-family propia: hereda la del formulario, que es la sans del
     sitio. Asi el aviso se lee como parte del formulario y no como un
     cartel pegado encima. */
  font-size: 18px !important;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
}
/* el icono de Elementor no carga: se sustituye por una marca propia */
.paradisa-msg::before {
  content: "✓";            /* palomita */
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #6E8E6A;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}
.paradisa-msg.elementor-message-danger {
  border-left-color: #A85A4A;
  background: #FBF1EF !important;
}
.paradisa-msg.elementor-message-danger::before {
  content: "!";            /* admiracion */
  background: #A85A4A;
}
@media (max-width: 767px) {
  .paradisa-msg {
    font-size: 16px !important;
    padding: 14px 16px !important;
  }
}