/* ===== tokens.css ===== */
/* ============================================================
   TOKENS
   Paleta extraída dos ativos reais da Ápice Leilões:
   petróleo #00537D (theme-color do site) e verde #75D44D (banner).
   Tema travado em escuro na família petróleo. Verde é o único acento.
   Raio: botões pill 999px, superfícies 16px, inputs 10px.
   ============================================================ */
:root{
  --petrol-900:#00293D;
  --petrol-850:#003049;
  --petrol-800:#003655;
  --petrol-700:#00456A;
  --petrol-600:#00537D;
  --petrol-500:#0A6491;
  --lime:#75D44D;
  --lime-700:#4FA832;
  --paper:#F0F2F4;
  --paper-70:rgba(240,242,244,.74);
  --paper-55:rgba(240,242,244,.58);
  --line:rgba(240,242,244,.15);
  --line-strong:rgba(240,242,244,.28);
  --danger:#FFB4A8;
  --r-surface:16px;
  --r-input:10px;
  --r-pill:999px;
  --shell:1240px;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
}

/* ===== base.css ===== */
/* ============================================================
   BASE — reset, tipografia global e utilitários
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--petrol-900);color:var(--paper);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:700}
p{margin:0}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:20px}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}

/* ===== components/buttons.css ===== */
/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.01em;
  border-radius:var(--r-pill);border:0;cursor:pointer;white-space:nowrap;
  padding:15px 26px;text-decoration:none;transition:transform .12s ease,background .18s ease;
}
.btn-primary{background:var(--lime);color:#062B12}
.btn-primary:hover{background:#88E05F}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--paper);border:1.5px solid var(--line-strong);padding:13px 22px}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-sm{padding:11px 20px;font-size:14px}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}

/* ===== components/nav.css ===== */
/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:60;height:72px;
  background:rgba(0,41,61,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{height:34px;width:auto}
.nav-links{display:flex;gap:28px;font-size:14.5px;color:var(--paper-70);white-space:nowrap}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--lime)}
@media(max-width:1023px){.nav-links{display:none}}
@media(max-width:640px){.nav{height:64px}.nav-in{height:64px}.nav .btn{display:none}}

/* ===== components/footer.css ===== */
/* ---------- RODAPÉ ---------- */
.foot{background:var(--petrol-900);border-top:1px solid var(--line);padding:64px 0 120px;font-size:13px;color:var(--paper-55);line-height:1.7}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot img{height:42px;width:auto;margin-bottom:20px}
.foot h4{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--paper);margin-bottom:16px}
.foot h4.is-spaced{margin-top:26px}
.foot-col p{margin-bottom:12px}
.foot-col p.is-soft{color:var(--paper-70)}
.foot-col p b{color:var(--paper)}
.foot-col a{color:var(--paper-70);text-decoration:none;display:block;margin-bottom:10px}
.foot-col a:hover{color:var(--lime)}
.foot-line{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.foot-line i{font-size:18px;color:var(--lime);line-height:1.5;flex:none}
.foot-line b{display:block;color:var(--paper);font-weight:600;font-size:13.4px}
.foot-line a{display:inline;margin:0;color:var(--paper)}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{
  width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--paper-70);margin:0;
}
.foot-social a:hover{border-color:var(--lime);color:var(--lime)}
.foot-social i{font-size:19px}
.foot-legal{padding-top:32px;font-size:12.4px;line-height:1.75}
.foot-legal p+p{margin-top:12px}
.foot-legal p.is-soft{color:var(--paper-70)}

/* Pontos de quebra do próprio componente: assim o rodapé continua certo
   em qualquer página que o inclua, sem depender do responsive.css da index. */
@media(max-width:1023px){.foot-cols{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){.foot-cols{grid-template-columns:1fr;gap:32px}}

/* ===== pages/legal.css ===== */
/* ============================================================
   PÁGINAS DE TEXTO LEGAL
   Mesma identidade da index original, em modo documento: coluna
   estreita, hierarquia clara e numeração de seção — um texto que
   precisa ser encontrado e citado, não percorrido.

   Só entra no bundle desta página (CSS_LEGAL_MANIFEST em build.mjs).
   ============================================================ */
.legal{padding:clamp(44px, 5vw, 76px) 0 clamp(64px, 7vw, 100px)}

.legal-head{padding-bottom:clamp(30px, 3.4vw, 44px);border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(2rem, 4vw, 3.1rem);max-width:20ch}
.legal-meta{
  margin-top:20px;
  display:flex;gap:10px 24px;flex-wrap:wrap;
  font-size:13.5px;color:var(--paper-55);
}
.legal-meta b{color:var(--paper-70);font-weight:600}

.legal-grid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(30px, 5vw, 72px);align-items:start}

/* Sumário fixo na lateral: a pessoa que abre esta página quase sempre
   procura um item específico, não a leitura do começo ao fim. */
.legal-toc{position:sticky;top:96px;padding-top:clamp(34px, 4vw, 52px)}
.legal-toc b{
  display:block;margin-bottom:16px;
  font-family:var(--font-display);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper-55);
}
.legal-toc a{
  display:block;padding:7px 0;
  font-size:14px;line-height:1.4;color:var(--paper-70);text-decoration:none;
  border-left:2px solid transparent;padding-left:14px;margin-left:-16px;
  transition:color .18s ease,border-color .18s ease;
}
.legal-toc a:hover{color:var(--lime);border-left-color:var(--lime)}

.legal-body{padding-top:clamp(34px, 4vw, 52px);max-width:74ch}
.legal-body > p{font-size:16px;line-height:1.75;color:var(--paper-70)}
.legal-body > p + p{margin-top:16px}

.legal-sec{padding-top:clamp(34px, 4vw, 48px);margin-top:clamp(34px, 4vw, 48px);border-top:1px solid var(--line)}
.legal-sec:first-of-type{border-top:0;margin-top:28px;padding-top:0}
.legal-sec h2{
  display:flex;gap:14px;align-items:baseline;
  font-size:clamp(1.2rem, 1.9vw, 1.55rem);
  scroll-margin-top:96px;
}
.legal-sec h2 span{flex:none;color:var(--lime);font-size:.82em;font-variant-numeric:tabular-nums}
.legal-sec p{margin-top:16px;font-size:16px;line-height:1.75;color:var(--paper-70)}
.legal-sec h3{
  margin-top:26px;
  font-size:1rem;font-weight:700;color:var(--paper);
}

.legal-list{margin:16px 0 0;padding:0;list-style:none}
.legal-list li{
  position:relative;
  padding-left:24px;margin-top:11px;
  font-size:15.5px;line-height:1.65;color:var(--paper-70);
}
.legal-list li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--lime);
}
.legal-list b{color:var(--paper);font-weight:600}
.legal-body a{color:var(--lime)}

/* Bloco de dados do controlador e do canal de contato. */
.legal-card{
  margin-top:22px;padding:24px 26px;
  background:var(--petrol-800);
  border:1px solid var(--line);
  border-radius:var(--r-surface);
  font-size:15px;line-height:1.7;color:var(--paper-70);
}
.legal-card b{display:block;color:var(--paper);font-family:var(--font-display);font-size:1.02rem;margin-bottom:8px}
.legal-card a{color:var(--lime)}

@media(max-width:1023px){
  .legal-grid{grid-template-columns:1fr;gap:0}
  .legal-toc{position:static;padding-top:30px}
  .legal-toc a{display:inline-block;margin:0 8px 0 0;padding:7px 12px;border-left:0;border:1px solid var(--line);border-radius:var(--r-pill)}
  .legal-toc a:hover{border-color:var(--lime)}
}