/* Página inicial (/) e formulário de envio. Também carregado por /lab e pela
   página de edição expirada, que reusam o formulário de envio. */

/* ---------- hero ---------- */
.hero{text-align:center;padding:66px 0 26px}
/* sem <br>: o título quebra sozinho, em linhas equilibradas (".enc" nunca
   fica sozinho numa linha) */
h1.title{margin:18px auto 0;font-size:var(--text-display);line-height:1.04;
  letter-spacing:-.025em;font-weight:var(--weight-heavy);max-width:760px;text-wrap:balance}
h1.title span{color:var(--color-primary)}
.lead{margin:18px auto 0;max-width:600px;color:var(--color-text-muted);font-size:19px}

/* ---------- formulário de envio ---------- */
.upload{max-width:560px;margin:30px auto 0}
.drop{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;
  padding:30px 22px;border:1.5px dashed #c4c9d6;border-radius:var(--radius-lg);
  background:var(--color-surface-muted);cursor:pointer;transition:var(--duration-fast)}
.drop:hover,.drop.drag{border-color:var(--color-primary);background:var(--color-primary-soft)}
.drop.ready{border-color:#78c6a3;background:#f0fbf5}
.drop.invalid{border-color:var(--color-danger);background:var(--color-danger-bg)}
/* o input de arquivo é .hidden (só visualmente) logo depois da área: o foco
   do teclado nele aparece na área inteira */
.drop:has(+ input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px;
  border-color:var(--color-primary);background:var(--color-primary-soft)}
.drop .ico{width:46px;height:46px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-border);
  display:grid;place-items:center;color:var(--color-primary);font-weight:var(--weight-heavy);font-size:var(--text-xs);margin-bottom:6px}
.drop strong{font-size:var(--text-base)}
.drop .hint{color:var(--color-text-muted);font-size:var(--text-sm)}
.ack{display:flex;gap:9px;align-items:flex-start;margin-top:14px;text-align:left;
  color:var(--color-text-muted);font-size:12.5px;line-height:1.4}
.ack input{width:16px;height:16px;margin-top:1px;accent-color:var(--color-primary);flex:none}
.ack a{color:var(--color-primary);font-weight:var(--weight-semibold)}
.ack.invalid{color:var(--color-danger)}
.field-error{display:none;margin:6px 0 0 25px;text-align:left;color:var(--color-danger);
  font-size:12.5px;font-weight:var(--weight-semibold)}
.field-error.show{display:block}
.submit{width:100%;margin-top:14px}
.status{margin-top:12px;font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;min-height:18px}
/* edição expirada: o formulário fica dentro do painel, logo após o texto */
.upload.revive{margin-top:var(--space-4)}

/* ---------- estados do envio (upload.js) ---------- */
/* enviando: .progress com a porcentagem real; convertendo: .progress.indeterminate */
/* o cabeçalho já vem do scroll-padding do html (components.css) */
.upload-progress,.upload-error{scroll-margin:var(--space-1) 0 var(--space-4)}
/* depois do primeiro envio a linha de estado vazia não reserva espaço; sem
   display:none, para a região viva continuar valendo para o leitor de tela */
.upload[data-state] .status:empty{min-height:0;margin-top:0}
.upload-progress{margin-top:var(--space-4);text-align:left}
.upload-progress-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
  margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-primary-hover)}
.upload-progress-row span:first-child{min-width:0;overflow-wrap:anywhere}
#progress-pct{flex:none;font-variant-numeric:tabular-nums}
/* erro na própria página (aviso com ações de components.css), com o arquivo
   ainda escolhido */
.upload-error{margin-top:var(--space-4);text-align:left}
.drop.invalid strong{color:var(--color-danger-text)}

/* ---------- seções ---------- */
section.block{padding:46px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 30px}
.sec-head h2{font-size:var(--text-3xl);letter-spacing:-.02em;margin:0 0 var(--space-2)}
.sec-head p{color:var(--color-text-muted);margin:0;font-size:var(--text-base)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card .ci{width:42px;height:42px;border-radius:var(--radius-control);background:var(--color-primary-soft);
  color:var(--color-primary-hover);display:grid;place-items:center;margin-bottom:14px}
.card .ci svg{width:22px;height:22px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding-left:54px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:2px;
  width:38px;height:38px;border-radius:50%;background:var(--color-text);color:#fff;
  display:grid;place-items:center;font-weight:var(--weight-bold)}
.step h3{margin:2px 0 var(--space-1);font-size:var(--text-base)}
.step p{margin:0;color:var(--color-text-muted);font-size:var(--text-md)}
.info-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
.info-copy h2{font-size:var(--text-3xl);letter-spacing:-.02em;margin:0 0 10px}
.info-copy p{margin:0;color:var(--color-text-muted);font-size:var(--text-base)}

@media(max-width:820px){
  .grid3,.steps,.info-block{grid-template-columns:1fr}
  .hero{padding-top:44px}
}