body {
      font-family: "Nunito";
      margin: 0;
      padding: 0;
      background-color: #f8f8f8;
      overflow-x: hidden;
    }

    header {
      text-align: center;
      padding: 20px;
      background-color: #333;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }



    header img {
      width: 300px;
    }

    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }

    .filter {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .filter select {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1rem;
    }

    .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }

    .category-title {
      text-align: center;
      color: #333;
      margin: 30px 0 30px;
      font-size: 2.3rem;
    }
    .card {
        position: relative;
        background: #000; /* Fondo negro para oscurecer el contenido */
        border-radius: 8px;
        overflow: hidden;
        text-align: left;
        height: 300px; /* Ajustar altura */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease; /* Animación para toda la tarjeta */
    }
    a{
      text-decoration: none !important;
    }


    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('https://scontent.fvup1-1.fna.fbcdn.net/v/t39.30808-6/301179788_112128268281281_729532399641010852_n.jpg?_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeGdZ_taQo5D2JewJZGUqplueVjWf9VBGpJ5WNZ_1UEaksA2rezmH3CMD1dahZpP2gKdXApVRVnn0-rQndTopnS6&_nc_ohc=rHhRPXAGAGQQ7kNvgETNOAJ&_nc_zt=23&_nc_ht=scontent.fvup1-1.fna&_nc_gid=A0zUsmcjeXh0fFZHe4G6S5L&oh=00_AYC31XWqJpC7jBJmBy8Ib3MOJpkKym2sHvKGGnW7u6ZwwQ&oe=675E9E27') no-repeat center/cover;
        z-index: 1;
        transition: transform 0.4s ease; 
    }

    .card:hover::before {
        transform: scale(1.1);
    }

    .info {
        position: relative;
        z-index: 2;
        padding: 15px;
        color: #fff;
        text-align: left;
        transition: background 0.3s ease; /* Transición para el fondo del texto */
    }



    .info h3 {
        font-size: 1.2rem;
        margin-bottom: 8px;
        color: #ecb055;
    }

    .info p {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.4;
        color: #fff;
    }

    .filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* Espacio entre el label y el select */
}

.filter label {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}

.filter select {
  appearance: none;
  -webkit-appearance: none; /* Para navegadores WebKit */
  -moz-appearance: none; /* Para Firefox */
  padding: 10px 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  color: #333;
  background-color: #f8f8f8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23333' d='M0 2l5 5 5-5H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  cursor: pointer;
}

.filter select:focus {
  outline: 2px solid #ecb055;
  border-color: #ecb055;
}


    footer {
      padding: 10px 0;
      text-align: center;
      font-size: 0.9rem;
    }

    footer a {
      text-decoration: none;
      color: #ecb055;
    }

    footer a:hover {
      text-decoration: underline;
    }

    .hidden {
      display: none;
    }

    .container-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
}

.text-section {
  max-width: 70%; /* Ajusta según sea necesario */
}

.filter {
  display: flex;
  align-items: center;
}

.filter label {
  margin-right: 10px;
}

select {
  padding: 5px;
  font-size: 16px;
}