/*
  Cap 6 · Como funciona (Figma 123:2 › "CAP 6 · Como funciona" 125:2), 1440 × 1297.
  Medidas do Figma:
    título a 191px do topo (Geist Medium 56); condições 382px, alinhadas à
      direita (Geist 16/150%, texto-apoio); cards 127px abaixo do título;
    cards com raio 36, fundo superficie/vidro, borda 1px linha, padding 32:
      linha 1: 380 + 380 + 400 (400px de altura), legenda a 260px do topo;
      linha 2: 590 + 590 (380px de altura), legenda a 240px do topo;
      gap de 20 entre cards; 120px de respiro embaixo;
    legenda: número JetBrains Mono 13 (destaque), título Geist Medium 24 (−1%),
      texto Geist 15/145% (texto-apoio), gap 8;
    ilustrações:
      chat: balões de 242px, padding 10/16, raio 20 com um canto de 6, texto
        14/140%; cliente em superficie/sutil, BORDA em destaque;
      briefing e contrato: duas folhas de raio 16, padding 16, borda linha;
        briefing (176 × 164, superficie/sutil-2, girada 4°) atrás, contrato
        (170 × 164, superficie/sutil, girada −3°, sombra 0 12 28 a 35%) na
        frente, com rubrica em destaque e selo com check de 20;
      protótipo: janela de 345,6 × 194,4 (escala própria), seleção em destaque
        com alças de 7 e etiqueta "Título: 48" (JetBrains Mono 11);
      editor: superficie/janela, raio 22; aba JetBrains Mono 12; código
        JetBrains Mono 13 com 150% de altura de linha, 7 linhas a 6px da aba;
        pontuação e seletores em destaque, propriedades em texto-apoio;
      no ar: mármore + degradê do fundo (0 em 35% → 92% em 100%), endereço
        numa pílula superficie/janela (JetBrains Mono 16), só com o endereço.

  Grade: as duas linhas têm larguras diferentes. Quatro trilhas (380, 190,
  170, 400) com gap de 20 dão exatamente 380/380/400 na linha 1 e 590/590 na
  linha 2.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-processo {
  /* Figma: título a 191px do topo da seção (71px além do respiro padrão) */
  padding-top: calc(var(--secao-respiro) + 71px);
  padding-bottom: var(--secao-respiro);
  background-color: var(--fundo);
}

/* ------------------------------------------------------------------
   Título e condições
   ------------------------------------------------------------------ */
.processo-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.processo-titulo {
  max-width: 760px;
  color: var(--texto);
  font-size: clamp(2rem, 3.89vw, var(--titulo-secao));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-secao-altura);
  letter-spacing: var(--titulo-secao-letra);
}

.processo-condicoes {
  /* Caixa de 382px no Figma. No navegador a 2ª linha mede 388px e quebraria
     em 3 linhas; 396px mantém as 2 linhas do Figma. */
  max-width: 396px;
  color: var(--texto-apoio);
  font-size: var(--apoio);
  line-height: var(--apoio-altura);
  text-align: right;
}

/* ------------------------------------------------------------------
   Grade de etapas
   ------------------------------------------------------------------ */
.processo-etapas {
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 190fr) minmax(0, 170fr) minmax(0, 400fr);
  gap: 20px;
  margin-top: 127px;
  padding: 0;
  list-style: none;
}

.processo-etapa:nth-child(1) { grid-column: 1; }
.processo-etapa:nth-child(2) { grid-column: 2 / span 2; }
.processo-etapa:nth-child(3) { grid-column: 4; }
.processo-etapa:nth-child(4) { grid-column: 1 / span 2; }
.processo-etapa:nth-child(5) { grid-column: 3 / span 2; }

.processo-etapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 32px;
  border-radius: var(--raio-36);
  background-color: var(--superficie-vidro);
  box-shadow: inset 0 0 0 1px var(--linha);
}

