@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Source Sans 3', sans-serif;
        text-decoration: none;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    .logo img{
    margin-left: auto;
    width: 1500px;
    height: 107px;
    }

    /*HEADER SUPERIOR*/

    .header__superior{
        max-width: 1200px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        height: 100px;
    }

    nav ul li:last-child {
    margin-left: auto;
    }

    /*BARRA MENU*/

    .container__menu{
        width: 100%;
        height: 70px;
        background: #016237;
        padding: 0px 20px;
    }

    .menu{
        max-width: 1200px;
        margin: auto;
        height: 100%;
    }

    nav{
        height: 100%;
    }

    nav > ul{
        height: 100%;
        display: flex;
    }

    nav ul li{
        height: 100%;
        list-style: none;
        position: relative;
    }


    nav > ul > li:first-child > a{
        background-image: url(../img/mhambuITSSAT.png);
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 20px 40px;
    }

    nav > ul > li:first-child:hover > a{
        background-image: url(../img/LOGO\ ITSSAT\ NIDEN\ Vertic1.png);
        background-size: 70px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    nav > ul > li > a{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 14px;
        color: white;
        text-transform: uppercase;
        font-size: 14px;
        transition: all 300ms ease;
    }

    nav > ul > li > a:hover{
        transform: scale(1.1);
        background: #535453;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }

    #selected{
        transform: scale(1.1);
        background-color: #535354;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); 
    }

    .icon__menu{
    background-image: url(../img/ICONOMENUHAMBUR.png);
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #535354;

    }

    /*ARTICULO*/

    main{
        background: #f0f0f0;
        padding: 40px 20px;
        margin-top: 150px;
    }

    article{
        max-width: 1200px;
        margin: 20px auto;
        padding: 40px;
        background: #fff;
    }

    article p{
        margin-top: 20px;
        font-size: 18px;
        font-weight: 300;
    }

    .hero {
        position: relative;
        width: 100%;
        height: 300px;
        background: url("../img/Fondo.jpg") center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        font-size: 2em;
        font-weight: bold;
        margin: 20px auto;
        
    }
    
    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    }
    
    .hero h2 {
        position: relative;
        z-index: 1;
    }
    


    /*ELEMENTOS RESPONSIVOS*/

    .icon__menu{
        font-size: 26px;
        color: white;
        cursor: pointer;
        width: 26px;
        height: 100%;
        display: none;
        align-items: center;
    }

    #label__check{
        width: 26px;
        height: 100%;
        display: none;
    }

    #check__menu{
        display: none;
    }

    @media screen and (max-width: 720px){
    .container__menu{
        padding: 0px 20px;
    }

    nav > ul > li > a:hover{
        transform: scale(1);
        background: #535453; /* Color de fondo gris para el hover */
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }

    nav > ul > li:last-child a:hover {
        background: #535453; /* Color gris en hover para 'Iniciar sesión' */
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    }
    
    nav > ul{
        flex-direction: column;
        background-color: #016237;
        position: fixed;
        left: 0;
        top: 158px;
        width: 100%;
        height: 0px;
        transition: all 300ms ease;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        align-items: center; /* Aseguramos que todo se alinee al centro */
    }

    nav ul li{
        width: 100%; /* Asegura que cada item del menú ocupe el 100% del ancho */
        text-align: center; /* Centra el texto dentro de cada item */
    }

    nav > ul > li > a{
        width: 100%;
        padding: 14px;
        color: white;
        text-transform: uppercase;
        font-size: 14px;
        display: block; /* Hace que los enlaces ocupen todo el ancho disponible */
    }

    nav > ul > li:last-child a {
        /* Este es el elemento de "Iniciar sesión / Registrarse", asegúrate que esté alineado correctamente */
        background-color: #016237; /* Puedes darle un color distinto si lo deseas */
    }

    #check__menu:checked ~ nav > ul{
        height: 300px;
        visibility: visible;
        opacity: 1;
    }

    .icon__menu{
        width: 40px; /* Ancho y alto iguales para que sea cuadrado */
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 5px; /* Opcional: Bordes redondeados, si prefieres */
    }
    
    #label__check{
        width: 40px;
        height: 40px;
        display: block;
        background-color: transparent; /* Asegura que el fondo del checkbox sea transparente */
    }

    main{
        margin-top: 158px;
    }
    }