/* ═══════════════════════════════════════════════════════════════════════════════════════
   INVESTINDO EM VOCÊ — página única de vendas.

   🔵 PALETA E TIPOGRAFIA SAEM DA PRANCHA DA MARCA (referencia/prancha-marca.jpg), não de
   escolha minha. Os cinco tons e os nomes deles estão lá com a função de cada um:
   champanhe = fundo, dourado = destaque, dourado escuro = texto secundário, marrom café =
   texto principal, marrom escuro = profundidade. Títulos em Playfair Display, texto em
   Lato — as duas opções que a prancha lista.

   ⚠️ O LOGO É ARQUIVO, NÃO TEXTO. Três versões da mesma arte vetorial, geradas a partir do
   SVG do designer com o fundo branco removido: escura (sobre champanhe e sobre a foto),
   dourada (sobre preto) e branca (reserva). Nunca escrever o nome do evento com fonte —
   o desenho tem swashes que nenhuma fonte reproduz.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --champanhe: #f3e8d0;
    --champanhe-claro: #fbf6ec;
    --dourado: #d4a33a;
    --dourado-escuro: #b78332;
    --marrom: #3b2a20;
    --preto: #1e140e;
    --borda: rgba(183, 131, 50, .3);
    --serifa: "Playfair Display", Georgia, serif;
    --sans: "Lato", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--champanhe-claro);
    color: var(--marrom);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ── faixa de rascunho ── */
.rascunho {
    background: var(--preto);
    color: var(--dourado);
    text-align: center;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 7px 14px;
}

/* ── topo que só aparece depois da capa ── */
.topo {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: rgba(251, 246, 236, .95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borda);
    transform: translateY(-110%);
    transition: transform .4s ease;
    z-index: 50;
}
.topo.visivel { transform: translateY(0); }
.topo img { height: 30px; width: auto; }

