:root {
    --ipia-blue: #002c53;
    --paper: #fdfbf9;
    --gold: #c5a059;
    --text: #1a1a1a;
    --text-dim: #555555;
    --border: #e8e4df;
    --font-serif: 'Playfair Display', serif;
    --font-body: 'Lora', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.7; /* Reducido de 1.8 para evitar exceso de espacio */
}

/* Header General */
.top-nav {
    background: #fff;
    padding: 0.8rem 2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.top-nav a { text-decoration: none; color: var(--ipia-blue); }

.logo-img {
    height: 60px;
    width: auto;
    object-fit: contain; /* Evita deformaciones */
    display: block;
    margin: 4rem auto 2rem;
}

header {
    padding: 0 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Sistema de Filtros */
.filter-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

.filter-group { display: flex; gap: 1.5rem; align-items: center; }
.filter-label { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
.filter-btn { background: none; border: none; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); cursor: pointer; padding: 0.5rem 0; border-bottom: 2px solid transparent; transition: 0.3s; }
.filter-btn:hover, .filter-btn.active { color: var(--ipia-blue); border-bottom: 2px solid var(--ipia-blue); }

/* GRID PRINCIPAL (PORTAL) */
.container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 10rem; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5rem 4rem; }
.article-item { text-decoration: none; color: inherit; transition: 0.3s; }
.item-img-container { width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 1.5rem; background: #f0ede9; }
.item-img-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.article-item:hover img { transform: scale(1.05); }
.item-category { font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 0.8rem; }
.item-title { font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.1; margin-bottom: 1rem; color: var(--ipia-blue); }
.item-excerpt { font-size: 1rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.item-footer { padding-top: 1rem; border-top: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; display: flex; justify-content: space-between; }

/* VISTA DE ARTÍCULO (DETALLE) */
.article-view { max-width: 1100px; margin: 0 auto; padding: 0 2rem 10rem; }
.article-header { margin-bottom: 6rem; width: 100%; border-bottom: 2px solid var(--ipia-blue); padding-bottom: 3rem; }
.article-header h1 { font-family: var(--font-serif); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1.0; color: var(--ipia-blue); margin: 1.5rem 0; letter-spacing: -3px; width: 100%; }
.article-subtitle { font-size: 1.8rem; font-style: italic; color: var(--text-dim); line-height: 1.4; margin-bottom: 2rem; display: block; width: 100%; }
.hero-banner { width: 100%; height: 60vh; background-size: cover; background-position: center; margin-bottom: 4rem; }

/* Bloques Editoriales */
.content-body { font-size: 1.3rem; line-height: 1.8; color: #1a1a1a; margin-top: 4rem; }
.content-body p { margin-left: auto; margin-right: auto; margin-bottom: 1.8rem; max-width: 800px; text-align: justify; }
.content-body p:last-child { margin-bottom: 0; }
.content-body p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 6rem; float: left; line-height: 1; margin-right: 15px; color: var(--ipia-blue); font-weight: 900; }

.side-block { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin: 6rem 0; }
.side-text { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.8; color: #333; }

.pull-quote { font-family: var(--font-serif); font-size: 3rem; font-weight: 700; font-style: italic; text-align: center; color: var(--ipia-blue); margin: 6rem 0; padding: 4rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; }
.pull-quote::before { content: '“'; position: absolute; top: -2rem; left: 50%; transform: translateX(-50%); font-size: 8rem; opacity: 0.1; }

.image-container { margin: 6rem 0; width: 100%; }
.img-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
img { width: 100%; height: auto; border-radius: 2px; }

/* Newsletter Section */
.newsletter-section { background: var(--ipia-blue); color: white; padding: 8rem 2rem; text-align: center; }
.subscribe-btn { background: var(--gold); color: white; padding: 1rem 2.5rem; border-radius: 2px; font-family: 'Inter'; font-weight: 800; text-decoration: none; font-size: 0.8rem; letter-spacing: 2px; display: inline-block; transition: 0.3s; }

@media (max-width: 1024px) {
    .article-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .article-grid { grid-template-columns: 1fr; }
    .side-block { grid-template-columns: 1fr; gap: 2rem; }
    .article-header h1 { font-size: 3rem; }
}