/* ==========================================================================
   CÓDIGO DG · Dany Gonçalves
   Identidade: "Identidade Visual - Final" (Claude Design, 13/10/2026).
   Marcellus nos títulos, Albert Sans no texto. Verde só nos 4 botões,
   cinza frio só na maca fria. Especificação completa em layout.md.
   ========================================================================== */

:root {
    /* Paleta */
    --marfim: #F6EFE7;      /* fundo */
    --nude: #E8D5C8;        /* blocos */
    --madeira: #C9A68A;     /* linhas */
    --mogno: #8A4B3C;       /* destaque */
    --vinho: #5A1F2E;       /* títulos */
    --cacau: #2E1F1A;       /* texto */
    --cacau-suave: #5E4A42; /* texto secundário */
    --rosado: #F2E6E8;      /* célula da maca paga */
    --branco: #FFFFFF;      /* balão recebido */
    --cinza: #8C8F96;       /* só na maca fria */
    --cinza-fundo: #ECEDEF; /* só na maca fria */
    /* Botões (pedido do sócio, 16/10): verde fluorescente em todos, página e quiz;
       no hover/toque o vermelho acende da esquerda pra direita */
    --verde-neon: #39FF14;     /* botão parado */
    --tinta-neon: #0E1F0A;     /* texto sobre o verde neon (branco some nele) */
    --vermelho-grito: #E10600; /* hover/toque, texto branco */
    --marfim-fundo: #EDE2D7;  /* quadros reservados */
    --nude-claro: #EFE3D9;    /* faixa quieta, cartões pares */
    --cacau-borda: rgba(246, 239, 231, .14);
    --sombra-cartao: 0 1px 0 rgba(46, 31, 26, .04), 0 18px 40px -24px rgba(46, 31, 26, .28);
    --sombra-mesa: 0 2px 0 rgba(46, 31, 26, .06), 0 28px 48px -22px rgba(46, 31, 26, .5);
    --marfim-claro: #FBF7F2;  /* cartões pares sobre o nude claro */

    /* Tema escuro (Dany, 22/10): o lado escuro da paleta. Cada uso de cor no
       CSS aponta pra um papel daqui, não pra cor direto. Pra voltar ao claro,
       é só trocar estes valores (e os data-fundo das dobras / TONS do quiz).
       Contraste sobre a tela: texto 15:1, texto suave 11:1, acento 7:1;
       sobre o vinho: 11:1 / 9:1 / 5,7:1. Mogno só como fundo de bloco. */
    --tela: var(--cacau);                 /* fundo da página */
    --superficie: #3A2A24;                /* cartões, opções, balão dela (cacau + 6% marfim) */
    --superficie-2: #34241F;              /* cartões pares */
    --texto: var(--marfim);
    --texto-suave: var(--nude);
    --titulo: var(--marfim);
    --acento: var(--madeira);             /* palavra em destaque, números, setas */
    --linha: rgba(201, 166, 138, .38);    /* madeira translúcida: fios e bordas */
    --urgencia: #B3121B;                  /* só a barra da /parcela-urgencia */

    /* Tipografia */
    --serifa: 'Marcellus', 'Times New Roman', serif;
    --sans: 'Albert Sans', system-ui, sans-serif;

    /* Medidas */
    --largura: 1200px;
    --margem: 20px;
    --sangria: var(--margem);   /* distância até a borda direita da tela */

    /* Movimento */
    --curva: cubic-bezier(.65, 0, .35, 1);
    --saida: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 960px) {
    :root {
        --margem: 40px;
        --sangria: calc((100vw - min(100vw, var(--largura))) / 2 + var(--margem));
    }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* "A página esquenta": as dobras não têm fundo próprio. O fundo é um só, o
   do body, e o script.js mistura a cor de uma dobra na da próxima conforme
   a rolagem (data-fundo em cada dobra). Nada de corte seco entre dobras. */
body {
    margin: 0;
    background-color: var(--fundo, var(--tela));
    color: var(--texto);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* Grão de papel, bem leve, por cima de tudo */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* Sem JavaScript: cada dobra com o seu tom chapado, pra nada ficar ilegível */
html:not(.js) .conversa { background: var(--superficie); }
html:not(.js) .alunas { background: var(--mogno); }
html:not(.js) .recebe,
html:not(.js) .fecho { background: var(--superficie); }
html:not(.js) .preco { background: var(--vinho); }
html:not(.js) .perguntas { background: var(--superficie); }

h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
strong { font-weight: 600; }

/* ---------- Contêineres ---------- */
.estreito,
.medio,
.largo {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--margem);
}
.estreito { max-width: calc(560px + 2 * var(--margem)); }
.medio { max-width: calc(760px + 2 * var(--margem)); }
.largo { max-width: calc(var(--largura) + 2 * var(--margem)); }

.dobra { padding: 88px 0 104px; }

@media (min-width: 960px) {
    .dobra { padding: 128px 0 144px; }
}

.secao__titulo {
    font-family: var(--serifa);
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--titulo);
    text-wrap: balance;
}

.poster {
    font-family: var(--serifa);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    line-height: 1.2;
    color: var(--texto);
    text-wrap: balance;
}

.quebra { display: block; }

/* ---------- Quadro reservado (material que ainda não chegou) ---------- */
.quadro-reservado {
    display: grid;
    place-items: center;
    background: var(--superficie);
    border: 1px solid var(--madeira);
    color: var(--acento);
    font: 400 15px/1.5 var(--sans);
    text-align: center;
    padding: 16px;
}

.pendente--linha {
    padding: 1px 6px;
    background: var(--superficie);
    border: 1px dashed var(--madeira);
    color: var(--acento);
}

