/**
 * Piclick Sem Filtro — estilos da página /sem-filtro/.
 *
 * Carregado só em is_page('sem-filtro') (inc/enqueue.php). Tudo com prefixo
 * .sf- e ancorado em .sf-body, porque o style.css global do tema também carrega
 * nesta página (o drawer do carrinho depende dele).
 */

/* O @font-face da Frankfurter NÃO fica aqui: ele é impresso por includes/page.php
   somente quando o arquivo existe de verdade em assets/fonts/.
   Declarar uma face cujo arquivo dá 404 quebra a renderização de caracteres
   acentuados — o navegador mantém a família na cadeia e resolve alguns glifos
   (o "Ó" precomposto, por exemplo) num glifo sintetizado, que sai como um
   disco sólido sem contraforma. Medido e reproduzido. */

.sf-body {
  --sf-ink: #150410;
  --sf-ink-2: #1e0817;
  --sf-ink-3: #2a0d21;
  --sf-line: #3d1830;
  --sf-line-2: #532242;
  --sf-cream: #fffdf5;
  /* Contraste medido sobre --sf-ink (#150410). Os valores antigos (#b98fa6 e
     #8e6479) davam 7,1:1 e 4,0:1 — o segundo reprovava, e era justamente o
     usado nos textos de 10 a 12px (rótulos, legendas, ficha). Agora 11,4:1 e
     6,9:1, ambos acima de 4,5:1 com folga. */
  --sf-muted: #d8bccb;
  --sf-muted-2: #b08fa2;
  --sf-plum: #600b2e;
  --sf-plum-ink: #4a0722;
  --sf-pink: #ff6ac1;
  --sf-butter: #ffe169;
  --sf-grad: linear-gradient(100deg, #ff6ac1, #fe88a0, #fdaa80, #fdcb68);
  --sf-display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --sf-body-font: "Nunito", ui-sans-serif, system-ui, sans-serif;

  margin: 0;
  padding: 0;
  background: var(--sf-ink);
  color: var(--sf-cream);
  font-family: var(--sf-body-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* :where() zera a especificidade do escopo, então estes resets valem 0,0,0,1 —
   igual a um seletor de elemento solto. Sem isso, ".sf-body button" (0,0,1,1)
   ganharia de ".sf-spin" (0,0,1,0) e o "color: inherit" pintaria todo botão de
   creme, deixando texto creme sobre fundo creme. */
:where(.sf-body) * { box-sizing: border-box; }
:where(.sf-body) img, :where(.sf-body) svg { display: block; max-width: 100%; }
:where(.sf-body) button { font: inherit; color: inherit; cursor: pointer; }
:where(.sf-body) a { color: inherit; }
/* Menu navegável: a barra é fixa, então uma âncora sem folga deixaria o título
   escondido atrás dela. scroll-margin empurra o alvo para baixo da barra. */
/* O atributo hidden precisa ganhar de qualquer display: nao existe estilo de
   componente que valha mais do que "isso nao deveria estar na tela". O
   [hidden] vem da folha do proprio navegador, que perde para qualquer regra
   nossa; sem esta linha, um display: grid num bloco escondido deixa ele
   visivel o tempo todo (foi o que aconteceu com o formulario do ranking). */
.sf-body [hidden] { display: none !important; }

/* ---------- foco ----------
   A página nunca definiu foco nenhum para botões e links, então cada navegador
   desenhava o dele: o anel azul do Chrome ficava em volta do que a pessoa
   acabou de tocar, azul de sistema no meio do vinho e do amarelo.

   A saída NÃO é apagar o anel. Quem navega por teclado precisa dele para saber
   onde está — sem ele a página fica impossível de usar sem mouse. A saída é
   separar os dois casos, que é o que :focus-visible faz: mouse e dedo não
   recebem anel nenhum, teclado recebe um anel nosso, em amarelo.

   O tap-highlight é o outro pedaço da mesma história: no celular o toque pinta
   um retângulo por cima do que foi tocado, e ele ignora o raio da borda — num
   botão redondo aparece um quadrado. */
.sf-body { -webkit-tap-highlight-color: transparent; }
.sf-body :focus { outline: none; }
.sf-body :focus-visible {
  outline: 2px solid var(--sf-butter);
  outline-offset: 2px;
}

.sf-body { scroll-behavior: smooth; }
.sf-body [id] { scroll-margin-top: 74px; }
@media (prefers-reduced-motion: reduce) { .sf-body { scroll-behavior: auto; } }

/* ---------- identidade ---------- */
/* display: contents faz o <picture> não criar caixa nenhuma: a imagem continua
   sendo filha direta do lockup, e as regras de largura e centralização que já
   existiam seguem valendo sem precisar de uma linha nova para cada lugar. */
.sf-body picture { display: contents; }
.sf-wordmark { width: 100%; height: auto; }
.sf-lockup { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.sf-tape {
  display: inline-block; transform: rotate(-2.4deg); border-radius: 2px;
  background: repeating-linear-gradient(-45deg, var(--sf-butter) 0 9px, var(--sf-plum-ink) 9px 18px);
  padding: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.sf-tape__in {
  display: block; background: var(--sf-butter); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .15em; font-size: 13px; padding: 4px 13px 3px; line-height: 1.35;
}
.sf-tape--sm { padding: 3px; }
.sf-tape--sm .sf-tape__in { font-size: 10.5px; letter-spacing: .13em; padding: 3px 9px 2px; }

.sf-hazard {
  height: 9px;
  background: repeating-linear-gradient(-45deg, var(--sf-butter) 0 16px, var(--sf-plum) 16px 32px);
}

.sf-ticker {
  background: var(--sf-butter); color: var(--sf-plum-ink); overflow: hidden; white-space: nowrap;
  border-top: 3px solid var(--sf-plum-ink); border-bottom: 3px solid var(--sf-plum-ink);
  padding: 7px 0; font-family: var(--sf-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
}
.sf-ticker__track { display: inline-flex; animation: sf-slide 26s linear infinite; }
.sf-ticker__track span { padding-right: 26px; }
@keyframes sf-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* A faixa do meio corre ao contrário: igual à do topo, o olho lê como
   repetição em vez de interrupção. */
@keyframes sf-slide-volta { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.sf-ticker--volta .sf-ticker__track { animation-name: sf-slide-volta; }
.sf-faixa { margin: 8px 0 34px; }

/* Quem pediu menos movimento no sistema não quer duas faixas deslizando. */
@media (prefers-reduced-motion: reduce) {
  .sf-ticker__track { animation: none; }
}

.sf-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sf-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: 11px; color: var(--sf-muted-2);
}
.sf-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-pink); }

/* ---------- menu ---------- */
.sf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1002;
  background: var(--sf-butter); color: var(--sf-plum-ink);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; font-size: 13px;
}
.sf-skip:focus { left: 0; }

.sf-nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(21, 4, 16, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sf-line);
}
.sf-nav__inner {
  max-width: 980px; margin: 0 auto; padding: 5px 16px;
  display: flex; align-items: center; gap: 14px;
}
.sf-nav__brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.sf-nav__brand .sf-wordmark { width: 104px; }
/* Uma linha sempre. Quebrar em duas dobrava a altura da barra fixa, e o ponto
   de quebra era pouco confiável: consulta de mídia mede a janela COM a barra
   de rolagem, então o menu quebrava numas larguras e não noutras. Sem quebra,
   o grupo encolhe e rola na horizontal se faltar espaço. */
.sf-nav__links {
  list-style: none; margin: 0;
  display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  /* A folga vertical não é estética: rolagem horizontal também corta em cima e
     embaixo (pedir overflow-x: auto faz o navegador tratar o outro eixo do
     mesmo jeito), e o "Montar" é mais alto que os links por causa do
     preenchimento e da sombra de 3px. Sem esta margem interna, ele aparece
     decepado. */
  padding: 5px 0;
}
.sf-nav__links::-webkit-scrollbar { display: none; }
.sf-nav__links li { flex: none; }
.sf-nav__links a {
  display: block; padding: 8px 11px; border-radius: 999px; text-decoration: none;
  font-family: var(--sf-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .04em; color: var(--sf-muted); white-space: nowrap;
  transition: background .14s, color .14s;
}
.sf-nav__links a:hover, .sf-nav__links a:focus-visible { background: var(--sf-ink-3); color: var(--sf-cream); }
.sf-nav__back a { color: var(--sf-butter); }

/* "Montar" é a ação principal da página: botão preenchido, não link — e fora da
   lista, porque no celular a lista vira gaveta e ele precisa continuar à vista.
   O margin-left: auto é o que empurra ele e o menu para a direita. */
.sf-nav__cta {
  flex: none; margin-left: auto; display: block; text-decoration: none;
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--sf-grad); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: 12.5px; letter-spacing: .04em;
  box-shadow: 0 3px 0 #b0405f;
  transition: transform .08s, box-shadow .08s, filter .14s;
}
.sf-nav__cta:hover, .sf-nav__cta:focus-visible { color: var(--sf-plum-ink); filter: brightness(1.06); }
.sf-nav__cta:active { transform: translateY(3px); box-shadow: 0 0 0 #b0405f; }
@media (max-width: 560px) { .sf-nav__cta { padding: 8px 14px; } }

.sf-nav__burger {
  display: none; flex: none; width: 40px; height: 40px; padding: 0;
  place-items: center; border-radius: 12px;
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-3); color: var(--sf-cream);
}
.sf-nav__burger svg { width: 20px; height: 20px; }
.sf-nav__burger[aria-expanded="true"] { border-color: var(--sf-butter); color: var(--sf-butter); }
.sf-nav__conta {
  flex: none; display: flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 8px 12px; border-radius: 999px; max-width: 160px;
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-3); color: var(--sf-muted);
  font-family: var(--sf-display); font-weight: 600; font-size: 12.5px;
  transition: border-color .14s, color .14s;
}
.sf-nav__conta:hover, .sf-nav__conta:focus-visible { border-color: var(--sf-butter); color: var(--sf-cream); }
.sf-nav__conta svg { width: 16px; height: 16px; flex: none; }
.sf-nav__conta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Em tela estreita fica só o ícone: o nome pode ser longo e empurra o resto. */
@media (max-width: 620px) {
  .sf-nav__conta { padding: 8px; }
  .sf-nav__conta span { display: none; }
}

.sf-nav__cart {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center; border-radius: 12px;
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-3); color: var(--sf-cream);
  transition: border-color .14s;
}
.sf-nav__cart:hover { border-color: var(--sf-butter); }
.sf-nav__cart svg { width: 19px; height: 19px; }
.sf-nav__count {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--sf-pink); color: var(--sf-plum-ink);
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
}
@media (max-width: 720px) {
  /* "Piclick fofo" sai cedo: é o item menos usado do menu e o que mais ocupa
     espaço. O link continua no rodapé. */
  .sf-nav__back { display: none; }
  .sf-nav__brand .sf-tape { display: none; }

  /* A lista sai da barra e vira gaveta. Rolar de lado num menu de quatro itens
     é o tipo de coisa que ninguém descobre que dá para fazer. */
  .sf-nav__burger { display: grid; }
  .sf-nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: 2px; padding: 8px 12px 12px;
    overflow: visible;
    background: rgba(21, 4, 16, .985);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sf-line);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .45);
  }
  .sf-nav__links.is-open { display: flex; }
  .sf-nav__links a { padding: 13px 12px; font-size: 14.5px; }
}
@media (max-width: 560px) {
  .sf-nav__inner { padding: 8px 12px; gap: 10px; }
  .sf-nav__brand .sf-wordmark { width: 84px; }
  .sf-nav__links a { padding: 7px 8px; font-size: 11.5px; }
}

