/* Estilos Globais e Tipografia */
body {
  padding-top: 70px; /* Espaço para a navbar fixa */
  font-family: var(--font-body);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.display-5, /* Classe Bootstrap para títulos grandes */
.fw-bold {   /* Classe Bootstrap para negrito */
  font-family: var(--font-headings);
  font-weight: 700; /* Poppins Bold */
  color: var(--primary-color); /* Cor primária para títulos por padrão */
}

.lead {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-color-light);
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}
a:hover {
  color: var(--primary-color-darker);
  text-decoration: underline;
}

/* Navbar */
.navbar.bg-primary { /* Assegura que a cor primária seja aplicada corretamente */
  background-color: var(--primary-color) !important;
}
.navbar {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  box-shadow: var(--box-shadow-sm);
}
.navbar-brand {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--background-color) !important; /* Branco no fundo azul */
}
.navbar .btn-light {
  background-color: var(--background-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color-lighter);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-speed) ease;
}
.navbar .btn-light:hover {
  background-color: var(--primary-color-lighter);
  color: var(--primary-color-darker);
  border-color: var(--primary-color);
}
.navbar .bi-whatsapp {
  font-size: 1.1em;
  margin-right: 0.3em;
}

/* Botões */
.btn {
  border-radius: var(--border-radius-sm);
  padding: 0.75rem 1.5rem; /* Padding maior para botões de ação */
  font-family: var(--font-headings); /* Usar fonte de título para dar mais peso */
  font-weight: 500;
  text-transform: none; /* Ou 'uppercase' se preferir */
  letter-spacing: 0.3px;
  transition: all var(--transition-speed) ease;
  box-shadow: var(--box-shadow-sm);
}
.btn:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-2px);
}
.btn-lg {
  padding: 0.85rem 1.8rem;
  font-size: 1.1rem;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--background-color);
}
.btn-primary:hover {
  background-color: var(--primary-color-darker);
  border-color: var(--primary-color-darker);
  color: var(--background-color);
}

.btn-secondary, /* Renomeando para ser mais genérico, se precisar */
.btn-success { /* Mantendo .btn-success para o WhatsApp, como no HTML */
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff; /* Branco para contraste com verde */
}
.btn-secondary:hover,
.btn-success:hover {
  background-color: var(--secondary-color-darker);
  border-color: var(--secondary-color-darker);
  color: #fff;
}
.btn-light.btn-lg { /* Botão "Fale conosco no WhatsApp" no Hero */
    color: var(--primary-color);
    border: 2px solid var(--primary-color-lighter);
}
.btn-light.btn-lg:hover {
    color: var(--primary-color-darker);
    background-color: var(--primary-color-lighter);
    border-color: var(--primary-color);
}


/* Cards de Planos */
.plan-card {
  border: 2px solid var(--border-color); /* AUMENTADO para 2px e usando var */
  border-radius: var(--border-radius-md);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; /* Adicionado border-color à transição */
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--box-shadow-lg);
  border-color: var(--primary-color-darker); /* Muda a cor da borda no hover para todos */
}
.plan-card.border-primary { /* Plano em destaque */
  border-color: var(--primary-color) !important;
  box-shadow: 0 0.5rem 1.5rem rgba(var(--primary-color-rgb), 0.15);
}

.plan-card .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Faz o card-body ocupar o espaço restante */
}
.plan-card .card-title {
  color: var(--primary-color);
  font-weight: 700; /* Poppins Bold */
  margin-bottom: 1rem;
}
.plan-card .list-unstyled {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text-color-light);
  flex-grow: 1; /* Empurra o botão para baixo se o conteúdo for pouco */
}
.plan-card .list-unstyled li {
  padding: 0.4rem 0;
  display: flex;
  align-items: center;
}
.plan-card .list-unstyled i {
  color: var(--primary-color);
  margin-right: 0.75rem;
  font-size: 1.2em;
  width: 20px; /* Alinhamento dos ícones */
  text-align: center;
}
.plan-card .list-unstyled strong { /* Preço */
    color: var(--secondary-color-darker); /* Ou var(--primary-color) */
    font-size: 1.2em;
}
.plan-card .btn { /* Botão dentro do card */
  margin-top: auto; /* Empurra o botão para o final do card-body */
}

