/* Footer — vive en engine.php (motor central), no en router.js ni en cada
   página, porque debe aparecer en TODAS las rutas sin duplicar marcado. */
.footer-otomi {
    height: 60px;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;
}

#site-footer {
    background: var(--bg-end);
    border-top: 1px solid var(--accent-gold);
    padding: 18px 0;
}

#site-footer .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

#site-footer .footer-center-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

#site-footer a,
#site-footer span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    text-decoration: none;
}

#site-footer a:hover {
    color: var(--accent-gold);
}

@media (max-width: 768px) {
    #site-footer .footer-row {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* Breadcrumbs (jerarquía visible + señal para buscadores) */
.breadcrumbs {
    padding: 90px 20px 10px;
    font-size: 0.8rem;
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--accent-gold);
}

.breadcrumbs span[aria-current="page"] {
    color: var(--accent-yellow);
}

.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 4px;
}