*{margin: 0; padding: 0; border: 0; text-decoration: none; list-style: none; box-sizing: border-box;}
:root{
    /*Colores*/
	--celeste-c:#b0e6ff;
	--celeste:#67cfff;
	--verde-mas-c:#82f3d5;
	--verde-c:#23d7a7;
	--verde:#009D7F;
	--verde-o:#117d66;
    --asd-c:#459ec1;
	--asd:#004A6E;
	--asd-o:#093248;
	--issd: #008393;
    --issd-mas-c: #c0e7fc;
    --issd-c: rgb(16, 164, 184);
    --issd-o: #005a66;
    --issd-mas-o: #00414a;
	--cesd:#5F9E82;
	--sd:#154194;
	--negro:#000;
	--blanco:#fff;
    --gris-30:rgb(30, 30, 50);
    --gris-70:rgb(70, 70, 90);
    --gris-100:rgb(100, 100, 120);
    --gris-130:rgb(130, 130, 150);
    --gris-170:rgb(170, 170, 190);
    --gris-210:rgb(210, 210, 230);
    --gris-230:rgb(230, 230, 245);
    --gris-240:rgb(240, 240, 255);
    --gris-250:rgb(250, 250, 255);

	/*Tipografías*/
	--roboto:'Roboto', sans-serif;
	--roboto-condensed:'Roboto Condensed', sans-serif;
    --iconos: 'Material Icons';
}

html{text-rendering: optimizeLegibility; font-size: 15px; font-family: 'Roboto', sans-serif;}

body{
    border-top: 10px solid var(--verde-mas-c);
    background-image: url(../img/linea-fnd.png);
}
.contenido{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
    header{
        width: 100%;
        text-align: center;
        padding: 0 15px;
    }
        header::after{
            content: 'keyboard_double_arrow_up';
            font-family: var(--iconos);
            margin: 20px 0;
            color: var(--verde-c);
            opacity: .5;
            font-size: 48px;
            transform: rotate(180deg);
            display: block;
        }
        header img.portada{
            display: none;
        }
        header img.portada-celu{
            width: 100%;
            height: auto;
            border-radius: 0 0 50px 50px;
        }
        header img.logo{
            width: 130px;
            height: auto;
            margin: 15px auto 20px auto;
            display: block;
        }
        header h1{
            font-size: 36px;
            color: var(--asd);
            text-transform: uppercase;
            font-weight: 900;
        }
            header h1 span{
                font-size: 20px;
                display: block;
                font-weight: 400;
            }
                header h1 span b{
                    font-weight: 600;
                }
        header h2{
            font-size: 24px;
            color: var(--gris-70);
            font-weight: 700;
            margin: 7px 0;
        }
            header h2 i{
                font-size: 18px;
                font-weight: 300;
                color: var(--asd-c);
            }
                header h2 b{
                    text-transform: uppercase;
                    padding: 20px 0 0 0;
                    display: inline-block;
                }
    main, section.estudiar-sd{
        width: 90%;
        margin: 20px auto;
    }
        main{
            max-width: 600px;
            background: var(--blanco);
            box-shadow: 0 0 6px var(--gris-210);
            background: var(--gris-250);
            padding: 30px;
        }
    /*formulario*/
        form input,
        form select{
            height: 44px;
            width: 100%;
            background: var(--blanco);
            margin-bottom: 8px;
            box-shadow: 0 0 4px var(--gris-210);
            padding: 5px 10px;
            border-radius: 10px;
        }
            form input{
                color: var(--gris-30);
            }
            form input::placeholder,
            form select{
                color: var(--gris-130);
            }
                form select{
                    padding: 10px 0;
                    display: block;
                }
                    form input:focus,
                    form input:focus-visible,
                    form select:focus,
                    form select:focus-visible{
                        color: var(--gris-130);
                        outline: 2px solid var(--verde-mas-c);
                    }
                    form select:focus{
                        color: var(--gris-100);
                    }
            .codigo-telefono{
                display: grid;
                grid-template-columns: 35px .3fr 35px 1fr;
                align-items: center;
                justify-items: center;
            }
                .codigo-telefono p{
                    color: var(--gris-100);
                    margin-bottom: 7px;
                }
            form input[type='submit'],
            form input[type='submit']:visited{
                background: var(--issd);
                color: var(--blanco);
                box-shadow: none;
                text-transform: uppercase;
                font-weight: 900;
                letter-spacing: .05em;
                margin-top: 5px;
                border-radius: 50px;
                text-shadow: 0 0 2px var(--issd-o);
                padding: 20px 0;
                cursor: pointer;
                height: auto;
                transition: all .2s ease;
            }
                form input[type='submit']:hover,
                form input[type='submit']:active{
                    background: var(--issd-o);
                }

/* seccion estudiar SD*/
section.estudiar-sd{
    margin: 40px auto;
}
    .estudiar-sd h3{
        color: var(--asd);
        margin: 24px 0 8px 0;
        line-height: 1.35em;
        font-size: 24px;
        font-weight: 300;
        text-align: center;
    }
        .estudiar-sd article{
            margin: 20px;
            background: var(--blanco);
            border-radius: 25px;
            padding: 15px 25px 25px 25px;
            display: grid;
            justify-items: center;
            grid-gap: 10px;
            text-align: center;
            background: var(--gris-250);
            box-shadow: 0 0 6px var(--gris-210);
        }
            .estudiar-sd img{
                padding: 15px 20px 10px 20px;
                border-radius: 10px;
            }
            .estudiar-sd p{
                color: var(--gris-100);
                line-height: 1.3em;
            }

/*footer*/
footer{
    background: var(--gris-30);
    padding: 35px 20px 30px 20px;
    text-align: center;
    border-radius: 25px 25px 0 0;
    border-bottom: 10px solid var(--verde-mas-c);
}
    footer p{
        color: var(--blanco);
        line-height: 1.5em;
        text-shadow: 0 0 4px var(--gris-30);
        font-size: 16px;
    }
    footer i{
        font-size: 15px;
        font-weight: 300;
}

@media screen and (min-width:776px) {
    header img.portada{
        display: block;
        border-radius: 0 0 50px 50px;
    }

    header img.logo,
    header img.portada-celu{
        display: none;
    }

    header h1{
        font-size: 48px;
        display: none;
    }
        header h2 i{
            font-size: 24px;
            font-weight: 300;
            padding: 20px 0;
            display: block;
        }

    section.estudiar-sd{
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }
        section.estudiar-sd h3{
            grid-column: 1/-1;
        }
}