/* ---------- Marcas desenhadas (✓ ✗ →) ---------- */
.marca {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
.marca.seta { width: 24px; height: 12px; }

/* ---------- Botão ---------- */
.botao {
    display: block;
    padding: 20px 24px;
    background-color: var(--verde-neon);
    background-image: linear-gradient(var(--vermelho-grito), var(--vermelho-grito));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    color: var(--tinta-neon);
    /* Elegância sem brilho: fio claro por dentro e sombra curta, neutra */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 14px 24px -18px rgba(46, 31, 26, .55);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    transition: background-size .35s var(--curva), color .2s var(--curva) .1s,
                transform .2s var(--saida), box-shadow .2s var(--saida);
}

/* :active = o toque no celular, que não tem hover */
.botao:hover,
.botao:focus-visible,
.botao:active { background-size: 100% 100%; color: #FFFFFF; }

@media (hover: hover) {
    .botao:hover {
        transform: translateY(-1px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 18px 28px -18px rgba(46, 31, 26, .6);
    }
}

.botao:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

.botao:active { transform: translateY(1px); }

.linha-pequena {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--texto-suave);
    text-align: center;
}

.acao-bloco { margin-top: 48px; }

@media (min-width: 960px) {
    .acao-bloco { max-width: 520px; }
}

/* ---------- Balões ---------- */
.balao {
    max-width: 85%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--texto);
}

.balao--dela {
    align-self: flex-start;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 14px 14px 14px 3px;
}

/* A Dany responde quente: vinho, porque a conversa e as perguntas estão
   sobre fundos nude e rosado (na folha de identidade o balão é nude) */
.balao--dany {
    align-self: flex-end;
    background: var(--vinho);
    color: var(--marfim);
    border-radius: 14px 14px 3px 14px;
}

.balao--digitando {
    display: none;
    gap: 5px;
    padding: 16px 18px;
}

.balao--digitando i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rosado);
    opacity: .35;
    animation: digita 1s ease-in-out infinite;
}

.balao--digitando i:nth-child(2) { animation-delay: .15s; }
.balao--digitando i:nth-child(3) { animation-delay: .3s; }

