/* Landing v2 — tour guiado por scroll.
   Conceito diferente da v1: em vez de destacar uma funcionalidade, um aparelho
   fixo troca de tela conforme o visitante desce a pagina. Ele ve a plataforma
   inteira em sequencia (trilha, feed, questoes, armadilhas, SophIA, progresso)
   sem clicar em nada.
   Regra que governa o conteudo: so entra aqui o que existe no produto. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.v2 {
    --papel: #faf9f7;
    --papel-2: #f2f0ec;
    --linha: #e3e0da;
    --tinta: #14142b;
    --tinta-2: #4b4b5b;
    --tinta-3: #8a8a9a;
    --roxo: var(--fxm-purple);
    --verde: var(--fxm-green);
    /* Altura do cabecalho fixo. O palco do tour gruda logo abaixo dela; se as
       duas saem de sincronia, o aparelho fica cortado ou flutuando. */
    --topo: 58px;

    font-family: var(--fxm-font);
    /* Trava horizontal: qualquer elemento que estoure a largura vira barra de
       rolagem lateral no celular, que e o defeito mais visivel de todos. */
    overflow-x: hidden;
    background: var(--papel);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

.v2 a { text-decoration: none; color: inherit; }
.v2 img { max-width: 100%; }

.v2-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; }

/* ---------------- botoes ---------------- */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* cor declarada em todos os estados: `.v2 a` herdaria a cor do texto e o
   botao sairia sem contraste. */
.v2-btn--solido,
.v2-btn--solido:link,
.v2-btn--solido:visited,
.v2-btn--solido:hover,
.v2-btn--solido:active {
    background: var(--tinta);
    color: #fff;
    box-shadow: 0 10px 26px rgba(20, 20, 43, .22);
}
.v2-btn--solido:hover { transform: translateY(-2px); }

.v2-btn--linha,
.v2-btn--linha:link,
.v2-btn--linha:visited {
    background: transparent;
    color: var(--tinta);
    border: 1.5px solid var(--linha);
}
.v2-btn--linha:hover { border-color: var(--tinta); }

.v2-btn--pequeno { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* ---------------- topo ---------------- */

.v2-topo {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(250, 249, 247, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linha);
}
.v2-topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--topo);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ---------------- hero ---------------- */

.v2-hero { padding: 68px 0 76px; text-align: center; }

.v2-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tinta-2);
}
.v2-selo b {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.v2-hero__titulo {
    margin: 22px auto 0;
    max-width: 30ch;
    /* Reduzida em relacao a versao anterior (era 38-76px): headline de duas
       linhas curtas nao pode competir em peso com o resto da pagina -- e o
       ponto focal, mas nao pode dominar a tela. */
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.16;
    letter-spacing: -.02em;
    font-weight: 800;
}
/* Sem destaque de fundo: com duas linhas do mesmo peso, um highlight em
   bloco (gradiente/underline) sobre uma linha inteira fica pesado. Regra
   mantida no arquivo, so sem uso -- volta a servir se um A/B quiser destacar
   so um trecho curto de novo. */
.v2-hero__titulo em {
    font-style: normal;
    background: linear-gradient(180deg, transparent 62%, rgba(47, 92, 236, .22) 62%);
}

.v2-hero__sub {
    margin: 24px auto 0;
    max-width: 50ch;
    font-size: 18px;
    line-height: 1.6;
    color: var(--tinta-2);
}

.v2-hero__acoes {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.v2-hero__nota { margin-top: 16px; font-size: 13.5px; color: var(--tinta-3); font-weight: 600; }

/* ---------------- como funciona (4 passos curtos) ----------------
   Diferente de `.v2-passos` (o tour la embaixo, que mostra a plataforma
   inteira): esta secao e so o mecanismo -- microcards + ordem que reage ao
   desempenho -- em texto curto, escaneavel em segundos, logo apos o hero. */

.v2-mecanismo { padding: 12px 0 56px; }

.v2-passos-curtos {
    list-style: none;
    margin-top: 30px;
    display: grid;
    gap: 14px;
}

.v2-passo-curto {
    padding: 20px 18px;
    border: 1px solid var(--linha);
    border-radius: 16px;
    background: #fff;
}
.v2-passo-curto__num {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tinta);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
}
.v2-passo-curto h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.v2-passo-curto p { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }

/* ---------------- tour ---------------- */

.v2-tour { padding: 8px 0 40px; }

.v2-tour__grade { display: grid; gap: 0; }

/* O aparelho gruda no topo e as secoes de texto passam por baixo. E o que
   permite mostrar seis telas do produto sem seis capturas empilhadas. */
.v2-palco {
    position: sticky;
    top: var(--topo);
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 12px 0 16px;
    /* Opaco de proposito: o texto do passo passa POR BAIXO do palco. Com o
       gradiente transparente que havia aqui, ele reaparecia sobre o aparelho. */
    background: var(--papel);
}
/* sombra curta marcando onde o conteudo some por baixo */
.v2-palco::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -14px;
    height: 14px;
    background: linear-gradient(180deg, var(--papel), transparent);
    pointer-events: none;
}

