:root {
  --cor-principal: #0a2a3a;
  --cor-secundaria: #9b51e0;
  --branco: #fff;
  --cinza-claro: #eeeeee;
  --azul: #0693e3;
  --gradiente: linear-gradient(135deg, #0693e3 0%, #9b51e0 100%);
  --amarelo: #ffbf01;
  --preto: black;
  --bg: #ffffff;
  /* fundo branco */
  --panel: #f3f4f6;
  /* painéis claros */
  --text: #111827;
  /* texto escuro */
  --muted: #6b7280;
  /* texto secundário */
  --accent: #22c55e;
  /* destaque */
  --accent-2: #3b82f6;
  /* segundo destaque */
  --danger: #d97706;
  /* aviso */
  --radius: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  color: var(--cor-principal);
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 5.5rem;
  text-transform: uppercase;
  font-weight: 800;
}

h2 {
  font-size: 5rem;
  font-weight: 800;
}

h2.subtitulo-simulador {
  text-transform: uppercase;
  font-size: 55px !important;
}

h2.subtitulo {
  margin-bottom: 6rem;
  text-transform: uppercase;
  font-size: 55px !important;
}

h3 {
  font-size: 4.5rem;
}

h4 {
  font-size: 4rem;
}

h5 {
  font-size: 3.5rem;
}

h6 {
  font-size: 3rem;
}

a {
  text-decoration: none;
  color: inherit;
}


div h1,
div h2 {
  margin-bottom: 3rem;
}

label {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  background-color: var(--amarelo);

  padding: 6px;
  -webkit-border-radius: 20px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 20px;
  -moz-border-radius-bottomleft: 0;
  border-radius: 20px;
  border-bottom-left-radius: 0;
}

input,
textarea {
  width: 100%;
  padding: 1.2rem 1.5rem;
  font-size: 1.4rem;
  border: 1px solid #ccc;
  border-radius: 0.8rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

input::placeholder,
textarea::placeholder {
  color: #aaa;
  font-style: italic;
}

select,
input[type="number"],
input[type="text"] {
  width: 100%;
  padding: 12px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text);
  border-radius: 10px;
  outline: none;
}





/* Card do comparativo */
.comparativo-card {
  background: #fff;
  border: 3px solid var(--cor-principal);
  border-radius: 18px;
  padding: 3rem;
  /* aumentei o padding interno */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  max-width: 1100px;
  /* aumentei a largura */
  margin: 3rem auto;
}

/* Título */
.comparativo-header h3 {
  text-align: center;
  font-size: 2.6rem;
  /* maior */
  font-weight: 800;
  color: var(--cor-principal);
  margin-bottom: 2rem;
  font-family: "Montserrat", sans-serif;
}

/* Tabela */
.comparativo-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  /* aumentei a fonte */
}

.comparativo-tabela th,
.comparativo-tabela td {
  padding: 16px 20px;
  /* mais espaço entre linhas */
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
}

.comparativo-tabela th {
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  /* maior para o cabeçalho */
}

.comparativo-tabela th.azul {
  background: #e31e24;
  color: #fff;
}

.comparativo-tabela th.vermelho {
  background: var(--cor-principal);
  color: #fff;
}

.comparativo-tabela .custo td {
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  /* destaque maior no custo total */
}

.comparativo-tabela .custo td.azul {
  background: #e31e24;
  color: #fff;
}

.comparativo-tabela {
  border-radius: 10px;
}


.comparativo-tabela .custo td.vermelho {
  background: var(--cor-principal);
  color: #fff;
}

/* Faixa de economia */
.ribbon {
  background: var(--accent);
  color: #fff;
  text-align: center;
  padding: 1.3rem 2rem;
  /* mais altura */
  border-radius: 14px;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  /* aumentei a fonte */
  letter-spacing: 0.6px;
  box-shadow: 0 8px 20px rgba(227, 30, 36, 0.35);
}







