/* ==========================================================
   SEÇÃO 1 — Print: Secao-1-LP-FormacaoPrime.png (1920 × 1000)

   Estrutura:
   .secao-1          → contêiner vermelho, largura total da tela
   .secao-1__palco   → "palco" 1920 × 1000 com a foto + textos,
                       sempre na mesma posição entre si

   Zoom: as medidas usam --u (1 px do design). Normalmente --u = 1px,
   então o zoom do navegador funciona igual ao resto da página.
   Só quando a tela fica estreita demais para mostrar a zona
   protegida (x 340 → 1800: texto + Roberta inteira), --u diminui
   para caber — a Roberta nunca é cortada.
   ========================================================== */

.secao-1 {
  --zona-ini: 340;   /* início da zona protegida (px do design) */
  --zona-fim: 1800;  /* fim da zona protegida (px do design)    */
  --u: min(1px, 100cqw / 1460); /* 1460 = zona-fim − zona-ini   */

  position: relative;
  height: calc(1000 * var(--u));
  overflow: hidden;
  /* cores das bordas da foto, para o fundo continuar sem emenda */
  background: linear-gradient(90deg, #400603, #450703);
  color: var(--cor-clara);
}

.secao-1__palco {
  position: absolute;
  top: 0;
  /* centralizado; se a tela for estreita, desliza para manter a zona protegida visível */
  left: clamp(
    calc(var(--zona-ini) * var(--u) * -1),
    calc((100cqw - 1920 * var(--u)) / 2),
    calc(100cqw - var(--zona-fim) * var(--u))
  );
  width: calc(1920 * var(--u));
  height: calc(1000 * var(--u));
  background-image: url("../../assets/img/secao-1/capa-roberta-1920.webp");
  background-image: image-set(
    url("../../assets/img/secao-1/capa-roberta-1920.webp") 1x,
    url("../../assets/img/secao-1/capa-roberta-3840.webp") 2x
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* bordas da foto se dissolvem no vermelho do contêiner */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 93.75%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 93.75%, transparent 100%);
}

.secao-1__conteudo {
  position: absolute;
  top: calc(270 * var(--u));
  left: calc(369 * var(--u));
}

.secao-1__titulo {
  margin: 0;
  line-height: 0;
}

.secao-1__titulo img {
  width: calc(555 * var(--u));
}

.secao-1__texto {
  margin: calc(41 * var(--u)) 0 0;
  font-size: calc(24 * var(--u));
  line-height: calc(35 * var(--u));
  font-weight: 400;
}

.secao-1__texto strong {
  font-weight: 700;
}

.secao-1__cta {
  margin-top: calc(36 * var(--u));
  width: calc(443 * var(--u));
  height: calc(66 * var(--u));
  font-size: calc(24 * var(--u));
  border-width: max(1px, calc(2 * var(--u)));
}