/*----------------------------------------header-styles---------------------------------------*/
body {
	margin: 0;
	padding: 0;
	position: relative;
	width: auto;
	padding-top: 60px; /* Ajusta el valor según la altura de tu header */	
}

a {
	text-decoration: none;
	outline: none;
}
a:active {
	background: none;
}

/*----------------------------------------header-styles---------------------------------------*/
#header {

	background: url(../images/bg-transparent1.png);	
	margin: 0;
	min-height: 60px;
	padding: 0;

	position: fixed;  /* 🔥 Fija el header en la parte superior */
	top: 0;           /* Lo deja pegado arriba */
	left: 0;          /* Asegura que empieza desde el borde izquierdo */
	width: 100%;      /* Ocupa todo el ancho de la pantalla */
	z-index: 1000;    /* Asegura que quede encima de otros elementos */
	
}
#header div {
	margin: 0 auto;
	max-width: 940px;
	min-height: 60px;
	padding: 0 10px;
}
#header div a.logo {
	display: block;
	float: left;
	height: 60px;
	margin: 0 24px 0 0;
	padding: 0;
	width: 304px;
}
#header div a img {
	display: block;
	margin: 0;
	padding: 0;
	width: auto;
}
#header div ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
}
#header div ul li {
	float: left;
	margin: 0;
	padding: 0;
	width: auto;
}
#header div ul li a {
	color: #ffffff;
	display: block;
	font-family: 'VT323', monospace;
	font-size: 25px;
	font-weight: normal;
	line-height: 59px;
	margin: 0;
	min-height: 60px;
	padding: 0 24px;
 	text-align: center;
	text-transform: uppercase;
	width: auto;
}
#header div ul li a:hover {
	background-color: #620031;
	color: #ffffff;
}
#header div ul li.selected a {
	background-color: #c6c0c0;
	color: #000000;
}


#progress-bar {
	position: fixed;
	top: 60px;
	left: 0;
	width: 0%; /* Comienza en 0 y se expandirá dinámicamente */
	height: 4px; /* Grosor de la barra */
	background: #620031; /* Color del progreso */
	z-index: 9999; /* Asegura que esté encima de todo */
	transition: width 0.2s ease-out;
}	


/* Sección HERO (imagen + texto) */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Ocupa toda la pantalla */
    padding: 20px;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    width: 90%;
    gap: 20px; /* Espacio entre imagen y texto */
}

/* Imagen cuadrada */
.cover {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px; /* Bordes redondeados */
}

/* Texto */
.text {
    max-width: 400px;
    text-align: left;
}

/* Responsivo */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Pasa el texto abajo */
        text-align: center;
    }

    .cover {
        width: 80%;
        height: auto; /* Mantiene la proporción */
        max-width: 300px;
    }

    .text {
        text-align: center;
    }
}