.contenedor-principal{
     width:90%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row;
   justify-content: flex-start;
   align-content: flex-end;
}

.contenedor-equipos{
    margin-top:40px;
   width:100%;
    height:250px;
    display: flex;
    flex-direction: row;
   justify-content: flex-start;
   align-content: flex-start;  
   background-color: #f2f2f2;
}

.lado-izquierdo{
    width:90%;
 font-family: 'qatar2022';
  display: flex;
 justify-content: center;
 align-content: flex-start;
}

.nom-equipo{
   color:#007bff;
transition: color 0.3s;
font-size:4em;
 display: flex;
 justify-content: flex-start;
 align-content: flex-start;  
}

.nom-equipo:hover {
  color: #ff0000;
}

.left{
  width:70%;
    height:auto;   
    border-radius: 10px;
    background-color: #f0f0f0;
    margin-left:.7em;
     
}

.left img{
    width:70%;
    height:120%;
   box-shadow: 10px 10px 10px grey; 
    border-radius: 15px;
    z-index:3;
  }
.derecho{
 width:40%;
    height:auto;
    display: flex;
    justify-content: center;
    align-content: center;
           
             
    }
    
    .derecho img{
      height:100%;  
       width:auto;
    margin-top:1.5em;   
    margin-right:3em;    
      box-shadow: 10px 10px 10px grey;  
      border-radius: 10px;
    }
   
  
.derecho{
 width:40%;
    height:auto;
    display: flex;
    justify-content: center;
    align-content: center;
          
             
    }

  img{
    transition: transform 0.2s ease;
  }
  img:hover{
     border:3px solid grey;
    transform: translate(-2px, -2px); 
 
  }
  

.informacion{
    margin-top:60px;
   width:100%;
    height:270px;
   /*border: 1px solid green;*/
    display: flex;
    justify-content: center;
    align-content: flex-start;
        } 
    .sub-informacion{
 width:80%;
    height:100%;
  /* border: 1px solid blue; */
    display: flex;
    justify-content: center;
    align-content: flex-start;
    gap: 10px;
    }
    
    
.info1{
 width:25%;
    height:100%;   
    border: 1px solid #007bff; 
    background-color: #f5f5f5;
    border-radius: 10px;
    gap:10px;
    display: block; 
 align-items: center;
  text-align: left;
  font-size:1em;
  margin-right:70px;
 
}

.info2, .info4, info{
 width:25%;
    height:100%;   
    border: 1px solid #b3b3b3; 
    background-color: #f5f5f5;
    border-radius: 10px;
    gap:10px;
    display: block; 
 align-items: center;
  text-align: left;
  margin-bottom: 5px;
  font-size:1em; 
  
}



.info3{
width:45%;
height:100%;
 border: 1px solid #b3b3b3; 
background-color: #f5f5f5;
border-radius: 10px;
text-align: center;
    
}

.NumJugadores{
    margin-top:5px;
    
}

.ADT{
      margin-top:5px;    
}

.historia{
 margin-top:5px;     

}

.uniforme{
 margin-top:5px;     

}

.uniforme-equipo {
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden; 
}

.uniforme-equipo img {
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}
  .resultadoRojo {
    color: #ff0000;
    font-weight: bold;
    font-size:1em;
}

.info-gral-jugador{
    height:auto;
     position:absolute;
     top:49rem;
     border:1px solid #b3b3b3;
     border-radius:10px;
     }



 @media (max-width: 768px) {
 .contenedor-principal{
     width:90%;
    height:50%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row;
   justify-content: flex-start;
   align-content: flex-start;
}
.lado-izquierdo{
    width:50%;
 font-family: 'qatar2022';
  display: flex;
 justify-content: center;
 align-content: flex-start;
}

.contenedor-equipos{
   width:100%;
    height:6rem;
    display: flex;
    flex-direction: row;
   justify-content: flex-start;
   align-content: flex-start;  
   background-color: #f2f2f2;
}


.nom-equipo{
   color:#007bff;
transition: color 0.3s;
font-size:1em;
 display: flex;
 justify-content: flex-start;
 align-content: flex-start;  
}

.nom-equipo:hover {
  color: #ff0000;
}

 


    
    .left{
    width:80%;
    height:100%;   
    display: flex;
    justify-content: center;
    align-content: center;
    margin-left:1em;
    
             
}


.left img{
      width:100%;
    height:100%; 
   box-shadow: 10px 5px 10px grey; 
    border-radius: 10px;
    transition: transform 0.2s ease;  }
  
 
  
.left:hover  img{
     border:1.5px solid #007bff;;
    transform: translate(-2px, -2px); 
  }

.derecho{
 width:50%;
    height:90%;
    display: flex;
    justify-content: center;
    align-content: center;
          
    }


 .derecho img{
      height:80%;  
       width:auto;
       margin:auto;
   right:.25em;    
      box-shadow: 10px 5px 10px grey;  
      border-radius: 5px;
      background-color: #f0f0f0;
    }
    
    
    .informacion{
    margin-top:50px;
   width:100%;
    height:100px;
  /* border: 1px solid green;*/
    display: flex;
            justify-content: center;
            align-content: flex-start;  
            
} 

    .sub-informacion{
 width:90%;
    height:auto;
  /* border: 1px solid blue; */
    display: flex;
            justify-content: center;
            align-content: flex-start;
             gap: 10px;
               flex-wrap: wrap;
    }
    
    
.info1{
 width:25%;
     height:auto;   
    border: 1px solid #007bff; 
    background-color: #f5f5f5;
    border-radius: 10px;
    gap:10px;
      flex: 1;
            flex-basis: auto;
            flex-grow: 1;
}

.info2, .info3{
 width:25%;
    height:auto;   
    border: 1px solid #b3b3b3; 
    background-color: #f5f5f5;
    border-radius: 10px;
    gap:10px;
      flex: 1;
            flex-basis: auto;
            flex-grow: 1;
}            
            .info1, .info2, .info3 {
    min-height: 50%; /* o cualquier otro valor */
            }    
    
    .info1, .info2, .info3,  .info{
        margin-left:1em;
margin-bottom: 10px;    
font-size:.5em; 

}

.info4{
    width:35%;
    height:auto;   
   /* border: 1px solid #b3b3b3; */
    background-color: #f5f5f5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
   
}

.uniforme-equipo {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:15%;
}

.uniforme-equipo img {
    max-width: 100%; 
    max-height: 100%; 
 border-radius: 10px;
}

.info-gral-jugador{
     width:100%;
top:33rem;
   border:1px solid #b3b3b3;
     border-radius:10px;
     
}
.info-jugador{
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

 img{
    transition: transform 0.2s ease;
  }
  img:hover{
     border:1.5px solid grey;
    transform: translate(-2px, -2px); 
 
  }
 }