/* ═══════════════════════════════════════════════════════════════════════════
   krvaletius.com — folha principal
   Pele: vantablack (.theme-cinzas do app AUTOR) — preto absoluto + ouro.
   Tipografia da casa: Spectral (display) · EB Garamond (serif) · Inter (sans).
   (era Cinzel ate 2026-08-28 — ver a nota no tokens.css)
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body {
  margin:0;
  background:var(--bg0);
  color:var(--t2);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── o AMBIENTE vantablack: poeira de ouro + trama diagonal ─────────────── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.32;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,216,106,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(230,185,74,.10) 0 1px, transparent 2px),
    repeating-linear-gradient(135deg, transparent 0 64px, rgba(230,185,74,.012) 65px, transparent 66px);
  background-size:260px 220px,320px 270px,auto;
}
/* névoa fria no alto — o gelo de Despoina */
body::after {
  content:''; position:fixed; inset:0 0 auto; height:70vh; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(230,185,74,.045), transparent 70%);
}
main,header,footer { position:relative; z-index:1; }

/* ── tipografia ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--display);
  color:var(--t1);
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1 { font-size:clamp(2rem,5.2vw,3.6rem); }
h2 { font-size:clamp(1.55rem,3.4vw,2.5rem); }
h3 { font-size:clamp(1.2rem,2.1vw,1.6rem); }
p  { margin:0 0 1.1em; }
a  { color:var(--accent); text-decoration:none; transition:color .18s ease; }
a:hover { color:var(--gold-flare); }
strong { color:var(--t1); font-weight:600; }
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid var(--gold-polished); outline-offset:3px; border-radius:3px; }

.dourado { color:var(--accent); }
.eyebrow {
  font-family:var(--display); font-size:.78rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--t3);
  margin:0 0 1rem;
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { width:min(1140px,92vw); margin-inline:auto; }
.wrap-estreito { width:min(760px,92vw); margin-inline:auto; }
section { padding:clamp(3.5rem,8vw,7rem) 0; }

/* fio de ouro que separa as seções */
.fio {
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold-polished),var(--gold-deep),transparent);
  opacity:.5;
}

/* ⚠ O BLOCO DO CABEÇALHO (.topo/.marca/.nav/.menu-btn) FOI REMOVIDO em
   2026-08-28 junto com a própria barra — ver a nota em template.mjs.
   Não é código morto guardado "por via das dúvidas": o que substitui a
   barra são as abas flutuantes, no fim deste arquivo. */

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 2rem; border-radius:3px; cursor:pointer;
  border:1px solid var(--gold-deep);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align:center;
}
.btn-ouro {
  background:linear-gradient(145deg,var(--gold-polished),var(--accent) 55%,var(--gold-deep));
  color:#140e02; border-color:var(--gold-polished);
  box-shadow:var(--glow);
}
.btn-ouro:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(255,216,106,.42),0 0 54px rgba(230,185,74,.16); color:#140e02; }
.btn-fantasma { background:rgba(255,216,106,.028); color:var(--accent); }
.btn-fantasma:hover { background:var(--bg-hover); color:var(--gold-flare); transform:translateY(-2px); }
.btn-largo { width:100%; }

/* ── cartões ────────────────────────────────────────────────────────────── */
.cartao {
  background:linear-gradient(145deg,var(--surface-sheen-soft),transparent),var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--shadow2);
  transition:border-color .2s ease, transform .2s ease;
}
.cartao:hover { border-color:var(--border2); transform:translateY(-3px); }
.grade { display:grid; gap:1.4rem; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }

/* preço */
.preco { font-family:var(--display); font-size:2rem; font-weight:600; color:var(--gold-polished); line-height:1; margin:.2rem 0; }
.preco small { display:block; font-family:var(--sans); font-size:.78rem; font-weight:400; color:var(--t3); letter-spacing:.04em; text-transform:none; margin-top:.45rem; }

