:root {
  --roxo-principal: #8459b4;
  --roxo-header: #7162c0;
  --roxo-claro: #b9a3d0;
  --cinza-escuro: #1f1f1f;
  --cinza-claro: #f4f4f4;
  --branco: #ffffff;
  --verde-botao: #24d95c;
  --bege-fundo: #FDF9F3;
  --font-size-h1-fluid: clamp(27.894px, 1.343rem + ((1vw - 3.2px) * 1.171), 48px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
}

body {
  /* A cor que aparece "fora" da área de conteúdo, nos cantos da tela */
  background-color: #FDF9F3;

  /* Empurra todo o conteúdo para baixo do header fixo */
  padding-top: 35px;

  /* Configurações padrão */
  margin: 0;
  color: var(--cinza-escuro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main.conteudo-principal {
  /* A cor de fundo da área de conteúdo principal */
  background-color: #ffffff;
  border-radius: 25px 25px 0 0;
  overflow: hidden;
}


/* ========================================= */
/* ESTILOS DO HEADER           */
/* ========================================= */
header {
  background-color: var(--roxo-header);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 3rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* COLE O RESTO DO SEU CSS A PARTIR DAQUI... */

/* --- Logo na Esquerda --- */
header .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

header .logo img {
  height: 40px;
  width: 40px;
  border-radius: 8px;
}

header .logo strong {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--branco);
}

/* --- Menu de Navegação no Centro --- */
header .main-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2.5rem; /* Espaçamento entre os links */
}

header .main-nav ul li a {
  text-decoration: none;
  color: var(--branco);
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 5px;
  position: relative;
  transition: opacity 0.3s ease;
}

header .main-nav ul li a:hover {
  opacity: 0.8;
}

/* Efeito de sublinhado no hover (opcional, mas elegante) */
header .main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--branco);
    transition: width 0.3s ease-in-out;
}

header .main-nav ul li a:hover::after {
    width: 100%;
}


/* --- Ações do Usuário na Direita --- */
header .header-actions {
  display: flex;
  align-items: center;
  gap: 1rem; /* Espaço entre os botões */
}

/* --- Sistema de Botões Reutilizável --- */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 25px; /* Bordas bem arredondadas */
  border: 1px solid transparent;
  font-weight: bold;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

/* Botão Primário (Teste Grátis) */
.btn-primary {
  background-color: var(--branco);
  color: #7162c0;
  border-color: var(--branco);
}

.btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px); /* Efeito de "levantar" */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Botão Secundário (Login / Sair) */
.btn-secondary {
  background-color: transparent;
  color: var(--branco);
  border-color: var(--branco);
}

.btn-secondary:hover {
  background-color: var(--branco);
  color: #7162c0;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
  header {
    padding: 0.8rem 1.5rem; /* Diminui o padding em telas menores */
  }

  /* Esconde o menu de navegação central em telas menores */
  header .main-nav {
    display: none;
  }
}

nav a {
  margin: 0 1rem;
  text-decoration: none;
  color: var(--cinza-escuro);
  font-weight: 500;
  font-family: Raleway;
  font-size: 20px;
}