/* Alturas do Figma (400 e 380) como mínimo, em todas as larguras: se a
   legenda for maior, o card cresce, e a grade (stretch) iguala a linha.
   A cena fixa tem medida própria (600 × 480, em encaixe.css). */
.processo-etapa:nth-child(n + 4) {
  min-height: 380px;
}

/* Área da ilustração: a legenda começa a 260px (linha 1) e 240px (linha 2).
   Altura mínima: em cards mais estreitos, os balões do 01 quebram em mais
   linhas e a área cresce, empurrando a legenda. Na linha 1, 20px de respiro
   embaixo (no Figma sobram 28 sob os balões e 21 sob as folhas do 02). */
.processo-ilustracao {
  flex: none;
  min-height: 228px;
}

.processo-etapa:nth-child(-n + 3) .processo-ilustracao {
  padding-bottom: 20px;
}

.processo-etapa:nth-child(n + 4) .processo-ilustracao {
  min-height: 208px;
}

.processo-legenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 316px;
}

.processo-etapa-prototipo .processo-legenda { max-width: 336px; }
.processo-etapa:nth-child(n + 4) .processo-legenda { max-width: 280px; }

.processo-numero {
  color: var(--destaque);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-numero-etapa);
  line-height: normal;
}

.processo-etapa-titulo {
  color: var(--texto);
  font-size: var(--titulo-etapa);
  font-weight: var(--peso-medio);
  letter-spacing: var(--titulo-etapa-letra);
  line-height: normal;
}

.processo-etapa-texto {
  color: var(--texto-apoio);
  font-size: var(--apoio-etapa);
  line-height: var(--apoio-etapa-altura);
}

/* ------------------------------------------------------------------
   01 · Chat
   ------------------------------------------------------------------ */
.processo-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.processo-balao {
  width: min(242px, 100%);
  min-height: 60px;
  padding: 10px 16px;
  font-size: var(--apoio-card);
  line-height: 1.4;
}

/* Cantos: superior esquerdo, superior direito, inferior direito, inferior esquerdo */
.processo-balao-cliente {
  border-radius: 20px 20px 20px 6px;
  background-color: var(--superficie-sutil);
  color: var(--texto);
}

.processo-balao-borda {
  align-self: flex-end;
  border-radius: 20px 20px 6px 20px;
  background-color: var(--destaque);
  color: var(--cta-texto);
}

/* ------------------------------------------------------------------
   02 · Briefing e contrato (Figma 200:7), em escala: 1px do Figma =
   100cqi / 316 (--f). Encolhe por inteiro em cards mais estreitos que 316;
   na cena fixa, a largura vem do --k (encaixe.css).
   Quadro de 316 × 207: o frame tem 198, mas a folha da frente, girada,
   passa 8,7px da base no Figma; os 207 cobrem tudo o que aparece.
   Folhas translúcidas no Figma: aqui vão sobre o fundo, para uma não
   aparecer através da outra.
   ------------------------------------------------------------------ */
.processo-folhas {
  container-type: inline-size;
  width: 100%;
  max-width: 316px;
}

.processo-folhas-quadro {
  --f: calc(100cqi / 316);
  position: relative;
  height: calc(207 * var(--f));
}

.processo-folha {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  height: calc(164 * var(--f));
  padding: calc(16 * var(--f));
  border: calc(1 * var(--f)) solid var(--linha);
  border-radius: calc(16 * var(--f));
  line-height: normal;
}

/* Figma: 4° (anti-horário no Figma, negativo no CSS), caixa girada de
   187 × 176 a 9,72px do topo */
.processo-folha-briefing {
  top: calc(15.66 * var(--f));
  left: calc(5.5 * var(--f));
  width: calc(176 * var(--f));
  gap: calc(6 * var(--f));
  background: linear-gradient(var(--superficie-sutil-2), var(--superficie-sutil-2)), var(--fundo);
  transform: rotate(-4deg);
}

