.page-conoce-mas #banner {
    margin-bottom: 0;
    height: auto;
}
@media screen and (max-width: 1100px) {
    .page-conoce-mas #banner {
        min-height: 13em;
        height: auto;
    }
}

@media screen and (max-width: 736px) {
    .page-conoce-mas #banner {
        min-height: 13em;
        height: auto;
    }
}

@media screen and (max-width: 400px) {
    .page-conoce-mas #banner {
        min-height: 10em;
        height: auto;
    }
}
#footer-nav {
                margin-top: auto;
            }

/* ─── Loading / error / empty states ────────────────────────── */
.conoce-loading,
.conoce-error,
.conoce-empty {
    text-align: center;
    padding: 3em 1em;
    color: #555;
}
.conoce-spinner {
    width: 2.5em;
    height: 2.5em;
    margin: 0 auto 1em;
    border: 3px solid #ddd;
    border-top-color: var(--color-primary, #2e7d32);
    border-radius: 50%;
    animation: conoce-spin 0.8s linear infinite;
}
@keyframes conoce-spin {
    to { transform: rotate(360deg); }
}

/* ─── Article grid (conoce-más.html) ────────────────────────── */
.conoce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.75em;
    margin-top: 2em;
    margin-bottom: 4em;
}
.conoce-card {
    display: block;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.conoce-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.conoce-card-body {
    padding: 1.2em 1.4em 1.5em;
}
.conoce-card-body h3 {
    margin: 0 0 0.4em;
    font-size: 1.15em;
    color: #1a1a1a;
}
.conoce-card-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.95em;
}

/* ─── Article page (articulo.html) ──────────────────────────── */
.article-banner-subtitle {
    color: #f0f0f0;
    margin-top: 0.4em;
}
.content-block {
    margin-bottom: 2em;
}
.content-block h2 {
    color: #1a1a1a;
    margin-bottom: 0.5em;
}

.content-block h3 {
    color: #1a1a1a;
    margin: 0 0 0.5em;
    font-size: 0.9em;
    font-weight: 600;
}

.content-block p {
    color: #333;
    line-height: 1.7;
}
.articulo-back-link {
    margin-top: 2.5em;
}
.articulo-back-link a {
    color: var(--color-primary, #2e7d32);
    text-decoration: none;
    font-weight: 600;
}
.articulo-back-link a:hover {
    text-decoration: underline;
}