/* ============================================================
   VALORES — seção escura: palavras grandes em cinza + parágrafo
   ============================================================ */
/* --ink e não o preto puro: é o mesmo grafite das seções escuras das
   outras três páginas do estúdio, e ele tem um azul mínimo dentro que
   impede a seção de virar buraco preto no meio do papel. */
.values{background:var(--ink);color:var(--paper)}
.values__words{border-top:1px solid var(--line-dark)}
.values__words li{
  list-style:none;border-bottom:1px solid var(--line-dark);
  padding-block:clamp(10px,2.4vw,20px);
  font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;
  /* 9vw garante que "POSICIONAMENTO" caiba em telas de 360px sem cortar */
  font-size:clamp(1.7rem,9vw,6rem);line-height:1;letter-spacing:-.03em;
  /* .30 deixava as quatro palavras com cara de item desabilitado, e no
     celular, onde não existe hover, era só isso que a seção mostrava. O
     acender continua sendo o prêmio do mouse, mas o estado parado já
     precisa se sustentar sozinho. */
  color:rgba(255,255,255,.42);transition:color .3s;
}
@media(hover:hover) and (pointer:fine){.values__words li:hover{color:var(--green-live)}}
.values__para{
  margin-top:clamp(32px,6vw,56px);max-width:34ch;
  font-size:clamp(1.1rem,4.4vw,1.5rem);line-height:1.4;font-weight:500;color:rgba(255,255,255,.78);
}
.values__para b{color:#fff;font-weight:600}