/*=== CSS Global ===*/
:root {
    --colorFondo: #181823;
    --colorLetraGeneral: #eff5f5;
    --colorLetraBanner: #fc7300;
    --colorLetraOpciones: #1f8a70;
    --colorLetraTitulosSecundarios: #00425a;
}

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

img {
    width: 100%;
    padding-top: 20px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    /* font-size: 10px ; /*Tamaño base, por defecto es 16px*/
    font-family: 'Poppins', sans-serif;
    background-color: var(--colorFondo);
    color: var(--colorLetraGeneral);
}

/*=== CSS Titulos Pincipales y Titulos Secundarios ===*/
#tituloSecun {
    text-decoration: underline;
    text-align: center;
    font-weight: bolder;
    color: var(--colorLetraBanner);
    padding-bottom: 10px;
}

/*=== CSS Encabezado ===*/
#encabezado {
    display: grid;
    background-color: hsla(196, 100%, 18%, 0.2);
    z-index: 100;
    width: 100%;
    position: fixed;
}

#menu {
    text-align: center;
    /*display: none;*/
}

ul#opciones li a {
    color: var(--colorLetraOpciones);
}

/*=== CSS Banner ===*/
#banner {
    position: relative;
    z-index: 50;
}

#imgBanner {
    padding: 0;
}

#subtituloBanner {
    position: absolute;
    text-align: center;
    width: 100%;
    font-family: 'Belanosima';
    color: var(--colorLetraBanner);
    background-color: hsla(240, 19%, 12%, 0.702);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*=== CSS Boton Volver al Inicio ===*/

#volverInicio a {
    font-size: 50px;
    color: var(--colorLetraGeneral);
    position: fixed;
    z-index: 49;
    right: 5%;
    top: 85%;
    opacity: 0.3;
}

/*=== CSS Pie de Página ===*/
#piePagina {
    text-align: center;
    background-color: rgb(0, 66, 90, 0.2);
}

#logoUntref {
    width: 20%;
    padding: 0;
}

#contacto ul {
    padding: 10px;
}

#contacto ul p a {
    color: var(--colorLetraOpciones);
    font-weight: bold;
    padding: 10px;
}

#logoContacto {
    font-size: 25px;
}

footer div iframe {
    height: 70%;
    width: 100%;
    padding: 5px 10px;
}

#tituloPie {
    padding: 10px;
    text-decoration: underline;
    text-align: center;
    font-weight: bolder;
    color: var(--colorLetraBanner);
    display: none;
}

#imgRedes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#imgRedes li img {
    width: 60px;
    padding-top: 0;
}

#contacto,
#redesSociales {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/*=== CSS Responsive - Media query's ===*/

@media (max-width: 767px) {

    /*=== CSS Menú hamburguesa ===*/
    #encabezado {
        height: 60px;
    }

    #menu nav #logoUntref {
        width: 60px;
        float: left;
        margin-left: 20px;
    }

    .botones {
        font-size: 50px;
        color: var(--colorLetraGeneral);
        float: right;
        margin-right: 20px;
        cursor: pointer;
    }

    ul#opciones {
        width: 100%;
        height: auto;
        background-color: hsla(196, 100%, 18%, 0.80);
        padding: 66px 10px 10px;
        /*margin-left: 100%;*/
        display: none;
    }

    ul#opciones li {
        margin: 10px;
    }

    ul#opciones li a {
        color: var(--colorLetraGeneral);
        text-transform: uppercase;
    }

    input[type="radio"] {
        display: none;
    }

    #close {
        display: none;
    }

    #btnOpen:checked~ul#opciones {
        /*margin-left: 0%;*/
        display: block;
    }

    #btnOpen:checked~#open {
        display: none;
    }

    #btnOpen:checked~#close {
        display: block;
    }

    /*=== CSS Secciones ===*/
    .secciones {
        padding: 60px 20px 10px;
    }

    #volverInicio a {
        right: 6%;
    }

    #piePagina {
        padding: 5% 0%;
    }
}

@media (min-width: 768px) {
    #encabezado {
        height: 60px;
        align-items: center;
        grid-template-columns: 5fr;
        position: fixed;
    }

    #opciones {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        text-transform: uppercase;
        font-weight: bold;
    }

    .botones,
    #btnOpen,
    #btnClose {
        display: none;
    }

    #menu nav #logoUntref {
        display: none;
    }

    /*=== CSS Banner ===*/
    #imgBanner {
        width: 100%;
        height: 100vh;
    }

    #subtituloBanner {
        font-size: 3rem;
    }

    /*== CSS Secciones ===*/
    #tituloSecun {
        padding-bottom: 30px;
    }

    .secciones {
        padding: 60px 20px;
    }

    /*=== CSS Ultimas Noticias ===*/
    #noticias {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        padding-bottom: 2%;
    }

    #noticia {
        padding: 2%;
    }

    article#noticia h3 {
        text-align: center;
        padding-bottom: 1%;
    }

    /*=== CSS Pie de Pagina ===*/
    #piePagina {
        padding: 2% 0%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    /*=== CSS Formulario ===*/
    #imgForm {
        width: 100%;
        height: 100vh;
    }

}