/* ===== ESTILOS PARA IMÁGENES DEL HERO CAROUSEL ===== */

/* Contenedor principal del hero */
#hero-carousel .site-blocks-cover {
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

/* Imagen de fondo optimizada */
/* Imagen con <img> para control total */
#hero-carousel .hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 0;
}

/* Overlay para mejorar la legibilidad del texto */
#hero-carousel .site-blocks-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Contenedor del contenido (debe estar por encima del overlay) */
#hero-carousel .site-blocks-cover .container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -46%) !important;
  z-index: 2;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Centrar el contenido del carrusel */
#hero-carousel .site-blocks-cover .row {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

#hero-carousel .site-blocks-cover .col-md-10 {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Ajustes responsivos para diferentes tamaños de pantalla */
@media (max-width: 768px) {
  #hero-carousel .site-blocks-cover {
    min-height: 500px;
    background-position: center 30% !important;
  }
  
  #hero-carousel .site-blocks-cover .col-md-10 {
    padding: 1rem !important;
    max-width: 100% !important;
  }
  
  #hero-carousel .site-blocks-cover .mb-4 {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
}

@media (max-width: 576px) {
  #hero-carousel .site-blocks-cover {
    min-height: 400px;
    background-position: center 25% !important;
  }
  
  #hero-carousel .site-blocks-cover .col-md-10 {
    padding: 0.5rem !important;
  }
  
  #hero-carousel .site-blocks-cover h1 {
    font-size: 1.5rem !important;
  }
  
  #hero-carousel .site-blocks-cover .h2 {
    font-size: 1.25rem !important;
  }
}

/* Ajustes para pantallas grandes */
@media (min-width: 1200px) {
  #hero-carousel .site-blocks-cover {
    min-height: 700px;
  }
}

/* Mejoras para el texto sobre las imágenes */
#hero-carousel .site-blocks-cover h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  margin-bottom: 1rem;
}

#hero-carousel .site-blocks-cover p {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  margin-bottom: 1rem;
}

/* Centrar todos los elementos de texto */
#hero-carousel .site-blocks-cover .property-offer-type,
#hero-carousel .site-blocks-cover h1,
#hero-carousel .site-blocks-cover p,
#hero-carousel .site-blocks-cover .badge,
#hero-carousel .site-blocks-cover .btn {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Asegurar que los badges estén centrados */
#hero-carousel .site-blocks-cover .badge {
  display: inline-block !important;
  margin: 0.5rem !important;
  text-align: center !important;
}

/* Centrar el contenedor de badges */
#hero-carousel .site-blocks-cover .mb-4 {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Centrar el badge de VENTA */
#hero-carousel .site-blocks-cover .property-offer-type {
  text-align: center !important;
  display: inline-block !important;
  margin: 0 auto 1rem auto !important;
  width: auto !important;
}

/* Centrar la ubicación */
#hero-carousel .site-blocks-cover .mb-3 {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto 1rem auto !important;
}

/* Centrar el precio */
#hero-carousel .site-blocks-cover .mb-5 {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto 1rem auto !important;
}

/* Centrar el título principal */
#hero-carousel .site-blocks-cover h1 {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto 1rem auto !important;
}

/* Centrar el precio */
#hero-carousel .site-blocks-cover .h2 {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Centrar el botón */
#hero-carousel .site-blocks-cover .btn {
  text-align: center !important;
  margin: 0 auto !important;
  display: inline-block !important;
}

/* Badges con mejor contraste */
#hero-carousel .badge {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
  font-weight: 600;
  text-shadow: none;
}

/* Botón con mejor contraste */
#hero-carousel .btn-white {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Animación suave para las transiciones */
#hero-carousel .site-blocks-cover {
  transition: all 0.3s ease-in-out;
}

/* Hover effect para mejor interactividad */
#hero-carousel .site-blocks-cover:hover {
  transform: scale(1.01);
}

/* Optimización para imágenes de propiedades */
/* El <img> no usa background-attachment */

/* Fallback para dispositivos que no soportan background-attachment: fixed */
@media (max-width: 768px) {
  #hero-carousel .hero-background-image {
    background-attachment: scroll !important;
  }
}

/* Mejoras específicas para el hero */
#hero-carousel .hero-property-slide {
  position: relative;
}

