/* Fondo general del body con una imagen centrada y ajustada a toda la pantalla */
body {
    background-image: url(./assets/img/fondo.png);
    background-position: center;
    background-size: cover;
}

/* Encabezado principal: usa flex para alinear logo y títulos en fila */
header {
    background-color: #925e22;
    display: flex;
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
}

/* Contenedor blanco principal de la página de inicio */
.fondo1 {
    background-color: white;
    border-radius: 20px;
}

/* Tamaño del logo del header */
.logo img {
    text-align: left;
    width: 300px;
    height: auto;
}

/* Estilo del título principal */
.titulos h1 {
    color: #F7E8D1;
    font-size: 40px;
}

/* Estilo del subtítulo */
.titulos h2 {
    color: #F7E8D1;
    font-size: 24px;
}

/* Contenedor del contenido principal con texto e imagen */
.contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Caja blanca principal con ancho fijo, centrada y con sombra */
.fondo1 {
    width: 50%;
    margin: 30px auto;
    box-shadow: 0 4px 8px #c7b299;
}

/* Área principal interna de cada página */
.parra1 {
    width: 85%;
    margin: 30px auto;
}

/* Se repite la clase .contenido para mantener texto e imagen alineados */
.contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bloque de texto de la portada */
.texto {
    width: 65%;
}

/* Contenedor de la imagen */
.img {
    width: 25%;
    text-align: center;
}

/* Imagen principal de la portada */
.img img {
    width: 200px;
    border-radius: 20px;
    box-shadow: 3px 3px 10px #c7b299;
}

/* Separación superior del bloque con el botón */
.p {
    margin-top: 20px;
}

/* Estilo del enlace que funciona como botón */
.p a {
    text-decoration: none;
    background-color: #925e22;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
}

/* Cada campo del formulario se organiza en columna */
.campos {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

/* Caja del formulario */
fieldset {
    margin: auto;
    border: 2px solid #925e22;
    background-color: #ffefdc;
    width: 400px;
    height: 300px;
    flex-direction: row;
}

/* Contenedor del formulario, centrado */
.contenedorf {
    display: flex;
    justify-content: center;
    padding: 0;
}

/* Botón de inicio debajo del formulario */
.boton {
    width: 150px;
    background-color: #925e22;
    padding: 10px 20px;
    text-align: center;
    border-radius: 8px;
    margin: 20px auto;
}

/* Estilo del enlace dentro del botón */
.boton a {
    color: white;
    text-decoration: none;
    display: block;
}

/* Caja de texto de la página de origen */
.texto2 {
    background-color: white;
    border: 3px solid #925e22;
    border-radius: 25px;
    padding: 30px;
    margin-bottom: 40px;
    text-align: justify;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Contenedor de las dos listas de curiosidades */
.listas {
    display: flex;
    margin-bottom: 50px;
}

/* Primera columna de curiosidades */
.lis1 {
    background-color: white;
    border: 3px solid #925e22;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    width: 600px;
    margin: auto;
}

/* Segunda columna de curiosidades */
.lis2 {
    background-color: white;
    border: 3px solid #925e22;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    width: 600px;
    margin: auto;
}

/* Espaciado entre elementos de una lista */
.lista li {
    margin-bottom: 10px;
}

/* Barra de navegación */
nav {
    margin: 10px auto;
    background-color: #925e22d0;
    padding: 15px;
    border-radius: 3px;
}

/* Lista del menú en horizontal */
nav ul {
    margin: 14px;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
}

/* Estilo de los enlaces del menú */
nav a {
    text-decoration: none;
    background-color: #cc9c66e5;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
}

/* Caja principal de otra página de contenido */
.parra2 {
    background-color: white;
    border: 2px solid #83541d;
    border-radius: 15px;
    width: 80%;
    margin: auto;
}

/* Títulos h3 generales */
h3 {
    color: #925e22;
}

/* Títulos h4 generales */
h4 {
    color: #a86d2c;
}

/* Todos los párrafos justificados */
p {
    text-align: justify;
}

/* Margen izquierdo de listas */
ul {
    margin-left: 20px;
}

/* Tabla general */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

/* Encabezados de tabla */
th {
    background-color: #9c6526;
    color: white;
    border: 1px solid #83541d;
    padding: 10px;
}

/* Celdas de la tabla */
td {
    border: 1px solid #925e22;
    padding: 10px;
}

/* Filas de la tabla */
tr {
    background-color: #f3e3cf;
}

/* Segunda definición de nav */
nav {
    background-color: #925e22;
    padding: 10px;
}

/* Segunda definición del ul del nav */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0;
}

/* Segunda definición de enlaces del nav */
nav a {
    text-decoration: none;
    color: white;
}

/* Efecto hover del menú */
nav a:hover {
    color: #f7d7a4;
}

/* Título de secciones tipo tabla o contenido */
.t {
    background-color: white;
    text-align: center;
    color: #925e22;
    width: auto;
    border-bottom: 2px solid #925e22;
    border-radius: 15px;
}

/* Caja contenedora de información */
.in {
    background-color: white;
    margin-bottom: 30px;
    border: 2px solid #83541d;
    border-radius: 15px;
}

/* Contenedor flex para tarjetas */
.inf {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Tarjetas de contenido */
.card {
    width: 30%;
    background-color: #fff8f0;
    border: 2px solid #c89b62;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
}

/* Imágenes de tarjetas o secciones */
.imgt {
    width: 400px;
    border-radius: 10px;
}

/* Título de sección */
.st {
    background-color: white;
    text-align: center;
    color: #925e22;
    width: auto;
    border-bottom: 2px solid #925e22;
    border-radius: 15px;
}

/* Subtítulo de sección */
.sst {
    background-color: white;
    color: #925e22;
    width: auto;
    border-bottom: 2px solid #925e22;
    border-radius: 15px;
}

/* Footer general */
footer {
    background-color: #925e22;
    color: white;
    display: flex;
    margin: 0 auto;
    margin-bottom: 1.5em;
    border-bottom: 1.5em;
    gap: 60px;
}

/* Enlaces del footer */
footer a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

/* Títulos del footer */
footer h4 {
    color: #ffffff;
    border-bottom: 2px solid hsl(0, 0%, 95%);
    text-align: center;
}

/* Párrafos del footer */
footer p {
    text-align: center;
}

/* Íconos de redes */
.redes {
    width: 20px;
}

/* Logo del footer */
.lg img {
    width: 50px;
    height: auto;
}

/* Contenedor de enlaces del footer */
.conteiner {
    padding: auto;
    display: flex;
    flex-direction: column;
}

/* Lista del footer */
.lis {
    list-style: none;
}

/* Footer específico de algunas páginas */
.footer2 {
    background-color: #925e22;
    color: white;
    display: flex;
    margin: 0 auto;
    margin-bottom: 1.5em;
    border-bottom: 1.5em;
    gap: 225px;
}

/* Enlaces del footer2 */
.footer2 a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

/* Títulos del footer2 */
.footer2 h4 {
    color: #ffffff;
    border-bottom: 2px solid hsl(0, 0%, 95%);
    text-align: center;
}

/* Párrafos del footer2 */
.footer2 p {
    text-align: center;
}

/* Íconos de redes */
.redes {
    width: 20px;
}

/* Logo del footer2 */
.lg img {
    width: 70px;
    height: auto;
}

/* Contenedor en columna */
.conteiner {
    padding: auto;
    display: flex;
    flex-direction: column;
}

/* Lista sin estilo */
.lis {
    list-style: none;
}