.elementor-12854 .elementor-element.elementor-element-332a3bd{--spacer-size:50px;}.elementor-12854 .elementor-element.elementor-element-cf4c503{--spacer-size:30px;}.elementor-12854 .elementor-element.elementor-element-62ac453{--spacer-size:20px;}.elementor-12854 .elementor-element.elementor-element-aaad25a > .elementor-widget-container{margin:-11px -11px -11px -11px;}/* Start custom CSS for section, class: .elementor-element-358f3eb */.gs-intro {
  max-width: 900px;
  margin: 10px auto 10px;
  padding: 0 20px;
  text-align: center;
}

.gs-intro-text {
  font-size: 17px;
  line-height: 1.9;
  color: #444;
  font-weight: 300;
  letter-spacing: 0.3px;
  margin: 20px 0;
}

/* líneas elegantes */
.gs-intro-line {
  width: 120px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #c7a87a, transparent);
  opacity: 0.9;
}

/* animación sutil */
.gs-intro {
  animation: fadeIntro 0.8s ease;
}

@keyframes fadeIntro {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 📱 móvil */
@media (max-width: 767px) {

  .gs-intro {
    margin: 40px auto 60px;
  }

  .gs-intro-text {
    font-size: 15px;
    line-height: 1.8;
  }

  .gs-intro-line {
    width: 80px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-78a29f2 */.gs-intro {
  max-width: 900px;
  margin: 10px auto 10px;
  padding: 0 20px;
  text-align: center;
}

.gs-intro-text {
  font-size: 17px;
  line-height: 1.9;
  color: #444;
  font-weight: 300;
  letter-spacing: 0.3px;
  margin: 20px 0;
}

/* líneas elegantes */
.gs-intro-line {
  width: 120px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #c7a87a, transparent);
  opacity: 0.9;
}

/* animación sutil */
.gs-intro {
  animation: fadeIntro 0.8s ease;
}

@keyframes fadeIntro {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 📱 móvil */
@media (max-width: 767px) {

  .gs-intro {
    margin: 40px auto 60px;
  }

  .gs-intro-text {
    font-size: 15px;
    line-height: 1.8;
  }

  .gs-intro-line {
    width: 80px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-72c0c3c *//* Solo afecta al bloque que tenga la clase .gs-mirror */
.gs-mirror .gs-hero {
  direction: rtl !important;
}

/* Restauramos la lectura del texto de izquierda a derecha */
.gs-mirror .gs-hero-text, 
.gs-mirror .gs-hero-image {
  direction: ltr !important;
}

/* En móviles (menos de 680px) lo devolvemos al orden natural */
@media (max-width: 680px) {
  .gs-mirror .gs-hero {
    direction: ltr !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c657ac7 *//* Mantenemos el aspecto original, solo añadimos la capacidad de transicionar */
.gs-intro-line, .gs-intro-text {
    transition: all 2.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Estado inicial (Pre-animación) */
/* Solo se aplica si el navegador soporta animaciones para evitar que desaparezcan */
.gs-intro[data-gs-root] .gs-intro-line {
    transform: scaleX(0.2);
    opacity: 0;
}

.gs-intro[data-gs-root] .gs-intro-text {
    transform: translateY(15px);
    opacity: 0;
}

/* Estado Final (Cuando la sección entra en pantalla) */
.gs-intro.gs-active .gs-intro-line {
    transform: scaleX(1);
    opacity: 0.4; /* Opacidad original de tu diseño */
}

.gs-intro.gs-active .gs-intro-text {
    transform: translateY(0);
    opacity: 1;
}

/* Retardo elegante para el texto */
.gs-intro.gs-active .gs-intro-text {
    transition-delay: 0.2s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fc8169e *//* 1. Definimos la animación */
@keyframes gsFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Aplicamos la animación solo si el usuario entra en la sección */
/* Usamos una clase simple para activarlo */
.gs-hero-image, .gs-hero-text {
  opacity: 1; /* Por defecto visible para evitar errores */
}

/* Si detectamos JS, los ocultamos inicialmente */
.js-enabled .gs-hero-image, 
.js-enabled .gs-hero-text {
  opacity: 0;
}

/* Clase que dispara la animación */
.gs-reveal-active .gs-hero-image {
  animation: gsFadeUp 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gs-reveal-active .gs-hero-text {
  animation: gsFadeUp 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.4s; /* El texto sale un poco después */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bfee21a *//* Mantenemos el aspecto original, solo añadimos la capacidad de transicionar */
.gs-intro-line, .gs-intro-text {
    transition: all 2.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Estado inicial (Pre-animación) */
/* Solo se aplica si el navegador soporta animaciones para evitar que desaparezcan */
.gs-intro[data-gs-root] .gs-intro-line {
    transform: scaleX(0.2);
    opacity: 0;
}

.gs-intro[data-gs-root] .gs-intro-text {
    transform: translateY(15px);
    opacity: 0;
}

/* Estado Final (Cuando la sección entra en pantalla) */
.gs-intro.gs-active .gs-intro-line {
    transform: scaleX(1);
    opacity: 0.4; /* Opacidad original de tu diseño */
}

.gs-intro.gs-active .gs-intro-text {
    transform: translateY(0);
    opacity: 1;
}

/* Retardo elegante para el texto */
.gs-intro.gs-active .gs-intro-text {
    transition-delay: 0.2s;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b4b9f0c *//* Solo afecta al bloque que tenga la clase .gs-mirror */
.gs-mirror .gs-hero {
  direction: rtl !important;
}

/* Restauramos la lectura del texto de izquierda a derecha */
.gs-mirror .gs-hero-text, 
.gs-mirror .gs-hero-image {
  direction: ltr !important;
}

/* En móviles (menos de 680px) lo devolvemos al orden natural */
@media (max-width: 680px) {
  .gs-mirror .gs-hero {
    direction: ltr !important;
  }
}/* End custom CSS */