/*
 * Estilos Globales y Reset Básico
 * Aplicamos box-sizing: border-box para un manejo más intuitivo del modelo de caja.
 * Esto asegura que el padding y el borde se incluyan en el ancho y alto total de un elemento,
 * facilitando el cálculo de dimensiones.
 * También definimos una fuente base y un color de fondo general para toda la página.
 */
html {
    box-sizing: border-box;
    font-size: 16px; /* Establecemos un tamaño de fuente base explícito para el elemento raíz (html).
                        Este es el valor de referencia para todas las unidades 'rem'. */
}
*, *::before, *::after {
    box-sizing: inherit; /* Hereda el box-sizing del elemento html para todos los elementos,
                            incluyendo los pseudo-elementos ::before y ::after. */
}
body {
    font-family: 'Inter', sans-serif; /* Fuente Inter para una apariencia moderna y legible */
    background-color: #f0f2f5; /* Fondo gris claro para el cuerpo de la página */
    margin: 0; /* Elimina el margen por defecto del body */
    padding: 20px; /* Relleno general alrededor del contenido de la página */
    color: #333; /* Color de texto predeterminado */
    line-height: 1.6; /* Altura de línea para una mejor legibilidad del texto */
}

/*
 * Estilos Comunes para Secciones
 * Cada sección tendrá un margen inferior para separarlas visualmente.
 * Se aplican estilos de fondo, relleno, bordes redondeados y una sombra suave
 * para dar un aspecto moderno y elevado a cada bloque de contenido.
 */
section {
    margin-bottom: 40px; /* Espacio debajo de cada sección */
    background-color: white; /* Fondo blanco para el contenido de la sección */
    padding: 20px; /* Relleno interno para el contenido */
    border-radius: 12px; /* Bordes redondeados para todas las secciones */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para un efecto de profundidad */
}

/* Estilos para los títulos de sección (h2) */
h2 {
    font-size: 2.25rem; /* Tamaño de fuente grande para los títulos de sección (relativo a html font-size) */
    font-weight: 700; /* Negrita para resaltar los títulos */
    color: #1a202c; /* Color oscuro para el título */
    margin-bottom: 20px; /* Espacio debajo del título */
    text-align: center; /* Centra el texto del título */
}

/*
 * Estilos para el Menú de Navegación Global (.main-nav)
 * Se adapta a 3 tamaños de pantalla: móvil, tableta y escritorio.
 */
.main-nav {
    background-color: #34495e; /* Color de fondo oscuro para la barra de navegación */
    padding: 15px 20px; /* Relleno interno */
    border-radius: 8px; /* Esquinas redondeadas */
    margin-bottom: 40px; /* Margen inferior para separarlo de las secciones */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.main-nav ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
    display: flex; /* Habilita Flexbox para los elementos del menú */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no hay espacio */
    justify-content: center; /* Centra los elementos del menú en móvil */
    flex-direction: column; /* Por defecto, los elementos se apilan en vertical (Móvil First) */
    align-items: center; /* Centra los ítems verticalmente en móvil */
    gap: 10px; /* Espacio entre los ítems del menú */
}

.main-nav ul li a {
    color: white; /* Color de texto blanco para los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    padding: 10px 15px; /* Relleno para hacer clic más fácil */
    display: block; /* Hace que los enlaces ocupen todo el espacio del li */
    border-radius: 5px; /* Esquinas redondeadas para los enlaces */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para hover */
    font-weight: 600; /* Texto semi-negrita */
    text-align: center; /* Centra el texto del enlace */
    width: 100%; /* Ocupa todo el ancho disponible para facilitar el toque en móvil */
}

.main-nav ul li a:hover {
    background-color: #4a627f; /* Color de fondo al pasar el ratón */
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}


/*
 * Sección de Flexbox
 * Demuestra cómo Flexbox organiza los elementos en una sola dimensión (fila o columna).
 * El contenedor flex permite que sus ítems se distribuyan, alineen y envuelvan automáticamente.
 */