.botao-login {
  margin: 0 0rem;
  text-decoration: none;
  color: var(--cinza-escuro);
  font-weight: 600;
  font-family: Raleway;
  font-size: 20px;
  margin-right: -25px;
  background-color: transparent;
  border: 2px solid transparent;
  padding: 0.3rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.botao-login:hover {
  background-color: #87CEFA; /* azul claro de fundo */
  border-color: #87CEFA;
  transform: scale(1.05);    /* leve aumento */
}

.logineteste {
  display: flex;
  align-items: center;
}

.botao-verde {
  background-color: #21C45D;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 3rem !important;
}

.botao-verdecta {
  background-color: #21C45D;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.botao-roxo-claro {
  background-color: var(--roxo-claro);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.botao-roxo-clarocorpo {
  background-color: #7162C0;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 40px;
  margin-left: 230px;
}

.botao-verde:hover {
    background-color: #87CEFA; /* Altera a cor do botão ao passar o mouse */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* Adiciona um pouco de sombra */
    transform: scale(1.15); /* Aumenta levemente o tamanho */
}

.botao-verdecta:hover {
    background-color: #87CEFA; /* Altera a cor do botão ao passar o mouse */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* Adiciona um pouco de sombra */
    transform: scale(1.15); /* Aumenta levemente o tamanho */
}

.botao-roxo-clarocorpo:hover {
    background-color: #87CEFA; /* Altera a cor do botão ao passar o mouse */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* Adiciona um pouco de sombra */
    transform: scale(1.15); /* Aumenta levemente o tamanho */
}

.botao-roxo-claro:hover {
    background-color: #87CEFA; /* Altera a cor do botão ao passar o mouse */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); /* Adiciona um pouco de sombra */
    transform: scale(1.15); /* Aumenta levemente o tamanho */
}

.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #8459B4;
  padding: 3rem 2rem;
  color: white;
}

.hero-texto {
  flex: 1 1 300px;
  max-width: 600px;
}

.hero-texto h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-left: 3rem;
}

.hero-texto p {
  margin-bottom: 1.5rem;
  margin-left: 2rem;
}

.hero-botoes button {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.hero-imagem {
  flex: 1 1 300px;
  text-align: center;
}

.imgcarrocel {
  margin-left: 3rem;
}

.hero-imagem img {
  max-width: 100%;
  height: 336px;
  width: 658px;
  border-radius: 50px;
  margin-right: 5rem;
}

.conteudo {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  max-width: 1440px;
  margin: 0 auto; /* centraliza horizontalmente */
  padding: 3rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-between;
  align-items: center; /* alinha verticalmente os blocos */
  background-color: #7162C0;
  border-radius: 30px;
  color: white;
}

.coluna {
  flex: 1 1 45%;
  height: 765px;
  margin-left: -25px;
  align-content: center;
  color: white;
}

.coluna h2 {
  font-size: 1.5rem;
  margin-left: 105px;
  margin-bottom: 0.1rem;
  color: white;
}

.coluna h3 {
  font-size: 1.5rem;
  margin-left: 175px;
  margin-bottom: 0.1rem;
  margin-top: 10px;
  color: white;
}

.coluna h4 {
  font-size: 1.5rem;
  margin-left: 25px;
  margin-bottom: 0.1rem;
  color: white;
}

.beneficios li {
  list-style: none;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  margin-left: 105px;
  gap: 1vw; /* espaçamento relativo à largura da tela */
  margin-top: 45px;
  font-size: 16px;
}

.beneficios li strong {
  font-size: 16px !important;
}

.beneficios li corpo {
  font-size: 16px !important;
}

.textocorpo {
  display: flex;
  align-items: center;
  margin-left: 105px;
  gap: 2vw; /* espaçamento relativo à largura da tela */
  margin-top: 25px;
}

.textocorpo1 {
  display: flex;
  align-items: center;
  margin-left: 105px;
  gap: 2vw; /* espaçamento relativo à largura da tela */
  margin-top: 25px;
}

.textocorpo2 {
  display: flex;
  align-items: center;
  margin-left: 175px;
  gap: 2vw; /* espaçamento relativo à largura da tela */
  margin-top: 25px;
}

.cta {
  background-color: #7162C0;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  margin-top: 2rem;
  margin-left: 6rem;
  max-width: 469px;
  max-height: 306px;
}

.cta button {
  margin-top: 1rem;
}

.cta corpo {
  font-size: 16px !important;
  color: white;
}

.cta titulo {
  font-size: 28px !important;
  color: white;
}

footer {
  background-color: #2B2B2B;
  color: white;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  min-height: 348px;
}

footer .coluna-footer {
  flex: 1 1 300px;
}

footer a {
  color: white;
  text-decoration: none;
  display: block;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  header nav {
    display: none;
  }

  .hero {
    flex-direction: column;
    text-align: center;
  }

  .conteudo {
    flex-direction: column;
  }

  footer {
    flex-direction: column;
  }
}

.hero-carousel {
  position: relative;
  overflow: hidden;
  background-color: #7162C0;
  color: white;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-items: center;
  padding: 3rem 2rem;
  display: none;
}

.carousel-slide.ativo {
  display: flex;
}

.hero-texto {
  flex: 1 1 300px;
  max-width: 500px;
}

.hero-texto h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-left: 3rem;
}

