/* Paleta por aparência: grafite/esmeralda/turquesa e mineral já existentes. */
.teaser-cinematic {
    --teaser-bg: #0f1115;
    --teaser-ink: #edf7f3;
    --teaser-muted: #b6c8c7;
    --teaser-accent: #72e1d3;
    --teaser-line: #344143;
    --teaser-hover: #172429;
    color-scheme: dark;
}
.teaser-cinematic[data-resolved-theme="light"] {
    --teaser-bg: #bccac1;
    --teaser-ink: #14242a;
    --teaser-muted: #354d46;
    --teaser-accent: #07564e;
    --teaser-line: rgba(20, 36, 42, .22);
    --teaser-hover: #b8cbc0;
    color-scheme: light;
}
/* MKT-TEASER-01 — camada cinematográfica isolada da prévia pública. */
.teaser-cinematic {
    background: var(--teaser-bg);
}

.teaser-cinematic .student-entry__light {
    display: none;
}

.teaser-cinematic .teaser-cinematic-layout {
    width: 100%;
}

.teaser-cinematic .teaser-hero {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 740px;
    padding: 3rem clamp(24px, 5vw, 80px);
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background: var(--teaser-bg);
}

.teaser-cinematic .teaser-hero__picture {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--teaser-bg);
}

.teaser-cinematic .teaser-hero__picture::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--teaser-bg) 0%, color-mix(in srgb, var(--teaser-bg) 97%, transparent) 26%, color-mix(in srgb, var(--teaser-bg) 76%, transparent) 46%, color-mix(in srgb, var(--teaser-bg) 16%, transparent) 78%, color-mix(in srgb, var(--teaser-bg) 8%, transparent) 100%);
    content: "";
}

.teaser-cinematic .teaser-hero__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.teaser-cinematic .teaser-intro {
    position: relative;
    z-index: 1;
    width: 44%;
    max-width: 44rem;
    padding: 1.5rem 0;
}

.teaser-cinematic .teaser-intro h1 {
    max-width: 10ch;
    margin: 1rem 0 1.15rem;
    color: var(--teaser-ink);
    font-size: clamp(52px, 5.8vw, 84px);
    font-weight: 300;
    letter-spacing: -0.075em;
    line-height: 0.98;
}

.teaser-cinematic .teaser-intro h1 .osf-hero-accent {
    color: var(--teaser-accent);
}

.teaser-cinematic .teaser-intro__lead {
    max-width: 31rem;
    margin: 0;
    color: var(--teaser-muted);
    font-size: 16px;
    line-height: 1.55;
}

.teaser-cinematic .teaser-intro__note {
    max-width: 28rem;
    margin: 1rem 0 0;
    font-size: 14px;
    line-height: 1.55;
}

.teaser-cinematic .teaser-intro__actions {
    display: flex;
    max-width: 31rem;
    margin-top: 1.5rem;
    align-items: center;
    gap: 1.25rem;
}

.teaser-cinematic .teaser-intro__actions .osf-action {
    min-height: 52px;
}

.teaser-cinematic .teaser-intro__secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.teaser-cinematic .teaser-invitation {
    margin: 1.2rem 0 0;
    color: var(--teaser-accent);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.teaser-cinematic .teaser-intro__signature {
    margin: 1.4rem 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
}

.teaser-cinematic .teaser-card {
    width: min(1120px, calc(100% - 48px));
    margin: 64px auto;
    padding: 32px;
}

.teaser-cinematic .teaser-card .osf-availability-note {
    margin-top: 0;
    margin-bottom: 2rem;
}

.teaser-cinematic .teaser-intro__actions a:focus-visible,
.teaser-cinematic .teaser-card__link:focus-visible {
    outline: 3px solid var(--teaser-accent);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
    .teaser-cinematic .teaser-hero__picture img {
        animation: teaser-cinematic-settle 700ms ease-out both;
    }
}

@keyframes teaser-cinematic-settle {
    from { transform: scale(1.015); }
    to { transform: scale(1); }
}

@media (max-width: 980px) {
    .teaser-cinematic .teaser-hero {
        min-height: 660px;
    }

    .teaser-cinematic .teaser-intro {
        width: 54%;
    }
}

@media (max-width: 980px) {
    .teaser-cinematic .teaser-hero {
        display: block;
        min-height: 0;
        padding: 0 24px 28px;
        overflow: visible;
    }

    .teaser-cinematic .teaser-hero__picture {
        position: relative;
        inset: auto;
        width: calc(100% + 48px);
        height: clamp(260px, 42vw, 340px);
        margin: 0 -24px;
    }

    .teaser-cinematic .teaser-hero__picture::after {
        background: linear-gradient(0deg, var(--teaser-bg) 0%, color-mix(in srgb, var(--teaser-bg) 25%, transparent) 42%, color-mix(in srgb, var(--teaser-bg) 5%, transparent) 100%);
    }

    .teaser-cinematic .teaser-hero__picture img {
        object-position: center top;
    }

    .teaser-cinematic .teaser-intro {
        width: 100%;
        max-width: none;
        margin-top: -0.1rem;
        padding: 0;
    }

    .teaser-cinematic .teaser-intro h1 {
        max-width: 10ch;
        margin: 0.9rem 0 1rem;
        font-size: 48px;
        line-height: 0.98;
    }

    .teaser-cinematic .teaser-intro__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 0.45rem;
    }

    .teaser-cinematic .teaser-intro__actions .osf-action {
        width: 100%;
        min-height: 52px;
    }

    .teaser-cinematic .teaser-intro__secondary {
        min-height: 44px;
        justify-content: center;
    }

    .teaser-cinematic .teaser-intro__signature {
        margin-top: 1rem;
        font-size: 0.68rem;
    }

    .teaser-cinematic .teaser-card {
        width: calc(100% - 32px);
        margin: 28px auto 44px;
        padding: 24px;
    }
}

