/*
  Cap 9 · Convite (Figma 123:2 › 127:130, parte de cima), 1440 × 900.
  Medidas do Figma:
    mármore 1440 × 900; o rodapé começa em 850 (sobe 50px, cantos de cima
      com raio 40);
    véu do centro: elipse 1100 × 600 centrada em (720, 485), cor fundo a 75%,
      desfoque 130; véu do topo: faixa de −140 a 120, cor fundo, desfoque 90;
    bloco de texto 758 × 211 a 379px do topo, centralizado, gap 24:
      título Geist Medium 64 (−3%) com "site" em Instrument Serif Italic 74
      (−3%, destaque); texto Geist 19 (texto-apoio), 12px abaixo;
      botão 234 × 54, cta/fundo, padding 16/30, Geist Medium 17.
  Véus em gradiente com curva gaussiana (desvio de 0,4 × o desfoque do Figma,
  a mesma conversão medida no hero): centro σ ≈ 52px, topo σ = 36px.
*/
/* A partir de 1024px (faixas B e C), esta seção tem regras em assets/css/encaixe.css */

.secao-convite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: center;
  /* 379 em cima + 211 de conteúdo + 310 embaixo = 900 (os 50 de baixo ficam
     sob o rodapé) */
  padding: 379px var(--margem-lateral) 310px;
  margin-bottom: -50px;
  background-color: var(--fundo);
}

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

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

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

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

/* Elipse do centro (semieixos 550 × 300, a 54% da altura) + faixa do topo */
.convite-veus {
  --veu-rx: clamp(160px, 38.19vw, 550px);
  --veu-ry: clamp(240px, 20.83vw, 300px);
  position: absolute;
  inset: 0;
  background:
    radial-gradient(var(--veu-rx) var(--veu-ry) at 50% 54%,
      color-mix(in srgb, var(--fundo) 75%, transparent) 0%,
      color-mix(in srgb, var(--fundo) 74.5%, transparent) 60%,
      color-mix(in srgb, var(--fundo) 72.7%, transparent) 70%,
      color-mix(in srgb, var(--fundo) 67.1%, transparent) 80%,
      color-mix(in srgb, var(--fundo) 55.1%, transparent) 90%,
      color-mix(in srgb, var(--fundo) 37.5%, transparent) 100%,
      color-mix(in srgb, var(--fundo) 20%, transparent) 110%,
      color-mix(in srgb, var(--fundo) 7.9%, transparent) 120%,
      color-mix(in srgb, var(--fundo) 2.3%, transparent) 130%,
      transparent 150%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--fundo) 100%, transparent) 0px,
      color-mix(in srgb, var(--fundo) 95%, transparent) 60px,
      color-mix(in srgb, var(--fundo) 80%, transparent) 90px,
      color-mix(in srgb, var(--fundo) 66%, transparent) 105px,
      color-mix(in srgb, var(--fundo) 50%, transparent) 120px,
      color-mix(in srgb, var(--fundo) 34%, transparent) 135px,
      color-mix(in srgb, var(--fundo) 20%, transparent) 150px,
      color-mix(in srgb, var(--fundo) 8%, transparent) 170px,
      color-mix(in srgb, var(--fundo) 2.6%, transparent) 190px,
      transparent 228px);
}

/* ------------------------------------------------------------------
   Texto e botão
   ------------------------------------------------------------------ */
.convite-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.convite-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.convite-titulo {
  color: var(--texto);
  font-size: clamp(2.25rem, 4.445vw, var(--titulo-convite));
  font-weight: var(--peso-medio);
  letter-spacing: var(--titulo-convite-letra);
  line-height: var(--titulo-convite-altura);
}

.convite-titulo em {
  color: var(--destaque);
  font-family: var(--fonte-serif);
  font-size: clamp(2.625rem, 5.14vw, var(--titulo-convite-serif));
  font-style: italic;
  font-weight: var(--peso-regular);
  letter-spacing: var(--titulo-convite-serif-letra);
}

.convite-apoio {
  max-width: 640px;
  color: var(--texto-apoio);
  font-size: var(--apoio-grande);
  line-height: normal;
}

.convite-botao {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 16px 30px;
  border-radius: var(--raio-999);
  background-color: var(--cta-fundo);
  color: var(--cta-texto);
  font-size: var(--apoio-resposta);
  font-weight: var(--peso-medio);
  line-height: normal;
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Telas menores: respiros proporcionais (provisório até o mobile do Figma)
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .secao-convite {
    padding-block: 240px 230px;
  }
}

@media (max-width: 767.98px) {
  .secao-convite {
    padding-block: 180px 190px;
  }

  .convite-veus {
    --veu-rx: 55vw;
  }

  .convite-apoio {
    text-wrap: balance;
  }
}