.hero-texto p {
  margin-bottom: 1.5rem;
  margin-left: 3rem;
}

.hero-botoes button {
  margin-right: 0rem;
  margin-bottom: 1rem;
}

.hero-imagem {
  flex: 1 1 300px;
  text-align: center;
  margin-rigth: 110px;
}

.hero-imagem img {
  max-width: 100%;
  height: 336px;
  width: 658px;
  border-radius: 50px;
  margin-right: -2rem;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  transform: translateY(-50%);
}

.carousel-nav button {
  background: #A687C9;
  border: none;
  color: white;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 50px;
}

.carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-indicators .dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5); /* bolinhas inativas */
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicators .dot.ativo {
  background-color: white; /* bolinha ativa */
}

.rodape {
    background-color: #666;
    color: #dcdcdc;
    padding: 40px 60px 20px;
    font-family: 'Raleway', sans-serif;
    margin: auto;
    justify-content: center;
    overflow-y: hidden;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.rodape-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 150px;
  margin-left: 100px;
  align-items: center;
}

.rodape-coluna {
  flex: 1;
  min-width: 250px;
}

.centralizado {
    background-color: #7162C0;
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    text-align: center;
    min-width: 375px;
    min-height: 186px;
    box-sizing: border-box;
    align-content: center;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.logo img {
  width: 40px;
  height: auto;
  margin-right: 10px;
  border-radius: 8px;
}

.logo h2 {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  margin: 0;
}

.rodape-coluna p {
  font-size: 14px;
  margin: 10px 0 20px;
  line-height: 1.6;
}

.social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social img {
  width: 26px;
  height: 26px;
}

.rodape-coluna.meio h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transform: translateX(78px);
}

.rodape-coluna.meio ul {
  list-style: none;
  padding: 0;
  transform: translateX(40px);
}

.rodape-coluna.meio li {
  margin-bottom: 8px;
  font-size: 14px;
  transform: translateX(40px);
}

.rodape-coluna.direita.destaque {
    background-color: #7162C0;
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    text-align: center;
    min-width: 375px;
    min-height: 241px;
    box-sizing: border-box;
    align-content: center;
}

.rodape-coluna.direita p {
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.6;
}

.botao-cta {
  display: inline-block;
  padding: 10px 20px;
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s; /* Adicionado para suavizar o hover */
}

.botao-cta:hover {
    background-color: #fff;
    color: #7162C0;
}

.rodape-inferior {
  border-top: 1px solid #aaa;
  padding: 20px; /* Padding ajustado */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100% - 40px); /* Garante que ocupe a largura total menos o padding */
  margin: 0 auto; /* Centraliza */
  box-sizing: border-box;
}

.rodape-inferior p {
  font-size: 13px;
  margin: 5px 0; /* Adicionado para espaçamento em telas menores */
}

.links-legais a {
  color: #fff;
  margin-left: 20px;
  font-size: 13px;
  text-decoration: none;
}

/* --- AJUSTES DE RESPONSIVIDADE --- */

/* Telas de Tablet (até 1024px) */
@media (max-width: 1024px) {
  .rodape-container {
    margin-left: 0;
    gap: 40px; /* Diminui o espaço entre as colunas */
    justify-content: center;
    padding: 30px 20px;
  }

  .rodape-inferior {
    width: 100%;
    justify-content: center; /* Centraliza o conteúdo */
    text-align: center;
    gap: 15px;
  }

  .links-legais a {
    margin: 0 10px;
  }
}

