/* General reset and box model */
* {
    margin: 0; /* Elimina el margen por defecto de todos los elementos */
    padding: 0; /* Elimina el padding por defecto de todos los elementos */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho y alto total de los elementos */
}

/* Estilo del cuerpo */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Define la fuente del cuerpo */
    font-weight: 300; /* Establece el grosor de la fuente */
}

/* Estilo del logo y navegación */
.Logo {
    display: flex; /* Muestra elementos hijos (h1 y nav) en una fila flexible */
    justify-content: space-between; /* Espacia los elementos para que queden alineados a los extremos */
}

/* Estilo del header */
header {
    display: grid; /* Utiliza grid para organizar los elementos en el header */
    grid-template-columns: auto auto; /* Define dos columnas automáticas para el logo y la navegación */
    padding-top: 1rem; /* Espaciado superior */
    padding-bottom: 4rem; /* Espaciado inferior */
    padding-left: 2rem; /* Espaciado izquierdo */
    padding-right: 2rem; /* Espaciado derecho */
}

/* Estilo de los encabezados h1 */
h1 {
    color: darkgreen; /* Color del texto del título principal */
    font-size: 2rem; /* Tamaño de la fuente del título principal */
    font-weight: 700; /* Grosor de la fuente del título principal */
    padding-left: 2.5rem; /* Espaciado izquierdo para el h1 */
}

/* Estilo de los encabezados h2 */
h2 {
    color: darkgreen; /* Color del texto de los encabezados secundarios */
    font-size: 1.5rem; /* Tamaño de la fuente de los encabezados secundarios */
    font-weight: 700; /* Grosor de la fuente de los encabezados secundarios */
}

/* Estilo de las secciones */
section {
    grid-template-columns: 1fr 3fr; /* Dos columnas, la segunda (artículo) es tres veces más ancha que la primera (aside) */
    display: grid; /* Utiliza grid para organizar los elementos en la sección */
    gap: 2%; /* Espacio entre los elementos (artículo y aside) */
    padding: 2%; /* Espaciado interno de la sección */
}

/* Estilo para los elementos aside */
aside {
    display: block; /* Muestra el aside como bloque */
    unicode-bidi: isolate; /* Aísla la dirección del texto en el aside */
}

/* Estilo para listas desordenadas (ul) */
ul {
    display: block; /* Muestra las listas como bloques */
    margin-block-start: 1rem; /* Margen superior de la lista */
    margin-block-end: 1rem; /* Margen inferior de la lista */
    margin-inline-start: 0rem; /* Margen izquierdo de la lista */
    margin-inline-end: 0rem; /* Margen derecho de la lista */
    padding-inline-start: 2.5rem; /* Espaciado izquierdo del contenido de la lista */
}

/* Estilo para imágenes dentro de figuras */
figure img {
    width: 100%; /* Hace que las imágenes ocupen todo el ancho del contenedor (figure) */
}

/* Estilo general para imágenes */
img {
    overflow-clip-margin: content-box; /* Controla el área de recorte del contenido de imágenes */
    overflow: clip; /* Controla cómo se recorta el contenido que se desborda de imágenes */
}

/* Estilo para las leyendas de figuras */
figcaption {
    color: white; /* Color del texto de la leyenda */
    align-self: center; /* Centra la leyenda dentro del contenedor */
    text-align: center; /* Centra el texto de la leyenda */
}

/* Estilo para artículos */
article {
    display: block; /* Muestra artículos como bloques */
    unicode-bidi: isolate; /* Aísla la dirección del texto en el artículo */
}

/* Estilo para figuras */
figure {
    display: grid; /* Utiliza grid para organizar el contenido de la figura */
    background-color: darkgreen; /* Color de fondo de la figura */
    grid-template-columns: 50% 50%; /* Dos columnas del mismo ancho para la imagen y la leyenda */
    margin-block-start: 1rem; /* Margen superior de la figura */
    margin-block-end: 1rem; /* Margen inferior de la figura */
    margin-inline-start: 2.5rem; /* Margen izquierdo de la figura */
    margin-inline-end: 2.5rem; /* Margen derecho de la figura */
    unicode-bidi: isolate; /* Aísla la dirección del texto en la figura */
}

/* Estilo para listas ordenadas (ol) */
ol {
    display: block; /* Muestra listas ordenadas como bloques */
    margin-inline-start: 0rem; /* Margen izquierdo de la lista ordenada */
    margin-inline-end: 0rem; /* Margen derecho de la lista ordenada */
    margin-block-start: 1rem; /* Margen superior de la lista ordenada */
    margin-block-end: 1rem; /* Margen inferior de la lista ordenada */
    padding-left: 3.4375rem; /* Espaciado izquierdo del contenido de la lista ordenada */
}

/* Estilo para elementos de lista (li) */
li {
    display: list-item; /* Muestra elementos de lista */
    text-align: -webkit-match-parent; /* Alinea el texto al padre (para navegadores webkit) */
    unicode-bidi: isolate; /* Aísla la dirección del texto en los elementos de lista */
}

/* Estilo para el pie de página (footer) */
footer {
    background-image: url(../img/fresas.webp); /* Establece una imagen de fondo en el footer */
    background-size: cover; /* Hace que la imagen cubra todo el área del footer */
    background-position: center; /* Centra la imagen de fondo en el footer */
    background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */
    font-size: 1rem; /* Tamaño de la fuente del pie de página */
    font-weight: 700; /* Grosor de la fuente del pie de página */
    text-align: center; /* Centra el texto del pie de página */
    padding-top: 5rem; /* Espaciado superior del pie de página */
    padding-bottom: 5rem; /* Espaciado inferior del pie de página */
    padding-left: 5rem; /* Espaciado izquierdo del pie de página */
    padding-right: 5rem; /* Espaciado derecho del pie de página */
    color: white; /* Color del texto del pie de página */
    height: auto; /* Altura automática, se ajusta al contenido del pie de página */
}