@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Reset básico y fuentes */
html {
    height: 100%;
    overflow-y: hidden; /* Evitar scroll en html, lo manejará main */
}

body, h1, h2, h3, p, ul, li, a, button {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Fuente base actualizada */
    font-weight: 400;
    line-height: 1.7;
    box-sizing: border-box; /* Mejor manejo de padding y border */
}

body {
    background-color: #fafcf1; /* Un gris más claro y moderno */
    color: #343a40; /* Un gris oscuro más suave para el texto */
    display: flex; /* Para Sticky Footer */
    flex-direction: column; /* Para Sticky Footer */
    height: 100vh; /* Body ocupa toda la altura de la ventana */
    overflow: hidden; /* Evitar scroll en body, lo manejará main */
    -webkit-font-smoothing: antialiased; /* Antialiasing para WebKit/Blink */
    -moz-osx-font-smoothing: grayscale; /* Antialiasing para Firefox en macOS */
}

h1, h2, h3 {
    font-family: 'Cinzel', Georgia, serif; /* Fuente para encabezados */
    font-weight: 400; /* Peso normal/ligero para títulos */
    color: #9e6c00; /* Un azul oscuro para encabezados */
    margin-bottom: 0.75em;
}

.container {
    width: 90%;
    max-width: 1200px; /* Un poco más de ancho máximo */
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.menu {
    margin: 0;
}

/* Header y Navegación */
header {
    background: #19191ae0;
    /* color: #343a40; */
    color: #fff; /* Texto oscuro en header blanco */
    padding-top: 15px;
    padding-bottom: 1rem;
    min-height: 3.5rem; /* ~56px */
    /* Altura total aprox: 15px + 56px + 16px = 87px */
    border-bottom: 1px solid #a8ca1228;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    position: fixed; /* Fijo en la parte superior */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Encima de otros contenidos */
    height: 87px; /* Altura fija para el header */
    box-sizing: border-box;
}

header a {
    /* color: #343a40; */
    color: #fff; /* Texto oscuro en header blanco */
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px; /* Ligeramente más pequeño */
    font-weight: 300; /* Semi-bold para enlaces de nav */
    transition: color 0.3s ease;
}

header .logo {
    float: left;
    margin-top: 5px; /* Ajustar para alinear con nav */
}
header .logo img {
    max-height: 60px; 
    vertical-align: middle;
}

header nav {
    float: right;
    margin-top: 15px; /* Ajustar para alinear verticalmente */
}

header nav ul {
    list-style: none;
}

header nav ul li {
    display: inline;
    padding: 0 12px; /* Un poco menos de padding */
}

header nav a:hover {
    color: #aaa8a0; /* Un azul más oscuro y estándar para hover */
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff; /* Fondo blanco */
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
    border: 1px solid #e0e0e0;
    border-top: 2px solid #9e6c00; /* Acento azul en el top */
    border-radius: 0 0 4px 4px;
}

.dropdown-content a {
    color: #343a40;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-transform: none; 
    font-size: 14px;
    font-weight: normal;
}

.dropdown-content a:hover {
    background-color: #f8f9fa;
    color: #9e6c00;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Menú Toggle para móvil */
.menu-toggle {
    display: none; 
    background: none;
    /* border: 1px solid #343a40; */
    /* color: #343a40; */
    border: 1px solid #9e6c00;
    color: #9e6c00;
    font-size: 24px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

/* Estilo para la sección Hero */
#hero {
    /* Background en un degradado entre azul claro, blanco y azul claro, para que asemeje a un acabajo plata, va de arriba izquierda a abajo derecha*/

    background: url('/img/marmol.jpg') no-repeat center center/cover;
    /* color: #ffffff; */
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 1rem;
    /* margin-top: 3rem; */
}   
#hero h1 {
    font-size: 2.8em;
    /* color: #ffffff; */
    margin-bottom: 0.5em;
}
#hero p {
    font-size: 1.2em;
    margin-bottom: 1.5em;
}

/* Estilo general para botones */
.button {
    display: inline-block;
    background-color: #9e6c00; /* Azul primario */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em; /* Ajustar según sea necesario */
    font-weight: 500; /* Un poco más de peso para botones */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.button:hover, .button:focus {
    background-color: #004494; /* Un azul más oscuro al pasar el ratón */
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px); /* Ligero efecto de elevación */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Botón en la sección Hero */
#hero .button {
    margin-top: 20px; /* Espacio sobre el botón en hero */
    /* Estilos base vienen de .button */
}

