/* Selecciona todos los elementos de la página */
* {
    margin: 0; /* Elimina los márgenes por defecto */
    padding: 0; /* Elimina el relleno por defecto */
    box-sizing: border-box; /* Hace que el ancho y alto incluyan el borde y el padding */

}

/* Estilos generales del cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Fuente de respaldo */
    background-color: #bfc2bb; /* Color de fondo */
    background-image: url(assets/foto2.webp); /* Imagen de fondo */
    background-position: top; /* Coloca la imagen arriba */
    background-size: cover; /* Hace que la imagen cubra toda la pantalla */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* Fuente principal */
}

/* Estilos del encabezado */
header {
    font-family: 'Times New Roman', Times, serif; /* Fuente del encabezado */
    border: 1.5px solid #a5bb97; /* Borde del encabezado */
    margin: 15px; /* Espacio exterior */
    text-align: center; /* Centra el texto */
    position: relative; /* Permite posicionar elementos internos */
    background-color: rgba(11, 11, 11, 0.228); /* Fondo semitransparente */
}

/* Imagen dentro del encabezado */
header img {
    float: left; /* Coloca la imagen a la izquierda */
    width: 70px; /* Ancho */
    height: 70px; /* Alto */
}

/* Título principal */
header h1 {
    margin-bottom: 10px; /* Espacio debajo del título */
}

/* Párrafo del encabezado */
header p {
    color: rgb(7, 6, 6); /* Color del texto */
}

/* Barra de navegación */
nav {
    background-color: #a5bb97; /* Color de fondo */
    padding: 10px; /* Espacio interno */
}

/* Lista del menú */
nav ul {
    list-style: none; /* Quita los puntos de la lista */
    display: flex; /* Coloca los elementos en fila */
    justify-content: center; /* Centra los elementos */
    gap: 20px; /* Espacio entre ellos */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* Fuente */
}

/* Enlaces del menú */
nav a {
    text-decoration: none; /* Quita el subrayado */
    color: rgb(112, 122, 86); /* Color del enlace */
    font-weight: bold; /* Texto en negrita */
}

/* Contenedor principal */
main {
    display: flex; /* Usa Flexbox */
    flex-wrap: wrap; /* Permite varias filas */
    justify-content: space-evenly; /* Distribuye los elementos */
    gap: 30px; /* Espacio entre elementos */
    padding: 30px; /* Espacio interno */
    width: 90%; /* Ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor */
}

/* Pseudoelemento antes del contenido */
main::before {
    width: 280px; /* Ancho */
    height: 600px; /* Alto */
    border-radius: 20px; /* Bordes redondeados */
    background-size: cover; /* Ajusta la imagen de fondo */
    background-position: center; /* Centra la imagen */
    display: block; /* Se comporta como bloque */
}

/* Pseudoelemento después del contenido */
main::after {
    width: 280px; /* Ancho */
    height: 380px; /* Alto */
    border-radius: 20px; /* Bordes redondeados */
    background-size: cover; /* Ajusta la imagen */
    background-position: center; /* Centra la imagen */
    display: block; /* Se comporta como bloque */
    align-self: flex-end; /* Lo coloca al final del eje vertical */
}

/* Imagen del diario */
.diario {
    margin-right: auto; /* Empuja el elemento hacia la izquierda */
    width: 500px; /* Ancho */
    height: 500px; /* Alto */
}

/* Todas las secciones */
section {
    width: 450px; /* Ancho */
    background: rgb(161, 162, 122); /* Color de fondo */
    padding: 20px; /* Espacio interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
    font-family: 'Times New Roman', Times, serif; /* Fuente */
}

/* Títulos h2 dentro de section */
section h2 {
    margin-right: 17px; /* Margen derecho */
}

/* Títulos h3 dentro de section */
section h3 {
    margin-bottom: 20px; /* Espacio debajo */
}

/* Párrafos y listas dentro de section */
section p,
section li {
    line-height: 1.8; /* Espacio entre líneas */
    margin-bottom: 10px; /* Espacio debajo */
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* Fuente */
}

/* Listas dentro de section */
section ul {
    padding-left: 20px; /* Sangría */
}

/* Contenedor de la sección conflicto */
.conflicto {
    display: flex; /* Flexbox */
    width: 600px; /* Ancho */
    height: 400px; /* Alto */
    background: rgb(161, 162, 122); /* Fondo */
    padding: 15px; /* Espacio interno */
    border-radius: 10px; /* Bordes redondeados */
    font-family: 'Times New Roman', Times, serif; /* Fuente */
    justify-content: space-evenly; /* Distribuye los elementos */
}

/* Clase de prueba */
.prueba {
    height: 600px; /* Alto */
}

/* Sección con id inicio */
#inicio {
    display: flex; /* Flexbox */
    flex-wrap: wrap; /* Permite varias filas */
    justify-content: space-evenly; /* Distribuye los elementos */
    gap: 30px; /* Espacio entre ellos */
    padding: 30px; /* Espacio interno */
    margin: 0 auto; /* Centra el contenedor */
    width: 0 auto; /* (Esta línea es incorrecta, debería ser width: auto;) */
}

/* Caja de consecuencias */
.consecuencias {
    width: 450px; /* Ancho inicial */
    height: 600px; /* Alto */
    background: rgb(161, 162, 122); /* Fondo */
    padding: 20px; /* Espacio interno */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
    font-family: 'Times New Roman', Times, serif; /* Fuente */
    flex-wrap: wrap; /* Permite varias filas */
    justify-content: space-evenly; /* Distribuye el contenido */
    gap: 30px; /* Espacio entre elementos */
    padding: 30px; /* Sobrescribe el padding anterior */
    margin: 0 auto; /* Centra el elemento */
    width: 0 auto; /* (Esta línea es incorrecta, debería ser width: auto;) */
}

/* Contenedor de la galería */
.galeria {
    background: rgba(161, 162, 122, 0.82); /* Fondo semitransparente */
    padding: 20px; /* Espacio interno */
    border-radius: 8px; /* Bordes redondeados */
    font-family: 'Times New Roman', Times, serif; /* Fuente */
    flex-wrap: wrap; /* Permite varias filas */
    justify-content: center; /* Centra el contenido */
}

/* Contenedor de imágenes */
.imagenes {
    width: 100%; /* Ocupa todo el ancho */
    justify-content: center; /* Centra el contenido */
}

/* Contenedor de historia */
.historia {
    width: 100%; /* Ocupa todo el ancho */
    justify-content: center; /* Centra el contenido */
}

/* Pie de página */
footer {
    background-color: #80a78d; /* Color de fondo */
    color: white; /* Color del texto */
    text-align: center; /* Centra el texto */
    padding: 15px; /* Espacio interno */
    margin-top: 20px; /* Espacio superior */
    width: 100%; /* Ocupa todo el ancho */
}