/* ── botões ── */
.botao {
    display: inline-block;
    background: var(--dourado);
    color: var(--preto);
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 400;
    font-size: .88rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 30px;
    border: 1px solid var(--dourado);
    border-radius: 2px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.botao:hover { background: var(--dourado-escuro); border-color: var(--dourado-escuro); color: #fff; transform: translateY(-2px); }
.botao-grande { padding: 19px 42px; font-size: .96rem; }
.botao-pequeno { padding: 10px 18px; font-size: .74rem; }
.botao-vazado { background: transparent; color: var(--dourado-escuro); }
.botao-vazado:hover { background: rgba(212, 163, 58, .14); color: var(--marrom); }

/* ── capa ── */
/* A foto é do próprio material do evento: relógio de bolso e luzes quentes. O véu por cima
   existe porque a foto é clara à esquerda e escura à direita — sem ele, o texto sumiria
   numa metade ou na outra dependendo do tamanho da tela. */
.capa {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 24px;
    /* ⚠️ clip, NÃO hidden. `hidden` faz da capa um CONTÊINER DE ROLAGEM e trava a
       paralaxe da foto e a despedida do texto, que se apoiam em view(). Medido: com
       hidden, a timeline desses dois nascia ancorada na seção; com clip, na raiz. */
    overflow: clip;
}
.capa-fundo {
    position: absolute;
    inset: 0;
    /* 🔴 O VÉU É MAIS FORTE NO CELULAR, e não é preciosismo. A foto tem o relógio à direita;
       numa tela estreita o corte joga o relógio bem atrás do logo e do texto, e o desenho
       manuscrito — que é fino — se perde em cima dos números do mostrador. Medido em 375px.
       No computador a foto aparece inteira, com o relógio na margem, e o véu pode ser leve. */
    background-image:
        linear-gradient(to bottom, rgba(243, 232, 208, .93), rgba(243, 232, 208, .88) 45%, rgba(243, 232, 208, .96)),
        url("../img/capa.jpg");
    background-size: cover;
    background-position: 62% center;
}
@media (min-width: 900px) {
    .capa-fundo {
        background-image:
            linear-gradient(to bottom, rgba(243, 232, 208, .8), rgba(243, 232, 208, .62) 45%, rgba(243, 232, 208, .9)),
            url("../img/capa.jpg");
        background-position: center right;
    }
}
.capa-conteudo { position: relative; max-width: 780px; }

.marca { margin: 0 0 26px; }
.marca img {
    /* ⚠️ `height: auto` é obrigatório: o HTML traz width e height da arte para reservar o
       espaço antes de carregar (evita o pulo da página), e sem isto o CSS mudaria só a
       largura — a imagem ficaria esticada na vertical. */
    width: min(82vw, 500px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 2px 12px rgba(251, 246, 236, .85));
}

.sobrenome {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
    margin: 0 0 18px;
}

.capa-frase {
    font-family: var(--serifa);
    font-size: clamp(1.1rem, 2.3vw, 1.42rem);
    font-style: italic;
    line-height: 1.55;
    color: var(--marrom);
    max-width: 600px;
    margin: 0 auto 28px;
}

.capa-dados {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    padding: 0;
    margin: 0 0 34px;
    font-size: .95rem;
    letter-spacing: .04em;
}
.capa-dados li { position: relative; }
.capa-dados li + li::before {
    content: "·";
    position: absolute; left: -16px;
    color: var(--dourado-escuro);
}
.capa-dados strong { font-weight: 700; }

.capa-vagas {
    margin: 20px 0 0;
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
}

/* ── seções ── */
/* scroll-margin: os botões internos levam a seções; sem isto o título fica escondido
   atrás da barra fixa do topo quando a pessoa chega pelo link. */
.secao, .secao-video { scroll-margin-top: 70px; }
.secao { padding: clamp(70px, 10vw, 120px) 24px; }
.secao-creme { background: var(--champanhe); }
.secao-preta { background: var(--preto); color: var(--champanhe); }
.secao-preta .sobrenome { color: var(--dourado); }
.secao-preta h2 { color: var(--dourado); }
.secao-preta .texto { color: rgba(243, 232, 208, .85); }

.miolo { max-width: 1080px; margin: 0 auto; }
.estreito { max-width: 760px; }
.centro { text-align: center; }

h2 {
    font-family: var(--serifa);
    font-weight: 500;
    font-size: clamp(1.8rem, 4.2vw, 2.9rem);
    line-height: 1.2;
    color: var(--marrom);
    margin: 0 0 26px;
}
h3 {
    font-family: var(--serifa);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--marrom);
    margin: 0 0 8px;
}
.texto { margin: 0 0 20px; }

/* ── marcadores do que ainda falta ── */
/* 🔴 DELIBERADAMENTE VISÍVEL. Existem para a Stefany ver o que falta decidir ou enviar.
   Somem quando o conteúdo chegar: sem marcador, o texto de exemplo passaria por definitivo. */
.pendente { color: var(--dourado-escuro); font-style: italic; }
.aviso-pendente {
    display: inline-block;
    border: 1px dashed var(--dourado);
    border-radius: 2px;
    padding: 6px 14px;
    margin: 0 0 22px;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
    background: rgba(212, 163, 58, .08);
}

/* ── espaços de imagem ── */
[data-imagem] {
    position: relative;
    background: rgba(212, 163, 58, .08);
    border: 1px dashed var(--borda);
    border-radius: 2px;
}
[data-imagem]::after {
    content: attr(data-imagem);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--dourado-escuro);
    font-style: italic;
}
.capa-fundo::after { content: none; }

/* ── o convite em vídeo ── */
/* 🔵 A TRANSIÇÃO É O QUE INTEGRA. A seção é preta, mas as bordas dela dissolvem no
   champanhe das seções vizinhas: quem rola não vê um bloco colado, vê a página escurecer
   para o vídeo e clarear depois. Sem isso, o retângulo preto parece um erro de montagem. */
.secao-video {
    position: relative;
    background: var(--preto);
    padding: clamp(96px, 13vw, 160px) 24px;
    /* ⚠️ clip, NÃO hidden. `hidden` faz desta seção um CONTÊINER DE ROLAGEM, e aí a
       entrada do texto e do quadro do vídeo passa a medir uma caixa que nunca rola —
       ficam paradas. `clip` recorta na mesma aresta sem criar contêiner. */
    overflow: clip;
}
.secao-video::before,
.secao-video::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: clamp(70px, 12vw, 140px);
    pointer-events: none;
}
.secao-video::before { top: 0;    background: linear-gradient(to bottom, var(--champanhe), transparent); }
.secao-video::after  { bottom: 0; background: linear-gradient(to top, var(--champanhe-claro), transparent); }

.video-bloco {
    position: relative;
    display: grid;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
    text-align: center;
}
/* No computador o vídeo vai para o lado, e o texto ganha a leitura à esquerda. No celular
   os dois empilham, com o vídeo embaixo — primeiro o convite escrito, depois o rosto. */
