/* Estilo das páginas de funcionalidade. Mesmos tokens e componentes da
   página inicial (index.html), só com o que estas páginas usam. */

:root {
  --solo: #7a4f2c;
  --palha: #c8961f;
  --vigor: #3f7d3a;
  --vigor-in: #56a04d;
  --vigor-claro: #74c063;
  --alerta: #d9534f;

  --tinta: #14180f;
  --tinta2: #1c2117;
  --tinta3: #262c20;

  --texto: #e6e3d8;
  --texto-2: #a8a99b;
  --texto-3: #7d8073;

  --linha: color-mix(in srgb, var(--texto) 11%, transparent);
  --linha-2: color-mix(in srgb, var(--texto) 20%, transparent);

  --slab: 'Bitter', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --medida: 1220px;
  --leitura: 760px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, figure, table) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(img, svg) { display: block; max-inline-size: 100%; }
:where(a) { color: inherit; }

body {
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--slab);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}
p { text-wrap: pretty; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--palha); outline-offset: 3px; border-radius: 2px; }

.wrap { max-inline-size: var(--medida); margin-inline: auto; padding-inline: var(--gutter); }
.leitura { max-inline-size: var(--leitura); }

/* Cabeçalho */
.topo { border-block-end: 1px solid var(--linha); }
.nav { display: flex; align-items: center; gap: 1rem; min-block-size: 76px; }
.marca { --logo: 48px; --fracao: 0.3065; display: block; block-size: var(--logo); overflow: hidden; }
.marca img {
  block-size: calc(var(--logo) / var(--fracao));
  inline-size: auto;
  margin-block: calc((var(--logo) / var(--fracao) - var(--logo)) / -2);
  mix-blend-mode: screen;
}
.nav-acoes { display: flex; gap: 0.6rem; margin-inline-start: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
  text-decoration: none; padding: 0.75rem 1.4rem; border-radius: 3px;
  border: 1px solid transparent; min-block-size: 44px;
  transition: background-color 0.18s, border-color 0.18s;
}
.nav-acoes .btn { padding: 0.55rem 1rem; font-size: 0.8rem; }
.btn-cheio { background: var(--vigor); color: #fff; }
.btn-cheio:hover { background: var(--vigor-in); }
.btn-linha { border-color: var(--linha-2); color: var(--texto); }
.btn-linha:hover { border-color: var(--texto-2); }

/* Trilha */
.trilha { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--texto-3); padding-block: 1.5rem 0; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.trilha li + li::before { content: '/'; margin-inline-end: 0.4rem; color: var(--linha-2); }
.trilha a { text-decoration: none; color: var(--texto-2); }
.trilha a:hover { color: var(--texto); }

/* Abertura */
.abertura { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.rotulo {
  display: block; margin-block-end: 0.9rem;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--vigor-in);
}
.abertura h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.definicao { margin-block-start: 1.25rem; font-size: 1.08rem; line-height: 1.75; color: var(--texto-2); }
.definicao strong { color: var(--texto); font-weight: 500; }
.atualizado { margin-block-start: 1rem; font-family: var(--mono); font-size: 0.68rem; color: var(--texto-3); letter-spacing: 0.04em; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }

/* Blocos de conteúdo */
.bloco { padding-block: clamp(2.25rem, 5vw, 3.5rem); border-block-start: 1px solid var(--linha); }
.bloco h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-block-end: 1rem; }
.bloco p { color: var(--texto-2); }
.bloco p + p { margin-block-start: 0.9rem; }

.captura { border: 1px solid var(--linha-2); border-radius: 6px; background: #0b0e08; overflow: hidden; }
.captura-topo {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.85rem;
  border-block-end: 1px solid var(--linha); background: rgba(0,0,0,0.3);
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3);
}
.captura img { inline-size: 100%; block-size: auto; }
figcaption { margin-block-start: 0.7rem; font-size: 0.8rem; color: var(--texto-3); }

.passos { counter-reset: passo; display: grid; gap: 1rem; margin-block-start: 0.5rem; }
.passos li {
  counter-increment: passo; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem;
  color: var(--texto-2); line-height: 1.65;
}
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.75rem; color: var(--vigor-claro);
  padding-block-start: 0.2rem;
}
.passos strong { color: var(--texto); font-weight: 500; }

.pontos { display: grid; gap: 0.6rem; }
.pontos li { display: flex; gap: 0.7rem; color: var(--texto-2); }
.pontos li::before { content: ''; flex-shrink: 0; inline-size: 6px; block-size: 6px; margin-block-start: 0.65rem; background: var(--vigor-in); }

.tabela-rolagem { overflow-x: auto; margin-block-start: 0.5rem; border: 1px solid var(--linha); }
table { inline-size: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: start; padding: 0.75rem 0.9rem; border-block-end: 1px solid var(--linha); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); background: var(--tinta2); }
td { color: var(--texto-2); }
td strong { color: var(--texto); font-weight: 500; }
tr:last-child td { border-block-end: 0; }
.sel { display: inline-block; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 2px; margin-inline-end: 0.4rem; vertical-align: middle; }
.sel-ok { background: var(--vigor-in); }
.sel-at { background: var(--palha); }
.sel-ru { background: var(--alerta); }

.aviso {
  margin-block-start: 1.25rem; padding: 0.9rem 1rem; border-inline-start: 3px solid var(--palha);
  background: var(--tinta2); font-size: 0.86rem; color: var(--texto-2);
}

/* Perguntas */
.perguntas { border-block-start: 1px solid var(--linha); }
details { border-block-end: 1px solid var(--linha); }
summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 500; color: var(--texto);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; inset-inline-end: 0.2rem; color: var(--vigor-in); font-family: var(--mono); }
details[open] summary::after { content: '–'; }
details p { padding-block-end: 1.1rem; color: var(--texto-2); }

/* Outras funcionalidades */
.outras { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.outras a { display: block; padding: 1.1rem 1.15rem; background: var(--tinta); text-decoration: none; transition: background 0.18s; }
.outras a:hover { background: var(--tinta2); }
.outras strong { display: block; font-family: var(--slab); font-size: 1rem; color: #fff; }
.outras span { display: block; margin-block-start: 0.3rem; font-size: 0.82rem; color: var(--texto-3); line-height: 1.5; }

.chamada { padding-block: clamp(2.5rem, 6vw, 4rem); border-block-start: 1px solid var(--linha); }
.chamada h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.chamada p { margin-block-start: 0.6rem; color: var(--texto-2); }

/* Ilustração da janela de pulverização */
.faixa-horas { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-block-start: 0.5rem; }
.faixa-horas span { block-size: 26px; border-radius: 2px; }
.faixa-horas-regua { display: grid; grid-template-columns: repeat(24, 1fr); margin-block-start: 0.3rem; font-family: var(--mono); font-size: 0.6rem; color: var(--texto-3); }

/* Rodapé */
footer { padding-block: 2.25rem; border-block-start: 1px solid var(--linha); }
.rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rodape a, .rodape p { font-size: 0.78rem; color: var(--texto-3); text-decoration: none; }
.rodape a:hover { color: var(--texto); }

@media (max-width: 560px) {
  .nav-acoes .btn-linha { display: none; }
  th, td { padding: 0.6rem 0.7rem; }
}