/* ---------- páginas de texto (regulamento) ---------- */
.sf-body--doc { padding: 34px 22px 60px; }
/* 640px, e nao a largura da pagina: a 680 as linhas passavam de 90 caracteres,
   e linha longa demais faz o olho perder de qual linha estava voltando. */
.sf-doc { max-width: 640px; margin: 0 auto; }
.sf-doc__volta {
  display: inline-block; margin-bottom: 22px; color: var(--sf-butter);
  font-family: var(--sf-display); font-weight: 600; font-size: 13px; text-decoration: none;
}
.sf-doc__volta:hover { text-decoration: underline; }
.sf-doc h1 {
  margin: 0 0 22px; font-family: var(--sf-display); font-weight: 700;
  font-size: clamp(26px, 5vw, 38px); line-height: 1.1; color: var(--sf-cream);
}
.sf-doc__corpo { color: var(--sf-muted); font-size: 15.5px; line-height: 1.7; }
.sf-doc__corpo h2 {
  margin: 30px 0 10px; font-family: var(--sf-display); font-weight: 600;
  font-size: 19px; line-height: 1.25; color: var(--sf-butter);
}
.sf-doc__corpo p { margin: 0 0 14px; }
.sf-doc__corpo strong { color: var(--sf-cream); }
.sf-doc__corpo a { color: var(--sf-butter); }
.sf-doc__corpo ul { margin: 0 0 14px; padding-left: 20px; }
.sf-doc__data { margin-top: 30px; font-size: 12.5px; color: var(--sf-muted-2); }

/* ---------- página /aviso-sem-filtro/ ---------- */
.sf-body--notice { display: grid; place-items: center; min-height: 100vh; padding: 26px 22px; }
.sf-notice { width: 100%; }
.sf-notice__box { max-width: 520px; margin: 0 auto; text-align: center; }
.sf-notice__lockup { margin-bottom: 26px; }
.sf-notice__lockup .sf-wordmark { width: min(300px, 74%); margin: 0 auto; }
.sf-notice__box h1 {
  font-family: var(--sf-display); font-weight: 700;
  font-size: clamp(24px, 6.2vw, 34px); line-height: 1.1; margin: 0 0 14px;
}
.sf-notice__box p { margin: 0 auto 20px; max-width: 420px; color: var(--sf-muted); font-size: 15.5px; line-height: 1.6; }
.sf-notice__list {
  list-style: none; margin: 0 auto 26px; padding: 16px 18px; max-width: 420px; text-align: left;
  border: 1px solid var(--sf-line); border-radius: 14px; background: var(--sf-ink-2);
  color: var(--sf-muted-2); font-size: 13px; line-height: 1.5;
}
.sf-notice__list li { padding-left: 18px; position: relative; }
.sf-notice__list li + li { margin-top: 8px; }
.sf-notice__list li::before { content: "⚠"; position: absolute; left: 0; color: var(--sf-butter); }
.sf-notice__yes {
  display: block; width: 100%; border: 0; border-radius: 999px; padding: 17px;
  background: var(--sf-grad); color: var(--sf-plum-ink); text-decoration: none;
  font-family: var(--sf-display); font-weight: 700; font-size: 16.5px;
  box-shadow: 0 5px 0 #b0405f; transition: transform .08s, box-shadow .08s;
}
.sf-notice__yes:active { transform: translateY(4px); box-shadow: 0 1px 0 #b0405f; }
.sf-notice__no { display: block; margin-top: 15px; color: var(--sf-muted-2); font-size: 14px; text-decoration: none; }
.sf-notice__no:hover { text-decoration: underline; }

/* ---------- topo ---------- */
.sf-top { padding: 26px 20px 4px; text-align: center; }
.sf-top__lockup { margin-bottom: 24px; }
.sf-top__lockup .sf-wordmark { width: min(400px, 82%); margin: 0 auto; }
.sf-top h1 {
  font-family: var(--sf-display); font-weight: 700;
  font-size: clamp(30px, 7.8vw, 56px); line-height: 1.03; margin: 14px 0; letter-spacing: -.01em;
}
.sf-top h1 em {
  font-style: normal; background: var(--sf-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-top p { margin: 0 auto; max-width: 520px; color: var(--sf-muted); font-size: clamp(14.5px, 3.6vw, 17.5px); line-height: 1.6; }
/* Chamada principal, no topo e no fecho. Mesmo peso do botão de comprar, de
   propósito: os três levam ao mesmo lugar, e um deles menor pareceria um botão
   secundário — que é o oposto do que ele é. */
.sf-cta {
  display: inline-block; margin-top: 26px; padding: 15px 30px;
  border: 0; border-radius: 999px;
  background: var(--sf-grad);
  font-family: var(--sf-display); font-weight: 700; font-size: clamp(15.5px, 4.2vw, 18px);
  text-decoration: none; box-shadow: 0 5px 0 #b0405f;
  transition: transform .08s, box-shadow .08s;
}

/* A cor do texto precisa do .sf-body na frente. O tema pinta todo link com
   "a:hover, a:focus { color: var(--pc-pink) }", que é mais específico que
   .sf-cta sozinho: ao passar o mouse o rótulo virava rosa em cima de um
   gradiente rosa e sumia — e continuava rosa depois do clique, por causa do
   :focus. Cada estado está repetido de propósito: basta faltar um para o tema
   assumir de novo naquele estado. */
.sf-body .sf-cta,
.sf-body .sf-cta:link,
.sf-body .sf-cta:visited,
.sf-body .sf-cta:hover,
.sf-body .sf-cta:focus,
.sf-body .sf-cta:focus-visible,
.sf-body .sf-cta:active { color: var(--sf-plum-ink); }

/* O aviso de mouse em cima passa a ser o botão subir, e não clarear: o
   brightness clareava o texto junto, que era a outra metade do problema. */
.sf-body .sf-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b0405f; }
.sf-body .sf-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #b0405f; }

/* .sf-top p também ganha de .sf-cta__nota, e mandava a linha do preço para
   17,5px — quase o corpo do rótulo do botão, o que desequilibrava o bloco. */
.sf-body .sf-cta__nota {
  margin: 12px auto 0; max-width: 34ch;
  font-size: 12.5px; line-height: 1.5; color: var(--sf-muted);
}
.sf-fecho { text-align: center; }
/* Para seções alinhadas à esquerda que terminam numa chamada: o bloco do botão
   ganha o próprio centro sem arrastar o texto da seção junto. */
.sf-acao { text-align: center; }
/* As chamadas do meio ficam ENTRE seções, então precisam do próprio respiro —
   e de menos do que uma seção inteira, senão viram uma parada em vez de uma
   saída de emergência para quem já decidiu. */
.sf-acao--meio { max-width: 760px; margin: 0 auto; padding: 4px 20px 34px; }
.sf-acao--meio .sf-cta { margin-top: 0; }

/* ---------- barra fixa do celular ---------- */
.sf-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(26, 4, 19, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--sf-line-2);
}
/* No desktop o botão de comprar quase nunca sai da tela, e a barra só roubaria
   espaço. É recurso de celular. */
@media (min-width: 721px) { .sf-barra { display: none; } }
.sf-barra__preco {
  flex: 1; min-width: 0;
  font-family: var(--sf-display); font-weight: 600; font-size: 13px; color: var(--sf-cream);
}
.sf-barra__cta {
  flex: none; padding: 12px 20px; border-radius: 999px;
  background: var(--sf-grad); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 0 #b0405f;
}
.sf-body .sf-barra__cta:hover, .sf-body .sf-barra__cta:focus { color: var(--sf-plum-ink); }
.sf-barra__cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #b0405f; }

/* Recorte 4:5: a foto que vem do celular é retrato e, inteira, empurraria o
   configurador para fora da primeira tela. */
/* Três fotos à vista, a do MEIO em destaque.

   A caixa das três é IGUAL de propósito: o giro anima um deslocamento de um
   passo, e passo só é uma medida só quando todos os cartões ocupam o mesmo.
   O destaque então vem de transform: scale(), que cresce sem mexer no layout —
   largura maior mexeria, e o passo deixaria de fechar.

   Crescer pede espaço para crescer: o vão entre os cartões e o respiro em cima
   e embaixo da janela existem para a foto do meio ter para onde ir sem encostar
   nas vizinhas nem ser cortada pelo recorte. */
.sf-top__fotos { position: relative; margin: 22px auto 0; width: min(760px, 100%); }
.sf-top__janela { overflow: hidden; margin: 0 50px; padding: 22px 0; }
.sf-top__fotos-lista {
  display: flex; gap: 18px; margin: 0; padding: 0; list-style: none;
  align-items: center;
  /* Vertical é da página, horizontal é do carrossel. É esta linha que faz o
     arrastar existir no telefone: sem ela o navegador entende qualquer
     movimento como rolagem e cancela o gesto antes de ele virar nada. */
  touch-action: pan-y;
}
.sf-top__fotos-lista.is-arrastando { cursor: grabbing; }
/* Arrastar a foto para fora da página é o que o navegador faz de graça com
   uma imagem, e aqui atrapalha o gesto. */
.sf-top__fotos-lista img { user-select: none; -webkit-user-drag: none; }
.sf-top__fotos-lista li {
  position: relative;
  flex: 0 0 calc((100% - 36px) / 3);
  transition: transform .3s ease;
}
/* As vizinhas ficam inteiras, e não apagadas: escurecer as outras é destacar
   por subtração, e a foto do lado também é a peça que a pessoa veio ver. */
.sf-top__fotos-lista li.is-destaque { transform: scale(1.11); z-index: 1; }
.sf-top__fotos-lista img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1.5px solid var(--sf-line-2); border-radius: 18px;
  transition: border-color .3s, box-shadow .3s;
}
.sf-top__fotos-lista li.is-destaque img {
  border-color: var(--sf-butter);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}

