@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("fonts/Lato-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.login-page {
    --login-display-font: "Lato", Arial, Helvetica, sans-serif;
}

img.brand-mark {
    display: block;
    width: 4.15rem;
    height: 4.15rem;
    object-fit: cover;
    background: #00465b;
    border-color: rgba(247, 250, 250, .48);
    border-radius: 1.15rem 1.15rem 1.15rem .4rem;
    box-shadow: 0 .7rem 1.8rem rgba(0, 25, 32, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
    animation: emblem-breathe 6s ease-in-out infinite;
}
.brand-panel {
    background-color: #00465b;
    background-image:
        linear-gradient(135deg, rgba(0, 25, 32, .2), transparent 55%),
        repeating-linear-gradient(90deg, transparent 0, transparent 3.45rem, rgba(247, 250, 250, .025) 3.5rem, transparent 3.58rem),
        repeating-linear-gradient(0deg, transparent 0, transparent 6.7rem, rgba(184, 154, 90, .07) 6.78rem, transparent 6.9rem);
    background-position: 0 0;
    animation: library-drift 24s ease-in-out infinite alternate;
}
.brand-panel::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(247, 250, 250, .08);
    border-radius: 1.2rem;
    pointer-events: none;
}
.brand-panel::after {
    content: "ARCHIVO  •  PENSAMIENTO  •  LEGADO";
    position: absolute;
    top: 1.55rem;
    right: 2rem;
    color: rgba(247, 250, 250, .34);
    font-size: .59rem;
    font-weight: 650;
    letter-spacing: .18em;
    pointer-events: none;
}
.brand-panel > * { position: relative; z-index: 1; }
.brand-name {
    font-family: var(--login-display-font);
    font-weight: 100;
    letter-spacing: -.035em;
}
.brand-name span {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: .04em;
}
.brand-copy {
    padding-left: 1rem;
    border-left: 2px solid rgba(184, 154, 90, .72);
    font-family: var(--login-display-font);
    font-weight: 300;
    font-size: 1.02rem;
    letter-spacing: .005em;
    animation: quote-arrive .9s ease-out both;
}
.form-panel h1 {
    font-family: var(--login-display-font);
    font-weight: 300;
    letter-spacing: -.025em;
}
.brand-credit {
    padding-left: 1.15rem;
    letter-spacing: .04em;
}
.phrase-progress-bar {
    background: linear-gradient(90deg, rgba(247, 250, 250, .72), #d2ba81, rgba(247, 250, 250, .9));
    background-size: 200% 100%;
    animation: progress-glow 7s ease-in-out infinite;
}
.form-panel {
    background-image: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .98)), repeating-linear-gradient(0deg, transparent 0, transparent 2rem, rgba(0, 70, 91, .025) 2.05rem);
}
.form-panel > * { animation: form-settle .65s ease-out both; }
.form-panel > *:nth-child(2) { animation-delay: .05s; }
.form-panel > *:nth-child(3) { animation-delay: .1s; }
.form-panel > *:nth-child(4) { animation-delay: .15s; }
.navbar-brand-logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    box-shadow: 0 .2rem .65rem rgba(0, 25, 32, .2);
}
.navbar-brand-title { letter-spacing: -.015em; }

@keyframes emblem-breathe {
    0%, 100% { transform: translateY(0); box-shadow: 0 .7rem 1.8rem rgba(0, 25, 32, .28), inset 0 0 0 1px rgba(255, 255, 255, .08); }
    50% { transform: translateY(-.18rem); box-shadow: 0 1rem 2.2rem rgba(0, 25, 32, .34), 0 0 0 .3rem rgba(255, 255, 255, .025); }
}
@keyframes library-drift { from { background-position: 0 0; } to { background-position: .8rem .35rem; } }
@keyframes quote-arrive { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes form-settle { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes progress-glow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

@media (max-width: 767.98px) {
    .brand-panel {
        min-height: 0;
        justify-content: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.5rem 1.65rem;
    }
    .brand-panel::before { inset: .65rem; border-radius: 1.2rem 1.2rem 1.65rem 1.65rem; }
    .brand-panel::after { top: 1.75rem; right: 1.5rem; font-size: .5rem; letter-spacing: .12em; }
    .brand-panel > div:nth-child(2) { margin-top: 0; }
    img.brand-mark { width: 4.65rem; height: 4.65rem; border-radius: 50%; }
    .brand-name { font-size: 2.25rem; line-height: .9; }
    .brand-name span { margin-top: .65rem; font-size: .48em; }
    .brand-copy { margin-top: 1.15rem; margin-bottom: .55rem; font-size: .94rem; line-height: 1.52; }
    .phrase-progress { margin-top: .25rem; }
}

@media (max-width: 390px) {
    .brand-panel::after { content: "PENSAMIENTO  •  LEGADO"; }
    img.brand-mark { width: 4.25rem; height: 4.25rem; }
    .brand-name { font-size: 2.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-panel,
    img.brand-mark,
    .brand-copy,
    .phrase-progress-bar,
    .form-panel > * { animation: none !important; }
}

.whatsapp-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .whatsapp-mobile {
        position: absolute;
        top: 4rem;
        right: 1.75rem;
        z-index: 3;
        display: grid;
        width: 5rem;
        height: 5rem;
        place-items: center;
        color: #fff;
        background: #25d366;
        border: 4px solid rgba(255, 255, 255, .96);
        border-radius: 50%;
        box-shadow: 0 .9rem 2rem rgba(0, 25, 32, .38), inset 0 0 0 1px rgba(0, 0, 0, .06);
        text-decoration: none;
        animation: whatsapp-pulse 2s ease-in-out infinite;
        transition: transform .2s ease, background-color .2s ease;
    }

    .whatsapp-mobile:hover,
    .whatsapp-mobile:focus {
        color: #fff;
        background: #20bd5a;
    }

    .whatsapp-mobile:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 5px;
    }

    .whatsapp-mobile:active {
        transform: scale(.94);
    }

    .whatsapp-mobile > i {
        font-size: 2.8rem;
        line-height: 1;
    }

    .whatsapp-hand {
        position: absolute;
        top: 50%;
        left: -2.75rem;
        margin-top: -1.2rem;
        font-size: 0;
        line-height: 1;
        pointer-events: none;
        filter: drop-shadow(0 .2rem .2rem rgba(0, 0, 0, .28));
        transform-origin: 100% 50%;
        animation: whatsapp-tap 1.4s ease-in-out infinite;
    }

    .whatsapp-hand::before {
        content: "👉";
        font-size: 2.4rem;
    }
}

@keyframes whatsapp-tap {
    0%, 100% {
        transform: translateX(-.25rem) rotate(-4deg);
    }
    45% {
        transform: translateX(.45rem) rotate(4deg);
    }
    65% {
        transform: translateX(.35rem) rotate(0);
    }
}

@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 .9rem 2rem rgba(0, 25, 32, .38), 0 0 0 0 rgba(255, 255, 255, .34); }
    50% { box-shadow: 0 1rem 2.2rem rgba(0, 25, 32, .44), 0 0 0 .75rem rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-mobile,
    .whatsapp-hand {
        animation: none;
    }
}