@media (max-width: 380px) {
    .teaser-cinematic .teaser-hero {
        padding-right: 20px;
        padding-left: 20px;
    }

    .teaser-cinematic .teaser-hero__picture {
        width: calc(100% + 40px);
        margin-right: -20px;
        margin-left: -20px;
    }

    .teaser-cinematic .teaser-intro h1 {
        font-size: 46px;
    }

    .teaser-cinematic .teaser-card {
        width: calc(100% - 24px);
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .teaser-cinematic *,
    .teaser-cinematic *::before,
    .teaser-cinematic *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Leitura dos princípios imediatamente após a abertura. */
.teaser-cinematic .teaser-principles { padding: 2rem 0; }
.teaser-cinematic .teaser-principles__intro h2 { max-width: 32ch; font-size: clamp(1.8rem, 2.5vw, 2.5rem); }
.teaser-cinematic .teaser-principles__grid { margin-top: 1.5rem; }
.teaser-cinematic .teaser-intro__actions .osf-action { font-size: 1rem; }
.teaser-cinematic .teaser-card__link { min-height: 44px; }

/* O aviso agora pertence à superfície que acompanha o tema. */
.teaser-cinematic .teaser-card .osf-availability-note p { color: var(--osf-ink); }
.teaser-cinematic .teaser-card .osf-availability-note__label { color: var(--osf-ink); }

/* Jornada editorial: substitui integralmente a antiga constelação. */
.teaser-cinematic .teaser-pathway {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 2rem 3rem;
    width: min(1320px, calc(100% - 48px));
    padding: 64px 0 24px;
    border: 0;
    border-top: 1px solid var(--teaser-line);
    border-radius: 0;
    box-shadow: none;
    background: var(--teaser-bg);
    color: var(--teaser-ink);
    --osf-ink: var(--teaser-ink);
    --osf-muted: var(--teaser-muted);
    --osf-surface-accent: var(--teaser-accent);
    --osf-line: var(--teaser-line);
}
.teaser-cinematic .teaser-pathway .teaser-card__header { grid-column: 1; }
.teaser-cinematic .teaser-pathway .teaser-card__header h2 {
    max-width: 13ch;
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 300;
    line-height: 1.04;
}
.teaser-cinematic .teaser-pathway__art {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    min-width: 0;
}
.teaser-cinematic .teaser-pathway__art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}
.teaser-cinematic .teaser-pathway__art figcaption {
    margin-top: 1.5rem;
    color: var(--teaser-muted);
    font-size: .85rem;
    text-align: center;
}
.teaser-cinematic .teaser-pathway__steps { grid-column: 1; min-width: 0; }
.teaser-cinematic .teaser-pathway__hint { color: var(--teaser-muted); font-size: .8rem; margin: 0 0 1rem; }
.teaser-cinematic .teaser-pathway details { border-top: 1px solid var(--teaser-line); }
.teaser-cinematic .teaser-pathway details:last-child { border-bottom: 1px solid var(--teaser-line); }
.teaser-cinematic .teaser-pathway summary {
    cursor: pointer;
    padding: 1rem .5rem;
    min-height: 56px;
    color: var(--teaser-ink);
    font-size: 1.2rem;
    line-height: 1.4;
}
.teaser-cinematic .teaser-pathway summary span {
    margin: 0 1rem 0 .5rem;
    color: var(--teaser-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
/* Estado ativo usa o turquesa oficial; texto usa o tom claro da superfície. */
.teaser-cinematic .teaser-pathway summary {
    border-left: 3px solid transparent;
    transition: background-color 400ms ease-out, border-color 400ms ease-out, color 400ms ease-out;
}
.teaser-cinematic .teaser-pathway summary span {
    display: inline-block;
    transition: transform 400ms ease-out, color 400ms ease-out;
}
.teaser-cinematic .teaser-pathway details[open] summary {
    color: var(--osf-surface-accent);
    border-left-color: var(--osf-turquoise);
    background: var(--teaser-hover);
    background: color-mix(in srgb, var(--osf-turquoise) 22%, var(--teaser-bg));
}
.teaser-cinematic .teaser-pathway details[open] summary span {
    color: var(--osf-surface-accent);
    transform: translateX(2px);
}
@media (hover: hover) {
    .teaser-cinematic .teaser-pathway details:not([open]) summary:hover { background: var(--teaser-hover); }
}
.teaser-cinematic .teaser-pathway summary:focus-visible { outline: 3px solid var(--osf-turquoise); outline-offset: 3px; }
.teaser-cinematic .teaser-pathway details p {
    margin: 0;
    padding: 0 .5rem 1.25rem 2.5rem;
    color: var(--teaser-muted);
    font-size: .95rem;
    line-height: 1.65;
}
.teaser-cinematic .teaser-pathway__closing {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 3rem;
    padding: 2.5rem 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--teaser-line);
}
.teaser-cinematic .teaser-pathway__closing p { grid-column: 1 / -1; color: var(--teaser-accent); font-size: .85rem; }
.teaser-cinematic .teaser-pathway__closing h3 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; font-weight: 400; letter-spacing: -.04em; }
.teaser-cinematic .teaser-pathway__closing .teaser-card__link { align-self: center; font-size: 1rem; margin: 0; padding: 1rem 0; }
.teaser-cinematic .teaser-pathway > .osf-availability-note {
    grid-column: 1 / -1;
    max-width: none;
    background: transparent;
    border: 0;
    border-left: 2px solid #14b8a6;
    border-radius: 0;
    padding: .25rem 1rem;
    margin: 0;
}
.teaser-cinematic .teaser-pathway > .osf-availability-note p { max-width: 68ch; color: var(--teaser-muted); }
@media (max-width: 980px) {
    .teaser-cinematic .teaser-pathway { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; }
    .teaser-cinematic .teaser-pathway__art { grid-column: 1; grid-row: 2; max-width: 640px; justify-self: center; }
    .teaser-cinematic .teaser-pathway__steps { grid-row: 3; }
    .teaser-cinematic .teaser-pathway__closing { grid-template-columns: 1fr; padding: 1.5rem 0; }
    .teaser-cinematic .teaser-pathway__closing .teaser-card__link { margin-top: 1rem; }
}
@media (max-width: 620px) {
    .teaser-cinematic .teaser-pathway { width: calc(100% - 40px); }
    .teaser-cinematic .teaser-pathway .teaser-card__header h2 { font-size: 2.6rem; }
}

/* Superfícies e textos da página inteira acompanham o tema resolvido. */
.teaser-cinematic .student-brand,
.teaser-cinematic .teaser-principles h2,
.teaser-cinematic .teaser-principles h3 { color: var(--teaser-ink); }
.teaser-cinematic .student-brand__promise,
.teaser-cinematic .student-stage,
.teaser-cinematic .teaser-intro__signature,
.teaser-cinematic .teaser-footer,
.teaser-cinematic .teaser-principles p { color: var(--teaser-muted); }
.teaser-cinematic .teaser-eyebrow,
.teaser-cinematic .teaser-principles article > span { color: var(--teaser-accent); }
.teaser-cinematic .teaser-principles,
.teaser-cinematic .teaser-principles article { border-color: var(--teaser-line); }
.teaser-cinematic .student-theme { background: var(--teaser-hover); border-color: var(--teaser-line); }
.teaser-cinematic .student-theme__option { color: var(--teaser-muted); min-width: 44px; height: 44px; }
.teaser-cinematic .student-theme__option[aria-pressed="true"] { color: var(--teaser-accent); }
.teaser-cinematic .teaser-intro__secondary:hover { color: var(--teaser-ink); }
.teaser-cinematic .teaser-pathway__steps details[open] {
    background: color-mix(in srgb, var(--osf-turquoise) 8%, var(--teaser-bg));
    border-left: 3px solid var(--osf-turquoise);
}
.teaser-cinematic .teaser-pathway__steps details[open] summary { border-left-color: transparent; }
.teaser-cinematic .teaser-step__items {
    display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1.25rem 2.5rem; margin: 0;
    list-style: none; color: var(--teaser-ink); font-size: .8rem;
}
.teaser-cinematic .teaser-step__items li { padding: .4rem .65rem; background: var(--teaser-hover); border: 1px solid var(--teaser-line); border-radius: 4px; }
.teaser-cinematic .teaser-pathway__current { color: var(--teaser-accent); margin-bottom: .5rem; font-size: .85rem; }
.teaser-cinematic .teaser-intro__note { color: var(--teaser-muted); }
.teaser-cinematic .teaser-intro__secondary,
.teaser-cinematic .teaser-intro__secondary span,
.teaser-cinematic .student-stage__number { color: var(--teaser-accent); }
.teaser-cinematic .teaser-pathway summary:focus-visible,
.teaser-cinematic .student-theme__option:focus-visible { outline-color: var(--teaser-accent); }
@media (prefers-color-scheme: light) {
    .teaser-cinematic:not([data-resolved-theme]) {
        --teaser-bg: #bccac1;
        --teaser-ink: #14242a;
        --teaser-muted: #354d46;
        --teaser-accent: #07564e;
        --teaser-line: rgba(20, 36, 42, .22);
        --teaser-hover: #b8cbc0;
        color-scheme: light;
    }
}

/* Tema claro mineral: profundidade por superfícies, seleção em esmeralda. */
.teaser-cinematic[data-resolved-theme="light"] {
    --teaser-panel: #d4dfd8;
    --teaser-selected: #123e35;
    --teaser-on-selected: #edf7f3;
}
.teaser-cinematic[data-resolved-theme="light"] .teaser-hero__picture::after {
    background: linear-gradient(90deg, var(--teaser-bg) 0%, var(--teaser-bg) 28%, color-mix(in srgb, var(--teaser-bg) 85%, transparent) 42%, transparent 68%);
}
.teaser-cinematic[data-resolved-theme="light"] .teaser-pathway details {
    margin: .65rem 0;
    background: var(--teaser-panel);
    border: 1px solid var(--teaser-line);
    border-left: 3px solid transparent;
    border-radius: 6px;
}
.teaser-cinematic[data-resolved-theme="light"] .teaser-pathway details[open] {
    background: var(--teaser-panel);
    border-color: var(--teaser-selected);
}
.teaser-cinematic[data-resolved-theme="light"] .teaser-pathway details[open] summary {
    background: var(--teaser-selected);
    color: var(--teaser-on-selected);
    border-radius: 2px 4px 0 0;
}
.teaser-cinematic[data-resolved-theme="light"] .teaser-pathway details[open] summary span { color: var(--teaser-on-selected); }
.teaser-cinematic[data-resolved-theme="light"] .teaser-pathway details p { padding-top: 1rem; }
.teaser-cinematic[data-resolved-theme="light"] .teaser-step__items li {
    background: var(--teaser-hover);
    border-color: transparent;
    color: var(--teaser-ink);
}
.teaser-cinematic[data-resolved-theme="light"] .osf-action--primary {
    background: var(--teaser-selected);
    color: var(--teaser-on-selected);
    box-shadow: 0 .5rem 1.3rem rgba(18,62,53,.16);
}
.teaser-cinematic[data-resolved-theme="light"] .student-theme {
    background: var(--teaser-panel);
    border-color: var(--teaser-line);
}
.teaser-cinematic[data-resolved-theme="light"] .student-theme__option[aria-pressed="true"] {
    color: var(--teaser-on-selected);
    background: var(--teaser-selected);
    box-shadow: none;
}
.teaser-cinematic[data-resolved-theme="light"] .teaser-intro__note,
.teaser-cinematic[data-resolved-theme="light"] .teaser-pathway > .osf-availability-note { border-left-color: var(--teaser-accent); }
@media (max-width: 980px) {
    .teaser-cinematic[data-resolved-theme="light"] .teaser-hero__picture::after {
        background: linear-gradient(0deg, var(--teaser-bg), transparent 55%);
    }
}