/* ============================================================
   FAROESTE ANCAP — O DOSSIÊ
   Conceito: o Estado tem uma ficha sobre você. Aqui você monta a sua.
   Papel milimetrado, marcas de registro, réguas, carimbo. Documento de campo.
   ============================================================ */
:root{
  --tinta:#0A0A0C; --papel:#101015; --papel-2:#16161D; --papel-3:#1D1D26;
  --grade:rgba(233,185,73,.045); --grade-forte:rgba(233,185,73,.1);
  --risco:#26262F; --risco-2:#35353F;
  --ouro:#E9B949; --ouro-2:#F7E1A0; --ouro-3:#8A6C2C;
  --sangue:#B33A2B;
  --texto:#F0ECE4; --texto-2:#94908A; --texto-3:#5C5952;
  --display:'Instrument Serif',Georgia,serif;
  --corpo:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --m:clamp(1.5rem,5vw,5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--tinta);color:var(--texto);font-family:var(--corpo);
  font-size:16.5px;line-height:1.6;overflow-x:hidden;
  /* papel milimetrado: grade fina + grade grossa a cada 5 */
  background-image:
    linear-gradient(var(--grade) 1px,transparent 1px),
    linear-gradient(90deg,var(--grade) 1px,transparent 1px),
    linear-gradient(var(--grade-forte) 1px,transparent 1px),
    linear-gradient(90deg,var(--grade-forte) 1px,transparent 1px);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px;
}
body::before{ /* grão */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{ /* vinheta: escurece as bordas, foca o centro */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 90% at 50% 30%,transparent 40%,rgba(10,10,12,.85) 100%);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ouro);color:var(--tinta)}
header,footer,section,main{position:relative;z-index:1}

/* ── MARCAS DE REGISTRO nos cantos (como prova de impressão) ── */
.registro{position:fixed;width:18px;height:18px;z-index:60;pointer-events:none;opacity:.5}
.registro::before,.registro::after{content:"";position:absolute;background:var(--ouro-3)}
.registro::before{left:0;right:0;height:1px;top:50%}
.registro::after{top:0;bottom:0;width:1px;left:50%}
.reg-1{top:14px;left:14px}.reg-2{top:14px;right:14px}
.reg-3{bottom:14px;left:14px}.reg-4{bottom:14px;right:14px}

/* ── CABEÇALHO: linha de documento ─────────────── */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--m);border-bottom:1px solid var(--risco);
  background:rgba(10,10,12,.88);backdrop-filter:blur(18px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.marca{color:var(--ouro);letter-spacing:.3em;display:flex;align-items:center;gap:.6rem}
.marca::before{content:"";width:9px;height:9px;border:1px solid var(--ouro);transform:rotate(45deg)}
.nav nav{margin-left:auto;display:flex;gap:1.4rem;flex-wrap:wrap}
.nav nav a{color:var(--texto-3);transition:color .2s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ouro)}

/* ── RÉGUA: divisor com marcação, não linha lisa ── */
.regua{height:14px;border-top:1px solid var(--risco);position:relative;
  background-image:repeating-linear-gradient(90deg,var(--risco) 0 1px,transparent 1px 28px);
  background-size:28px 6px;background-repeat:repeat-x;background-position:top}
.regua::after{content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background-image:repeating-linear-gradient(90deg,var(--risco-2) 0 1px,transparent 1px 140px)}

/* ── TIPOGRAFIA ────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;letter-spacing:-.022em}
h1{font-size:clamp(3.1rem,9.5vw,8rem)}
h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:1.1rem}
h3{font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.14}
.campo{ /* rótulo de campo de formulário */
  font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ouro-3);display:block;margin-bottom:.55rem;
}
.lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--texto-2);max-width:56ch}
.secao{padding:clamp(4rem,9vw,7rem) var(--m)}

/* ── HERO: bloco de dossiê ─────────────────────── */
.hero{min-height:90vh;display:grid;align-content:center;gap:1.6rem;padding:clamp(3.5rem,8vw,6rem) var(--m)}
.hero-meta{display:flex;gap:2.2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--texto-3);
  padding-bottom:1.2rem;border-bottom:1px solid var(--risco)}
