/* Harpion — sistema de tokens. Nenhum hex solto fora deste bloco. */
:root{
  --breu:#0d1719;      /* faixa de registro, texto primario */
  --cal:#f4f5f2;       /* papel tecnico, fundo base */
  --cal-fundo:#eceee9; /* superficie elevada sobre o papel */
  --maresia:#14505c;   /* cor de marca: teal-petroleo */
  --pedra:#5c6b6d;     /* texto secundario */
  --sinal:#c9822a;     /* acento ambar — parcimonia */
  --entregue:#63c295;  /* status positivo sobre fundo escuro */
  --falha:#e0785f;     /* status negativo sobre fundo escuro */

  --display:"Archivo",system-ui,sans-serif;
  --corpo:"IBM Plex Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --txt-xs:.75rem; --txt-sm:.875rem; --txt-base:1rem; --txt-lg:1.2rem;
  --txt-xl:1.6rem; --txt-2xl:2.1rem; --txt-3xl:3.2rem;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;

  --raio:4px;
  --filete:1px solid rgba(13,23,25,.14);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.18s;
  --largura:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cal);color:var(--breu);
  font-family:var(--corpo);font-size:var(--txt-base);line-height:1.62;
}
a{color:var(--maresia);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--breu)}
:focus-visible{outline:2px solid var(--sinal);outline-offset:3px}
img{max-width:100%}

.envelope{max-width:var(--largura);margin:0 auto;padding:0 var(--sp-6)}

.rotulo{
  font-family:var(--mono);font-size:var(--txt-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pedra);
}

/* ---------- barra ---------- */
.barra{border-bottom:var(--filete);background:var(--cal);position:sticky;top:0;z-index:20}
.barra .envelope{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);min-height:64px}
.marca{
  font-family:var(--display);font-weight:800;font-size:var(--txt-lg);
  letter-spacing:-.035em;color:var(--breu);text-decoration:none;
}
.marca b{color:var(--maresia);font-weight:800}
.barra nav{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.barra nav a{
  font-family:var(--mono);font-size:var(--txt-xs);letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--pedra);
}
.barra nav a:hover{color:var(--maresia)}

/* ---------- abertura ---------- */
.abertura{padding:var(--sp-24) 0 var(--sp-16)}
.abertura .envelope{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--sp-16);align-items:start}
.abertura h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:var(--txt-3xl);margin:var(--sp-4) 0 var(--sp-6);text-wrap:balance;
}
.abertura h1 em{font-style:normal;color:var(--maresia)}
.abertura p{font-size:var(--txt-lg);color:var(--pedra);max-width:34em;margin:0 0 var(--sp-6)}

.identidade{
  border:var(--filete);background:var(--cal-fundo);padding:var(--sp-6);
  font-family:var(--mono);font-size:var(--txt-sm);line-height:1.75;
}
.identidade dl{margin:var(--sp-4) 0 0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4)}
.identidade dt{color:var(--pedra);font-size:var(--txt-xs);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.identidade dd{margin:0;color:var(--breu);overflow-wrap:anywhere}
.falta{background:rgba(201,130,42,.18);border-bottom:2px solid var(--sinal);padding:0 var(--sp-1)}

/* ---------- secoes ---------- */
section{padding:var(--sp-16) 0;border-top:var(--filete)}
section > .envelope > h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:var(--txt-2xl);margin:var(--sp-3) 0 var(--sp-8);max-width:22em;line-height:1.1;
}
.intro{color:var(--pedra);max-width:44em;margin:calc(var(--sp-6) * -1) 0 var(--sp-8)}

.pilares{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-8) var(--sp-12);margin:0;padding:0;list-style:none}
.pilares li{border-left:2px solid var(--maresia);padding-left:var(--sp-6)}
.pilares h3{font-family:var(--display);font-weight:700;font-size:var(--txt-lg);margin:var(--sp-2) 0;letter-spacing:-.02em}
.pilares p{margin:0;color:var(--pedra)}

/* ---------- assinatura: a trilha de registro ---------- */
.registro{background:var(--breu);color:var(--cal);border-top:0;padding:var(--sp-16) 0}
.registro > .envelope > h2{color:var(--cal)}
.registro .rotulo{color:var(--sinal)}
.registro .intro{color:rgba(244,245,242,.72)}
.trilha{
  font-family:var(--mono);font-size:var(--txt-sm);line-height:2.1;
  border:1px solid rgba(244,245,242,.16);background:rgba(244,245,242,.03);
  padding:var(--sp-6);overflow-x:auto;
}
.trilha div{white-space:pre;color:rgba(244,245,242,.86)}
.trilha .hora{color:rgba(244,245,242,.45)}
.trilha .tipo{color:var(--sinal)}
.trilha .ok{color:var(--entregue)}
.trilha .erro{color:var(--falha)}
.legenda{margin-top:var(--sp-6);color:rgba(244,245,242,.72);max-width:46em}

/* ---------- indice da operacao ---------- */
.indice{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8)}
.indice h3{font-family:var(--mono);font-size:var(--txt-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--maresia);margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:var(--filete)}
.indice ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:var(--txt-sm);line-height:1.9;color:var(--pedra)}
.indice li{border-bottom:1px dotted rgba(13,23,25,.12);padding:var(--sp-1) 0}

/* ---------- quadro ---------- */
.quadro{width:100%;border-collapse:collapse;font-size:var(--txt-sm);margin-top:var(--sp-6)}
.quadro th,.quadro td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:var(--filete)}
.quadro th{font-family:var(--mono);font-size:var(--txt-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--pedra);font-weight:500}
.quadro td.num{font-family:var(--mono);color:var(--maresia)}

/* ---------- empresa ---------- */
.empresa{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.empresa dl{margin:0;font-family:var(--mono);font-size:var(--txt-sm);line-height:1.8}
.empresa dt{color:var(--pedra);font-size:var(--txt-xs);letter-spacing:.08em;text-transform:uppercase;margin-top:var(--sp-4)}
.empresa dd{margin:0;overflow-wrap:anywhere}

/* ---------- rodape ---------- */
footer{border-top:var(--filete);padding:var(--sp-8) 0 var(--sp-12);font-size:var(--txt-sm);color:var(--pedra)}
footer .envelope{display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:var(--sp-6);flex-wrap:wrap}
footer a{font-family:var(--mono);font-size:var(--txt-xs);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* ---------- documento (privacidade/termos) ---------- */
.documento{max-width:46em;padding:var(--sp-16) var(--sp-6) var(--sp-8);margin:0 auto}
.documento h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:var(--txt-2xl);line-height:1.1;margin:var(--sp-3) 0 var(--sp-6)}
.documento h2{font-family:var(--display);font-weight:700;font-size:var(--txt-lg);letter-spacing:-.02em;margin:var(--sp-12) 0 var(--sp-3)}
.documento ul{padding-left:var(--sp-6)}
.documento li{margin-bottom:var(--sp-2)}

@media (max-width:900px){
  :root{--txt-3xl:2.3rem;--txt-2xl:1.7rem}
  .abertura{padding:var(--sp-12) 0 var(--sp-8)}
  .abertura .envelope,.pilares,.empresa{grid-template-columns:1fr;gap:var(--sp-8)}
  .indice{grid-template-columns:repeat(2,1fr)}
  section{padding:var(--sp-12) 0}
  .barra .envelope{flex-direction:column;align-items:flex-start;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  .barra{position:static}
}
@media (max-width:560px){
  .indice{grid-template-columns:1fr}
  .trilha{font-size:var(--txt-xs);line-height:1.9;padding:var(--sp-4)}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }