/* ======================================================
   1. CORRECCIONES GLOBALES Y RESET
   ====================================================== */
body, html, .container, main, section, article, aside, .layout {
    text-align: left !important;
}

/* ======================================================
   2. PALETA Y VARIABLES (Coinciden con tu tema principal)
   ====================================================== */
:root {
    --color-vino: #9C1836;
    --color-rojo: #9C1836;
    --color-blanco: #FAF9FA;
    --color-negro: #000000;
    --color-gris-claro: #FAF9FA;
    --color-gris-medio: #B2AEAF;
    --color-gris-oscuro: #4A4A4A;
    --color-gris-tecla: #B2AEAF;
    --color-beige: #FAF9FA;
}

/* Estilos Base */
body {
    background-color: var(--color-blanco);
    color: var(--color-negro);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

/* ======================================================
   3. ESTRUCTURA Y LAYOUT
   ====================================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.main-content {
    background: linear-gradient(180deg, var(--color-beige) 0%, var(--color-blanco) 100%);
    padding-bottom: 4rem; 
}

main h2 {
    font-size: 2.5rem;
    color: var(--color-rojo);
    font-weight: 700;
    padding-top: 10rem; 
    margin-bottom: 2rem;
}

/* Layout Grid: Contenido (Izquierda) + Aside (Derecha) */
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem; /* Aumentado un poco el espacio para que respiren las tarjetas */
    align-items: start;
    padding-top: 2rem;
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .container {
        padding: 0 1rem;
    }
}

/* ======================================================
   4. CONTENIDO GENERAL Y GALERÍA SUPERIOR
   ====================================================== */
.contenido {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contenido h3 {
    font-size: 1.8rem;
    color: var(--color-rojo);
    border-bottom: 2px solid rgba(156, 24, 54, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.contenido h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-rojo);
    margin-top: 1rem;
}

/* Galería de imágenes pequeña */
.contenido .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.contenido .grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.3rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: zoom-in;
}

.contenido .grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ======================================================
   5. ASIDE (BARRA LATERAL)
   ====================================================== */
aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--color-gris-claro);
    border-radius: 15px; /* Igualado a las tarjetas nuevas */
    padding: 1.5rem; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.aside-card {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-gris-medio);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.aside-card h4 {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-rojo);
    border-bottom: 1px solid var(--color-gris-medio);
    padding-bottom: 0.5rem;
}

.aside-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aside-card li {
    margin: 0.4rem 0;
    padding-left: 0.5rem;
    border-left: 3px solid transparent;
    transition: border-left 0.2s ease;
}

.aside-card li:hover {
    border-left: 3px solid var(--color-rojo);
}

.aside-card a {
    color: var(--color-rojo);
    text-decoration: none;
    font-weight: 500;
}

.aside-card a:hover {
    color: var(--color-vino);
}

/* ======================================================
   6. NUEVA SECCIÓN: PROYECTOS (ESTILO TARJETAS/CARDS)
   ====================================================== */

/* --- A. Filtros (Botones) --- */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.filter-btn {
    padding: 8px 20px;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-gris-tecla);
    color: var(--color-gris-oscuro);
    border-radius: 50px; /* Redondeado tipo píldora */
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--color-rojo);
    color: var(--color-rojo);
    transform: translateY(-2px);
}

/* Estado Activo (Fondo Rojo) */
.filter-btn.active {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border-color: var(--color-rojo);
    box-shadow: 0 4px 10px rgba(156, 24, 54, 0.3);
}

/* Contenedor general de los filtros */
.filters-wrapper {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre la fila de Tipo y la fila de Año */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 20px;
}

/* Cada fila de filtro (Label + Botones) */
.filter-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* La etiqueta "Tipo:" o "Año:" */
.filter-label {
    font-weight: 700;
    color: var(--color-rojo);
    min-width: 50px;
}

/* Contenedor de los botones */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Ajuste responsive para celulares */
@media (max-width: 600px) {
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* --- B. Grid de Tarjetas --- */
.projects-list {
    display: grid;
    /* Columnas automáticas (se adaptan al ancho) similar a Noticias */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

/* --- C. Diseño de la Tarjeta (Card) --- */
.project-card {
    background: var(--color-blanco);
    border-radius: 15px; /* Radio de borde grande (coincide con tu diseño) */
    padding: 2rem;
    
    /* Sombra suave inicial */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    
    border: 2px solid transparent; /* Reserva espacio para el borde hover */
    transition: all 0.3s ease;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón al final */
    position: relative;
    overflow: hidden;
}

/* Efecto Hover (Sombra Roja y elevación) */
.project-card:hover {
    transform: translateY(-10px);
    border-color: rgba(156, 24, 54, 0.3); /* Borde rojo sutil */
    box-shadow: 0 15px 40px rgba(156, 24, 54, 0.15); /* Sombra roja difusa */
}

/* Cabecera (Título y Año) */
.card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.project-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    line-height: 1.3;
}

.project-card h4 a {
    text-decoration: none;
    color: var(--color-negro);
    transition: color 0.3s;
}

.project-card h4 a:hover {
    color: var(--color-rojo);
}

/* Badge del Año */
.project-year-badge {
    display: inline-block;
    background-color: #fcecef; /* Fondo rojo muy pálido */
    color: var(--color-rojo);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Cuerpo de texto */
.card-body p {
    color: var(--color-gris-oscuro);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* --- D. Botón "Ver detalles" (Estilo Botón Sólido) --- */
.read-more-link {
    display: inline-block;
    text-align: center;
    padding: 0.8rem 1.5rem;
    
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start; /* Alineado a la izquierda */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.read-more-link:hover {
    background-color: var(--color-vino);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(156, 24, 54, 0.3);
}

/* Utilidad para ocultar (JS) */
.hide {
    display: none;
}