/* ── rodapé ─────────────────────────────────────────────────────────────── */
.rodape {
  border-top:1px solid var(--border);
  background:var(--bg1);
  padding:3rem 0 2rem;
  font-size:.85rem; color:var(--t3);
}
.rodape a { color:var(--t2); }
.rodape a:hover { color:var(--accent); }
.rodape-grade { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:2.2rem; }
.rodape h4 { font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--t2); margin-bottom:.9rem; }
.rodape ul { list-style:none; margin:0; padding:0; }
.rodape li { margin-bottom:.5rem; }
.rodape-base { border-top:1px solid var(--border); padding-top:1.5rem; font-size:.78rem; color:var(--t4); line-height:1.7; }

/* ── utilidades ─────────────────────────────────────────────────────────── */
.centro { text-align:center; }
.pular {
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#140e02; padding:.7rem 1.2rem; z-index:100;
  font-family:var(--display); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
}
.pular:focus { left:1rem; top:1rem; }

/* ══ ABAS FLUTUANTES — o menuzinho lateral que substituiu a barra do topo ══
   Pedido do autor (28/08). A barra grudada gastava 63px de altura em toda
   rolagem para mostrar UMA palavra: desde que o site virou landing, a lista
   do menu esta vazia (ver a nota em template.mjs).
   ⚠ CLEAN quer dizer: em repouso sao NOVE RISQUINHOS na borda. O rotulo so
   aparece no que o mouse toca e no que esta valendo — nunca os nove de uma
   vez, senao viraria a barra de novo, so que em pe.
   ⚠ O `pointer-events:none` do bloco e o `auto` dos links importam: sem isso
   a faixa invisivel da coluna inteira comeria o clique do conteudo ao lado. */