@media (min-width: 900px) {
    .video-bloco { grid-template-columns: 1fr minmax(280px, 360px); text-align: left; }
}

.video-texto .sobrenome,
.video-texto h2 { color: var(--dourado); }
.video-texto .texto { color: rgba(243, 232, 208, .85); }

/* ⚠️ SEM BORDA. Uma linha em volta devolveria a aparência de moldura que saiu daqui; o
   que apoia o vídeo no fundo é o halo dourado difuso, que não tem contorno. */
.video-quadro {
    position: relative;
    justify-self: center;
    width: min(100%, 340px);
    aspect-ratio: 480 / 848;
    max-height: 74vh;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 34px 90px -34px rgba(212, 163, 58, .55), 0 0 120px -40px rgba(212, 163, 58, .35);
}
.video-quadro video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.video-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    border-radius: 50%;
    border: 1px solid rgba(243, 232, 208, .55);
    background: rgba(30, 20, 14, .42);
    backdrop-filter: blur(3px);
    cursor: pointer;
    transition: transform .25s ease, background .25s ease;
}
.video-play::after {
    content: "";
    position: absolute;
    left: 54%; top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--champanhe);
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.07); background: rgba(212, 163, 58, .35); }
.video-quadro.tocando .video-play { opacity: 0; pointer-events: none; }

