/* =========================================================
   FONTES
========================================================= */
@font-face {
  font-family: "RaelaGrotesque";
  src: url("assets/fonts/RaelaGrotesque-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "RaelaGrotesque";
  src: url("assets/fonts/RaelaGrotesque-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "RaelaGrotesque";
  src: url("assets/fonts/RaelaGrotesque-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

/* =========================================================
   VARIÁVEIS
========================================================= */
:root {
  --blue: #2b2b86;
  --paper: #f4f1ea;
  --ink: #1d1d1d;
  --white: #ffffff;

  --radius: 28px;
  --cardMaxWidth: 430px;

  --sidePadding: 64px;
  --heroTopPadding: 72px;
  --heroBottomPadding: 56px;
  --heroBgZoom: 140%;
}

/* =========================================================
   RESET
========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "RaelaGrotesque", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

/* =========================================================
   CONTAINER
========================================================= */
.app {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.shell {
  width: min(var(--cardMaxWidth), 100%);
  background: var(--paper);
  overflow: hidden;
}

@media (max-width: 520px) {
  .shell { width: 100%; }
}

/* =========================================================
   HERO
========================================================= */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* imagem colagem */
.heroImageWrap {
  background: var(--blue);
  line-height: 0;
}

.heroImage {
  width: 100%;
  display: block;
}

/* fundo azul */
.heroContent {
  flex: 1;
  color: var(--paper);

  background-color: var(--blue);
  background-image: url("assets/images/hero.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: var(--heroBgZoom) auto;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: var(--heroTopPadding) var(--sidePadding) var(--heroBottomPadding);
}

/* título */
.heroTitle {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.3;
}

.heroBlack { font-weight: 900; }

/* =========================================================
   SETAS (SVG)
========================================================= */
.arrowSvg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* =========================================================
   BOLINHA DA HERO (MESMO TAMANHO DO BACK TO TOP)
========================================================= */
.heroArrow {
  margin-top: 32px;

  width: 54px;
  height: 54px;
  border-radius: 50%;

  background: var(--paper);
  color: var(--blue);

  border: none;
  padding: 0;
  cursor: pointer;

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

  transition: transform 0.18s ease;
}

.heroArrow:hover { transform: translateY(-2px); }
.heroArrow:active { transform: translateY(0); }

/* seta um pouco maior dentro */
.heroArrow .arrowSvg {
  width: 30px;
  height: 30px;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 520px) {
  :root {
    --sidePadding: 36px;
    --heroBgZoom: 165%;
  }

  .heroTitle {
    font-size: 30px;
  }

  .heroArrow {
    margin-top: 36px;
  }
}

/* =========================================================
   WHITE SECTION
========================================================= */
.whiteSection {
  background: var(--paper);
  padding: 72px var(--sidePadding);
}

.whiteInner {
  max-width: 720px;
  margin: 0 auto;
}

.whiteLead {
  margin: 0 0 18px;
  font-size: 23px;
  line-height: 1.35;
  font-weight: 900;
}

.whiteSub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}

.whiteSub .brandHighlight {
  color: #2b2b86;
  font-weight: 900;
}

/* botão */
.whiteCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 48px;
  padding: 11px 30px;

  font-size: 14.5px;
  font-weight: 800;

  color: var(--paper);
  background: var(--blue);
  border-radius: 999px;
  text-decoration: none;
}

.whiteSectionWrapper {
  background-color: #282871;
  padding: 0; /* tira o espaço ao redor */
  scroll-margin-top: 0px;
}

.whiteSectionContent {
  background-color: var(--paper);
  border-radius: 0 60px 0 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 72px var(--sidePadding);
  display: flex;
  flex-direction: column;
}

/* =========================================================
   AMARELO
========================================================= */
.highlighted-section {
  background-color: #f2a900; /* amarelo como da imagem */
  padding: 4rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 60px 0 0 0; /* canto inferior arredondado como na imagem */
}

.highlighted-content p {
  color: #000; /* texto preto */
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 0;
}

/* =========================================================
   TOGGLE DE SERVIÇOS
========================================================= */

.servicesToggleSection {
  background: var(--blue);
  padding: 72px var(--sidePadding);
}

.servicesMainTitle {
  color: var(--paper);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.05;
  margin: 0 0 44px;
  text-align: left;
}

.serviceCard {
  background: var(--paper);
  border-radius: 22px;
  padding: 30px 28px;
  margin: 0 0 18px; /* reduzido de 26px */
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.serviceTitle {
  margin: 0 0 14px;
  color: var(--blue);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.3;
}

.serviceSummary {
  margin: 0 0 10px; /* reduzido de 26px */
  color: #3b3b3b;
  font-size: 12px;
  line-height: 1.6;
}

.serviceToggleBtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #f5a623;
  font-weight: 600;
  font-size: 15px;
}

.servicePlus {
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

.serviceBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  border-top: none;
  margin-top: 10px; /* reduzido de 18px */
}

.serviceCard.open .serviceBody {
  /* JS vai setar um max-height certinho */
}

.serviceBody h4 {
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 900;
  color: #1a1a1a;
}

.serviceBody ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.serviceBody li {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #2b2b2b;
}

/* mobile refinado */
@media (max-width: 520px) {
  .servicesMainTitle {
    font-size: 28px;
  }

  .serviceTitle {
    font-size: 23px;
  }

  .serviceSummary {
    font-size: 12px;
  }

  .serviceToggleBtn {
    font-size: 15px;
  }
}

/* ===============================
   COMO TRABALHAMOS
================================ */

.processSection {
  background-color: var(--paper);
  padding-top: 50px;    /* topo */
  padding-bottom: 20px; /* base */
}


.processContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 55px;  /* ⬅️ MAIS respiro à esquerda */
  padding-right: 40px;
}

.processHeader {
  width: 100%;
  display: flex;
  justify-content: center;
}

.processTitle {
  font-size: 28px;
  font-weight: 900;
  color: #2b2b86;
  text-align: center;
  margin-top: 50px
}

.processSubtitle {
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 40px;
}

.processImages {
  display: flex;
  flex-direction: column;
  align-items: center; /* 👈 ESSENCIAL */
}

.processImages img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 300px; /* 👈 controla o “tamanho visual” */
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .processImages {
    align-items: stretch;
  }
}



/* =========================================================
   TRUST SECTION
========================================================= */

.trustSection {
  background-color: #282871; /* azul NexCX */
  color: #fff;
  padding: 50px 20px;
  text-align: center;
  border-top-right-radius: 60px;
  
}

.trustTitle {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  color: #fff;
  padding: 5px 50px;
  margin-bottom: 30px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}



.trustLogos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 28px;     /* espaço vertical entre as linhas */
  column-gap: 0px;  /* espaço horizontal entre as colunas */
  max-width: 600px;
  margin: 0 auto;
  justify-items: center; /* centraliza as logos em cada célula */
}



.trustLogos img {
  width: 120px;
  height: auto;
  filter: brightness(0) invert(1); /* deixa branco */
}



/* =========================================================
   TEAM SECTION
========================================================= */

.teamSection {
  background-color: #000;
  color: #f5f5f5;
  padding: 40px 0; /* menor padding vertical (era 80px) */
  width: 100%;
}


.sectionTitle {
  font-size: 25px;        /* maior */
  text-align: left;         /* alinha à esquerda */
  color: #fff;
  margin-bottom: 30px;
  padding: 0px 70px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


.teamGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.teamMember {
  width: 300px;
  background-color: #151515;
  padding: 50px;
  border-radius: 15px;
  text-align: center;
  transition: background 0.3s ease;
}

.teamPhotoWrap {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.teamPhoto {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.teamName {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.teamRole {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 12px;
}

.teamToggleBtn {
  background: none;
  border: 1px solid #f5f5f5;
  color: #f5f5f5;
  padding: 5px 25px;
  cursor: pointer;
  border-radius: 999px;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.teamToggleBtn:hover {
  background-color: #333;
}

.teamMoreText {
  margin-top: 30px;
  font-size: 13px;
  line-height: 1.4;
  display: none;
  text-align: center;
  color: #ddd;
}

.teamMember.open .teamMoreText {
  display: block;
}



/* =========================================================
   BOTÃO VOLTAR AO TOPO
========================================================= */
#backToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 54px;
  height: 54px;
  border-radius: 50%;

  background: var(--blue);
  color: var(--paper);

  border: none;
  cursor: pointer;

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

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#backToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#backToTop .arrowSvg {
  width: 26px;
  height: 26px;
}

/* =========================================================
   SCROLL SUAVE PARA ÃNCORAS (Vamos conversar -> #contato)
========================================================= */
html { scroll-behavior: smooth; }

/* =========================================================
   FOOTER
========================================================= */

.footerSection{
  /* gradiente igual ao print */
  background: var(--blue);
  color: var(--paper);
  padding-top: 15px; /* ou maior se quiser mais espaço */

}

.footerInner{
  /* respiro lateral igual ao print */
  padding: 64px calc(var(--sidePadding) + 18px) 34px;
}

.footerLogo{
  width: 150px;
  height: auto;
  display: block;
  margin: 0 0 30px;
}

/* texto grande */
.footerHeadline{
  margin: 0 0 54px;
  max-width: 520px;

  font-size: 20px;
  line-height: 1.28;
  font-weight: 600; /* no print não tá 900, é mais “bold” clean */
  letter-spacing: 0.6px;
}

/* contatos */
.footerContacts{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 52px;
}

.footerContact {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.footerIcon img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(68%) sepia(91%) saturate(395%) hue-rotate(2deg) brightness(104%) contrast(97%);
}

/* Off-white no texto do contato */
.footerText {
  color: #F4F4F4;
  font-size: 16px;
}


/* faixa inferior */
.footerBottom{
  padding: 22px calc(var(--sidePadding) + 18px) 26px;
  opacity: .65;
}

.footerDivider{
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: 0 -9999px;
  padding: 0 9999px;
}

.footerCopy {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

/* MOBILE */
@media (max-width: 520px){
  .footerInner{
    padding: 56px calc(var(--sidePadding) + 10px) 30px;
  }

  .footerLogo{
    width: 190px;
    margin-bottom: 42px;
  }

  .footerHeadline{
    font-size: 20px;
    margin-bottom: 46px;
  }

  .footerContacts{
    gap: 22px;
    margin-bottom: 56px;
  }

  .footerContact{
    font-size: 20px;
    gap: 16px;
  }

  .footerIcon{
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .footerIcon svg{
    width: 30px;
    height: 30px;
  }

  .footerBottom{
    padding: 20px calc(var(--sidePadding) + 10px) 22px;
  }

  .footerCopy{
    font-size: 13px;
  }
}

/* =========================================================
   DESKTOP: SITE EM LARGURA TOTAL (SEM AFETAR MOBILE)
========================================================= */
@media (min-width: 800px) {

  .app {
    justify-content: flex-start;
  }

  .shell {
    width: 100%;
    max-width: none;
  }

}

/* =========================================================
   DESKTOP – HERO COM IMAGEM + TEXTO JUNTOS
   (mobile permanece igual)
========================================================= */
@media (min-width: 800px) {

  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
  }

  .heroImageWrap {
    height: 100vh;
  }

  .heroImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .heroContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* =========================================================
   DESKTOP – CARDS DE SERVIÇOS LADO A LADO
========================================================= */
@media (min-width: 800px) {

  .servicesToggleSection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .serviceCard {
    margin: 0;
    height: 100%;
  }

}

/* =========================================================
   DESKTOP — SERVIÇOS (RESET LIMPO)
   Mobile permanece INTACTO
========================================================= */
@media (min-width: 800px) {

  /* seção NÃO vira grid */
  .servicesToggleSection {
    display: block;
  }

  /* SOMENTE o wrapper dos cards vira grid */
  .serviceCardWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
    align-items: start;
  }

  /* cards com mesmo tamanho quando fechados */
  .serviceCard {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 24px;
  }

}

/* =========================================================
   CORREÇÃO DEFINITIVA — ALTURA DOS CARDS (DESKTOP)
   Mobile permanece INTACTO
========================================================= */
@media (min-width: 800px) {

  /* garante que o grid não estique os cards */
  .serviceCardWrapper {
    align-items: start;
  }

  /* altura base igual para todos os cards fechados */
  .serviceCard {
    min-height: 200px;
    align-self: start;
  }

  /* impede o conteúdo expandido de influenciar os outros */
  .serviceBody {
    position: relative;
  }

}

/* =========================================================
   DESKTOP — AJUSTE FINO DO "SAIBA MAIS"
   sem alterar altura do card
========================================================= */
@media (min-width: 800px) {

  /* garante fluxo vertical previsível */
  .serviceCard {
    display: flex;
    flex-direction: column;
  }

  /* texto ocupa o espaço natural */
  .serviceSummary {
    margin-bottom: 0;
  }


}


/* =========================================================
   DESKTOP — DIMINUIR LARGURA DOS CARDS
========================================================= */
@media (min-width: 800px) {

  .serviceCardWrapper {
    grid-template-columns: repeat(3, auto);
    justify-content: center;   /* centraliza o conjunto */
    gap: 50px;
  }

  .serviceCard {
    max-width: 360px;          /* AJUSTE AQUI */
    width: 100%;
  }

}

/* =========================================================
   DESKTOP — BOTÃO FIXO ACIMA DO CONTEÚDO EXPANDIDO
========================================================= */
@media (min-width: 800px) {

  .serviceCard {
    display: flex;
    flex-direction: column;
  }

  /* resumo vem primeiro */
  .serviceSummary {
    order: 1;
  }

  /* botão SEMPRE logo abaixo do resumo */
  .serviceToggleBtn {
    order: 2;
    margin-top: 12px;
    margin-bottom: 12px;
    align-self: flex-start;
  }

  /* conteúdo expandido SEMPRE depois do botão */
  .serviceBody {
    order: 3;
  }

}

/* DESKTOP — reduzir espaço abaixo do "Saiba mais" */
@media (min-width: 1024px) {

  .serviceCard {
    padding-bottom: 16px; /* antes provavelmente era 24px ou mais */
  }

  .serviceToggleBtn {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
  }
}

/* DESKTOP — abaixar o botão "Saiba mais" APENAS nos dois primeiros cards */
@media (min-width: 1024px) {

  .serviceCardWrapper .serviceCard:nth-child(1) .serviceToggleBtn,
  .serviceCardWrapper .serviceCard:nth-child(2) .serviceToggleBtn {
    margin-top: 35px; /* AJUSTE FINO AQUI */
  }

  .serviceCardWrapper .serviceCard:nth-child(3) .serviceToggleBtn{
    margin-top: 35px; /* AJUSTE FINO AQUI */

}
}

/* DESKTOP — respiro interno do card fechado (título + texto + botão) */
@media (min-width: 1024px) {

  .serviceCard {
    padding-top: 32px;     /* topo */
    padding-left: 32px;    /* lateral esquerda */
    padding-right: 32px;   /* lateral direita */
    padding-bottom: 24px;  /* mantém o fundo enxuto */
  }

}

/* FIX DEFINITIVO — toggle aberto não afeta outros cards (DESKTOP) */
@media (min-width: 1024px) {
  .serviceCardWrapper {
    align-items: flex-start;
  }

  .serviceCard {
    align-self: flex-start;
  }
}

@media (min-width: 1024px) {

  /* o grid NÃO pode alinhar alturas implicitamente */
  .serviceCardWrapper {
    align-items: flex-start;
  }

  /* cada card ignora a altura da linha do grid */
  .serviceCard {
    height: fit-content;
  }

}

@media (min-width: 1024px) {

  /* título principal da hero */
  .heroContent h1 {
    font-size: 50px;       /* ajuste fino aqui */
    line-height: 1.1;
  }

}

/* DESKTOP — tipografia maior na primeira seção após a hero */
@media (min-width: 1024px) {

  .hero + section h2 {
    font-size: 40px;     /* ajuste fino */
    line-height: 1.25;
  }

  .hero + section p {
    font-size: 18px;
    line-height: 1.6;
    max-width: 640px;    /* leitura mais confortável */
  }

}

/* DESKTOP — primeira seção branca pós-hero
   título maior, parágrafo normal */
@media (min-width: 1024px) {

  /* PRIMEIRO parágrafo (headline) */
  .hero + section p:first-of-type {
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 24px;
  }

  /* SEGUNDO parágrafo (texto de apoio) */
  .hero + section p:not(:first-of-type) {
    font-size: 25px;
    line-height: 1.6;
    font-weight: 400;
  }

}


@media (min-width: 1024px) {

  /* bloco de texto da 1ª seção branca */
  .aboutContent {
    max-width: 1000px;   /* AQUI está o ouro */
  }

}

/* DESKTOP — deixar o texto mais “horizontal” na WHITE SECTION */
@media (min-width: 1024px) {
  .whiteSectionContent .whiteInner{
    max-width: 1100px !important; /* aumenta a largura do bloco */
  }

  .whiteSectionContent .whiteSub{
    max-width: 1100px !important; /* ou tira o limite */
    /* max-width: none !important;  <- se quiser soltar total */
  }
}

@media (min-width: 1024px) {
  .whiteSectionContent br {
    display: none;
  }
}

/* =========================================
   DESKTOP — tirar quebras forçadas (<br>) 
   só na 1ª sessão branca pós-hero
========================================= */
@media (min-width: 1024px) {
  .whiteSection br {
    display: none;
  }
}

/* (opcional, pra garantir que no mobile continue quebrando) */
@media (max-width: 1023px) {
  .whiteSection br {
    display: inline;
  }
}

/* DESKTOP — deixar a 1ª seção branca “sem quebra” (texto mais largo) */
@media (min-width: 1024px) {

  /* 1) garante que o site não está preso num “shell” estreito no desktop */
  .shell{
    max-width: none !important;
    width: 100% !important;
  }

  /* 2) libera o bloco do texto dessa seção (sem mexer no fundo) */
  .whiteSectionContent .whiteInner{
    max-width: 1200px !important;   /* aumenta bastante */
    width: 100% !important;
  }

  /* 3) remove qualquer max-width que esteja limitando os parágrafos */
  .whiteSectionContent .whiteLead,
  .whiteSectionContent .whiteSub{
    max-width: none !important;
  }
}

@media (min-width: 1024px) {

  .whiteSectionContent a {
    font-size: 18px;
    padding: 16px 28px;
    display: inline-block;
  }

}

@media (min-width: 1024px) {

  /* BLOCO DO TEXTO — não mexe no fundo */
  .whiteInner {
    padding-left: 80px;   /* aumenta aqui */
    padding-right: 80px;  /* aumenta aqui */
  }

}

/* =========================================================
   DESKTOP — LOGOS EM LINHA HORIZONTAL
   Mobile permanece INTACTO
========================================================= */
@media (min-width: 1024px) {

  .clientsLogos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;              /* espaço entre logos */
    flex-wrap: nowrap;      /* NÃO quebrar linha */
  }

  .clientsLogos img {
    max-height: 48px;       /* controla altura */
    width: auto;
    object-fit: contain;
  }

}

/* =========================================================
   DESKTOP — LOGOS EM LINHA HORIZONTAL
========================================================= */
@media (min-width: 1024px) {

  .trustLogos {
    display: flex;          /* mata o grid */
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 64px;              /* espaço entre logos */
    flex-wrap: nowrap;      /* 🔑 impede quebrar linha */
  }

  .trustLogos img {
    max-height: 60px;       /* controla altura visual */
    width: auto;
    flex-shrink: 0;         /* impede esmagamento */
  }

}

/* =========================================================
   ESPAÇO INFERIOR — SECTION EQUIPE (DESKTOP)
========================================================= */
@media (min-width: 1024px) {

  .teamSection {
    padding-bottom: 100px; /* ajuste fino aqui */
  }

}

@media (min-width: 1024px) {
  .footerText {
    font-size: 22px;     /* maior */
    line-height: 1.35;
    white-space: nowrap; /* tenta manter 1 linha */
  }

  .footerText br {
    display: none;       /* garante que não quebra por <br> */
  }
}

@media (min-width: 1024px) {
  .footerTagline {
    font-size: 24px;      /* ajusta aqui */
    line-height: 1.35;
  }
}

@media (min-width: 1024px) {
  .trustTitle {
    font-size: 22px;     /* ajuste fino aqui */
    font-weight: 500;
    margin-bottom: 32px; /* espaço maior pros logos respirarem */
  }
}

@media (min-width: 1024px) {
  .trustSection .trustLogos img {
    height: 400px;   /* antes devia estar ~32–40px */
    width: auto;
  }
}

@media (min-width: 1024px) {
  .trustSection .trustLogos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px; /* aumenta a distância horizontal */
  }
}

.trustTitle {
  margin-bottom: 55px; /* aumente aqui */
}

.footerHeadline {
  font-size: 30px;
  line-height: 1.35;
}

.footerHeadline {
  max-width: 700px;
}

.footerLogo {
  margin-bottom: 60px; /* aumenta/diminui aqui */
}

@media (min-width: 1024px) {
  .heroContent {
    padding-left: 90px; /* ajuste o valor se quiser mais ou menos */
  }
}


@media (min-width: 1024px) {
  .processSection {
    padding: 120px 0;
  }

  .processTitle {
    font-size: 28px;
  }

  .processSubtitle {
    font-size: 18px;
    margin-bottom: 60px;
  }

  .processImages {
    gap: 64px;
  }

  .processImages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 0px;   /* diminui espaço entre título e imagens */
  margin-bottom: 100px; /* aumenta espaço abaixo das imagens */
}


@media (max-width: 768px) {
  .processImages {
    flex-direction: column;
    gap: 0px;
  }
}

@media (min-width: 1024px) {
  .processSection {
    padding-top: 60px;    /* diminui espaço superior */
    padding-bottom: 160px;
    position: relative;
    z-index: 2
  }
}

.processTitle {
  margin-bottom: 48px;
}

.desktopBreak {
  display: inline;
}

@media (min-width: 1024px) {
  .desktopBreak {
    display: block;
  }
}

@media (min-width: 1024px) {
  .processSection {
    text-align: left;
  }

  .processImages {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .processImages {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 35px; /* CONTROLE REAL DO ESPAÇO ENTRE ELAS */
  }

  .processImages img {
    max-width: 450px; /* 👈 DIMINUI O TAMANHO DAS IMAGENS */
    width: 100%;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .processImages {
    width: fit-content;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .processImages {
    margin-bottom: 45px; /* AJUSTE FINO AQUI */
  }
}

/* =========================================================
   FIX FINAL — DESKTOP REAL (mata o layout mobile no desktop)
========================================================= */
@media (min-width: 1024px) {

  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  .app {
    display: block;          /* mata centralização flex */
    width: 100%;
  }

  .shell {
    width: 100% !important;  /* ocupa toda a tela */
    max-width: none !important;
    margin: 0 !important;
  }

}