.image_box_main {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
@media (max-width: 767px) {

.image-box-wrapper {
	margin: 1rem 0;
}
}

.image_box_main img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}
/*-----style---two------*/

.gng_serv_about {
  position: relative;
  padding-right: 5rem;
}

.gng_serv_about .item_ig {
  position: relative;
}

.gng_serv_about .item_ig .nq_about {
  position: absolute;
  background-color: var(--background-color-three);
  padding: 2.5rem 2rem;
  right: -5rem;
  top: 6rem;
  z-index: 2;
}

.gng_serv_about .item_ig .nq_about h3 {
  color: var(--semantic-text-color-neutral, #232a2f);
}

.gng_serv_about .item_ig .nq_about .mg_locate {
  padding-top: 1rem;
}

.gng_serv_about .item_ig .nq_about .mg_locate span {
  display: block;
}

.gng_serv_about .item_ig .nq_about .mg_locate h4 {
  margin: 0;
}

.gng_serv_about .item_ig img {
  height: 600px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 8px;
}

.gng_serv_about.left {
  padding-right: unset;
  padding-left: 5rem;
}

.gng_serv_about.left .item_ig .nq_about {
  left: -5rem;
  right: unset !important;
  top: 6rem;
}
/*-----style---three------*/

.gs_parallex {
  position: relative;
  overflow: hidden;
}

.gs_parallex .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(var(--primary-color-two)),
    color-stop(20%, rgba(15, 14, 14, 0)),
    color-stop(80%, rgba(15, 14, 14, 0)),
    to(var(--primary-color-two))
  ) !important;
  -webkit-background: linear-gradient(
    to top,
    var(--primary-color-two) 0%,
    rgba(15, 14, 14, 0) 20%,
    rgba(15, 14, 14, 0) 80%,
    var(--primary-color-two) 100%
  ) !important;
  -moz-background: linear-gradient(
    to top,
    var(--primary-color-two) 0%,
    rgba(15, 14, 14, 0) 20%,
    rgba(15, 14, 14, 0) 80%,
    var(--primary-color-two) 100%
  ) !important;
  -o-background: linear-gradient(
    to top,
    var(--primary-color-two) 0%,
    rgba(15, 14, 14, 0) 20%,
    rgba(15, 14, 14, 0) 80%,
    var(--primary-color-two) 100%
  ) !important;
  -ms-background: linear-gradient(
    to top,
    var(--primary-color-two) 0%,
    rgba(15, 14, 14, 0) 20%,
    rgba(15, 14, 14, 0) 80%,
    var(--primary-color-two) 100%
  ) !important;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(var(--primary-color-two)),
    color-stop(20%, rgba(15, 14, 14, 0)),
    color-stop(80%, rgba(15, 14, 14, 0)),
    to(var(--primary-color-two))
  ) !important;
  background: linear-gradient(
    to top,
    var(--primary-color-two) 0%,
    rgba(15, 14, 14, 0) 20%,
    rgba(15, 14, 14, 0) 80%,
    var(--primary-color-two) 100%
  ) !important;
}

.gs_parallex img {
  width: 100%;
  height: 600px;
  -o-object-fit: cover;
  object-fit: cover;
}

.gs_parallex .video_btns {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 999;
}

iframe {
  width: 100%;
  height: 500px;
}

.image_box_four {
  position: relative;
  display: flex;
}