/* Main Content Area */
main {
    /* padding: 20px 0; Quitamos el padding vertical original */
    /* flex-grow: 1; Ya no es necesario para sticky footer */
    padding-top: 87px; /* Espacio para el header fijo */
    padding-bottom: 60px; /* Espacio para el footer fijo */
    overflow-y: auto; /* Scroll solo para el contenido principal */
    height: 100vh; /* Ocupa toda la altura de la ventana para que el padding funcione bien */
    box-sizing: border-box; /* El padding se incluye en la altura total */
}

.page-title {
    color: #9e6c00; /* Título de página en azul */
    margin-bottom: 25px;
    border-bottom: 2px solid #9e6c00;
    padding-bottom: 10px;
    font-size: 2em; /* Más grande */
}

/* Artículos/Reflexiones */
.article-post {
    background: #fff;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid #9e6c00;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}
.article-post:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.article-post h2 a {
    text-decoration: none;
    color: #2c3e50;
}
.article-post h2 a:hover {
    color: #9e6c00;
}

.article-meta {
    font-size: 0.9em;
    color: #6c757d; /* Un gris más suave */
    margin-bottom: 15px;
}

/* Estilos para la sección de eventos en index.php */
#proximos-eventos {
    padding-bottom: 3rem;
}
#proximos-eventos ul {
    list-style: none;
    padding-left: 0;
}
#proximos-eventos li {
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #9e6c00; /* Acento azul */
    border-radius: 0 4px 4px 0;
}
#proximos-eventos li strong {
    font-family: 'Cinzel', Georgia, serif; /* Mantener consistencia en títulos de eventos */
    font-weight: 400; /* Peso normal para títulos de eventos */
    color: #2c3e50;
    font-size: 1.1em;
}

/* Formularios */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #495057;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="datetime-local"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="datetime-local"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #9e6c00;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
    outline: none;
}
.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Estilo para botones de formulario, alineado con .button */
button[type="submit"] {
    display: inline-block; /* Asegurar consistencia con .button */
    background: #9e6c00; /* Azul primario (igual que .button) */
    color: #fff; /* (igual que .button) */
    border: none;  /* (igual que .button) */
    padding: 10px 20px; /* (igual que .button) */
    border-radius: 5px; /* (igual que .button) */
    cursor: pointer;
    font-size: 1em; /* (igual que .button) */
    font-weight: 500; /* (igual que .button) */
    text-align: center; /* (igual que .button) */
    transition: background-color 0.3s ease, transform 0.2s ease; /* (igual que .button) */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* (igual que .button) */
}

button[type="submit"]:hover {
    background: #9e6c00; /* (igual que .button:hover) */
    transform: translateY(-2px); /* (igual que .button:hover) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* (igual que .button:hover) */
}

/* Footer */
footer {
    background: #19191ae0; /* Footer oscuro */
    color: #f8f9fa; /* Texto claro en footer */
    text-align: center;
    padding: 2rem 0; /* Ajustado para una altura total de 60px si es necesario */
    /* Altura total aprox: 20px + X (contenido) + 20px. Si X es pequeño, ~40px. Necesitamos que sea fijo 60px. */
    position: fixed; /* Fijo en la parte inferior */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; /* Encima de otros contenidos */
    height: 5rem; /* Altura fija para el footer */
    display: flex; /* Para centrar contenido verticalmente si es necesario */
    align-items: center; /* Centra el contenido del footer verticalmente */
    justify-content: center; /* Centra el contenido del footer horizontalmente */
    box-sizing: border-box;
}

footer p {
    margin: 0; /* Eliminar margen si es solo un párrafo para mejor centrado */
}

footer a {
    color: #adb5bd; /* Un gris claro para enlaces en footer */
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Estilos para Páginas Internas (generales) */
.page-content {
    padding: 0;
    margin: 0;
}

/* Layout para la página de Reflexiones */
.reflexiones-layout {
    display: flex;
    flex-wrap: wrap; /* Para que en pantallas pequeñas se puedan apilar */
    gap: 30px; /* Espacio entre la lista de reflexiones y la barra lateral */
}

#lista-reflexiones {
    flex: 1; /* Ocupa el espacio principal */
    min-width: 65%; /* Asegura un ancho mínimo antes de que la barra lateral se mueva */
}

#categorias-reflexiones {
    flex-basis: 300px; /* Ancho fijo para la barra lateral */
    flex-grow: 0; /* No crece */
    flex-shrink: 0; /* No se encoge más allá de su base */
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: fit-content; /* Para que no sea más alta que su contenido */
}

#categorias-reflexiones h3 {
    font-size: 1.4em;
    font-family: 'Cinzel', Georgia, serif; /* Asegurar que también use la fuente de títulos */
    font-weight: 400; /* Peso normal/ligero para este título de sección */
    color: #0056b3; /* Azul primario, como page-title */
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

