:root {
  --primary: #2d4a22; /* Verde Floresta */
  --secondary: #1e3515;
  --accent: #e8f5e9;
  --text: #333;
  --bg-light: #fdfdfd;
  --white: #ffffff;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --color-whatsapp: #25d366; /* Verde oficial do WhatsApp */
}

/* =========================================
   1. RESET GLOBAL E CORREÇÃO DE LARGURA
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Garante que padding não aumente a largura */
}
html {
  font-size: 62.5%;
}

html,
body {
  width: 100%;
  overflow-x: hidden; /* O PULO DO GATO: Impede que o site "dance" para os lados no celular */
  position: relative; /* Garante posicionamento correto */
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  background-color: var(--bg-light);
  color: var(--text);
  /* Mantém o espaço para o header fixo, mas removemos paddings laterais */
  padding-top: 11rem;
  padding-bottom: 0; /* Removemos o padding inferior do body pois o footer já tem espaço */
}
h2 {
  font-size: 2rem;
}

/* --- Main como Caixa Única (Refatorado) --- */
main.container {
  background-color: var(--white); /* Fundo branco fixado */
  border-radius: 12px;
  box-shadow: var(--shadow); /* Usando a variável correta */
  /* Espaçamento e Dimensões */
  padding: 1.5rem;
  width: 95%; /* Um pouco mais largo no mobile */
  max-width: 600px;
  margin: 1rem auto 4rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Espaço entre as seções internas */
}

/* --- Header & Logos --- */
/* --- Cabeçalho Fixo e Layout --- */
/* --- Cabeçalho Fixo --- */
.main-header {
  /* 1. FUNDO: Gradiente sobre Imagem */
  background-image:
    linear-gradient(to bottom, rgba(20, 40, 15, 0.85), rgba(45, 74, 34, 0.6)),
    url('assets/img/backgraud_cabecalho.png'); /* Verifique se o nome do arquivo está correto */
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* 2. FIXAÇÃO E TAMANHO */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.6rem 0; /* Padding vertical pequeno para ser compacto */
}

/* Container que segura e alinha o conteúdo */
.header-content {
  display: flex;
  flex-direction: column; /* Empilha: Logos (Linha 1) -> Título (Linha 2) */
  align-items: center;

  width: 95%; /* Ocupa quase toda a largura */
  max-width: 1200px; /* Trava a largura em telas muito grandes */
  margin: 0 auto; /* Centraliza o container */
  gap: 0.5rem; /* Espaço pequeno entre logos e título */
}

/* --- LINHA 1: Logos nas Extremidades --- */
.logos-row {
  display: flex;
  align-items: center;

  /* O PULO DO GATO: Joga uma logo para cada ponta */
  justify-content: space-between;
  width: 100%; /* Obrigatório para o space-between funcionar */

  /* Filtro para deixar branco (se suas imagens não forem brancas) */
  filter: brightness(0) invert(1);
}

.logo-img {
  height: 35px; /* Tamanho padrão desktop */
  width: auto;
  display: block;
  transition: transform 0.3s;
}

.logo-img:hover {
  transform: scale(1.05); /* Efeito de zoom suave */
}

/* --- LINHA 2: Títulos Centralizados --- */
.header-titles {
  text-align: center;
  margin-top: -5px; /* Puxa levemente para cima para compactar */
}

.header-titles h1 {
  font-size: 1.6rem;
  color: var(--white);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para leitura */
}

.header-titles p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.5px;
}

/* --- Cabeçalho Interno das Regras --- */
/* Substitui o estilo inline da div */
.rules-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem; /* Espaço antes dos cards */
}
.rules-section h2,
p {
  margin: 1.5rem 0rem;
}
.rules-desc {
  font-size: 1.4rem;
}

.rules-header-content {
  margin-bottom: 1rem;
  justify-content: left;
}
.rules-header-content h3 {
  font-size: 1.6rem;
  color: var(--text);
  margin: 0; /* Remove margem padrão para alinhar com botão */
}

