/*Hoja de estilos con la que se formatea las págians de nuestro sitio*/

/*El cuerpo de la págian web, tiene margenes y relleno, 0px. El borde y el relleno se incluyen en el ancho y alto del elemento*/
body{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
/*LA barra de navegación es un contendor flexible. La dirección principal es fila Los elementos se alinean en el centro verticalmente y se alinean con espacio ente los elementos cuando no ocupan todo el espacio disponible.*/
nav{
    background-color: #F6FAF3	;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
/*La imagen dentro del la barra de navegación tiene un margen derecho, un ancho automático y un alto del 100% de la barra de navagación */
nav img{
    margin-left:5px;
    width:auto;
    height: 100%;
}
/*La lista de enlaces de la barra de navegación tiene un margen derecho*/
nav ul{
    margin-right:50px;
/*Los elementos de la lista de la barra de navegación tiene un estilo que no muestra las viñetas. Se muestra con un bloque eb líena y un relleno.*/
}
nav ul li{
    list-style: none;
    display:inline-block;
    padding: 10px;
}
/*Los enlaces en la barra de navegación no muestran el subrayado y estilo por defecto. Tienen un color y tamaño de fuente personalizado*/
nav a{
    color: #467D15;
    text-decoration: none;
    font-size: 14pt;
}
/*Los enlaces en la barra de navegación cambien de color a posicionar el ratón encima (estado:hover)*/
nav a:hover {
    color: #CD4800;
}
/*El encabezado que tiene como identificativo inicio (de la página index), tiene una imagen de fondo, que ocupa todo el tamaño del contenedor. No se repite. La imagen esta centrada. Se muestra de forma flexible con los elementos centrados en vertical y horizontal.*/
#inicio{
    background-image: url(imagenes/cabecerahome.jpg);
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   
}
/*El encabezado que tiene como identificativo inicio (de la página nuestros viajes), tiene una imagen de fondo, que ocupa todo el tamaño del contenedor. No se repite. La imagen esta centrada. Se muestra de forma flexible con los elementos centrados en vertical y horizontal.*/
#viajes-recomendados{
    background-image: url(imagenes/entren.jpg);
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*Los títulos de encabezamiento de nivel 1 y 2 no tienen márgenes. Con sombra. Y diferentes tamaños de fuente*/
h1, h2{
    color: white;
    text-shadow: 1px 2px 10px black;
    margin: 0px;
}
h1{
    font-size: 36pt;
}
h2{
    font-size: 28pt;
}
/*El título de encabezamiento de nivel 3 no tiene mérgenes y está centrado.*/
h3{
    font-size: 16pt;
    text-align: center;
    margin: 0;
    padding: 10px;
    color: #467D15;
}
/*La sección con id eslogan tiene fondo de color*/
#eslogan{
    background-color: #F6FAF3;
}
/*La sección con id nuestros-viajes, se muestra como un contenedor flexible. La dirección de alineación de los elementos es la fila. Alineación de los elementos centrados en vertical y ajusta el espacio entre elementos en horizontal. Si los elementos pueden fluir a una nueva fila, si sobrepasan en anchoo del contenedor (wrap).*/
#nuestros-viajes{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #F6FAF3;
}
/*Los contenedores (div) con clase dos-columnas tienen un ancho del 50% del contendor*/
.dos-columnas{
    width: 50%;
    height: auto;
/*La imagen del contendor de clase dos-columnas tiene un ancho del 80% del contenedor. Alto automático*/
}
.dos-columnas img{
    width:80%;
    height: auto;
}
/*El botón con clase boton ocupa el 100% de ancho. Tiene un margen superior e inferior. Y el texto esta alineado en el centro*/
.boton{
    width: 100%;
    margin-top: 60px;
    margin-bottom: 20px;
    text-align: center;
}
/*El enlace que está dentro del boton tiene un fondo, colo, relleno y radio de borde (esquinas redondeadas). El estilo de enlace (subrayado) no lo tiene.*/
.boton a{
    background-color: #CD4800;
    color: white;
    border-radius: 10px;
    padding: 10px;
    text-decoration: none;
}
/*Estilos de la sección con id catalogo-viajes (de la página web nuestros viajes) se muestra como un contenedor flexible. En filas. Se alinean los elementos centrados en vertical. Y al comienzo del contendor en horizontal. Los elementos pueden fluir a una nueva fila si sobre pasan el ancho del contenedor. Separacién entre elemento (row-gap y column-gap).*/
#catalogo-viajes{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
    background-color: #F6FAF3;
    padding: 20px;

}
/*Los elementos de los contenedores (div) con id cuatro-columnas de la sección catalogo viajes se muestran en cuatro columnas. Ancho:22%. Con borde.*/
.cuatro-columnas{
    width: 22%;
    height: auto;
    border-style: solid;
    border-color: #b4b2b2;
    border-width: 1px;
    padding: 10px;
}
/*Las imagenes dentro de los div cuatro columnas tiene un ancho 100% y alto automático*/
.cuatro-columnas img{
    width: 100%;
    height: auto;
}

/* El contenedor pie de página se muestra como un contenedor flexible. Los elementos se alinean horizontalmente dejando el mismo espacio entre ellos y los dos lados del contenedor. Y tiene un fondo de color, color de texto y ancho.*/
footer{
    height: 50px;
    background-color: #467D15;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
/*Estilos de las imagenes del pie de página (los iconos de redes sociales)*/
footer div img{
    width: 30px;
    height: auto;
    padding-right: 40px;
}