/* InforAlvelos · nivel 2: materiais, profundidade e tipografia. Nada aqui muda cores nem logotipo. */

/* Materiais e profundidade: o cabecalho passa a camada translucida, o conteudo passa por baixo */
.header,.hd{
  background:rgba(17,18,17,.88);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.08);
}
/* o menu aberto no telemovel continua solido (legibilidade) */
.header nav.open,.hd nav.open{background:#191d17}

/* Tipografia: o espacamento entre letras acompanha o tamanho (titulos grandes um pouco mais soltos do que hoje, texto pequeno mais aberto) */
h1{letter-spacing:-.045em}
.section h2,.statement h2,.tinta h3,.loja-extra-head h3{letter-spacing:-.035em}
h3{letter-spacing:-.025em}
.service p,.tinta p,.loja-nota{letter-spacing:.005em}

/* Profundidade: os cartoes de vidro ganham uma luz fina no topo (o material "apanha luz") */
.service-grid .service,.tinta{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.service-grid .service:hover{box-shadow:inset 0 0 0 1px rgba(201,42,42,.55),inset 0 1px 0 rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.35)}

@media (prefers-reduced-transparency:reduce){
  .header,.hd{background:#111211;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* a mola trata do movimento dos botoes: sem transicao CSS, exceto ao premir */
.is-mag:not(:active){transition:none}