/* =========================================================
   Footer — Antonio Richaud
   Minimalismo científico con alma de observatorio mexicano
   ========================================================= */

.site-footer {
    --footer-bg: var(--footer-dark-bg, #02030a);
    --footer-text: var(--color-text-soft, rgba(245, 247, 250, 0.72));
    --footer-text-strong: var(--color-text, #f5f7fa);
    --footer-border: var(--color-border-soft, rgba(255, 255, 255, 0.1));
    --footer-button-bg: rgba(255, 255, 255, 0.035);
    --footer-button-bg-hover: rgba(255, 255, 255, 0.075);
    --footer-button-border: rgba(255, 255, 255, 0.14);
    --footer-button-border-hover: rgba(255, 255, 255, 0.28);
    --footer-heart: #ff4d4d;
    --footer-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);

    width: 100%;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(105, 80, 180, 0.055),
            transparent 42%),
        var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    color: var(--footer-text);
}

.site-footer__inner {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(22px, 4vw, 34px) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.site-footer__signature {
    margin: 0;
    font-size: clamp(0.86rem, 1.6vw, 0.96rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: var(--footer-text);
}

.site-footer__heart {
    display: inline-block;
    margin: 0 0.24em;
    color: var(--footer-heart);
    transform-origin: center;
    animation: footer-heart-pulse 4.8s ease-in-out infinite;
}

.site-footer__back-top {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--footer-text-strong);
    background: var(--footer-button-bg);
    border: 1px solid var(--footer-button-border);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--footer-shadow);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease;
}

.site-footer__back-top:hover {
    transform: translateY(-3px);
    background: var(--footer-button-bg-hover);
    border-color: var(--footer-button-border-hover);
}

.site-footer__back-top:focus-visible {
    outline: 2px solid var(--footer-heart);
    outline-offset: 4px;
}

.site-footer__arrow {
    display: block;
    transition: transform 220ms ease;
}

.site-footer__back-top:hover .site-footer__arrow {
    transform: translateY(-1px);
}

/* Modo claro */
html[data-theme="light"] .site-footer,
body[data-theme="light"] .site-footer,
body.light-mode .site-footer,
body.theme-light .site-footer {
    --footer-bg: var(--color-bg, #fbf7ef);
    --footer-text: var(--color-text-soft, rgba(35, 32, 28, 0.68));
    --footer-text-strong: var(--color-text, #1f1f1f);
    --footer-border: var(--color-border-soft, rgba(45, 38, 30, 0.12));
    --footer-button-bg: rgba(45, 38, 30, 0.035);
    --footer-button-bg-hover: rgba(45, 38, 30, 0.07);
    --footer-button-border: rgba(45, 38, 30, 0.14);
    --footer-button-border-hover: rgba(45, 38, 30, 0.28);
    --footer-heart: #d62828;
    --footer-shadow: 0 16px 36px rgba(45, 38, 30, 0.1);

    background:
        radial-gradient(circle at 50% 0%,
            rgba(207, 154, 80, 0.1),
            transparent 42%),
        var(--footer-bg);
}

/* Responsive */
@media (max-width: 640px) {
    .site-footer__inner {
        width: min(100% - 28px, 1120px);
        padding: 24px 0 28px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 16px;
    }

    .site-footer__back-top {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .site-footer__heart {
        animation: none;
    }

    .site-footer__back-top,
    .site-footer__arrow {
        transition: none;
    }

    .site-footer__back-top:hover,
    .site-footer__back-top:hover .site-footer__arrow {
        transform: none;
    }
}

@keyframes footer-heart-pulse {

    0%,
    72%,
    100% {
        transform: scale(1);
        opacity: 0.86;
    }

    78% {
        transform: scale(1.12);
        opacity: 1;
    }

    84% {
        transform: scale(1);
        opacity: 0.9;
    }
}