/* Uma foto só: sem janela apertada, sem setas, sem ponto. */
.sf-top__fotos:not(.is-carrossel) .sf-top__janela { margin: 0; padding: 0; }
.sf-top__fotos:not(.is-carrossel) .sf-top__fotos-lista li {
  flex: 0 0 min(300px, 76vw); margin: 0 auto; transform: none;
}

.sf-top__seta {
  position: absolute; top: calc(50% - 19px); z-index: 2;
  width: 38px; height: 38px; padding: 9px; border-radius: 50%;
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-2); color: var(--sf-cream);
  cursor: pointer;
}
.sf-top__seta svg { display: block; width: 100%; height: 100%; }
.sf-top__seta--prev { left: 0; }
.sf-top__seta--next { right: 0; }
.sf-top__seta:hover { border-color: var(--sf-butter); }

/* No celular a seta de 38px ao lado de um cartão de 100px come um terço da
   largura útil. Fica o arrastar do dedo, com os pontos avisando quantas há.
 *
 * E o cartão cresce: três lado a lado numa tela de 375px davam 113px cada, um
 * selo em vez de uma foto. Aqui o do meio ocupa dois terços e as vizinhas
 * aparecem de canto, dizendo que há mais para o lado — que é justamente o que
 * convida a arrastar.
 *
 * A margem negativa é a conta de centralizar: a foto em destaque é o SEGUNDO
 * cartão da fila, e com três de um terço cada ela caía no meio sozinha. Com
 * dois terços é preciso puxar a fila de volta em (100% - 66%) / 2 - 66% - vão. */
@media (max-width: 620px) {
  .sf-top__seta { display: none; }
  .sf-top__janela { margin: 0; }
  /* left, e não margin: margem negativa ALARGA a lista, e aí o 66% dos
     cartões passa a ser de um número maior — os três viram um só ocupando a
     tela inteira. O deslocamento relativo não mexe na largura de ninguém. */
  .sf-top__fotos-lista { gap: 12px; position: relative; left: calc(-49% - 12px); }
  .sf-top__fotos-lista li { flex: 0 0 66%; }
}

.sf-top__pontos { position: relative; display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.sf-top__pontos button {
  position: relative;
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sf-line-2); cursor: pointer; transition: background .15s, transform .15s;
}
.sf-top__pontos button.is-atual { background: var(--sf-butter); transform: scale(1.25); }
/* Alvo de toque maior que a bolinha: 8px é confortável de ver e impossível de
   acertar com o dedo. */
.sf-top__pontos button::before {
  content: ""; position: absolute; width: 30px; height: 30px;
  transform: translate(-11px, -11px);
}

.sf-top__foto-legenda { margin: 8px 0 0; font-size: 11.5px; color: var(--sf-muted); }
.sf-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.sf-tag {
  font-family: var(--sf-display); font-weight: 600; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sf-butter); border: 1px solid rgba(255, 225, 105, .35);
  padding: 6px 11px; border-radius: 999px;
}

/* ---------- seções ---------- */
.sf-section { max-width: 760px; margin: 0 auto; padding: 42px 20px; }
.sf-section--tight { padding-bottom: 12px; }
.sf-section h2, .sf-sound h2 {
  font-family: var(--sf-display); font-weight: 700;
  font-size: clamp(23px, 6vw, 36px); margin: 12px 0; line-height: 1.05; letter-spacing: -.01em;
}
.sf-section h2 em, .sf-sound h2 em { font-style: normal; color: var(--sf-butter); }
.sf-lead { margin: 0 0 22px; color: var(--sf-muted); font-size: 15px; line-height: 1.6; max-width: 520px; }
.sf-foot-note { margin: 16px 0 0; font-size: 11.5px; color: var(--sf-muted-2); font-style: italic; }

/* ---------- painel da máquina ---------- */
.sf-panel {
  margin: 6px auto 0; width: 100%; max-width: 600px;
  background: var(--sf-ink-2); border-radius: 26px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.sf-panel__inner { padding: 18px 14px 22px; }
.sf-machine__labels {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--sf-display); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: 10.5px; color: var(--sf-muted-2); margin-bottom: 12px;
}
.sf-machine__labels b { display: block; color: var(--sf-muted); font-weight: 600; font-size: 11.5px; letter-spacing: .06em; }
.sf-machine__labels div:last-child { text-align: right; }

.sf-machine__stage { position: relative; display: grid; grid-template-columns: 42px 1fr 42px; gap: 7px; align-items: center; }
.sf-arrows { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sf-arrows span {
  font-family: var(--sf-display); font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
  color: var(--sf-muted-2); writing-mode: vertical-rl; text-orientation: mixed; margin: 2px 0;
}
.sf-arrow {
  width: 40px; height: 40px; border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-3); color: var(--sf-cream);
  display: grid; place-items: center; border-radius: 10px; padding: 0; transition: background .12s, border-color .12s;
}
.sf-arrow:hover { background: #3a1428; border-color: #6d3149; }
.sf-arrow svg { width: 16px; height: 16px; }

.sf-window {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: #0f040b; border-radius: 18px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--sf-line), inset 0 22px 40px rgba(0, 0, 0, .75), inset 0 -22px 40px rgba(0, 0, 0, .75);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.sf-reel { position: absolute; inset: 0; overflow: hidden; }
.sf-reel__strip { will-change: transform; }
.sf-reel__item { width: 100%; aspect-ratio: 1 / 1; }
/* O protótipo tinha aqui um .sf-housing: um disco preto de 64% simulando o
   rebaixo da máquina. Saiu — a chapa nova já traz os dois anéis do Figma
   desenhados no SVG, e o disco os cobria por inteiro. */
.sf-reel--btn {
  position: absolute; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 55.42%; height: 55.42%; border-radius: 50%;
  transition: transform .1s ease; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
}
.sf-reel--btn.is-pressed { transform: translate(-50%, -50%) scale(.955); }
.sf-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 74%, rgba(0, 0, 0, .3));
}
.sf-hit { position: absolute; touch-action: none; }
.sf-hit--plate { inset: 0; cursor: grab; }
.sf-hit--btn {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 55.42%; height: 55.42%; border-radius: 50%; cursor: grab;
}
.sf-hit.is-dragging { cursor: grabbing; }