@keyframes digita {
    0%, 60%, 100% { opacity: .35; transform: none; }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ==========================================================================
   CHEGADAS (só com JS, pra nada sumir se o script falhar)
   ========================================================================== */
html.js .revela {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--saida), transform 700ms var(--saida);
    transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .revela.chegou { opacity: 1; transform: none; }

/* Títulos e posters: o texto sobe de dentro de uma máscara */
.mascara {
    display: block;
    overflow: hidden;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}
.mascara__miolo { display: block; }
html.js .revela-mascara .mascara__miolo {
    transform: translateY(105%);
    transition: transform 900ms var(--saida);
    transition-delay: calc(var(--i, 0) * 140ms);
}
html.js .revela-mascara.chegou .mascara__miolo { transform: none; }

/* As marcas se desenham depois do texto que acompanham */
html.js .revela .marca,
html.js [data-faixa] .marca {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 600ms var(--saida);
    transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
html.js .chegou .marca { stroke-dashoffset: 0; }

/* ==========================================================================
   DOBRA 1 · HERO · Split Assimétrico (aprovada)
   ========================================================================== */
.hero__grade {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 40px var(--margem) 48px;
    display: grid;
    gap: 36px;
}

.hero__pre {
    font-size: 17px;
    color: var(--acento);
    margin-bottom: 18px;
}

.hero__titulo {
    font-family: var(--serifa);
    font-weight: 400;
    font-size: clamp(2.75rem, 1.25rem + 4.6vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.012em;
    color: var(--titulo);
    max-width: 13ch;
    text-wrap: balance;
}

.hero__sub {
    margin-top: 24px;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    line-height: 1.45;
    color: var(--texto);
    max-width: 30ch;
    text-wrap: pretty;
}

/* O vídeo e o bloco nude atrás dele, que sangra até a borda direita */
.hero__midia {
    position: relative;
    width: min(100%, 380px);
}

.hero__midia::before {
    content: '';
    position: absolute;
    top: 22%;
    bottom: -48px;
    left: 30%;
    right: calc(-1 * var(--sangria));
    background: var(--mogno);
}

/* Pós-carregamento: o bloco abre da direita pra esquerda. O texto e o vídeo
   já nascem no lugar, sem animação de entrada. */
html.js .hero__midia::before { clip-path: inset(0 0 0 100%); }
html.carregou .hero__midia::before {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.2s var(--curva) .15s;
}

.vsl {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: var(--cacau);
    overflow: hidden;
}

.vsl--pendente {
    display: grid;
    place-items: center;
    background: var(--superficie);
    border: 1px solid var(--madeira);
    color: var(--acento);
    font-size: 15px;
    text-align: center;
}

/* VSL horizontal (CONFIG.VSL_FORMATO = '16 / 9') */
html.vsl-horizontal .hero__midia { width: 100%; }
html.vsl-horizontal .vsl { aspect-ratio: 16 / 9; }

/* Desktop: a mesma coluna do celular, só maior. A VSL é vertical, então
   fica embaixo do título, nunca do lado (pedido do Victor, 13/10). */
@media (min-width: 960px) {
    .hero {
        /* Distância da borda direita da coluna (640px) até a borda da tela */
        --sangria: calc((100vw - min(100vw, 720px)) / 2 + 40px);
    }

    .hero__grade {
        max-width: 720px;
        gap: 40px;
        padding-top: 56px;
        padding-bottom: 96px;
    }

    .hero__pre { font-size: 18px; margin-bottom: 22px; }

    /* Um pouco menor que o máximo, pra VSL subir na primeira tela */
    .hero__titulo { font-size: 4rem; }

    .hero__sub { margin-top: 24px; }

    /* A mídia ocupa a coluna inteira; o vídeo fica alinhado à esquerda,
       com o texto, e o bloco nude sai de trás dele até a borda da tela */
    .hero__midia { width: 100%; }

    .vsl { height: min(78svh, 720px); width: auto; }

    .hero__midia::before {
        top: 14%;
        bottom: -96px;
        left: 42%;
    }

    html.vsl-horizontal .vsl { height: auto; width: 100%; }
}

/* ==========================================================================
   DOBRA 2 · O BOTÃO · Isolated Element (aprovada)
   ========================================================================== */
.acao { padding: 88px 0 80px; }

/* Convite: uma única passada do vermelho, depois que chega */
.botao--convite.chegou { animation: convite 1100ms var(--curva) 500ms 1; }

@keyframes convite {
    0% { background-size: 0% 100%; color: var(--tinta-neon); }
    50% { background-size: 100% 100%; color: #FFFFFF; }
    100% { background-size: 0% 100%; color: var(--tinta-neon); }
}

/* ==========================================================================
   FAIXA DAS MÁQUINAS · uma frase entre dois fios, sem selo nem logo
   ========================================================================== */
.maquinas { padding: 0 0 72px; }
.maquinas__linha {
    padding: 20px 0;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    color: var(--texto-suave);
}
.maquinas__nomes {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--texto);
}
.maquinas__nome { white-space: nowrap; }

/* ==========================================================================
   DOBRA 3 · ALGUMA DESSAS JÁ SAIU DA SUA BOCA? · Conversational (aprovada)
   ========================================================================== */
.conversa { padding: 88px 0 112px; }

.conversa .secao__titulo { max-width: 14ch; }

.chat {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat .balao--digitando,
.chat .balao--digitando + .balao--resposta { margin-top: 14px; }

.conversa__fim {
    margin-top: 56px;
    font-family: var(--serifa);
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    line-height: 1.2;
    color: var(--texto);
    text-wrap: balance;
}

.conversa__fim strong {
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--acento);
}

html.js [data-chat] .balao,
html.js .conversa__fim {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease-out, transform .45s ease-out;
}

html.js .conversa__fim { transition-duration: .7s; }

html.js [data-chat] .balao.chegou,
html.js .conversa__fim.chegou {
    opacity: 1;
    transform: none;
}

html.js [data-chat] .balao--digitando.chegou { display: flex; }
html.js [data-chat] .balao--digitando.saiu { display: none; }
html.js [data-chat] .balao--resposta:not(.chegou) { display: none; }

/* ==========================================================================
   DOBRA 4 · NO VÍDEO EU TE MOSTRO · Progressive Reveal
   ========================================================================== */
.capitulos {
    position: relative;
    margin-top: 40px;
}

.capitulo {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 16px;
    align-items: baseline;
    padding: 22px 0;
    font-family: var(--serifa);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    line-height: 1.25;
    color: var(--texto);
    text-wrap: pretty;
}

.capitulo .seta {
    color: var(--acento);
    transform: translateY(-2px);
}

/* Fios que crescem da esquerda */
.capitulo::before,
.capitulos::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--madeira);
    transform-origin: left;
}
.capitulo::before { top: 0; }
.capitulos::after { bottom: 0; }

html.js .capitulo::before {
    transform: scaleX(0);
    transition: transform 900ms var(--curva) calc(var(--i, 0) * 90ms);
}
html.js .capitulo.chegou::before { transform: scaleX(1); }

html.js .capitulos::after {
    transform: scaleX(0);
    transition: transform 900ms var(--curva) 450ms;
}
html.js .capitulos:has(.chegou)::after { transform: scaleX(1); }

/* Foco: a linha que passa pelo meio da tela acende; as outras recuam */
@supports (animation-timeline: view()) {
    html.js .capitulo__txt {
        animation: foco-texto linear both;
        animation-timeline: view();
        animation-range: cover 30% cover 70%;
    }
    html.js .capitulo .seta {
        animation: foco-seta linear both;
        animation-timeline: view();
        animation-range: cover 30% cover 70%;
    }
}

@keyframes foco-texto {
    0%, 100% { opacity: .45; color: var(--texto-suave); }
    35%, 65% { opacity: 1; color: var(--texto); }
}

@keyframes foco-seta {
    0%, 100% { color: var(--madeira); }
    35%, 65% { color: var(--texto); }
}

/* Sem timeline de rolagem: o script marca .em-foco */
html.js:not(.tem-timeline) .capitulo__txt {
    opacity: .45;
    color: var(--texto-suave);
    transition: opacity 400ms var(--saida), color 400ms var(--saida);
}
html.js:not(.tem-timeline) .capitulo .seta {
    color: var(--madeira);
    transition: color 400ms var(--saida);
}
html.js:not(.tem-timeline) .capitulo.em-foco .capitulo__txt { opacity: 1; color: var(--texto); }
html.js:not(.tem-timeline) .capitulo.em-foco .seta { color: var(--texto); }

@media (min-width: 960px) {
    .mostro__grade {
        display: grid;
        grid-template-columns: 5fr 7fr;
        column-gap: 64px;
        align-items: start;
    }

    .mostro__cabeca {
        position: sticky;
        top: 120px;
    }

    .capitulos { margin-top: 0; }

    /* Painel nude do lado do título, sangrando até a borda esquerda.
       Esmaece em cima e embaixo: nada de borda reta contra o fundo. */
    .mostro {
        position: relative;
        isolation: isolate;
    }

    .mostro::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: calc((100vw - min(100vw - 80px, 1200px)) / 2 + (min(100vw - 80px, 1200px) - 64px) * 5 / 12 + 32px);
        background: var(--mogno);
        -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent);
        mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent);
    }
}

/* ==========================================================================
   DOBRA 5 · MACA FRIA OU MACA PAGA? · Before/After
   ========================================================================== */
