/* =========================================================
   Base visual, tema e acessibilidade
   ========================================================= */
:root {
  --gelo: #f5f6f1;
  --bege: #eee5d3;
  --verde-escuro: #173b2b;
  --verde-oliva: #66784d;
  --marrom: #8d735c;
  --amarelo: #d9b64a;
  --texto: #202720;
  --texto-suave: #626d63;
  --linha: rgba(23, 59, 43, 0.16);
  --linha-forte: rgba(23, 59, 43, 0.42);
  --superficie: rgba(255, 255, 255, 0.62);
  --alerta: #9a6049;
  --raio: 6px;
  --fonte: 1;
}

/* Contraste alternativo aplicado pelo JavaScript. */
.modo-contraste {
  --gelo: #111713;
  --bege: #1e271f;
  --verde-escuro: #eef5ec;
  --verde-oliva: #bcc9a6;
  --marrom: #ddc9ad;
  --amarelo: #e4c55b;
  --texto: #f2f6ef;
  --texto-suave: #c8d0c4;
  --linha: rgba(238, 245, 236, 0.2);
  --linha-forte: rgba(238, 245, 236, 0.48);
  --superficie: rgba(255, 255, 255, 0.06);
}

/* Escalas de fonte acionadas pelos botões A- e A+. */
.fonte-menor {
  --fonte: 0.94;
}

.fonte-maior {
  --fonte: 1.08;
}

.fonte-extra {
  --fonte: 1.16;
}

* {
  box-sizing: border-box;
}

body *,
body *::before,
body *::after {
  min-width: 0;
}

html {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--texto);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(16px * var(--fonte));
  line-height: 1.55;
  background: var(--gelo);
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

/* Acessibilidade: foco bem visível para navegação por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
main:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 4px;
}

.atalho-conteudo {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  padding: 10px 12px;
  color: #151911;
  background: var(--amarelo);
  border-radius: var(--raio);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.atalho-conteudo:focus {
  transform: translateY(0);
}

/* =========================================================
   Cabeçalho e navegação
   ========================================================= */
.topo-site {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 0 clamp(20px, 4vw, 72px);
  border-bottom: 1px solid var(--linha);
}

.marca {
  color: var(--verde-escuro);
  font-weight: 900;
  text-decoration: none;
}

.navegacao-principal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
}

.navegacao-principal a {
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

.navegacao-principal a:hover,
.navegacao-principal a[aria-current="page"] {
  color: var(--verde-escuro);
  text-decoration: underline;
  text-decoration-color: var(--amarelo);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.controles-leitura {
  justify-self: end;
  display: flex;
  gap: 8px;
  align-items: center;
}

.controles-leitura button,
.botao-principal,
.pratica-salvar,
.mito-opcao,
.acoes-quiz button,
.remover-pratica,
.glossario-termo {
  min-height: 40px;
  padding: 9px 13px;
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: transparent;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.controles-leitura button:hover,
.pratica-salvar:hover,
.mito-opcao:hover,
.acoes-quiz button:hover,
.remover-pratica:hover,
.glossario-termo:hover {
  border-color: var(--linha-forte);
  background: var(--superficie);
}

.botao-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #151911;
  background: var(--amarelo);
  border-color: transparent;
}

.botao-principal:hover {
  transform: translateY(-1px);
  background: #e1bf55;
}

/* =========================================================
   Estrutura comum das páginas
   ========================================================= */
.pagina {
  width: 100%;
  min-height: calc(100dvh - 78px);
  padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 72px);
}

.cabecalho-pagina {
  max-width: 1040px;
  margin-bottom: clamp(24px, 4vw, 52px);
}

.rotulo {
  margin: 0 0 10px;
  color: var(--verde-oliva);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 1080px;
  margin-bottom: 16px;
  color: var(--verde-escuro);
  font-size: clamp(2rem, 4.7vw, 5rem);
  line-height: 1;
}

h2 {
  margin-bottom: 10px;
  color: var(--verde-escuro);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 1.12;
}

p {
  color: var(--texto-suave);
}

.cabecalho-pagina p:not(.rotulo),
.abertura-biblioteca p,
.texto-sobre p {
  max-width: 760px;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.frase-destaque {
  color: var(--texto);
  font-weight: 800;
}

/* =========================================================
   Página inicial
   ========================================================= */
.pagina-inicio,
.pagina-sobre {
  display: grid;
  align-items: center;
}

.abertura-biblioteca {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(34px, 6vw, 100px);
  align-items: center;
}

.abertura-biblioteca h1 {
  font-size: clamp(3rem, 7.4vw, 7.5rem);
}

.ficha-abertura {
  display: grid;
  gap: 22px;
  min-height: 390px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--bege);
}

.ficha-abertura > span {
  justify-self: start;
  padding: 7px 9px;
  color: var(--verde-escuro);
  border: 1px solid var(--linha);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ficha-abertura dl {
  align-self: end;
  display: grid;
  gap: 0;
  margin: 0;
}

.ficha-abertura div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--linha);
}

.ficha-abertura dt {
  color: var(--verde-escuro);
  font-weight: 900;
}

.ficha-abertura dd {
  margin: 0;
  color: var(--texto-suave);
}

/* =========================================================
   Filtros e biblioteca de práticas
   ========================================================= */
.painel-filtros,
.seletores-comparacao,
.busca-unica {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 0.8fr) auto minmax(180px, 0.8fr);
  gap: 10px 12px;
  align-items: center;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.seletores-comparacao {
  grid-template-columns: auto minmax(220px, 1fr) auto minmax(220px, 1fr);
  max-width: 980px;
}

.busca-unica {
  grid-template-columns: auto minmax(220px, 520px);
  max-width: 720px;
}

