* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Contenedor del header */
header {
    background-color: #d35ea6; /* Color morado */
    padding: 10px 20px; /* Espaciado interno */
    margin-top: 40px;
    height: 4rem;
    display: flex; /* Asegura la alineación de elementos */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    position: relative; /* Contexto para la imagen */
    overflow: visible; /* Permitir contenido fuera del header */
}

/* Contenedor de los elementos del header */
.header-container {
    display: flex;
    align-items: center; /* Alineación vertical */
    justify-content: space-between; /* Espaciado uniforme */
    position: relative;
    width: 100%;
}

/* Logo */
.logo {
    height: 150px; /* Tamaño inicial */
    width: auto; /* Mantener proporción */
    transition: transform 0.3s ease-in-out;
    position: absolute; /* Superponer al resto del contenido */
    left: 20px; /* Ajusta la posición horizontal */
    z-index: 10; /* Al frente de otros elementos */
}

/* Efecto de hover para agrandar la imagen */
.logo:hover {
    transform: scale(1.1); /* Aumentar tamaño del logo */
}

/* Navegación */
nav {
    display: flex;
    align-items: center; /* Centrar verticalmente */
    gap: 30px; /* Espaciado entre enlaces */
    margin-left: auto; /* Mantener centrado y desplazado hacia la derecha */
}

/* Texto del menú */
.nav-text {
    display: inline-block; /* Mostrar texto por defecto */
    font-size: 1.2em; /* Tamaño de fuente */
    font-weight: 600;
    color: #000; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    background-color: transparent; /* Fondo transparente */
    border-radius: 8px; /* Bordes redondeados */
    transition: all 0.3s ease-in-out; /* Animación suave */
}

/* Íconos del menú */
.nav-icon {
    display: none; /* Ocultar íconos por defecto */
    height: 40px; /* Tamaño de los íconos */
    width: auto;
    margin: 0 10px;
    cursor: pointer;
    filter: contrast(100);
    filter: brightness(100);
}

/* Animación tipo botón al hacer hover */
nav a:hover .nav-text {
    background-color: #a53692; /* Fondo morado al pasar el cursor */
    color: #ffffff; /* Cambiar texto a blanco */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Efecto de sombra */
}

@media screen and (max-width: 767px) {
    .nav-text {
        display: none !important; /* Forzar ocultar texto */
    }

    .nav-icon {
        display: inline-block; /* Mostrar íconos */
        margin: 0 0.1rem 0.1rem 0.1rem; /* Espaciado uniforme */
    }

    .logo {
        position: absolute;
        height: 5.625rem; /* Reducir tamaño del logo */
        left: 50%; /* Centrar en la pantalla */
        transform: translateX(-50%); /* Asegurar que el logo esté centrado */
        top: -100px; /* Coloca el logo al principio del contenedor */
        z-index: 10; /* Asegura que el logo esté por encima de otros elementos */
    }

    header {
        margin-top: 6.25rem; /* Reducir margen superior para dejar espacio para el logo */
        height: 4rem; /* Altura ajustada */
        position: relative; /* Asegura que el header no oculte el logo */
        z-index: 1; /* Asegura que el header esté por debajo del logo */
    }
}