.calc-pg {


  display: flex; 

  flex-direction: column;   /* organiza os filhos verticalmente */
  
  font-family:Arial, Helvetica, sans-serif;

  background: #f4f4f9;

  color: #333;

  margin: 0px;

  padding-top: 120px 12px 40px 12px; ; /* mantém o espaço da topbar */
 
  box-sizing: border-box;

  justify-content: flex-start;

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

  min-height: 100vh;  

  padding: 100px 0 20px 0; /* espaço adequado pra topbar */

  box-sizing: border-box;

  padding-bottom: 50px; /* espaço inferior seguro */

 
}


main .calc-container {

  background: #fff;

  padding: 24px;

  margin-top: 2rem;

  border-radius: 20px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  width: 100%;

  max-width: 300px;

  margin: 0 auto 2rem auto; /* centraliza horizontalmente */

  margin-bottom: 20;

  box-sizing: border-box;

 
}


h1 {

  margin-top:12px;
  text-align:center;
  font-size:22px;
  font-weight:800;
  color: #0078d7;

}

label {

 

  margin-top: 15px;

  font-weight: 600;

}

input, select, main button {

  width: 100%;

  padding: 10px;

  border-radius: 10px;

  border: 1px solid #ccc;

  margin-top: 12px;

  font-size: 16px;

  box-sizing: border-box; /* já incluído no seu código */
  
  max-width: 100%;

}

main button {

  margin-top: 20px;

  background: #0078d7;

  color: #fff;

  border: none;

  cursor: pointer;

  transition: background 0.3s;

 
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;

}

button:hover {

  background: #005fa3;

}

main .resultado {

  margin-top: 10px;

  background: #fff;

  padding: 20px;

  border-radius: 10px;

  border: 1px solid #ddd;

  box-sizing: border-box;

  display: none; /* começa invisível */
}

main .resultado p {

  margin: 5px 0;

  font-size: 15px;

  

}

/* ===== Estilização específica para os títulos do resultado ===== */

#resultado {

  /* mantem sua aparência geral */

  font-family: "Segoe UI", Roboto, sans-serif;

  color: #222;

}

/* Total líquido: azul clarinho, maior */

#resultado .total-tittle {

  margin: 0 0 10px 0;

  align-items: center;

}

#resultado .total-tittle strong {

  color: #2b7bd6;   /* azul clarinho */

  font-size: 1.45rem;

  font-weight: 800;

 
  

}
    
    /* Centraliza e destaca o Total Líquido */

#resultado .total-tittle {



  color: #28a745;            /* verde */

  font-size: 1.5rem;         /* maior destaque */

  font-weight: 700;          /* negrito */

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


}

/* Subtítulos (Valores / Descontos): pretos e médios */

#resultado .section-tittle {

  margin: 18px 0 8px;

}

#resultado .section-tittle strong {

  color: #000;

  font-size: 1.4rem;

  font-weight: 900;



}

    
    /* Espaçamento entre os subtítulos e seus resultados */

#resultado .section-tittle {

  margin-top: 25px;          /* espaço acima do título */

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


    
}

/* Itens normais (13º, Férias, Multa, etc) */

#resultado p {

  margin: 16px 0;

  font-weight: 600;      /* texto um pouco em negrito */

  font-size: 1.03rem;    /* os textos ligeiramente maiores que padrão */

}



  /* se quiser separar número do label, usar <span class="valor"> no JS; por enquanto estiliza todo o <p> */


#resultado p .valor {

  font-weight: 800;

  font-size: 1.06rem;

  color: #000;

}

/* Direitos (bloco final) */

#resultado .direitos {

  margin-top: 2px;

}

#resultado .direitos em {

  font-style: normal;

  color: #000;

  font-weight: 900;

}

.total-title {
  display: flex;
  flex-direction: column; /* título em cima, valor embaixo */
  align-items: center;    /* centraliza horizontalmente */
  justify-content: center;
  text-align: center;
  margin: 20px 0 30px 0;
}

.total-title strong {
  color: #2b7bd6;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px; /* espaço entre o título e o valor */
}

.total-title .valor-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px; /* pequeno espaçamento entre R$ e número */
}

.total-title .rs {
  color: #000;
  font-weight: 900;
  font-size: 1.2rem;
}

.total-title .numero {
  color: green;
  font-weight: 800;
  font-size: 1.4rem;
}



/* Subtítulos (Valores, Descontos) centralizados */

#resultado .subtitulo {

 

  font-size: 1.2rem;

  color: #000000;

  font-weight: 700;

  margin: 20px 0 20px;

}

/* Bolinha (•) antes dos itens de valores e descontos */

#resultado p::before {

  content: "• ";

  color: #333; /* cor discreta da bolinha */

  font-weight: bold;

}

/* Remove a bolinha dos títulos e da linha de direitos */

#resultado .subtitulo::before,

#resultado .total-title::before,

#resultado p em::before {

  content: "";

}


#resultado p.ultimoDia::before,

#resultado p.avisoDias::before,

#resultado p.direitos::before {

  content: none;

}

#resultado .valor-desconto {

  color: red;

  font-weight: 700; /* se quiser manter negrito */

}



/* Mobile Friendly */

@media (max-width: 480px) {
  .calc-container {
    width: calc(100% - 2rem);
    margin: 1rem auto;
    padding: 16px;  /* um pouco menor para celular */
  }
}
  h1 {

    font-size: 1.6rem;

  }

  label, input, select, button, .resultado p {

    font-size: 14px;

  }

  .total-tittle {

    font-size: 1.3rem;

  }

  .sub-tittle {

    font-size: 1.1rem;

  }



.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}


@media (min-width: 480px) {
  .calc-container {
    width: 80%;        /* ocupa 80% da tela no desktop */
    max-width: 800px;  /* não fica gigante */
    min-width: 500px;  /* largura mínima para não ficar apertado */
    margin: 2rem auto; /* centraliza com margem superior */
  }
}


.calc-container:last-child {
  margin-bottom: 0;
}

/* ===== SEÇÃO DE TEXTO PÓS-CALCULADORA ===== */

.info-container {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  width: 100%;
  max-width: 800px;
  margin: 40px auto 80px auto;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  color: #333;
  line-height: 1.6;
}

.info-container h2 {
  color: #000;
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.info-container p {
  margin-bottom: 12px;
  font-size: 1rem;
}

.info-container ul {
  margin: 10px 0 20px 20px;
}

.info-container li {
  margin-bottom: 8px;
}

@media (max-width: 480px) {
  .info-container {
    padding: 18px;
    margin: 30px auto 60px auto;
    width: calc(100%);
  }

  .info-container h2 {
    font-size: 1.2rem;
  }

  .info-container p, .info-container li {
    font-size: 0.95rem;
  }
}