/* === 1. ESTILOS BASE (El lienzo en blanco) === */
        body {
            font-family: 'Segoe UI', system-ui, sans-serif; /* Una letra moderna y limpia */
            margin: 0;
            background-color: #e9ecef; /* Un gris muy suave para que el blanco resalte */
            color: #2b2b2b;
            line-height: 1.6; /* Hace que el texto respire y sea más fácil de leer */
        }

        /* === 2. ENCABEZADO (La tarjeta de presentación) === */
        header {
            /* Usamos un degradado de colores vivos en lugar de un color sólido aburrido */
            background: linear-gradient(135deg, #46a1f1 0%, #128ec8 100%);
            color: #fdf8f8ef;
            padding: 50px 20px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra para darle profundidad */
        }

        header h1 {
            margin: 0;
            font-size: 2.8em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Sombrita sutil en el texto */
        }

        /* === 3. NAVEGACIÓN (El menú) === */
        nav {
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            /* ¡TRUCO PRO! 'sticky' hace que el menú se quede pegado arriba al bajar por la página */
            position: sticky; 
            top: 0;
            z-index: 100;
        }

        nav a {
            color: #027ce7;
            text-decoration: none;
            padding: 10px 20px;
            margin: 0 5px;
            font-weight: bold;
            border-radius: 20px; /* Botones con forma de píldora */
            transition: all 0.3s ease; /* Animación suave al pasar el ratón */
        }

        nav a:hover {
            background-color: #128ec8;
            color: white;
        }

        /* === 4. ESTRUCTURA PRINCIPAL (Dividiendo la pantalla) === */
        .contenedor {
            display: flex; /* Divide la pantalla en columnas */
            max-width: 1100px; /* No deja que la página se estire demasiado en pantallas gigantes */
            margin: 30px auto; /* Centra el contenedor */
            gap: 30px; /* Espacio respirable entre el lado izquierdo y derecho */
            padding: 0 20px;
        }

        /* === 5. CONTENIDO PRINCIPAL (El corazón de la página) === */
        main {
            flex: 3; /* Ocupa 3 partes del espacio disponible */
            background-color: white;
            padding: 35px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.05); /* Efecto de tarjeta flotante */
        }

        /* Diseñamos unas "cajas de información" para destacar textos */
        .caja-info {
            background-color: #f8f9fa;
            border-left: 5px solid #128ec8; /* Línea azul decorativa a la izquierda */
            padding: 20px;
            margin: 25px 0;
            border-radius: 0 8px 8px 0;
        }

        /* === 6. BARRA LATERAL (Información secundaria) === */
        aside {
            flex: 1; /* Ocupa 1 parte del espacio (es más delgada que el main) */
            background-color: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
            height: fit-content; /* Evita que la barra se estire hacia abajo innecesariamente */
        }

        /* Un botón de ejemplo para la barra lateral */
        .boton-ejemplo {
            display: block;
            background: linear-gradient(135deg, #45bdf5 0%, #2ec4cc 100%);
            color: white;
            text-align: center;
            text-decoration: none;
            padding: 12px;
            border-radius: 8px;
            font-weight: bold;
            margin-top: 20px;
            transition: transform 0.2s;
        }

        .boton-ejemplo:hover {
            transform: scale(1.05); /* El botón crece un poquito al pasar el ratón */
        }

        /* === 7. PIE DE PÁGINA (El cierre) === */
        footer {
            background-color: #2b2b2b;
            color: white;
            text-align: center;
            padding: 25px;
            margin-top: 50px;
        }

        /* === 8. MAGIA PARA CELULARES (Responsive Design) === */
        /* Si la pantalla mide menos de 768px (celulares o tablets pequeñas)... */
        @media (max-width: 768px) {
            .contenedor {
                flex-direction: column; /* ...ponemos la barra lateral DEBAJO del contenido, no al lado */
            }
            nav {
                flex-wrap: wrap; /* Permite que los botones del menú bajen de renglón si no caben */
            }
        }