.comparar__abre {
    margin-top: 16px;
    font-size: 17px;
    color: var(--texto-suave);
}

.comparador-caixa {
    --larg-comp: 100%;
    --costura: calc((100% - var(--larg-comp)) / 2 + var(--corte-n, 50) * var(--larg-comp) / 100);
    position: relative;
    isolation: isolate;
    margin-top: 48px;
}

/* Faixa de ponta a ponta atrás da maca: cinza (fria) à esquerda, rosado
   (paga) à direita. A costura é o corte da foto continuando pelo fundo e
   acompanha o arrasto. Em cima e embaixo ela esmaece no fundo da página. */
.comparador-caixa::before {
    content: '';
    position: absolute;
    top: -48px;
    bottom: -48px;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--cinza-fundo) var(--costura), var(--vinho) var(--costura));
    -webkit-mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

@media (min-width: 600px) {
    .comparador-caixa { --larg-comp: min(760px, 100% - 2 * var(--margem)); }
    .comparador-caixa::before {
        top: 8%;
        bottom: 8%;
        -webkit-mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 80px), transparent);
        mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 80px), transparent);
    }
}

.comparador {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--superficie);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.comparador__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.comparador__img--fria { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }

.comparador__linha {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--corte);
    width: 1px;
    transform: translateX(-.5px);
    background: var(--marfim);
    box-shadow: 0 0 0 .5px rgba(46, 31, 26, .12);
    pointer-events: none;
}

.comparador__pega {
    position: absolute;
    top: 50%;
    left: var(--corte);
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: var(--marfim);
    border: 1px solid var(--madeira);
    pointer-events: none;
    transition: background-color 200ms;
}

.comparador__pega svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--vinho);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.comparador__rotulo {
    position: absolute;
    bottom: 16px;
    padding: 8px 12px;
    font-family: var(--serifa);
    font-size: 20px;
    line-height: 1.2;
    pointer-events: none;
    transition: opacity 200ms;
}

.comparador__rotulo--fria { left: 16px; background: var(--cinza-fundo); color: var(--cinza); }
.comparador__rotulo--paga { right: 16px; background: var(--vinho); color: var(--marfim); }
.comparador.sem-fria .comparador__rotulo--fria,
.comparador.sem-paga .comparador__rotulo--paga { opacity: 0; }

/* O range dá o teclado e o leitor de tela; o arrasto é do próprio quadro */
.comparador__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.comparador:has(.comparador__range:focus-visible) .comparador__pega {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

@media (hover: hover) {
    .comparador { cursor: ew-resize; }
    .comparador:hover .comparador__pega { background: var(--nude); }
}

/* Abertura: o painel abre de cima pra baixo */
html.js .comparador {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 900ms var(--curva);
}
html.js .comparador.chegou { clip-path: inset(0 0 0 0); }

@media (min-width: 600px) {
    .comparador-caixa { padding: 0 var(--margem); }
}

/* Tabela */
.comparativo {
    margin-top: 40px;
    width: 100%;
    table-layout: fixed;
    border: 1px solid var(--madeira);
    border-collapse: collapse;
}

.comparativo th {
    padding: 14px 16px;
    font-family: var(--serifa);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    border-bottom: 1px solid var(--madeira);
}

.comparativo th.fria { background: var(--cinza-fundo); color: var(--cinza); }
.comparativo th.paga { background: var(--vinho); color: var(--marfim); }

.comparativo td {
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.45;
    vertical-align: top;
    border-bottom: 1px solid var(--linha);
}

.comparativo tr:last-child td { border-bottom: 0; }

.comparativo td.fria { background: var(--cinza-fundo); color: var(--cinza); }

.comparativo td.paga {
    color: var(--marfim);
    font-weight: 600;
    background-image: linear-gradient(var(--vinho), var(--vinho));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

html.js .comparativo td.paga {
    background-size: 0% 100%;
    transition: background-size 600ms var(--curva) calc(var(--i, 0) * 90ms + 300ms);
}
html.js .linha-tabela.chegou td.paga { background-size: 100% 100%; }

.celula {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.celula .marca { margin-top: 1px; }

@media (min-width: 600px) {
    .comparativo td { font-size: 16px; }
}

/* Fecho */
.comparar__fim { margin-top: 56px; }
.comparar__fim > span { display: block; }
.comparar__muda { color: var(--acento); }

@media (min-width: 960px) {
    .comparar__fim > span:not(.comparar__muda) { display: inline-block; }
}

/* ==========================================================================
   DOBRA 6 · ELAS ESTAVAM ONDE VOCÊ TÁ · Scroll Horizontal
   ========================================================================== */
.alunas { padding-top: 88px; }

.trilho-janela {
    margin-top: 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem);
    scrollbar-width: none;
}
.trilho-janela::-webkit-scrollbar { display: none; }

.trilho {
    display: flex;
    gap: 16px;
    padding: 8px var(--margem) 24px;
}

.trilho::after {
    content: '';
    flex: 0 0 4px;
}

.print {
    flex: 0 0 78%;
    scroll-snap-align: start;
}

.print__quadro {
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    box-shadow: var(--sombra-mesa);
    cursor: zoom-in;
    appearance: none;
}

.print__quadro:disabled { cursor: default; }

.print__quadro:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

.print__quadro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.print figcaption {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
}

.print figcaption strong { font-weight: 700; }

.progresso {
    position: relative;
    width: 120px;
    height: 1px;
    margin-top: 8px;
    background: rgba(246, 239, 231, .25);
    overflow: hidden;
}

.progresso__barra {
    position: absolute;
    inset: 0;
    background: var(--marfim);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
}

.alunas__texto {
    margin-top: 56px;
    padding-bottom: 104px;
}

.fala .balao {
    width: fit-content;
    max-width: 92%;
}

.fala__legenda {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--texto);
}

.alunas__frase { margin-top: 48px; }

.alunas__nota {
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--texto);
}

