/* Página inicial. É a vitrine do site, lida em mesa, e por isso é a ÚNICA
   superfície com o tratamento do portal (raw/agrotech_pro_futuristic_portal.html):
   fundo grafite fixo, um brilho neon no topo, cabeçalho de vidro e botão pílula.
   A exceção está no design system v2 §9.2; app, painel e as páginas de texto
   continuam sem brilho e sem vidro. */
body.inicio{
  --tinta:#e8ebee; --tinta-2:#b3bbc3; --tinta-3:#8a949e;
  --linha:#1d242a; --linha-forte:#313a42;
  --cartao:#13181c; --tint:#13240b;
  --ok:#4ccfb2; --ok-fundo:#0e2622;
  --warn:#e0b269; --warn-fundo:#2e2410;
  --crit:#e8836e; --crit-fundo:#331611;
  margin:0; color:var(--tinta); color-scheme:dark;
  font:17px/1.55 var(--sans);
  background:
    radial-gradient(60rem 34rem at 50% -10rem, rgba(72,227,0,.10), transparent 70%),
    var(--chassi);
}
.inicio a:focus-visible{outline:2px solid var(--marca-tinta); outline-offset:3px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* cabeçalho de vidro: o único vidro do sistema */
.inicio .topo{
  position:sticky; top:0; z-index:10;
  background:rgba(5,7,8,.72);
  -webkit-backdrop-filter:saturate(140%) blur(18px); backdrop-filter:saturate(140%) blur(18px);
  border-bottom-color:rgba(242,244,246,.07);
}

.pagina{max-width:72rem; margin:0 auto; padding-inline:1.25rem}
.pagina > section{scroll-margin-top:5rem}

/* ---------- abertura ---------- */
.abertura{text-align:center; padding-block:5.5rem 0}
.selo{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .85rem; margin:0 0 1.75rem;
  border:1px solid rgba(242,244,246,.1); background:rgba(242,244,246,.04);
  border-radius:999px; font:600 .8125rem/1.2 var(--sans); color:var(--tinta-2);
}
.selo i{width:.4rem; height:.4rem; border-radius:50%; background:var(--neon); box-shadow:0 0 .7rem var(--neon)}
.abertura h1{
  font:700 clamp(2.4rem, 1.3rem + 4.2vw, 4.25rem)/1.05 var(--sans);
  letter-spacing:-.035em; margin:0 auto 1.5rem; max-width:24ch; text-wrap:balance;
}
.abertura h1 span{display:block; color:var(--tinta-3); font-weight:500}
.resumo{
  font-size:1.1875rem; color:var(--tinta-2); max-width:40rem; margin:0 auto 2.25rem;
  text-wrap:pretty;
}
.acoes{display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem}
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3rem; padding:0 1.5rem; border-radius:999px;
  font:700 .9375rem/1 var(--sans); text-decoration:none;
}
.botao-neon{background:var(--neon); color:var(--chassi); box-shadow:0 0 3rem -.75rem rgba(72,227,0,.45)}
.botao-neon:hover{background:#56ef0c}
.botao-neon:active{background:var(--neon-pressionado)}
.botao-fantasma{color:var(--tinta); background:rgba(242,244,246,.05); border:1px solid rgba(242,244,246,.12)}
.botao-fantasma:hover{background:rgba(242,244,246,.09)}
.botao:focus-visible{border-radius:999px}

/* ---------- vitrine: o painel atrás, o aparelho na frente ---------- */
.vitrine{position:relative; max-width:64rem; margin:4.5rem auto 0}
.janela{
  margin-right:8.5rem; text-align:left;
  border:1px solid rgba(242,244,246,.1); border-radius:1.25rem; overflow:hidden;
  background:#0a0d10;
  box-shadow:0 2.5rem 5rem -1.5rem rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
}
.janela-barra{
  height:2.5rem; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--linha); background:#0d1114;
}
.janela-barra span{
  font:400 .75rem/1 var(--mono); color:var(--tinta-3);
  background:rgba(242,244,246,.05); border-radius:6px; padding:.35rem .8rem;
}
.janela-corpo{display:grid; grid-template-columns:11rem minmax(0,1fr); min-height:21rem}
.painel-lado{
  background:var(--chassi); border-right:1px solid var(--chassi-linha);
  padding:1rem .75rem; display:flex; flex-direction:column; gap:.2rem;
}
.painel-lado b{font:700 .8125rem/1.25 var(--sans); padding:0 .5rem}
.painel-lado small{display:block; font:400 .75rem/1.3 var(--sans); color:var(--tinta-3); padding:0 .5rem .9rem}
.painel-lado span{font:500 .8125rem/1 var(--sans); color:var(--tinta-3); padding:.5rem; border-radius:6px}
.painel-lado span.ativo{background:var(--tint); color:var(--marca-tinta); box-shadow:inset 2px 0 0 var(--neon); font-weight:700}
.painel-conteudo{padding:1.5rem 1.5rem 1.75rem; min-width:0}
/* o aparelho sobrepõe a borda direita da janela: a tabela para antes dele */
@media (min-width:60.01rem){ .painel-conteudo{padding-right:9.5rem} }
.painel-conteudo h2{font:700 1.125rem/1.3 var(--sans); margin:0; letter-spacing:-.01em}
.painel-conteudo p{font-size:.8125rem; color:var(--tinta-3); margin:.25rem 0 1.25rem}
.tabela{width:100%; border-collapse:collapse; font-size:.8125rem}
.tabela th{font-weight:600; color:var(--tinta-3); text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--linha-forte)}
.tabela td{padding:.7rem .6rem; border-bottom:1px solid var(--linha); color:var(--tinta)}
.tabela tr:last-child td{border-bottom:0}
.tabela .n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}

