/* ===== RESET ===== */

*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}


/* ===== CONTAINER FLEXÍVEL DO SITE ===== */

.site-container{

width:100%;
/* permite que o site ocupe toda a largura da tela */

margin:0 auto;
/* centraliza o site */

}


/* ===== CONTAINER INTERNO DAS SEÇÕES ===== */

.container{

width:100%;
/* ocupa toda a largura disponível */

max-width:1200px;
/* largura máxima do site em telas grandes */

margin:0 auto;
/* centraliza o conteúdo */

padding-left:20px;
padding-right:20px;
/* espaço lateral para telas pequenas */

}


/* ===== ROOT ===== */

:root{
color-scheme: dark;
}

/* ===== BASE ===== */

html{
background-color:#0b1c2c;

/* ativa rolagem suave ao clicar nos links */
scroll-behavior:smooth;

-webkit-text-size-adjust:100%;
background-color:#0e2a47;

}

body{

font-family:Arial, sans-serif;

background-color:#e9e9e9;

overflow-x:hidden;

}


/* ===== IMAGENS ===== */

img,
picture{

max-width:100%;
height:auto;

display:block;

}


/* ===== LAYOUT ===== */

/* =========================
HEADER
========================= */
/* ===== HERO BASE ===== */
.hero {
  background: #023a49; /* define a cor de fundo principal da seção */
  min-height: 40vh; /* faz a seção ocupar no mínimo 100% da altura da tela */
  padding-bottom: 20px; /* espaço interno: 40px em cima/baixo e 20px nas laterais */
  display: flex; /* ativa o flexbox */
  align-items: flex-start; /* centraliza o conteúdo verticalmente */
  position: relative
}

/* container */
.hero-content {
  max-width: 1150px; /* limita a largura máxima do conteúdo (não estica demais) */
  margin: 0 auto; /* centraliza horizontalmente na tela */
  width: 100%; /* ocupa toda largura disponível até o limite */
}

/* topo */
.hero-top {
  margin-bottom: 20px; /* espaço abaixo do topo (logo + OAB) */
}

.logo {
  width: 170px; /* define o tamanho da logo */
  margin-bottom: 5px; /* espaço abaixo da logo */
}

.oab {
  color: #d6b36a; /* cor dourada do texto da OAB */
}

/* ===== LAYOUT ===== */
.hero-main {
  display: flex; /* ativa flexbox para alinhar texto e imagem lado a lado */
  align-items: center; /* alinha verticalmente os itens */
  justify-content: space-between; /* joga um item pra esquerda e outro pra direita */
  gap: 60px; /* espaço entre texto e imagem */
}

/* ===== TEXTO ===== */
/* ===== BLOCO DE TEXTO ===== */
.hero-text {
  max-width: 700px; 
  /* largura máxima do bloco */

  display: flex;
  flex-direction: column; 
  /* organiza H1 + P + CTA em coluna */

  align-items: flex-start; 
  /* alinha tudo à esquerda */

  justify-content: center;
  /* centraliza verticalmente dentro do HERO */

  transform: translateY(0px) translateX(0px);
  /* 🔥 CONTROLE GLOBAL DO BLOCO:
     translateY = sobe/desce tudo
     translateX = move esquerda/direita */
}

/* ===== TÍTULO ===== */
.hero-text h1 {
  color: #d6b36a;

  font-size: clamp(32px, 3.5vw, 35px);
  /* tamanho responsivo */

  line-height: 1.15;
  /* altura da linha mais compacta */

  max-width: 590px;
  /* controla quebra do texto */

  margin-top: 0;
  margin-bottom: 35px;
  /* espaço abaixo do título */

  text-align: left;

  letter-spacing: -0.5px;

  word-break: break-word;

  transform: translateX(0px) translateY(0px);
  /* 🔥 CONTROLE FINO DO TÍTULO:
     X = esquerda/direita
     Y = cima/baixo */
}

/* ===== PARÁGRAFO ===== */
.hero-text p {
  color: #cfcfcf;

  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.7;

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

  margin-top: 0;
  margin-bottom: 25px;
  /* espaço antes do botão */

  text-align: left;

  letter-spacing: 0.3px;

  word-break: break-word;

   position: relative;
}

/* ===== CTA HERO ===== */
.cta {
  position: relative;
  /* 🔥 permite posicionar dentro do hero */
  margin-top: 20px;
  bottom: 30px;
  /* 🔥 mesma linha inferior (ajuste fino aqui) */

  left: 20%;
  /* centraliza horizontalmente */

  transform: translateX(-50%);
  /* corrige centralização perfeita */

  /* ===== VISUAL ===== */
  background: #00c853;
  color: #fff;

  padding: 16px 28px;
  border-radius: 14px;

  font-size: 15px;
  font-weight: 600;
  text-decoration: none;

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

  white-space: nowrap;
  /* evita quebra feia */

  /* ===== EFEITO PROFISSIONAL ===== */
  box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.7);

  animation: pulseCTA 1.8s infinite;

  z-index: 6;
  /* garante que fique acima de tudo */

  transition: transform 0.2s ease;
}

/* HOVER (toque premium) */
.cta:hover {
  transform: translateX(-50%) scale(1.05);
}

/* ===== ANIMAÇÃO PULSANTE ===== */
@keyframes pulseCTA {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.7);
  }
  70% {
    box-shadow: 0 0 0 18px rgba(0, 200, 83, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 200, 83, 0);
  }
}
/* ===== IMAGEM ===== *//* ===== BLOCO DA IMAGEM ===== */
.hero-image { 
  position: relative;
  width: 400px;
  height: 400px;
}

/* ===== CÍRCULO (MENOR E MAIS BAIXO) ===== */
.circle {
  width: 300px; 
  /* largura do círculo */

  height: 300px;
  /* altura do círculo (igual à largura pra formar um círculo perfeito) */

  background: #f1f1f1;
  /* cor de fundo (cinza claro) */

  border-radius: 50%;
  /* transforma o elemento em círculo */

  position: absolute;
  /* permite posicionar livremente dentro do container pai */

  bottom: 0;
  /* encosta o círculo na parte inferior do container */

  left: 50%;
  /* posiciona o início do elemento no meio horizontal */

  transform: translate(-50%, 200px);
  /* -50% puxa metade do próprio elemento para a esquerda (centraliza)
     120px empurra o círculo para baixo (efeito visual + animação inicial) */

  z-index: 1;
  /* define a camada (fica atrás de elementos com z-index maior) */

  opacity: 0;
  /* começa invisível (usado para animação de entrada) */
}