.sf-combo { margin: 16px 0 0; text-align: center; }
.sf-combo__line {
  font-family: var(--sf-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(14px, 4vw, 18px); line-height: 1.35; margin: 0;
}
.sf-combo__line b { color: var(--sf-butter); font-weight: 600; white-space: nowrap; }
.sf-combo__line i { font-style: normal; color: #ff8a8a; font-weight: 600; white-space: nowrap; }
.sf-combo__hint { margin: 9px 0 0; font-size: 12px; color: var(--sf-muted-2); }

.sf-combo__cliques { margin: 7px 0 0; font-size: 12px; color: var(--sf-muted); }
.sf-combo__cliques b { font-family: var(--sf-display); font-weight: 700; color: var(--sf-butter); }
.sf-combo__cliques a { color: var(--sf-muted); text-decoration: underline; text-underline-offset: 2px; }
.sf-controls { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.sf-spin {
  width: 100%; border: 0; border-radius: 999px; padding: 16px;
  background: var(--sf-cream); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: clamp(15px, 4.2vw, 17.5px);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 5px 0 #9c8a86; transition: transform .08s, box-shadow .08s;
}
.sf-spin:active { transform: translateY(4px); box-shadow: 0 1px 0 #9c8a86; }
.sf-spin[disabled] { opacity: .6; }
.sf-spin__after { margin: -4px 0 0; text-align: center; font-size: 11.5px; color: var(--sf-muted-2); min-height: 16px; }
.sf-filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sf-chip {
  background: var(--sf-ink-3); border: 1.5px solid var(--sf-line-2); color: var(--sf-muted);
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; transition: all .14s;
}
.sf-chip[aria-pressed="true"] { background: var(--sf-cream); color: var(--sf-plum-ink); border-color: var(--sf-cream); }

/* ---------- compra, dentro do cartão do configurador ---------- */
/* Um fio, e não uma tarja: a divisão precisa existir para a página não virar
   parede, mas quem acabou de escolher a frase está a um passo de comprar, e
   esse passo não pode custar uma rolagem. */
.sf-compra { border-top: 1px solid var(--sf-line); }
.sf-compra__titulo {
  margin: 0; padding: 16px 17px 4px;
  font-family: var(--sf-display); font-weight: 600; font-size: 15px;
  color: var(--sf-cream);
}

.sf-tiers { display: grid; gap: 9px; padding: 14px; }
.sf-tier {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--sf-ink-3); border: 2px solid var(--sf-line); border-radius: 16px; padding: 13px 14px;
  transition: border-color .15s, background .15s;
}
.sf-tier:hover { border-color: var(--sf-line-2); }
.sf-tier[aria-pressed="true"] { border-color: var(--sf-butter); }
.sf-tier__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sf-line-2); flex: none; display: grid; place-items: center; }
.sf-tier[aria-pressed="true"] .sf-tier__radio { border-color: var(--sf-butter); }
.sf-tier[aria-pressed="true"] .sf-tier__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-butter); }
.sf-tier__main { flex: 1; min-width: 0; }
.sf-tier__name { font-family: var(--sf-display); font-weight: 600; font-size: 14.5px; display: block; }
.sf-tier__sub { font-size: 12px; color: var(--sf-muted-2); }
.sf-tier__price { text-align: right; flex: none; }
.sf-tier__price b { font-family: var(--sf-display); font-weight: 700; font-size: 16px; display: block; }
.sf-tier__save { font-size: 11px; color: var(--sf-butter); font-weight: 700; }
.sf-tier__tag {
  position: absolute; top: -8px; right: 12px; background: var(--sf-grad); color: var(--sf-plum-ink);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}

/* A regra do frete mora colada nos combos, logo abaixo da etiqueta que a
   promete. Cor apagada de propósito: é a letra miúda fazendo o trabalho dela,
   à vista mas sem competir com o preço. */
.sf-tiers__frete {
  margin: -3px 0 0; padding: 0 16px 12px;
  font-size: 11.5px; line-height: 1.5; color: var(--sf-muted-2);
}

/* O recado do clique nasce escondido e some para sempre depois de aparecer:
   é achado, não aviso. */
.sf-combo__recado {
  margin: 6px 0 0; font-family: var(--sf-display); font-weight: 600; font-size: 12.5px;
  color: var(--sf-butter);
}

/* ---------- a peça por dentro ---------- */
.sf-3d {
  position: relative; margin-top: 6px;
  border: 1px solid var(--sf-line); border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2a0b22 0%, var(--sf-ink-2) 70%);
}
/* Altura fixa em vh: o palco precisa existir ANTES de o modelo chegar, senão a
   página pula quando ele entra. */
.sf-3d__palco { position: relative; height: min(58vh, 460px); }
/* pan-y, e não none.
 *
 * Com "none" o canvas dizia ao navegador "eu cuido de todo gesto" — e num
 * visor que ocupa meia tela de celular isso quer dizer que descer a página com
 * o dedo em cima da peça girava a peça em vez de rolar. A pessoa ficava presa.
 *
 * Assim o movimento vertical é da página e o horizontal é da peça. E como quem
 * decide é o navegador no INÍCIO do gesto, um arrasto que começou de lado
 * continua nosso mesmo quando a mão sobe ou desce — a inclinação não se perde,
 * só deixa de ser o jeito de começar. */
.sf-3d__tela { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.sf-3d__tela:active { cursor: grabbing; }

.sf-3d__convite {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px;
  text-align: center; padding: 20px;
}
.sf-3d__convite p {
  margin: 0; font-family: var(--sf-display); font-weight: 600; font-size: 16px;
  color: var(--sf-cream);
}
.sf-3d__convite small { font-size: 11.5px; color: var(--sf-muted-2); }
.sf-3d__abrir {
  justify-self: center; padding: 13px 26px; border: 0; border-radius: 999px;
  background: var(--sf-grad); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: 15px;
  box-shadow: 0 5px 0 #b0405f;
}
.sf-3d__abrir:active { transform: translateY(3px); box-shadow: 0 2px 0 #b0405f; }
.sf-3d__abrir[disabled] { opacity: .7; cursor: progress; }
.sf-3d.is-carregando .sf-3d__convite p { opacity: .5; }

/* Palco mais alto: explodida, a peça ocupa quase o dobro da altura, e o que
   sobrava era um modelo minúsculo no meio de um retângulo vazio. */
.sf-3d__palco { height: min(64vh, 520px); }

.sf-3d__controles {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 10px 14px; border-top: 1px solid var(--sf-line);
}
.sf-3d__botao {
  padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-2); color: var(--sf-cream);
  font-family: var(--sf-display); font-weight: 700; font-size: 12.5px;
}
.sf-3d__botao:hover { border-color: var(--sf-butter); color: var(--sf-butter); }
/* O botão do estado atual fica marcado: sem isso, dois botões iguais lado a
   lado não dizem em qual dos dois estados a peça está. */
.sf-3d__botao[aria-pressed="true"] {
  border-color: var(--sf-butter); background: var(--sf-butter); color: var(--sf-plum-ink);
}
.sf-3d__dica { font-size: 11.5px; color: var(--sf-muted-2); }
/* A instrução muda com o aparelho porque o gesto mudou: no dedo, girar é de
   lado (subir e descer é rolar a página) e aproximar é com dois dedos. */
.sf-3d__dica--dedo { display: none; }
@media (pointer: coarse) {
  .sf-3d__dica--mouse { display: none; }
  .sf-3d__dica--dedo { display: inline; }
}
.sf-3d.is-girando .sf-3d__tela { cursor: grabbing; }

/* A lista das peças só existe depois que o modelo abre — antes, ela seria uma
   legenda para uma figura que não está lá. */
.sf-3d__pecas { display: none; }
.sf-3d.is-pronto .sf-3d__pecas {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin: 0; padding: 10px 14px 14px; list-style: none;
  border-top: 1px solid var(--sf-line);
  font-size: 11.5px; color: var(--sf-muted-2);
}
.sf-3d.is-pronto .sf-3d__pecas li::before { content: "· "; color: var(--sf-butter); }

/* ---------- presente ---------- */
.sf-presentes { display: grid; gap: 12px; margin-bottom: 26px; }
@media (min-width: 760px) { .sf-presentes { grid-template-columns: repeat(3, 1fr); } }
.sf-presente {
  background: var(--sf-ink-3); border: 1px solid var(--sf-line); border-radius: 16px;
  padding: 16px 16px 18px; text-align: left;
}
/* A peça é a única coisa colorida da seção, e é ela que a tira do meio de
   quatro grades de cartão de texto seguidas. Mesma montagem do slot do combo:
   a chapa ocupa a caixa e o botão fica por cima, no centro. */
.sf-presente__peca { position: relative; width: 74px; aspect-ratio: 1 / 1; margin-bottom: 12px; }
.sf-presente__chapa { position: absolute; inset: 0; }
.sf-presente__botao {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 55.42%;
}
.sf-presente h3 {
  margin: 0 0 6px; font-family: var(--sf-display); font-weight: 600; font-size: 15px;
  color: var(--sf-butter);
}
.sf-presente p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sf-muted); }