label {
  color: var(--verde-escuro);
  font-weight: 900;
}

input,
select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--gelo);
}

.contador-lista {
  margin-bottom: 18px;
  font-weight: 800;
}

.grade-praticas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pratica {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-top: 5px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
}

.pratica.area-água {
  border-top-color: #6d8c9a;
}

.pratica.area-solo {
  border-top-color: var(--marrom);
}

.pratica.area-energia {
  border-top-color: var(--amarelo);
}

.pratica.area-biodiversidade {
  border-top-color: var(--verde-oliva);
}

.pratica.area-produtividade {
  border-top-color: var(--verde-escuro);
}

.pratica-cabecalho {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.etiqueta {
  display: inline-flex;
  width: fit-content;
  padding: 5px 8px;
  color: var(--verde-escuro);
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pratica dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.pratica dl div {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--linha);
}

.pratica dt {
  color: var(--verde-escuro);
  font-weight: 900;
}

.pratica dd {
  margin: 0;
  color: var(--texto-suave);
}

.pratica-salvar.salva {
  background: var(--bege);
  border-color: var(--linha-forte);
}

/* =========================================================
   Comparação
   ========================================================= */
.tabela-comparacao {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

caption {
  padding: 16px;
  color: var(--verde-escuro);
  font-weight: 900;
  text-align: left;
}

th,
td {
  padding: 15px 16px;
  border-top: 1px solid var(--linha);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--verde-escuro);
  font-weight: 900;
}

td {
  color: var(--texto-suave);
}

/* =========================================================
   Glossário, mitos e plano
   ========================================================= */
.lista-glossario,
.lista-mitos {
  display: grid;
  gap: 12px;
  max-width: 980px;
}

.glossario-item,
.mito-item,
.plano-area {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.glossario-termo {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.glossario-definicao {
  padding: 0 16px 16px;
}

.destaque-termo {
  background: rgba(217, 182, 74, 0.32);
}

.mito-item,
.plano-area {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.mito-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mito-opcao.correta,
.opcao-quiz.correta {
  border-color: var(--verde-oliva);
  background: rgba(102, 120, 77, 0.14);
}

.mito-opcao.errada,
.opcao-quiz.errada {
  border-color: var(--alerta);
  background: rgba(154, 96, 73, 0.12);
}

.mito-feedback,
.feedback {
  min-height: 24px;
  margin: 0;
  color: var(--texto);
  font-weight: 800;
}

.resumo-plano {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--bege);
}

.resumo-plano p {
  margin: 0;
  color: var(--texto);
  font-weight: 800;
}

.contagem-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contagem-areas span {
  padding: 6px 8px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--verde-escuro);
  font-size: 0.82rem;
  font-weight: 900;
}

.plano-lista {
  display: grid;
  gap: 14px;
  max-width: 1100px;
}

.plano-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--linha);
}

.plano-item strong {
  display: block;
  color: var(--verde-escuro);
}

.plano-item span {
  color: var(--texto-suave);
}

.plano-vazio {
  max-width: 720px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  font-weight: 800;
}

/* =========================================================
   Quiz
   ========================================================= */
.painel-quiz {
  display: grid;
  grid-template-columns: minmax(230px, 0.32fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: start;
}

.estado-quiz {
  padding-right: clamp(20px, 3vw, 42px);
  border-right: 1px solid var(--linha);
}

.estado-quiz strong {
  display: block;
  margin-bottom: 14px;
  color: var(--verde-escuro);
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  line-height: 1;
}

.questao-quiz h1 {
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1.08;
}

.opcoes-quiz {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.opcao-quiz {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  text-align: left;
}

.opcao-quiz:hover:not(:disabled) {
  border-color: var(--linha-forte);
  background: var(--bege);
}

.feedback {
  margin-top: 16px;
}

.acoes-quiz {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.acoes-quiz button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.texto-sobre {
  max-width: 980px;
}

.texto-sobre h1 {
  font-size: clamp(2.4rem, 5.6vw, 6rem);
}

.texto-sobre p {
  color: var(--texto);
}

/* =========================================================
   Responsividade
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .pagina > * {
    animation: revelar 0.28s ease both;
  }
}

@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsividade: reorganiza controles e listas sem esconder conteúdo. */
@media (max-width: 1040px) {
  .topo-site {
    grid-template-columns: 1fr;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .navegacao-principal,
  .controles-leitura {
    justify-self: start;
    justify-content: flex-start;
  }

  .abertura-biblioteca,
  .painel-quiz {
    grid-template-columns: 1fr;
  }

  .estado-quiz {
    padding-right: 0;
    border-right: 0;
  }

  .painel-filtros,
  .seletores-comparacao {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .grade-praticas {
    grid-template-columns: 1fr;
  }

  .busca-unica {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .pagina {
    padding: 24px 16px 34px;
  }

  .topo-site {
    padding-inline: 16px;
  }

  .navegacao-principal {
    gap: 8px 14px;
  }

  .controles-leitura {
    width: 100%;
  }

  .controles-leitura button {
    flex: 1;
    padding-inline: 8px;
  }

  h1,
  .abertura-biblioteca h1,
  .texto-sobre h1 {
    font-size: clamp(2.3rem, 13vw, 4rem);
  }

  .ficha-abertura {
    min-height: 300px;
  }

  .ficha-abertura div,
  .pratica dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .pratica-cabecalho,
  .acoes-quiz {
    align-items: stretch;
    flex-direction: column;
  }

  .plano-item {
    grid-template-columns: 1fr;
  }

  .pratica-salvar,
  .remover-pratica,
  .acoes-quiz button,
  .botao-principal {
    width: 100%;
  }
}