/* Print ampliado */
.luz {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.luz[open] {
    display: grid;
    place-items: center;
    animation: luz-abre 300ms var(--saida);
}

.luz::backdrop { background: rgba(46, 31, 26, .88); }

.luz__img {
    max-width: 92vw;
    max-height: 90svh;
    width: auto;
    height: auto;
}

.luz__fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 10px;
    background: transparent;
    border: 0;
    color: var(--marfim);
    font: 600 15px/1 var(--sans);
    cursor: pointer;
}

.luz__fechar:focus-visible { outline: 2px solid var(--marfim); outline-offset: 2px; }

@keyframes luz-abre {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 960px) {
    .alunas { padding-top: 128px; }
    .alunas__texto { padding-bottom: 144px; }
    .print figure { rotate: -1.2deg; }
    .print:nth-child(even) figure { rotate: 1deg; }
    .progresso { width: 160px; margin-top: 32px; }

    /* A dobra prende e os prints correm de lado */
    html.js:not(.reduzido) .alunas__palco { height: 260vh; }

    html.js:not(.reduzido) .alunas__preso {
        position: sticky;
        top: 0;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    html.js:not(.reduzido) .trilho-janela {
        overflow: visible;
        scroll-snap-type: none;
    }

    html.js:not(.reduzido) .trilho {
        width: max-content;
        gap: 40px;
        padding: 8px max(40px, calc((100vw - var(--largura)) / 2 + 40px)) 24px;
        transform: translateX(var(--x, 0px));
        will-change: transform;
    }

    .print {
        flex: 0 0 auto;
        width: min(clamp(260px, 22vw, 320px), calc((100svh - 300px) * 9 / 16));
    }
}

/* ==========================================================================
   DOBRA 7 · QUEM SOU EU · Editorial
   ========================================================================== */
.quem__foto {
    --bloco: -16px 16px 0 var(--mogno);   /* bloco nude deslocado, eco do topo */
    position: relative;
    margin-top: 32px;
    margin-right: calc(-1 * var(--margem));
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: var(--bloco);
}

.quem__foto-miolo {
    width: 100%;
    height: 100%;
}

.quem__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    filter: saturate(.92) contrast(1.02);
    /* A foto da Dany tem fundo escuro: a base esmaece no fundo da página,
       pra o nome que invade a foto ficar sobre tom claro e legível */
    -webkit-mask-image: linear-gradient(#000 62%, transparent 96%);
    mask-image: linear-gradient(#000 62%, transparent 96%);
}

/* O recorte fica no miolo: um elemento todo recortado não conta como
   visível pro IntersectionObserver, e a abertura nunca dispararia */
html.js .quem__foto-miolo {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1100ms var(--curva);
}
html.js .quem__foto img {
    transform: scale(1.08);
    transition: transform 1100ms var(--curva);
}
html.js .quem__foto.chegou .quem__foto-miolo { clip-path: inset(0 0 0 0); }
html.js .quem__foto.chegou img { transform: none; }

/* O bloco nude chega depois que a foto abre */
html.js .quem__foto {
    box-shadow: 0 0 0 var(--mogno);
    transition: box-shadow 600ms var(--saida) 700ms;
}
html.js .quem__foto.chegou { box-shadow: var(--bloco); }

.quem__nome {
    position: relative;
    z-index: 1;
    margin-top: -.55em;
    font-family: var(--serifa);
    font-size: clamp(3rem, 1.5rem + 6.5vw, 7rem);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--titulo);
}

html.js .quem__nome .mascara__miolo { transition-delay: 200ms; }

.fatos { margin-top: 32px; position: relative; }

.fato {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: baseline;
    padding: 18px 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--texto);
}

.fato__num {
    display: flex;
    justify-content: center;
    min-width: 2.4ch;
    font-family: var(--serifa);
    font-size: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
    line-height: 1;
    color: var(--acento);
    font-variant-numeric: lining-nums;
}

.fato__num .marca { color: var(--acento); }

.fato__txt strong { font-weight: 600; }

.fato__inline {
    display: inline-block;
    min-width: 2.9ch;
    font-family: var(--serifa);
    font-size: 1.4em;
    line-height: 1;
    color: var(--acento);
    text-align: right;
}

.fato::before,
.fatos::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--madeira);
    transform-origin: left;
}
.fato::before { top: 0; }
.fatos::after { bottom: 0; }

html.js .fato::before {
    transform: scaleX(0);
    transition: transform 900ms var(--curva) calc(var(--i, 0) * 90ms);
}
html.js .fato.chegou::before { transform: scaleX(1); }
html.js .fatos::after {
    transform: scaleX(0);
    transition: transform 900ms var(--curva) 360ms;
}
html.js .fatos:has(.chegou)::after { transform: scaleX(1); }

.citacao {
    position: relative;
    margin-top: 48px;
    padding-left: 24px;
    font-family: var(--serifa);
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
    line-height: 1.3;
    color: var(--texto);
    text-wrap: pretty;
}

.citacao::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--madeira);
    transform-origin: top;
}

html.js .citacao { transition-duration: 900ms; }
html.js .citacao::before {
    transform: scaleY(0);
    transition: transform 900ms var(--curva);
}
html.js .citacao.chegou::before { transform: scaleY(1); }

.citacao__destaque { color: var(--acento); }