/* Telas de Celular (até 768px) */
@media (max-width: 768px) {
  .rodape-container {
    flex-direction: column; /* Empilha as colunas */
    text-align: center;
    gap: 30px;
  }

  .rodape-coluna.esquerda {
    /* O conteúdo já está centralizado pela regra .centralizado */
    order: 1; /* Define a ordem de exibição, se necessário */
  }

  /* Remove transformações que podem atrapalhar no layout de coluna */
  .rodape-coluna.meio h3,
  .rodape-coluna.meio ul,
  .rodape-coluna.meio li {
    transform: none;
  }

  .rodape-coluna.direita.destaque {
    order: 2; /* Define a ordem de exibição */
    width: 100%; /* Ocupa a largura total */
    min-width: unset; /* Remove a largura mínima */
  }

  .rodape-inferior {
    flex-direction: column; /* Empilha o texto de direitos autorais e os links */
    gap: 10px;
  }

  .links-legais {
    margin-top: 10px;
  }

  .links-legais a {
      display: block; /* Faz o link ocupar a linha inteira */
      margin: 5px 0;
  }
}

/* ========================================= */
/* NOVA SEÇÃO HERO COM VÍDEO                 */
/* ========================================= */

.video-hero-section {
  padding: 4rem 2rem; /* Espaçamento interno da seção */
  /* A cor de fundo já deve estar no seu <main> ou <body> */
}

.video-hero-container {
  max-width: 1200px; /* Largura máxima do conteúdo */
  margin: 0 auto; /* Centraliza na página */
  display: flex;
  align-items: center; /* Alinha verticalmente as colunas */
  gap: 4rem; /* Espaço entre a coluna do vídeo e a do texto */
}

/* --- Coluna da Esquerda (Vídeo) --- */

/* ========================================= */
/* AJUSTES PARA VÍDEO EMBUTIDO               */
/* ========================================= */

/* --- Coluna da Esquerda (Vídeo) --- */

.video-container {
  flex: 1.2;
  position: relative; /* Mantemos isso para o iframe se comportar bem */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  /* A MÁGICA ESTÁ AQUI: definimos a proporção explicitamente */
  /* Isso é mais moderno e preciso que o truque do padding. */
  aspect-ratio: 16 / 9;

  /* As linhas antigas para proporção não são mais necessárias */
  /* padding-bottom: 56.25%; <-- REMOVA OU COMENTE */
  /* height: 0; <-- REMOVA OU COMENTE */
}

/* A regra para o iframe continua a mesma, garantindo que ele preencha o container */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* O play-button não é mais necessário, você pode remover o CSS dele */
.play-button {
    display: none;
}

.video-container:hover {
  transform: scale(1.02); /* Efeito de zoom suave */
}

.video-thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px; /* Bordas arredondadas */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* --- Coluna da Direita (Texto) --- */

.text-content {
  flex: 1; /* Ocupa o espaço restante */

  /* NOVAS PROPRIEDADES PARA ALINHAMENTO PERFEITO */
  display: flex;
  flex-direction: column; /* Organiza os itens em uma coluna, de cima para baixo */
  align-items: flex-start; /* Alinha todos os itens à esquerda */
  gap: 1.25rem; /* Espaçamento CONSISTENTE entre todos os itens */
  text-align: -webkit-center;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* margin-bottom: 1.5rem;  <-- REMOVA, pois o 'gap' já cuida disso */
}

.brand-logo img {
  width: 30px;
  height: 30px;
}

.brand-logo span {
  font-weight: bold;
  color: var(--roxo-header);
  letter-spacing: 1px;
}

.text-content h1 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--cinza-escuro);
  font-size: var(--font-size-h1-fluid);
}

.text-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

/* O botão já é o último item, então não precisa de margem abaixo */
.btn-accent {
  background-color: var(--roxo-header);
  color: var(--branco);
  padding: 0.8rem 2rem;
  margin: auto;
}