/* ---------- slots do combo ---------- */
/* O título existe porque a lista não se apresentava: ela começava direto num
   cartão, e "Quero escolher" só vira convite depois que a pessoa repara nele. */
.sf-slots__titulo { padding: 4px 14px 8px; }
.sf-slots__titulo b {
  display: block; font-family: var(--sf-display); font-weight: 600; font-size: 13.5px;
  color: var(--sf-cream);
}
.sf-slots__titulo span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--sf-muted-2); line-height: 1.45; }

.sf-slots { display: grid; gap: 9px; padding: 0 14px 14px; }
.sf-slot { background: var(--sf-ink-3); border: 1px dashed var(--sf-line-2); border-radius: 14px; padding: 10px 12px; }
.sf-slot__row { display: flex; align-items: center; gap: 12px; }
.sf-slot__unit { position: relative; width: 54px; flex: none; aspect-ratio: 1 / 1; }
.sf-slot__plate { position: absolute; inset: 0; }
.sf-slot__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 55.42%; }
.sf-slot__txt { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; }
.sf-slot__txt b {
  display: block; font-family: var(--sf-display); font-weight: 600; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted-2); margin-bottom: 3px;
}
.sf-slot__txt span { color: var(--sf-butter); font-weight: 700; }
.sf-slot__txt i { font-style: normal; color: #ff8a8a; font-weight: 700; }
.sf-slot__actions { flex: none; display: flex; flex-direction: column; gap: 5px; }
.sf-slot__roll, .sf-slot__choose {
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-2); color: var(--sf-cream);
  border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* Dos dois, "Quero escolher" é o que a pessoa não sabia que podia — então é
   ele que fica marcado. "Sortear" já está sendo feito sozinho o tempo todo. */
.sf-slot__choose { border-color: var(--sf-butter); color: var(--sf-butter); }
.sf-slot__roll:hover, .sf-slot__choose:hover { border-color: var(--sf-butter); color: var(--sf-butter); }
.sf-slot__choose:hover { background: var(--sf-butter); color: var(--sf-plum-ink); }
.sf-slot__picker { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sf-line); }
.sf-slot__picker label { display: grid; gap: 4px; }
.sf-slot__picker span {
  font-family: var(--sf-display); font-weight: 600; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted-2);
}
.sf-slot__picker select {
  width: 100%; background: var(--sf-ink-2); color: var(--sf-cream);
  border: 1.5px solid var(--sf-line-2); border-radius: 10px; padding: 8px 10px; font-size: 13px;
}
@media (min-width: 560px) { .sf-slot__picker { grid-template-columns: 1fr 1fr; } }

.sf-buy { padding: 2px 17px 20px; text-align: center; }
/* O aviso da semana. Discreto enquanto sobra lugar, e só então acende: aviso
   que grita desde a segunda-feira ninguém lê na quinta. */
.sf-vagas {
  margin: 0 0 10px; padding: 7px 12px; border-radius: 999px;
  display: inline-block;
  background: var(--sf-ink-3); border: 1px dashed var(--sf-line-2);
  font-size: 12px; font-weight: 600; color: var(--sf-muted);
}
.sf-vagas.is-apertado { border-style: solid; border-color: var(--sf-butter); color: var(--sf-butter); }
/* O contador de gente fica abaixo da fila e mais apagado: são dois recados na
   mesma altura, e dois avisos com o mesmo peso viram um borrão. */
.sf-olhando {
  margin: -4px 0 10px; font-size: 11.5px; font-weight: 600; color: var(--sf-muted-2);
}
/* O emoji não herda a cor do texto, e é de propósito: nas duas linhas ele é a
   única mancha colorida, e é ela que faz o olho parar antes de ler. */
.sf-aviso__icone {
  margin-right: 5px; font-style: normal; font-size: 1.15em; line-height: 1;
  vertical-align: -.06em;
}
.sf-vagas.is-esgotado { border-style: solid; border-color: var(--sf-line-2); color: var(--sf-muted-2); }

.sf-buy__price { font-family: var(--sf-display); font-weight: 700; font-size: clamp(30px, 8vw, 42px); line-height: 1; margin-top: 4px; }
/* Menores e um pouco acima, como preço de vitrine. Só aqui: nos cartões dos
   combos o preço já é pequeno, e encolher os centavos ali viraria ruído. */