.v2-fone {
    position: relative;
    width: min(280px, 72vw);
    /* 40dvh + topo + respiro ~= 52% da tela; sobra ~48% para o texto do passo,
       que e o que `.v2-passo` reserva abaixo. As duas contas andam juntas. */
    height: min(430px, 40dvh);
    border-radius: 30px;
    background: var(--tinta);
    padding: 9px;
    box-shadow: 0 26px 60px rgba(20, 20, 43, .26);
}
.v2-fone__tela {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
}

.v2-tela {
    position: absolute;
    inset: 0;
    padding: 16px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
    overflow: hidden;
}
.v2-tela.is-ativa { opacity: 1; transform: none; }

.v2-tela__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-3);
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* ------- passos do tour ------- */

.v2-passos { display: grid; }

.v2-passo {
    /* Menor que a area livre abaixo do palco (~48dvh): passo mais alto que o
       espaco disponivel fica cortado no meio da leitura. */
    min-height: 44dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 0;
    scroll-margin-top: calc(var(--topo) + 44dvh);
}

.v2-passo__num {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--roxo);
    margin-bottom: 12px;
}
.v2-passo__titulo {
    font-size: clamp(25px, 5.6vw, 36px);
    line-height: 1.14;
    letter-spacing: -.028em;
    font-weight: 800;
    max-width: 17ch;
    text-wrap: balance;
}
.v2-passo__texto {
    margin-top: 14px;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--tinta-2);
    max-width: 46ch;
}
.v2-passo__onde {
    margin-top: 16px;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta-3);
}
.v2-passo__onde b { color: var(--tinta); font-weight: 800; }

/* ---------------- telas do aparelho ---------------- */

