h1, h2, h3{
    color: var(--blanco);
    text-shadow: 0 0 4px rgba(0,0,0,.75);
    line-height: 1.35em;
}
.logo-asd{
    width: 250px;
    background: rgba(0,0,0,.1);
    padding: 10px 15px;
    border-radius: 5px;
}
main{
    background: rgba(0,0,0,.6);
    background: linear-gradient(90deg, rgba(10,30,30,.7) 15%, rgba(10,10,30,0.2) 85%);
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
}
    /*Textos*/
    main #izq{
        width: 100%;
        height: 100vh;
        display: grid;
        align-items: center;
    }
        main #izq div{
            margin-left: 5%;
            width: 80%;
            max-width: 0 auto;
        }
    /*Formulario*/
    #der {
        display: grid;
        align-content: center;
    }
        #der h2{
            text-align: center;
            background: var(--asd);
            padding: 25px 5%;
            margin: 0;
        }
        #der form{
            background: var(--gris-30);
            padding: 30px 20px;
            width: 100%;
            max-width: auto;
        }
            #der form input,
            #der form textarea{
                padding: 7px;
                width: 100%;
                margin-bottom: 7px;
            }
                #der form input{
                    height: 40px;
                }
                #der form textarea{
                    height: 70px;
                }
        #der form div{
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-gap: 5px;
            align-items: center;
            justify-items: center;
        }
            #der form div p{
                color: var(--blanco);
                margin-bottom: 6px;
                font-size: 17px;
            }
            #der form div #cod{
                grid-column: 1/2;
            }
            #der form div input:first-of-type{
                grid-column: 2/4;
            }
            #der form div #telefono{
                grid-column: 4/5;
            }
            #der form div input:last-of-type{
                grid-column: 5/-1;
            }
        #der form input[type="submit"]{
            background: var(--green);
            color: var(--blanco);
            font-weight: 700;
            font-size: 16px;
            text-shadow: 0 0 4px rgba(0,0,0,.4);
            height: 50px;
        }
            #der form input[type="submit"]:hover{
                background: var(--green-o);
                color: var(--blanco);
                font-weight: 700;
                font-size: 16px;
                text-shadow: 0 0 4px rgba(0,0,0,.4);
                height: 50px;
            }
/*cursos relacionados*/
#relacionados{
    display: grid;
    margin-top: 510px;
}
#cursos-relacionados{
    display: grid;
    grid-auto-flow: row;
}
    #relacionados h2{
        grid-column: 1/-1;
        text-align: center;
        background: var(--asd-o);
        padding: 25px 5%;
        margin: 0;
    }
    #cursos-relacionados a{
        padding: 20px;
        text-align: center;
        background: var(--gris-230);
    }
        #cursos-relacionados a:hover{
            background: var(--gris-210);
        }
        #cursos-relacionados a img{
            width: 100%;
            max-width: 600px;
            filter: grayscale(1);
            transition: all .2s ease;
        }
            #cursos-relacionados a:hover img{
                filter: grayscale(0);
            }
        #cursos-relacionados a h4{
            color: var(--asd-o);
            padding: 10px;
            text-shadow: hoff voff blur #000;
        }
@media screen and (min-width: 768px) {
    main{
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
        main #izq div{
            margin-left: 5%;
            width: 100%;
            max-width: 650px;
        }
    #der form{
        background: var(--gris-30);
        padding: 30px 20px;
        width: 100%;
        max-width: 400px;
    }
    #relacionados{
        margin-top: 0;
    }
        #cursos-relacionados{
            display: grid;
            grid-auto-flow: column;
        }
    #der h2{
        max-width: 400px;
        border-radius: 25px 25px 0 0;
    }
}