/* ============================================================
   VENTURA / SISTEMA DE DESIGN / BASE
   Reset, tipografia e a mecânica do grão.
   Depende de tokens/tokens.css.
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body{
  font-family:var(--fonte-corpo);
  font-size:var(--texto-corpo);
  line-height:var(--entrelinha-corpo);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   GRÃO
   Três regras duras. Todas nasceram de bug real em 05/08/2026.

   1. É ABSOLUTE, nunca FIXED.
      Fixed só cobre a janela, então some em recorte, print e export.

   2. O bloco que hospeda TEM que ser posicionado.
      Se o pai ficar `position:static`, o `inset:0` resolve contra o
      documento inteiro e a camada cobre a página toda. Com quatro
      blocos assim são oito camadas empilhadas sobre tudo: o preto vira
      cinza chumbo e a peça parece chuvisco de TV.
      Medido: com o vazamento o fundo foi de (6,7,10) para (38,44,55).

   3. NÃO ANINHA. Uma peça leva grão uma vez só.
      Container que apenas agrupa não leva grão. Quem leva é a peça.

   PREFIRA `.com-grao`: resolve o position sozinho e não tem como vazar.
   Auditoria rápida no console:
   [...document.querySelectorAll('.grao')]
     .filter(g => getComputedStyle(g.parentElement).position === 'static')
   ============================================================ */

.grao, .grao-b{
  position:absolute; inset:0; pointer-events:none; z-index:50;
}
.grao{
  opacity:var(--g-fino, var(--grao-fino));
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.grao-b{
  opacity:var(--g-grosso, var(--grao-grosso));
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* atalho seguro: as duas camadas em qualquer bloco, sem markup extra */
.com-grao{ position:relative; }
.com-grao > *{ position:relative; z-index:60; }
.com-grao::before, .com-grao::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:50;
}
.com-grao::before{
  opacity:var(--g-fino, var(--grao-fino)); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.com-grao::after{
  opacity:var(--g-grosso, var(--grao-grosso)); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ============ TIPOGRAFIA ============ */

.hero-titulo, h1, h2, h3{
  font-family:var(--fonte-display);
  font-weight:var(--peso-display);
  text-transform:uppercase;
  letter-spacing:var(--tracking-display);
  line-height:var(--entrelinha-titulo);
  text-wrap:balance;
}
.hero-titulo{ font-size:var(--texto-hero); }
h1{ font-size:var(--texto-h1); }
h2{ font-size:var(--texto-h2); }
h3{ font-size:var(--texto-h3); letter-spacing:-.4px; }

h4{ font-family:var(--fonte-corpo); font-size:var(--texto-h4); font-weight:600; line-height:1.3; }

/* documento longo. NUNCA caixa alta, nunca em página de venda */
.titulo-serif{
  font-family:var(--fonte-serif); font-weight:400;
  text-transform:none; letter-spacing:-.5px; line-height:1.1;
  font-size:var(--texto-h2); text-wrap:balance;
}

/* ============================================================
   ÊNFASE MANUSCRITA
   REGRA: é SEMPRE a palavra ou o termo em destaque.
   Nunca frase inteira, nunca texto corrido, nunca caixa alta.
   Uma por peça. Entra na cor de acento do tema.

   A entrelinha é calculada para o corpo do título não mudar de
   altura quando a ênfase entra. Não substituir por valor fixo.
   ============================================================ */
.enfase{
  font-family:var(--fonte-enfase);
  font-weight:400;
  font-size:calc(1em * var(--enfase-escala));
  line-height:calc(var(--entrelinha-titulo) / var(--enfase-escala));
  -webkit-text-stroke:var(--enfase-contorno) currentColor;
  text-transform:none;
  letter-spacing:0;
  color:var(--cor-acento);
  display:inline-block;
  vertical-align:baseline;
}
.enfase-osso{ color:var(--texto); }
/* arabesco vetorial opcional, continua a última letra */
.enfase-swash{ display:inline-block; vertical-align:baseline; margin-left:-.16em; transform:translateY(.06em); }
.enfase-swash path{ fill:currentColor; }

/* micro-label de canto. Nunca acima de 11px */
.micro{
  font-family:var(--fonte-mono);
  font-size:var(--texto-micro);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--texto-fraco);
}
.micro-acento{ color:var(--cor-acento); }

p{ max-width:var(--largura-texto); }
.corpo-g{ font-size:var(--texto-corpo-g); }
.corpo-p{ font-size:var(--texto-corpo-p); }
.legenda{ font-size:var(--texto-legenda); color:var(--texto-secundario); }
.sutil{ color:var(--texto-sutil); }
.secundario{ color:var(--texto-secundario); }
.fraco{ color:var(--texto-fraco); }
a{ color:inherit; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:var(--fundo-elevado); }
::-webkit-scrollbar-thumb{ background:#2A2118; }
::-webkit-scrollbar-thumb:hover{ background:var(--acento-sombra); }
::selection{ background:var(--cor-acento); color:var(--sobre-acento); }

/* ============ ACESSIBILIDADE ============ */
:focus-visible{ outline:2px solid var(--cor-acento); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}