.sf-buy__price .sf-buy__cent { font-size: .58em; vertical-align: .42em; }
.sf-buy__price small { display: block; margin-top: 7px; font-family: var(--sf-body-font); font-weight: 600; font-size: .34em; color: var(--sf-muted); }
/* Esta linha é benefício, não ressalva: sai do cinza das parcelas. */
.sf-buy__price small.is-frete { margin-top: 4px; color: var(--sf-butter); font-weight: 700; }
.sf-buy__cta {
  margin-top: 15px; width: 100%; border: 0; border-radius: 999px; padding: 18px;
  background: var(--sf-grad); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: clamp(15.5px, 4.2vw, 18px);
  box-shadow: 0 5px 0 #b0405f; transition: transform .08s, box-shadow .08s;
}
.sf-buy__cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #b0405f; }
.sf-buy__cta[disabled] { opacity: .65; cursor: progress; }
.sf-buy__msg { margin: 10px 0 0; min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--sf-butter); }
.sf-buy__msg.is-error { color: #ff8a8a; }
.sf-buy__note { margin: 8px 0 0; font-size: 11.5px; color: var(--sf-muted-2); line-height: 1.5; }

/* ---------- demo de som ---------- */
.sf-sound { max-width: 600px; margin: 0 auto; padding: 26px 20px 34px; text-align: center; }
.sf-sound__lead { margin: 0; color: var(--sf-muted); font-size: 14.5px; }
.sf-sound__btn {
  position: relative; width: min(230px, 62vw); aspect-ratio: 1 / 1; margin: 20px auto 0;
  border: 0; border-radius: 50%; padding: 0; background: transparent;
}
.sf-sound__cap {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 30%, #ff4646, #e0141c 58%, #a80d13);
  box-shadow: 0 12px 0 #7d090e, 0 16px 26px rgba(0, 0, 0, .55);
  /* Flex, e não grid: em grid as duas linhas viravam duas faixas que esticavam
     para metade do disco cada uma, e o texto acabava colado no topo e na base
     em vez de junto no meio. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sf-display); font-weight: 700; color: #fff;
  /* Duas medidas: a chamada em cima, a piada embaixo. "DESNECESSÁRIO" tem
     treze letras e no mesmo corpo da primeira linha encostaria na borda do
     disco. */
  line-height: .98; letter-spacing: .01em;
  font-size: clamp(20px, 6vw, 27px);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .07s, box-shadow .07s;
}
.sf-sound__cap b { display: block; }
.sf-sound__cap em { display: block; font-style: normal; font-size: .62em; letter-spacing: .04em; margin-top: 1px; }
/* O traço precisa ser visto para a piada existir: risco fino demais some no
   vermelho. */
.sf-sound__cap s { text-decoration-thickness: 2px; opacity: .85; }
.sf-sound__btn:active .sf-sound__cap,
.sf-sound__btn.is-on .sf-sound__cap { transform: translateY(9px); box-shadow: 0 3px 0 #7d090e, 0 6px 12px rgba(0, 0, 0, .5); }
.sf-sound__count {
  margin: 26px 0 0; font-family: var(--sf-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--sf-muted-2);
}
.sf-sound__count b { color: var(--sf-butter); font-size: 15px; letter-spacing: 0; }

/* ---------- espera do configurador ---------- */
.sf-carregando {
  position: absolute; inset: 0; z-index: 2; display: flex; gap: 10px;
  align-items: center; justify-content: center; padding: 12px;
}
.sf-carregando span {
  flex: 1; max-width: 190px; height: 62%; border-radius: 16px;
  background: linear-gradient(100deg, var(--sf-ink-3) 30%, var(--sf-line-2) 50%, var(--sf-ink-3) 70%);
  background-size: 260% 100%;
  animation: sf-brilho 1.25s linear infinite;
}
@keyframes sf-brilho { from { background-position: 160% 0; } to { background-position: -60% 0; } }
/* Quem pediu menos movimento não precisa de brilho correndo: o bloco parado
   já diz "está vindo". */
@media (prefers-reduced-motion: reduce) {
  .sf-carregando span { animation: none; }
}

/* ---------- ranking de cliques ---------- */
.sf-ranking {
  max-width: 420px; margin: 30px auto 0; padding: 18px 18px 16px; text-align: left;
  background: var(--sf-ink-2); border: 1px solid var(--sf-line); border-radius: 18px;
}
.sf-ranking__kicker {
  display: block; margin: 0 0 3px; text-align: center;
  font-family: var(--sf-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: 10px; color: var(--sf-muted-2);
}
.sf-ranking__premio {
  margin: 0 0 12px; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--sf-muted);
}
.sf-ranking__premio b { color: var(--sf-butter); }
.sf-ranking__titulo {
  margin: 0 0 8px; text-align: center; text-transform: capitalize;
  font-family: var(--sf-display); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; color: var(--sf-butter);
}
.sf-ranking__lista { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sf-ranking__lista li {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-bottom: 1px solid var(--sf-line); font-size: 13.5px;
}
.sf-ranking__lista li:last-child { border-bottom: 0; }
.sf-ranking__foto {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sf-ink-3); object-fit: cover;
}
.sf-ranking__pos {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sf-ink-3); color: var(--sf-muted-2);
  font-family: var(--sf-display); font-weight: 700; font-size: 11px;
}
/* Primeiro lugar em destaque: é o que faz a disputa valer a pena. */
.sf-ranking__lista li:first-child .sf-ranking__pos { background: var(--sf-butter); color: var(--sf-plum-ink); }
.sf-ranking__quem { flex: 1; min-width: 0; }
.sf-ranking__nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-ranking__lugar {
  display: block; font-size: 11px; color: var(--sf-muted-2); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-delta {
  flex: none; font-family: var(--sf-display); font-weight: 700; font-size: 11px;
  padding: 2px 6px; border-radius: 999px; line-height: 1.5;
}
.sf-delta.is-sobe { color: #74e0a8; background: rgba(116, 224, 168, .12); }
.sf-delta.is-desce { color: #ff9a9a; background: rgba(255, 154, 154, .12); }
/* Discreto de propósito: numa lista de 200 nomes, o traço é o estado da
   maioria e não pode competir com as flechas de quem se mexeu. */
/* Sublinhado, e não só cor: link que se distingue por cor sozinha some para
   quem não separa bem as duas. */
.sf-foto-convite {
  display: inline-block; margin-top: 6px; font-size: 13px;
  color: var(--sf-butter); text-decoration: underline; text-underline-offset: 2px;
}
.sf-delta.is-igual { color: var(--sf-muted); background: none; padding-inline: 2px; }
.sf-delta.is-novo {
  color: var(--sf-plum-ink); background: var(--sf-butter);
  text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px;
}

.sf-ranking__n {
  flex: none; font-family: var(--sf-display); font-weight: 700;
  font-size: 14px; color: var(--sf-butter); font-variant-numeric: tabular-nums;
}
/* O bloco de espera ocupa o lugar do cupom, e com o mesmo peso: é a mesma
   notícia em outro estado, não um aviso de erro. O amarelo fica para o que
   ainda vai acontecer; o vermelho, só para o envio que falhou. */
/* Os campos opcionais, fechados.
 *
 * A primeira versão era uma caixa tracejada com um "+" pequeno no canto, e
 * passou despercebida: tracejado lê-se como "espaço vazio", e sinal sozinho no
 * canto não lê como botão. Agora a caixa é sólida, com borda cheia, e o que
 * abre é uma pílula com a PALAVRA escrita. Ninguém precisa adivinhar. */
.sf-ranking__extras {
  margin: 0 0 12px; border: 1px solid var(--sf-line-2); border-radius: 14px;
  background: var(--sf-ink-3); overflow: hidden;
  transition: border-color .15s;
}
.sf-ranking__extras[open] { border-color: var(--sf-butter); }
.sf-ranking__extras > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; cursor: pointer; list-style: none;
}
/* O marcador do Safari vem por um pseudo-elemento próprio. */
.sf-ranking__extras > summary::-webkit-details-marker { display: none; }
.sf-ranking__extras > summary::marker { content: ''; }
.sf-ranking__extras > summary:hover .sf-ranking__extras-chip,
.sf-ranking__extras > summary:focus-visible .sf-ranking__extras-chip {
  border-color: var(--sf-butter); color: var(--sf-plum-ink); background: var(--sf-butter);
}
.sf-ranking__extras-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sf-ranking__extras-titulo {
  font-family: var(--sf-display); font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted-2);
}
/* O motivo de abrir, em cor de destaque: é ele que paga o clique. */
.sf-ranking__extras-nota { font-size: 12.5px; line-height: 1.4; color: var(--sf-butter); }

.sf-ranking__extras-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--sf-line-2); background: var(--sf-ink-2); color: var(--sf-cream);
  font-family: var(--sf-display); font-weight: 600; font-size: 11.5px;
  transition: background .15s, color .15s, border-color .15s;
}
.sf-ranking__extras-fechar { display: none; }
.sf-ranking__extras[open] .sf-ranking__extras-abrir { display: none; }
.sf-ranking__extras[open] .sf-ranking__extras-fechar { display: inline; }

/* Seta desenhada com borda: não depende de fonte de ícone nem de arquivo, e
   por isso não tem como chegar quadrada na tela de ninguém. */
.sf-ranking__extras-seta {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.sf-ranking__extras[open] .sf-ranking__extras-seta { transform: translateY(1px) rotate(-135deg); }

/* Só recuo: sem mexer no display. O label do formulário é grid com gap, e
   trocar para block matava esse gap — o rótulo do Instagram encostava no texto
   de ajuda do CEP. */
.sf-ranking__extras > label { padding: 0 14px 12px; }
.sf-ranking__extras > label:last-child { padding-bottom: 15px; }

.sf-pendente {
  display: block; margin-top: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 225, 105, .07); border: 1px dashed var(--sf-line-2);
  font-size: 12.5px; line-height: 1.5; color: var(--sf-muted);
}
.sf-pendente.is-erro {
  background: rgba(255, 154, 154, .08); border-color: rgba(255, 154, 154, .35);
}
.sf-pendente small { display: block; margin-top: 4px; font-size: 11px; color: var(--sf-muted-2); }
.sf-reenviar {
  display: inline-block; margin: 6px 0 0; padding: 5px 10px; border-radius: 999px;
  background: none; border: 1px solid var(--sf-line-2); color: var(--sf-butter);
  font-family: var(--sf-display); font-weight: 600; font-size: 11.5px; cursor: pointer;
}
.sf-reenviar:hover:not(:disabled) { border-color: var(--sf-butter); }
/* Desligado é desligado, e tem de parecer: o servidor só aceita um reenvio a
   cada minuto e meio, e botão que parece clicável e responde "espere" irrita
   mais do que botão apagado. */
.sf-reenviar:disabled { opacity: .55; cursor: default; }

/* O recado que substitui a caixa de aceite quando o formulário é reaberto. */
.sf-ranking__aceite-velho {
  margin: 0 0 4px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 225, 105, .06); border: 1px dashed var(--sf-line-2);
  font-size: 12px; line-height: 1.45; color: var(--sf-muted);
}

.sf-ranking__tudo {
  display: block; width: 100%; margin-top: 6px; padding: 8px;
  background: none; border: 0; color: var(--sf-muted-2);
  font-family: var(--sf-display); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .12em;
}
.sf-ranking__tudo:hover { color: var(--sf-butter); }
/* Lista longa rola dentro da caixa: empurrar a página inteira para baixo por
   causa de 200 nomes tiraria da tela justamente o botão de entrar. */
.sf-ranking__lista.is-completa { max-height: 320px; overflow-y: auto; }
/* A sua linha é a única com fundo, e fundo encostado no conteúdo lê-se como
   corte. O respiro vem com margem negativa do mesmo tamanho: o realce cresce
   para fora e o número continua alinhado com o das outras linhas. */
.sf-ranking__lista li.is-eu {
  background: rgba(255, 225, 105, .09); border-radius: 10px;
  padding-inline: 10px; margin-inline: -10px;
}
.sf-ranking__lista li.is-eu .sf-ranking__nome::after {
  content: " · você"; color: var(--sf-butter); font-weight: 700;
}
.sf-ranking__eu {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 12px;
  background: var(--sf-ink-3); border: 1px dashed var(--sf-line-2);
  text-align: center; font-size: 12.5px; color: var(--sf-muted);
}
.sf-ranking__eu b { color: var(--sf-butter); font-family: var(--sf-display); font-size: 15px; }

/* Deliberadamente mais apagado que o pódio do mês: é contexto, não a
   competição de agora. */
.sf-ranking__passado { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sf-line); }
.sf-ranking__passado h4 {
  margin: 0 0 8px; font-family: var(--sf-display); font-weight: 600;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-muted-2);
}
.sf-ranking__passado ol { margin: 0; padding: 0; list-style: none; }
.sf-ranking__passado li {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 0; font-size: 13px; color: var(--sf-muted);
}
.sf-ranking__passado .sf-ranking__nome { flex: 1; }
.sf-ranking__vazio { color: var(--sf-muted-2); font-size: 13px; line-height: 1.5; border-bottom: 0 !important; }

