@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/quicksand-400.woff2?v=212b50e3a2d7") format("woff2");
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/quicksand-500.woff2?v=fb6cde1eef7d") format("woff2");
}

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/quicksand-600.woff2?v=78f29ef5cc86") format("woff2");
}

:root {
    --font-ui: "Quicksand", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body, button, input, select, textarea {
    font-family: var(--font-ui);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -0.02em;
}


.site-logo .navbar-brand {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.btn,
.fw-bold,
strong,
b {
    font-weight: 600;
}

.form-error {
    display: block;
    margin: .75rem auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c93636;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

#unlock-error.form-error {
    margin-top: .5rem;
}

.toggle-pw {
    color: #526b84;
    overflow: hidden;
    transition: color 150ms ease, border-color 150ms ease;
}

.toggle-pw:hover,
.toggle-pw:focus-visible {
    color: #1c4659;
}

/* Evita que Bootstrap vuelva blanco el icono del ojo al pulsar. */
.toggle-pw,
.toggle-pw:hover,
.toggle-pw:focus,
.toggle-pw:focus-visible,
.toggle-pw:active,
.toggle-pw:active:focus,
.toggle-pw.is-visible {
    color: #526b84 !important;
    background-color: transparent !important;
    border-color: #6c757d !important;
}

.toggle-pw .peekaboo-icon {
    color: #526b84 !important;
}

.toggle-pw .peekaboo-icon {
    display: block;
    width: 1.45rem;
    height: 1.45rem;
    margin: -.15rem auto;
    overflow: visible;
}

/* Conserva el contraste del personaje al mostrarse. */
.toggle-pw.is-visible .peekaboo-icon {
    opacity: 1;
}

.peekaboo-curtain {
    transform: translateY(0);
    transition: transform 130ms ease-out;
}

.peekaboo-character {
    transform: translateY(176px);
    transition: transform 240ms ease-in;
}

.peekaboo-branch-fill {
    opacity: 1;
    transition: opacity 150ms ease-out 170ms;
}

.toggle-pw.is-visible .peekaboo-curtain {
    transform: translateY(247px);
    transition: transform 260ms ease-out 130ms;
}

.toggle-pw.is-visible .peekaboo-character {
    transform: translateY(0);
    transition: transform 380ms cubic-bezier(.34, 1.45, .64, 1);
}

.toggle-pw.is-visible .peekaboo-branch-fill {
    opacity: 0;
    transition: opacity 100ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .peekaboo-curtain,
    .peekaboo-character,
    .peekaboo-branch-fill {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

@media (min-width: 576px) {
    .share-wrap {
        width: min(470px, 92vw);
        max-width: 470px;
    }
}


.expiry-options {
    align-items: stretch;
}

.expiry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}


.hero-section {
    align-items: flex-start;
    padding-top: clamp(1rem, 2vh, 1.5rem) !important;
    padding-bottom: clamp(1rem, 2vh, 1.5rem) !important;
}

.hero-section > .container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero-section .share-wrap {
    width: min(470px, 92vw);
}


#create-turnstile,
#unlock-turnstile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-block: clamp(.7rem, 1.5vh, 1rem) !important;
}

@media (max-height: 700px) {
    .hero-section {
        align-items: flex-start;
        overflow-y: auto;
    }
}