.contenedor-equipos {
    bottom: 0;
    left: 0;
    top: 200px;
    height: auto; /* Cambiamos la altura a 'auto' para permitir múltiples líneas */
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Agregamos esta propiedad para permitir múltiples líneas */
    justify-content: space-around;
    align-content: flex-start;
    gap: 9px;
    background-color: #f0f0f0;
    
}

.equipos{
    width:70%;
     font-family:'qatar2022';  
 font-size:4em;
 display: flex;
 align-content: flex-end;
 align-items: center;  
 justify-content: center;
 letter-spacing: 1.5em;
}

  .equipos:hover {
    color: #ff0000; 
}


       .equipo {
    width: 25%;
    margin-top:7px;
    background-color: #fcfcfc;
    border: 2px solid #dddddd;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start; /* Alinea los elementos a la izquierda */
    align-items: center; /* Alinea verticalmente los elementos al centro */
    transition: transform 0.2s ease; 
}



.equipo:hover{
    border:1.5px solid grey;
    transform: translate(-2px, -2px);
}


.equipo-link {
    font-size: 100%;
    color: #007bff;
    flex: 1; /* Hace que el texto ocupe todo el espacio disponible en el contenedor */
    height: 35%;
    width: 100%;
    background-color: white;
    margin-bottom: 3%;
     margin-left:15px;  
     font-family: 'qatar2022';
     
       
}

.equipo-imagen {
    width: auto;
    height: 50px;
    order: -1; /* Cambia el orden para que la imagen esté a la derecha del texto */
}
                
    .equipo-link:hover {
    color: #ff0000; 
}

.equipo-imagen  img{
    transition: transform 0.2s ease;
  }
  
.equipo-imagen  img:hover{
     border:1.5px solid #007bff;
    transform: translate(-2px, -2px); 
  }
  
  .jugador-container {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.jugador-container.visible {
    opacity: 1;
}

  

    
       
     @media (max-width: 768px) {
         
          .contenedor-equipos {
    bottom: 0;
    left: 0;
    top: 100%;
    height: auto; /* Cambiamos la altura a 'auto' para permitir múltiples líneas */
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Agregamos esta propiedad para permitir múltiples líneas */
    justify-content: space-around;
    align-content: space-between;
    align-items: center;
    gap: 1px;
    background-color: #f0f0f0;
    /*padding-right:80px;*/
   padding-top: 5%; /* Porcentaje de espacio en la parte superior */
    padding-bottom: 5%;
    
}


        .equipo {
           width: 40%;
            background-color: #fcfcfc;
            border: 2px solid #dddddd;
            border-radius: 5px;
            text-align: left;
            display: flex;
            justify-content: center;
            align-content:center;
            margin-top:5%;
           
        }.equipos{
    width:70%;
     font-family:'qatar2022';  
 font-size:1.3em;
 display: flex;
 align-content: flex-end;
 align-items: center;
 justify-content: center;
 letter-spacing: .4em;
}
        
        .equipos:hover {
    color: #ff0000; 
}
        
        .equipo-imagen{
            width:auto;
            height:50px;
            z-index:0;
        }
     }