/* Botão de Texto (Link simulado) */
.btn-text-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  text-decoration: underline;
  font-size: 1.2rem;
  font-family: inherit; /* Herda a fonte do corpo */
  padding: 0;
}

.btn-text-link:hover {
  color: var(--secondary);
}

/* --- Container dos Cards (Layout Flexível) --- */
/* Garante que os cards ocupem a largura total e alinhem com o simulador [3, 4] */
.cards-container {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap; /* Importante para responsividade */
}

/* --- Cards Individuais --- */
.card-rule {
  flex: 1;
  min-width: 150px;
  background: var(--white);
  border: 1px solid #e3e6e8;
  border-radius: 14px;
  padding: 1.2rem 1rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.card-rule h3 {
  font-size: 1.8rem;
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.card-rule p {
  font-size: 1.1rem;
  font-weight: 600;
  color: #555;
  margin: 0.2rem 0;
}
.card-rule small {
  font-size: 1rem;
  color: #777;
}

.simulator-section {
  /* Reduz a distância externa em relação ao elemento de cima (Regras) */
  margin-top: 0;

  /* Reduz o preenchimento interno para ganhar espaço na tela */
  padding-top: 0rem;
  padding-bottom: 0rem;
}

/* --- Simulador --- */
.form-box {
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.input-group {
  margin-bottom: 1.5rem;
}
.input-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  white-space: nowrap;
}
.input-group input {
  width: 100%;
  padding: 1.4rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1.6rem;
  background: #f9f9f9;
}
.row {
  display: flex;
  gap: 1.5rem;
}
.row .input-group {
  flex: 1; /* Faz o item crescer para ocupar o espaço extra */
  min-width: 0; /* Evita quebras de layout em telas muito pequenas */
}

/* --- Botões --- */
.btn-primary {
  width: 100%;
  padding: 1.6rem;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}
.btn-primary:hover {
  background-color: var(--secondary);
}

/* Novos Botões (Edital/SIGCAR) */
.action-buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  flex-direction: row; /* Mobile first: um embaixo do outro */
  width: 100%;
}
.action-buttons .btn-outline {
  flex: 1; /* Faz os botões crescerem para ocupar espaço igual */
  text-align: center; /* Centraliza o texto dentro do botão */
}
.btn-outline {
  display: block;
  text-align: center;
  padding: 1.4rem;
  border: 2px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}
.btn-outline:hover {
  background-color: var(--primary);
  color: white;
}

/* --- Resultado --- */
.result-box {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--accent);
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  text-align: center;
}
.valor-final {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
  margin: 1rem 0;
}
.detalhes {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.badge {
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 1.2rem;
}
.hidden {
  display: none !important;
}

/* =========================================
   RODAPÉ (Refatorado para Mobile)
   ========================================= */
.main-footer {
  /* Garante o fundo verde conforme seu comentário "Fundo Verde Total" */
  background-color: var(--white);
  color: var(--white);
  width: 100%;

  /* Padding Padrão (Desktop): Equilibrado em cima e embaixo */
  padding: 2rem 0;
  margin-top: 4rem;
}

.footer-container {
  max-width: 600px;
  width: 90%;
  margin: 0 auto;

  /* Flexbox para empilhar verticalmente */
  display: flex;
  flex-direction: column; /* [7, 8] */
  align-items: center; /* [9, 10] */

  /* Espaço padrão entre os blocos (Logos / Social / Créditos) */
  gap: 1.5rem; /* [3] */
}

/* --- Logos --- */
.footer-logos {
  padding: 0.8rem 2rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.logo-img {
  height: 35px; /* Tamanho padrão */
  width: auto;
}

/* --- Social --- */
.footer-social {
  text-align: center;
  color: var(--primary);
}

.social-icons {
  display: flex;
  justify-content: center; /* [11, 12] */
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.social-icons a {
  color: var(--primary); /* Ícones brancos sobre fundo verde */
}

.social-icons a:hover {
  color: var(--accent);
}

/* --- Créditos --- */
.footer-credits {
  display: flex;
  flex-direction: column; /* [13] */
  align-items: center;
  text-align: center; /* [5] */
  gap: 0.2rem; /* Texto bem junto (Secretaria + Dev) */
  width: 100%;
}

.footer-credits p {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--secondary); /* Ajustado para branco para ler no fundo verde */
}

.dev-name {
  font-size: 1.1rem;
  /* Branco com transparência para ficar discreto */
  color: rgba(30, 53, 21, 0.9);
  margin-top: 0.2rem;
}

/* =========================================
   MODAL DE REGRAS (Estilo Popup / Aviso)
   Fontes: [1], [2]
   ========================================= */

/* 1. O Fundo Escuro (Overlay) - Centraliza o Modal */
.modal-overlay {
  position: fixed; /* Fixa na tela sobre tudo [1] */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro transparente */
  backdrop-filter: blur(2px); /* Desfoque suave no fundo (opcional) */
  z-index: 2000; /* Garante prioridade sobre o cabeçalho */

  /* Flexbox para centralizar a caixa branca perfeitamente */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Animação suave de entrada */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Classe utilitária para esconder via JS */
.modal-overlay.hidden {
  display: none;
  opacity: 0;
}

/* 2. A Caixa Branca (Container das Regras) */
.modal-regras {
  background-color: var(--white); /* ou #ffffff */
  width: 90%;
  max-width: 500px; /* Limite de largura no Desktop */
  max-height: 90vh; /* Evita que ultrapasse a altura da tela */

  padding: 2rem;
  border-radius: 12px; /* Bordas arredondadas modernas */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade */

  display: flex;
  flex-direction: column; /* Organiza título, texto e botão em coluna */
  text-align: left;
  position: relative;
}

/* Título do Modal */
.modal-regras h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  color: var(--text-main);
}

/* 3. Área de Conteúdo com Rolagem */
.modal-scroll-content {
  overflow-y: auto; /* Cria barra de rolagem se o texto for longo */
  padding-right: 0.5rem; /* Espaço para a barra não colar no texto */
  margin-bottom: 1rem;
}

/* Estilização da Barra de Rolagem (Webkit) */
.modal-scroll-content::-webkit-scrollbar {
  width: 6px;
}
.modal-scroll-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/* 4. Tipografia Interna */
.regras-text {
  font-size: 1.3rem; /* Fonte padrão Desktop */
  line-height: 1.6;
  color: #333;
}

.regras-text p {
  margin-bottom: 1rem;
}

.text-destaque {
  color: var(--primary); /* Verde destaque */
  font-size: 1.4rem;
  font-weight: 700;
}

.text-small {
  font-size: 1.1rem;
  color: #666;
  font-style: italic;
  margin-top: 1rem;
}

.modal-divider {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #eee;
}

/* Botão do Modal */
.btn-modal {
  margin-top: auto; /* Empurra o botão para o final */
  width: 100%;
}
/* --- BOTÃO FLUTUANTE WHATSAPP --- */
.whatsapp-float {
  position: fixed;
  bottom: 20px; /* Distância inicial do fundo */
  right: 20px; /* Distância da direita */
  background-color: var(--color-whatsapp);
  color: white;
  padding: 10px 15px; /* Tamanho confortável */
  border-radius: 50px; /* Borda redonda (pílula) */
  display: flex;
  align-items: center;
  gap: 8px; /* Espaço entre ícone e texto */
  text-decoration: none;
  font-weight: 600;
  font-size: 1.4rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra para destacar */
  z-index: 1000; /* Garante que fique acima de tudo */
  transition:
    transform 0.3s ease,
    bottom 0.3s ease; /* Animação suave */
}

.whatsapp-float:hover {
  transform: scale(1.05); /* Cresce levemente ao passar o mouse */
  background-color: #1ebe57; /* Verde levemente mais escuro */
}

/* =========================================
   RESPONSIVIDADE: MOBILE (Até 768px)
   Fontes: [5-7]
   ========================================= */
@media (max-width: 768px) {
  /* 1. LAYOUT GERAL & BODY */
  body {
    /* Ajustamos o topo dinamicamente para compensar o header fixo */
    padding-top: 11rem;
  }

  main.container {
    margin-top: 1rem;
    padding: 2rem 1.5rem;
    width: 95%; /* [6] Ocupa quase toda a largura para aproveitar espaço */
  }

  /* 2. CABEÇALHO (Dinâmico e Compacto) */
  .main-header {
    height: auto; /* [8] Altura se ajusta ao conteúdo, não fixa */
    min-height: 80px; /* Garante um tamanho mínimo de toque */
    padding: 0.8rem 0;
  }

  .header-content {
    width: 92%;
    gap: 0.5rem;
  }

  /* Logos: Ajuste de segurança para não estourarem a tela */
  .logos-row {
    gap: 1rem; /* [9] Reduzido de 6rem para evitar quebra horizontal */
    width: 100%;
    margin-top: 0;
    justify-content: space-between; /* Mantém logos nas extremidades */
  }

  .logo-img {
    height: 15px; /* Tamanho equilibrado para mobile */
  }

  /* Títulos: Tipografia ajustada */
  .header-titles h1 {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .header-titles p {
    font-size: 0.9rem;
    display: block; /* Mantém o subtítulo visível */
    opacity: 0.9;
  }

  /* 3. CARDS DE REGRAS (Comportamento de Carrossel/Scroll) */
  .cards-container {
    display: flex; /* [3] Garante flexbox */
    flex-wrap: nowrap; /* Impede quebra de linha (Cards lado a lado) */
    overflow-x: auto; /* Permite rolagem lateral se faltar espaço */
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 1rem; /* Espaço para a barra de rolagem (se visível) */

    /* [Opcional] Rolagem suave nativa para celular */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .cards-container::-webkit-scrollbar {
    height: 6px;
  }

  .cards-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
  }

  .card-rule {
    flex: 0 0 auto; /* Não encolhe demais, força o scroll se necessário */
    width: 42%; /* Mostra 2 cards e um pedaço do 3º (dica visual de scroll) */
    min-width: 140px; /* [CRUCIAL] Impede que o card fique ilegível */
    padding: 1rem;
  }

  .card-rule h3 {
    font-size: 1.3rem;
  }

  .card-rule small,
  .card-rule p {
    font-size: 0.85rem;
    white-space: normal; /* Texto quebra linha dentro do card */
  }

  /* 4. SIMULADOR (Inputs) */
  .simulator-section {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .input-group label {
    font-size: 1.2rem;
  }

  /* Ajuste para inputs ficarem confortáveis ao toque */
  input[type='number'] {
    font-size: 1.1rem; /* [10] Evita zoom automático no iPhone */
    padding: 0.8rem;
  }

  /* 5. RODAPÉ (Compacto mas com espaço para o botão WhatsApp) */
  .main-footer {
    padding-top: 2rem;
    /* Espaço generoso embaixo para o botão flutuante não cobrir textos */
    padding-bottom: 5rem;
  }

  .footer-container {
    gap: 1.5rem; /* Espaçamento vertical uniforme */
  }

  .footer-logos {
    padding: 0.6rem 1.5rem;
  }

  /* Ajuste específico para o texto de créditos */
  .footer-credits p {
    font-size: 1rem;
    max-width: 80%; /* Evita que o texto encoste nas bordas */
    margin: 0 auto;
  }

  /* 6. BOTÃO FLUTUANTE (WhatsApp) */
  .whatsapp-float span {
    display: none; /* Esconde texto, mostra só ícone */
  }

  .whatsapp-float {
    width: 55px; /* Área de toque maior (padrão UX mobile) */
    height: 55px;
    padding: 0;
    border-radius: 50%;
    bottom: 20px;
    right: 20px;
    justify-content: center; /* Centraliza o ícone na bolinha */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  /* 7. MODAL / POPUP DE REGRAS */
  .modal-regras {
    width: 92%; /* Mais margem lateral */
    max-height: 80vh; /* Evita cortar em telas pequenas viradas */
    padding: 1.5rem;
    margin: auto; /* Centralização flex */
  }

  .modal-regras h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .regras-text {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .btn-modal {
    margin-top: 1rem;
    padding: 1rem; /* Botão maior para toque fácil */
  }
}