/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Kodchasan', sans-serif; /* Aplicar la fuente Kodchasan */
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.8;
    font-weight: 300; /* Mantener un peso ligero */
    display: flex; /* Usar flexbox para el diseño del cuerpo */
    flex-direction: column; /* Direccionar los elementos en columna */
    min-height: 100vh; /* Asegurar que el cuerpo ocupe al menos la altura de la ventana */
}

/* Estilo del encabezado */
header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%; /* El menú ahora ocupa el 100% del ancho */
    background-color: #ffffff;
    padding: 20px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end; /* Alineación de los elementos a la derecha */
    padding-right: 20px;
}

nav ul li {
    margin-left: 30px; /* Espacio entre los botones del menú */
}

nav ul li a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
    font-weight: 300; /* Aplicar un grosor más fino */
    padding: 10px 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px;
}

nav ul li a:hover {
    background-color: #333;
    color: #ffffff;
}

/* Estilo del contenido */
section {
    position: absolute; /* Permitir que las secciones no influyan unas a otras */
    width: 100%; /* Asegurar que las secciones ocupen el 100% del ancho */
    padding: 100px 50px;
    text-align: center;
    margin-top: 100px; /* Añadir espacio para que no se superponga el header */
    transition: opacity 0.5s ease;
    opacity: 0; /* Inicialmente ocultar las secciones */
    visibility: hidden; /* No visible */
}

section.visible {
    opacity: 1; /* Hacer visible */
    visibility: visible; /* Ahora es visible */
}

/* Estilos para los items del menú */
#menu {
    display: flex; /* Utilizar flexbox para alinear los elementos horizontalmente */
    justify-content: center; /* Centrar los elementos en el contenedor */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan si no hay espacio suficiente */
}

#menu .menu-item {
    flex: 0 0 50%; /* Hacer que cada item ocupe el 50% del ancho */
    margin: 20px; /* Espaciado entre los items */
    text-align: center; /* Centrar el texto de los items */
}

#menu .menu-item img {
    width: 60%; /* Establecer el tamaño de las imágenes al 60% de su tamaño original */
    height: auto; /* Mantener la proporción de la imagen */
    border-radius: 10px; /* Bordes redondeados para las imágenes */
}

#menu .menu-item p {
    font-size: 1.2em; /* Tamaño de fuente para el texto */
    color: #333; /* Color del texto */
    font-weight: 300; /* Peso ligero para la fuente */
}

/* Sección de contacto */
#contacto {
    background-color: #f9f9f9; /* Fondo gris claro para la sección de contacto */
    display: flex; /* Usar flexbox para alinear elementos */
    flex-direction: column; /* Apilar elementos verticalmente */
    align-items: center; /* Centrar horizontalmente */
    justify-content: flex-start; /* Alinear al principio (parte superior) */
    padding: 40px 20px; /* Espacio alrededor del contenido */
    height: auto; /* Altura automática para adaptarse al contenido */
}

#contacto .content {
    max-width: 600px; /* Ancho máximo para el contenido */
    width: 100%; /* Permitir que el contenido use todo el ancho disponible */
    text-align: center; /* Centrar texto dentro del contenido */
}

#contacto p {
    font-size: 1.2em; /* Tamaño de fuente para mejorar legibilidad */
    color: #666; /* Color de texto gris */
    margin-bottom: 10px; /* Espacio entre los párrafos */
}

#contacto .map-container {
    margin-top: 20px;
    text-align: center; /* Centrar el mapa */
}

#contacto .map-container iframe {
    width: 100%; /* Hacer que el mapa ocupe todo el ancho */
    max-width: 600px; /* Ancho máximo para pantallas grandes */
    height: 400px; /* Altura del mapa */
    border-radius: 10px; /* Bordes redondeados */
}

/* Responsivo */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        padding-right: 0;
        align-items: flex-start;
    }

    nav ul li {
        margin-left: 0; /* Eliminar el margen a la izquierda en móviles */
    }
}