@media (min-width: 960px) {
    .quem__grade {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 32px;
    }

    .quem__foto {
        --bloco: 28px 28px 0 var(--mogno);
        grid-column: 1 / 6;
        grid-row: 1 / 4;
        margin: 0;
        align-self: start;
    }

    /* No desktop o nome invade pela direita: a lateral também esmaece */
    .quem__foto img {
        -webkit-mask-image: linear-gradient(#000 62%, transparent 96%), linear-gradient(to right, #000 70%, transparent 98%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(#000 62%, transparent 96%), linear-gradient(to right, #000 70%, transparent 98%);
        mask-composite: intersect;
    }

    .quem__titulo {
        grid-column: 7 / 13;
        grid-row: 1;
        align-self: end;
    }

    .quem__nome {
        grid-column: 5 / 13;
        grid-row: 2;
        margin-top: 24px;
    }

    .fatos {
        grid-column: 7 / 13;
        grid-row: 3;
        margin-top: 40px;
        align-self: start;
    }

    .citacao {
        grid-column: 2 / 12;
        grid-row: 4;
        margin-top: 96px;
        padding-left: 32px;
    }
}

/* ==========================================================================
   DOBRA 8 · O QUE VOCÊ RECEBE · Card Stack
   ========================================================================== */
.pilha { margin-top: 48px; }

.cartao {
    position: sticky;
    top: calc(72px + var(--i) * 10px);
    min-height: 340px;
    margin-bottom: 24px;
    padding: 28px 22px;
    background: var(--superficie);
    border: 1px solid var(--linha);
    box-shadow: var(--sombra-cartao);
    transform-origin: 50% 0;
}

.cartao:nth-child(even) { background: var(--superficie-2); }

.cartao__miolo {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
}

.cartao__n {
    font-family: var(--serifa);
    font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    line-height: .85;
    color: var(--madeira);
    transition: color 400ms var(--saida);
}

.cartao.preso .cartao__n { color: var(--texto); }

.cartao h3 {
    font-family: var(--serifa);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--titulo);
    text-wrap: balance;
}

.cartao__pra {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
    align-items: baseline;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--texto);
}

.cartao__pra .seta { color: var(--acento); }

/* Foto do certificado no cartão 7 (pedido da Dany, 16/10) */
.cartao__foto {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin-top: 20px;
    box-shadow: var(--sombra-cartao);
}

.cartao__desc {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto-suave);
}

.cartao--bonus {
    min-height: 0;
    background: var(--vinho);
    border-color: var(--vinho);
    color: var(--marfim);
    isolation: isolate;
}

/* Fundo vinho numa camada própria: é ela que abre, o cartão nunca fica
   todo recortado (o observer precisa enxergar o cartão) */
.cartao--bonus::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--vinho);
}

.cartao--bonus .cartao__miolo { grid-template-columns: 1fr; }

.cartao--bonus p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--marfim);
}

.cartao--bonus strong {
    font-weight: 700;
    color: var(--rosado);
}

html.js .cartao--bonus {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: box-shadow 300ms 900ms;
}
html.js .cartao--bonus::before {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 900ms var(--curva);
}
html.js .cartao--bonus p {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms var(--saida) 450ms, transform 700ms var(--saida) 450ms;
}
html.js .cartao--bonus.chegou { box-shadow: var(--sombra-cartao); }
html.js .cartao--bonus.chegou::before { clip-path: inset(0 0 0 0); }
html.js .cartao--bonus.chegou p { opacity: 1; transform: none; }

.acesso {
    margin-top: 56px;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto-suave);
}

.acesso strong { color: var(--texto); }

/* Recuo: o cartão de baixo recua enquanto o próximo sobe por cima */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
    .pilha { timeline-scope: --c1, --c2, --c3, --c4, --c5, --c6, --c7, --c8; }
    .cartao:nth-child(1) { view-timeline-name: --c1; }
    .cartao:nth-child(2) { view-timeline-name: --c2; }
    .cartao:nth-child(3) { view-timeline-name: --c3; }
    .cartao:nth-child(4) { view-timeline-name: --c4; }
    .cartao:nth-child(5) { view-timeline-name: --c5; }
    .cartao:nth-child(6) { view-timeline-name: --c6; }
    .cartao:nth-child(7) { view-timeline-name: --c7; }
    .cartao:nth-child(8) { view-timeline-name: --c8; }

    html.js .cartao:not(:last-child) {
        animation: recua linear both;
        animation-range: entry 0% entry 100%;
    }
    html.js .cartao:nth-child(1) { animation-timeline: --c2; }
    html.js .cartao:nth-child(2) { animation-timeline: --c3; }
    html.js .cartao:nth-child(3) { animation-timeline: --c4; }
    html.js .cartao:nth-child(4) { animation-timeline: --c5; }
    html.js .cartao:nth-child(5) { animation-timeline: --c6; }
    html.js .cartao:nth-child(6) { animation-timeline: --c7; }
    html.js .cartao:nth-child(7) { animation-timeline: --c8; }
}

@keyframes recua {
    from { transform: none; filter: brightness(1); }
    to { transform: scale(.94); filter: brightness(.97); }
}

@media (min-width: 600px) {
    .cartao { padding: 36px 40px; }
}

@media (min-width: 960px) {
    .cartao {
        top: calc(88px + var(--i) * 14px);
        min-height: 300px;
        padding: 48px 56px;
    }
    .cartao--bonus { min-height: 0; }
    .cartao__miolo { column-gap: 40px; }
}

/* ==========================================================================
   DOBRA 9 · O PREÇO · Spotlight (a única dobra escura)
   ========================================================================== */
/* Sem fundo próprio: o fundo da página escurece até cacau (script.js) */
.preco {
    position: relative;
    padding: 104px 0 120px;
    color: var(--marfim);
}

.preco .secao__titulo { color: var(--nude); }

.preco__topo { position: relative; }

/* Fio de luz: do topo da dobra até o preço */
.preco__luz {
    position: absolute;
    left: -12px;
    top: -104px;
    bottom: 0;
    width: 1px;
    background: var(--madeira);
    transform-origin: top;
}

