/*
  Encaixe na tela a partir de 1024px de largura (faixas B e C).
  Figma "V3 · ENCAIXE 1440×720 (proposta)" (166:2); o V2 (123:2) continua
  valendo para o resto.

  Este arquivo junta, seção por seção, só o que muda a partir de 1024px.
  Ele é carregado com media="(min-width: 1024px)" depois do CSS das seções:
  - no celular e no tablet não bloqueia a primeira pintura (o navegador
    baixa com prioridade baixa e não espera por ele);
  - vem por último, então as regras daqui vencem as do CSS de cada seção
    com a mesma especificidade.
  O resto de cada seção continua em assets/css/secoes/secao-*.css.
*/

/* ------------------------------------------------------------------
   Encaixe na tela: três faixas
   A) abaixo de 1024px de largura: layout de sempre (mobile e tablet).
   B) 1024px ou mais de largura: layouts compactos de busca, virada,
      serviços, quem sou e convite (cada um no seu bloco abaixo).
   C) 1024px ou mais de largura E 720px ou mais de altura: além do B, cada
      seção (menos hero e dúvidas) ocupa ao menos a área útil da tela
      (100svh menos a base do header), com 40px de respiro em cima e embaixo
      e o conteúdo centralizado na vertical. As cenas fixas de projetos e
      processo (assets/js/cenas.js) também só ligam aqui.
   É altura mínima, nunca fixa: com zoom ou texto maior, a seção cresce e a
   página rola normalmente. Abaixo de 720px de altura, nada disso vale.
   Mantenha a mesma media query em assets/js/cenas.js.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (min-height: 720px) {
  .secao-busca,
  .secao-virada,
  .secao-servicos,
  .secao-incluso,
  .secao-quem-sou {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--header-base));
    padding-block: 40px;
  }

  /* Link do menu: topo da seção exatamente na base do header (o
     scroll-padding-top do html, em base.css, já desconta o header) */
  section[id] {
    scroll-margin-top: 0;
  }

  /* Dúvidas fica fora do encaixe: mantém a âncora das faixas A e B */
  #duvidas {
    scroll-margin-top: calc(max(0px, var(--header-base) + 24px - var(--secao-respiro)) - var(--header-base));
  }
}

/* ------------------------------------------------------------------
   Hero · faixa B: dica de rolagem do desktop (Figma 123:35)
   ------------------------------------------------------------------ */
.hero-rolagem-celular {
  display: none;
}

.hero-rolagem-desktop {
  display: inline;
}

/* ------------------------------------------------------------------
   Busca · faixa B (Figma V3 › T1 166:6, celular 176:4)
   Celular inteiro, sem degradê: altura da área útil menos 20 (598 em 720
   de altura), entre 598 e 720; largura pela proporção da imagem (316 × 651).
   Bloco atrás dele, crescendo junto, na proporção do T1: 1,24 × a largura
   do celular (360 com 598 de altura) e 77% da altura (460 com 598). Os dois
   centralizados no palco (a mesma referência).
   Colunas: texto | bloco | passos, com 30 entre elas; texto e passos
   dividem o que sobra (390 | 360 | 390 em 1440 × 720).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .secao-busca {
    --celular-a: clamp(598px, calc(100svh - var(--header-base) - 20px), 720px);
    --bloco-l: calc(var(--celular-a) * 360 / 598);
    --bloco-a: calc(var(--celular-a) * 0.77);
  }

  .secao-busca .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bloco-l) minmax(0, 1fr);
    align-items: center;
    column-gap: 30px;
  }

  .busca-cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .busca-titulo,
  .busca-apoio {
    max-width: 390px;
  }

  /* Quebra comum, como no Figma */
  .busca-titulo {
    text-wrap: wrap;
  }

  .busca-apoio {
    text-align: left;
  }

  .busca-corpo {
    display: contents;
  }

  .busca-palco {
    position: relative;
    align-self: stretch;
    min-height: var(--bloco-a);
  }

  .busca-bloco {
    inset: calc(50% - var(--bloco-a) / 2) 0 auto;
    height: var(--bloco-a);
  }

  /* Passa do bloco em cima e embaixo */
  .busca-celular {
    top: calc(50% - var(--celular-a) / 2);
    left: 50%;
    width: calc(var(--celular-a) * 316 / 651);
    margin-left: calc(var(--celular-a) * -158 / 651);
    transform: none;
  }

  /* position: relative põe os passos acima do mármore (que é absoluto) */
  .busca-passos {
    position: relative;
    gap: 12px;
  }

  .busca-passo {
    min-height: 0;
  }

  .busca-passo-texto {
    flex: 1;
    max-width: none;
  }
}