.mobile-menu {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.contagem {
  font-size: 18px;
  font-weight: bold;
}

/* -------------------INÍCIO ----------- Configuração do efeito GRAFO ---------*/

.particulas {
  position: absolute;
  inset: 0;
}

#inicio-js {
  z-index: 2;
  opacity: .2;
}

/* -------------------FIM ----------- Configuração do efeito GRAFO ---------*/

/* -------------------INÍCIO ----------- Configuração do menu ASIDE ---------*/
.menu {
  background: linear-gradient(to right, #fff, #e8e8e8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-bottom: var(--cinza-claro) 0.1px solid;
  z-index: 1000;
}

.menu::before {
  width: 70%;
  height: 8px;
  background: var(--amarelo);
  display: block;
  content: "";
  position: absolute;
  left: 30%;
  bottom: -8px;
}

.menu div img {
  margin-top: 8px;
  max-width: 25rem;
  height: 5rem;
}

.menu ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.menu ul li a {
  display: block;
  padding: 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cor-principal);
  position: relative;
  text-transform: uppercase;
}

.menu ul li a:after {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  width: 0;
  height: 0.2rem;
  background: var(--amarelo);
  transition: all 300ms ease-in-out;
}

.menu ul li a:hover::after {
  width: 50%;
  left: 25%;
}

.conteudo-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

/* -------------------FIM ----------- Configuração do menu ASIDE ---------*/
.slideshow1 {
  position: relative;
  width: 100%;
  height: 100vh; /* altura do banner */
  overflow: hidden;
}

.disclaimerr {
  font-size: 0.85rem;      /* texto menor */
  color: #666;             /* cinza apagado */
  font-style: italic;      /* deixa em itálico */
  margin-top: 8px;         /* espaço do conteúdo acima */
  display: block;          /* garante que quebre linha */
  opacity: 0.8;            /* um pouco mais apagado */
}


.slideshow1 .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow1 .item.active {
  opacity: 1;
}

.slideshow1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);         /* começa levemente maior */
  transition: transform 8s ease; /* zoom suave */
}

.slideshow1 .item.active img {
  transform: scale(1); /* vai "afastando" ou aproximando suavemente */
}


/* quando o slide estiver ativo, aplica Ken Burns */
.slick-active img {
  transform: scale(1.2);
  /* zoom lento */
}

/* -------------------FIM ----------- Configuração do menu ASIDE ---------*/

#vantagens {
  padding: 70px 20px 70px 20px;
}

#vantagens img {
  max-width: 170px;
  display: block;
  margin: 20px auto;
}

/* -------------------INÍCIO ----------- Configuração do conteúdo ---------*/

.conteudo-principal {
  max-width: 125rem;
  margin: 0 auto;
  padding: auto;
}

.conteudo-principal h2 {
  font-size: 3rem;
}

.conteudo-principal-simulador {
  margin: 0 auto;
  padding: auto;
}

.conteudo-principal-simulador h2 {
  color: var(--branco);
}

#depoimentos h2 {
  color: var(--branco);
}

.bg-principal {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #000;
  padding: 0;
}

.bg-branco {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--branco);
}

.conteudo-frente p {
  font-size: 2rem;
}

.conteudo-frente {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  padding: 40px 20px 80px 20px;
  margin: 0 auto;
  justify-content: center;
}

.conteudo-frente-header p {
  font-size: 2rem;
}

.conteudo-frente-header {
  z-index: 6;
  position: absolute;
  color: var(--branco);
}

.secao {
  min-height: 100vh;
  text-align: center;
}

.secao-simulador {
  min-height: 100vh;
  text-align: center;
}

#simulador {
  padding: 90px 20px 40px 20px;
  position: relative;
  z-index: 2;
}

#solucoes {
  position: relative;
}

#solucoes h2 {
  color: var(--branco);
}

#solucoes::before {
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #0a2a3a, #9b51e0);
  opacity: .7;

}

#quem-somos {
  background: linear-gradient(to top, #f0f0f0, #fff, #fff, #e0e0e0);
  padding: 40px 20px 80px 20px;
}

#quem-somos h2 {
  font-size: 22px !important;
  margin: 40px;
}

