@font-face {
  font-family: "FontAwesome";
  src: url("assets/fonts/fontawesome-webfont.eot?v=4.6.3");
  src: url("assets/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3")
      format("embedded-opentype"),
    url("assets/fonts/fontawesome-webfont.woff2?v=4.6.3") format("woff2"),
    url("assets/fonts/fontawesome-webfont.woff?v=4.6.3") format("woff"),
    url("assets/fonts/fontawesome-webfont.ttf?v=4.6.3") format("truetype"),
    url("assets/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Contenedor general del buscador + chips */
.courses-filter{
  width:100%;
  margin:10px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Input de búsqueda */
.courses-search input{
  width:100%;
  padding:8px 14px;
  border:1px solid #ccc;
  border-radius:999px;
  font-size:.95rem;
  font-family:'Lato', Arial, sans-serif;
  box-sizing:border-box;
}

/* Contenedor de chips */
.courses-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Botones tipo chip */
/* Botones tipo chip */
.chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #e30b05;
  font-size: .85rem;
  font-family: 'Lato', Arial, sans-serif;
  cursor: pointer;

  /* ✅ Ola de abajo a arriba: blanco → rojo */
  background: linear-gradient(
    to top,
    #e30b05 50%,   /* ← color hover (rojo, mitad inferior) */
    #ffffff 50%    /* ← color base  (blanco, mitad superior) */
  );
  background-size:     100% 200%;
  background-position: 0% 0%;    /* muestra el blanco al inicio */
  color: #e30b05;

  transition:
    background-position 0.25s ease-out,
    color               0.2s  ease-out,
    box-shadow          0.2s  ease,
    transform           0.2s  ease-out;
}

/* ✅ HOVER: ola sube + texto pasa a blanco */
.chip:hover {
  background-position: 0% 100%;
  color: #fff;
  box-shadow: 0 4px 12px rgba(227, 11, 5, 0.30);
  transform: translateY(-1px);
}

/* ✅ Chip activo — forzado al estado relleno directamente */
.chip.chip-active {
  background-position: 0% 100%;
  color: #fff;
  box-shadow: 0 2px 8px rgba(227, 11, 5, 0.20);
}


.courses-search input {
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(227, 11, 5, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 118, 92, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 118, 92, 0);
  }
}

.courses-search {
  position: relative;
}

.courses-search::after {
  content: "\f002";
  font-family: "FontAwesome"; /* correcto en FA4 */
  font-weight: normal;        /* obligatorio */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  pointer-events: none;
  opacity: 0.7;
  animation: wiggle 2.8s ease-in-out infinite;
}

.courses-search input {
  padding-right: 40px;
}

@keyframes wiggle {
  0%, 80%, 100% { transform: translateY(-50%) rotate(0deg); }
  85% { transform: translateY(-50%) rotate(12deg); }
  90% { transform: translateY(-50%) rotate(-12deg); }
  95% { transform: translateY(-50%) rotate(6deg); }
}

/* Responsivo */
@media screen and (max-width:800px){
  .courses-filter{
    margin-top:5px;
  }
}

@media screen and (max-width:500px){
  .courses-chips{
    gap:6px;
  }
  .chip{
    font-size:.8rem;
    padding:5px 10px;
  }
}