/* --- 1. Define la animación de "pulso" (El sombreado naranja) --- */
@keyframes pulse-orange {
  0% {
    /* Sombra de 'resplandor' naranja, tamaño 0 */
    box-shadow: 0 0 0 0 rgba(232, 98, 12, 0.7);
  }
  70% {
    /* La sombra crece a 12px y se desvanece */
    box-shadow: 0 0 0 12px rgba(232, 98, 12, 0);
  }
  100% {
    /* Vuelve a 0 */
    box-shadow: 0 0 0 0 rgba(232, 98, 12, 0);
  }
}


/* --- 2. Estilos del "rectángulo" (El botón) --- */
li.nav-search-item a#search-toggle-button {
  /* El rectángulo */
  background-color: #e8620c; /* Tu color naranja */
  color: #fff !important; /* Texto blanco (importante para sobreescribir otros estilos) */
  padding: 10px 15px;      /* Relleno (puedes ajustarlo) */
  border-radius: 5px;      /* Esquinas redondeadas */
  
  /* Alineación de icono y texto */
  display: inline-flex;
  align-items: center;
  
  /* La animación de "marketing" */
  animation: pulse-orange 2s infinite;
  
  /* Transición para el hover */
  transition: all 0.3s ease-out;
}


/* --- 3. Estilos del icono y texto DENTRO del botón --- */
li.nav-search-item a#search-toggle-button .fa-magnifying-glass {
  font-size: 1.2em; /* Tamaño del icono */
  margin-right: 8px; /* Espacio entre lupa y texto */
}

li.nav-search-item a#search-toggle-button .search-text {
  font-size: 1em;
  font-weight: 500; /* Texto un poco más grueso */
  color: #fff;       /* Aseguramos que el texto sea blanco */
}


/* --- 4. Efecto al pasar el mouse (hover) --- */
li.nav-search-item a#search-toggle-button:hover {
  background-color: #d1570b; /* Naranja más oscuro */
  
  /* Al hacer hover, quitamos la animación de pulso y ponemos una sombra fija */
  animation: none; 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px); /* Efecto de 'levantar' */
}