html.js .preco__luz {
    transform: scaleY(0);
    transition: transform 1400ms var(--curva);
}
html.js .preco.luz-acesa .preco__luz { transform: scaleY(1); }

.ancoras { margin-top: 40px; }

.ancoras li {
    padding: 16px 0;
    border-top: 1px solid var(--cacau-borda);
    font-size: 17px;
    line-height: 1.55;
    color: var(--nude);
}

.ancoras li:last-child { border-bottom: 1px solid var(--cacau-borda); }

.ancoras strong { color: var(--marfim); }

.preco__aqui {
    margin-top: 56px;
    font-size: 18px;
    color: var(--madeira);
}

.preco__valor {
    margin-top: 8px;
    font-family: var(--serifa);
    font-size: clamp(3.25rem, 1.5rem + 7.5vw, 9.5rem);
    line-height: .95;
    letter-spacing: -.025em;
    color: var(--marfim);
}

.preco__12x {
    font-size: .42em;
    vertical-align: .35em;
    letter-spacing: 0;
    color: var(--madeira);
}

.preco__num { white-space: nowrap; }

.preco__sobra {
    margin-top: 20px;
    font-size: 20px;
    line-height: 1.45;
    color: var(--nude);
}

.preco .linha-pequena { color: var(--madeira); }
.preco .botao:focus-visible { outline-color: var(--marfim); }

@media (min-width: 960px) {
    .preco { padding: 152px 0 168px; }
    .preco__luz { left: -40px; top: -152px; }
    .ancoras li { font-size: 18px; }
}

/* ==========================================================================
   DOBRA 10 · GARANTIA DUPLA · Framed Content
   ========================================================================== */
.termo {
    position: relative;
    margin-top: 40px;
    padding: 40px 28px;
}

.termo__fio {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.termo__fio--fora { top: 0; left: 0; width: 100%; height: 100%; }
.termo__fio--dentro { top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }

.termo__fio rect {
    fill: none;
    stroke: var(--madeira);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

html.js .termo__fio rect {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1600ms var(--curva);
}
html.js .termo__fio--dentro rect { transition-delay: 200ms; }
html.js .termo.chegou .termo__fio rect { stroke-dashoffset: 0; }

.clausula { position: relative; }

.clausula + .clausula {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--linha);
}

.clausula__num {
    display: block;
    font-family: var(--serifa);
    font-size: clamp(5rem, 3.5rem + 6vw, 8.5rem);
    line-height: .9;
    color: var(--acento);
}

.clausula__txt {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--texto);
}

.clausula__txt strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--acento);
}

.garantia__entra {
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--texto-suave);
}

.garantia__fim {
    margin-top: 12px;
    font-family: var(--serifa);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    line-height: 1.1;
    color: var(--titulo);
}

html.js .garantia__fim .mascara__miolo { transition-delay: 300ms; }

@media (min-width: 960px) {
    .termo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 56px;
        padding: 56px 64px;
    }

    .clausula + .clausula {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .clausula + .clausula::before {
        content: '';
        position: absolute;
        left: -28px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--linha);
    }
}

/* ==========================================================================
   DOBRA 11 · AS 2 DATAS QUE SÃO REAIS · Split Horizontal
   ========================================================================== */
.datas { padding-top: 88px; }

.datas__sub {
    margin-top: 14px;
    font-size: 17px;
    color: var(--texto-suave);
}

.faixas { margin-top: 48px; }

.faixa {
    position: relative;
    isolation: isolate;
    padding: 48px 0;
}

/* O fundo da faixa é uma camada própria: é ela que entra de lado */
.faixa::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
}

.faixa--quente::before { background: var(--mogno); }

/* A faixa de baixo encosta no fim da dobra: esmaece no fundo, sem borda reta */
.faixa--quieta { padding-bottom: 96px; }
.faixa--quieta::before {
    background: var(--superficie);
    border-top: 1px solid var(--madeira);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 120px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 120px), transparent);
}

.faixa__linha {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 16px;
    align-items: baseline;
}

.faixa p {
    font-family: var(--serifa);
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.3;
    text-wrap: pretty;
}

.faixa strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--sans);
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
}

.faixa--quente p { color: var(--texto); }
.faixa--quente strong,
.faixa--quente .seta { color: var(--texto); }

.faixa--quieta p,
.faixa--quieta strong { color: var(--texto-suave); }
.faixa--quieta .seta { color: var(--acento); }

html.js .faixa--quente::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1000ms var(--curva);
}
html.js .faixa--quieta::before {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1000ms var(--curva) 300ms;
}
html.js .faixa.chegou::before { clip-path: inset(0 0 0 0); }

html.js .faixa p {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--saida) 250ms, transform 700ms var(--saida) 250ms;
}
html.js .faixa--quieta p { transition-delay: 550ms; }
html.js .faixa.chegou p { opacity: 1; transform: none; }

@media (min-width: 960px) {
    .datas { padding-top: 128px; }
    .faixa { padding: 72px 0; }
    .faixa--quieta { padding-bottom: 128px; }
    .faixa__linha {
        grid-template-columns: 48px 1fr;
        max-width: 900px;
    }
}

/* ==========================================================================
   DOBRA 12 · PERGUNTAS · Reveal on Demand
   ========================================================================== */
.faq {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq summary {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 85%;
    padding-right: 44px;
    list-style: none;
    cursor: pointer;
    transition: border-color 200ms;
}

.faq summary::-webkit-details-marker { display: none; }

.faq details[open] summary { border-color: var(--madeira); }

.faq summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

@media (hover: hover) {
    .faq summary:hover { border-color: var(--madeira); }
}

/* "+" desenhado que gira e vira "×" */
.faq__sinal {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    transition: transform 300ms var(--saida);
}

.faq__sinal::before,
.faq__sinal::after {
    content: '';
    position: absolute;
    background: var(--acento);
}

.faq__sinal::before { left: 0; top: 5.25px; width: 12px; height: 1.5px; }
.faq__sinal::after { left: 5.25px; top: 0; width: 1.5px; height: 12px; }

.faq details[open] .faq__sinal { transform: rotate(45deg); }

.faq__r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 8px;
}

