:root {
    --fondo: #FAFAF7;
    --texto: #1a1a1a;
    --texto-suave: #4a4a4a;
    --acento: #1E3A5F;
    --detalle: #C13A3A;
    --borde-suave: #e8e8e0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--texto);
    background-color: var(--fondo);
}
nav { padding: 1.5em 0; border-bottom: 1px solid var(--borde-suave); margin-bottom: 3em; }
.nav-inner { max-width: 700px; margin: 0 auto; padding: 0 1.5em; display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; font-size: 0.95em; }
.logo { font-weight: 700; color: var(--texto); text-decoration: none; }
.nav-links a { color: var(--texto-suave); text-decoration: none; margin-left: 1.5em; }
.nav-links a:hover { color: var(--texto); }
main { max-width: 700px; margin: 0 auto; padding: 0 1.5em 4em; }
h1 { font-size: 2.2em; margin-bottom: 0.3em; }
h2 { font-size: 1.5em; margin: 2em 0 0.8em; }
p { margin-bottom: 1.5em; }
.article-date { font-family: 'Inter', sans-serif; color: var(--texto-suave); font-size: 0.85em; }
.article-hero { margin-bottom: 2.5em; }
.article-hero img { width: 100%; height: auto; border-radius: 4px; }
.article-hero figcaption { font-family: 'Inter', sans-serif; font-size: 0.85em; color: var(--texto-suave); margin-top: 0.5em; }
.article-notes { margin-top: 4em; padding: 1.5em 0; border-top: 1px solid var(--borde-suave); font-family: 'Inter', sans-serif; font-size: 0.9em; color: var(--texto-suave); }
.article-notes h2 { font-size: 1em; margin-top: 0; }
footer { margin-top: 4em; padding: 2em 0; border-top: 1px solid var(--borde-suave); font-family: 'Inter', sans-serif; font-size: 0.85em; color: var(--texto-suave); }
.footer-inner { max-width: 700px; margin: 0 auto; padding: 0 1.5em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col a { color: var(--acento); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.hero { margin-bottom: 4em; }
.hero h1 { font-size: 2.4em; line-height: 1.3; margin-bottom: 0.5em; }
.hero-subtitle { font-family: 'Inter', sans-serif; font-size: 1.1em; color: var(--texto-suave); max-width: 600px; }
.bloques { display: flex; gap: 2em; margin-bottom: 4em; flex-wrap: wrap; }
.bloque { flex: 1 1 250px; }
.bloque img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; margin-bottom: 1em; }
.bloque h2 { margin-top: 0; font-size: 1.3em; }
.bloque h2 a { color: var(--texto); text-decoration: none; }
.bloque h2 a:hover { color: var(--acento); }
.bloque p { font-size: 0.95em; color: var(--texto-suave); }
.ultimos { margin-top: 4em; }
.ultimos h2 { font-size: 1.4em; margin-bottom: 1em; }
.ultimos ul { list-style: none; padding: 0; }
.ultimos li { margin-bottom: 0.8em; font-size: 1.05em; }
.ultimos .fecha { font-family: 'Inter', sans-serif; color: var(--detalle); font-size: 0.85em; }
.ultimos a { color: var(--texto); text-decoration: none; }
.ultimos a:hover { color: var(--acento); }
@media (max-width: 600px) {
    body { font-size: 16px; }
    h1 { font-size: 1.6em; }
    .nav-inner { flex-direction: column; gap: 0.5em; }
    .nav-links a { margin-left: 1em; }
}