/* Configuración inicial de márgenes en toda la página */
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/* Tipo de letra */
body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Imagen principal del inicio */
nav {
    display: flex;
    width: 100%;
    justify-content: center; /* centra horizontal */
}
nav .img img {
    max-width: 100%;  /* nunca más grande que la pantalla */
    height: auto;     /* mantiene proporción */
    object-fit: contain;
    display: block;
}

/* Párrafos */
p {
    line-height: 1.8;
}

/* Márgenes y posición del primer texto */
.info{
    width: 90%;
    margin: 20px auto;
    padding: 10px;
}
.info p{
    font-size: 18px;
}

/* Menú con botones */
.menu{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    max-width: 90%;
    margin: 10px auto;
}
.menu a{
    color: white;
    font-size: 25px;
}
/*Estilo de todos los botones*/
.boton1, .boton2, .boton3, .boton4, .boton5, .boton6{
    padding: 40px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 25px;
    cursor: pointer;
}

/*Color distinto para cada botón */
.menu .boton1 { background-color: #f3ca12; } 
.menu .boton2 { background-color: #3498db; } 
.menu .boton3 { background-color: #2ecc71; } 
.menu .boton4 { background-color: #e74c3c; } 
.menu .boton5 { background-color: #9b59b6; } 
.menu .boton6 { background-color: #e9801e; }

/* Línea divisora */
hr{
    width: 90%;
    margin: 20px auto;
}

/*Colores para cada titulo de la sección*/
.contenido1 h2{
    color: #f3ca12;
}
.titulo2 h2{
    color: #3498db;
}
.contenido4 h2{
    color: #2ecc71;
}

.contenido5 h2{
    color: #e74c3c;
}
.contenido6 h2{
    color: #9b59b6;
}
.contenido7 h2{
    color: #e9801e;
}
/*Margenes de las secciones de contenido */
.contenido1, .contenido2, .contenido3, .contenido4{
    width: 90%;
    margin: 20px auto;
    padding: 10px;
}

.contenido5, .contenido6, .contenido7, .titulo2{
    width: 90%;
    margin: 20px auto;
    padding: 10px;
}

/* Estilo de los elementos de la lista*/
ul {
    margin-left: 20px;
    padding-left: 20px;
    list-style: disc; /*Estilo de la viñeta de circulo con relleno */
}

/* Imagen al lado derecho del texto */
.contenido2 {
    display: flex;
    gap: 5px; /*Espacio entre componentes */
    width: 90%;       
}

/*Alineacion del texto a la izquierda de la img */
.contenido2 .texto {
    flex: 1; 
    margin: 0;
}
/*Alineacion de la imagen  */
.contenido2 .img1 img {
    width: 550px;  
    height: auto;
    object-fit: contain;
    display: block;
}

/*Configuración de la segunda imagen */
.img{
   height: auto;
}
/*Estilo del pie de pagina*/
footer{
    width: 100%;
    height: 85px;
    background-color: #e9801e;
}