/* Passos (Figma T1 166:6): os três escuros, inclusive o "Decide"; o claro
   é só o hover. Sem JS ou com movimento reduzido, o hover é do próprio card
   (troca direta); com as animações (html.anima), é a camada que desliza
   (B1, animacoes.css). */
@media (min-width: 1024px) {
  .busca-passo-invertido {
    background-color: var(--superficie-vidro);
    box-shadow: inset 0 0 0 1px var(--linha);
  }

  .busca-passo-invertido .busca-passo-numero {
    background-color: var(--superficie-sutil);
    color: var(--destaque);
  }

  .busca-passo-invertido .busca-passo-titulo {
    color: var(--texto);
  }

  .busca-passo-invertido .busca-passo-descricao {
    color: var(--texto-apoio);
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.anima) .busca-passo:hover {
    background-color: var(--cta-fundo);
    box-shadow: none;
  }

  html:not(.anima) .busca-passo:hover .busca-passo-numero {
    background-color: var(--cta-tinta);
    color: var(--cta-texto);
  }

  html:not(.anima) .busca-passo:hover .busca-passo-titulo {
    color: var(--cta-texto);
  }

  html:not(.anima) .busca-passo:hover .busca-passo-descricao {
    color: color-mix(in srgb, var(--cta-texto) 72%, transparent);
  }
}

/* Faixa C: o contêiner ocupa a área útil (o palco ganha a altura dela) */
@media (min-width: 1024px) and (min-height: 720px) {
  .secao-busca .container {
    flex: 1;
  }
}

/* ------------------------------------------------------------------
   Faixa B (1024px ou mais): layout compacto
   (Figma "V3 · ENCAIXE 1440×720" › T2 Virada 166:28)
     título e apoio à esquerda em 420, alinhados à esquerda, 24 de gap;
     40 de espaço; bloco 740 × 538 à direita (raio 40);
     janela em 72% (566,78 × 318,82) em (85,61; 98,59) no bloco;
     cards em 85%: Mais clientes em (15, 59), Confiança em (492, 72),
     Ganho de tempo em (231, 369).
   1px do Figma = 100cqi / 740 (o bloco acompanha a coluna). Os cards
   encolhem com transform (scale 0,85) a partir do canto de cima.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .secao-virada .container {
    display: grid;
    grid-template-columns: minmax(0, 420fr) minmax(0, 740fr);
    align-items: center;
    column-gap: 40px;
  }

  .virada-cabecalho {
    align-items: flex-start;
    text-align: left;
  }

  .virada-titulo,
  .virada-apoio {
    max-width: 420px;
  }

  .virada-apoio {
    text-wrap: pretty;
  }

  .virada-limite {
    margin-top: 0;
  }

  .virada-bloco {
    --figma: calc(100cqi / 740);
    height: auto;
    min-height: calc(538 * var(--figma));
  }

  .virada-janela {
    top: calc(98.59 * var(--figma) - 1px);
    left: calc(85.61 * var(--figma) - 1px);
    width: calc(566.78 * var(--figma));
  }

  /* Esqueleto no lugar do título, do texto e dos botões (Figma 168:63).
     Medidas do T2 ÷ 0,72, na unidade da janela (--j): bloco do título
     259,72 × 65,28 (raio 13,89), barra 259,72 × 18,06, botões 100,86 ×
     33,32; gaps 16,4 e 8,2. A foto vem logo depois do texto, não na borda
     direita. Cores do Figma sem variável, trocadas por tokens (decisão da
     Samara): #e8e3e6 → texto, #b9a9b1 → texto-apoio, #1a1216 →
     superficie-sutil. */
  .virada-janela-hero {
    flex: none;
  }

  .virada-janela-titulo,
  .virada-janela-texto,
  .virada-janela-acoes {
    display: none;
  }

  .virada-janela-esqueleto {
    display: flex;
    flex-direction: column;
    gap: calc(16.4 * var(--j));
  }

  .virada-esqueleto-titulo,
  .virada-esqueleto-texto {
    width: calc(259.72 * var(--j));
  }

  .virada-esqueleto-titulo {
    height: calc(65.28 * var(--j));
    border-radius: calc(13.89 * var(--j));
    background-color: var(--texto);
  }

  .virada-esqueleto-texto {
    height: calc(18.06 * var(--j));
    border-radius: var(--raio-999);
    background-color: var(--texto-apoio);
  }

  .virada-esqueleto-acoes {
    display: flex;
    gap: calc(8.2 * var(--j));
  }

  .virada-esqueleto-botao {
    width: calc(100.86 * var(--j));
    height: calc(33.32 * var(--j));
    border-radius: var(--raio-999);
    background-color: var(--texto);
  }

  .virada-esqueleto-botao-2 {
    background-color: var(--superficie-sutil);
  }

  .virada-card {
    transform: scale(0.85);
    transform-origin: 0 0;
  }

  .virada-card-encontrado {
    top: calc(59 * var(--figma) - 1px);
    left: calc(15 * var(--figma) - 1px);
  }

  /* Figma: (492, 72) com 246,5 de largura (290 × 0,85), a 1,5 da borda
     direita. Preso pela direita, com a origem da escala no canto de cima à
     direita. */
  .virada-card-confiavel {
    top: calc(72 * var(--figma) - 1px);
    right: calc(1.5 * var(--figma) - 1px);
    transform-origin: 100% 0;
  }

  .virada-card-seu {
    top: calc(369 * var(--figma) - 1px);
    left: calc(231 * var(--figma) - 1px);
  }
}