#quem-somos h2 span {
  background-color: var(--amarelo);
  color: var(--cor-principal);
  padding: 6px;
}

#quem-somos .flex-h {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
}

#quem-somos .flex-h .coluna .fotos {
  margin: 0px auto;
  width: 100%;
  max-width: 400px;
}

#quem-somos .flex-h .coluna .fotos .item {
  position: relative;
}

#quem-somos .flex-h .coluna .fotos .item p {
  background-color: var(--amarelo);
  width: auto;
  display: inline;
  padding: 8px 22px;
  z-index: 2;
  position: relative;
  top: -20px;
  border-radius: 8px;
}

#quem-somos .flex-h .coluna .fotos img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 30px;
}

/* -------------------FIM ----------- Configuração do conteúdo ---------*/

/* -------------------INÍCIO ----------- Configuração do Botão ---------*/

.botao-investidor {
  margin-top: 3rem;
  background: var(--gradiente);
  /* gradiente já definido no seu :root */
  color: #ffffff;
  /* texto branco */
  padding: 14px 32px;
  border-radius: 999px;
  /* estilo pill */
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
}

.botao-investidor:hover {
  transform: translateY(-2px) scale(1.03);
  /* leve destaque */
  background: linear-gradient(135deg, #5f4bb6, #2563eb);
  /* inversão elegante do gradiente */
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.botao-aside {
  text-align: center;
  background: var(--amarelo);
  color: var(--preto);
  padding: 12px 28px;
  border-radius: 32px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 2px 16px #0002;
  transition: background 0.2s;
  display: inline-block;
}

.botao-aside:hover {
  background: #ffe066;
}

.botao {
  margin-top: 3rem;
  background: var(--amarelo);
  color: var(--preto);
  padding: 12px 28px;
  border-radius: 32px;
  font-weight: 700;
  font-size: 2rem;
  text-decoration: none;
  box-shadow: 0 2px 16px #0002;
  transition: background 0.2s;
  display: inline-block;
}

.botao:hover {
  background: #ffe066;
}

.botao-frente {
  z-index: 1;
}

/* -------------------FIM ----------- Configuração do Botão ---------*/

/* -------------------INICÍO ----------- Configuração do Grid ---------*/

.grade {
  max-width: 110rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 1rem;
  text-align: center;
  margin-left: 45px;
}

#perfil .grade img {
  max-width: 100%;
  height: auto;
  margin: 0px auto;
  display: block;
  border-radius: 20px;
}

.grade-simulador {
  max-width: 150rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.botao,
.botao-investidor,
.botao-aside {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  padding: 12px 20px;
}




.blocos {
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.blocos h3 {
  margin: 10px auto;
  font-size: 30px;
}

.blocos:hover {
  transform: translateY(-4px);
}

.bloco-consorcios {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  color: var(--branco);
  min-height: 200px;
  transition: transform 0.3s ease;
  /* suaviza a animação */

}

.bloco-consorcios:hover {
  transform: scale3d(1.04, 1.04, 1);
  background: rgba(0, 0, 0, 0.7);

}

.bloco-consorcios h2 {
  font-size: 3rem;
}

.bloco-consorcios p {
  font-size: 1.4rem;
}

.bloco-consorcios .fa-solid {
  color: var(--cor-principal);
  background: linear-gradient(45deg, #fff, #fff, #666);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20px auto;
}

/* -------------------FIM ----------- Configuração do Grid ---------*/

/* -------------------INICÍO ----------- Configuração do Depoimentos ---------*/
#simulador {
  position: relative;
  background: radial-gradient(var(--cor-principal), var(--azul));
}

#depoimentos {
  position: relative;
  background: radial-gradient(var(--cor-principal), var(--azul));
}

#depoimentos::before {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  background: url('../img/bg5.jpg') no-repeat center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .25;
}

.depoimentos-conteudo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.depoimento-video {
  margin-top: 10rem;
}

.depoimentos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.estrelas {
  color: var(--amarelo);
  font-size: 1.6rem;
}


.depoimentos-lista,
.depoimentos-video {
  flex: 1 1 45%;
}

.depoimento {
  background: rgba(255, 255, 255, 0.9);
  /* fundo mais visível */
  padding: 2rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  /* deixa foto em cima */
  align-items: center;
  gap: 1.2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.depoimento:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.foto-cliente {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cor-secundaria);
}


.depoimentos-lista h2,
.depoimento-video h2 {
  font-size: 3.5rem;
  margin-bottom: 5rem;
  font-weight: 600;
}

.depoimento p {
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0;
}

.depoimento span,
.depoimento p:last-child {
  font-size: 1.8rem;
  color: #ffffff;
  display: flex;
  margin-top: 0.4rem;
}

.depoimento-video video {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 10px;
}

.depoimento blockquote {
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  font-size: 1.6rem;
}

.nome-cliente {
  font-weight: 700;
  margin-top: 0.8rem;
  color: var(--cor-principal);
}

.nome-cliente span {
  display: block;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--muted);
}


