/* ============================================================
   base.css — reset, tipografia e texturas cel-shaded (procedurais)
   Depende de tokens.css. Compartilhado por todos os conceitos.
   As texturas são geradas em CSS/SVG (~0KB) — nada de PNG pesada.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--preto); color:var(--sand);
  font-family:var(--body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video,iframe{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--preto)}

/* scrollbar dark · a barra branca do Windows quebrava o clima cinema */
html{scrollbar-color:rgba(242,242,240,.22) var(--preto)}
::-webkit-scrollbar{width:11px;background:var(--preto)}
::-webkit-scrollbar-thumb{background:var(--preto-2);border:3px solid var(--preto);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(217,186,63,.45)}

/* foco de teclado visível (a11y) · só quando navegando por teclado */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(217,186,63,.75);outline-offset:3px;border-radius:4px}

/* ---- helpers tipográficos ---- */
.display{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;line-height:.96}
.mono{font-family:var(--mono)}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.eyebrow.ocre{color:var(--ocre)} .eyebrow.ocre::before{background:var(--ocre)}

.h-xl{font-family:var(--display);font-size:clamp(40px,8vw,104px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.h-lg{font-family:var(--display);font-size:clamp(28px,4.4vw,56px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--sand-dim);max-width:60ch}
.lead+.lead{margin-top:14px}

/* ---- botões ---- */
.btn{font-family:var(--body);font-weight:600;font-size:15px;border-radius:var(--r-card);padding:14px 26px;display:inline-flex;gap:9px;align-items:center;cursor:pointer;border:0;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s,color .25s,background .25s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px);transition-duration:.08s}
/* ouro com relevo: luz na aresta de cima, sombra na de baixo · tato de botão físico */
.btn.solid{background:linear-gradient(180deg,#E3C64F,var(--gold) 52%,#C9AB35);color:var(--preto);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px -14px rgba(217,186,63,.5)}
.btn.solid:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.18),0 14px 40px rgba(217,186,63,.35)}
.btn.solid:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.28)}
.btn.ghost{color:var(--sand);border:1px solid rgba(242,242,240,.24);background:transparent}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-300);background:rgba(242,242,240,.04)}

/* ---- texturas cel-shaded procedurais (identidade Germuts) ---- */
/* grão de filme (feTurbulence inline, data-URI ~0KB) */
.tex-grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.085;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
/* hachura cel (repeating-linear-gradient ~0KB) */
.tex-hatch::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:79;opacity:.03;mix-blend-mode:soft-light;
  background-image:repeating-linear-gradient(46deg, var(--sand) 0 1px, transparent 1px 6px)}

/* ---- reveal genérico (concept layers podem sobrescrever) ---- */
.js [data-reveal]{opacity:0;transform:translateY(26px)}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
}