/* ── listas ── */
.lista-marcada {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.lista-marcada li { position: relative; padding-left: 30px; }
.lista-marcada li::before {
    content: "";
    position: absolute;
    left: 4px; top: .72em;
    width: 12px; height: 1px;
    background: var(--dourado);
}
.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { padding: 7px 0; border-bottom: 1px solid var(--borda); }

/* ── cartões ── */
.cartoes {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cartao {
    background: var(--champanhe-claro);
    border: 1px solid var(--borda);
    border-radius: 2px;
    padding: 28px 26px;
}
.secao .cartao p { margin: 0; font-size: .95rem; color: rgba(59, 42, 32, .8); }

/* ── destaque do diferencial ── */
/* ⚠️ ERA O NÚMERO 20 EM CORPO GIGANTE, e a frase que o substituiu não cabe nesse tamanho:
   dois caracteres a 8rem funcionam, quinze não — quebrariam em três linhas no celular.
   Por isso o corpo menor e o itálico, que mantêm o peso de destaque sem estourar a linha. */
.numero {
    font-family: var(--serifa);
    font-style: italic;
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.15;
    color: var(--dourado);
    margin: 30px 0 0;
}

/* ── programação ── */
.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li {
    display: flex;
    gap: 22px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--borda);
}
.linha-tempo .hora {
    font-family: var(--serifa);
    font-size: 1.3rem;
    color: var(--dourado-escuro);
    min-width: 76px;
}
.linha-tempo .evento { font-size: 1rem; }

/* ── pessoas ── */
.pessoas {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    text-align: center;
}
.retrato { aspect-ratio: 3 / 4; margin-bottom: 16px; }
.retrato-grande { aspect-ratio: 4 / 5; }
.funcao {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
    margin: 0 0 10px;
}
.pessoas p { font-size: .93rem; color: rgba(59, 42, 32, .8); }

/* ── duas colunas ── */
.duas-colunas {
    display: grid;
    gap: clamp(30px, 5vw, 60px);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
}
.capa-livro { aspect-ratio: 3 / 4; max-width: 340px; width: 100%; }
.mapa { aspect-ratio: 4 / 3; }

/* ── galeria ── */
.galeria {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.foto { aspect-ratio: 4 / 3; }

/* ── depoimentos ── */
.depos {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.depos blockquote {
    margin: 0;
    padding: 28px 26px;
    background: var(--champanhe-claro);
    border-left: 2px solid var(--dourado);
}
.depos p { font-family: var(--serifa); font-style: italic; font-size: 1.08rem; line-height: 1.6; margin: 0 0 14px; }
.depos cite {
    font-style: normal;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
}

/* ── ingresso ── */
.cartao-ingresso {
    border: 1px solid rgba(212, 163, 58, .45);
    border-radius: 2px;
    padding: clamp(28px, 5vw, 48px);
    background: rgba(243, 232, 208, .05);
    text-align: left;
}
.preco {
    font-family: var(--serifa);
    font-size: clamp(3rem, 9vw, 4.6rem);
    line-height: 1;
    color: var(--dourado);
    margin: 0;
    text-align: center;
}
.preco span { font-size: .4em; }
.preco-obs {
    text-align: center;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(243, 232, 208, .7);
    margin: 8px 0 26px;
}
.inclui { list-style: none; padding: 0; margin: 0 0 32px; }
.inclui li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid rgba(212, 163, 58, .18); }
.inclui li::before {
    content: "";
    position: absolute; left: 2px; top: 1.15em;
    width: 12px; height: 1px; background: var(--dourado);
}
.secao-preta .pendente { color: var(--dourado); }
.cartao-ingresso .botao { display: block; text-align: center; }

/* ── perguntas ── */
.perguntas { border-top: 1px solid var(--borda); }
.perguntas details { border-bottom: 1px solid var(--borda); }
.perguntas summary {
    cursor: pointer;
    padding: 18px 34px 18px 0;
    position: relative;
    font-size: 1.02rem;
    list-style: none;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
    content: "+";
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    color: var(--dourado-escuro);
    font-size: 1.3rem;
}
.perguntas details[open] summary::after { content: "–"; }
.perguntas p { margin: 0 0 20px; color: rgba(59, 42, 32, .82); font-size: .96rem; }

/* ── rodapé ── */
.rodape {
    background: var(--preto);
    color: rgba(243, 232, 208, .75);
    padding: 60px 24px 120px;
    text-align: center;
}
.rodape img { width: min(62vw, 260px); margin: 0 auto 22px; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-bottom: 22px; }
.rodape-links a { color: var(--dourado); text-decoration: none; border-bottom: 1px solid transparent; }
.rodape-links a:hover { border-color: var(--dourado); }
.rodape-fino { font-size: .78rem; margin: 6px 0; }
.realizacao {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(212, 163, 58, .22);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.realizacao span {
    font-size: .68rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
}
.realizacao img { width: min(46vw, 190px); opacity: .88; }

/* ── barra fixa no celular ── */
.barra-celular { display: none; }
@media (max-width: 720px) {
    .barra-celular {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        display: flex;
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(251, 246, 236, .97);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--borda);
        z-index: 60;
    }
    .barra-celular .botao { flex: 1; text-align: center; padding: 14px 8px; font-size: .78rem; letter-spacing: .06em; }
    .topo { display: none; }
}

/* ── ajustes de celular ── */
/* 🔴 OS SEPARADORES "·" SOLTOS. No computador a data, a hora e o local cabem numa linha e o
   ponto entre eles funciona. No celular a lista quebra, e o separador — desenhado ANTES de
   cada item — aparecia sozinho no começo da linha seguinte. Medido em 375px. */
@media (max-width: 720px) {
    .capa-dados { flex-direction: column; gap: 6px; }
    .capa-dados li + li::before { content: none; }
}

/* ═══════════════ MOVIMENTO NA ROLAGEM ═══════════════

   🔵 DOIS MECANISMOS, UM RESULTADO. O moderno é a animação LIGADA À ROLAGEM
   (animation-timeline), em que o quadro da animação é a posição da barra, e não o relógio:
   o elemento acompanha o dedo, entra e volta conforme a pessoa rola, e o navegador executa
   tudo no compositor — sem JavaScript por quadro, sem travar em celular modesto.
   Suportado por Chrome, Edge, Firefox e Safari; cobre a maioria dos visitantes.

   ⚠️ O QUE NÃO SUPORTA CONTINUA FUNCIONANDO. O bloco fora do @supports é o método antigo
   (classe .dentro posta pelo JavaScript, com transição no tempo). Quem cair nele vê a
   página inteira, com uma entrada mais simples — nunca uma página em branco.

   ⚠️ SÓ transform, opacity e clip-path. Animar altura, margem ou posição obriga o navegador
   a recalcular o layout a cada quadro, e é o que faz página bonita engasgar na rolagem.
   ═══════════════════════════════════════════════════ */

.anima {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.anima.dentro { opacity: 1; transform: none; }

/* Barra fina de progresso da leitura. Sem suporte, fica em escala zero — invisível. */
.progresso {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--dourado-escuro), var(--dourado));
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 80;
    pointer-events: none;
}

@keyframes surgir {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
}
/* Imagem entra abrindo de dentro para fora, e não deslizando: o assunto da foto fica
   parado no lugar enquanto a moldura revela — é o que dá a sensação de material caro. */
@keyframes surgirImagem {
    from { opacity: 0; clip-path: inset(16% 0 16% 0); transform: scale(1.05); }
    to   { opacity: 1; clip-path: inset(0 0 0 0);     transform: none; }
}
@keyframes surgirDoLado {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes crescerBarra { to { transform: scaleX(1); } }
@keyframes paralaxe {
    from { transform: scale(1.12) translateY(-2.5%); }
    to   { transform: scale(1.12) translateY(3.5%); }
}
@keyframes sairDaCapa {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-40px) scale(.97); }
}

