/* =========================================================
   ECOSSISTEMA FINANCEIRO — CETIS
========================================================= */

.fintech {
  position: relative;

  min-height: 680px;

  padding: 110px 0;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #eef7fb 0%,
      #f8fbfd 52%,
      #edf6fa 100%
    );

  color: #183a5c;
}


/* =========================================================
   FUNDO DECORATIVO
========================================================= */

.fintech-fundo {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(0, 136, 204, 0.10),
      transparent 28rem
    );
}


/* =========================================================
   LINHAS DECORATIVAS
========================================================= */

.fintech::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(8, 127, 189, 0.08),
      transparent
    );

  pointer-events: none;
}


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

.fintech-container {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(460px, 1.05fr);

  align-items: center;

  gap: 80px;

  min-height: 500px;
}


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

.fintech-conteudo {
  position: relative;

  z-index: 3;

  max-width: 650px;
}


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

.fintech .eyebrow {
  display: inline-flex;

  align-items: center;

  margin-bottom: 22px;

  padding: 8px 15px;

  color: #087fbd;

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

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

  border-radius: 999px;

  font-size: 0.67rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


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

.fintech h2 {
  max-width: 650px;

  margin: 0 0 25px;

  color: #183a5c;

  font-size: clamp(
    2.5rem,
    4.8vw,
    4.1rem
  );

  line-height: 1.03;

  letter-spacing: -0.05em;
}


.fintech h2 span {
  display: block;

  color: #087fbd;

  background:
    linear-gradient(
      135deg,
      #0088cc,
      #087fbd
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESTAQUE
========================================================= */

.fintech-destaque {
  max-width: 620px;

  margin: 0 0 17px;

  color: #365873;

  font-size: 1.08rem;

  line-height: 1.75;
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.fintech-descricao {
  max-width: 610px;

  margin: 0;

  color: #647b8f;

  font-size: 0.94rem;

  line-height: 1.75;
}


/* =========================================================
   CTA
========================================================= */

.fintech-cta {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  margin-top: 32px;

  padding: 15px 22px;

  text-decoration: none;
}


.fintech-cta span:last-child {
  font-size: 1.1rem;

  transition:
    transform 0.25s ease;
}


.fintech-cta:hover span:last-child {
  transform: translateX(4px);
}


/* =========================================================
   ÁREA VISUAL
========================================================= */

.fintech-visual {
  position: relative;

  width: 100%;

  min-height: 500px;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* =========================================================
   ÓRBITAS
========================================================= */

.fintech-orbita {
  position: absolute;

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

  border-radius: 50%;

  pointer-events: none;
}


.fintech-orbita-1 {
  width: 390px;

  height: 390px;

  animation:
    fintechRotate 24s linear infinite;
}


.fintech-orbita-2 {
  width: 280px;

  height: 280px;

  border-color:
    rgba(8, 127, 189, 0.20);

  animation:
    fintechRotateReverse 18s linear infinite;
}


.fintech-orbita-1::before,
.fintech-orbita-2::before {
  content: "";

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #087fbd;

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


.fintech-orbita-1::before {
  top: 45px;

  left: 50%;

  transform: translateX(-50%);
}


.fintech-orbita-2::before {
  right: 30px;

  top: 50%;

  transform: translateY(-50%);
}


/* =========================================================
   NÚCLEO
========================================================= */

.fintech-nucleo {
  position: relative;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 190px;

  height: 190px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #e8f5fa
    );

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

  border-radius: 50%;

  box-shadow:
    0 25px 65px rgba(24, 58, 92, 0.13),
    0 0 50px rgba(8, 127, 189, 0.08);

  text-align: center;
}


.fintech-nucleo::before {
  content: "";

  position: absolute;

  inset: 9px;

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

  border-radius: 50%;
}


.fintech-nucleo-label {
  position: relative;

  color: #087fbd;

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.16em;
}


.fintech-nucleo strong {
  position: relative;

  margin-top: 5px;

  color: #183a5c;

  font-size: 1.7rem;

  line-height: 1;

  letter-spacing: -0.04em;
}


.fintech-nucleo small {
  position: relative;

  margin-top: 8px;

  color: #7a8d9b;

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.10em;
}


/* =========================================================
   CONEXÕES
========================================================= */

.fintech-conexao {
  position: absolute;

  z-index: 1;

  width: 150px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(8, 127, 189, 0.08),
      rgba(8, 127, 189, 0.32)
    );

  transform-origin: left center;
}


.fintech-conexao::after {
  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #087fbd;

  transform: translateY(-50%);

  box-shadow:
    0 0 12px rgba(8, 127, 189, 0.25);
}


.fintech-conexao-1 {
  top: 28%;

  left: 50%;

  transform: rotate(-28deg);
}


.fintech-conexao-2 {
  top: 32%;

  left: 50%;

  transform: rotate(25deg);
}


.fintech-conexao-3 {
  top: 67%;

  left: 50%;

  transform: rotate(28deg);
}


.fintech-conexao-4 {
  top: 70%;

  left: 50%;

  transform: rotate(-24deg);
}


/* =========================================================
   PONTOS
========================================================= */

.fintech-ponto {
  position: absolute;

  z-index: 4;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  background:
    rgba(255, 255, 255, 0.92);

  border:
    1px solid rgba(24, 58, 92, 0.10);

  border-radius: 12px;

  box-shadow:
    0 12px 30px rgba(24, 58, 92, 0.08);

  color: #183a5c;

  font-size: 0.57rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

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


.fintech-ponto:hover {
  border-color:
    rgba(8, 127, 189, 0.25);

  box-shadow:
    0 16px 35px rgba(24, 58, 92, 0.11);
}


.fintech-ponto-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 27px;

  height: 27px;

  color: #087fbd;

  background:
    #e8f5fa;

  border-radius: 8px;

  font-size: 0.65rem;
}


.fintech-ponto-1 {
  top: 13%;

  left: 4%;
}


.fintech-ponto-2 {
  top: 16%;

  right: 3%;
}


.fintech-ponto-3 {
  bottom: 15%;

  left: 2%;
}


.fintech-ponto-4 {
  right: 4%;

  bottom: 12%;
}


/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes fintechRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes fintechRotateReverse {

  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }

}


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

@media (max-width: 1000px) {

  .fintech {
    padding: 90px 0;
  }


  .fintech-container {
    grid-template-columns: 1fr;

    gap: 55px;
  }


  .fintech-conteudo {
    max-width: 720px;
  }


  .fintech-visual {
    min-height: 480px;
  }

}


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

@media (max-width: 650px) {

  .fintech {
    padding: 75px 0;
  }


  .fintech-container {
    gap: 30px;
  }


  .fintech h2 {
    font-size: clamp(
      2rem,
      9vw,
      3rem
    );
  }


  .fintech-destaque {
    font-size: 0.98rem;
  }


  .fintech-descricao {
    font-size: 0.88rem;
  }


  .fintech-visual {
    min-height: 390px;
  }


  .fintech-orbita-1 {
    width: 300px;

    height: 300px;
  }


  .fintech-orbita-2 {
    width: 215px;

    height: 215px;
  }


  .fintech-nucleo {
    width: 145px;

    height: 145px;
  }


  .fintech-nucleo strong {
    font-size: 1.35rem;
  }


  .fintech-ponto {
    padding: 8px 10px;

    font-size: 0.48rem;
  }


  .fintech-ponto-icon {
    width: 23px;

    height: 23px;
  }


  .fintech-ponto-1 {
    top: 8%;

    left: 0;
  }


  .fintech-ponto-2 {
    top: 10%;

    right: 0;
  }


  .fintech-ponto-3 {
    bottom: 8%;

    left: 0;
  }


  .fintech-ponto-4 {
    right: 0;

    bottom: 7%;
  }


  .fintech-conexao {
    width: 105px;
  }

}


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

@media (max-width: 400px) {

  .fintech-visual {
    min-height: 350px;
  }


  .fintech-orbita-1 {
    width: 260px;

    height: 260px;
  }


  .fintech-orbita-2 {
    width: 185px;

    height: 185px;
  }


  .fintech-nucleo {
    width: 130px;

    height: 130px;
  }


  .fintech-nucleo strong {
    font-size: 1.2rem;
  }


  .fintech-ponto {
    padding: 7px 8px;

    gap: 6px;
  }


  .fintech-ponto span {
    font-size: 0.44rem;
  }

}
/* =========================================================
   FINTECH — CORREÇÃO DA ESTRUTURA
   DUAS COLUNAS — CETIS
========================================================= */

.fintech-container {
  position: relative;

  z-index: 2;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(520px, 1.1fr);

  align-items: center;

  gap: 70px;

  min-height: 560px;
}


/* =========================================================
   COLUNA ESQUERDA — TEXTO
========================================================= */

.fintech-conteudo {
  position: relative;

  z-index: 5;

  width: 100%;

  max-width: 620px;
}


/* =========================================================
   COLUNA DIREITA — DESENHO
========================================================= */

.fintech-visual {
  position: relative;

  width: 100%;

  min-height: 540px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: visible;
}


/* =========================================================
   RESPONSIVO — TABLET
========================================================= */

@media (max-width: 1050px) {

  .fintech-container {
    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(430px, 1.15fr);

    gap: 35px;
  }

}


/* =========================================================
   RESPONSIVO — MOBILE
========================================================= */

@media (max-width: 800px) {

  .fintech-container {
    display: grid;

    grid-template-columns: 1fr;

    gap: 35px;

    min-height: auto;
  }


  .fintech-conteudo {
    max-width: 720px;
  }


  .fintech-visual {
    min-height: 450px;

    width: 100%;
  }

}
/* =========================================================
   FINTECH — AJUSTE DE MARGENS E ESPAÇAMENTO
========================================================= */

.fintech {
  position: relative;
  overflow: hidden;

  padding: 120px 0;
}


/* =========================================================
   CONTAINER DA SEÇÃO
========================================================= */

.fintech > .container.fintech-container {
  width: min(1180px, calc(100% - 80px));

  margin-left: auto;
  margin-right: auto;

  padding-left: 0;
  padding-right: 0;
}


/* =========================================================
   COLUNA DE CONTEÚDO
========================================================= */

.fintech-conteudo {
  padding-left: 10px;
}


/* =========================================================
   COLUNA VISUAL
========================================================= */

.fintech-visual {
  padding-right: 10px;
}


/* =========================================================
   DESKTOP GRANDE
========================================================= */

@media (min-width: 1400px) {

  .fintech > .container.fintech-container {
    width: min(1240px, calc(100% - 100px));
  }

}


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

@media (max-width: 1000px) {

  .fintech {
    padding: 90px 0;
  }

  .fintech > .container.fintech-container {
    width: calc(100% - 50px);
  }

  .fintech-conteudo {
    padding-left: 0;
  }

  .fintech-visual {
    padding-right: 0;
  }

}


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

@media (max-width: 650px) {

  .fintech {
    padding: 75px 0;
  }

  .fintech > .container.fintech-container {
    width: calc(100% - 36px);
  }

}


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

@media (max-width: 400px) {

  .fintech > .container.fintech-container {
    width: calc(100% - 28px);
  }

}