.main_resultados{
    margin: 1em 4em 1em 3em;
}

.campeonato_constructores,
.campeonato_pilotos{
    width: 100%;
    margin-bottom: 7em;
}

.titulo_resultados{
    font-size: 2em;

    border-bottom: 5px solid #F20400;
    padding: .5em 0;
    margin-bottom: 1.5em;
    cursor: default;
}

.contenedor_puesto_constructores{
    width: 11em;
    display: flex;
    align-items: center;
    gap: 1.5em;

    & h5{
        font-size: 1.1em;
    }
}
.podio_constructores,
.equipos_constructores{
    padding: 0 2em;
}


.podio_c{
    color: #000;
    border-right: 2px solid #929292;
    border-top: 2px solid #929292;
    border-top-right-radius: 1em;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 3em;

    font-size: 1.5em;
    padding-right: 1em;
    margin-bottom: 1em;

    transition: all .2s;

    & .contenedor_img_equipo > img{
        height: 80%;
    }

    .titulo_equipo_constructor span{
        margin-right: .5em;
    }
}

.puntos{
    width: 3em;
    justify-self: end;

    & .num{
        text-align: center;
        transition: all .2s;

    }

    .pts{
        font-size: .8em;
        text-align: center;
        background-color: #000;
        color: #fff;
        border-radius: 1em;
        transition: all .2s;
    }

}

.podio_constructores a:hover,
.equipos_constructores a:hover{
    border-right: 2px solid #F20400;
    border-top: 2px solid #F20400;

    & .puntos .num{
        color: #F20400;
    }

    .puntos .pts{
        background-color: #F20400;
    }
}

/*---------------------------------------------------------------------------------------------------*/


/*------------------------------- los demas equipos en constructores---------------------------------*/

.equipos_constructores{
    margin-top: 5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5em;
}

.equipos_constructores a:hover{
    border: 2px solid #F20400;

    & .puntos .num{
        color: #F20400;
    }

    .puntos .pts{
        background-color: #F20400;
    }
}

.demas_equipos{
    color: #000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 3em;

    padding: 0 1em;
    margin-bottom: 1em;

    border: 2px solid #929292;
    border-radius: 1em;

    & img{
        width: 3em;
    }

    .titulo_equipo_constructor span{
        margin-right: .5em;
    }
}
/*---------------------------------------------------------------------------------------------------*/






/*--------------------------------------PILOTOS------------------------------------------------------*/
.campeonato_pilotos,
.contenedor_demas_pilotos{
    margin-bottom: 5em;
}

.podio_pilotos,
.contenedor_demas_pilotos{
    padding: 0 2em;
}

.campeonato_pilotos .titulo_resultados{
    margin: 1em 0 1.5em 0;
}
.podio_pilotos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    min-height: 19em;
}


.podio_p1,
.podio_p2,
.podio_p3{
    & .imagen_podios{
        width: 13em;
    }
}

.podio_p1,
.podio_p2,
.podio_p3{
    min-width: 13em;
    min-height: 15em;
    display: flex;
    align-items: end;
    justify-content: center;
    
    & .fondo_del_piloto{
        background-image: url(../assets/img/circuitos/fondo/img_plus_fondo_de_circuitos_oscuro.png);
        background-size: 10px;

        background-color: #15151E;
        border-radius: 1.5em;
        border-bottom-left-radius: 0;

        display: flex;
        flex-direction: column;
        justify-content: end;

        position: relative;
    }


    .fondo_del_piloto .nombre_piloto{
        padding: .3em 1.5em;

        display: flex;

        background-color: #fff;
        border-bottom: solid 2px #929292;
        border-right: solid 2px #929292;

        & p{
            font-size: 1.3em;
            width: 100%;
            color: #000;
            padding: 0 .2em;
        }

        :first-child{
            text-align: end;
        }

        :last-child{
            text-align: start;
        }
    }
    .fondo_del_piloto .segundo_renglon{
        padding: .3em 1.5em;

        display: flex;
        justify-content: space-between;
        align-items: center;

        background-color: #fff;
        border-bottom-right-radius: 1em;
        border-bottom: solid 2px #929292;
        border-right: solid 2px #929292;
        
        & div{

            & .num{
                color: #000;
                text-align: center;
            }

            .pts{
                background-color: #000;
                color: #fff;
                padding: .1em .5em;
                border-radius: 1em;
                font-size: .8em;
            }
        }
        
        
        img{
            width: 3.3em;
        }
    }
}

