/* Cores utilizadas em todas as páginas. */
:root {
  --azul-bebe: #c7e5f5;
  --fundo: #f3f9fc;
  --dourado: #947020;
  --texto: #203747;
  --branco: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--fundo);
  color: var(--texto);
  line-height: 1.7;
}

header {
  background-color: var(--azul-bebe);
  border-bottom: 3px solid var(--dourado);
}

nav {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

nav a {
  color: var(--texto);
  font-weight: bold;
  text-decoration: none;
}

nav a:first-child {
  margin-right: auto;
  font-size: 22px;
}

nav a:hover,
nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--dourado);
  text-underline-offset: 5px;
}

a:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 5px;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 20px;
}

h1 {
  max-width: 750px;
  margin: 0 0 24px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.2;
}

main p {
  max-width: 700px;
  font-size: 18px;
}

.sobre-cartao,
.dedicatoria {
  margin-top: 24px;
  padding: 28px;
  background-color: var(--branco);
  border: 1px solid var(--azul-bebe);
  border-radius: 16px;
}

.sobre-cartao h2,
.dedicatoria h2 {
  margin-top: 0;
}

.dedicatoria {
  border-top: 4px solid var(--dourado);
}

.assinatura {
  color: var(--dourado);
  font-weight: bold;
}

footer {
  padding: 24px 20px;
  background-color: var(--branco);
  border-top: 1px solid var(--azul-bebe);
  text-align: center;
  font-size: 14px;
}

@media (max-width: 600px) {
  nav {
    gap: 16px;
  }

  nav a:first-child {
    width: 100%;
    margin-right: 0;
  }

  main {
    padding: 40px 20px;
  }
}
/* Texto pequeno acima do título da página inicial. */
.etiqueta {
  color: var(--dourado);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Espaçamento da apresentação. */
.apresentacao {
  margin-bottom: 48px;
}

/* Estilo compartilhado por links e botões de ação. */
.botao {
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid var(--dourado);
  border-radius: 10px;
  background-color: var(--dourado);
  color: var(--branco);
  font: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover:not(:disabled) {
  background-color: var(--texto);
  border-color: var(--texto);
}

.botao:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Grade de recursos da página inicial. */
.recursos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Blocos de conteúdo. */
.cartao {
  padding: 26px;
  background-color: var(--branco);
  border: 1px solid var(--azul-bebe);
  border-radius: 16px;
}

.cartao h2,
.cartao h3 {
  margin-top: 0;
}

/* Campos do formulário. */
#form-disciplina {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-weight: bold;
}

input,
select {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #718b9c;
  border-radius: 8px;
  background-color: var(--branco);
  color: var(--texto);
  font: inherit;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 3px;
}

#form-disciplina .botao {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Resultados da calculadora. */
.resultados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.resultados > h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

#ira-acumulado {
  display: block;
  color: var(--dourado);
  font-size: 42px;
  font-weight: bold;
}

/* Permite rolar a tabela sem alargar a página no celular. */
.tabela-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

caption {
  padding-bottom: 12px;
  text-align: left;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--azul-bebe);
}

th {
  background-color: var(--azul-bebe);
}

/* Adaptação para celular.  <- adapta para celular e para computador a tela*/
@media (max-width: 650px) {
  .recursos,
  .resultados,
  #form-disciplina {
    grid-template-columns: 1fr;
  }

  .cartao {
    padding: 20px;
  }
}