/* Hero Flex 1 — portal de letra. Namespace whf1- (não colide com waf-). */
.whf1 {
    --whf1-paper: #fff;
    --whf1-ink: #0c1212;
    --whf1-field: #0b3b2a;
    position: relative;
    isolation: isolate;
    background: var(--whf1-paper);
    color: var(--whf1-ink);
}
.whf1-pin {
    position: relative;
    height: 100vh;
    overflow: clip;
    isolation: isolate;
}
.whf1[data-whf1-motion] .whf1-pin,
.whf1[data-whf1-ready] .whf1-pin { position: sticky; top: 0; }

.whf1-field {
    position: absolute;
    inset: 0;
    background: var(--whf1-field);
    pointer-events: none;
}
.whf1-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.whf1-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 20vw;
    line-height: 1;
    color: var(--whf1-field);
}
.whf1[data-whf1-ready] .whf1-fallback { display: none; }

.whf1-caption {
    position: absolute;
    inset: auto 8% 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font: 12px/1.4 Arial, sans-serif;
    opacity: var(--whf1-caption, 1);
    z-index: 5;
}
.whf1-hint { max-width: 30ch; color: var(--whf1-ink); }
.whf1-enter {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 44px; color: inherit; text-decoration: none;
}
.whf1-content {
    position: relative;
    min-height: 100vh;
    opacity: var(--whf1-reveal, 0);
}

.whf1-editor-nota {
    position: absolute; inset: auto 16px 16px;
    padding: 12px 16px; background: #eef2ff;
    border: 1px dashed #6366f1; border-radius: 10px;
    color: #3730a3; font-size: 13px; z-index: 6;
}

.whf1-hint, .whf1-enter { font-family: inherit; }

/* Reduz movimento / mobile */
@media (prefers-reduced-motion: reduce) {
    .whf1-pin { position: relative !important; }
}
@media (max-width: 767px) {
    .whf1-fallback { font-size: 28vw; }
}