.flexbox-container {
    display: flex; /* Convierte el contenedor en un contenedor flex. Los ítems se vuelven flexibles. */
    flex-direction: row; /* Los elementos se organizan en una fila (por defecto). Se pueden cambiar a 'column'. */
    justify-content: space-around; /* Distribuye el espacio uniformemente alrededor de los elementos en el eje principal. */
    align-items: center; /* Centra los elementos verticalmente en el eje transversal. */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no hay espacio horizontal. */
    background-color: #e0f2f7; /* Azul claro para el fondo del contenedor flex */
    padding: 20px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    min-height: 200px; /* Altura mínima para visualizar el espaciado y alineación */
    gap: 20px; /* Espacio entre los elementos flex (shorthand para row-gap y column-gap). */
}

/* Estilos para los ítems dentro del contenedor flex */
.flexbox-item {
    background-color: #67b0e6; /* Azul medio para los ítems flex */
    color: white; /* Color de texto blanco */
    padding: 20px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centra el texto dentro del ítem */
    font-weight: 600; /* Grosor de fuente semi-negrita */
    //min-width: 200px; /* Ancho mínimo para los ítems, para que no se encojan demasiado */
    flex-grow: 1; /* Permite que los ítems crezcan para ocupar el espacio disponible. */
    flex-shrink: 1; /* Permite que los ítems se encojan si es necesario. */
    flex-basis: auto; /* El tamaño base es automático, determinado por el contenido o min-width. */
}

/*
 * Sección de Media Queries
 * Demuestra cómo los estilos cambian según el ancho de la pantalla.
 * Se utiliza un enfoque "Mobile First": los estilos base son para móviles,
 * y luego se añaden o modifican estilos para pantallas más grandes.
 */
.media-query-section {
    background-color: #fffacd; /* Amarillo claro para el fondo base (móvil). Este color cambia con las media queries. */
    padding: 20px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centra el texto */
    transition: background-color 0.5s ease; /* Transición suave para el cambio de color de fondo, para un efecto visual agradable. */
}

/* Estilos para el texto dentro de la sección de media queries */
.media-query-text {
    font-size: 1.125rem; /* Tamaño de fuente base para el texto (relativo a html font-size) */
    color: #8b4513; /* Color marrón para el texto */
    font-weight: 600; /* Grosor de fuente semi-negrita */
}

/* Media Query para pantallas medianas (tabletas y laptops pequeñas) */
/* Los estilos dentro de este bloque se aplicarán cuando el ancho mínimo de la pantalla sea 768px o más. */
@media screen and (min-width: 768px) {
    .media-query-section {
        background-color: #d4edda; /* Cambia a verde claro para tabletas */
    }
    .media-query-text {
        font-size: 1.25rem; /* Aumenta el tamaño de fuente para tabletas */
        color: #28a745; /* Cambia el color del texto a verde */
    }

    /* Menú de Navegación en Horizontal para Tabletas y Escritorios */
    .main-nav ul {
        flex-direction: row; /* Los ítems del menú se organizan en fila */
        justify-content: space-around; /* Distribuye el espacio uniformemente */
        align-items: center; /* Centra verticalmente los ítems */
        gap: 15px; /* Ajusta el espacio entre ítems */
    }

    .main-nav ul li a {
        width: auto; /* Permite que el ancho se ajuste al contenido */
    }
}

/* Media Query para pantallas grandes (escritorios) */
/* Los estilos dentro de este bloque se aplicarán cuando el ancho mínimo de la pantalla sea 1200px o más. */
@media screen and (min-width: 1200px) {
    .media-query-section {
        background-color: #f8d7da; /* Cambia a rojo claro para escritorios */
    }
    .media-query-text {
        font-size: 1.5rem; /* Aumenta aún más el tamaño de fuente para escritorios */
        color: #dc3545; /* Cambia el color del texto a rojo */
    }

    /* Menú de Navegación en Horizontal para Escritorios (mantiene el comportamiento de tablet) */
    .main-nav ul {
        justify-content: flex-start; /* Alinea los ítems al inicio (izquierda) */
        gap: 25px; /* Mayor espacio entre ítems para escritorios */
    }
}

