/* Barra de menú */
@import url('https://fonts.googleapis.com/css2?family=Gotham:wght@400;700&display=swap'); /* Cargar fuente Gotham desde Google Fonts */

/* Aplica la fuente Gotham a todo el cuerpo del documento */
body {
    font-family: 'Gotham', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

/* Estilo de la imagen de fondo */
.hero-image {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    overflow: hidden; /* Recorta la imagen si es necesario */
}

.hero-image img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Centra la imagen horizontalmente */
    min-height: 100%; /* Asegura que la imagen cubra toda la altura */
    min-width: 100%; /* Asegura que la imagen cubra toda la anchura */
    object-fit: cover; /* Recorta la imagen si es necesario, manteniendo la proporción */
}

/* Estilo general de la barra de menú */
.portal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: -100px; /* Inicialmente está fuera de la pantalla, debajo de la imagen */
    width: 100%; /* Asegura que el menú ocupe todo el ancho */
    transition: bottom 3s ease; /* Transición de 3 segundos para el movimiento */
    z-index: 10; /* Asegura que el menú quede sobre otros elementos */
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around; /* Distribuir los elementos a lo largo de la barra */
    background-color: black; /* Fondo negro para la barra de menú */
    padding: 10px 0; /* Padding en la barra de menú */
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    box-sizing: border-box; /* Asegura que el padding no afecte al ancho */
    border-top: 2px solid white; /* Borde superior blanco */
    border-bottom: 2px solid white; /* Borde inferior blanco */
    border-left: 2px solid white; /* Borde izquierdo blanco */
    border-right: 2px solid white; /* Borde derecho blanco */
}

.menu .item {
    text-align: center;
    flex: 1; /* Cada item toma el mismo espacio disponible */
    position: relative; /* Necesario para el pseudo-elemento */
    overflow: hidden; /* Ocultar la parte de la barra roja que se sale del área del item */
    border-right: 1px solid white; /* Borde fino blanco entre los elementos */
}

/* No agregar borde derecho al último item */
.menu .item:last-child {
    border-right: none;
}

/* Estilo para los enlaces dentro de los items */
.menu .item a {
    text-decoration: none;
    color: white; /* Texto blanco para contraste */
    font-weight: bold;
    display: block;
    padding: 10px 20px; /* Padding en los elementos */
    text-align: center;
    position: relative;
    z-index: 1; /* Asegura que el texto esté sobre el pseudo-elemento */
}

/* Pseudo-elemento para la transición roja */
.menu .item a::before {
    content: ''; /* Crea el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Comienza con un ancho de 0 */
    height: 100%;
    background-color: red; /* Color de fondo */
    transition: width 10s ease; /* Transición de 10 segundos */
    z-index: -1; /* Coloca el pseudo-elemento detrás del texto */
}

/* Cuando el ratón se pasa sobre un elemento */
.menu .item:hover a::before {
    width: 100%; /* Al pasar el ratón, el ancho se expande al 100% */
    transition: width 10s ease; /* Mantiene la transición cuando se pasa el ratón */
}

/* Cuando el ratón se va de un elemento, la transición se quita instantáneamente */
.menu .item:not(:hover) a::before {
    width: 0; /* Vuelve a tener un ancho de 0 cuando el ratón se va */
    transition: none; /* No hay transición cuando el ratón sale */
}

.menu .item .title {
    display: inline-block;
    padding: 5px;
}

/* Estilos para el Footer */
.footer {
    background-color: white; /* Fondo blanco para el footer */
    color: black; /* Color del texto negro */
    font-family: 'Gotham', sans-serif; /* Fuente Gotham */
    padding: 20px 0; /* Padding para dar espacio al contenido */
    text-align: center; /* Centrado del texto en general */
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px; /* Espacio reducido arriba del footer */
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Espacio entre la izquierda y la derecha */
    align-items: center; /* Centrado vertical */
    max-width: 1200px; /* Ancho máximo para el contenido */
    margin: 0 auto; /* Centrado horizontal */
    padding: 0 20px; /* Espaciado interno en los laterales */
}

.footer-left {
    text-align: left; /* Alineación de la dirección a la izquierda */
}

.footer-right {
    text-align: right; /* Alineación de las redes sociales a la derecha */
}

.footer-right a {
    color: black; /* Color negro para los enlaces */
    text-decoration: none; /* Quitar subrayado de los enlaces */
    margin-left: 20px; /* Espacio entre cada enlace */
    font-size: 20px; /* Tamaño de los iconos */
}

.footer-right a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Estilos adicionales para los iconos */
.social-icon {
    font-size: 30px; /* Aumentar el tamaño de los iconos */
    margin: 0 10px; /* Espaciado entre los iconos */
    transition: color 0.3s; /* Transición para el cambio de color */
}

.social-icon:hover {
    color: red; /* Cambiar color al pasar el ratón */
}

/* Estilos para la imagen y el texto de la parte inferior */
.footer-bottom {
    margin-top: 20px;
    text-align: center;
}

.footer-logo {
    max-width: 200px; /* Limitar el tamaño de la imagen */
    height: auto;
    margin-bottom: 10px; /* Espacio debajo de la imagen */
}

.footer-bottom p {
    font-family: 'Gotham', sans-serif;
    font-size: 14px; /* Tamaño de la fuente para el texto */
    color: black; /* Color del texto */
    margin: 0; /* Eliminar margen */
}

.location-link {
    color: black; /* Cambia el color del enlace a negro */
    text-decoration: none; /* Elimina el subrayado del enlace si lo deseas */
}


/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Apilar los elementos verticalmente en pantallas pequeñas */
        align-items: center; /* Centrar los elementos */
    }
    .footer-left, .footer-right {
        text-align: center; /* Centrar el texto */
        margin-bottom: 10px; /* Espaciado entre los bloques */
    }
    .footer-right a {
        margin-left: 10px; /* Reducir margen entre los iconos en pantallas pequeñas */
        font-size: 25px; /* Reducir tamaño de los iconos en pantallas pequeñas */
    }
}

/* Para pantallas grandes (como en computadoras de escritorio) */
@media (min-width: 1024px) {
    .container {
    width: 80%;
    margin: auto;
    }
}

  /* Para pantallas medianas (tablets) */
@media (max-width: 1023px) and (min-width: 768px) {
    .container {
    width: 90%;
    }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .container {
    width: 100%;
    }
}