/* ------------------------------------------------------------------
   Faixa B (1024px ou mais): layout compacto
   (Figma "V3 · ENCAIXE 1440×720" › T3 Serviços 166:50)
     título à esquerda; "Não sabe qual escolher?…" 69px abaixo do topo do
     título; setas e posição à direita, centralizadas na linha do título
     (15,5px abaixo do topo dele); palco 113px abaixo do topo do título;
     mármore a partir de 58px abaixo do topo do título até a base da seção,
     véu de 240px no topo dele; luz centrada 301px abaixo do topo do título.
   Ordem no HTML (e no Tab) continua a de sempre: título, cards, setas,
   ajuda. Só a posição visual das setas e da ajuda muda.
   O conteúdo (título + palco) tem cerca de 556px e fica centralizado na
   seção (faixa C) ou entre os respiros iguais (faixa B): por isso o fundo
   se posiciona a partir do meio da seção (50% − 278px = topo do título).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .secao-servicos .container {
    position: relative;
  }

  .servicos-titulo {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  .servicos-carrossel {
    margin-top: 54px;
  }

  .servicos-controles {
    position: absolute;
    top: 15.5px;
    right: var(--margem-lateral);
    margin-top: 0;
  }

  .servicos-ajuda {
    position: absolute;
    top: 69px;
    left: var(--margem-lateral);
    margin-top: 0;
    text-align: left;
  }

  .servicos-marmore {
    top: calc(50% - 220px);
    bottom: 0;
    height: auto;
  }

  .servicos-veu {
    top: calc(50% - 220px);
    height: 240px;
  }

  .servicos-luz {
    --luz-y: calc(50% + 23px);
  }
}

/* ------------------------------------------------------------------
   O que vem em todo site · faixa B (Figma 203:2; o V3 não tem esta seção)
     título à esquerda e apoio de 382 à direita, 4px abaixo do topo dele;
     grade 131px abaixo do topo do título (72 depois da linha dele);
     5 colunas quando cada card tem ao menos 200px: lista com 1064px ou
     mais (5 × 200 + 4 × 16). Pela margem lateral (48 até 1199, 120 a
     partir de 1200), isso vale de 1160 a 1199 e a partir de 1304.
     Abaixo disso: 5 colunas com tipografia menor (no fim deste bloco).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .secao-incluso .container {
    container-type: inline-size;
  }

  .incluso-cabecalho {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }

  .incluso-apoio {
    flex: none;
    width: 382px;
    padding-top: 4px;
  }

  .incluso-lista {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 72px;
  }

  @container (min-width: 1064px) {
    .incluso-item {
      min-height: 200px;
    }
  }

  /* Lista com menos de 1064px (1024 a 1159 e 1200 a 1303): 5 colunas com
     tipografia menor (decisão da Samara). Com a tipografia do Figma, a
     seção passa da área útil em 1024 × 720 (700 de 618); com 4 colunas,
     vira três linhas (825) */
  @container (max-width: 1063.98px) {
    .incluso-item {
      gap: 8px;
      padding: 18px;
    }

    .incluso-numero {
      font-size: 0.75rem;
    }

    .incluso-item-titulo {
      font-size: 1rem;
    }

    .incluso-item-texto {
      font-size: 0.8125rem;
      line-height: 1.4;
    }
  }
}

