/* /css/styles.css */

/* Soporte para dropdown idioma en click y hover */
.language-dropdown {
  display: none;
  /* El estilo original tailwind para dropdown
     será manejado por clases hidden o no */
}
.language-dropdown {
  /* Soporte para dispositivos táctiles - mostrarse al hacer click, no solo hover */
  display: none;
}
.language-selector.open .language-dropdown {
  display: block;
}

.language-selector:hover .language-dropdown {
  display: block; /* Soporte hover tradicional */
}

.language-selector .language-dropdown:not(.hidden) {
  display: block; /* Soporte click toggle */
}

/* Para manejar foco accesible */
.language-selector button:focus + .language-dropdown,
.language-dropdown:focus-within {
  display: block;
}

/* Opcional: animación suave para acordeón */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cambio sutil al pasar sobre cards de servicio */
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Whatsapp botón flotante */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.whatsapp-float:hover {
  background-color: #128c7e;
  transform: scale(1.1);
}

/* Estilos de foco para mejores accesibilidad */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #4cb3a5;
  outline-offset: 2px;
}
.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(76, 179, 165, 0.9) 0%,
    rgba(76, 179, 165, 0.7) 100%
  );
}
/* Animaciones suaves NOÍLA */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 1.2s ease-out forwards;
}

.fade-delay-1 {
  animation-delay: 0.2s;
}
.fade-delay-2 {
  animation-delay: 0.4s;
}
.fade-delay-3 {
  animation-delay: 0.6s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Evitar espacio en nombre imagen (ejemplo) */
/* No CSS, solo nota: renombra archivos para evitar espacios */