/*------ main ------- */
.main{
    padding: 3.1em;
    gap: 1.8em;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(39em, 1fr));
    /* grid-template-columns: 1fr 1fr; */
    width: 100%;

}

/*----- seccion1 ----*/
.seccion1{
    
    border-top-right-radius: 50px;
    border-top: 10px solid #F20400;
    border-right: 10px solid #F20400;
    padding: 1.7em 1.7em 0 0;
    width: 100%;

    & h2{
        font-size: 2.2em;
        padding: 0 0 1.2em 0;
    }
    a{
        color: #000;
    }
    a:hover{
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    img{
        object-fit: cover;
        width: 100% /*40em*/;
    }
}
/*--------------------*/

/*----- seccion2 ----*/
.seccion2{
    display: grid;
    grid-template-columns: repeat(auto-fit, 19em);
    place-content: center;
    gap: 1.8em;

    width: 100%;

    & .card{
        border-bottom: solid 1px #38383F;
        border-right: solid 1px #38383F;
        border-bottom-right-radius: 42px;
        overflow: hidden;

        & .container_h3{
            width: 100%;
            background-color: #fff;
            border-bottom-right-radius: 42px;
            transition: all .6s;
        }
        
        h3{
            transition: all .6s;
            
            width: 18em;
            font-size: 1em;
            padding: 1em 1.25em;
            
            color: #000;
            background-color: #fff;
        }
    }
    
    .card:hover{
        border-right: solid 1px #F20400;
        border-bottom: solid 1px #F20400;
        
        & .container_h3{
            transform: translateY(-1em);
        }
        h3{
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        img{
            transform: scale(1.1);
        }
    }

    img{
        object-fit: cover;
        width: 20.6em;
        height: 10em;
        transition: all .6s;
    }
    button{
        align-self: end;
        width: 13.8em;
        height: 3.3em;

        background-color: #F20400;
        border: solid 3px #F20400;
        border-radius: 9px;

        transition: all .5s;
    }

    button:hover{
        background-color: #fff;
        cursor: pointer;

        & a{
            color: #000;
            text-underline-offset: 4px;
        }
        span{
            color: #F20400;
        }
    }

    button > a{
        font-size: 1.1em;
        color: #fff;
        padding: .7em 1.5em;
    }

}
/*--------------------*/

/*------ seccion 3----*/
.seccion3{
    border: 8px solid #F20400;
    border-left: none;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative;
    margin: 2em 3.6em 0 3.1em;

    & .contenedor_de_partes{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(38.75em, 1fr));
        margin: 2em 0;
        width: 100%;
    
        & .part1 h5{
            font-size: 1.2em;
            margin: 2em 0;
            cursor: default;
        }

        .part1 iframe{
            width: 35em;
            height: 19.6em;
        }

        .part2{
            margin: 0 5em;
            /* height: 5em; */
            & p{
                font-size: 1.48em;
                width: 100%;
                word-wrap: break-word;
            }
        }
    }

    .titulo_s3{
        font-size: 1.8em;
        
        position: absolute;
        z-index: 10;
        top: -.9em;

        background-color: #fff;
        width: 8em;
        cursor: default;
    }

}

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

/*----- seccionn 4 -----*/
.seccion4{
    margin: 5em 3.6em 4em 3.1em;
    
    & .titulo_s4{
        font-size: 2em;
        padding: .5em 0;
        margin-bottom: 1em;
        border-bottom: 10px solid #15151E;
        cursor: default;
    }

    .contenedor_noticias_s4{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(21.2em, 1fr));
        place-items: center;
        gap: 1em;
    }

    .noticias{
        max-width: 21.2em;
        display: flex;
        flex-direction: column;
        align-items: center;

        border: solid 2px #fff;
        border-top: none;
        border-bottom-left-radius: 1.5em;
        border-bottom-right-radius: 1.5em;

        overflow: hidden;
        transition: all .5s;
    }

    .noticias:hover{
        background-color: #15151E;
        border-color: #F20400;
        & h5{
            color: #fff;
        }
        .contenedor_titulo_noticia{
            transform: translateY(-1.5em);
            background-color: #15151E;
        }
        img{
            transform: scale(1.1);
        }
        h5{
            text-decoration: underline;
            text-underline-offset: 4px;
        }
    }
    
    
    .contenedor_titulo_noticia{
        width: 100%;
        height: 8em;
        display: flex;
        align-items: center;
        padding-left: 1.7em;
        background-color: #fff;
        transition: all .5s;
    }
    
    .noticias h5{
        font-size: 1em;
        color: #000;
    }


    img{
        object-fit: cover;
        width: 21.2em;
        height: 15em;
        transition: all .5s;
    }
}
/*--------------------*/

@media screen and (max-width: 1355px) {
    .part1{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

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

    .main{
        padding: 1em;

        & .seccion1 h2{
            font-size: 1.8em;
        }
    }

    .seccion1,
    .seccion2{
        width: 90vw !important;
    }

    .seccion2{
        align-items: center;
        place-items: center;
    }

    .seccion3{
        width: 90vw;
        margin:  2em 1em;

        & .contenedor_de_partes{
            margin: 0 !important;
            grid-template-columns: 1fr !important;
            padding: 2em;
        }
    
        .part1{
            margin-top: 0em !important;
            font-size: .9em;
        }
        .part2{
            margin: 0 !important;
            font-size: .9em;
        }
    
        .part1 iframe{
            max-width: 100%;
            min-height: 20em;
        }
        .part2 p{
            word-wrap: break-word;
        }
    
    }

    .seccion4{
        margin: 1em 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        & .titulo_s4{
            width: 80%;
        }
    }
}


@media screen and (max-width: 550px) {
    .seccion3 .part2 p{
        font-size: 1.2em !important;
    }
}