/* Respiro final antes do footer, espelhando a faixa de encerramento do Figma. */
.security-section {
  padding: 122px 0 120px;
}

/* Shell central com a mesma largura das faixas largas do projeto. */
.security-shell {
  width: min(1279px, calc(100% - 48px));
  margin: 0 auto;
}

/* Card principal roxo com a ilustração 3D invadindo a área direita. */
.security-card {
  position: relative;
  min-height: 408px;
  padding: 90px;
  border-radius: 45px;
  background: #845cff;
}

/* Coluna textual ancorada à esquerda. */
.security-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 544px;
}

/* Título branco com peso médio, fiel ao frame desktop. */
.security-title {
  width: 542px;
  margin: 0;
  color: #ffffff;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.356;
  letter-spacing: 0.76px;
}

/* Texto de apoio também em branco. */
.security-description {
  width: 544px;
  margin: 0;
  color: #ffffff;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.47;
}

/* CTA claro com largura definida pelo rótulo no desktop. */
.security-cta {
  justify-self: start;
}

/* Largura do label para manter o alinhamento do Figma. */
.security-cta__label {
  width: 180px;
}

/* Ilustração 3D posicionada à direita com extrapolação superior. */
.security-visual {
  position: absolute;
  top: -31px;
  left: 532px;
  width: 747px;
  height: 542px;
  pointer-events: none;
}

/* Asset encaixado no bloco visual. */
.security-visual__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Tablet: centraliza o conteúdo e reduz a ilustração. */
@media (max-width: 1180px) {
  .security-section {
    padding: 96px 0 104px;
  }

  .security-shell {
    width: min(720px, calc(100% - 48px));
  }

  .security-card {
    min-height: 0;
    padding: 240px 44px 56px;
    border-radius: 36px;
    display: flex;
    justify-content: center;
  }

  .security-copy {
    width: min(100%, 560px);
    align-items: center;
    text-align: center;
  }

  .security-title,
  .security-description {
    width: 100%;
  }

  .security-title {
    font-size: 34px;
    letter-spacing: 0.68px;
  }

  .security-description {
    font-size: 18px;
  }

  .security-cta {
    margin: 0 auto;
  }

  .security-visual {
    top: -20px;
    left: 50%;
    width: min(470px, calc(100% - 80px));
    height: auto;
    transform: translateX(-50%);
  }

  .security-visual__image {
    height: auto;
  }
}

/* Mobile: replica o card compacto do node 951:6904. */
@media (max-width: 480px) {
  .security-section {
    padding: 84px 0;
  }

  .security-shell {
    width: min(332px, calc(100% - 32px));
  }

  .security-card {
    width: 332px;
    min-height: 495px;
    padding: 221px 18px 22px;
    border-radius: 30px;
    display: flex;
    justify-content: flex-end;
  }

  .security-copy {
    width: 296px;
    gap: 41px;
    align-items: center;
    text-align: center;
  }

  .security-title {
    width: 296px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.52px;
  }

  .security-description {
    width: 296px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.32px;
  }

  .security-cta {
    width: 272.308px;
    margin: 0 auto;
  }

  .security-cta__label {
    width: 181.659px;
    font-size: 13.46px;
    letter-spacing: 0.2692px;
  }

  .security-visual {
    top: -35px;
    left: 0;
    width: 332px;
    height: 256px;
    transform: none;
  }

  .security-visual__image {
    width: 332px;
    height: 256px;
    object-fit: contain;
  }
}