/*
 * Sección de CSS Grid (¡Ahora Responsivo!)
 * Demuestra cómo CSS Grid organiza los elementos en filas y columnas bidimensionales.
 * El diseño de la cuadrícula se adapta a diferentes tamaños de pantalla usando Media Queries.
 */
.grid-container {
    display: grid; /* Convierte el contenedor en un contenedor de cuadrícula. */
    gap: 15px; /* Espacio entre las celdas de la cuadrícula. */
    background-color: #e6e6fa; /* Lavanda claro para el fondo del contenedor grid */
    padding: 20px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    min-height: 300px; /* Altura mínima para visualizar el layout */

    /*
     * Estilos de Grid por defecto (Mobile First - para pantallas muy pequeñas)
     * En móviles, los elementos se apilarán en una sola columna para una mejor legibilidad.
     */
    grid-template-columns: 1fr; /* Una sola columna que ocupa todo el ancho disponible. */
    grid-template-rows: auto; /* Las filas se ajustan automáticamente al contenido. */
    grid-template-areas:
        "header"         /* La cabecera ocupa toda la fila superior */
        "sidebar-left"   /* El sidebar izquierdo debajo de la cabecera */
        "main-content"   /* El contenido principal debajo del sidebar izquierdo */
        "sidebar-right"  /* El sidebar derecho debajo del contenido principal */
        "footer";        /* El pie de página al final */
}

/* Estilos para los ítems dentro del contenedor grid */
.grid-item {
    background-color: #9370db; /* Púrpura medio para los ítems grid */
    color: white; /* Color de texto blanco */
    padding: 15px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centra el texto */
    font-weight: 600; /* Grosor de fuente semi-negrita */
    display: flex; /* Usamos flexbox dentro de cada ítem para centrar su contenido vertical y horizontalmente */
    justify-content: center;
    align-items: center;
    min-height: 80px; /* Altura mínima para cada ítem */
}