/* trilha */
.v2-trilha { display: grid; gap: 7px; }
.v2-trilha__etapa {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 1px solid #eceaf4;
    border-radius: 11px;
}
.v2-trilha__etapa.is-atual { border-color: var(--roxo); background: #f4f6ff; }
.v2-trilha__orb {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #eceaf4;
    color: var(--tinta-3);
    font-size: 10px; font-weight: 900;
}
.v2-trilha__etapa.is-feita .v2-trilha__orb { background: #e4f8ed; color: var(--verde); }
.v2-trilha__etapa.is-atual .v2-trilha__orb { background: var(--roxo); color: #fff; }
.v2-trilha__txt { min-width: 0; }
.v2-trilha__txt b { display: block; font-size: 11.5px; line-height: 1.25; }
.v2-trilha__txt span { font-size: 9.5px; color: var(--tinta-3); font-weight: 700; }

/* microcard */
.v2-card-lei { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.v2-card-lei__ref { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.v2-card-lei__t { margin-top: 12px; font-size: 22px; line-height: 1.18; letter-spacing: -.02em; font-weight: 700; }
.v2-card-lei__t b { font-weight: 900; }
.v2-card-lei__p { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.v2-card-lei__seta { margin-top: auto; font-size: 11px; font-weight: 800; color: var(--tinta-3); }

/* questao -- clicavel: e o ponto da demo onde o algoritmo reage de verdade */
.v2-questao__enunciado { font-size: 12.5px; line-height: 1.45; font-weight: 600; }
.v2-questao__opcoes { display: grid; gap: 6px; margin-top: 4px; }
.v2-questao__op {
    width: 100%;
    padding: 9px 10px;
    border: 1.5px solid #eceaf4;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--tinta-2);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.v2-questao__op:hover:not(:disabled) { border-color: var(--roxo); }
.v2-questao__op:disabled { cursor: default; }
.v2-questao__op.is-certa { border-color: var(--verde); background: #e4f8ed; color: #0f7a48; font-weight: 800; }
.v2-questao__op.is-errada { border-color: #e8b4bd; background: #fdebee; color: #a3283a; font-weight: 800; }
.v2-questao__banca { margin-top: auto; font-size: 9.5px; font-weight: 800; color: var(--tinta-3); }

/* painel que aparece apos a resposta -- a prova visual de que a ordem muda */
.v2-recalculo {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 11px;
    border-radius: 10px;
    background: var(--papel-2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.v2-recalculo.is-visivel { opacity: 1; transform: none; }
.v2-recalculo__seta {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--roxo);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.v2-recalculo.is-baixa .v2-recalculo__seta { background: var(--verde); transform: rotate(180deg); }
.v2-recalculo b { display: block; font-size: 10.5px; font-weight: 900; }
.v2-recalculo p { margin-top: 2px; font-size: 10px; line-height: 1.4; color: var(--tinta-2); }

/* armadilha */
.v2-armadilha__lei {
    padding: 11px;
    border-radius: 10px;
    background: var(--papel-2);
    font-size: 12px;
    line-height: 1.55;
    color: var(--tinta-2);
}
.v2-armadilha__lei mark {
    background: #fdebee;
    color: #a3283a;
    font-weight: 800;
    border-radius: 3px;
    padding: 0 2px;
}
.v2-armadilha__aviso {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px;
    border-radius: 10px;
    background: #fdf0dc;
    font-size: 11px;
    line-height: 1.45;
    color: #8a5a06;
    font-weight: 600;
}

/* SophIA */
.v2-chat { display: grid; gap: 8px; align-content: start; }
.v2-chat__bolha {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 13px;
    font-size: 11.5px;
    line-height: 1.45;
}
.v2-chat__bolha--aluno { justify-self: end; background: var(--tinta); color: #fff; border-bottom-right-radius: 4px; }
.v2-chat__bolha--ia { background: var(--papel-2); color: var(--tinta-2); border-bottom-left-radius: 4px; }
.v2-chat__quem {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 900; letter-spacing: .08em;
    text-transform: uppercase; color: var(--roxo);
}
.v2-chat__quem i {
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--roxo), #7a5cf0);
    display: inline-block;
}

/* progresso */
.v2-prog { display: grid; gap: 9px; }
.v2-prog__linha { display: grid; gap: 4px; }
.v2-prog__linha span { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; color: var(--tinta-2); }
.v2-prog__barra { height: 7px; border-radius: 999px; background: #eceaf4; overflow: hidden; }
.v2-prog__barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--roxo), var(--verde)); }
.v2-prog__erros {
    margin-top: 4px;
    padding: 10px;
    border: 1px dashed var(--linha);
    border-radius: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--tinta-2);
}
.v2-prog__erros b { display: block; font-size: 11px; color: var(--tinta); margin-bottom: 3px; }

/* ---------------- inventario honesto ---------------- */

.v2-secao { padding: 76px 0; }
.v2-secao--papel { background: var(--papel-2); border-block: 1px solid var(--linha); }

.v2-secao__rotulo {
    font-size: 11px; font-weight: 900; letter-spacing: .16em;
    text-transform: uppercase; color: var(--roxo); margin-bottom: 12px;
}
.v2-secao__titulo {
    font-size: clamp(27px, 5.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 800;
    max-width: 20ch;
    text-wrap: balance;
}
.v2-secao__sub {
    margin-top: 16px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--tinta-2);
    max-width: 56ch;
}

.v2-lista { list-style: none; margin-top: 34px; display: grid; gap: 0; }
.v2-lista li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid var(--linha);
}
.v2-lista li:last-child { border-bottom: 1px solid var(--linha); }
.v2-lista__ok {
    width: 22px; height: 22px; margin-top: 1px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #e4f8ed; color: var(--verde);
    font-size: 11px; font-weight: 900;
}
.v2-lista b { font-size: 16px; font-weight: 800; }
.v2-lista p { margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }

.v2-recado {
    margin-top: 30px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--linha);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tinta-2);
}
.v2-recado b { color: var(--tinta); }

/* ---------------- planos ---------------- */

.v2-planos { margin-top: 34px; display: grid; gap: 14px; }

.v2-plano {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 22px;
    border: 1px solid var(--linha);
    border-radius: 20px;
    background: #fff;
}
.v2-plano--destaque { border-color: var(--tinta); border-width: 2px; }
.v2-plano__selo {
    position: absolute; top: -12px; left: 22px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--tinta); color: #fff;
    font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.v2-plano__nome { font-size: 13.5px; font-weight: 800; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.v2-plano__preco b { font-size: 40px; font-weight: 800; letter-spacing: -.035em; }
.v2-plano__preco span { font-size: 15px; font-weight: 700; color: var(--tinta-3); }
.v2-plano__desc { font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.v2-plano__eco {
    align-self: flex-start;
    padding: 4px 11px; border-radius: 999px;
    background: #e4f8ed; color: #0f7a48;
    font-size: 12.5px; font-weight: 800;
}
.v2-plano__itens { list-style: none; display: grid; gap: 7px; margin: 4px 0 6px; }
.v2-plano__itens li { position: relative; padding-left: 21px; font-size: 14px; color: var(--tinta-2); }
.v2-plano__itens li::before { content: '\2713'; position: absolute; left: 0; color: var(--verde); font-weight: 900; }
.v2-plano .v2-btn { margin-top: auto; width: 100%; text-transform: capitalize; }

.v2-planos__nota { margin-top: 20px; text-align: center; font-size: 14px; color: var(--tinta-3); }
.v2-planos__nota a { color: var(--roxo); font-weight: 800; }

/* ---------------- premium: um produto, dois periodos ----------------
   Os dois planos pagos entregam os mesmos recursos; muda so o preco por mes.
   Por isso a lista de beneficios aparece UMA vez e os periodos viram opcao
   dentro do mesmo bloco -- dois cards lado a lado sugeririam produtos
   diferentes e mandariam o leitor cacar uma diferenca inexistente. */

.v2-premium {
    position: relative;
    display: grid;
    gap: 18px;
    padding: 28px 22px;
    border: 2px solid var(--tinta);
    border-radius: 20px;
    background: #fff;
}

.v2-premium__cabeca { display: grid; gap: 8px; }
.v2-premium__nome {
    font-size: 13.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3);
}
.v2-premium__frase { font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.v2-premium__frase b { color: var(--tinta); }

.v2-periodos { display: grid; gap: 10px; }

/* Cada periodo e um link direto: sem estado escondido, sem JS, e cada opcao
   ja diz para onde leva. */
.v2-periodo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--linha);
    border-radius: 15px;
    background: var(--papel);
    transition: border-color .15s ease, background .15s ease;
}
.v2-periodo:hover { border-color: var(--tinta); }
.v2-periodo--melhor { border-color: var(--tinta); background: #fff; }

.v2-periodo__quando { font-size: 16px; font-weight: 800; }
.v2-periodo__mes { grid-column: 2; grid-row: 1; text-align: right; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.v2-periodo__mes span { font-size: 13px; font-weight: 700; color: var(--tinta-3); }
.v2-periodo__total { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-2); }

.v2-periodo__eco {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e4f8ed;
    color: #0f7a48;
    font-size: 11.5px;
    font-weight: 800;
    vertical-align: middle;
}

.v2-premium__inclui { display: grid; gap: 9px; list-style: none; }
.v2-premium__inclui li {
    position: relative;
    padding-left: 24px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--tinta-2);
}
.v2-premium__inclui li::before {
    /* era '¹3' -- corrupcao de encoding de uma edicao anterior. O caractere
       certo e o checkmark usado no resto da pagina (ver .v2-lista__ok). */
    content: '\2713';
    position: absolute; left: 0;
    color: var(--verde); font-weight: 900;
}
.v2-premium__igual {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--papel-2);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tinta-2);
}
.v2-premium__igual b { color: var(--tinta); }

/* Gratuito e Premium lado a lado no desktop; empilhados no celular. */
.v2-oferta { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 900px) {
    .v2-oferta { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
    .v2-premium { padding: 32px 28px; }
}

/* ---------------- fecho ---------------- */

.v2-fecho { padding: 88px 0; text-align: center; }
.v2-fecho__titulo {
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.1;
    letter-spacing: -.035em;
    font-weight: 800;
    max-width: 18ch;
    margin: 0 auto;
    text-wrap: balance;
}
.v2-fecho__sub { margin: 18px auto 30px; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--tinta-2); }

.v2-rodape {
    border-top: 1px solid var(--linha);
    padding: 28px 0;
}
.v2-rodape__interno {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center;
}
.v2-rodape__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: 14px; font-weight: 700; color: var(--tinta-3); }
.v2-rodape__links a:hover { color: var(--roxo); }

/* ---------------- ajustes de celular ----------------
   Tudo acima e mobile-first, mas o tour tem uma restricao que o resto da
   pagina nao tem: aparelho e texto dividem UMA tela. Estas regras apertam o
   conteudo para os dois caberem juntos. */

.v2-tour { scroll-margin-top: var(--topo); }

@media (max-width: 899px) {
    .v2-hero { padding: 40px 0 48px; }
    /* `max-width: none` de proposito: as duas linhas ja vem quebradas pelo
       <br> no HTML -- um teto em `ch` aqui só forçaria quebra extra DENTRO de
       cada frase num celular estreito. */
    .v2-hero__titulo { font-size: clamp(24px, 7.4vw, 32px); max-width: none; }
    .v2-hero__sub { font-size: 16px; margin-top: 16px; }
    .v2-hero__acoes { margin-top: 26px; }
    .v2-hero__acoes .v2-btn { flex: 1 1 100%; }

    .v2-secao { padding: 56px 0; }
    .v2-fecho { padding: 60px 0; }
    .v2-fecho .v2-btn { width: 100%; }

    .v2-passo__titulo { font-size: clamp(22px, 6.2vw, 28px); }
    .v2-passo__texto { font-size: 15px; line-height: 1.55; margin-top: 10px; }
    .v2-passo__onde { margin-top: 12px; }

    /* telas do aparelho: menos respiro, fonte um degrau menor */
    .v2-tela { padding: 13px 12px; gap: 8px; }
    .v2-tela__topo { padding-bottom: 6px; }
    .v2-trilha { gap: 5px; }
    .v2-trilha__etapa { padding: 6px 7px; gap: 8px; }
    .v2-trilha__orb { width: 21px; height: 21px; font-size: 9px; }
    .v2-trilha__txt b { font-size: 10.5px; }
    .v2-trilha__txt span { font-size: 8.5px; }
    .v2-card-lei__t { font-size: 19px; margin-top: 9px; }
    .v2-card-lei__p { font-size: 11.5px; }
    .v2-questao__op { padding: 7px 9px; font-size: 10.5px; }
    .v2-recalculo { padding: 8px 9px; }
    .v2-mecanismo { padding: 4px 0 44px; }
    .v2-armadilha__lei { font-size: 11px; padding: 9px; }
    .v2-armadilha__aviso { font-size: 10.5px; padding: 8px; }
    .v2-chat__bolha { font-size: 11px; padding: 8px 10px; }
    .v2-prog__erros { font-size: 10px; padding: 8px; }
}

/* Tela baixa (celular deitado, aparelho pequeno): o tour em duas faixas nao
   cabe. Solta o sticky e empilha -- o aparelho aparece uma vez, no comeco, e
   os passos viram texto corrido. Melhor perder a troca de telas do que
   entregar aparelho e texto espremidos um sobre o outro. */
@media (max-height: 600px) and (max-width: 899px) {
    .v2-palco { position: static; padding: 0 0 22px; }
    .v2-palco::after { display: none; }
    .v2-fone { height: 360px; width: min(280px, 68vw); }
    .v2-passo { min-height: 0; padding: 22px 0; }
}

/* Celular muito curto tambem no modo em pe: aperta mais o aparelho. */
@media (min-height: 601px) and (max-height: 700px) and (max-width: 899px) {
    .v2-fone { height: min(430px, 38dvh); }
    .v2-passo { min-height: 42dvh; }
}

/* ---------------- desktop ---------------- */

@media (min-width: 900px) {
    .v2-container { padding: 0 40px; }
    .v2-hero { padding: 96px 0 88px; }
    .v2-secao { padding: 104px 0; }
    .v2-mecanismo { padding: 16px 0 72px; }
    .v2-passos-curtos { grid-template-columns: repeat(4, 1fr); gap: 16px; }

    /* aparelho a direita, texto a esquerda: o sticky passa a valer numa
       coluna so, e cada passo ocupa uma tela inteira de rolagem. */
    .v2-tour__grade {
        grid-template-columns: 1fr minmax(320px, 380px);
        gap: 72px;
        align-items: start;
    }
    .v2-palco {
        grid-column: 2;
        grid-row: 1;
        top: 96px;
        height: calc(100dvh - 120px);
        align-items: center;
        padding: 0;
        background: none;
    }
    .v2-passos { grid-column: 1; grid-row: 1; }
    .v2-passo { min-height: 88dvh; padding: 0; }
    .v2-fone { width: 330px; height: min(640px, 74dvh); }

    .v2-planos { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
    .v2-rodape__interno { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1240px) {
    .v2-tour__grade { gap: 110px; }
}

/* ---------------- movimento reduzido ---------------- */

@media (prefers-reduced-motion: reduce) {
    .v2-tela { transition: none; }
    .v2-btn { transition: none; }
    html { scroll-behavior: auto; }
}