/*
Theme Name: PedaGO Chile
Theme URI: https://pedagochile.cl
Author: Tu Nombre
Author URI: https://pedagochile.cl/
Description: Tema construido por PedaGO Chile.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbarra
*/

body {
    color:#fff;
    background:#E3E8F0;
    font-weight:400;
	font-family: "Poppins", sans-serif;
}

.header-menu{
    padding: 10px 0;
    transition: all 0.3s ease;
    position: fixed;
    width:100%;
    z-index: 1;
	background:#222;
    display:none;
}

.scroll{
    background: rgba(0 0 0 / 40%);
    padding: 0px 0;
    box-shadow: 10px 0 10px 5px rgba(0 0 0 / 20%);
    backdrop-filter: blur(15px);
    position: fixed;
    width: 100%;
    z-index: 1;
    transition: all 0.3s ease;
}

.logo{
    width:auto;
}

.logo img{
    width:160px;
}

.content-menu{
    width:auto;
}

.menu {
    display:flex;
}

.menu li{
    padding:10px 15px;
    transition:.2s;
    cursor:pointer;
    border-bottom:3px solid rgba(255 255 255 / 0%);
    border-radius:0 0 5px 5px;
}

.menu li:hover{
    background:rgba(255 255 255 / 20%);
    transition:.2s;
    border-bottom:3px solid rgba(255 255 255 / 80%);
}

.inner-menu{
    display:flex;
    width:80%;
    margin:0 auto;
    align-items: center;
    justify-content: space-between;
}

.content-menu ul{
    text-decoration:none;
    list-style-type: none;
    padding:0;
    margin:0;
}

a{
    color: inherit;
    text-decoration: none;
}

.custom-container{
    width:100%;
    margin:0 auto;
}

/* Estilos base para los botones (ocultos en escritorio) */
.hamburger-btn, 
.close-btn,
.menu-overlay {
    display: none;
}


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

    
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 100;
    }

    
    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff; 
        border-radius: 3px;
    }

    
    .content-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 70%; 
        height: 100vh; 
        background-color: rgba(0 0 0 / 90%); 
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 60px 20px; 
        transform: translateX(100%); 
        transition: transform 0.3s ease-in-out;
    }


    .content-menu.active {
        transform: translateX(0); 
    }


    .close-btn {
        display: block;
        position: absolute;
        top: -1%;
    	right: 13%;
        background: none;
        border: none;
        font-size: 50px;
        cursor: pointer;
        color: #fff;
    }

    .menu-overlay.active {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 999;
    }
	
	.menu{
		display: flex;
    	flex-direction: column;
	}
	
	.inner-menu{
		width:90%;
	}
}