/*
  Cap 3 · A virada (Figma 123:2 › "CAP 3 · A virada" 123:90), 1440 × 1184 no desktop.
  Medidas do Figma:
    respiro de 120px no topo e na base;
    título centralizado, 760px (Geist Medium 56, 106%, −2%); apoio 607px
      (Geist 19, 150%, texto-apoio), 24px abaixo do título;
    bloco 1200 × 680, 64px abaixo do apoio, raio 40, borda 1px linha, mármore;
    janela 787 × 443 em (206, 139) no bloco: fundo superficie/janela, borda
      0,82px linha, raio 29,52, sombra 0 40 80 #000 a 50%;
      barra de 46px com 3 pontos de 9px (texto-apoio a 45%) e divisória;
      site: padding 32,8 / 32,8 / 32,8 / 45,92, gap 39,36; título 37,72 (104%,
      −3%), texto 13,12, botões 11,48 com padding 9,02 / 16,4; foto 328 × 312,
      raio 22,96;
    cards: padding 22, raio 28, título Geist Medium 22 (−1%), texto 14/145%;
      vidro (Mais clientes, Confiança): superficie/janela + desfoque do fundo 30,
        borda 1px linha, sombra 0 24 48 #000 a 40%;
      invertido (Ganho de tempo): cta/fundo, texto cta/texto (descrição a 70%);
      posições no bloco: (21, 173) 300px · (873, 176) 290px · (620, 479) 300px.

  Unidades:
  - .virada-limite é um container: 1cqi = 1% da largura do bloco. Posições
    horizontais e o tamanho da janela usam cqi (1px do Figma = 100cqi / 1200),
    para acompanhar o bloco entre 1024 e 1200px.
  - .virada-janela é outro container: tudo dentro dela escala com a largura
    da janela (1px do Figma = 100cqi / 787). É uma ilustração, então o texto
    dela acompanha o tamanho, como numa imagem.
  - Os cards são conteúdo real: fonte e largura em px, sem escalar.
  - Posições do Figma contam a partir da borda de fora do bloco; no CSS, a
    borda de 1px já desloca o conteúdo, por isso o "− 1px" nas posições.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-virada {
  padding-block: var(--secao-respiro);
  background-color: var(--fundo);
}

/* ------------------------------------------------------------------
   Título e apoio
   ------------------------------------------------------------------ */
.virada-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.virada-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);
}

.virada-apoio {
  /* Caixa de 607px no Figma. No navegador a 1ª linha mede 611px e quebraria
     em 3 linhas; 620px mantém as 2 linhas do Figma. */
  max-width: 620px;
  color: var(--texto-apoio);
  font-size: var(--apoio-grande);
  line-height: var(--apoio-grande-altura);
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   Bloco de mármore (desktop: janela e cards soltos por cima)
   ------------------------------------------------------------------ */
.virada-limite {
  container-type: inline-size;
  margin-top: 64px;
}

.virada-bloco {
  --figma: calc(100cqi / 1200);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 680px de altura em 1200px de largura; nunca menos que o necessário
     para o card de baixo caber (ver .virada-card-seu) */
  height: max(calc(680 * var(--figma)), calc(139px + 443 * var(--figma) - 103px + 160px));
  border: 1px solid var(--linha);
  border-radius: var(--raio-40);
  background-color: var(--fundo);
}

.virada-marmore {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cada tema mostra o seu mármore; o escondido, com loading="lazy", não baixa */
.virada-marmore-claro,
[data-tema="claro"] .virada-marmore-escuro {
  display: none;
}

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

/* ------------------------------------------------------------------
   Janela (ilustração)
   ------------------------------------------------------------------ */
.virada-janela {
  container-type: inline-size;
  position: absolute;
  top: 138px;
  left: calc(206 * var(--figma) - 1px);
  width: calc(787 * var(--figma));
}

.virada-janela-quadro {
  --j: calc(100cqi / 787);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: calc(0.82 * var(--j)) solid var(--linha);
  border-radius: calc(29.52 * var(--j));
  background-color: var(--superficie-janela);
  box-shadow: 0 calc(40 * var(--j)) calc(80 * var(--j)) rgb(0 0 0 / 0.5);
}

.virada-janela-barra {
  display: flex;
  align-items: center;
  gap: calc(6.56 * var(--j));
  height: calc(46 * var(--j));
  padding-inline: calc(18.04 * var(--j));
  border-bottom: calc(0.82 * var(--j)) solid var(--linha);
}

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

.virada-janela-site {
  display: flex;
  align-items: center;
  /* Área do site com altura fixa de 395 no Figma (foto centralizada nela) */
  min-height: calc(395 * var(--j));
  gap: calc(39.36 * var(--j));
  padding: calc(32.8 * var(--j)) calc(32.8 * var(--j)) calc(32.8 * var(--j)) calc(45.92 * var(--j));
}

.virada-janela-hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(16.4 * var(--j));
  min-width: 0;
}

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

.virada-janela-texto {
  max-width: calc(279 * var(--j));
  color: var(--texto-apoio);
  font-size: calc(13.12 * var(--j));
  line-height: normal;
}

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

.virada-janela-botao {
  padding: calc(9.02 * var(--j)) calc(16.4 * var(--j));
  border: calc(0.82 * var(--j)) solid var(--linha);
  border-radius: var(--raio-999);
  color: var(--texto);
  font-size: calc(11.48 * var(--j));
  font-weight: var(--peso-medio);
  line-height: normal;
  white-space: nowrap;
}

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

/* Esqueleto: só a partir de 1024px (encaixe.css) */
.virada-janela-esqueleto {
  display: none;
}

.virada-janela-foto {
  flex: none;
  width: calc(328 * var(--j));
  height: auto;
  border-radius: calc(22.96 * var(--j));
  object-fit: cover;
}

/* ------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------ */
.virada-cards {
  padding: 0;
  list-style: none;
}

.virada-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: var(--raio-28);
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--linha), 0 24px 48px rgb(0 0 0 / 0.4);
  /* Figma: desfoque do fundo 30 (equivale a 12px no CSS, mesma conversão do véu) */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.virada-card-encontrado {
  top: 172px;
  left: calc(21 * var(--figma) - 1px);
  width: 300px;
}

/* Figma: 290px (3 linhas, como no Figma) */
.virada-card-confiavel {
  top: 175px;
  right: calc(37 * var(--figma) - 1px);
  width: 290px;
}

/* 103px acima da base da janela, como no Figma (479 = 139 + 443 − 103) */
.virada-card-seu {
  top: calc(138px + 443 * var(--figma) - 103px);
  left: calc(620 * var(--figma) - 1px);
  width: 300px;
}

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

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

.virada-card-seu {
  background-color: var(--cta-fundo);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.virada-card-seu .virada-card-titulo {
  color: var(--cta-texto);
}

.virada-card-seu .virada-card-texto {
  color: color-mix(in srgb, var(--cta-texto) 70%, transparent);
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: a janela ocupa a largura do bloco e os cards ficam
   logo abaixo dela, em coluna, com largura total, sem sobrepor.
   Respiros provisórios até o mobile do Figma.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .virada-limite {
    margin-top: 48px;
  }

  .virada-bloco {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    padding: 40px;
  }

  .virada-janela,
  .virada-card {
    position: static;
    width: auto;
  }

  .virada-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* Abaixo de 768px: respiro do bloco igual ao da busca (32px) */
@media (max-width: 767.98px) {
  .virada-limite {
    margin-top: 40px;
  }

  .virada-bloco {
    padding: 32px;
    gap: 16px;
  }

  .virada-card {
    padding: 20px;
  }
}