.hero-meta b{color:var(--ouro-3);font-weight:400}
.hero h1 .g{color:var(--ouro);font-style:italic}
.hero>*{animation:sobe .85s cubic-bezier(.16,1,.3,1) backwards}
.hero>*:nth-child(1){animation-delay:.04s}.hero>*:nth-child(2){animation-delay:.12s}
.hero>*:nth-child(3){animation-delay:.22s}.hero>*:nth-child(4){animation-delay:.32s}
@keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem;align-items:center}

/* ── BOTÕES: carimbo ───────────────────────────── */
.btn{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1rem 1.9rem;border:1px solid var(--ouro);color:var(--ouro);background:transparent;
  cursor:pointer;transition:all .25s;position:relative;
}
.btn::after{content:"";position:absolute;inset:3px;border:1px solid transparent;transition:border-color .25s}
.btn:hover{background:var(--ouro);color:var(--tinta)}
.btn:hover::after{border-color:rgba(10,10,12,.35)}
.btn--solido{background:var(--ouro);color:var(--tinta)}
.btn--solido:hover{background:var(--ouro-2)}
.btn--fraco{border-color:var(--risco-2);color:var(--texto-2)}
.btn--fraco:hover{background:var(--papel-3);color:var(--texto);border-color:var(--texto-3)}

/* ── CARTÕES: verbetes numerados do manual ─────── */
.grade{display:grid;gap:0;border:1px solid var(--risco);margin-top:2.6rem;background:rgba(16,16,21,.6)}
@media(min-width:820px){
  .grade--3{grid-template-columns:repeat(3,1fr)}
  .grade--2{grid-template-columns:repeat(2,1fr)}
}
.cartao{padding:clamp(1.6rem,2.8vw,2.3rem);border-right:1px solid var(--risco);border-bottom:1px solid var(--risco);
  position:relative;transition:background .3s}
.cartao:hover{background:rgba(233,185,73,.035)}
.cartao .num{font-family:var(--mono);font-size:.62rem;color:var(--ouro-3);letter-spacing:.26em;text-transform:uppercase;
  display:block;padding-bottom:.7rem;border-bottom:1px dashed var(--risco-2);margin-bottom:1rem}
.cartao h3{margin-bottom:.6rem}
.cartao p{color:var(--texto-2);font-size:.9rem;line-height:1.58}

/* ── TESTE: formulário de campo ────────────────── */
.teste{max-width:860px;margin:0 auto}
.form-topo{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--risco);margin-bottom:2.4rem}
.contador{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;color:var(--texto-3);text-transform:uppercase}
.barra-progresso{height:3px;background:var(--risco);width:130px;position:relative;overflow:hidden}
.barra-progresso i{position:absolute;inset:0 auto 0 0;background:var(--ouro);width:0;transition:width .5s cubic-bezier(.16,1,.3,1)}
.afirmacao{font-family:var(--display);font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.12;
  margin:0 0 3rem;min-height:2.4em;display:flex;align-items:center;
  transition:opacity .3s,transform .3s;padding-left:1.6rem;border-left:2px solid var(--ouro-3)}
.afirmacao.trocando{opacity:0;transform:translateY(12px)}
.opcoes{display:grid;gap:0;border:1px solid var(--risco)}
.opcao{
  text-align:left;padding:1.05rem 1.4rem;border:0;border-bottom:1px solid var(--risco);
  background:transparent;color:var(--texto);font-family:var(--corpo);font-size:.98rem;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:1.2rem;
}
.opcao:last-child{border-bottom:0}
.opcao:hover{background:var(--ouro);color:var(--tinta)}
.opcao .k{font-family:var(--mono);font-size:.66rem;color:var(--ouro-3);min-width:1.2em;
  border:1px solid var(--risco-2);padding:.15rem .4rem;transition:all .2s}
.opcao:hover .k{color:var(--tinta);border-color:var(--tinta)}