.podio_p2 .fondo_del_piloto{
    height: 14.5em;
}
.podio_p1 .fondo_del_piloto{
    height: 16em;
}
.podio_p3 .fondo_del_piloto{
    height: 12.5em;
}

.copa{
    width: 1.5em;
    position: absolute;
    top: .5em;
    right: .5em;
}

.podio_p3 .copa{
    width: 35px;
    top: .1em;
    right: .2em;
}

.imagen_podios{
    transition: all .2s;
}
.podio_p1:hover .imagen_podios{
    filter: drop-shadow(0px -5px 10px #ffc800);
}
.podio_p2:hover .imagen_podios{
    filter: drop-shadow(0px -5px 10px #C0C0C0);
}
.podio_p3:hover .imagen_podios{
    filter: drop-shadow(0px -5px 10px #F9AA79);
}


.nombre_piloto,
.nombre_piloto,
.nombre_piloto,
.segundo_renglon,
.segundo_renglon,
.segundo_renglon,
.segundo_renglon p{
    transition: all .2s;
}

.podio_p1:hover .nombre_piloto,
.podio_p2:hover .nombre_piloto,
.podio_p3:hover .nombre_piloto{
    border-right: solid 2px red;
}

.podio_p1:hover .segundo_renglon,
.podio_p2:hover .segundo_renglon,
.podio_p3:hover .segundo_renglon{
    border-right: solid 2px #F20400;
    border-bottom: solid 2px #F20400;
}

.podio_p1:hover .num,
.podio_p2:hover .num,
.podio_p3:hover .num{
    color: #F20400 !important;
}

.podio_p1:hover .segundo_renglon .pts,
.podio_p2:hover .segundo_renglon .pts,
.podio_p3:hover .segundo_renglon .pts{
    background-color: #F20400 !important;
}






.contenedor_demas_pilotos{
    margin-top: 3.5em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27.13em, 1fr)); /*12.19em*/
    gap: 1em ;
}

.otro_piloto{
    transition: all .2s;
    min-height: 5em;
    padding: .5em 1em;
    /* display: flex;
    flex-direction: column; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: .5em;

    color: #000;
    border: 2px solid #929292;
    border-radius: 1em;


    & .div1{
        display: flex;
        justify-self: start;
        gap: 1em;
    } 
    .div2{
        width: 10em;
        display: flex;
        justify-content: space-between;
    } 

    .piloto_chiquito{
        width: 4em;
    }

    .logo_team_chiquito{
        width: 4em;
    }

    .puntos{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1em;

        & .pts{
            transition: all .2s;
            padding: .5em;
        }
    }
}


.otro_piloto:hover{
    border: solid 2px #F20400;
    transform: scaleY(1.03);
}


.otro_piloto:hover .num{
    color: #F20400;
}
.otro_piloto:hover .pts{
    background-color: #F20400;

}















/*---------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1355px) {
    .equipos_constructores{
        grid-template-columns: 1fr;

        & .contenedor_puesto_constructores{
            width: 5em;
        }
    }
}


@media screen and (max-width: 750px) {

    .main_resultados{
        margin: 1em;
    }

    .campeonato_pilotos .titulo_resultados{
        margin: 1.5em 0 2.5em 0;
    }

    .podio_c{
        display: flex;
        flex-direction: column;
        gap: 1em;

        padding-top: 1em;
        padding-bottom: 1em;
    }

    .podio_constructores,
    .equipos_constructores{
        padding: 0;
    }
    .demas_equipos > img{
        justify-self: end;
    }



    .podio_pilotos,
    .contenedor_demas_pilotos{
        padding: 0 2em;
    }

    .contenedor_demas_pilotos{
        grid-template-columns: 1fr;
    }

    .otro_piloto{
        gap: 2em;
    }

    .podio_pilotos{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .podio_pilotos .podio_p1{
        order: 1;
        grid-column: 1/3;
        margin-bottom: 5em;
    }
    .podio_pilotos .podio_p2{
        order: 2;
    }
    .podio_pilotos .podio_p3{
        order: 3;
    }
}

@media screen and (max-width: 500px){
    .otro_piloto{
        grid-template-columns: 1fr 1fr;

        & .div1{
            order: 1;
            justify-self: center;
        }
        
        .div2{
            order: 3;
            grid-column: 1/3;
            justify-self: center;
        }
        .puntos{
            order: 2;
            justify-self: center;

        }
    }

}

@media screen and (max-width: 450px){
    .podio_pilotos{
        display: flex;
        flex-direction: column;
    }

    .podio_pilotos .podio_p2{
        margin-bottom: 5em;
    }

}