/* Asignación de áreas a los ítems para pantallas móviles (diseño apilado) */
.grid-header { grid-area: header; background-color: #7b68ee; font-size: 1.2rem; }
.grid-sidebar-left { grid-area: sidebar-left; background-color: #8a2be2; }
.grid-main-content { grid-area: main-content; background-color: #9932cc; font-size: 1.1rem; }
.grid-sidebar-right { grid-area: sidebar-right; background-color: #8a2be2; }
.grid-footer { grid-area: footer; background-color: #ba55d3; }

/*
 * Media Query para pantallas medianas (tabletas)
 * Cuando el ancho mínimo de la pantalla sea 768px o más, el grid cambia a 2 columnas
 * para un layout más optimizado para tabletas.
 */
@media screen and (min-width: 768px) {
    .grid-container {
        /* Definimos 2 columnas: una flexible (para el contenido) y otra con un ancho fijo (para los sidebars) */
        grid-template-columns: 1fr 200px;
        /* Redefinimos las áreas para el layout de tableta */
        grid-template-areas:
            "header header"              /* La cabecera sigue ocupando ambas columnas */
            "main-content sidebar-left"  /* El contenido principal y el sidebar izquierdo se colocan lado a lado */
            "main-content sidebar-right" /* El contenido principal abarca dos filas, y el sidebar derecho se coloca debajo del izquierdo */
            "footer footer";             /* El pie de página ocupa ambas columnas al final */
    }

    /* Reasignación de ítems a las nuevas áreas para tabletas */
    .grid-header { grid-area: header; }
    .grid-main-content { grid-area: main-content; }
    .grid-sidebar-left { grid-area: sidebar-left; }
    .grid-sidebar-right { grid-area: sidebar-right; }
    .grid-footer { grid-area: footer; }
}

/*
 * Media Query para pantallas grandes (escritorios)
 * Cuando el ancho mínimo de la pantalla sea 1200px o más, el grid cambia a 3 columnas
 * para un layout de escritorio más complejo y espacioso.
 */
@media screen and (min-width: 1200px) {
    .grid-container {
        /* Definimos 3 columnas: sidebar izquierdo fijo, contenido principal flexible, sidebar derecho fijo */
        grid-template-columns: 180px 1fr 250px;
        /* Redefinimos las áreas para el layout de escritorio */
        grid-template-areas:
            "header header header"              /* La cabecera abarca las tres columnas */
            "sidebar-left main-content sidebar-right" /* Los tres elementos principales se colocan lado a lado */
            "footer footer footer";             /* El pie de página abarca las tres columnas al final */
    }

    /* Reasignación de ítems a las nuevas áreas para escritorios */
    .grid-header { grid-area: header; }
    .grid-sidebar-left { grid-area: sidebar-left; }
    .grid-main-content { grid-area: main-content; }
    .grid-sidebar-right { grid-area: sidebar-right; }
    .grid-footer { grid-area: footer; }
}

/* Estilos para el título principal de la página */
.page-title {
    text-align: center; /* Centra el título */
    font-size: 3rem; /* Tamaño de fuente muy grande (relativo a html font-size) */
    font-weight: 800; /* Extra negrita para un impacto visual */
    color: #2c3e50; /* Azul oscuro para el título */
    margin-bottom: 50px; /* Espacio debajo del título principal */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra de texto suave para un efecto sutil */
}

/*
 * Ejemplos de Unidades EM y REM
 * Esta sección demuestra la diferencia entre las unidades 'em' y 'rem'.
 * 'rem' es relativo al tamaño de fuente del elemento raíz (html).
 * 'em' es relativo al tamaño de fuente del elemento padre.
 */
.em-rem-example-container {
    background-color: #f7f7f7; /* Fondo claro para el contenedor de ejemplos */
    padding: 20px; /* Relleno interno */
    border-radius: 8px; /* Bordes redondeados */
    border: 1px dashed #ccc; /* Borde punteado para diferenciar */
    margin-top: 20px; /* Margen superior */
}

.parent-for-em {
    font-size: 20px; /* Tamaño de fuente del elemento padre. Este será la base para los 'em' de sus hijos. */
    background-color: #e6ffe6; /* Fondo verde claro para el padre */
    padding: 10px; /* Relleno interno */
    border-radius: 5px; /* Bordes redondeados */
    margin-bottom: 15px; /* Margen inferior */
    border: 1px solid #90ee90; /* Borde verde claro */
}

.text-em-example {
    font-size: 1.2em; /* 1.2 veces el tamaño de fuente del elemento padre (.parent-for-em, que es 20px).
                         Resultado: 1.2 * 20px = 24px. */
    color: #006400; /* Verde oscuro */
    font-weight: 500; /* Grosor de fuente */
    margin-top: 5px; /* Margen superior */
}

.text-rem-example {
    font-size: 1.2rem; /* 1.2 veces el tamaño de fuente del elemento raíz (html, que es 16px por defecto).
                          Resultado: 1.2 * 16px = 19.2px. */
    color: #8b0000; /* Rojo oscuro */
    font-weight: 500; /* Grosor de fuente */
    margin-top: 5px; /* Margen superior */
}

.note-text {
    font-size: 0.9rem; /* Un poco más pequeño que el tamaño base del html (0.9 * 16px = 14.4px) */
    color: #555; /* Color gris oscuro */
    font-style: italic; /* Texto en cursiva */
    margin-top: 10px; /* Margen superior */
}