/* =========================================================
   SITE CREDIT
   Firma del desarrollador
========================================================= */

.site-credit {
    position: relative;

    border-top:
        var(--border-width-thin)
        solid
        var(--color-border);

    background: var(--color-surface);
}


/* =========================================================
   CONTAINER
========================================================= */

.site-credit__container {
    width: min(
        calc(100% - (2 * var(--container-padding-mobile))),
        var(--container-wide-width)
    );

    min-height: 56px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.site-credit__content {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-2);

    min-width: 0;
}

.site-credit__label {
    color: var(--color-text-muted);

    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);

    letter-spacing: 0.04em;
}

.site-credit__separator {
    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.site-credit__author {
    position: relative;

    color: var(--color-text-secondary);

    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);

    transition:
        color var(--transition-normal);
}


/* Línea tecnológica inferior */

.site-credit__author::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-cyan)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform var(--transition-normal);
}

.site-credit__author:hover {
    color: var(--color-primary);
}

.site-credit__author:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   RIGHT LINKS
========================================================= */

.site-credit__links {
    display: flex;
    align-items: center;

    gap: var(--space-2);

    flex-shrink: 0;

    color: var(--color-text-muted);

    font-size: 0.72rem;
}

.site-credit__links a {
    position: relative;

    color: var(--color-text-muted);

    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);

    transition:
        color var(--transition-normal);
}

.site-credit__links a:hover {
    color: var(--color-primary);
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) {

    .site-credit__container {
        width: min(
            calc(100% - (2 * var(--container-padding-tablet))),
            var(--container-wide-width)
        );
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1280px) {

    .site-credit__container {
        width: min(
            calc(100% - (2 * var(--container-padding-desktop))),
            var(--container-wide-width)
        );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .site-credit__container {
        min-height: auto;

        padding-block: var(--space-4);

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: var(--space-2);
    }

    .site-credit__content {
        gap: var(--space-2);
    }

    .site-credit__links {
        font-size: 0.7rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-credit__author,
    .site-credit__author::after,
    .site-credit__links a {
        transition: none;
    }

}