/* -------------------FIM ----------- Configuração do Depoimentos ---------*/

/* -------------------INICÍO ----------- Configuração do Formulário ---------*/

.formulario {
  background: #ffffff;
  color: #000000;
  max-width: 60rem;
  margin: 4rem auto;
  padding: 3rem 4rem;
  border: 1px solid #ddd;
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.1);
  font-family: "Open Sans", sans-serif;
  text-align: left;
}

.formulario h2 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: var(--azul);
}

.form-linha {
  display: block;
  gap: 2rem;
  padding-bottom: 15px;
}

.campo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.form-linha-consorcio {
  padding: 0.8rem 1rem;
  font-size: 1.4rem;

  border-radius: 0.8rem;
  background-color: var(--branco);
  color: var(--cor-principal);
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-linha-consorcio select:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 5px var(--azul);
  outline: none;
}

.form-conta input {
  width: 100%;
}

.formulario button {
  font-size: 1.2rem;
  padding: 1.2rem;
  background-color: var(--azul);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
  margin-top: 10px;
  margin-left: 10px;
  align-self: center;
  display: block;
  width: 100%;
  width: 98%;
}

.formulario button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

#btnEnviar:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.formulario .obrigatorio {
  display: block;

  font-size: 1.3rem;
  color: #555;
  margin-top: 1rem;
}

#mensagemForm {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  min-height: 18px;
  transition: opacity 0.3s ease;
}

#mensagemForm.erro {
  color: #d9534f;
}

#mensagemForm.sucesso {
  color: #28a745;
}

/* -------------------FIM ----------- Configuração do Formulário ---------*/

/* -------------------INICÍO ----------- Configuração do Simulador ---------*/

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.6rem;
}

.body {
  padding: 1.6rem;
}

.result {
  display: grid;
  gap: 1.2rem;
}