.sf-ranking__abrir {
  margin-top: 14px; width: 100%; border: 0; border-radius: 999px; padding: 13px;
  background: var(--sf-grad); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 4px 0 #b0405f; transition: transform .08s, box-shadow .08s;
}
.sf-ranking__abrir:active { transform: translateY(3px); box-shadow: 0 1px 0 #b0405f; }
.sf-ranking__falta { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--sf-muted-2); min-height: 16px; }

.sf-ranking__form { display: grid; gap: 11px; margin-top: 14px; }
.sf-ranking__form label { display: grid; gap: 5px; }
.sf-ranking__form label > span {
  font-family: var(--sf-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted-2);
}
/* Todo campo de texto, e não uma lista de tipos.

   A lista dizia text e email. O campo de WhatsApp é type="tel", não estava
   nela, e apareceu com fundo branco no meio de um formulário escuro. Lista de
   tipos é lista que alguém esquece de atualizar — e o esquecimento não avisa,
   só fica feio. A negação cobre o que vier depois. */
.sf-ranking__form input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; background: var(--sf-ink-3); color: var(--sf-cream);
  border: 1.5px solid var(--sf-line-2); border-radius: 10px; padding: 10px 12px; font-size: 14px;
}
/* Campo travado — o e-mail, enquanto se corrigem os dados. Sem sinal nenhum a
   pessoa tenta digitar, nada acontece, e ela conclui que a página quebrou. A
   borda tracejada e o texto mais apagado dizem "não é aqui" antes do toque. */
/* Repete os :not() da regra de cima de propósito. Cada :not() conta na
   especificidade, e sem eles esta regra perdia para ela — o campo continuava
   com cara de editável, que era justamente o que eu queria corrigir. */
.sf-ranking__form input:not([type="checkbox"]):not([type="radio"]):read-only {
  border-style: dashed; color: var(--sf-muted); cursor: not-allowed;
}
.sf-ranking__form input:focus-visible { outline: 2px solid var(--sf-butter); outline-offset: 1px; }
.sf-ranking__form small { font-size: 11.5px; color: var(--sf-butter); }
.sf-ranking__aceite {
  display: grid !important; grid-template-columns: auto 1fr; gap: 9px !important;
  align-items: start; font-size: 12px; line-height: 1.45; color: var(--sf-muted);
}
/* O aceite é uma frase, não um rótulo de campo. Sem isto ele herdava o estilo
   dos rótulos (10,5px, caixa alta, entreletra aberta) e virava três linhas de
   texto jurídico em maiúsculas — justo onde a leitura precisa ser fácil. */
.sf-ranking__aceite > span {
  font-family: var(--sf-body-font) !important; font-weight: 400 !important;
  font-size: 12.5px !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--sf-muted) !important;
}
.sf-ranking__aceite small { display: block; margin-top: 3px; color: var(--sf-muted-2); }
/* Obrigatório e opcional em palavras, não em cor: quem não separa bem as duas
   continua lendo qual é qual. */
.sf-marca {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--sf-display); font-weight: 700; font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase; vertical-align: 1px;
  background: var(--sf-butter); color: var(--sf-plum-ink);
}
.sf-marca.is-opcional { background: none; color: var(--sf-muted); border: 1px solid var(--sf-line-2); }
.sf-ranking__aceite input { margin-top: 2px; accent-color: var(--sf-butter); width: 16px; height: 16px; }
.sf-ranking__aceite a { color: var(--sf-butter); }
.sf-ranking__enviar {
  border: 0; border-radius: 999px; padding: 13px;
  background: var(--sf-cream); color: var(--sf-plum-ink);
  font-family: var(--sf-display); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 4px 0 #9c8a86; transition: transform .08s, box-shadow .08s;
}
.sf-ranking__enviar:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c8a86; }
.sf-ranking__enviar[disabled] { opacity: .6; cursor: progress; }
.sf-ranking__msg { margin: 2px 0 0; min-height: 18px; font-size: 12.5px; font-weight: 700; color: var(--sf-muted); }
.sf-ranking__msg.is-carregando { color: var(--sf-muted); font-weight: 600; line-height: 1.45; }
.sf-girando {
  display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px;
  border: 2px solid var(--sf-line-2); border-top-color: var(--sf-butter); border-radius: 50%;
  animation: sf-gira .7s linear infinite;
}
@keyframes sf-gira { to { transform: rotate(360deg); } }
/* Quem pediu menos movimento continua vendo que algo acontece, só que devagar:
   sumir com a animação deixaria a espera sem nenhum sinal. */
@media (prefers-reduced-motion: reduce) { .sf-girando { animation-duration: 2.4s; } }

.sf-cupom {
  display: block; margin-top: 7px; padding: 8px 10px; border-radius: 10px;
  background: var(--sf-ink-3); border: 1px dashed var(--sf-line-2);
  color: var(--sf-muted); font-weight: 600;
}
.sf-cupom b { color: var(--sf-butter); font-family: var(--sf-display); font-size: 15px; letter-spacing: .06em; }
.sf-copiar {
  margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--sf-line-2); background: var(--sf-ink-2); color: var(--sf-cream);
  font-family: var(--sf-display); font-weight: 600; font-size: 11px; vertical-align: 1px;
}
/* A contagem só muda de cor na última hora. Vermelho o tempo todo vira
   decoração, e aí não avisa nada quando o prazo aperta de verdade. */
.sf-cupom__prazo { font-weight: 700; }
.sf-cupom__prazo.is-fim { color: var(--sf-butter); }
.sf-cupom__prazo.is-morto { color: var(--sf-muted-2); text-decoration: line-through; }
.sf-copiar:hover { border-color: var(--sf-butter); color: var(--sf-butter); }
.sf-copiar.is-ok { border-color: var(--sf-butter); color: var(--sf-butter); }

.sf-ranking__msg.is-error { color: #ff8a8a; }
.sf-ranking__msg.is-ok { color: var(--sf-butter); }
.sf-ranking__trocar {
  display: block; margin: 10px auto 0; background: none; border: 0;
  color: var(--sf-muted-2); font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px;
}
.sf-ranking__trocar:hover { color: var(--sf-butter); }
.sf-ranking__atualizar[disabled] { opacity: .75; cursor: default; box-shadow: 0 1px 0 #b0405f; transform: translateY(2px); }

.sf-ranking__nota { margin: 12px 0 0; font-size: 11px; color: var(--sf-muted-2); line-height: 1.5; text-align: center; }

/* ---------- carrossel de fotos e relatos ---------- */
/* Sem margem própria: a figcaption já é flex com gap, e somar os dois abria um
   vão maior entre a nota e a aspa do que entre a aspa e o texto. */
.sf-nota { display: grid; gap: 5px; }
.sf-nota__titulo {
  margin: 0; font-family: var(--sf-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--sf-muted-2);
}
/* Sem apagar o "in": a 55% ele caía para 3,4:1 e o PageSpeed reprovou com
   razão. Quem risca a palavra é o traço, não a falta de contraste. */
.sf-nota__titulo s { text-decoration-thickness: 1.5px; }
.sf-nota__titulo b { color: var(--sf-butter); font-weight: 700; }

.sf-oks {
  display: flex; gap: 4px; font-size: 15px; line-height: 1;
  /* Pilha explícita de fontes de emoji: sem ela, um sistema sem emoji colorido
     desenha o quadradinho vazio no lugar da mão. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
/* O apagado perde a cor, não o desenho: em 3 de 5 são os dois sem cor que
   contam que faltaram dois. */
.sf-oks span { filter: grayscale(1); opacity: .55; }
.sf-oks span.is-on { filter: none; opacity: 1; }

.sf-section--relatos { padding-bottom: 30px; }
.sf-carousel { position: relative; }
.sf-relatos {
  list-style: none; margin: 0; padding: 2px 0 10px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 320px);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none;
}
.sf-relatos::-webkit-scrollbar { display: none; }
.sf-relato { scroll-snap-align: start; }
.sf-relato figure {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  background: var(--sf-ink-2); border: 1px solid var(--sf-line);
  border-radius: 18px; overflow: hidden;
}
.sf-relato img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--sf-ink-3);
}
.sf-relato figcaption { padding: 16px 17px 17px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sf-relato blockquote {
  margin: 0; position: relative; padding-top: 20px;
  font-size: 14px; line-height: 1.55; color: var(--sf-cream);
}
/* Aspas puramente decorativas: entram por ::before, então não são lidas em voz
   alta nem viram texto selecionável. */
.sf-relato blockquote::before {
  content: "\201C"; position: absolute; top: -12px; left: -2px;
  font-family: var(--sf-display); font-weight: 700; font-size: 52px; line-height: 1;
  color: var(--sf-butter); opacity: .55;
}
.sf-relato cite { font-style: normal; margin-top: auto; display: block; }
.sf-relato cite b {
  display: block; font-family: var(--sf-display); font-weight: 600;
  font-size: 13.5px; color: var(--sf-butter);
}
.sf-relato cite span { font-size: 11.5px; color: var(--sf-muted-2); }
/* Card sem foto: a citação ocupa o card inteiro, com mais ar. */
.sf-relato--sem-foto figure { justify-content: center; min-height: 230px; }
.sf-relato--sem-foto figcaption { padding: 22px 20px; }
.sf-relato--sem-foto blockquote { font-size: 15px; }

.sf-carousel__nav {
  position: absolute; top: 40%; z-index: 2; width: 40px; height: 40px; padding: 0;
  display: none; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--sf-line-2); background: var(--sf-ink-3); color: var(--sf-cream);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5); transition: border-color .14s, opacity .14s;
}
.sf-carousel__nav:hover { border-color: var(--sf-butter); }
.sf-carousel__nav[disabled] { opacity: .3; cursor: default; }
.sf-carousel__nav svg { width: 17px; height: 17px; }
.sf-carousel__nav--prev { left: -10px; }
.sf-carousel__nav--next { right: -10px; }
/* Setas só onde há mouse e largura: no toque, arrastar já é o gesto natural.
   A largura do card não muda aqui: numa grade de fluxo em coluna, dar a cada
   coluna uma fração do container faz todas encolherem juntas — media o card em
   110px e a faixa parava de rolar. */