/* ------------------------------------------------------------------
   Cena fixa: trilho horizontal
   (Figma "V3 · ENCAIXE 1440×720" › T4 Projetos 166:72 início, 166:91 fim)
   Liga só com data-cena="ativa" (assets/js/cenas.js), que só é posto na
   faixa C e sem movimento reduzido. Fora disso, nada abaixo vale.
     seção: invólucro com a altura do palco + 150svh de rolagem;
     palco: preso na base do header, com a altura da área útil, conteúdo
       centralizado (em 720: título a 40px do header, trilho a 40px da base);
     título à esquerda; contador "01 / 03" (JetBrains Mono 14) e barra de
       200 × 2 à direita, na linha do título, 20 entre eles;
     trilho 32px abaixo do título: os três projetos lado a lado, 447 de
       altura, 24 entre eles. Cada card é o do V2 em escala (zoom): destaque
       1200 × 640 → 838 × 447 (0,6984); os outros 590 → 614,8 (1,042).
     O trilho anda da margem esquerda (destaque na margem) até o último card
     encostar na margem direita; o JavaScript move com transform.
   Cores do contador e da barra: o Figma usa valores fixos (#f0ede8, a mesma
   cor a 15% e #e8a3c7); aqui entram os tokens mais próximos (texto, texto a
   15% e destaque), para funcionar nos dois temas.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (min-height: 720px) {
  .secao-projetos[data-cena] {
    height: calc(100svh - var(--header-base) + 150svh);
    padding-block: 0;
    /* O trilho passa da tela à direita: recorta sem criar rolagem (clip não
       cria contêiner de rolagem, então o sticky do palco continua valendo) */
    overflow-x: clip;
  }

  .secao-projetos[data-cena] > .container {
    position: sticky;
    top: var(--header-base);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: center;
    column-gap: 40px;
    height: calc(100svh - var(--header-base));
    padding-block: 40px;
  }

  .projetos-progresso {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .projetos-progresso[hidden] {
    display: none;
  }

  .projetos-progresso-contador {
    color: var(--texto);
    font-family: var(--fonte-mono);
    font-size: var(--rotulo-numero-passo);
    line-height: normal;
    font-variant-numeric: tabular-nums;
  }

  .projetos-progresso-barra {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 2px;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--texto) 15%, transparent);
  }

  .projetos-progresso-preenchido {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--destaque);
    transform: scaleX(0.3333);
    transform-origin: 0 50%;
  }

  .secao-projetos[data-cena] .projetos-lista {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 32px;
  }

  .secao-projetos[data-cena] .projeto-destaque {
    flex: none;
    width: 1200px;
    zoom: 0.6984;
  }

  .secao-projetos[data-cena] .projeto-simples {
    flex: none;
    width: 590px;
    zoom: 1.042;
  }
}