/* ── A FICHA (resultado) ───────────────────────── */
.resultado{display:none}
.resultado.on{display:block}
.ficha{
  border:1px solid var(--ouro-3);background:var(--papel);position:relative;
  animation:sobe .8s cubic-bezier(.16,1,.3,1);
}
.ficha::before{content:"";position:absolute;inset:5px;border:1px solid var(--risco);pointer-events:none}
.ficha-cabeca{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;
  padding:.9rem clamp(1.3rem,3vw,2.2rem);border-bottom:1px solid var(--ouro-3);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ouro);
  background:rgba(233,185,73,.05);
}
.ficha-cabeca .n{color:var(--texto-3)}
.ficha-corpo{padding:clamp(1.6rem,4vw,3rem)}
.ficha-faixa{font-family:var(--mono);font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--texto-2)}
.arquetipo{font-family:var(--display);font-size:clamp(2.7rem,8vw,5.4rem);line-height:.94;margin:.7rem 0 .5rem}
.lema{font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2.1vw,1.42rem);color:var(--ouro-2)}
.ficha-desc{color:var(--texto-2);margin-top:1.3rem;max-width:60ch;font-size:.97rem}
.ficha-grid{display:grid;gap:2.6rem;margin-top:2.6rem;padding-top:2.2rem;border-top:1px dashed var(--risco-2)}
@media(min-width:880px){.ficha-grid{grid-template-columns:1.1fr .9fr;align-items:start}}

/* carimbo */
.carimbo{
  position:absolute;right:clamp(1rem,4vw,2.6rem);top:clamp(4.5rem,10vw,6.5rem);
  border:2px solid var(--sangue);color:var(--sangue);padding:.5rem 1rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  transform:rotate(-11deg);opacity:.75;pointer-events:none;line-height:1.3;text-align:center;
}
.carimbo b{display:block;font-size:.9rem;letter-spacing:.14em;font-weight:500}

/* eixos como escala de instrumento */
.eixo{margin-bottom:1.9rem}
.eixo-topo{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);margin-bottom:.65rem}
.eixo-topo b{color:var(--ouro-3);font-weight:400}
.eixo-trilho{height:26px;border:1px solid var(--risco);position:relative;
  background-image:repeating-linear-gradient(90deg,var(--risco) 0 1px,transparent 1px 10%)}
.eixo-trilho::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--risco-2)}
.eixo-marca{position:absolute;top:0;bottom:0;width:3px;background:var(--ouro);left:50%;
  transform:translateX(-50%);transition:left 1.1s cubic-bezier(.16,1,.3,1);box-shadow:0 0 12px rgba(233,185,73,.7)}
.eixo-valor{font-family:var(--mono);font-size:.74rem;color:var(--ouro);margin-top:.5rem;display:block}

/* ── RODAPÉ ────────────────────────────────────── */
.rodape{padding:4rem var(--m) 3rem;border-top:1px solid var(--risco);
  display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:end}
.rodape p{font-size:.8rem;color:var(--texto-3);max-width:42ch}
.rodape .assinatura{font-family:var(--display);font-style:italic;color:var(--texto-2);font-size:1.1rem}
.rodape a{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--texto-3);
  display:block;margin-bottom:.5rem;transition:color .2s}
.rodape a:hover{color:var(--ouro)}

/* ── PROSA / util ──────────────────────────────── */
.destaque{color:var(--ouro)}
.prosa{max-width:64ch}
.prosa p{margin-bottom:1.3rem;color:var(--texto-2)}
.prosa h3{margin:2.5rem 0 .85rem;color:var(--texto)}
.prosa strong{color:var(--texto)}
.aviso{border-left:2px solid var(--ouro);padding:.95rem 0 .95rem 1.4rem;margin:2rem 0;
  color:var(--texto-2);font-size:.93rem}
.gabarito{margin-top:2rem;border:1px solid var(--risco)}
.gab-item{padding:1.05rem 1.35rem;font-size:.9rem;border-bottom:1px solid var(--risco)}
.gab-item:last-child{border-bottom:0}
.gab-item .st{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em}
.gab-item.ok .st{color:var(--ouro)}
.gab-item.no .st{color:var(--sangue)}
.gab-item p{color:var(--texto-2);margin-top:.4rem;font-size:.85rem}
@media(max-width:640px){.nav{gap:.7rem;padding:.75rem 1rem;font-size:.62rem}.nav nav{gap:.8rem}.registro{display:none}}