.aparelho{
  position:absolute; right:0; bottom:-3.5rem; width:16.5rem; text-align:left;
  padding:.55rem; border-radius:2.4rem; background:#0b0e10;
  border:1px solid rgba(242,244,246,.14);
  box-shadow:0 2rem 4rem -1rem rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.tela{border-radius:1.9rem; overflow:hidden; background:#0a0d10}
.tela-status{
  background:var(--chassi); height:1.6rem; padding:0 1.1rem;
  display:flex; align-items:center; font:600 .625rem/1 var(--mono); color:var(--tinta-2);
}
.tela-barra{
  background:var(--chassi); border-bottom:1px solid var(--chassi-linha);
  padding:.35rem .9rem .65rem; display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem;
}
.tela-barra b{display:block; font:700 1rem/1.2 var(--sans)}
.tela-barra small{font-size:.6875rem; color:var(--tinta-3)}
.envio{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.15rem;
  font:600 .625rem/1 var(--mono); color:var(--sobre-chassi);
  background:rgba(242,244,246,.08); border-radius:4px; padding:.3rem .4rem;
}
.envio i{width:.35rem; height:.35rem; border-radius:50%; background:var(--ok)}
.tela-lista{padding:.6rem; display:grid; gap:.5rem}
.maquina{background:var(--cartao); border:1px solid var(--linha-forte); border-radius:.75rem; padding:.65rem .75rem}
.maquina .topo-linha{display:flex; justify-content:space-between; align-items:center; gap:.4rem}
.maquina b{font:700 .8125rem/1.3 var(--sans)}
.maquina small{display:block; font-size:.6875rem; color:var(--tinta-3)}
.leitura{font:600 1.375rem/1.2 var(--mono); font-variant-numeric:tabular-nums; margin-top:.2rem; letter-spacing:-.02em}
.leitura em{font-style:normal; color:var(--ok)}
.leitura small{display:inline; font:400 .6875rem var(--sans); margin-left:.3rem}
.maquina .alerta{display:flex; justify-content:space-between; font-size:.6875rem; color:var(--tinta-2); margin-top:.35rem}
.tela-nav{
  display:grid; grid-template-columns:repeat(5,1fr); background:var(--cartao);
  border-top:1px solid var(--linha-forte); padding:.45rem .2rem .6rem;
  font:500 .5625rem/1.2 var(--sans); color:var(--tinta-2); text-align:center;
}
.tela-nav em{display:block; width:2rem; height:1.05rem; margin:0 auto .25rem; border-radius:999px}
.tela-nav .ativo{color:var(--marca-tinta); font-weight:700}
.tela-nav .ativo em{background:var(--tint); box-shadow:inset 0 0 0 1px rgba(180,236,150,.25)}
.legenda{margin:5.5rem 0 0; font-size:.8125rem; color:var(--tinta-3); text-align:center}

/* ---------- peças comuns aos instrumentos ---------- */
.chip{
  display:inline-block; border-radius:999px; padding:.2rem .55rem; white-space:nowrap;
  font:700 .6875rem/1.3 var(--sans);
}
.chip.ok{background:var(--ok-fundo); color:var(--ok)}
.chip.warn{background:var(--warn-fundo); color:var(--warn)}
.chip.crit{background:var(--crit-fundo); color:var(--crit)}
.trilha{height:.375rem; border-radius:999px; background:#1b2126; overflow:hidden; margin-top:.35rem}
.trilha i{display:block; height:100%; border-radius:999px}

/* ---------- módulos ---------- */
.secao{padding-block:9rem 0}
.rotulo{font:700 .9375rem/1.3 var(--sans); color:var(--marca-tinta); margin:0 0 .75rem}
.secao h2{
  font:700 clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem)/1.1 var(--sans);
  letter-spacing:-.03em; margin:0; max-width:22ch; text-wrap:balance;
}
.secao .intro{color:var(--tinta-2); max-width:38rem; margin:1rem 0 0}
.grade{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:3rem}
.cartao{
  display:flex; flex-direction:column; gap:1.5rem; padding:1.75rem; min-width:0;
  border:1px solid var(--linha); border-radius:1.5rem;
  background:linear-gradient(180deg, #11161a 0%, #0b0f12 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cartao.largo{grid-column:span 2}
.cartao h3{font:700 1.1875rem/1.25 var(--sans); letter-spacing:-.01em; margin:0 0 .5rem}
.cartao p{font-size:.9375rem; color:var(--tinta-2); margin:0}
.instrumento{margin-top:auto; background:#080b0d; border:1px solid var(--linha); border-radius:1rem; padding:1rem 1.1rem}

.plano{display:grid; gap:.9rem}
.plano .item{display:flex; justify-content:space-between; gap:1rem; font-size:.875rem}
.plano .item span:last-child{white-space:nowrap}

.contador{display:flex; justify-content:center; gap:.25rem; padding:.9rem 0 1rem}
.contador span{
  width:2rem; height:2.6rem; display:grid; place-items:center; border-radius:.35rem;
  background:var(--chassi); border:1px solid var(--linha-forte);
  font:600 1.5rem/1 var(--mono); color:var(--sobre-chassi);
}
.contador .decimo{background:var(--sobre-chassi); color:var(--chassi); border-color:var(--sobre-chassi)}
.contador .virgula{width:auto; background:none; border:0; color:var(--tinta-3)}
.foto-pe{display:flex; justify-content:space-between; align-items:center; font-size:.8125rem; color:var(--tinta-3)}

.mostrador{font:600 2.5rem/1 var(--mono); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.mostrador small{font:500 .9375rem var(--sans); color:var(--tinta-3); margin-left:.4rem; letter-spacing:0}
.mostrador-pe{font-size:.8125rem; color:var(--tinta-3); margin:.6rem 0 0}

.fluxo{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1rem; align-items:center}
.fluxo h4{font:700 .8125rem/1.3 var(--sans); color:var(--tinta-3); margin:0 0 .6rem}
.fluxo ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.fluxo li{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  font-size:.8125rem; background:var(--cartao); border:1px solid var(--linha-forte);
  border-radius:.6rem; padding:.45rem .6rem;
}
.fluxo .guardado{font:700 .6875rem/1.3 var(--sans); color:var(--tinta-3); white-space:nowrap}
.fluxo svg{width:1.5rem; height:1.5rem; color:var(--tinta-3)}

.os{display:grid; gap:.4rem; font-size:.875rem}
.os-topo{display:flex; justify-content:space-between; align-items:center; gap:.5rem}
.os b{font-weight:700}
.os span{color:var(--tinta-2)}

.saldo{display:grid; gap:.45rem; margin-top:.9rem; font-size:.8125rem; color:var(--tinta-2)}
.saldo div{display:flex; justify-content:space-between}

.barras{display:grid; gap:.6rem; font-size:.75rem}
.barras div{display:grid; grid-template-columns:7.5rem minmax(0,1fr) 2.4rem; gap:.5rem; align-items:center}
.barras span:first-child{color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barras i{display:block; height:.5rem; border-radius:999px; background:var(--marca-tinta); opacity:.8}
.barras span:last-child{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- quem usa ---------- */
.papeis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; margin-top:3rem}
.papel{border-top:1px solid var(--linha-forte); padding-top:1.25rem}
.papel h3{font:700 1.125rem/1.3 var(--sans); margin:0 0 .5rem}
.papel p{font-size:.9375rem; color:var(--tinta-2); margin:0 0 .9rem}
.onde{
  display:inline-block; font:700 .75rem/1.3 var(--sans); color:var(--tinta-3);
  border:1px solid var(--linha-forte); border-radius:6px; padding:.15rem .5rem;
}

/* ---------- fechamento e rodapé ---------- */
.fecho{
  margin-top:9rem; padding:3.5rem 1.5rem; text-align:center; border-radius:1.75rem;
  border:1px solid var(--linha);
  background:radial-gradient(40rem 16rem at 50% 0, rgba(72,227,0,.07), transparent 70%), #0b0f12;
}
.fecho h2{font:700 clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem)/1.15 var(--sans); letter-spacing:-.03em; margin:0 0 .75rem; text-wrap:balance}
.fecho p{color:var(--tinta-2); margin:0 auto 1.75rem; max-width:32rem}
.rodape{
  margin-top:5rem; padding-block:2.25rem 3rem; border-top:1px solid var(--linha);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  font-size:.875rem; color:var(--tinta-3);
}
.rodape p{margin:0}
.rodape nav{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem}
.rodape a{color:var(--tinta-2); text-decoration:none}
.rodape a:hover{color:var(--tinta)}

/* ---------- telas menores ---------- */
@media (max-width:60rem){
  .janela{margin-right:0}
  .aparelho{position:relative; right:auto; bottom:auto; margin:-6rem auto 0}
  .legenda{margin-top:1.5rem}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .papeis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40rem){
  body.inicio{font-size:16px}
  .abertura{padding-block:3.5rem 0}
  .resumo{font-size:1.0625rem}
  .janela-corpo{grid-template-columns:minmax(0,1fr); min-height:0}
  .painel-lado{display:none}
  .painel-conteudo{padding:1.1rem}
  .aparelho{margin-top:1.25rem}
  .grade, .papeis{grid-template-columns:minmax(0,1fr)}
  .cartao.largo{grid-column:auto}
  .fluxo{grid-template-columns:minmax(0,1fr)}
  .fluxo svg{transform:rotate(90deg); margin:0 auto}
  .secao{padding-block:6rem 0}
}