@media (hover: hover) and (min-width: 700px) {
  .sf-carousel__nav { display: grid; }
  .sf-carousel { padding: 0 4px; }
}

/* ---------- usos, passos, casos ---------- */
.sf-uses { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); }
.sf-use { background: var(--sf-ink-2); border: 1px solid var(--sf-line); border-radius: 16px; padding: 15px 10px; text-align: center; }
.sf-use svg { width: 24px; height: 24px; margin: 0 auto 8px; color: var(--sf-butter); }
.sf-use strong { display: block; font-family: var(--sf-display); font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.sf-use span { font-size: 11.5px; color: var(--sf-muted-2); line-height: 1.45; display: block; }

.sf-steps { display: grid; gap: 11px; }
@media (min-width: 680px) { .sf-steps { grid-template-columns: repeat(3, 1fr); } }
.sf-step { border: 1px solid var(--sf-line); border-radius: 18px; padding: 19px; background: var(--sf-ink-2); }
.sf-step__n { font-family: var(--sf-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--sf-pink); margin-bottom: 12px; }
.sf-step h3 { margin: 0 0 7px; font-size: 16px; font-family: var(--sf-display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.sf-step p { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.55; }

.sf-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
@media (min-width: 680px) { .sf-cases { grid-template-columns: repeat(4, 1fr); } }
.sf-case { border: 1px solid var(--sf-line); border-radius: 14px; padding: 14px 13px; background: var(--sf-ink-2); }
.sf-case b { display: block; font-family: var(--sf-display); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 5px; }
.sf-case span { font-size: 11.5px; color: var(--sf-muted-2); line-height: 1.45; display: block; }
/* Estava no tom das linhas (1,5:1): sumia no fundo. Discreto pode; ilegível
   não. */
.sf-case i { font-style: normal; display: block; font-size: 10px; color: var(--sf-muted-2); font-weight: 800; margin-bottom: 8px; }

/* ---------- specs / faq / aviso ---------- */
.sf-specs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sf-line); border-radius: 18px; overflow: hidden; background: var(--sf-ink-2); }
.sf-specs li { padding: 13px 17px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; border-bottom: 1px solid var(--sf-line); }
.sf-specs li:last-child { border-bottom: 0; }
.sf-specs li span:first-child { color: var(--sf-muted-2); font-family: var(--sf-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; align-self: center; flex: none; }
.sf-specs li span:last-child { text-align: right; font-weight: 700; }

.sf-section details { border-bottom: 1px solid var(--sf-line); padding: 14px 0; }
.sf-section summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.sf-section summary::-webkit-details-marker { display: none; }
.sf-section summary i { font-style: normal; font-size: 10.5px; color: var(--sf-pink); font-weight: 800; flex: none; }
.sf-section summary::after { content: "+"; margin-left: auto; color: var(--sf-butter); font-family: var(--sf-display); font-weight: 700; }
.sf-section details[open] summary::after { content: "–"; }
.sf-section details p { margin: 10px 0 2px 26px; color: var(--sf-muted); font-size: 14px; line-height: 1.65; }

.sf-warn { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.sf-warn__box {
  border: 2px solid var(--sf-butter); border-radius: 16px; padding: 17px 19px;
  display: flex; gap: 13px; align-items: flex-start; background: rgba(255, 225, 105, .07);
}
.sf-warn__box > span { font-size: 23px; line-height: 1; }
.sf-warn__box strong { display: block; font-family: var(--sf-display); font-weight: 700; font-size: 14px; margin-bottom: 5px; color: var(--sf-butter); }
.sf-warn__box p { margin: 0; font-size: 13px; color: var(--sf-muted); line-height: 1.6; }

.sf-footer { padding: 0 0 44px; text-align: center; background: #0d0209; margin-top: 36px; border-top: 1px solid var(--sf-line); }
.sf-footer__cry {
  font-family: var(--sf-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 5.6vw, 34px); line-height: 1.05; padding: 38px 20px 8px; margin: 0; letter-spacing: -.01em;
}
.sf-footer__cry em { font-style: normal; background: var(--sf-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sf-footer__inner {
  max-width: 880px; margin: 0 auto; padding: 26px 20px 4px;
  display: grid; gap: 26px; text-align: left; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .sf-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 22px; } }
.sf-footer__brand .sf-lockup { align-items: flex-start; }
.sf-footer__brand .sf-wordmark { width: 150px; }
.sf-footer__brand p { margin: 12px 0 0; font-size: 12.5px; color: var(--sf-muted-2); line-height: 1.5; }
.sf-footer__col h3 {
  margin: 0 0 10px; font-family: var(--sf-display); font-weight: 600;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-butter);
}
.sf-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sf-footer__col li + li { margin-top: 7px; }
.sf-footer__col a { color: var(--sf-muted); font-size: 13px; text-decoration: none; }
.sf-footer__col a:hover, .sf-footer__col a:focus-visible { color: var(--sf-cream); text-decoration: underline; }
.sf-footer__legal {
  max-width: 640px; margin: 22px auto 0; padding: 0 20px;
  font-size: 11.5px; color: var(--sf-muted-2); line-height: 1.55;
}
/* Sublinhado, e não só amarelo: link no meio de um parágrafo que se distingue
   apenas pela cor some para quem não separa bem as cores. */
.sf-footer__legal a { color: var(--sf-butter); text-decoration: underline; text-underline-offset: 2px; }

.sf-seals { max-width: 880px; margin: 26px auto 0; padding: 18px 20px 0; border-top: 1px solid var(--sf-line); }
.sf-seals__title {
  margin: 0 0 12px; font-family: var(--sf-display); font-weight: 600;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-muted-2);
}
.sf-seals__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Fundo claro atrás do selo: quase todo PNG de bandeira ou certificado é feito
   para fundo branco e some numa página escura. */
.sf-seals__list li { background: var(--sf-cream); border-radius: 8px; padding: 7px 10px; display: grid; place-items: center; }
.sf-seals__list a { display: grid; place-items: center; transition: transform .14s, filter .14s; }
.sf-seals__list a:hover, .sf-seals__list a:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.sf-seals__list img { height: 30px; width: auto; }
.sf-footer__lockup { margin: 22px 0 16px; }
.sf-footer__lockup .sf-wordmark { width: 170px; margin: 0 auto; }
.sf-footer p { margin: 0 0 7px; font-size: 12.5px; color: var(--sf-muted-2); }
.sf-footer a { color: var(--sf-butter); }

@media (prefers-reduced-motion: reduce) {
  .sf-body *, .sf-ticker__track { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------------------
   Mochila (drawer do carrinho) no tema escuro
   O drawer é renderizado pelo tema em wp_footer e vinha com a cara rosa e
   creme do site, destoando da página. Ele usa só nove tokens --pc-*, todos
   definidos no :root do style.css — então redefinir esses nove aqui repinta
   as 70 regras dele de uma vez, sem tocar em nenhuma.
   ------------------------------------------------------------------------- */
.sf-body {
  --pc-white: #1e0817;                       /* fundo do painel e texto sobre botão claro */
  --pc-cream: #2a0d21;                       /* superfícies secundárias */
  --pc-plum: #fffdf5;                        /* títulos, bordas e fundo dos botões */
  --pc-plum-soft: rgba(255, 253, 245, .14);  /* divisórias */
  --pc-pink: #ff6ac1;
  --pc-pink-soft: rgba(255, 106, 193, .14);
  --pc-butter: #ffe169;
}
/* A inversão acima transforma --pc-plum em creme, o que quebraria só este
   caso: texto creme sobre a barra amarela de frete grátis. */
.sf-body .pc-drawer__shipping.is-unlocked .pc-drawer__shipping-text,
.sf-body .pc-drawer__shipping.is-unlocked { color: #2a0d21; }