body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #fff;
    color: #333;
    text-align: center;
    padding-top: 15vh; /* Ajusta este valor según la altura del menú */
}
.container {
    width: 100%;         /* Ancho del contenedor principal (ajustable) */
    max-width: 800px;    /* Ancho máximo para pantallas grandes */
    margin: 0 auto;      /* Centrar el contenedor horizontalmente */
    padding: 20px;       /* Espacio alrededor del contenido */
}

.logo {
    margin-bottom: 60px;
}

.logo img {
    max-width: 80%;    /* El logo ocupa todo el ancho disponible */
    height: auto;
}

h1 {
    margin-bottom: 15px;
    font-size: 2em;     /* Tamaño de fuente adaptable */
}

.descripcion-construccion {
    margin-top: 15px;
    font-size: 1.2em;   /* Tamaño de fuente adaptable */
    line-height: 1.5;   /* Espaciado entre líneas */
}

.contact-info {
    margin-top: 30px;
}

.social-links {
    margin-top: 20px;
}

.social-links a {
    margin: 0 10px;
    color: #007bff;     /* Azul, un color común para enlaces */
    text-decoration: none;
}

.social-links a:hover {
    text-decoration: underline;
}

/* Estilos para el menú de navegación */
.nav {
    position: fixed; /* Fija el menú en la parte superior */
    top: 0;           /* Coloca el menú en la parte superior */
    left: 0;          /* Alinea el menú con el borde izquierdo */
    width: 100%;        /* El menú ocupa todo el ancho */
    text-align: center;
    background-color: #f0f0f0;
    padding: 7px 0;
    z-index: 100;       /* Asegura que el menú esté por encima de otros elementos */
}

.nav ul {
    list-style: none;   /* Elimina las viñetas por defecto */
    padding: 0;
    margin: 0;
    display: inline-block; /* Para centrar los elementos */
}

.nav li {
    display: inline;      /* Muestra los elementos en línea horizontal */
    margin: 0 15px;       /* Espacio entre los elementos */
}

.nav a {
    text-decoration: none;
    color: #333;          /* Color del texto */
    font-weight: bold;    /* Texto en negrita */
}

.catalogo-link {
    color: #007bff; /* Cambia el color del enlace */
    text-decoration: none; /* Elimina el subrayado */
    font-weight: bold; /* Pone el texto en negrita */
}

.catalogo-link:hover {
    text-decoration: underline; /* Añade un subrayado al pasar el ratón */
}
.nav a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Media query para pantallas pequeñas (smartphones) */
@media (max-width: 700px) {
    .nav {
        padding: 2px 0; /* Reducido el padding en pantallas pequeñas */
    }

    .nav ul {
        display: block;
        text-align: center;
    }

    .nav li {
        display: block;
        margin: 2px 0;
    }

    .nav a {
        display: block;
        padding: 2px;
        text-align: center;
    }
}