/* Add styles here */
.text-shadow { text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); }
.icon-glow { filter: drop-shadow(0 0 10px rgba(74, 144, 226, 0.6)); }
.input-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.input-field { padding-left: 2.5rem !important; border: none; border-bottom: 2px solid #d1d5db; border-radius: 0; transition: border-color 0.3s; }
.input-field:focus { border-bottom-color: #3b82f6; box-shadow: none; ring: 0; }

/* --- Estilos para el Header con Efecto Glassmorphism --- */
header {
  background-color: rgba(255, 255, 255, 0.8) !important; /* Tailwind usa bg-white, usamos !important para sobreescribir */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
}

/* --- Estilos para el Menú Móvil Mejorado --- */
#menu-btn .icon-open,
#menu-btn .icon-close {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.icon-close {
    display: none;
}

.mobile-menu-overlay {
  transition: opacity 0.3s ease-in-out;
}

.mobile-menu-panel {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animación más suave */
}

/* --- Lógica de estado abierto --- */
body.menu-open {
  overflow: hidden;
}

body.menu-open #menu-btn .icon-open {
  transform: rotate(90deg);
  opacity: 0;
  display: none;
}

body.menu-open #menu-btn .icon-close {
  transform: rotate(0deg);
  opacity: 1;
  display: block;
}

body.menu-open .mobile-menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .mobile-menu-panel {
  transform: translateX(0);
}

.logo-transparent {
  mix-blend-mode: multiply;
}