.faq__resposta { max-width: 88%; }

.faq__r .balao--digitando { display: none; }
.faq__r.digitando .balao--digitando { display: flex; }

html.js .faq__r:not(.respondeu) .faq__resposta { display: none; }
html.js .faq__resposta {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms var(--saida), transform 400ms var(--saida);
}
html.js .faq__r.visivel .faq__resposta { opacity: 1; transform: none; }
html.js .faq__r.fechando .faq__resposta { transition-duration: 200ms; }

/* ==========================================================================
   DOBRA 13 · FECHAMENTO · Poster
   ========================================================================== */
.caminho {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 14px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--madeira);
    font-size: 18px;
    line-height: 1.5;
}

.caminho:last-child { border-bottom: 1px solid var(--madeira); }

.caminho--nao { color: var(--texto-suave); }
.caminho--sim { color: var(--texto); font-weight: 600; }
.caminho--sim .marca { color: var(--acento); }

.fecho__maca {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1 / 1;
    margin: 40px auto 8px;
    /* Foto real (16/10): entra quadrada, como no comparador. O esfumado redondo era da maca 3D. */
    overflow: hidden;
}

.fecho__video,
.fecho__parada {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fecho__video { cursor: pointer; }
.fecho__parada { display: none; }

.fecho__linha {
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--texto-suave);
}

.fecho__linha--forte { color: var(--texto); }

.fecho__pergunta {
    margin-top: 24px;
    font-family: var(--serifa);
    font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
    line-height: 1.08;
    color: var(--texto);
    text-wrap: balance;
}

.fecho__voce { color: var(--acento); }

@media (min-width: 960px) {
    /* A pergunta pode passar da coluna estreita, até 760px */
    .fecho__pergunta { margin-right: -200px; }
}

/* ==========================================================================
   DADOS LEGAIS ABAIXO DO VÍDEO · visíveis desde o início
   ========================================================================== */
/* Começa depois do bloco mogno, que desce 48px (celular) e 96px (desktop)
   abaixo do vídeo */
.legal-topo {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 68px;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.legal-topo p + p { margin-top: 2px; }

.legal-topo__marca {
    font-weight: 700;
    color: var(--texto);
}

.legal-topo__empresa { text-transform: none; letter-spacing: 0.02em; }

.legal-topo__docs a { color: inherit; text-decoration: none; }
.legal-topo__docs a + a { margin-left: 18px; }
.legal-topo__docs a[href]:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 960px) {
    .legal-topo { margin-top: 120px; }
}

/* ==========================================================================
   RODAPÉ · Minimal
   ========================================================================== */
.rodape {
    padding: 40px 0 56px;
    border-top: 1px solid var(--madeira);
    font-size: 14px;
    line-height: 1.6;
    color: var(--texto-suave);
    text-align: center;
}

.rodape p + p { margin-top: 8px; }

.rodape a { text-decoration: none; }

.rodape a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rodape a:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.rodape__docs a + a { margin-left: 16px; }
.rodape__docs:not(:has(a:not([hidden]))) { display: none; }

/* ==========================================================================
   /PARCELA-URGENCIA · a barra do topo e o "pessoas assistindo"
   O resto é a /parcela, sem mudar nada.
   ========================================================================== */
.barra-urgencia {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 10px var(--margem);
    background: var(--urgencia);
    color: #FFFFFF;                 /* 6,6:1 sobre o vermelho */
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.assistindo {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    font-size: 14px;
    color: var(--texto-suave);
    text-align: center;
}
.assistindo:empty { display: none; }

/* ==========================================================================
   MOVIMENTO REDUZIDO: tudo no lugar, sem chegada
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html.js .hero__midia::before { clip-path: none; transition: none; }

    html.js .revela,
    html.js [data-chat] .balao,
    html.js .conversa__fim,
    html.js .faixa p,
    html.js .faq__resposta { opacity: 1; transform: none; transition: none; }

    html.js .revela-mascara .mascara__miolo { transform: none; transition: none; }
    html.js .revela .marca,
    html.js [data-faixa] .marca { stroke-dashoffset: 0; transition: none; }

    html.js .capitulo::before,
    html.js .capitulos::after,
    html.js .fato::before,
    html.js .fatos::after,
    html.js .citacao::before,
    html.js .preco__luz { transform: none; transition: none; }

    html.js .comparador,
    html.js .quem__foto-miolo,
    html.js .cartao--bonus::before,
    html.js .faixa::before,
    html.js .preco { clip-path: none; transition: none; animation: none; }
    html.js .cartao--bonus p { opacity: 1; transform: none; transition: none; }

    html.js .quem__foto img { transform: none; transition: none; }
    html.js .quem__foto { box-shadow: var(--bloco); transition: none; }
    html.js .comparativo td.paga { background-size: 100% 100%; transition: none; }
    html.js .termo__fio rect { stroke-dashoffset: 0; transition: none; }
    html.js .capitulo__txt,
    html.js .capitulo .seta { animation: none; opacity: 1; color: inherit; }
    html.js .capitulo .seta { color: var(--acento); }
    html.js .cartao { animation: none; }

    html.js [data-chat] .balao--resposta:not(.chegou) { display: block; }
    .balao--digitando i { animation: none; }
    .botao,
    .botao--convite.chegou { transition: none; animation: none; }

    .fecho__video { display: none; }
    .fecho__parada { display: block; }
}