.pill {
  padding: 1.6rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.pill h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.pill .big {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  color: var(--accent);
}

.pill.mezzo .big {
  color: var(--accent-2);
}

.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.warn {
  border-left: 4px solid var(--danger);
  padding-left: 12px;
}

.small {
  font-size: 11px;
  color: var(--muted);
}

.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.line .label {
  color: var(--muted);
  font-size: 14px;
}

.line .value {
  font-weight: 700;
}

.summary {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

/* -------------------FIM ----------- Configuração do Simulador ---------*/

/* -------------------INICÍO ----------- Configuração do Efeito Overlay ---------*/

.wrap.grade {
  position: relative;
}

.overlay {
  position: absolute;
  top: 50%;
  /* centraliza vertical */
  left: 50%;
  /* centraliza horizontal */
  transform: translate(-50%, -50%);
  /* ajusta pro centro real */

  width: 80%;
  /* ocupa 80% da largura do card */
  height: 70%;
  /* ocupa 70% da altura do card */

  background-color: rgba(255, 255, 255, 0.6);
  z-index: 10;
  cursor: not-allowed;
  display: none;
  border-radius: 12px;
  /* mantém arredondado */
  backdrop-filter: blur(5px);
  /* efeito de vidro */
}


.overlay-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  width: 80%;
}

.blurred {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

/* -------------------FIM ----------- Configuração do Efeito Overlay ---------*/

/* -------------------INICIO ----------- Configuração do Footer ---------*/

.footer {
  background: linear-gradient(to bottom, var(--cor-principal), #111827);
  padding: 4rem 0 1rem;
  width: 100%;
  position: relative;
}

footer::before {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  background: url('../img/bg5.jpg') no-repeat center top;
  background-size: cover;
  opacity: .25;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

.footer-content {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  /* garante altura igual para os filhos */
  margin-bottom: 25px;
  width: 100%;
  max-width: 100%;
}

.footer-content>.footer-column {
  flex: 1;
  /* cada filho ocupa a mesma largura */
  display: flex;
  /* cada filho vira flex container */
  justify-content: center;
  /* centraliza horizontal */
  align-items: center;
}

.footer-column:first-child {
  color: #fff;
  font-size: 16px;
  display: block;
}

.footer-column:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer-column .box {
  color: #fff;
  margin: 0px;
  max-width: 200px;
  display: block;
  text-align: center;

  margin: 0px auto;

}

.footer-column i {
  display: block;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  font-size: 28px;
}

.footer-column h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--branco);
}

.footer-column a {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-column a:hover {
  color: var(--amarelo);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;

  color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.social-links a * {
  font-size: 22px !important;
}

.social-links a:hover {
  color: var(--amarelo);
}

.copyright p {
  opacity: .3;
  text-align: left;
  padding: 2rem 0;

  color: var(--branco);
  font-size: 1.3rem;
}

/* CSS */
.rodape {
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 0;
  color: var(--branco);
  font-size: 1.3rem;
  width: 100%;
}

.rodape .col {
  flex: 1;
}

.footer-logos {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  /* centraliza horizontalmente */
  gap: 20px;
  /* espaço entre as logos */
}

.logo-banco {
  filter: brightness(1.5);
  /* 1 = original, >1 = mais claro, <1 = mais escuro */
}

.footer-logo {
  height: 60px;
  /* ou ajuste o tamanho desejado */
  object-fit: contain;
}

.button-widget-whatsapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #25D366;
  /* cor do WhatsApp */
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
  animation: pulseButton 1.6s infinite ease-in-out;
}

@keyframes pulseButton {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
    /* aumenta 15% */
  }

  100% {
    transform: scale(1);
  }
}

/* -------------------FIM ----------- Configuração do Footer ---------*/

/* -------------------INÍCIO ----------- MEDIA QUERIES ---------*/
.menu ul li a {
  font-size: clamp(1rem, 1vw + 0.4rem, 1.3rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cor-principal);
}

@media (max-width: 1200px) {

  .conteudo-principal,
  .conteudo-principal-simulador {
    max-width: 95%;
  }

  h1 {
    font-size: 4.5rem;
  }

  h2 {
    font-size: 4rem;
  }
}

@media (max-width: 992px) {
  h1 {
    font-size: 3.8rem;
  }

  h2 {
    font-size: 3.5rem;
  }

  h3 {
    font-size: 3rem;
  }

  .blocos h2 {
    font-size: 2.5rem;
  }

  .blocos p {
    font-size: 1.3rem;
  }

  .menu ul {
    gap: 1rem;
  }

  .menu ul li a {
    font-size: 1.3rem;
  }

  .grade-simulador {
    grid-template-columns: repeat(2, 1fr);
  }

  .depoimentos-conteudo {
    gap: 1.5rem;
    flex-direction: column;
    align-items: center;
  }

  .depoimentos-lista,
  .depoimentos-video {
    flex: 1 1 100%;
  }

  .depoimento-video {
    margin-top: 5rem;
  }

  .depoimentos-lista h2,
  .depoimento-video h2 {
    font-size: 2.8rem;
    margin-bottom: 3rem;
  }

  .formulario {
    padding: 2.5rem;
  }
}

@media (max-width: 768px) {
  #depoimentos {
    position: relative;
    height: auto;
    min-height: 120vh;
    padding: 60px 20px;
  }

  .conteudo-frente h1 {
    font-size: 3rem !important;
  }

  .conteudo-frente-header h1 {
    font-size: 3rem !important;
  }

  .conteudo-frente-header p {
    font-size: 1.4rem;
  }

  .conteudo-frente p {
    font-size: 1.2rem;
  }

  #inicio {
    min-height: 10vh;
    height: auto;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.8rem;
  }

  h3 {
    font-size: 2.5rem;
  }

  section {
    scroll-margin-top: 50px;
    /* ajuste conforme a altura do seu menu mobile */
  }

  .menu nav ul {
    display: none;
    /* escondido por padrão */
    flex-direction: column;
    gap: 15px;
    background: #fff;
    padding: 20px;
    position: absolute;
    top: 0;
    /* gruda no topo */
    right: 0;
    /* começa da esquerda */
    width: 50%;
    /* ocupa toda a largura */
    height: 100vh;
    /* ocupa altura total da tela */
    z-index: 1000;
  }

  .menu nav ul.ativo {
    display: flex;
    /* aparece quando clicado */
  }

  .menu ul.ativo {
    display: block;
  }

  .mobile-menu {
    display: block;
    font-size: 2rem;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
  }

  /* Menu Mobile */
  .menu ul {
    display: none;
    /* Oculta o menu principal em telas menores */
  }

  .conteudo-menu {
    padding: 1rem 2rem;
  }

  .conteudo-principal {
    padding: 0 1.5rem;
  }

  .secao {
    padding: 5rem 0;
  }

  .secao h1,
  .secao div h1 {
    margin-bottom: 3rem;
  }

  .secao-simulador {
    padding-top: 5rem;
  }

  .secao-simulador h1 {
    margin-top: 0;
  }

  .grade {
    margin-left: 0;
    grid-template-columns: 1fr;
  }

  .grade-simulador {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .form-linha {
    flex-direction: column;
    gap: 0;
  }

  .campo {
    margin-bottom: 1.5rem;
  }

  .formulario h2 {
    font-size: 2rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  #inicio .conteudo-frente-header {
    padding: 50px 0 !important;
  }

  #inicio .conteudo-frente-header h1 {
    font-size: 20px;
    margin: 35px 20px 20px 20px;
  }
  

  .slideshow .item {
    height: 70vh;
  }

  #inicio {
    padding-bottom: 0;
  }

  h2.subtitulo-simulador {
    font-size: 35px !important;
  }

  h2.subtitulo {
    font-size: 35px !important;
  }

  #solucoes {
    padding: 50px 20px;
    height: auto;
    min-height: auto;
    position: unset !important;
    display: block;
  }

  #solucoes::before {
    display: none;
    
  }

  .bloco-consorcios {
    min-height: auto;
    max-width: 70%;
    margin: 20px auto;
  }

  .bloco-consorcios h2 {
    font-size: 2.1rem;
  }

  #solucoes * {

    position: unset !important;
  }

  #solucoes .grade {
    display: block;
  }

  #quem-somos h2 {
    line-height: 200%;
  }

  #quem-somos .flex-h {
    display: block;
  }

  video {
    max-width: 250px;
    height: auto;
  }

  .footer-content {
    display: block;
  }

  .footer-column {
    padding: 20px 0;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .footer-column {
    border: none;
  }

  .copyright {
    display: none;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  .botao {
    font-size: 1.6rem;
    padding: 10px 24px;
  }

  .formulario {
    padding: 2rem;
  }

  .depoimento {
    padding: 0.8rem;
    flex-direction: column;
    align-items: center;
  }

  .foto-cliente {
    margin-bottom: 0.8rem;
  }

  .secao-simulador {
    padding-top: 4rem;
  }
}

/* Animação para o menu */
@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ======== MEDIA QUERIES ======== */

/* Tablets (até 1024px) */
@media (max-width: 1024px) {
  .comparativo-card {
    max-width: 90%;
    padding: 2.5rem;
  }

  .comparativo-header h3 {
    font-size: 2.2rem;
  }

  .comparativo-tabela {
    font-size: 1.2rem;
  }

  .comparativo-tabela th {
    font-size: 1.3rem;
  }

  .ribbon {
    font-size: 1.3rem;
    padding: 1.1rem 1.6rem;
  }
}

/* Celulares médios (até 768px) */
@media (max-width: 768px) {
  .comparativo-card {
    padding: 2rem;
    max-width: 95%;
  }

  .comparativo-header h3 {
    font-size: 2rem;
  }

  .comparativo-tabela {
    font-size: 1.1rem;
  }

  .comparativo-tabela th {
    font-size: 1.2rem;
  }

  .ribbon {
    font-size: 1.2rem;
    padding: 1rem 1.4rem;
  }
}

/* Celulares pequenos (até 480px) */
@media (max-width: 480px) {
  .comparativo-card {
    padding: 1.5rem;
    border-radius: 14px;
    max-width: 100%;
  }

  .comparativo-header h3 {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }

  .comparativo-tabela,
  .comparativo-tabela th,
  .comparativo-tabela td {
    font-size: 1rem;
    padding: 10px 8px;
  }

  .comparativo-tabela th {
    font-size: 1.1rem;
  }

  .ribbon {
    font-size: 1rem;
    padding: 0.9rem 1.2rem;
    border-radius: 10px;
  }

  /* torna a tabela rolável no mobile */
  .comparativo-tabela {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

.summary .line:nth-child(1),
.summary .line:nth-child(2),
.summary .line:nth-child(3),
.summary .line:nth-child(4) {
  display: none;
}

#taxaAdm,
#fundoReserva,
label[for="taxaAdm"],
label[for="fundoReserva"] {
  display: none !important;
}

@media (max-width: 768px) {
  #depoimentos {
    position: relative;
    height: auto;
    min-height: 150vh;
    padding: 60px 20px;
  }
}


/* Esconde a versão mobile no desktop */
.comparativo-mobile {
  display: none;
}

/* Estilo dos cards no mobile */
@media (max-width: 768px) {
  .desktop {
    display: none;
    /* esconde tabela */
  }

  .comparativo-mobile {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
  }

  .card-comparativo {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-left: 6px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .card-comparativo.azul {
    border-color: #e31e24;
  }

  .card-comparativo.vermelho {
    border-color: var(--cor-principal);
  }

  .card-comparativo:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  }

  .card-comparativo h3 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cor-principal);
  }

  .card-comparativo ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .card-comparativo li {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
  }

  .card-comparativo li strong {
    color: var(--text);
  }

  .card-comparativo .custo {
    margin-top: 1.2rem;
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--preto);
  }

  /* Ribbon centralizado no mobile */
  .comparativo-mobile .ribbon {
    font-size: 1.4rem;
    border-radius: 10px;
  }
}

/* === Correção de alinhamento dos cards do perfil === */
#perfil .grade {
  display: flex;
  justify-content: center;
  align-items: stretch; /* iguala alturas */
  flex-wrap: wrap;
  gap: 2rem;
}

#perfil .blocos {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* distribui o conteúdo verticalmente */
  flex: 1 1 300px;
  min-height: 460px; /* garante altura uniforme */
  text-align: center;
}

#perfil .blocos img {
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 1.5rem;
}

#perfil .blocos h3 {
  font-size: 2.2rem;
  color: var(--cor-principal);
  margin-bottom: 1rem;
}

#perfil .blocos p {
  flex-grow: 1; /* ocupa o espaço do meio */
  font-size: 1.5rem;
  color: #555;
  line-height: 1.4;
}

#perfil .blocos div:last-child {
  margin-top: auto; /* empurra o botão para o final */
}

.slideshow1 .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(50%); /* ⬅️ escurece a imagem */
}

@media (max-width: 1200px) {
  .bloco-consorcios h2 {
    font-size: 1.9rem;
  }
}