/* ===== IMAGEM (MAIOR E DOMINANTE) ===== */
.client {
  position: absolute;
  bottom: 0;
  left: 50%;

  transform: translate(-50%, 120px);

  width: 415px; /* maior que tudo */

  z-index: 2;
  opacity: 0;
}

/* ===== BADGE ESTILO PROFISSIONAL ===== */

.experience { 
  position: absolute; 
  /* permite posicionar o badge livremente dentro do container pai */

  top: 60px; 
  /* distância do topo da seção */

  left: 93%; 
  /* posiciona o badge mais para a direita (baseado no container) */

  transform: translate(-50%, 120px);
  /* -50% centraliza horizontalmente o próprio elemento
     120px empurra o badge para baixo (posição inicial da animação) */

  background: #d6b36a;
  /* cor de fundo (dourado) */

  border-radius: 20px;
  /* deixa as bordas arredondadas (visual moderno) */

  padding: 35px 65px; 
  /* espaço interno: 35px em cima/baixo e 45px nas laterais */

  color: #023a49;
  /* cor do texto (contraste com o fundo dourado) */

  z-index: 1;
  /* define a camada do elemento (pode ficar atrás de outros se for baixo) */

  opacity: 0;
  /* começa invisível (usado para animação de entrada) */

  display: flex;
  /* ativa o flexbox para organizar o conteúdo interno */

  flex-direction: column;
  /* organiza os elementos em coluna (número em cima, texto embaixo) */

  align-items: center;   
  /* centraliza horizontalmente os itens dentro do badge */

  text-align: center;    
  /* garante que o texto também fique centralizado */
}
.experience strong::before {
  content: "+";
  font-size: 0.6em; /* proporcional ao número */
  margin-right: 4px;
  position: relative;
  top: -5px; /* ajuste fino vertical */
}
/* ===== NÚMERO (9+) ===== */
.experience strong {
  display: block; 
  /* força o 9+ a ocupar uma linha inteira */

  font-size: 64px; 
  /* tamanho grande (igual inspiração) */

  font-weight: 700; 
  /* deixa o número mais forte (negrito) */

  line-height: 1; 
  /* remove espaçamento vertical extra (encaixe perfeito) */
}

/* ===== TEXTO (anos de experiência) ===== */
.experience span {
  font-size: 19px; 
  /* tamanho menor para o texto secundário */

  font-weight: 500; 
  /* leve destaque */

  line-height: 1.2; 
  /* aproxima o texto do número */

  margin-top: 5px; 
  /* pequeno espaço entre o 9+ e o texto */
}

/* ===== ANIMAÇÕES ===== */
/* círculo sobe */
.hero.active .circle {
  animation: upFadeCircle 0.8s ease forwards;
  /* animação suave de entrada (de baixo pra cima) */
}

/* imagem sobe */
.hero.active .client {
  animation: upFade 1s ease forwards; 
  /* mesma animação do círculo, com tempo maior */

  animation-delay: 0.2s; 
  /* pequeno atraso (entra depois do círculo) */
}

/* badge aparece */
.hero.active .experience {
  animation: sideFade 0.8s ease forwards; 
  /* animação do badge */

  animation-delay: 0.6s; 
  /* entra por último (efeito profissional) */
}

/* animação vertical */
@keyframes upFadeCircle {
  to {
    transform: translate(-65%, -120px);
    /* 🔥 sobe o círculo de verdade */

    opacity: 1;
  }
}
@keyframes upFade {
  to {
    transform: translate(-60%, 1px);
    /* posição FINAL mais alta (antes era 0)
       valor negativo sobe o círculo de verdade */

    opacity: 1; 
    /* aparece */
  }
}

/* animação lateral */
@keyframes sideFade {
  to {
    transform: translate(-50%, 0); 
    /* remove deslocamento lateral */

    opacity: 1; 
    /* aparece */
  }
}
.whatsapp-float {
  position: fixed; 
  /* permite posicionar o botão livremente dentro do container pai (.hero) */

  top: 90%; 
  /* define a altura do botão (meio da tela, alinhado com o badge) */

  right: 30px; 
  /* distância da lateral direita da tela */

  transform: translateY(-50%); 
  /* corrige o alinhamento vertical (centraliza o botão no eixo Y) */

  width: 70px; 
  /* largura do botão */

  height: 70px; 
  /* altura do botão (igual à largura para manter círculo perfeito) */

  border-radius: 50%; 
  /* deixa o botão completamente redondo */

  background: #25D366; 
  /* cor oficial do WhatsApp (verde) */

  display: flex; 
  /* ativa flexbox para centralizar o conteúdo interno */

  align-items: center; 
  /* centraliza verticalmente o ícone dentro do botão */

  justify-content: center; 
  /* centraliza horizontalmente o ícone dentro do botão */

  z-index: 5; 
  /* garante que o botão fique na frente de todos os elementos */

  animation: pulseWhats 1.6s infinite; 
  /* aplica a animação de pulsação continuamente */
}

/* ícone */
.whatsapp-float img {
  width: 35px; 
  /* tamanho do ícone dentro do botão */
}

/* animação pulsante */
@keyframes pulseWhats {
  0% {
    box-shadow: 0 0 0 0 rgba(37,211,102, 0.7);
    /* início: sombra forte ao redor do botão */
  }
  70% {
    box-shadow: 0 0 0 18px rgba(37,211,102, 0);
    /* expansão da sombra (efeito de "onda" sumindo) */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37,211,102, 0);
    /* volta ao estado inicial para repetir a animação */
  }
}
.social-box {
  position: absolute; 
  /* permite posicionar livre dentro do HERO */

  bottom: 110px; 
  /* 🔥 encosta no fundo do hero (mais baixo que antes) */

  left: 20px; 
  /* 🔥 muda da direita para a esquerda */

  background: #f5f5f5; 
  /* cor de fundo */

  padding: 10px 12px; 
  /* 🔥 reduz tamanho da caixa */

  border-radius: 12px; 
  /* borda mais suave (menos “pesada”) */

  display: flex; 
  /* mantém os ícones lado a lado */

  gap: 10px; 
  /* 🔥 diminui espaço entre ícones */

  box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
  /* sombra leve (menos agressiva) */

  z-index: 5;
  /* garante que fique por cima do hero */
}

