/* =========================================================
   CTA FINAL — CETIS
   SEÇÃO FULL WIDTH
========================================================= */

.cta-section {
  position: relative;

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

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f4fafc 0%,
      #ffffff 48%,
      #edf7fb 100%
    );

  isolation: isolate;
}


/* =========================================================
   CONTAINER
========================================================= */

.cta-container {
  position: relative;

  display: grid;

  grid-template-columns: 48% 52%;

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

  margin: 0;
  padding: 0;

  overflow: hidden;
}


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

.cta-content {
  position: relative;

  z-index: 4;

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

  padding:
    90px
    clamp(45px, 7vw, 115px);

  background:
    linear-gradient(
      135deg,
      #f5fafc 0%,
      #ffffff 75%
    );
}


/* =========================================================
   DETALHE DECORATIVO
========================================================= */

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

  position: absolute;

  top: 0;
  right: -1px;

  width: 1px;
  height: 100%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(8, 127, 189, 0.18),
      transparent
    );
}


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

  position: absolute;

  width: 300px;
  height: 300px;

  left: -180px;
  bottom: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(8, 127, 189, 0.08),
      transparent 70%
    );

  pointer-events: none;
}


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

.cta-eyebrow {
  position: relative;

  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 27px;

  padding: 8px 14px;

  color: #087fbd;

  background:
    rgba(8, 127, 189, 0.055);

  border:
    1px solid rgba(8, 127, 189, 0.18);

  border-radius: 999px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


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

  width: 6px;
  height: 6px;

  margin-right: 9px;

  border-radius: 50%;

  background: #087fbd;

  box-shadow:
    0 0 0 4px rgba(8, 127, 189, 0.08);
}


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

.cta-content h2 {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 660px;

  margin: 0 0 27px;

  color: #183a5c;

  font-size:
    clamp(
      2.7rem,
      4.4vw,
      4.35rem
    );

  line-height: 1.02;

  font-weight: 750;

  letter-spacing: -0.052em;
}


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

.cta-content p {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 570px;

  margin: 0 0 38px;

  color: #5f788d;

  font-size: 16px;

  line-height: 1.78;
}


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

.cta-actions {
  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;
}


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

.cta-actions .btn {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 56px;

  padding: 0 27px;

  overflow: hidden;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 750;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}


/* =========================================================
   EFEITO INTERNO DO BOTÃO
========================================================= */

.cta-actions .btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.20),
      transparent
    );

  transform: skewX(-20deg);

  transition:
    left 0.6s ease;

  pointer-events: none;
}


.cta-actions .btn:hover::before {
  left: 140%;
}


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

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

  background:
    linear-gradient(
      135deg,
      #0089ce 0%,
      #087fbd 100%
    );

  border:
    1px solid rgba(8, 127, 189, 0.25);

  box-shadow:
    0 14px 32px rgba(8, 127, 189, 0.20);
}


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

  filter: brightness(1.04);

  box-shadow:
    0 20px 42px rgba(8, 127, 189, 0.28);
}


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

  stroke-width: 2.2;

  transition:
    transform 0.3s ease;
}


.cta-actions .btn:hover i {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   IMAGEM
========================================================= */

.cta-image {
  position: relative;

  width: 100%;
  height: 650px;

  overflow: hidden;

  background: #dfeef4;
}


/* =========================================================
   FOTO
========================================================= */

.cta-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center center;

  transform: scale(1.015);

  filter:
    saturate(0.88)
    contrast(0.98);

  transition:
    transform 1s cubic-bezier(
      0.2,
      0.65,
      0.25,
      1
    ),
    filter 0.7s ease;
}


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

  filter:
    saturate(1)
    contrast(1);
}


/* =========================================================
   INTEGRAÇÃO DA IMAGEM COM O LAYOUT
========================================================= */

.cta-image-overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      #f5fafc 0%,
      rgba(245, 250, 252, 0.90) 3%,
      rgba(245, 250, 252, 0.40) 11%,
      rgba(245, 250, 252, 0.08) 24%,
      transparent 42%
    );
}


/* =========================================================
   LUZ AZUL SOBRE A IMAGEM
========================================================= */

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

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(8, 127, 189, 0.13),
      transparent 42%
    );
}


/* =========================================================
   ELEMENTO TECNOLÓGICO DECORATIVO
========================================================= */

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

  position: absolute;

  z-index: 2;

  right: 8%;
  bottom: 8%;

  width: 105px;
  height: 105px;

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

  border-radius: 50%;

  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.055),
    0 0 0 36px rgba(255, 255, 255, 0.035);

  opacity: 0.8;

  pointer-events: none;
}


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

@media (max-width: 1000px) {

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


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

    grid-template-columns:
      50% 50%;
  }


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


  .cta-content h2 {
    font-size:
      clamp(
        2.35rem,
        4.5vw,
        3.35rem
      );
  }


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


  .cta-image {
    height: 570px;
  }

}


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

@media (max-width: 760px) {

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


  .cta-container {
    min-height: auto;

    grid-template-columns: 1fr;
  }


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

    padding:
      75px
      40px;
  }


  .cta-content::before {
    display: none;
  }


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

    font-size:
      clamp(
        2.55rem,
        7vw,
        3.5rem
      );
  }


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

    font-size: 15.5px;
  }


  .cta-image {
    height: 440px;
  }


  .cta-image-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(245, 250, 252, 0) 0%,
        rgba(245, 250, 252, 0.04) 35%,
        rgba(245, 250, 252, 0.28) 100%
      );
  }

}


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

@media (max-width: 560px) {

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

    padding:
      60px
      24px;
  }


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

    font-size: 10px;

    letter-spacing: 0.13em;
  }


  .cta-content h2 {
    font-size: 2.35rem;

    line-height: 1.06;

    letter-spacing: -0.045em;
  }


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

    font-size: 14.5px;

    line-height: 1.7;
  }


  .cta-actions {
    width: 100%;
  }


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

    min-height: 54px;
  }


  .cta-image {
    height: 340px;
  }


  .cta-image::before {
    width: 70px;
    height: 70px;

    right: 8%;
    bottom: 8%;
  }

}


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

@media (max-width: 380px) {

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

    padding:
      52px
      20px;
  }


  .cta-content h2 {
    font-size: 2.08rem;
  }


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


  .cta-image {
    height: 285px;
  }

}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .cta-section *,
  .cta-section *::before,
  .cta-section *::after {
    transition: none !important;
    animation: none !important;
  }

}