*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos Generales */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    
}

/* Contenedor principal */
.contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    height: 100vh;
}

/* Sección Local */
.local {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.localContenido{

    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.localContenido img{

    width: 500px;
    cursor: pointer;
    border-radius: 12px;
}

.local h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    background: linear-gradient(#f81c1c, #7bb8fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.local h2 a {
    color: #0066cc;
    text-decoration: none;
    font-size: 1.2rem;
}

.local h2 a:hover {
    text-decoration: underline;
}

.local model-viewer{

    width: 250px;
    height: 250px;
    
}

/* Sección de Equipos de Primera División */
.equipos {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.equipos h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    background: linear-gradient(#080808, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.lista-equipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.equipo {
    text-align: center;
}

.equipo h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
   
}

.equipo h2 a{

    text-decoration: none;
    color: #f4f4f4;
}

.equipo:nth-child(1) h2{

    background: linear-gradient(135deg, #d4af37, #002f6c);
   
}

.equipo:nth-child(2) h2{

    background: linear-gradient(to right, #a50044, #004d98);
  
}

.equipo:nth-child(3) h2{

    background: linear-gradient(135deg, #cc092f, #0033a0);
   
}

.equipo:nth-child(4) h2{

    background: linear-gradient(135deg, #ff0000, #ff6666);
   
}
.equipo:nth-child(5) h2{

    background: linear-gradient(135deg, #007a33, #00a650);
   
}

.equipo:nth-child(6) h2{

    
    background: linear-gradient(135deg, #ff8500, #000000);
}
.equipo:nth-child(7) h2{

    background: linear-gradient(135deg, #ffcc00, #0033a0);
   
}

.equipo:nth-child(8) h2{

    
    background: linear-gradient(135deg, #0056a6, #009fe3);
}
.equipo:nth-child(9) h2{

    background: linear-gradient(135deg, #e50000, #000000);
   
}

.equipo:nth-child(10) h2{

    
    background: linear-gradient(135deg, #d6001c, #ffcc00);
}
.equipo:nth-child(11) h2{

    background: linear-gradient(135deg, #4b0082, #8a2be2);
   
}

.equipo:nth-child(12) h2{

    
    background: linear-gradient(135deg, #d6001c, #ff6666);
}

.equipo:nth-child(13) h2{

    background: linear-gradient(135deg, #2a7fa7, #00a9b7);
   
}

.equipo:nth-child(14) h2{

    
    background: linear-gradient(135deg, #005ca3, #d0021b);
}
.equipo:nth-child(15) h2{

    
    background: linear-gradient(135deg, #e60012,#ffffff);
}
.equipo:nth-child(16) h2{

    
    background: linear-gradient(135deg, #003b5c, #003b5c);
}
.equipo:nth-child(17) h2{

    
    background: linear-gradient(135deg, #d6001c, #ffcc00);


}
.equipo:nth-child(18) h2{

    
    background: linear-gradient(135deg, #FFD700, #004B87);


}
.equipo:nth-child(19) h2{

    
    background: linear-gradient(135deg, #005fa3, #005fa3);


}
.equipo:nth-child(20) h2{

    
    background: linear-gradient(135deg, #cc0033, #003b5c);


}

.equipo model-viewer {
    
    width: 150px; /* Limitar el tamaño de los escudos */
    margin-top: 10px;
}

footer{

    width: 100%;
    height: 10px;
    margin: 20px;
}

.volverInicio {
    display: inline-block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #FFD700;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.volverInicio:hover {
    background-color: #FFC107;
}

/* Responsividad */
@media (max-width: 600px) {
    .contenedor {
        padding: 0px;
    }

    .localContenido img{

        width: 100%;
    }

    .equipo{

      text-align: left;
    }
    .local h1 {
        font-size: 1.3rem;
    
    }

}