/* Estilos base */
body {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2 {
    font-weight: 600; /* Resalta los encabezados con un peso mayor */
}

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300; /* Peso ligero (fino) */
    text-align: center;
    color: #555;
    font-size: 50px;
}

h2 {
    text-align: center;
    color: #333;
    font-size: 45px;
}

p {
    max-width: 700px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    color: #555;
}

/* Navegación */
header {
    background-color: #f9f9f9;
    padding: 15px;
    text-align: center;
}

nav {
    width: 100%; /* Asegúrate de que el nav ocupe el 100% del ancho */
    display: flex; /* Utiliza flexbox para alinear el contenido */
    justify-content: center; /* Centra el contenido del nav */
}

nav ul {
    list-style: none;
    display: flex; /* Flexbox para una mejor alineación */
    justify-content: center; /* Centra los elementos del ul */
    gap: 20px; /* Espaciado entre enlaces */
    padding: 0;
    margin: 0; /* Asegúrate de que no haya margen */
    width: 100%; /* Asegúrate de que el ul ocupe el 100% del ancho */
}

nav ul li {
    text-align: center; /* Asegúrate de que el texto esté centrado en cada elemento */
}

nav ul li a {
    color: #555;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    transition: background-color 0.3s, transform 0.3s;
}

nav ul li a:hover {
    background-color: #555;
    transform: scale(1.05);
}

/* Secciones */
.section-content {
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente */
}

.video-gallery {
    display: flex; /* Usar flexbox para alineación horizontal */
    overflow-x: auto; /* Permite desplazamiento horizontal si hay muchos videos */
    padding: 20px 0; /* Espaciado superior e inferior */
    gap: 20px; /* Espaciado entre videos */
}

.video-item {
    max-width: 300px; /* Ancho máximo de cada video */
    text-align: center;
}

.video-item iframe {
    width: 100%; /* Asegura que el iframe ocupe el 100% del ancho del contenedor */
    height: 200px; /* Altura fija para los videos */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
}

/* Ajustes para la imagen de perfil */
.profile-pic {
    width: 100%; /* Ancho al 100% de su contenedor */
    max-width: 600px; /* Ancho máximo que no sobrepase este valor */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
}

/* Centrar solo la imagen */
.centered-content {
    text-align: center; /* Centra el contenido de texto (incluida la imagen) */
    margin: 20px 0; /* Espacio superior e inferior */
}

/* Pie de página */
footer {
    background-color: #f9f9f9;
    color: #333; /* Cambiar el color del texto para que sea visible */
    text-align: center;
    padding: 15px 0; /* Espaciado más amplio */
    position: relative; /* Cambiado a relative para mantener el footer al final */
    width: 100%;
    margin-top: auto; /* Permite que el footer se empuje hacia abajo */
}

/* Publicaciones */
ul {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
}

ul li {
    margin: 10px 0;
}

ul li a {
    color: #3498db;
    text-decoration: none;
}

ul li a:hover {
    text-decoration: underline;
}

/* Media Queries para dispositivos móviles */
@media (max-width: 600px) {
    h1 {
        font-size: 30px; /* Tamaño más pequeño para h1 en móviles */
    }

    h2 {
        font-size: 30px; /* Tamaño más pequeño para h2 en móviles */
    }

    nav ul {
        flex-direction: column; /* Cambiar a disposición vertical */
        align-items: center; /* Centrar los elementos */
        gap: 10px; /* Espaciado entre enlaces en móviles */
    }

    nav ul li {
        margin: 10px 0; /* Espaciado entre elementos */
    }

    .section-content {
        padding: 20px 10px; /* Menos padding en móviles */
    }

    .profile-pic {
        max-width: 90%; /* Asegurar que la imagen no exceda el ancho */
    }
}