/* Seções */
section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.hero-section { /* Classe para a primeira seção */
  background-color: var(--primary-color) !important; /* Cor primária para o fundo */
  color: var(--background-color); /* Texto branco */
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.hero-section h1 {
  color: var(--background-color); /* Título branco */
  font-size: 2.8rem; /* Ajuste conforme necessário */
}
.hero-section .lead {
  color: var(--primary-color-lighter); /* Um tom de azul mais claro para o lead */
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.section-beneficios .col-md-4 {
  margin-bottom: 1.5rem;
}
.section-beneficios i.h1 {
  font-size: 3rem; /* Aumentar o tamanho dos ícones */
  margin-bottom: 1rem;
  display: inline-block;
  color: var(--primary-color);
}
.section-beneficios h5 {
  margin-top: 0.5rem; /* Ajustar o espaçamento do título do benefício */
  font-size: 1.25rem;
  color: var(--primary-color);
}
.section-beneficios p {
    color: var(--text-color-light);
}


.section-planos .text-center h2 {
    margin-bottom: 0.5rem; /* Menos espaço abaixo do título "Nossos Planos" */
}
.section-planos .text-center p.text-muted {
    color: var(--text-muted-color) !important;
    font-size: 1.1rem;
    margin-bottom: 3rem; /* Mais espaço antes dos cards */
}


.section-cobertura {
  background-color: var(--light-bg-color); /* Fundo cinza claro */
}
.section-cobertura h3 {
    color: var(--primary-color);
}
.section-cobertura p {
    color: var(--text-color-light);
    font-size: 1.1rem;
}

.section-cta-final {
  background-color: var(--primary-color) !important;
  color: var(--background-color);
}
.section-cta-final h2 {
  color: var(--background-color);
}
.section-cta-final p {
  color: var(--primary-color-lighter);
  font-size: 1.15rem;
}
.section-cta-final .btn-light { /* Botão específico para este CTA */
    background-color: var(--background-color);
    color: var(--primary-color);
    border: 2px solid var(--background-color);
}
.section-cta-final .btn-light:hover {
    background-color: var(--primary-color-lighter);
    color: var(--primary-color-darker);
    border-color: var(--primary-color-lighter);
}

/* Footer */
footer.bg-dark {
  background-color: var(--primary-color-darker) !important; /* Azul bem escuro para o footer */
  color: var(--primary-color-lighter);
}
footer p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* Estilos para a página de Contato */
.page-contato-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.page-contato-section h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.page-contato-section p {
    color: var(--text-color-light);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Ajustes finos e responsividade (exemplos) */
@media (max-width: 768px) {
  body {
    padding-top: 60px; /* Ajustar se a navbar mudar de altura */
  }
  .hero-section h1 {
    font-size: 2.2rem;
  }
  .hero-section .lead {
    font-size: 1.1rem;
  }
  .btn {
    padding: 0.6rem 1.2rem;
  }
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hero-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Estilos para os Novos Cards de Planos (Modern) */
.modern-plan-card {
  border-radius: 20px !important; /* Mais arredondado */
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Para garantir que o header não ultrapasse o border-radius */
}

.modern-plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(var(--primary-color-rgb),0.15);
}

.modern-plan-card.plan-destacado {
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 30px rgba(var(--primary-color-rgb), 0.2);
}

.plan-card-header {
  padding: 20px 15px 15px 15px;
  background-color: var(--primary-color-lighter); /* Um fundo suave para o header */
  /* Ou use um gradiente: background-image: linear-gradient(to bottom, var(--primary-color-lighter), var(--background-color)); */
}

.plan-velocity .velocity-number {
  font-family: var(--font-headings);
  font-size: 4.5rem; /* Tamanho grande para o número */
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  display: block;
}

.plan-velocity .velocity-unit {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--primary-color);
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.modern-plan-card .card-body {
  padding: 20px 25px; /* Ajuste o padding do corpo */
}

.modern-plan-card .plan-card-title {
  font-size: 1.3rem;
  color: var(--text-color); /* Título do plano com cor de texto normal */
  margin-bottom: 0.75rem;
}

.plan-price {
  margin-bottom: 1.5rem;
}

.plan-price .price-currency {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-color-light);
  vertical-align: super;
  margin-right: 2px;
}

.plan-price .price-value {
  font-family: var(--font-headings);
  font-size: 3rem; /* Preço em destaque */
  font-weight: 700;
  color: var(--text-color);
  line-height: 1;
}

.plan-price .price-cents {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-color-light);
  vertical-align: super;
}
.plan-price .price-cents .price-period {
    font-size: 0.8rem;
    margin-left: 2px;
    vertical-align: middle; /* Ajustar alinhamento do /mês */
}


.plan-features li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-color-light);
}

.plan-features li i.bi-check-lg {
  color: var(--primary-color); /* Ou var(--secondary-color) para verde */
  margin-right: 10px;
  font-size: 1.2em;
}

.plan-info-extra {
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.plan-partner-logos .partner-logo {
    max-height: 25px; /* Ajuste conforme o tamanho dos seus logos */
    width: auto;
    opacity: 0.8;
}

/* Botão Laranja de Destaque */
.btn-accent-orange {
  background-color: var(--accent-color-orange);
  border-color: var(--accent-color-orange);
  color: #fff;
  font-weight: 500;
  border-radius: 50px !important; /* Botão bem arredondado */
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.btn-accent-orange:hover {
  background-color: var(--accent-color-orange-darker);
  border-color: var(--accent-color-orange-darker);
  color: #fff;
}

/* Ajuste para o botão verde padrão, se usado nos novos cards */
.modern-plan-card .btn-success {
    border-radius: 50px !important; /* Também arredondado */
    font-weight: 500;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.modern-plan-card .btn i.bi-arrow-right-short {
    font-size: 1.3em;
    vertical-align: middle;
}

/* Remover a borda antiga dos .plan-card se ainda estiver presente, para não conflitar */
.plan-card {
    border: none; /* Remove a borda definida anteriormente se a classe .plan-card ainda for usada sozinha */
}
/* E remover o hover antigo se necessário */