/* ------------------------------------------------------------------
   Cena fixa: linha do tempo + pilha de cards
   (Figma "V3 · ENCAIXE 1440×720" › T5 Processo 166:113, 166:132, 166:151)
   Liga só com data-cena="ativa" (assets/js/cenas.js), que só é posto na
   faixa C e sem movimento reduzido. Fora disso, nada abaixo vale.
     seção: invólucro com a altura do palco + 300svh de rolagem (60 por etapa);
     palco: preso na base do header, com a altura da área útil;
     à esquerda (480): título, condições (alinhadas à esquerda, 420, 20 de
       gap) e a linha do tempo (28 acima, itens com 6 de gap, padding 8/0/8/20,
       marca de 2 × 28, número JetBrains Mono 13 em destaque, nome Geist
       Medium 20; ativa acesa com a marca rosa, anteriores com a marca a 45%,
       seguintes com a marca a 12%);
     à direita: cards de 600 × 480 empilhados (palco de 516), com 120 de
       espaço (menos em telas mais estreitas); os dois seguintes aparecem
       atrás, só com a borda: 95% e 90%, 18px e 36px abaixo (escala a partir
       da base);
     card da frente: legenda na largura interna (536), no pé; a ilustração
       ocupa a área de cima (32 das bordas até 24 acima da legenda),
       ampliada por inteiro (contain), centralizada, com teto de 1,6x
       (Figma: 01 em 1,42x, 03 em 1,46x, 05 em 1,6x). O fator (--k) vem do
       cenas.js, que mede cada ilustração; aqui ele vira zoom (o texto é
       desenhado já no tamanho final, sem borrar como num scale) e, no 02 e
       no 03, a largura da ilustração, que escala pela unidade --f ou --j.
   A troca de etapa é uma transição de 600ms, não acompanha a rolagem.
   Contraste: no Figma as etapas anteriores ficam a 55% de opacidade e as
   seguintes a 32%, o que não passa AA (são botões). Aqui o número fica
   sempre em destaque cheio e só o nome muda de cor: texto na ativa,
   texto-apoio nas anteriores e texto-apoio a 82% nas seguintes (o mínimo
   para 4,5:1 é 68% no escuro e 81% no claro). A marca segue o Figma.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (min-height: 720px) {
  .secao-processo[data-cena] {
    height: calc(100svh - var(--header-base) + 300svh);
    padding-block: 0;
  }

  .secao-processo[data-cena] > .container {
    position: sticky;
    top: var(--header-base);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    align-items: center;
    align-content: center;
    /* 120 do Figma em 1440; 40 em 1024 */
    column-gap: clamp(40px, calc((100vw - 1024px) * 0.1923 + 40px), 120px);
    height: calc(100svh - var(--header-base));
    padding-block: 40px;
  }

  .secao-processo[data-cena] .processo-cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .secao-processo[data-cena] .processo-titulo {
    max-width: 480px;
  }

  .secao-processo[data-cena] .processo-condicoes {
    max-width: 420px;
    text-align: left;
  }

  /* Linha do tempo */
  .processo-linha {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 28px 0 0;
    list-style: none;
  }

  .processo-linha[hidden] {
    display: none;
  }

  .processo-linha-etapa {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 42px;
    padding: 8px 0 8px 20px;
    color: color-mix(in srgb, var(--texto-apoio) 82%, var(--fundo));
    font-size: var(--titulo-linha-tempo);
    font-weight: var(--peso-medio);
    letter-spacing: var(--titulo-linha-tempo-letra);
    line-height: normal;
    text-align: left;
    cursor: pointer;
  }

  .processo-linha-etapa::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 2px;
    height: 28px;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--destaque) 12%, transparent);
  }

  .processo-linha-numero {
    color: var(--destaque);
    font-family: var(--fonte-mono);
    font-size: var(--rotulo-numero-etapa);
    font-weight: var(--peso-regular);
    letter-spacing: normal;
  }

  .processo-linha-etapa[data-estado="anterior"] {
    color: var(--texto-apoio);
  }

  .processo-linha-etapa[data-estado="anterior"]::before {
    background-color: color-mix(in srgb, var(--destaque) 45%, transparent);
  }

  .processo-linha-etapa[aria-current="step"] {
    color: var(--texto);
  }

  .processo-linha-etapa[aria-current="step"]::before {
    background-color: var(--destaque);
  }

  .processo-linha-etapa:hover {
    color: var(--texto);
  }

  /* Pilha: os cinco cards na mesma célula; 36px embaixo para os de trás */
  .secao-processo[data-cena] .processo-etapas {
    display: grid;
    grid-template-columns: 600px;
    margin-top: 0;
    padding-bottom: 36px;
  }

  .secao-processo[data-cena] .processo-etapa {
    grid-area: 1 / 1;
    align-self: start;
    width: 600px;
    height: 480px;
    min-height: 0;
    /* Fundo opaco: o card de trás não aparece através do da frente */
    background: linear-gradient(var(--superficie-vidro), var(--superficie-vidro)), var(--fundo);
    transform-origin: 50% 100%;
    transition: transform 0.6s ease, opacity 0.6s ease;
  }

  .secao-processo[data-cena] .processo-etapa > * {
    transition: opacity 0.6s ease;
  }

  /* Área da ilustração: tudo o que sobra acima da legenda, menos 24 */
  .secao-processo[data-cena] .processo-ilustracao {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 24px;
    padding-bottom: 0;
  }

  /* Cada ilustração na largura do card original (01: 316; 04: 526),
     ampliada por --k como um bloco só */
  .secao-processo[data-cena] .processo-chat {
    flex: none;
    width: 316px;
    zoom: var(--k, 1);
  }

  .secao-processo[data-cena] .processo-editor {
    flex: none;
    width: 526px;
    zoom: var(--k, 1);
  }

  .secao-processo[data-cena] .processo-noar-endereco {
    flex: none;
    zoom: var(--k, 1);
  }

  /* 02 e 03: a largura escala tudo pela unidade de cada um (--f e --j) */
  .secao-processo[data-cena] .processo-folhas {
    flex: none;
    width: calc(316px * var(--k, 1));
    max-width: none;
  }

  .secao-processo[data-cena] .processo-prototipo {
    flex: none;
    width: calc(345.6px * var(--k, 1));
  }

  /* Legenda na largura interna do card (536), no pé */
  .secao-processo[data-cena] .processo-legenda {
    max-width: none;
    margin-top: auto;
  }

  .secao-processo[data-cena] .processo-etapa[data-pos="0"] {
    z-index: 5;
  }

  .secao-processo[data-cena] .processo-etapa[data-pos="1"] {
    z-index: 4;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linha) 70%, transparent);
    transform: translateY(18px) scale(0.95);
  }

  .secao-processo[data-cena] .processo-etapa[data-pos="2"] {
    z-index: 3;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linha) 45%, transparent);
    transform: translateY(36px) scale(0.9);
  }

  .secao-processo[data-cena] .processo-etapa[data-pos="3"] {
    z-index: 2;
    opacity: 0;
    transform: translateY(36px) scale(0.9);
  }

  /* Etapas que já passaram: sobem e somem */
  .secao-processo[data-cena] .processo-etapa[data-pos="-1"] {
    z-index: 6;
    opacity: 0;
    transform: translateY(-48px);
    pointer-events: none;
  }

  /* Cards de trás: só a borda (o conteúdo some, mas continua no HTML e
     legível por leitor de tela: opacity, não visibility) */
  .secao-processo[data-cena] .processo-etapa:not([data-pos="0"]) > * {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------
   Faixa B (1024px ou mais): sem layout novo; o retrato fica com 522px de
   altura (proporção 3:4, 391,5px de largura), encostado à esquerda da sua
   coluna. O texto continua na mesma coluna. O respiro de 40px vem da
   faixa C (início deste arquivo).
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .quem-sou-retrato {
    justify-self: start;
    height: 522px;
    width: auto;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
   Faixa C (1024px ou mais de largura e 720px ou mais de altura): sem layout
   novo; a seção ocupa ao menos a área útil da tela, com 40px de respiro em
   cima e 40px acima do rodapé. Os 50px de baixo continuam sob o rodapé
   (margin-bottom −50px), por isso o respiro de baixo soma 50.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) and (min-height: 720px) {
  .secao-convite {
    align-items: center;
    min-height: calc(100svh - var(--header-base));
    padding-block: 40px calc(40px + 50px);
  }
}