/* Estilos generales */
body {
    background-color: #d5cbbd; /* Un color suave de fondo */
    margin: 0; /* Resetear el margen por defecto del body */
    font-family: sans-serif; /* Una fuente genérica para empezar */
    color: #333; /* Color de texto por defecto */
    display: flex; /* Para controlar la disposición de los elementos principales */
    flex-direction: column; /* Alinear los elementos verticalmente (header, container, footer) */
    align-items: center; /* Centrar horizontalmente los elementos principales */
    min-height: 100vh; /* Asegurar que el body ocupe al menos toda la altura de la ventana */
}

/* Header (Contiene la navegación) */
header {
    background-color: #8dbca3; /* Un color verde suave para el header */
    border-radius: 16px;
    padding: 15px 20px; /* Añadimos algo de padding interno */
    margin-top: 20px; /* Margen superior para separarlo del borde del body */
    width: 80%; /* Ancho para que no ocupe todo el ancho */
    max-width: 960px; /* Un ancho máximo para evitar que se vea demasiado estirado en pantallas grandes */
    box-sizing: border-box; /* Incluir padding en el ancho */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px; /* Espacio entre los elementos de la navegación */
    justify-content: left; /* Alinear los enlaces a la izquierda */
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 8px 15px; /* Espacio alrededor de los enlaces */
    border-radius: 8px; /* Un pequeño radio para los enlaces */
}

nav ul li a.active {
    /* Estilo para el enlace activo (opcional, como dijiste) */
    background-color: #f0f0f0;
}

/* Contenedor principal (main y sidebar) */
.container {
    display: flex; /* Para alinear el contenido principal y la barra lateral horizontalmente */
    width: 80%; /* Igualamos el ancho del header */
    max-width: 960px; /* Igualamos el ancho máximo del header */
    margin-top: 20px; /* Espacio entre la navegación y el contenido */
    gap: 20px; /* Espacio entre el main y el aside */
    box-sizing: border-box; /* Incluir padding y border en el ancho */
}

/* Contenido principal */
.main-content {
    background-color: #f0e6d2; /* Un color claro para el contenido principal */
    padding: 20px;
    border-radius: 8px;
    flex: 3; /* Ocupa más espacio que la barra lateral (proporción) */
}

/* Barra lateral */
.sidebar {
    background-color: #e5b777; /* Un color amarillo melocotón suave para la barra lateral */
    padding: 20px;
    border-radius: 8px;

    align-items: center; /* Centrar el contenido de la barra lateral */
    display: flex; /* Usamos Flexbox para alinear el contenido */
    flex: 1; /* Ocupa menos espacio que el contenido principal (proporción) */
}

.sidebar h3, .sidebar p{
    text-align: center;
}

/* Footer (por ahora vacío) */
footer {
    margin-top: 20px;
    color: #eee; /* Un color claro para el texto del footer si lo agregamos */
    text-align: center;
    padding: 10px;
    width: 80%;
    max-width: 960px;
    box-sizing: border-box;
}

/* Estilos para la sección home-content */





#home-content h1 {
    text-align: center; /* Centrar el título HOME */
    margin-bottom: 10px; /* Espacio debajo del título */
}

#home-content hr {
    border: 1px solid #ccc; /* Estilo básico para el divider */
    margin: 15px 0; /* Espacio arriba y abajo del divider */
}

/* Estilos para alinear imagen y texto en home-intro */
.home-intro {
    display: flex; /* Usamos Flexbox para la disposición horizontal */
    align-items: top; /* Alinea verticalmente los elementos al centro */
    gap: 20px; /* Espacio entre la imagen y el texto */
    margin-bottom: 20px; /* Espacio debajo de esta sección */
}

.home-intro img {
    max-width: 300px; /* Ajusta el tamaño máximo de la imagen según tu diseño */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px; /* Opcional: para redondear las esquinas de la imagen */
}

.home-intro p {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    line-height: 1.5; /* Mejora la legibilidad del texto */
}

/* Estilos para la información de contacto */
.contact-info {
    margin-bottom: 20px;
}

.contact-info ul {
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

.contact-info ul li {
    margin-top: 32px;
}



/* Estilos para la fecha del proyecto */
.project-date {
    text-align: right; /* Alinea la fecha a la derecha */
    font-size: 0.9em;
    color: #777;
}





/* Estilos para la sección projects-content */
#projects-content {
    padding: 20px;
}

#projects-content h1 {
    text-align: center;
    margin-bottom: 10px;
}

#projects-content hr {
    border: 1px solid #ccc;
    margin: 15px 0;
}

/* Estilos para cada proyecto individual */
.project {
    margin-bottom: 20px;
}

.project-details {
    display: flex; /* Mantenemos Flexbox para la imagen y el bloque de texto/enlaces */
    gap: 20px; /* Espacio entre la imagen y el bloque de texto/enlaces */
    align-items: flex-start; /* Alinea los elementos verticalmente al inicio */
}

.project-details img {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
}

.project-info { /* Nuevo contenedor para el texto y los enlaces */
    flex-grow: 1; /* Permite que ocupe el espacio restante */
    display: flex;
    flex-direction: column; /* Alinea el texto y los enlaces verticalmente */
}

.project-info p {
    line-height: 1.5;
    margin-bottom: 10px; /* Aumentamos el margen inferior del párrafo */
}

.project-info a {
    color: blue;
    text-decoration: none;
    margin-top: 5px; /* Espacio entre los enlaces */
}

.project-info a:hover {
    text-decoration: underline;
}



/* Estilos para la sección blog-content */
#blog-content {
    padding: 10px; /* Asegúrate de que tenga un padding interno */
}

#blog-content h1 {
    text-align: left; /* Centrar el título My blog */
    margin-bottom: 10px; /* Espacio debajo del título */
}

#blog-content hr {
    border: 1px solid #ccc; /* Estilo básico para el divider */
    margin: 15px 0; /* Espacio arriba y abajo del divider */
}

/* Estilos para cada entrada del blog */
.blog-post {
    margin-bottom: 20px; /* Espacio entre las entradas del blog */
    /*Contorno*/
    padding: 15px; /* Espacio interno para el contenido del blog */
    background-color: #eaece4; /* Un color claro para el fondo de las entradas del blog */
    border-radius: 8px; /* Bordes redondeados para las entradas del blog */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
      border: 1px solid #000000; /* Estilo básico para el divider */
}

.blog-post h3 {
    font-size: 1.5em; /* Tamaño del título del blog */
    margin-bottom: 10px; /* Espacio debajo del título del blog */
    color: #555; /* Un color un poco más suave para el título */
}

.blog-post p {
    line-height: 1.6; /* Mejora la legibilidad del texto del blog */
    margin-bottom: 15px; /* Espacio debajo del párrafo del blog */
}

.post-date {
    font-size: 0.85em; /* Tamaño de la fecha */
    color: #777; /* Color grisáceo para la fecha */
    text-align: right; /* Alinea la fecha a la derecha */
}