.abas {
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:60; padding:.5rem .85rem .5rem 0; pointer-events:none;
}
.abas ul { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
/* ⚠⚠ O ROTULO E ABSOLUTO, e isso NAO e capricho de layout. Enquanto ele
   morava no fluxo do link, cada aba media 117px de largura mesmo apagada
   (opacity:0 esconde, nao tira do lugar) — uma faixa muda de 117px colada na
   borda direita, por cima do conteudo, comendo o clique de quem passasse
   perto. Medido: aba em x=778 numa tela de 924. Fora do fluxo, o link volta a
   medir so o risquinho, e o rotulo flutua a esquerda sem pegar em nada. */
.abas a {
  pointer-events:auto; position:relative; display:flex;
  align-items:center; justify-content:flex-end;
  text-decoration:none; color:var(--t3); padding:.3rem 0; min-height:22px;
}
/* ⚠⚠ PONTO, NAO RISCO — e em toda largura. O primeiro desenho usava risquinhos
   no computador e pontos so no celular; o autor pediu *"tres pontos simples"*.
   E o ponto resolve de graca um defeito que o risco tinha: risco cresce para o
   LADO quando acende, e o lado onde ele cresce e justamente onde o conteudo
   esta — foi assim que ele encostou na tabela Livro x Ebook a 375px. Ponto
   aceso muda de cor e ganha halo: mesma largura, sempre. */
.abas-risco {
  display:block; width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:.38;
  transition:opacity .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.abas-rot {
  position:absolute; right:100%; margin-right:.55rem; pointer-events:none;
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transform:translateX(10px);
  transition:opacity .22s ease, transform .22s ease;
}
.abas a:hover, .abas a:focus-visible { color:var(--gold-polished); }
.abas a:hover .abas-risco, .abas a:focus-visible .abas-risco { opacity:1; }
.abas a:hover .abas-rot, .abas a:focus-visible .abas-rot { opacity:1; transform:none; }
/* a secao em que a pessoa esta: risco mais longo, cor de ouro e rotulo aceso */
.abas a[aria-current="true"] { color:var(--gold-polished); }
.abas a[aria-current="true"] .abas-risco, .abas a[aria-current="page"] .abas-risco {
  opacity:1; background:var(--gold-polished);
  box-shadow:0 0 0 3px rgba(230,185,74,.20), 0 0 9px rgba(230,185,74,.6);
}
.abas a[aria-current="page"] { color:var(--gold-polished); }
/* ⚠⚠ O ROTULO SO APARECE NO HOVER/FOCO — NUNCA na aba acesa. Aqui havia
   estas duas regras abrindo o rotulo da aba atual, e duas vezes no mesmo dia
   ele cobriu conteudo: primeiro o floco de neve da entrada (29px de invasao,
   medido a 924) e depois o terceiro cartao de "Os trabalhos" (42px). A causa
   e a mesma: o rotulo abre a ESQUERDA do ponto, sobre a pagina, e na aba acesa
   ele fica aberto o tempo todo — e ha sempre uma acesa. Empurrar o conteudo
   para o lado a cada colisao e enxugar gelo; o conserto e o rotulo nao ficar
   aberto sozinho.
   ★ Nada se perde: a aba acesa continua dizendo onde a pessoa esta pelo OURO e
   pelo halo. Quem quiser o nome passa o mouse — e foi "tres pontos SIMPLES"
   que o autor pediu. */
.abas a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }

/* ⚠ NO CELULAR O ROTULO NAO EXISTE: nao ha mouse para passar por cima, e nove
   palavras em pe na borda tapariam a leitura. Ficam so os risquinhos, mais
   curtos. O alvo de toque continua com 44px de largura — invisivel, a
   esquerda do risco — porque dedo nao acerta 16px.
   ⚠ E o gato do "voltar ao topo" mora no canto de BAIXO (right:26 bottom:26,
   92px). As abas ficam centradas na vertical: os dois nao se encontram. */
@media (max-width:760px){
  /* ⚠⚠ NO CELULAR O RISCO VIRA PONTO, e por medida: a 375 o corpo da pagina
     acaba em x=360 e o risco de 12px comecava em 354 — SEIS PIXELS EM CIMA da
     borda da tabela Livro x Ebook, e o aceso (22px) comia dez. Risco cresce
     para a esquerda, que e justamente onde o conteudo esta; a 375 nao existe
     margem sobrando para ele crescer.
     ★ O ponto nao cresce NUNCA: aceso ele muda de COR e ganha um halo, mesma
     largura. Assim o menu cabe na beirada sem disputar espaco com nada — e de
     quebra e o desenho que todo mundo ja conhece de galeria de fotos.
     ⚠ O alvo de toque continua com 30px de largura, invisivel, a esquerda. */
  .abas { padding-right:.35rem; }
  .abas ul { gap:.6rem; }
  .abas a { min-height:20px; padding:.25rem 0 .25rem 30px; margin-left:-30px; }
  .abas-rot { display:none; }
  .abas-risco { width:6px; height:6px; }
}
@media (prefers-reduced-motion:reduce){
  .abas-risco, .abas-rot { transition:none; }
}

/* ══ O MENU DAS PÁGINAS (canto superior direito) ═══════════════════════════
   ⚠ Ele NÃO é a barra do topo de volta: em repouso são 44x44px de botão, sem
   faixa nenhuma atravessando a tela. A lista só existe quando alguém abre.
   ⚠ z-index 70: acima do trilho de abas (60), porque a lista aberta passa por
   cima dele. Abaixo do aviso de cookies, que tem de ser respondido. */
.mp { position:fixed; top:14px; right:14px; z-index:70; }
.mp-btn {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--border2); border-radius:6px;
  color:var(--accent); cursor:pointer; padding:0;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.mp-btn:hover, .mp-btn:focus-visible { color:var(--gold-polished); border-color:var(--gold-deep); }
.mp-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* os três traços viram X ao abrir — o botão diz o que ele vai fazer agora */
.mp-tracos { display:block; width:18px; height:12px; position:relative; }
.mp-tracos i {
  position:absolute; left:0; right:0; height:1.6px; border-radius:2px;
  background:currentColor; transition:transform .22s ease, opacity .18s ease;
}
.mp-tracos i:nth-child(1) { top:0; }
.mp-tracos i:nth-child(2) { top:5.2px; }
.mp-tracos i:nth-child(3) { top:10.4px; }
.mp-btn[aria-expanded="true"] .mp-tracos i:nth-child(1) { transform:translateY(5.2px) rotate(45deg); }
.mp-btn[aria-expanded="true"] .mp-tracos i:nth-child(2) { opacity:0; }
.mp-btn[aria-expanded="true"] .mp-tracos i:nth-child(3) { transform:translateY(-5.2px) rotate(-45deg); }

.mp-lista {
  position:absolute; top:calc(100% + 8px); right:0; min-width:212px;
  background:var(--glass2, rgba(10,8,4,.94)); backdrop-filter:blur(16px);
  border:1px solid var(--border2); border-radius:6px;
  box-shadow:0 18px 48px rgba(0,0,0,.6);
  padding:.4rem;
}
.mp-lista[hidden] { display:none; }
.mp-lista ul { list-style:none; margin:0; padding:0; }
.mp-lista a {
  display:block; padding:.62rem .8rem; border-radius:4px;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.06em;
  color:var(--t2); text-decoration:none; white-space:nowrap;
  transition:background-color .16s ease, color .16s ease;
}
.mp-lista a:hover, .mp-lista a:focus-visible { background:rgba(230,185,74,.10); color:var(--ouro-claro,#F9C950); }
/* a página em que a pessoa já está: marcada, e não some da lista — sumir dela
   faria a lista mudar de tamanho de página para página, sem explicação. */
.mp-lista a[aria-current="page"] { color:var(--gold-polished); }
.mp-lista a[aria-current="page"]::before { content:"\2022\00a0"; }
@media (prefers-reduced-motion:reduce) { .mp-tracos i { transition:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   A FAIXA DE ANÚNCIO DO TOPO (2026-08-29)
   ═══════════════════════════════════════════════════════════════════════════

   ★ Pedido do autor: uma tira no topo com um anúncio ROLANDO. O conteúdo dela
   e as páginas em que ela aparece estão no `ANUNCIO`, no `template.mjs` — com o
   aviso de que anunciar grátis o que se cobra é propaganda enganosa.

   ⚠ ELA EMPURRA A PÁGINA, não flutua por cima. Uma tarja `position:fixed` no
   topo cobriria o começo do conteúdo em toda rolagem, e no celular comeria uma
   fatia inteira da primeira tela. Aqui ela é um bloco no fluxo: ocupa o lugar
   dela uma vez e some quando o visitante rola.

   ⚠ z-index 80 mesmo estando no fluxo: o menu de páginas é `fixed` com 70 e o
   trilho de abas com 60. Sem isto o botão do menu, que fica a 14px do topo,
   pousaria EM CIMA da faixa. */
.fx-faixa {
  position: relative; z-index: 80;
  background: var(--rubro); color: #FFF6F4;
  overflow: hidden;
  /* ⚠ A ALTURA É FIXA e o texto é centrado nela por `line-height`. Com altura
     automática, a fonte de letreiro (que carrega depois) mudava a altura da
     tira DEPOIS de a página desenhar, e a página inteira pulava para baixo. */
  height: 38px;
}
.fx-link {
  display: block; height: 100%; text-decoration: none; color: inherit;
}
/* ⚠ A PISTA é o que rola, e ela é `inline-flex` para as cópias ficarem em UMA
   linha só. Com `display:block` as quatro cópias quebravam e a tira crescia. */
.fx-pista {
  display: inline-flex; align-items: center; height: 100%;
  white-space: nowrap; will-change: transform;
}
.fx-item {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(11px, 2.2vw, 13px); letter-spacing: .1em; text-transform: uppercase;
  /* o respiro entre uma cópia e a seguinte */
  padding-inline: 2.2rem;
}
/* ⚠ -25% e não -100%: são QUATRO cópias na pista, então andar 25% da largura
   total move exatamente UMA cópia — e no fim do ciclo o desenho é idêntico ao
   do começo. Com -100% a tira dava um salto visível a cada volta. */
@keyframes fx-rola { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: no-preference) {
  .fx-pista { animation: fx-rola 18s linear infinite; }
  /* parar quando o ponteiro está em cima é o mínimo para conseguir CLICAR num
     alvo que foge — e a faixa é um link, o clique é o ponto dela. */
  .fx-faixa:hover .fx-pista, .fx-faixa:focus-within .fx-pista { animation-play-state: paused; }
}
/* ⚠ QUEM PEDE MENOS MOVIMENTO NÃO PERDE O ANÚNCIO: a animação não roda, e a
   tira vira uma frase parada e centrada. Some é diferente de parar. */
@media (prefers-reduced-motion: reduce) {
  .fx-pista { animation: none; width: 100%; justify-content: center; }
  .fx-item:not(:first-child) { display: none; }
}
.fx-link:hover .fx-item, .fx-link:focus-visible .fx-item { text-decoration: underline; text-underline-offset: 3px; }

/* ⚠ O BOTÃO DE MENU DESCE ENQUANTO A FAIXA ESTÁ NA TELA — ver a nota no
   `menu.js`, que põe e tira a classe. 38px é a altura da faixa; se ela mudar,
   muda aqui e no `.fx-faixa`, que são os dois únicos lugares. */
html.com-faixa .mp { top: calc(14px + 38px); }
/* a transição evita o salto quando a faixa sai da tela */
.mp { transition: top .18s ease; }
@media (prefers-reduced-motion: reduce) { .mp { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   O CONVITE PARA A LISTA DE E-MAILS (2026-08-29)
   ═══════════════════════════════════════════════════════════════════════════
   Quando ele aparece, para quem, e por que NÃO promete dia e hora: tudo está
   no `lista.js`. Aqui é só a roupa.

   ⚠ z-index 200 — acima de tudo o que flutua nesta casa (faixa 80, menu 70,
   trilho 60). Diálogo modal que não fica por cima de tudo é um diálogo com um
   pedaço escondido atrás de um botão. */
.lst-fundo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(10, 8, 5, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .lst-fundo { animation: lst-entra .22s ease both; }
}
@keyframes lst-entra { from { opacity: 0; } to { opacity: 1; } }

.lst-caixa {
  position: relative;
  width: min(440px, 100%);
  /* ⚠ ROLA POR DENTRO se a tela for baixa. Sem isto, num celular deitado o
     botão "Quero receber" fica ABAIXO da dobra do próprio pop-up, e não há
     como chegar nele — o formulário existe e é inalcançável. */
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--bg0); color: var(--t1);
  border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  padding: clamp(1.4rem, 4vw, 2rem);
}
.lst-x {
  position: absolute; top: 6px; right: 6px;
  /* ⚠ 44px: o alvo de dedo. Um "x" de 20px é o botão mais tentado e mais
     errado de um pop-up no celular — e errar o X é fechar sem querer a página. */
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--t3);
}
.lst-x:hover, .lst-x:focus-visible { color: var(--t1); }
.lst-selo {
  margin: 0 0 .3rem; font-family: var(--sans); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rubro);
}
.lst-titulo {
  margin: 0 0 .6rem; font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 3.6vw, 25px); line-height: 1.2; color: var(--t1);
}
.lst-corpo {
  margin: 0 0 1.1rem; font-family: var(--serif);
  font-size: clamp(14px, 2.2vw, 16px); line-height: 1.6; color: var(--t2);
}
.lst-form { display: flex; flex-direction: column; gap: .7rem; }
/* o rótulo existe para o leitor de tela; na tela o `placeholder` já diz o que é
   ⚠ e NÃO é `display:none` — isso o esconderia do leitor de tela também. */
.lst-rot {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lst-email {
  width: 100%; box-sizing: border-box;
  /* ⚠ 16px NO CELULAR NÃO É ESCOLHA DE DESENHO: abaixo disso o Safari do iPhone
     dá ZOOM sozinho ao focar o campo, e a página fica torta pelo resto da
     visita. É o mesmo motivo pelo qual os campos do checkout são 16. */
  font-family: var(--sans); font-size: 16px;
  padding: .8rem .9rem; min-height: 46px;
  color: var(--t1); background: var(--input-bg);
  border: 1px solid var(--border2); border-radius: 5px;
}
.lst-email:focus-visible { outline: 2px solid var(--rubro); outline-offset: 1px; background: var(--input-bg-focus); }
.lst-aceite {
  display: flex; gap: .55rem; align-items: flex-start; cursor: pointer;
  font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--t3);
}
.lst-check { margin-top: .15rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--rubro); }
.lst-aceite a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.lst-erro {
  margin: 0; font-family: var(--sans); font-size: 13px; color: #B01010;
}
.lst-ok {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase;
  min-height: 48px; padding: .8rem 1.2rem; cursor: pointer;
  color: #FFF6F4; background: var(--rubro);
  border: 0; border-radius: 5px;
  transition: filter .18s ease;
}
.lst-ok:hover, .lst-ok:focus-visible { filter: brightness(.9); }
.lst-ok:disabled { opacity: .6; cursor: default; }