.btn-accent:hover {
  background-color: #87CEFA; /* Um tom mais escuro para o hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


/* --- Responsividade para a nova seção --- */
@media (max-width: 992px) {
  .video-hero-container {
    flex-direction: column; /* Empilha as colunas em telas menores */
    gap: 3rem;
  }

  .text-content h1 {
    font-size: 2.2rem;
  }

  .text-content {
    text-align: center; /* Centraliza o texto */
  }

  .brand-logo {
    justify-content: center; /* Centraliza o logo */
  }
}

.video-wrapper-link {
    text-decoration: none;
}

/*Seção do meio da página*/

.journey-section {
  background-color: var(--roxo-header);
  color: #ffffff;
  padding: 5rem 2rem;
  overflow: hidden; /* Garante que nada vaze da seção */
  border-radius: 25px;
  margin-bottom: 30px
}

.journey-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4rem;
}

/* --- Coluna da Esquerda: Texto --- */
.journey-text-content {
  flex: 1;
  text-align: -webkit-center;
}

.journey-text-content h2 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.journey-text-content p {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.9; /* Deixa o texto um pouco mais suave */
  margin-bottom: 1.5rem;
}

/* --- Coluna da Direita: Acordeão --- */
.journey-accordion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordion-item {
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  transition: border-color 0.3s ease;
}

.accordion-item[open] {
  border-color: #ffffff; /* Borda mais forte quando aberto */
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* Remove o marcador padrão do <summary> */
  color: #ffffff;
}

/* Esconde o marcador padrão em navegadores Webkit (Chrome, Safari) */
.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-header svg {
  transition: transform 0.3s ease;
}

/* Gira a setinha quando o acordeão está aberto */
.accordion-item[open] .accordion-header svg {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 1.25rem 1.25rem 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* --- Responsividade --- */
@media (max-width: 992px) {
  .journey-container {
    flex-direction: column;
    gap: 3rem;
  }

  .journey-text-content h2 {
    font-size: 2.2rem;
  }
}

/* ========================================= */
/* FOOTER MODERNIZADO E RESPONSIVO           */
/* ========================================= */

.site-footer {
  background-color: #2B2B2B; /* Um cinza bem escuro */
  color: #dcdcdc; /* Um branco acinzentado para o texto */
  padding: 4rem 2rem 2rem 2rem; /* Mais espaço vertical */
  font-family: 'Raleway', sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores */
  justify-content: space-between;
  gap: 3rem; /* Espaço entre as colunas */
  padding-bottom: 3rem;
}

.footer-column {
  flex: 1; /* Faz com que as colunas tentem ocupar o mesmo espaço */
  min-width: 250px; /* Largura mínima antes de quebrar a linha */
}

/* --- Estilos específicos das colunas --- */

#footer-brand .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#footer-brand .logo img {
  width: 40px;
  border-radius: 8px;
}

#footer-brand .logo h2 {
  color: #ffffff;
  font-size: 1.4rem;
}

#footer-brand p {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 300px; /* Evita que o texto fique muito largo */
}

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

.social-links img {
  width: 28px;
  transition: transform 0.3s ease;
}

.social-links a:hover img {
  transform: scale(1.1);
}

.footer-column h3 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li a {
  color: #dcdcdc;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  display: block;
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color: #ffffff;
}

#footer-cta {
  background-color: var(--roxo-header);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
}

#footer-cta p {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Reutilizando nosso sistema de botões no CTA */
#footer-cta .btn-primary {
  background-color: var(--branco);
  color: var(--roxo-header);
}

#footer-cta .btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* --- Barra Inferior --- */

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permite quebra em telas muito pequenas */
  gap: 1rem;
  font-size: 0.8rem;
}

.legal-links a {
  color: #dcdcdc;
  text-decoration: none;
  margin-left: 1.5rem;
  transition: color 0.3s ease;
}

.legal-links a:hover {
  color: #ffffff;
}