/* botões */
.social-box a {
  width: 38px; 
  /* 🔥 botão menor */

  height: 38px; 
  /* mantém proporção circular */

  background: #023a49; 

  border-radius: 50%; 

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

/* ícone */
.social-box img {
  width: 18px; 
  /* 🔥 ícone proporcional ao botão menor */
}
/* ===== SEÇÃO problema===== */
.problema {
  background: #f5f5f5; /* fundo claro fora do card */
  padding: 80px 20px; /* espaço em volta */
  text-align: center; /* centraliza botão */
}

/* ===== CARD ESCURO ===== */
.problema-box {
  max-width: 1200px; /* largura máxima */
  margin: 0 auto; /* centraliza */

  background: #023a49; /* fundo azul escuro */
  color: #d6b36a; /* cor padrão dourada */

  padding: 60px; /* espaçamento interno */

  border-radius: 20px; /* cantos arredondados */

  display: flex; /* layout lado a lado */
  justify-content: space-between;
  gap: 60px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* sombra suave */
}

/* ===== COLUNAS ===== */
.problema .col {
  width: 50%; /* metade para cada lado */
  text-align: left; /* alinha texto à esquerda */
}

/* ===== TÍTULOS ===== */
.problema h2 {
  font-size: 28px; /* tamanho do título */
  margin-bottom: 25px; /* espaço abaixo */
  color: #e5c98b; /* dourado */
}

/* ===== LISTAS ===== */
.problema ul {
  list-style: none; /* remove bolinha padrão */
  padding: 0;
}

/* ===== ITENS ===== */
.problema li {
  margin-bottom: 18px; /* espaço entre itens */
  color: #dcdcdc; /* texto mais claro */
  font-size: 16px;

  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== ÍCONE DE SETA ===== */
.problema li::before {
  content: "➜"; /* seta igual da imagem */
  color: #e5c98b; /* dourado */
  font-weight: bold;
}

/* ===== BOTÃO ABAIXO ===== */
.cta-bottom {
  display: inline-block;
  margin-top: 40px;

  background: #00c853;
  color: white;

  padding: 16px 30px;
  border-radius: 10px;

  text-decoration: none;
  font-weight: bold;

  animation: pulse 1.8s infinite;
}

/*/* =========================
  /* =========================
   SEÇÃO 2 - BENEFÍCIOS / CARDS
   ========================= */

/* ===== SEÇÃO BENEFÍCIOS ===== */
.beneficios {
  background: #f5f5f5;
  padding: 100px 20px 50px;
  text-align: center;
}

/* CONTAINER CORRIGIDO */
.beneficios-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* TÍTULO */
.beneficios h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #222;
}

/* SUBTEXTO */
.beneficios .sub {
  max-width: 800px;
  margin: 0 auto 30px;
  color: #555;
  font-size: 18px;
}

/* TÍTULO SECUNDÁRIO */
.beneficios .titulo-secundario {
  margin-bottom: 40px;
  font-size: 24px;
  color: #333;
}

/* GRID */
.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

/* CARD */
/* CARD */
.beneficio {
  text-align: center;

  display: flex;
  /* organiza melhor os elementos */

  flex-direction: column;
  /* mantém tudo em coluna */

  align-items: center;
  /* centraliza tudo horizontalmente */

  justify-content: flex-start;
  /* mantém alinhamento consistente */

  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* suaviza animação */
}

.beneficio p {
  font-size: 18px;
  font-weight: 600;
  /* mais forte */

  color: #1f2937;
  /* cor mais profissional */

  margin-bottom: 8px;

  max-width: 260px;
  /* evita quebra feia */
}

.beneficio span {
  font-size: 14px;
  color: #6b7280;

  margin-bottom: 12px;

  max-width: 240px;
}
.beneficio img {
  width: 240px;
  /* aumenta levemente (fica mais profissional) */

  height: 150px;

  object-fit: cover;
  /* evita distorção */

  border-radius: 14px;
  /* mais moderno */

  margin-top: 10px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* HOVER NO CARD */
.beneficio:hover {
  transform: translateY(-8px);
  /* levanta o card */

  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
  /* sombra suave (efeito premium) */
}

/* HOVER NA IMAGEM */
.beneficio:hover img {
  transform: scale(1.03);
  /* leve zoom (efeito moderno) */
}
/* ===== CTA ===== */
.cta-middle {
  background: #f5f5f5;
  padding: 50px 30px 100px;
  text-align: center;
  margin-top: -6px;
}

.btn-cta-top {
  display: inline-block;
  background: #00c853;
  color: white;
  padding: 18px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 40px;
  box-shadow: 0 0 0 6px rgba(0, 200, 83, 0.2);
  animation: pulse 1.8s infinite;
}

.cta-middle h2 {
  font-size: 42px;
  color: #1f2430;
  margin-bottom: 20px;
}

.cta-middle p {
  font-size: 18px;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,200,83, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(0,200,83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,83, 0); }
}


/* ===== SEÇÃO JURÍDICO ===== */
.secao-juridico {
  background: #f5f5f5;
  padding: 80px 20px;
}

/* CONTAINER CORRIGIDO */
.juridico-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #023a49;
  border-radius: 20px;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* TEXTO */
.secao-juridico .conteudo {
  flex: 1;
}

.secao-juridico .conteudo h2 {
  color: #d6b36a;
  font-size: 32px;
  margin-bottom: 30px;
  line-height: 1.3;
}

/* LISTA */
.secao-juridico .lista {
  list-style: none;
  padding: 0;
}

.secao-juridico .lista li {
  color: #d6b36a;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  gap: 10px;
}

.secao-juridico .lista li::before {
  content: "➜";
  background: #d6b36a;
  color: #023a49;
  font-size: 12px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMAGEM */
.secao-juridico .imagem {
  flex: 1;
  display: flex;
  justify-content: center;
}

.secao-juridico .imagem img {
  width: 100%;
  max-width: 350px;
  border-radius: 6px;
}

/* WHATSAPP */
.whatsapp {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #25D366;
  color: white;
  font-size: 26px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* ===== AVALIAÇÕES ===== */
.reviews-section {
  background: #f5f5f5;
  padding: 80px 0;
}

/* TÍTULO */
.reviews-title {
  text-align: center;

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

  color: #1f2937;

  margin-bottom: 40px;
}
.reviews {
  overflow: hidden;
  width: 100%;
  padding: 60px 0;
  background: #f5f5f5;
}

.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;

  animation: scroll 30s linear infinite;
}

/* GRUPO */
.reviews-group {
  display: flex;
  gap: 20px;
}

/* CARD */
.review {
  width: 320px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;

  box-shadow: 0 4px 15px rgba(0,0,0,0.08);

  font-family: Arial, sans-serif;
}

/* TOPO */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.top img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.top strong {
  font-size: 14px;
}

.top span {
  font-size: 12px;
  color: #777;
}

/* LOGO GOOGLE */
.google {
  margin-left: auto;
  font-weight: bold;
  color: #4285F4;
}

/* ESTRELAS */
.stars {
  color: #fbbc04;
  margin-bottom: 10px;
}

/* TEXTO */
.review p {
  font-size: 14px;
  color: #444;
}

/* 🔥 ANIMAÇÃO ENGRENAGEM REAL */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* WRAPPER PRA CENTRALIZAR */
.avaliacoes-cta-wrapper {
  display: flex;
  justify-content: center; /* centraliza horizontal */
  margin-top: 40px;
}

/* BOTÃO */
.avaliacoes-cta {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #00c853;
  color: #fff;

  padding: 16px 28px;
  border-radius: 12px;

  text-decoration: none;
  font-weight: 600;

  box-shadow: 0 0 0 0 rgba(0,200,83, 0.6);
  animation: pulseCTA 1.6s infinite;

  transition: transform 0.2s ease;
}

/* ÍCONE */
.avaliacoes-cta img {
  width: 20px;
  height: 20px;
}

/* HOVER (toque profissional) */
.avaliacoes-cta:hover {
  transform: scale(1.05);
}

/* ANIMAÇÃO */
@keyframes pulseCTA {
  0% {
    box-shadow: 0 0 0 0 rgba(0,200,83, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0,200,83, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,200,83, 0);
  }
}
/* ===== SEÇÃO APRESENTAÇÃO PROFISSIONAL ===== */
/* ===== SEÇÃO CTA FINAL ===== */
.cta-final {
  position: relative;
  /* permite posicionar elementos internos (overlay e conteúdo) de forma absoluta */

  max-width: 1200px;
  /* largura máxima do bloco (limita o tamanho em telas grandes) */

  margin: 60px auto;
  /* espaço em cima/baixo e centraliza horizontalmente */

  height: 520px;
  /* altura fixa da seção */

  border-radius: 20px;
  /* arredonda as bordas (visual moderno) */

  overflow: hidden;
  /* garante que nada ultrapasse as bordas arredondadas */

  background: url('final.jpg') center/cover no-repeat;
  /* imagem de fundo centralizada, cobrindo toda a área sem repetir */
}

/* OVERLAY */
.cta-final-overlay {
  position: absolute;
  /* posiciona sobre toda a imagem */

  inset: 0;
  /* ocupa 100% da largura e altura (top, right, bottom, left = 0) */

  background: rgba(20, 30, 50, 0.65);
  /* camada escura semi-transparente para melhorar leitura do texto */
}

/* CONTAINER INTERNO */
.cta-final-container {
  position: absolute;
  /* permite posicionar o conteúdo sobre a imagem */

  top: 50%;
  /* posiciona no meio vertical */

  right: 60px;
  /* distância da direita (posiciona o bloco mais à direita) */

  transform: translateY(-50%);
  /* centraliza perfeitamente no eixo vertical */

  max-width: 500px;
  /* limita largura do conteúdo para melhor leitura */

  color: #fff;
  /* define o texto como branco */
}

/* TEXTO PEQUENO */
.cta-final-mini {
  color: d6b36a;
  /* cor dourada (destaque elegante) */

  font-size: 16px;
  /* tamanho do texto menor */
}

/* TÍTULO */
.cta-final-container h2 {
  font-size: 40px;
  /* tamanho grande (chamada principal) */

  line-height: 1.3;
  /* espaçamento entre linhas para melhor leitura */

  margin: 15px 0;
  /* espaço acima e abaixo do título */
}

/* PARÁGRAFO */
.cta-final-container p {
  font-size: 16px;
  /* tamanho padrão do texto */

  color: #ddd;
  /* cinza claro (menos destaque que o título) */

  margin-bottom: 25px;
  /* espaço abaixo antes do botão */
}

/* BOTÃO */
.cta-final-btn {
  display: inline-block;
  /* permite aplicar padding e manter comportamento de botão */

  background: d6b36a;
  /* cor dourada (chama atenção) */

  color: #1f2430;
  /* cor do texto escura para contraste */

  padding: 10px 29px;
  /* espaçamento interno (altura e largura do botão) */

  border-radius: 15px;
  /* bordas arredondadas */

  text-decoration: none;
  /* remove sublinhado do link */

  font-weight: bold;
  /* deixa o texto mais forte */

  transition: 0.3s;
  /* suaviza efeitos (hover) */
}

/* HOVER DO BOTÃO */
.cta-final-btn:hover {
  transform: scale(1.05);
  /* aumenta levemente o botão ao passar o mouse (efeito interativo) */
}
/* ===== SEÇÃO DÚVIDAS FREQUENTES ===== */
.faq {
 
  background: #f5f5f5 ; /* fundo */ 
  text-align: center; /* centraliza o título */
}

/* ===== TÍTULO ===== */
.faq h2 {
  font-size: 32px; 
  /* tamanho do título */

  margin-bottom: 40px; 
  /* espaço abaixo do título */

  color: #1f2937;
  /* cor do título (cinza escuro elegante, padrão profissional) */
}

/* ===== ITEM (CAIXA DE CADA PERGUNTA) ===== */
.faq-item {
  max-width: 760px; /* largura máxima (melhora leitura) */
  margin: 0 auto 20px; /* centraliza e dá espaço entre itens */
  border-radius: 6px; /* cantos levemente arredondados */
  overflow: hidden; /* impede conteúdo de sair da caixa */

  box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* sombra leve (efeito premium) */
}

/* ===== PERGUNTA (BOTÃO CLICÁVEL) ===== */
.faq-pergunta {
  width: 100%; /* ocupa toda a largura */
  background: #023a49; /* azul escuro (autoridade e contraste) */
  color: #fff; /* texto branco */
  padding: 18px 20px; /* espaço interno */
  font-size: 16px; /* tamanho da pergunta */
  border: none; /* remove borda padrão */
  cursor: pointer; /* mostra que é clicável */

  display: flex; /* ativa flexbox */
  justify-content: space-between; /* separa texto e + */
  align-items: center; /* alinha verticalmente */

  transition: 0.3s; /* suaviza hover */
}

/* ===== HOVER (QUANDO PASSA O MOUSE) ===== */
.faq-pergunta:hover {
  background: #d6b36a; /* azul um pouco mais claro (feedback visual) */
}

/* ===== RESPOSTA (CAIXA ESCONDIDA) ===== */
.faq-resposta {
  background: #d2d5d8; /* azul claro acinzentado (suave e fácil leitura) */
  max-height: 0; /* começa escondido */
  overflow: hidden; /* esconde conteúdo extra */
  transition: max-height 0.3s ease; /* anima abertura */
}

/* ===== TEXTO DA RESPOSTA ===== */
.faq-resposta p {
  padding: 20px; /* espaço interno */
  text-align: left; /* melhora leitura */
  color: #1e293b; /* texto mais escuro (contraste melhor que cinza claro) */
  line-height: 1.6; /* espaçamento entre linhas */
}

/* ===== ITEM ATIVO (QUANDO CLICA) ===== */
.faq-item.ativo .faq-resposta {
  max-height: 200px; /* altura máxima ao abrir (mostra conteúdo) */
}

/* ===== ANIMAÇÃO DO + ===== */
.faq-item.ativo .faq-pergunta span {
  transform: rotate(45deg); /* gira o + (vira um X visualmente) */
}
/* =========================
   CTA FINAL (SEÇÃO DE OFERTA)
   ========================= */
/* SEÇÃO FINAL CTA */
.cta-final-section { 
  background: #f5f5f5;
  /* cor de fundo (azul escuro elegante, transmite confiança) */

  color: #023a49;
  /* cor padrão do texto (branco para contraste) */

  text-align: center;
  /* centraliza todo o conteúdo */

padding: 60px 20px;
  /* espaçamento interno (topo/baixo maior, laterais menores) */
}

/* TÍTULO */
/* TÍTULO */
.cta-final-section h2 {
  font-size: 36px;
  /* maior impacto visual */

  font-weight: 700;
  /* mais forte e profissional */

  margin-bottom: 20px;

  line-height: 1.3;
  /* melhor leitura */

  letter-spacing: -0.5px;
  /* ajuste fino (cara de site premium) */

  text-decoration: none;
  /* 🔥 REMOVE o sublinhado (isso deixava amador) */
}
/* PARÁGRAFO */
.cta-final-section p {
  font-size: 16px;
  /* tamanho do texto */

  margin-bottom: 20px;
  /* espaço abaixo do parágrafo */

  line-height: 1.6;
  /* espaçamento entre linhas (melhora leitura) */
}

/* BOTÃO CTA */
.cta-final-btn {
  display: inline-flex;
  /* permite alinhar ícone + texto */

  align-items: center;
  /* centraliza verticalmente o conteúdo */

  gap: 10px;
  /* espaço entre ícone e texto */

  background: #00c853;
  /* verde padrão WhatsApp */

  color: #fff;
  /* cor do texto */

  padding: 15px 28px;
  /* tamanho interno do botão */

  border-radius: 12px;
  /* bordas arredondadas (visual moderno) */

  text-decoration: none;
  /* remove sublinhado do link */

  font-weight: 600;
  /* peso da fonte (equilibrado e profissional) */

  margin-bottom: 20px;
  /* espaço abaixo do botão */

  transition: 0.3s;
  /* suaviza efeitos de interação */

  box-shadow: 0 0 0 0 rgba(0,200,83, 0.6);
  /* base da animação pulsante */

  animation: pulseCTA 1.6s infinite;
  /* animação contínua de destaque */
}

/* ÍCONE DO WHATSAPP */
.cta-final-btn img {
  width: 20px;
  /* largura do ícone */

  height: 20px;
  /* altura do ícone */
}

/* HOVER DO BOTÃO */
.cta-final-btn:hover {
  transform: scale(1.05);
  /* aumenta levemente ao passar o mouse */
}

/* ANIMAÇÃO */
@keyframes pulseCTA {
  0% {
    box-shadow: 0 0 0 0 rgba(0,200,83, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0,200,83, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,200,83, 0);
  }
}

/* TEXTO PEQUENO ABAIXO DO BOTÃO */
.cta-final-mini {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  opacity: 0.9;
}



/* =========================
   FOOTER (COM IMAGEM)
   ========================= */
/* ===== FOOTER FINAL ===== */
.footer-final {
  background: #023a49;
  /* cor de fundo (azul escuro, transmite seriedade e confiança) */

  color: #d6b36a;
  /* cor padrão dos textos (dourado elegante) */

  padding: 60px 20px 30px;
  /* espaçamento interno (mais em cima, menos embaixo) */
}

/* CONTAINER PRINCIPAL */
.footer-final-container {
  max-width: 1200px;
  /* largura máxima do conteúdo */

  margin: 0 auto;
  /* centraliza o container horizontalmente */

  display: grid;
  /* ativa grid layout */

  grid-template-columns: 1fr 1fr 1fr;
  /* divide em 3 colunas iguais */

  align-items: center;
  /* alinha verticalmente os itens */

  gap: 30px;
  /* espaço entre as colunas */
}

/* COLUNAS */
.footer-final-col {
  text-align: center;
  /* centraliza o conteúdo dentro de cada coluna */
}

/* ESQUERDA */
.footer-nome {
  font-size: 18px;
  /* tamanho do texto */

  line-height: 1.4;
  /* espaçamento entre linhas para melhor leitura */
}

/* CENTRO */
.footer-centro h3 {
  margin-bottom: 10px;
  /* espaço abaixo do título */

  color: #e7c77c;
  /* dourado mais forte para destaque */
}

.footer-centro p {
  margin: 5px 0;
  /* espaçamento vertical entre linhas */

  color: #dbeafe;
  /* cor mais clara (melhor leitura no fundo escuro) */
}

/* DIREITA (LOGO) */
.footer-direita img {
  max-width: 180px;
  /* limita o tamanho da logo */
}

/* PARTE DE BAIXO */
.footer-final-bottom {
  margin-top: 40px;
  /* espaço acima da parte inferior */

  text-align: center;
  /* centraliza o conteúdo */

  color: #dbeafe;
  /* cor do texto (cinza claro) */

  font-size: 14px;
  /* tamanho menor para informações secundárias */
}

.footer-final-bottom p {
  margin: 5px 0;
  /* espaço entre os parágrafos */
}

/* COPYRIGHT */
.footer-final-bottom .copy {
  display: block;
  /* ocupa uma linha inteira */

  margin-top: 15px;
  /* espaço acima */

  color: #e7c77c;
  /* dourado (destaque) */

  font-size: 13px;
  /* tamanho menor */
}

/* ÍCONES */
.footer-centro p {
  display: flex;
  /* ativa flexbox */

  align-items: center;
  /* alinha verticalmente ícone + texto */

  justify-content: center;
  /* centraliza horizontalmente */

  gap: 10px;
  /* espaço entre ícone e texto */

  color: #e7c77c;
  /* dourado elegante */
}

.icon svg {
  width: 18px;
  /* largura do ícone */

  height: 18px;
  /* altura do ícone */

  fill: #e7c77c;
  /* cor do ícone (igual ao texto) */

  flex-shrink: 0;
  /* impede o ícone de encolher */
}
/* ============================= */
/* MOBILE */
/* ============================= */
/*responsivo*/
@media (max-width: 768px) {


  .hero-main {
    flex-direction: column; /* 🔥 ISSO resolve 80% do problema */
    align-items: center;
    justify-content: center;
  }

  .hero {
    display: flex;
    flex-direction: column; /* ESSENCIAL */
    align-items: center; /* centraliza horizontalmente */
    justify-content: flex-start;
    text-align: center;
    position: relative; /* 🔥 ESSENCIAL */

      min-height: 100vh;

  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;

  /* 🔥 CONTROLE REAL DA BASE */
  padding-bottom: 0px; 
  /* aumente aqui sem quebrar layout */
    
  }
  .elemento {
    position: absolute;
    bottom: Xpx;
  }
  /* ===== TOPO (LOGO + NOME) ===== */
  .hero-top {
    display: flex;
    /* ativa flexbox */

    flex-direction: column; 
    /* coloca os itens em coluna (um embaixo do outro) */

    align-items: center; 
    /* centraliza horizontalmente */

    gap: 10px; 
    /* espaço entre logo e nome */

    margin-bottom: 20px; 
    /* distância até o título */
  }

  /* ===== LOGO ===== */
  .logo {
    width: 140px; 
    /* define tamanho da logo no mobile */

    height: auto;
    /* mantém proporção original */

    display: block;
    /* remove comportamento inline */

    margin: 0 auto;
    /* centraliza horizontalmente */
  }

  /* ===== NOME + OAB ===== */
  .oab {
    font-size: 15px; 
    /* tamanho confortável pra leitura */

    line-height: 1.4;
    /* espaçamento entre linhas */

    color: #d6b36a;
    /* cor dourada */

    text-align: center;
    /* centraliza o texto */

    max-width: 380px; 
    /* evita linhas muito longas */

    margin: 0 auto;
    /* centraliza bloco */
  }

  /* ===== TÍTULO PRINCIPAL ===== */
  .hero-text {
    margin-top: 2px;
    /* aproxima do nome/OAB */

    padding: 0 0px;
    /* respiro lateral */
     bottom: 230px; 
  }

  .hero-text h1 {
    font-size: 16px; 
    /* tamanho ideal mobile */

    line-height: 1.4; 
    /* espaçamento entre linhas */

    color: #d6b36a;
    /* cor dourada */

    margin: 0;
    /* remove espaçamento padrão */

    text-align: center;
    /* centraliza */
  }

 
  /* ===== CONTAINER DA IMAGEM ===== */
  .hero-image {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  /* ===== CÍRCULO ===== */
  .circle {
    position: absolute;
    bottom: 170;
    left: 60%;
    transform: translateX(-50%);

    width: 160px;
    height: 160px;

    background: #f1f1f1;
    border-radius: 50%;

    z-index: 1;
  }

 .client {
  position: absolute;

  bottom: 240; /* base da imagem */
  left: 60%;

  transform: translateX(-50%); /* centraliza */

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

  z-index: 2;
}

  /* ===== BADGE (9+) ===== */
  .experience {
    position: absolute;

    bottom: -35px; /* 🔥 controla o encaixe na base */
    left: 50%;
    transform: translateX(-50%);

    width: 190px;
    height: 105px;

    background: #d6b36a;
    border-radius: 20px;

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

    z-index: 3;
  }

  /* ===== NÚMERO ===== */
.experience strong::before {
  content: "+";
  font-size: 0.6em; /* proporcional ao número */
  margin-right: 4px;
  position: relative;
  top: -5px; /* ajuste fino vertical */
}
  /* ===== TEXTO ===== */
  .experience span {
    font-size: 14px;
    margin-top: 4px;
    text-align: center;
  }



  /* ===== TEXTO ABAIXO ===== */
  .hero-text p {
  position: relative;
  /* permite posicionar o texto livremente */

  bottom: -430px;
  /* 🔥 CONTROLE PRINCIPAL
     define a distância do texto até o final do hero
     ↓ ajuste aqui:
     80px = mais baixo
     150px = mais alto */

  left: 50%;
  /* leva o início do elemento para o centro */

  transform: translateX(-50%);
  /* centraliza perfeitamente no eixo horizontal */

  width: 100%;
  /* ocupa toda a largura disponível */

  max-width: 320px;
  /* limita largura para melhor leitura */

  font-size: 9px;
  /* tamanho ideal mobile */

  line-height: 1.6;
  /* melhora leitura */

  text-align: center;
  /* centraliza o texto */

  padding: 0 15px;
  /* respiro lateral */
}
  /* ===== BOTÃO ===== */
.cta {
  display: inline-flex; 
  /* mantém alinhamento interno do botão */

  align-items: center;
  /* centraliza conteúdo vertical */

  justify-content: center;
  /* centraliza conteúdo horizontal */

  width: 100%;
  /* ocupa largura disponível */

  max-width: 250px;
  /* limita largura */

  padding: 14px 20px;
  /* espaço interno */

  text-align: center;
  /* centraliza texto */

  font-size: 14px;
  /* tamanho da fonte */

  border-radius: 12px;
  /* bordas arredondadas */

  position: absolute;
  /* 🔥 permite posicionar baseado no hero */

  bottom: -330px;
  /* 🔥 CONTROLE PRINCIPAL
     ajuste aqui:
     80px = mais baixo
     120px = médio
     180px = mais alto */

  left: 50%;
  /* centraliza horizontalmente */

  transform: translateX(-50%);
  /* ajuste fino de centralização */
}

  /* ===== SOCIAL BOX ===== */
 .social-box {
  position: relative;
  /* 🔥 permite posicionar em relação ao hero */

  bottom: 00px;
  /* 🔥 CONTROLE PRINCIPAL
     distância da base do hero

     0px = grudado na base
     40px = padrão
     80px = mais alto */

  left: 50%;
  /* leva para o centro */

  transform: translateX(-50%);
  /* centraliza perfeitamente */

  background: #f5f5f5;
  /* fundo claro */

  padding: 14px 20px;
  /* espaço interno */

  border-radius: 20px 20px 0 0;
  /* topo arredondado */

  display: flex;
  /* layout horizontal */

  gap: 15px;
  /* espaço entre botões */

  box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
  /* sombra suave */

  z-index: 4;
  /* garante que fique acima de outros elementos */
}
  .social-box a {
    width: 48px;
    /* tamanho do botão */

    height: 48px;

    background: #023a49;
    /* cor escura */

    border-radius: 50%;
    /* formato circular */

    display: flex;
    /* ativa flex */

    align-items: center;
    /* centraliza vertical */

    justify-content: center;
    /* centraliza horizontal */
  }

  .social-box img {
    width: 22px;
    /* tamanho do ícone */
  }

/*problemas*/

  /* ===== SEÇÃO ===== */
  .problema {
    padding: 40px 15px; 
    /* reduz espaçamento lateral e vertical */

    text-align: center; 
    /* mantém botão centralizado */
  }

  /* ===== CARD ===== */
  .problema-box {
    width: 100%; 
    /* ocupa toda largura do mobile */

    padding: 30px 20px; 
    /* diminui espaçamento interno */

    border-radius: 20px; 
    /* mantém arredondado */

    display: flex; 
    /* mantém flex */

    flex-direction: column; 
    /* 🔥 empilha tudo (coluna) */

    gap: 30px; 
    /* espaço entre blocos */

    text-align: left; 
    /* texto alinhado à esquerda (melhor leitura) */
  }

  /* ===== COLUNAS ===== */
  .problema .col {
    width: 100%; 
    /* ocupa largura total */

    text-align: left; 
    /* garante alinhamento */
  }

  /* ===== TÍTULO ===== */
  .problema h2 {
    font-size: 22px; 
    /* reduz tamanho */

    line-height: 1.3; 
    /* melhora leitura */

    margin-bottom: 20px;
  }

  /* ===== LISTA ===== */
  .problema ul {
    padding: 0;
  }

  /* ===== ITENS ===== */
  .problema li {
    font-size: 15px; 
    /* tamanho confortável */

    line-height: 1.5; 
    /* melhora leitura */

    margin-bottom: 16px;

    display: flex; 
    /* mantém ícone + texto */

    align-items: flex-start; 
    /* alinha topo (melhor para múltiplas linhas) */

    gap: 12px;
  }

  /* ===== ÍCONE ===== */
  .problema li::before {
    content: "➜"; 

    font-size: 16px;

    color: #e5c98b;

    flex-shrink: 0; 
    /* impede o ícone de encolher */
  }

  /* ===== BOTÃO ===== */
  .cta-bottom {
    width: 100%; 
    /* ocupa largura total */

    max-width: 280px; 
    /* limita largura */

    margin: 30px auto 0; 
    /* centraliza */

    display: block; 

    text-align: center;

    padding: 14px 20px; 
    /* ajuste para toque */

    font-size: 15px;
  }


/* =========================
CARDS RESPONSIVOS
========================= */


  /* ===== SEÇÃO ===== */
  .beneficios {
    padding: 60px 20px 40px; 
    /* reduz espaçamento e deixa mais compacto no mobile */

    text-align: center;
  }

  /* ===== CONTAINER ===== */
  .beneficios-container {
    width: 100%;
  }

  /* ===== TÍTULO PRINCIPAL ===== */
  .beneficios h2 {
    font-size: 28px; 
    /* menor e mais equilibrado */

    line-height: 1.3; 
    /* melhora leitura */

    margin-bottom: 15px;
  }

  /* ===== SUBTEXTO ===== */
  .beneficios .sub {
    font-size: 16px; 
    /* tamanho confortável */

    line-height: 1.5;

    margin-bottom: 25px;

    padding: 0 10px; 
    /* evita texto colado nas bordas */
  }

  /* ===== TÍTULO SECUNDÁRIO ===== */
  .beneficios .titulo-secundario {
    font-size: 22px;

    margin-bottom: 30px;
  }

  /* ===== GRID → COLUNA ===== */
  .beneficios-grid {
    display: flex; 
    /* troca grid por flex */

    flex-direction: column; 
    /* 🔥 empilha tudo */

    gap: 40px; 
    /* espaço entre os cards */
  }

  /* ===== CARD ===== */
  .beneficio {
    width: 100%;

    align-items: center;

    text-align: center;
  }

  /* ===== TEXTO PRINCIPAL ===== */
  .beneficio p {
    font-size: 17px;

    line-height: 1.4;

    max-width: 100%; 
    /* remove limite do desktop */

    margin-bottom: 6px;
  }

  /* ===== TEXTO SECUNDÁRIO ===== */
  .beneficio span {
    font-size: 14px;

    line-height: 1.5;

    max-width: 100%;

    margin-bottom: 15px;
  }

  /* ===== IMAGEM ===== */
  .beneficio img {
    width: 100%; 
    /* ocupa toda largura */

    max-width: 320px; 
    /* limita pra não ficar gigante */

    height: 180px; 
    /* altura proporcional */

    object-fit: cover;

    border-radius: 14px;

    margin-top: 10px;
  }

  /* ===== CTA ===== */
  .cta-middle {
    padding: 40px 20px 80px;
  }

  .btn-cta-top {
    width: 100%;
    max-width: 280px;

    margin: 0 auto 30px;

    display: block;

    font-size: 15px;

    padding: 16px 20px;
  }

  .cta-middle h2 {
    font-size: 28px;

    line-height: 1.3;
  }

  .cta-middle p {
    font-size: 16px;

    line-height: 1.5;

    padding: 0 10px;
  }


/*fale agora*/
/*oferta*/
/*apresentação*/

/* =========================
SEÇÃO SOBRE - MOBILE
========================= */


  /* ===== SEÇÃO ===== */
  .secao-juridico {
    padding: 40px 15px; 
    /* reduz espaçamento externo */
  }

  /* ===== CARD ===== */
  .juridico-container {
    width: 100%; 
    /* ocupa toda largura */

    padding: 30px 20px; 
    /* reduz padding interno */

    border-radius: 20px;

    display: flex;

    flex-direction: column; 
    /* 🔥 empilha tudo */

    gap: 30px; 
    /* espaço entre texto e imagem */

    text-align: left;
  }

  /* ===== TEXTO ===== */
  .secao-juridico .conteudo {
    width: 100%;
  }

  /* ===== TÍTULO ===== */
  .secao-juridico .conteudo h2 {
    font-size: 22px; 
    /* tamanho igual ao print */

    line-height: 1.4;

    margin-bottom: 25px;

    text-align: center; 
    /* título centralizado */
  }

  /* ===== LISTA ===== */
  .secao-juridico .lista {
    padding: 0;
  }

  /* ===== ITENS ===== */
  .secao-juridico .lista li {
    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 18px;

    display: flex;

    align-items: flex-start; 
    /* 🔥 alinha com topo (igual print) */

    gap: 12px;
  }

  /* ===== ÍCONE ===== */
  .secao-juridico .lista li::before {
    content: "➜";

    background: #d6b36a;

    color: #023a49;

    font-size: 12px;

    border-radius: 50%;

    width: 24px;
    height: 24px;

    display: flex;

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

    flex-shrink: 0; 
    /* 🔥 impede o ícone de deformar */
  }

  /* ===== IMAGEM ===== */
  .secao-juridico .imagem {
    width: 100%;

    display: flex;

    justify-content: center;
  }

  .secao-juridico .imagem img {
    width: 100%; 
    /* ocupa largura */

    max-width: 300px; 
    /* tamanho ideal do print */

    border-radius: 12px; 
    /* mais moderno */

    margin-top: 10px;
  }


/* =========================
SEÇÃO AVALIAÇÃO - MOBILE
========================= */


  /* ===== SEÇÃO ===== */
  .reviews-section {
    padding: 40px 0;
  }

  /* ===== TÍTULO ===== */
  .reviews-title {
    font-size: 28px; 
    /* menor e equilibrado */

    margin-bottom: 20px;
  }

  /* ===== CONTAINER ===== */
  .reviews {
    padding: 20px 0;

    overflow: hidden; 
    /* mantém corte lateral */
  }

  /* ===== TRACK (REMOVE ANIMAÇÃO) ===== */
  .reviews-track {
   
    justify-content: center; 
    /* centraliza o card */

    width: 100%;
  }

  /* ===== GRUPO ===== */
  .reviews-group {
    justify-content: center;
  }

  /* ===== CARD ===== */
  .review {
    width: 100%; 
    /* ocupa boa parte da tela */

    max-width: 320px;

    padding: 20px;

    border-radius: 16px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  }

  /* ===== TOPO ===== */
  .top {
    gap: 10px;
  }

  .top strong {
    font-size: 15px;
  }

  .top span {
    font-size: 12px;
  }

  /* ===== ESTRELAS ===== */
  .stars {
    font-size: 16px;
  }

  /* ===== TEXTO ===== */
  .review p {
    font-size: 15px;
    line-height: 1.5;
  }



  /* ===== CTA ===== */
  .avaliacoes-cta-wrapper {
    margin-top: 30px;
    padding: 0 15px;
  }

  .avaliacoes-cta {
    width: 100%;
    max-width: 320px;

    margin: 0 auto;

    justify-content: center;

    padding: 18px 20px;

    font-size: 16px;

    border-radius: 14px;
  }

  .avaliacoes-cta img {
    width: 22px;
    height: 22px;
  }


/*cta-final*/

  /* ===== CONTAINER PRINCIPAL ===== */
  .cta-final-container {
    position: relative; 
    /* remove posicionamento lateral do desktop */

    top: auto;
    right: auto;
    transform: none;

    max-width: 100%;

    text-align: center; 
    /* 🔥 centraliza tudo */

    padding: 40px 20px; 
    /* espaçamento interno */

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ===== TEXTO PEQUENO ===== */
  .cta-final-mini {
    color: #d6b36a; 
    /* corrigido (faltava #) */

    font-size: 14px;

    margin-bottom: 10px;
  }

  /* ===== TÍTULO ===== */
  .cta-final-container h2 {
    font-size: 26px; 
    /* tamanho ideal mobile */

    line-height: 1.4;

    margin: 10px 0 15px;

    max-width: 300px; 
    /* quebra igual ao print */
  }

  /* ===== PARÁGRAFO ===== */
  .cta-final-container p {
    font-size: 15px;

    line-height: 1.5;

    color: #ddd;

    margin-bottom: 25px;

    max-width: 320px;
  }

  /* ===== BOTÃO ===== */
  .cta-final-btn {
    width: 100%; 
    /* ocupa largura */

    max-width: 280px; 
    /* limita tamanho */

    display: block;

    text-align: center;

    padding: 16px 20px; 
    /* botão maior (mobile touch) */

    border-radius: 14px;

    font-size: 16px;

    margin-top: 10px;
  }


/*faq*/
/*ainda com dúvidas?*/
/*footer*/


  /* ===== SEÇÃO ===== */
  .footer-final {
    padding: 40px 15px 25px; 
    /* reduz espaçamento */
  }

  /* ===== CONTAINER ===== */
  .footer-final-container {
    display: flex; 
    /* troca grid por flex */

    flex-direction: column; 
    /* 🔥 empilha tudo */

    gap: 25px; 
    /* espaço entre blocos */

    text-align: center; 
    /* centraliza tudo */
  }

  /* ===== COLUNAS ===== */
  .footer-final-col {
    width: 100%;
  }

  /* ===== NOME ===== */
  .footer-nome {
    font-size: 16px;

    line-height: 1.5;
  }

  /* ===== CONTATO ===== */
  .footer-centro h3 {
    font-size: 16px;

    margin-bottom: 10px;
  }

  .footer-centro p {
    font-size: 15px;

    line-height: 1.5;

    justify-content: center; 
    /* garante centralização dos ícones */

    flex-wrap: wrap; 
    /* 🔥 evita quebrar layout com textos grandes */
  }

  /* ===== LOGO ===== */
  .footer-direita img {
    max-width: 140px; 
    /* menor e proporcional */

    margin: 10px auto;
  }

  /* ===== PARTE DE BAIXO ===== */
  .footer-final-bottom {
    margin-top: 30px;

    font-size: 13px;

    line-height: 1.6;

    padding: 0 10px;
  }

  .footer-final-bottom p {
    margin: 6px 0;
  }

  /* ===== COPYRIGHT ===== */
  .footer-final-bottom .copy {
    font-size: 12px;

    margin-top: 12px;
  }
}