/* Posicionamiento del logo en el navbar */
.site-navbar .container {
  max-width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.site-navbar .row {
  justify-content: space-between !important;
}
.site-navbar .col-8.col-md-8.col-lg-4 h1 {
  margin-left: 0 !important;
  text-align: left !important;
}
.site-navbar .col-8.col-md-8.col-lg-4 h1 a {
  display: inline-block !important;
  text-align: left !important;
}
@media (max-width: 576px) {
  .site-navbar .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Asegurar que solo se muestre un slide a la vez */
#hero-carousel .owl-stage-outer {
  overflow: hidden;
}

#hero-carousel .owl-stage { display: block; }

#hero-carousel .owl-item { display: block; }

/* Ocultar slides que no están activos */
#hero-carousel .owl-item:not(.active) { opacity: 1; }

/* Asegurar que el slide activo sea visible */
#hero-carousel .owl-item.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* Forzar centrado completo - sobrescribir cualquier estilo conflictivo */
#hero-carousel .site-blocks-cover {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#hero-carousel .site-blocks-cover * {
  text-align: center !important;
}

/* Sobrescribir estilos de Bootstrap y otros frameworks */
#hero-carousel .site-blocks-cover .container {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#hero-carousel .site-blocks-cover .row {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#hero-carousel .site-blocks-cover .col-md-10 {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  float: none !important;
  flex: none !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Excepción para elementos que deben mantener su alineación */
#hero-carousel .site-blocks-cover .owl-nav,
#hero-carousel .site-blocks-cover .owl-dots {
  text-align: left !important;
}

#hero-carousel .site-blocks-cover .owl-nav .owl-prev,
#hero-carousel .site-blocks-cover .owl-nav .owl-next {
  text-align: center !important;
}

/* Enfoque alternativo: centrado absoluto del contenido (anulado) */
#hero-carousel .site-blocks-cover .row {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#hero-carousel .site-blocks-cover .col-md-10 {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 2rem !important;
}

/* Estilos para los iconos de navegación - sobrescribir style.css */
#hero-carousel .owl-nav {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  transform: translateY(-50%) !important;
  z-index: 10;
}

#hero-carousel .owl-prev,
#hero-carousel .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5) !important;
  color: white !important;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

#hero-carousel .owl-prev {
  left: 20px;
}

#hero-carousel .owl-next {
  right: 20px;
}

#hero-carousel .owl-prev:hover,
#hero-carousel .owl-next:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: translateY(-50%) scale(1.1);
}

/* Asegurar que los iconos se vean correctamente */
#hero-carousel .owl-prev span,
#hero-carousel .owl-next span {
  font-size: 24px;
  line-height: 1;
}

/* Estilos para los puntos de navegación */
#hero-carousel .owl-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#hero-carousel .owl-dots .owl-dot {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  transition: all 0.3s ease;
}

#hero-carousel .owl-dots .owl-dot.active {
  background: white;
  transform: scale(1.2);
}

/* Ajuste de proporción para imágenes de casas */
#hero-carousel .hero-background-image {
  /* Mantener proporción 16:9 para mejor visualización */
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Efecto hover para zoom sutil */
#hero-carousel .hero-property-slide:hover .hero-background-image {
  transform: scale(1.02);
}

/* Ajustes responsivos para diferentes proporciones */
@media (max-width: 768px) {
  #hero-carousel .hero-background-image {
    aspect-ratio: 4/3;
  }
}

@media (max-width: 576px) {
  #hero-carousel .hero-background-image {
    aspect-ratio: 1/1;
  }
}




/* Badges con mejor contraste */

#hero-carousel .badge {

  background-color: rgba(255, 255, 255, 0.9) !important;

  color: #333 !important;

  font-weight: 600;

  text-shadow: none;

}



/* Botón con mejor contraste */

#hero-carousel .btn-white {

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}



/* Animación suave para las transiciones */

#hero-carousel .site-blocks-cover {

  transition: all 0.3s ease-in-out;

}



/* Hover effect para mejor interactividad */

#hero-carousel .site-blocks-cover:hover {

  transform: scale(1.01);

}



/* Optimización para imágenes de propiedades */

#hero-carousel .hero-background-image {

  background-attachment: fixed !important;

}



/* Fallback para dispositivos que no soportan background-attachment: fixed */

@media (max-width: 768px) {

  #hero-carousel .hero-background-image {

    background-attachment: scroll !important;

  }

}



/* Mejoras específicas para el hero */

#hero-carousel .hero-property-slide {

  position: relative;

}



/* Ajuste de proporción para imágenes de casas */

#hero-carousel .hero-background-image {

  /* Mantener proporción 16:9 para mejor visualización */

  aspect-ratio: 16/9;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Efecto hover para zoom sutil */

#hero-carousel .hero-property-slide:hover .hero-background-image {

  transform: scale(1.02);

}



/* Ajustes responsivos para diferentes proporciones */

@media (max-width: 768px) {

  #hero-carousel .hero-background-image {

    aspect-ratio: 4/3;

  }

}



@media (max-width: 576px) {

  #hero-carousel .hero-background-image {

    aspect-ratio: 1/1;

  }

}