body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background: #002638;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;

    position: fixed; /* Ancla el header en la parte superior */
    top: 0;
    left: 0;
    width: 100%;/* Asegura que el header ocupe todo el ancho */
    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
}



  /* Contenedor del texto (imagen) superpuesto */
  .text-overlay {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
  }

  /* Estilo para el texto de la imagen */
  .text-overlay img {
    max-width: 100%;
    height: auto;
  }

.navbar {
    position: relative;		
    display: flex;
    align-items: center; /* Alinear items verticalmente */
    justify-content: space-between; /* Asegura que el logo y el icono del menú estén separados */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-right: 50px;
    margin-top: 20px;
}

.nav-list li {
    margin-left: 20px;
}

.nav-list a {
    color: white;
    text-decoration: none;
    font-size: 16px; /* Tamaño de fuente para escritorio */
}

.menu-icon {
    display: none;
    cursor: pointer;
    font-size: 24px;
    margin-right: 50px; /* Espacio entre el logo y el icono del menú */
}

.logo img{
    max-width: 20%;
}

main {
    padding: 100px 20px; /* Aumentar el espacio superior para evitar superposición */
    padding-bottom: 0px;
}
section {
    padding-top: 70px; /* Altura del header */
    margin-top: -70px; /* Compensa la altura del header */
}


footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .nav-list {
        display: none; /* Oculta el menú por defecto */
        flex-direction: column; /* Cambia a columna */
        position: fixed; /* Posiciona el menú fijo */
        top: 0; /* Alinea al tope */
        left: 0; /* Alinea a la izquierda */
        background: #444; /* Color de fondo */
        width: 250px; /* Ancho fijo del menú */
        height: 100%; /* Altura completa */
        padding: 10px 0; /* Espaciado interno */
        border-right: 1px solid #ccc; /* Borde derecho */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Sombra a la derecha */
        z-index: 1000; /* Asegura que el menú esté por encima */
    }
    
    .nav-list li {
        margin: 10px 0; /* Espaciado vertical entre elementos */
        text-align: center; /* Alinear texto al centro */
    }

    .nav-list a {
        font-size: 18px; /* Tamaño de fuente para móvil */
        padding: 15px; /* Espaciado para clic */
        color: white; /* Color del texto */
        display: block; /* Asegura que el área clicable sea grande */
    }

    .menu-icon {
        display: block; /* Muestra el icono de menú */
    }
}

.show {
    display: flex; /* Muestra el menú al hacer clic */
}