@supports (animation-timeline: view()) {
    /* O JavaScript continua marcando .dentro; aqui a animação assume e ignora a transição. */
    .anima {
        opacity: 1;
        transform: none;
        transition: none;
        animation: surgir linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 28%;
    }

    /* Escada dentro de cada grupo: cada cartão entra um pouco depois do anterior, medido em
       posição de rolagem, não em segundos — quem rola rápido não espera. */
    .cartoes .cartao:nth-child(2),
    .pessoas .pessoa:nth-child(2),
    .galeria .foto:nth-child(2),
    .depos blockquote:nth-child(2) { animation-range: entry 4% cover 34%; }
    .cartoes .cartao:nth-child(3),
    .pessoas .pessoa:nth-child(3),
    .galeria .foto:nth-child(3),
    .depos blockquote:nth-child(3) { animation-range: entry 4% cover 40%; }
    .cartoes .cartao:nth-child(n+4),
    .galeria .foto:nth-child(n+4) { animation-range: entry 4% cover 46%; }

    /* Fotos, retratos, capa do livro e mapa abrem; o vídeo não usa clip-path porque cortaria
       o halo dourado que o apoia no fundo. */
    .galeria .foto,
    /* ⚠️ O VÍDEO FICA DE FORA de propósito. Havia aqui um `.video .anima` que não casava
       com nada (a seção virou .secao-video). Consertá-lo seria o erro: estes quadros
       carregam clip-path, e no vídeo isso apagaria o halo dourado que o apoia no fundo —
       halo é box-shadow, que pinta FORA da caixa e o recorte comeria. */
    .retrato.anima,
    .capa-livro,
    .mapa,
    [data-imagem].anima {
        animation-name: surgirImagem;
        animation-range: entry 2% cover 36%;
    }

    /* A programação entra linha a linha, pelo lado — lê-se como uma agenda sendo escrita. */
    .linha-tempo li {
        opacity: 1;
        animation: surgirDoLado linear both;
        animation-timeline: view();
    }
    .linha-tempo li:nth-child(odd)  { animation-range: entry 2% cover 26%; }
    .linha-tempo li:nth-child(even) { animation-range: entry 6% cover 30%; }

    /* A capa: a foto desliza devagar (paralaxe) e o conteúdo se despede ao sair. */
    .capa-fundo {
        animation: paralaxe linear both;
        animation-timeline: view();
        animation-range: cover;
    }
    .capa-conteudo {
        animation: sairDaCapa linear both;
        animation-timeline: view();
        animation-range: exit 10% exit 95%;
    }
    /* ⚠️ O conteúdo da capa não usa .anima: ele tem animação de SAÍDA, e as duas na mesma
       linha do tempo brigariam pelo mesmo transform. Por isso os filhos entram sem atraso. */
    .capa-conteudo .anima { animation: none; opacity: 1; transform: none; }

    /* ⚠️ BLOCO ALTO PRECISA TERMINAR ANTES. O cartão do ingresso tem quase a altura da tela;
       com a faixa padrão (que se estende pela travessia inteira) ele ficaria meio transparente
       enquanto já está bem visível. Aqui ele completa ainda durante a entrada. */
    .cartao-ingresso { animation-range: entry 0% entry 85%; }

    .progresso {
        animation: crescerBarra linear both;
        animation-timeline: scroll(root);
    }
}

/* ⚠️ QUEM PEDIU MENOS MOVIMENTO NO SISTEMA RECEBE A PÁGINA PARADA. Não é detalhe de
   acessibilidade opcional: movimento ligado à rolagem provoca enjoo em quem tem sensibilidade
   vestibular. Tudo visível, nada animado. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .anima,
    .linha-tempo li,
    .capa-fundo,
    .capa-conteudo,
    .progresso {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        clip-path: none !important;
    }
    .progresso { display: none; }
    .botao:hover { transform: none; }
}