* {
	box-sizing: content-box;
}

body {
	margin: auto;
	width: 100%;
}

nav {
    position: sticky;
    top: 0;
}

/* Esconde el cuadrado del checkbox */
#menu {
    display: none;
}

/* redimensión del icono de hamburguesa */
nav svg {
    width: 50px;
    height: 50px;
}

/* Esconder el logo y la lista */
.menu-desplegable {
    display: none;
    text-align: center;
}

/* Cuando el checkbox está marcado, hace que el logo y la lista sean visibles */
input:checked~.menu-desplegable {
    display: block;
}

/* redimensión del logo */
nav a img {
    width: 30%;
}

/* Para quitar los estilos predeterminados de la lista */
ul.menu-desplegable {
    list-style: none;
    padding: 0;
}

/* Añade una separación a los elementos de la lista */
ul.menu-desplegable li {
    padding: 0.5em;
}

/* Estilo en los enlaces de la lista */
ul.menu-desplegable a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5em;
    padding: 0.2em 0.4em;
}

/* Cambia los estilos de los enlaces cuando el cursor esta sobre ellos */
ul.menu-desplegable a:hover {
    background-color: #F54927;
    color: yellow;
}

.ContenedorFooter {
        background-color: black;
        padding: .5%;
    }

.copy {
	text-align: center;
    font-size: 24px;
    color: white;
}

/* MEDIA QUERIES */
@media (min-width: 950px) {

	/* Ocultar hamburguesa */
	label[for = "menu"] {
		display: none;
	}

	/* Mostrar los elementos en línea */
	.BarrasNavegacion {
		display: flex;
		align-items: center;       /* Centra verticalmente */
		justify-content: space-between; /* Deja logo a la izquierda y menú a la derecha */
		padding: 0 5%;            /* Espaciado horizontal opcional */
	}

	/* Asegurarte de que los elementos se muestren */
	.menu-desplegable {
		display: flex !important;
		align-items: center;
		gap: 30px; /* Espacio entre logo y menú */
	}

	/* Logo más pequeño */
	.BarrasNavegacion a img {
		width: 60px;
		height: 60px;
	}

	/* Menú horizontal */
	ul.menu-desplegable {
		display: flex;
		list-style: none;
		gap: 10px;
		margin: 0;
		padding: 0;
	}

	ul.menu-desplegable li a {
		text-decoration: none;
		color: #333;
		font-size: 20px;
		text-transform: uppercase;
		transition: all 0.3s ease;
	}

	ul.menu-desplegable li a:hover {
		background-color: #F54927;
		color: yellow;
	}
}