/* Figma: −3° (horário), caixa girada de 178 × 173 em (133,42; 34) */
.processo-folha-contrato {
  top: calc(38.34 * var(--f));
  left: calc(137.6 * var(--f));
  width: calc(170 * var(--f));
  gap: calc(10 * var(--f));
  background: linear-gradient(var(--superficie-sutil), var(--superficie-sutil)), var(--fundo);
  box-shadow: 0 calc(12 * var(--f)) calc(28 * var(--f)) rgb(0 0 0 / 0.35);
  transform: rotate(3deg);
}

/* Tema claro: o preto a 35% do Figma pesa sobre o fundo claro; aqui a
   sombra usa o tom do texto do tema, a 10% */
[data-tema="claro"] .processo-folha-contrato {
  box-shadow: 0 calc(12 * var(--f)) calc(28 * var(--f)) rgb(26 18 22 / 0.1);
}

.processo-folha-rotulo {
  color: var(--texto-apoio);
  font-family: var(--fonte-mono);
  font-size: calc(11 * var(--f));
  white-space: nowrap;
}

.processo-folha-campo {
  color: var(--texto-apoio);
  font-size: calc(11 * var(--f));
}

.processo-folha-resposta {
  color: var(--texto);
  font-size: calc(13 * var(--f));
  font-weight: var(--peso-medio);
}

/* Três linhas de texto simuladas */
.processo-folha-linhas {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--f));
}

.processo-folha-linhas span {
  display: block;
  height: calc(5 * var(--f));
  border-radius: calc(3 * var(--f));
  background-color: var(--linha);
}

.processo-folha-linhas span:nth-child(1) { width: calc(136 * var(--f)); }
.processo-folha-linhas span:nth-child(2) { width: calc(112 * var(--f)); }
.processo-folha-linhas span:nth-child(3) { width: calc(124 * var(--f)); }

.processo-folha-rubrica {
  display: block;
  flex: none;
  width: calc(138 * var(--f));
  height: calc(30 * var(--f));
  overflow: visible;
}

.processo-folha-rubrica-traco {
  stroke: var(--destaque);
}

.processo-folha-rubrica-base {
  fill: var(--linha);
}

.processo-folha-selo {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--f));
  color: var(--texto);
  font-size: calc(12 * var(--f));
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.processo-folha-selo .processo-check {
  width: calc(20 * var(--f));
  height: calc(20 * var(--f));
}

.processo-check {
  flex: none;
  color: var(--destaque);
}

.processo-check-traco {
  stroke: var(--cta-texto);
}

/* ------------------------------------------------------------------
   03 · Desenho do site (ilustração em escala: 1px do Figma = 100cqi / 345,6)
   A janela tem 345,6px no Figma, um pouco mais larga que a área de 336px:
   102,86% mantém essa proporção (o card corta a sobra, como no Figma).
   ------------------------------------------------------------------ */
.processo-prototipo {
  container-type: inline-size;
  width: 102.86%;
}

.processo-prototipo-quadro {
  --j: calc(100cqi / 345.6);
  position: relative;
}

.processo-prototipo-janela {
  overflow: hidden;
  border: calc(0.36 * var(--j)) solid var(--linha);
  border-radius: calc(12.96 * var(--j));
  background-color: var(--superficie-janela);
}

.processo-prototipo-barra {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(2.88 * var(--j));
  height: calc(20.16 * var(--j));
  padding-inline: calc(7.92 * var(--j));
  border-bottom: calc(0.36 * var(--j)) solid var(--linha);
}

.processo-prototipo-ponto {
  width: calc(3.96 * var(--j));
  height: calc(3.96 * var(--j));
  border-radius: var(--raio-999);
  background-color: var(--texto-apoio);
  opacity: 0.45;
}