#categorias-reflexiones ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#categorias-reflexiones ul li a {
    display: block;
    padding: 8px 0;
    color: #343a40;
    text-decoration: none;
    border-bottom: 1px dashed #eee;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

#categorias-reflexiones ul li:last-child a {
    border-bottom: none;
}

#categorias-reflexiones ul li a:hover {
    color: #0056b3;
    padding-left: 5px;
}

/* Ajustes para .article-post dentro de #lista-reflexiones */
#lista-reflexiones .article-post {
    display: flex; /* Activa Flexbox para el layout interno del artículo */
    flex-direction: row; /* Elementos en fila: imagen | contenido de texto */
    gap: 20px; /* Espacio entre la imagen y el contenido de texto */
    align-items: flex-start; /* Alinea los items al inicio del eje transversal */
}

.article-extract-image {
    flex-basis: 200px; /* Ancho fijo para la imagen */
    flex-shrink: 0; /* Evita que la imagen se encoja */
    width: 200px; /* Para navegadores que no soportan flex-basis completamente */
    height: auto; /* Mantiene la proporción */
    max-height: 180px; /* Altura máxima opcional */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 4px;
}

.article-extract-content {
    flex: 1; /* El contenido de texto ocupa el espacio restante */
    display: flex;
    flex-direction: column; /* Apila los elementos de texto verticalmente */
}

.article-extract-content h2 {
    margin-top: 0; /* Elimina margen superior del h2 si la imagen está al lado */
}

.article-extract-content .button {
    margin-top: auto; /* Empuja el botón hacia abajo si hay espacio */
    align-self: flex-start; /* Alinea el botón a la izquierda */
    display: inline-block; /* Asegura que el padding y margin se apliquen bien */
}

/* Si no hay imagen, el contenido debe ocupar todo el ancho */
#lista-reflexiones .article-post:not(:has(.article-extract-image)) .article-extract-content {
    flex-basis: 100%;
}

/* Estilos para artículos individuales (usado en index.php y reflexiones.php) */
/* Asegura que el contenedor del artículo sea flex y en columna */
#ultimas-reflexiones .article-post,
.reflexiones-layout #lista-reflexiones .article-post {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column; /* El contenido y el botón se apilan verticalmente */
    height: 100%; /* Para asegurar que todos los artículos en una fila tengan la misma altura si están en un grid */
}

/* El wrapper del contenido (texto) debe crecer para empujar el botón hacia abajo */
#ultimas-reflexiones .article-post .article-content-wrapper,
.reflexiones-layout #lista-reflexiones .article-post .article-extract-content {
    flex-grow: 1;
}

/* Estilos para el botón 'Leer más' dentro de los artículos */
#ultimas-reflexiones .article-post .button,
.reflexiones-layout #lista-reflexiones .article-post .button {
    display: inline-block; /* Asegura que el botón no ocupe todo el ancho */
    margin-top: 15px; /* Espacio entre el texto y el botón */
    align-self: flex-start; /* Alinea el botón al inicio si el contenedor es flex */
}

/* Ajustes para la imagen del extracto en reflexiones.php si existe */
.reflexiones-layout #lista-reflexiones .article-post .article-extract-image {
    flex-basis: 200px; /* Ancho fijo para la imagen */
    flex-shrink: 0; /* Evita que la imagen se encoja */
    width: 200px; /* Para navegadores que no soportan flex-basis completamente */
    height: auto; /* Mantiene la proporción */
    max-height: 180px; /* Altura máxima opcional */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 4px;
}

/* ---- Media Queries para Responsive ---- */
@media (max-width: 768px) {
    header .logo,
    header nav {
        float: none;
        text-align: center;
        width: 100%;
    }

    header nav ul {
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        width: 100%;
        padding-top: 10px;
    }
    header nav ul.active { /* Clase que se añade con JS */
        display: flex;
        background-color: #9e6c00;
    }

    header nav ul li {
        display: block; /* Apilados verticalmente */
        padding: 10px 0;
        text-align: center;
        width: 100%;
        border-top: 1px solid #444;
    }
    header nav ul li:first-child {
        border-top: none;
    }
    .dropdown .dropdown-content {
        position: static; /* Para que no se superponga mal en móvil */
        display: none; /* Gestionar con JS o :hover si es simple */
        background-color: #b6b6b6; /* Ligeramente diferente para distinguirlo */
    }
    .dropdown:hover .dropdown-content, /* Mantener hover para desktop dentro de media query si se quiere */
    .dropdown.active .dropdown-content { /* Si se usa JS para el dropdown en móvil */
        display: block;
    }
    .dropdown-content a {
        padding-left: 30px; /* Indentación */
    }


    .menu-toggle {
        display: block; /* Mostrar el botón hamburguesa */
        position: absolute;
        top: 25px;
        right: 20px;
    }
}