@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Lalezar&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&family=Romanesco&display=swap');
*{
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Nunito', sans-serif;
    background-color: #eecbcb;
    line-height: 1.6;
    color: #0a0a0a;
}
header{
    background-color: hsl(33, 92%, 43%);
    padding: 28px 0;
    text-align: center;

}
h1{
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 40px;
    text-align: center;
}	
nav{
    background-color: #d81f1f;
    padding: 10px 0;
}
nav ul{
    text-align: center;
}

nav ul li{
    list-style: none;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    font-family: 'Nunito', sans-serif;
    text-transform:  uppercase;
    margin: 0 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
}
nav ul li a:hover{
    background-color: rgba(178, 15, 69, 0.2); /* Efecto hover */
    border-radius: 5px; /* Bordes redondeados en el hover */
}

#Inicio {
    background-color: #f0f8ff; /* Color de fondo suave */
    padding: 25px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2); /* Sombra */
    text-align: center; /* Centrar el texto */
    margin: 20px auto; /* Espaciado superior e inferior y centrar la sección */
    max-width: 800px; /* Ancho máximo de la sección */
}

#Inicio h2 {
    color: #0f4f72; /* Color del encabezado */
    font-size: 28px; /* Tamaño de fuente del encabezado */
}

#Inicio p {
    line-height: 1.6; /* Espaciado entre líneas */
    margin: 10px 0; /* Espaciado superior e inferior */
}

#Articulo {
    margin: 20px auto; /* Espaciado superior e inferior y centrar la sección */
    max-width: 800px; /* Ancho máximo de la sección */
}

#Articulo h3 {
    color: #0f4f72; /* Color del encabezado */
    font-size: 24px; /* Tamaño de fuente del encabezado */
    text-align: center; /* Centrar el encabezado */


}

#Articulo ul {
    list-style-type: none; /* Sin viñetas */
    padding: 0; /* Sin padding */
    font-size: 20px;
}

#Articulo li {
    background-color: #e7c830d6; /* Color de fondo para los elementos de la lista */
    margin: 10px 0; /* Espaciado entre los elementos de la lista */
    padding: 10px; /* Espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
    text-align: center; /* Centrar el texto de la lista */
    
}








#Acerca {
    background-color: #4ee7d0;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    text-align: center; /* Asegúrate de que todo el texto y la imagen estén centrados */
}

#Acerca h2 {
    color: #0f4f72;
    font-size: 25px;
}

#Acerca img {
    width: 100%; 
    max-width: 300px; /* Ancho máximo de la imagen */
    height: auto; 
    border-radius: 8px; 
    margin: 20px 0; 
    display: block; /* Asegura que la imagen se comporte como un bloque */
    margin-left: auto; /* Centrar la imagen */
    margin-right: auto; /* Centrar la imagen */
}
#Acerca p {
    line-height: 1.6; 
    margin: 10px 0; 
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}



#Redes_sociales{
    text-align: center;
    margin: 20px 0;
}

#Redes_sociales h2 {
    text-transform: uppercase;
    color: #0f4f72;
}

#Redes_sociales a {
    margin: 0 15px; 
}

#Redes_sociales img {
    width: 50px; /* Ancho de los íconos */
    height: auto; /* Mantener la proporción */
    transition: transform 0.3s; /* Transición suave para el efecto hover */
}

#Redes_sociales img:hover {
    transform: scale(1.1); /* Aumentar el tamaño al pasar el mouse */
}




#contacto{
   
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2 1px 0 rgba(0, 0, 0, 0.2);
}
#contacto h2{
    color: #0f4f72;
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
}
#contacto form{
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    
}
#contacto label{
    font-size: 10px 0 5px;
    margin: 10px 0;
    font-weight: bold;

}

input[type="text"], input[type="email"], textarea{
    height: 40px;
    border: 1px solid #0a0a0a;
}
input[type="submit"]{
    margin-top: 20px;
    background-color: #d38810;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
input[type="submit"]:hover{
    background-color: #4f23bf;

}

#contacto p{
    font-size: 20px;
    text-align: center;
    margin: 10px 0;
}
#contacto a{
    color: #6e18be; 
    text-decoration: none; 
}
#contacto a:hover {
    text-decoration: underline; /* Subrayar al pasar el mouse */
}

.Pie-de-pagina{
    background-color: rgb(210, 31, 31);
    color: #fff;
    color: aliceblue;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    text-align: center;
    width: 100%;
    
}
/* Estilos para pantallas de hasta 768px (tablets y celulares) */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Ajusta el tamaño de fuente */
    }

    header {
        padding: 15px 0; /* Reduce el espacio del header */
    }

    h1 {
        font-size: 28px; /* Tamaño del título más pequeño */
    }

    nav ul {
        padding: 0;
    }

    nav ul li {
        display: block; /* Convierte la lista en una columna */
        margin: 10px 0;
    }

    nav ul li a {
        display: block; /* Que los botones ocupen toda la línea */
        padding: 10px;
        font-size: 18px;
    }

    #Inicio, #Articulo, #Acerca, #contacto {
        max-width: 90%; /* Reduce el ancho para adaptarse a móviles */
        padding: 15px; /* Reduce el padding */
    }

    #Inicio h2, #Articulo h3, #Acerca h2, #contacto h2 {
        font-size: 22px; /* Reduce los títulos */
    }

    #Redes_sociales img {
        width: 40px; /* Reduce el tamaño de los iconos sociales */
    }

    input[type="text"], input[type="email"], textarea {
        width: 100%; /* Que los campos del formulario ocupen todo el ancho */
    }

    input[type="submit"] {
        width: 100%; /* Que el botón de enviar ocupe todo el ancho */
    }

    .Pie-de-pagina {
        font-size: 14px; /* Ajusta el tamaño del texto en el footer */
    }
}

/* Estilos específicos para pantallas MUY pequeñas (hasta 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    nav ul li {
        font-size: 16px;
    }

    #Inicio h2, #Articulo h3, #Acerca h2 {
        font-size: 20px;
    }

    #Redes_sociales img {
        width: 35px; /* Reduce un poco más los iconos */
    }
}