.processo-prototipo-endereco {
  position: absolute;
  left: 50%;
  padding: calc(2.52 * var(--j)) calc(6.48 * var(--j));
  border: calc(0.36 * var(--j)) solid var(--linha);
  border-radius: var(--raio-999);
  background-color: var(--superficie-vidro);
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: calc(4.68 * var(--j));
  line-height: normal;
  transform: translateX(-50%);
}

.processo-prototipo-site {
  display: flex;
  align-items: center;
  gap: calc(17.28 * var(--j));
  height: calc(173.52 * var(--j));
  padding: calc(14.4 * var(--j)) calc(14.4 * var(--j)) calc(14.4 * var(--j)) calc(20.16 * var(--j));
}

.processo-prototipo-hero {
  display: flex;
  flex-direction: column;
  gap: calc(7.2 * var(--j));
  width: calc(136.8 * var(--j));
}

.processo-prototipo-rotulo {
  color: var(--texto-apoio);
  font-family: var(--fonte-mono);
  font-size: calc(4.32 * var(--j));
  letter-spacing: 0.14em;
  line-height: normal;
}

.processo-prototipo-titulo {
  color: var(--texto);
  font-size: calc(16.56 * var(--j));
  font-weight: var(--peso-medio);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.processo-prototipo-texto {
  max-width: calc(122.4 * var(--j));
  color: var(--texto-apoio);
  font-size: calc(5.76 * var(--j));
  line-height: normal;
}

.processo-prototipo-acoes {
  display: flex;
  gap: calc(3.6 * var(--j));
}

.processo-prototipo-botao {
  padding: calc(3.96 * var(--j)) calc(7.2 * var(--j));
  border: calc(0.36 * var(--j)) solid var(--linha);
  border-radius: var(--raio-999);
  color: var(--texto);
  font-size: calc(5.04 * var(--j));
  font-weight: var(--peso-medio);
  line-height: normal;
  white-space: nowrap;
}

.processo-prototipo-botao-principal {
  border-color: transparent;
  background-color: var(--texto);
  color: var(--fundo);
}

/* Foto do bolo (a mesma da virada), no tamanho da imagem do Figma */
.processo-prototipo-imagem {
  display: block;
  flex: none;
  width: calc(144 * var(--j));
  height: calc(136.8 * var(--j));
  border-radius: calc(10.08 * var(--j));
  object-fit: cover;
}

/* Seleção sobre o título (posições relativas à janela) */
.processo-prototipo-selecao {
  position: absolute;
  top: calc(70.86 * var(--j));
  left: calc(16.52 * var(--j));
  width: calc(144.8 * var(--j));
  height: calc(42 * var(--j));
  border: calc(1.5 * var(--j)) solid var(--destaque);
}

.processo-prototipo-alca {
  position: absolute;
  width: calc(7 * var(--j));
  height: calc(7 * var(--j));
  border: calc(1.5 * var(--j)) solid var(--destaque);
  background-color: var(--texto);
}

.processo-prototipo-alca-1 { top: calc(67.36 * var(--j)); left: calc(13.02 * var(--j)); }
.processo-prototipo-alca-2 { top: calc(67.36 * var(--j)); left: calc(157.82 * var(--j)); }
.processo-prototipo-alca-3 { top: calc(109.36 * var(--j)); left: calc(13.02 * var(--j)); }
.processo-prototipo-alca-4 { top: calc(109.36 * var(--j)); left: calc(157.82 * var(--j)); }

.processo-prototipo-medida {
  position: absolute;
  top: calc(120.86 * var(--j));
  left: calc(16.52 * var(--j));
  padding: calc(3 * var(--j)) calc(8 * var(--j));
  border-radius: calc(6 * var(--j));
  background-color: var(--destaque);
  color: var(--cta-texto);
  font-family: var(--fonte-mono);
  font-size: calc(11 * var(--j));
  line-height: normal;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   04 · Editor de código
   ------------------------------------------------------------------ */
.processo-editor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 14px 8px;
  border-radius: 22px;
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.processo-editor-aba {
  margin-left: 16px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-coluna);
  line-height: normal;
}

/* O código rola na horizontal dentro do bloco, sem quebrar linha */
.processo-editor-codigo {
  display: flex;
  gap: 20px;
  width: 100%;
  margin-top: 6px;
  padding-inline: 20px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.processo-editor-codigo pre {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: var(--rotulo-numero-etapa);
  line-height: 1.5;
  white-space: pre;
}

/* 85%: o mínimo para 4,5:1 contra o fundo do editor é 69% no escuro e 82%
   no claro (medido); com 85% fica 6,4:1 e 4,9:1 */
.processo-editor-linhas {
  color: var(--texto-apoio);
  opacity: 0.85;
}

.processo-editor-texto {
  color: var(--destaque);
}

.processo-editor-texto .c-apoio { color: var(--texto-apoio); }

/* ------------------------------------------------------------------
   05 · Site no ar: mármore estático por tema + degradê com o token do fundo
   (no Figma o degradê tem cor fixa #0a0808; aqui acompanha o tema)
   ------------------------------------------------------------------ */
.processo-etapa-noar {
  background-color: var(--fundo);
}

.processo-noar-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.processo-marmore {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.processo-marmore-claro,
[data-tema="claro"] .processo-marmore-escuro {
  display: none;
}

[data-tema="claro"] .processo-marmore-claro {
  display: block;
}

.processo-noar-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 35%,
    color-mix(in srgb, var(--fundo) 92%, transparent) 100%);
}

/* Tema claro: véu reforçado. Com o degradê do Figma (0 em 35% → 92% em 100%),
   o número "05" (destaque, 13px) ficava com 3,66:1 sobre o rosa do mármore
   claro (exige 4,5:1). Aqui o degradê começa em 10% e chega a 92% em 62%,
   onde começa a legenda. O tema escuro segue o Figma. */
[data-tema="claro"] .processo-noar-veu {
  background: linear-gradient(to bottom,
    transparent 10%,
    color-mix(in srgb, var(--fundo) 92%, transparent) 62%,
    color-mix(in srgb, var(--fundo) 92%, transparent) 100%);
}

/* Pílula a 24px da legenda, centralizada (Figma: 280 × 53 em (155, 163)) */
.processo-etapa-noar .processo-ilustracao {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
}

.processo-noar-endereco {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 10px 10px 10px 18px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha);
  /* Figma: desfoque do fundo 24 (equivale a 10px no CSS) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.processo-noar-url {
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: var(--apoio);
  line-height: normal;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: duas colunas (a quinta etapa ocupa a linha inteira).
   Abaixo de 768px: uma coluna, na ordem das etapas.
   Espaçamentos provisórios até o mobile do Figma.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .processo-cabecalho {
    flex-direction: column;
    gap: 16px;
  }

  .processo-condicoes {
    max-width: 36rem;
    text-align: left;
  }

  .processo-etapas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }

  .processo-etapa:nth-child(n) {
    grid-column: auto;
    min-height: 0;
    gap: 28px;
  }

  .processo-etapa:nth-child(5) {
    grid-column: 1 / -1;
  }

  .processo-etapa:nth-child(n) .processo-ilustracao {
    min-height: 0;
    padding-bottom: 0;
  }

  .processo-etapa:nth-child(n).processo-etapa-noar .processo-ilustracao {
    min-height: 160px;
  }
}

@media (max-width: 767.98px) {
  .secao-processo {
    padding-top: var(--secao-respiro);
  }

  .processo-etapas {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .processo-etapa:nth-child(n) {
    padding: 24px;
  }

  .processo-etapa:nth-child(5) {
    grid-column: auto;
  }
}

/* Telas muito estreitas: a pílula da etapa Site no ar (280px) caberia com folga zero */
@media (max-width: 399.98px) {
  .processo-noar-url {
    font-size: var(--apoio-card);
  }
}