/* Tamaño por defecto para pantallas grandes (Escritorio y otros displays grandes) */
.mwai-icon-container {
  width: 150px !important;
  height: 150px !important;
}

.mwai-icon {
  width: 150px !important;
  height: 150px !important;
}

/* Ajustes para el texto y el botón de cierre en pantallas grandes */
.mwai-icon-text-container {
  font-size: 20px !important;
  padding: 10px !important;
}

.mwai-icon-text-close {
  font-size: 24px !important;
  right: 5px !important;
  top: 5px !important;
}

/* Para Tablets (ej. pantallas entre 601px y 1024px) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .mwai-icon-container {
    width: 125px !important;
    height: 125px !important;
  }

  .mwai-icon {
    width: 100px !important;
    height: 100px !important;
  }

  /* Ajustes para el texto y el botón de cierre en tablets */
  .mwai-icon-text-container {
    font-size: 18px !important;
    padding: 8px !important;
  }

  .mwai-icon-text-close {
    font-size: 20px !important;
    right: 4px !important;
    top: 4px !important;
  }
}

/* Para Móviles (ej. pantallas de 600px o menos) */
@media screen and (max-width: 600px) {
  .mwai-icon-container {
    width: 100px !important;
    height: 100px !important;
  }

  .mwai-icon {
    width: 80px !important;
    height: 80px !important;
  }

  /* Ajustes para el texto y el botón de cierre en móviles */
  .mwai-icon-text-container {
    font-size: 14px !important; /* REDUCIDO */
    padding: 4px !important;   /* REDUCIDO */
  }

  .mwai-icon-text-close {
    font-size: 18px !important;
    right: 3px !important;
    top: 3px !important;
  }
}


.mi-imagen {
  transition: all 0.7s ease;
  opacity: 0.5;
	z-index: 0;
	position: relative;

}

.mi-imagen:hover {
  transform: scale(1.15); /* Agranda la imagen */
  opacity: 1; /* Cambia la opacidad */
	z-index: 1;
}




/* Estilo base para los títulos */
.elementor-heading-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Cuando el título entra en vista */
.elementor-heading-title.in-view {
  opacity: 1;
  transform: translateY(0);
}




/* Estilo base del botón */
.boton-dinamico {
  position: relative;
  overflow: hidden;
  background-color: #3498db; /* color de fondo inicial */
  color: #fff;
  padding: 0px 0px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Pseudo-elemento para el efecto de fondo deslizante */
.boton-dinamico::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* empieza fuera del botón a la izquierda */
  width: 100%;
  height: 100%;
  background-color: rgba(55, 55, 255, 0.2); /* color del efecto, ajusta a tu gusto */
  transition: left 0.7s ease;
  z-index: 0;
}

/* Cuando pasas el cursor por encima */
.boton-dinamico:hover::before {
  left: 0; /* se desliza desde la izquierda hacia la derecha */
}

/* Asegúrate que el texto esté por encima del pseudo-elemento */
.boton-dinamico span {
  position: relative;
  z-index: 1;
}