.image_box_four .pllx_img {
  border-radius: 10px;
  min-width: 48%;
  overflow: hidden;
  margin: 5px;
  height: 450px;
}
.image_box_four .pllx_img img {
  overflow: hidden;
  height: 450px !important;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
.image_box_four .pllx_img.two {
  margin-top: 100px;
}

@media (max-width: 767px) {
  .image_box_four .pllx_img .simpleParallax {
    max-height: 450px;
    height: unset;
    border-radius: 10px;
  }

  .transition-parallax,
  .cover-parallax {
    height: auto;
  }

  .image_box_main img {
    object-fit: cover;
  }

  .image_box_four .pllx_img img {
    height: 210px !important;
  }

  .image_box_four .pllx_img.two,
  .image_box_four .pllx_img {
    height: auto;
  }

  .gng_serv_about {
    padding-right: 0;
  }
}

/* =========================================
   STYLE FIVE: Movimiento Parallax (Sin Zoom Agresivo)
   ========================================= */

.villa-image-box-style_five .image-box-img {
  overflow: hidden;
  position: relative;
  border-radius: 18px !important;
  overflow: hidden;
}

/* ESTADO INICIAL DE LA IMAGEN */
@media (max-width: 767px) {

.villa-image-box-style_five img {
	height: auto !important;
  /* transform: scale(1.01) translateY(0);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
  will-change: transform;  */
}
}

/* .villa-image-box-style_five:hover img {
  transform: scale(1.01) translateY(-20px); 
} */

.villa-image-box-style_five .image-box-content {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .villa-image-box-style_five:hover .image-box-content {
    transform: translateY(5px);
} */

/* --- OVERLAY STYLE FIVE --- */

/* Contenedor del texto flotante */
.masisa-overlay-content {
  position: absolute;
  z-index: 10;
  max-width: 85%; /* Para que no pegue a los bordes */
  color: #fff;
  padding: 30px;
  pointer-events: none; /* Permite hacer clic en la imagen de fondo si es necesario, pero... */
}

/* Permitir clicks en enlaces/botones dentro del overlay */
.masisa-overlay-content a {
  pointer-events: auto;
}

/* POSICIONES */
.masisa-overlay-content.position-top-left {
  top: 0;
  left: 0;
}
.masisa-overlay-content.position-bottom-left {
  bottom: 0;
  left: 0;
}
.masisa-overlay-content.position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* --- TIPOGRAFÍA Y EFECTOS --- */

/* Títulos */
.masisa-overlay-content h1,
.masisa-overlay-content h2,
.masisa-overlay-content h3 {
  color: #fff !important;
  margin-bottom: 15px;
  line-height: 1.1;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra para leer bien sobre fotos claras */
}

.masisa-overlay-content h2 {
  font-size: 2.5rem !important; /* Ajusta según necesites */
}

/* EL TRUCO DE LA FRANJA VERDE:
   Usamos la etiqueta para crear el estilo Masisa */
.masisa-overlay-content u {
  color: #fff; /* Texto blanco */
  padding: 0px 8px; /* Un poco de aire a los lados */
  position: relative;

  /* IMPORTANTE: Quitamos la línea de subrayado real */
  text-decoration: none;
  display: inline;

  /* Para que la caja se corte bien si salta de línea */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* Estilo visual extra (opcional, para que se vea premium) */
  font-weight: 700;
  font-style: italic;
}
.masisa-overlay-content u::before {
  background-color: #009640;
  content: "";
  height: 33%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-49%, -30%) skew(-20deg, 0deg);
  width: 98%;
  z-index: -1;
}

/* Párrafos normales */
.masisa-overlay-content p {
  color: #f0f0f0;
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 1.5;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* --- BOTONES AUTOMÁTICOS --- */
/* Si el usuario agrega un link en el Rich Text, que parezca botón */
.masisa-overlay-content a {
  display: inline-block;
  background-color: #009640;
  color: white;
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid #009640;
  transition: all 0.3s ease;
}

.masisa-overlay-content a:hover {
  background-color: #007a33;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .masisa-overlay-content {
    padding: 20px;
    max-width: 100%;
  }
  .masisa-overlay-content h2 {
    font-size: 1.8rem !important;
  }
}

/*////////////////////////////////*/

/* --- ESTILOS DE POSICIONAMIENTO UNIVERSAL (Para Style 6 y 7) --- */
.masisa-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.5rem; /* Margen de seguridad para que no pegue a los bordes */
  pointer-events: none; /* Dejar pasar clic a la imagen */
  display: flex;
  z-index: 10;
}

/* Permitir clic en el contenido (botones) */
.masisa-overlay-inner {
  pointer-events: auto;
  max-width: 600px; /* Ancho máximo del bloque de texto */
}

/* --- CLASES DE POSICIÓN --- */
.pos-top-left {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.pos-top-center {
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.pos-top-right {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: right;
}

.pos-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pos-bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
}
.pos-bottom-center {
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
.pos-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
}

.pos-bottom-left .masisa-overlay-inner {
  margin-bottom: -1, 3rem;
  margin-left: -1.1rem;
}
.pos-bottom-center .masisa-overlay-inner {
    transform: translate(0, 50%);
}
.pos-bottom-right .masisa-overlay-inner {
  margin-bottom: -1.3rem;
  margin-right: -1.1rem;
}

.cta-button,
.masisa-btn-pill {
  display: inline-block;
  background-color: #009640;
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -1.5px;
  border: 2px solid #009640;
  transition: all 0.3s ease;
  font-size: 24px;
  border: solid 0.8rem white;
  max-width: fit-content !important;
}

.masisa-btn-pill:hover {
  background-color: #007a33;
  transform: translateY(-3px);
  color: #fff;
}

/* --- ESTILO STYLE SEVEN (Contenido Rico) --- */

.villa-image-box-style_seven .masisa-overlay-inner {
  max-width: 75%;
  padding: 1rem;
}

@media (max-width: 768px) {
	.villa-image-box-style_seven .masisa-overlay-inner {
		max-width: 100%;
		padding: .5rem;
	}
}


.style-seven-title {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  font-weight: 700;

  font-style: italic;
  line-height: 1.1;
  letter-spacing: -2.5px;

  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Sombra para leerse sobre foto */
}

/* Subrayado especial estilo Masisa (Línea blanca simple si se desea, o nada) */
.style-seven-title span {
  border-bottom: 3px solid #fff;
}

.style-seven-desc {
  color: #ffffff !important;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 25px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.style-seven-desc p {
  color: #ffffff !important;
}

.style-seven-desc + .masisa-btn-pill {
  font-size: 24px;
  border: solid 0.4rem white;
}

/* Ajustes Móviles */
@media (max-width: 768px) {
	.style-seven-desc + .masisa-btn-pill {
		font-size: 18px;
	}
  .masisa-overlay-container {
    /* padding: 20px; */
  }
  .style-seven-title {
    font-size: 1.8rem;
  }
}