/* =========================================================
   CTA FINAL
   B2B TECNOLOGIA
   SEÇÃO FULL WIDTH
   ========================================================= */

.cta-section {
  position: relative;
  width: 100%;
  min-height: 620px;

  overflow: hidden;

  background: #071321;
}


/* =========================================================
   CONTAINER FULL WIDTH
   ========================================================= */

.cta-container {
  position: relative;

  width: 100%;
  min-height: 620px;

  display: grid;
  grid-template-columns: 46% 54%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.cta-content {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 90px clamp(40px, 7vw, 120px);

  background:
    linear-gradient(
      135deg,
      #0b1b2c 0%,
      #091725 100%
    );
}


/* =========================================================
   EYEBROW
   ========================================================= */

.cta-eyebrow {
  display: flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 26px;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: #55b8ff;
}


.cta-eyebrow::before {
  content: "";

  width: 32px;
  height: 1px;

  margin-right: 13px;

  background: #55b8ff;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.cta-content h2 {
  width: 100%;
  max-width: 650px;

  margin: 0 0 26px;

  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.03;

  font-weight: 700;

  letter-spacing: -0.045em;

  color: #ffffff;
}


/* =========================================================
   TEXTO
   ========================================================= */

.cta-content p {
  width: 100%;
  max-width: 570px;

  margin: 0 0 38px;

  font-size: 17px;
  line-height: 1.7;

  color: rgba(255, 255, 255, 0.68);
}


/* =========================================================
   AÇÕES
   ========================================================= */

.cta-actions {
  display: flex;
  align-items: center;
}


.cta-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 54px;

  padding: 0 26px;

  border-radius: 11px;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}


/* =========================================================
   BOTÃO PRINCIPAL
   ========================================================= */

.cta-actions .btn-primary {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #087cff 0%,
      #00a8ff 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 14px 34px rgba(0, 132, 255, 0.25);
}


.cta-actions .btn-primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 18px 42px rgba(0, 132, 255, 0.38);
}


.cta-actions i {
  width: 17px;
  height: 17px;
}


/* =========================================================
   IMAGEM — FULL HEIGHT
   ========================================================= */

.cta-image {
  position: relative;

  width: 100%;
  height: 620px;

  overflow: hidden;

  background: #081522;
}


.cta-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;

  transform: scale(1.02);

  transition:
    transform 0.8s ease;
}


.cta-section:hover .cta-image img {
  transform: scale(1.05);
}


/* =========================================================
   GRADIENTE DE INTEGRAÇÃO
   ========================================================= */

.cta-image-overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      #0b1b2c 0%,
      rgba(11, 27, 44, 0.82) 7%,
      rgba(11, 27, 44, 0.28) 20%,
      rgba(11, 27, 44, 0.04) 42%,
      rgba(11, 27, 44, 0) 65%
    );
}


/* =========================================================
   LUZ SUTIL SOBRE A FOTOGRAFIA
   ========================================================= */

.cta-image::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 55%;
  height: 100%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(0, 157, 255, 0.14),
      transparent 58%
    );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .cta-section {
    min-height: 560px;
  }


  .cta-container {
    min-height: 560px;

    grid-template-columns: 48% 52%;
  }


  .cta-content {
    padding: 70px 50px;
  }


  .cta-content h2 {
    font-size: clamp(38px, 4.5vw, 54px);
  }


  .cta-content p {
    font-size: 16px;
  }


  .cta-image {
    height: 560px;
  }

}


/* =========================================================
   TABLET PEQUENO
   ========================================================= */

@media (max-width: 760px) {

  .cta-section {
    min-height: auto;
  }


  .cta-container {
    min-height: auto;

    grid-template-columns: 1fr;
  }


  .cta-content {
    min-height: 500px;

    padding: 70px 40px;
  }


  .cta-content h2 {
    max-width: 650px;

    font-size: clamp(40px, 7vw, 56px);
  }


  .cta-image {
    height: 440px;
  }


  .cta-image-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(11, 27, 44, 0) 0%,
        rgba(11, 27, 44, 0.08) 35%,
        rgba(11, 27, 44, 0.45) 100%
      );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .cta-content {
    min-height: 500px;

    padding: 58px 24px;
  }


  .cta-eyebrow {
    margin-bottom: 22px;

    font-size: 11px;
  }


  .cta-content h2 {
    font-size: 38px;

    line-height: 1.06;

    letter-spacing: -0.04em;
  }


  .cta-content p {
    margin-bottom: 30px;

    font-size: 15px;

    line-height: 1.65;
  }


  .cta-actions {
    width: 100%;
  }


  .cta-actions .btn {
    width: 100%;
  }


  .cta-image {
    height: 330px;
  }

}


/* =========================================================
   MOBILE PEQUENO
   ========================================================= */

@media (max-width: 380px) {

  .cta-content {
    min-height: 520px;

    padding: 50px 20px;
  }


  .cta-content h2 {
    font-size: 34px;
  }


  .cta-image {
    height: 280px;
  }

}