.elementor-1849 .elementor-element.elementor-element-7da5d86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1849 .elementor-element.elementor-element-33c570f{--spacer-size:50px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), ANTA;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1849 .elementor-element.elementor-element-b069e3d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1849 .elementor-element.elementor-element-b069e3d img{width:55%;filter:brightness( 180% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 212deg );border-style:none;}@media(max-width:1024px){.elementor-1849 .elementor-element.elementor-element-b069e3d{width:var( --container-widget-width, 721.891px );max-width:721.891px;--container-widget-width:721.891px;--container-widget-flex-grow:0;}}@media(max-width:767px){.elementor-1849 .elementor-element.elementor-element-b069e3d{width:var( --container-widget-width, 297.344px );max-width:297.344px;--container-widget-width:297.344px;--container-widget-flex-grow:0;}.elementor-1849 .elementor-element.elementor-element-b069e3d img{width:100%;max-width:100%;}}/* Start custom CSS for image, class: .elementor-element-b069e3d *//* Estilo básico de la imagen (invertido en todos los dispositivos) */
.img-negativo {
  filter: invert(1); /* Aplica un filtro de negativo (invertir los colores) */
  transition: filter 0.3s ease, transform 0.5s ease; /* Transición suave para el cambio de filtro y el tamaño */
  opacity: 0; /* Inicialmente invisible */
  animation: fadeIn 1s forwards, slideUp 1s forwards; /* Animaciones de entrada */
}

/* Animación de entrada: Fade-in + Slide-up */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Efecto cuando el cursor pasa sobre la imagen (solo en escritorio) */
.img-negativo:hover {
  filter: invert(0); /* Vuelve a su estado normal (positivo) */
  transform: scale(1.1); /* Aumenta el tamaño ligeramente */
}

/* No cambiar el filtro al hacer clic (en dispositivos móviles) */
.img-negativo:active {
  filter: invert(1); /* Mantiene el filtro de negativo incluso cuando se hace clic */
}

/* Establecer comportamiento en dispositivos móviles (y tabletas) */
@media (max-width: 768px) {
  .img-negativo {
    filter: invert(1); /* Mantener la imagen invertida (negativa) también en móviles */
    width: 90%; /* Ajustar el tamaño de la imagen en móviles */
  }

  /* Quitar el efecto hover en móviles */
  .img-negativo:hover {
    filter: invert(1); /* Mantener la imagen invertida (negativa) en móviles */
    transform: scale(1); /* No aumentar el tamaño en móviles */
  }
}

/* Ajustes específicos para pantallas más pequeñas (tabletas) */
@media (max-width: 768px) { 
  .mensaje {
    font-size: 8vw; /* Tamaño de fuente más pequeño en tabletas */
  }
  .img-negativo {
    width: 90%; /* Ajustar tamaño de imagen en tabletas */
  }
}

/* Ajustes específicos para pantallas aún más pequeñas (móviles) */
@media (max-width: 480px) {
  .mensaje {
    font-size: 10vw; /* Tamaño de fuente más pequeño en móviles */
  }
  .img-negativo {
    width: 100%; /* Ajustar tamaño de imagen para ocupar el 100% del ancho del contenedor */
  }
}

/* Estilo del mensaje "PRÓXIMAMENTE" */
.mensaje {
  font-size: 6vw; /* Tamaño de la fuente ajustado a la anchura de la ventana */
  font-weight: bold;
  color: black; /* Color negro por defecto */
  text-transform: uppercase; /* Para que se vea en mayúsculas */
  letter-spacing: 3px; /* Espaciado entre las letras */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  transition: color 0.3s ease, transform 0.5s ease; /* Transición suave para el color y transformaciones */
  
  /* Sombra de texto más pronunciada */
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), -4px -4px 10px rgba(0, 0, 0, 0.4); /* Sombra doble para dar más profundidad */
  opacity: 0; /* Inicialmente el texto es invisible */
  animation: fadeIn 1s forwards, slideUp 1s forwards; /* Animaciones de entrada */
}

/* Animación de entrada: Fade-in + Slide-up */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Efecto hover solo para escritorio */
@media (min-width: 769px) {
  .mensaje:hover {
    color: white; /* Cambia el color a blanco al pasar el cursor */
    transform: scale(1.1); /* Aumenta el tamaño ligeramente al hacer hover */
  }
}/* End custom CSS */