/* Raio-X de Reembolsos. Identidade da Span: fundo preto, Inter, blocos
   separados por fundo e espaço (sem borda), nada se mexe sozinho. */

@font-face {
  font-family: "Inter";
  src: url("/fontes/inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fundo: #000;
  --bloco: #111113;
  --bloco2: #1a1a1c;
  --bloco3: #26262a;
  --vidro: rgba(255, 255, 255, .07);
  --vidro2: rgba(255, 255, 255, .13);
  --texto: #f5f5f7;
  --mudo: #949494;
  --mudo2: #c7c7cc;
  --claro: #f5f5f7;
  --claro-texto: #111113;
  --claro-mudo: #6e6e73;
  --destaque: #fc0;
  --perigo: #ff8a80;

  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 32px;
  --raio-m: 24px;
  --raio-p: 16px;
  --suave: cubic-bezier(.25, .1, .25, 1);
  --margem: clamp(20px, 5vw, 48px);
  --largura: 1120px;
  --respiro: clamp(56px, 9vw, 120px);
  --sai: cubic-bezier(.16, 1, .3, 1);
  --topo-pad: 24px;
  --topo-alt: 54px;
  --topo-h: calc(var(--topo-alt) + 2 * var(--topo-pad));

  color-scheme: dark;
}
@media (max-width: 833.98px) { :root { --topo-pad: 16px; --topo-alt: 48px; } }

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 400 17px/1.55 var(--fonte);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
@media (min-width: 768px) { body { font-size: 18px; } }
main { flex: 1 0 auto; }
::selection { background: var(--destaque); color: #000; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -80px; z-index: 10;
  padding: 12px 18px; border-radius: 12px; background: var(--claro); color: #000;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.pular:focus { top: 12px; }
.sem-script { padding: 24px var(--margem); background: var(--bloco2); }

.largura {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.estreito { max-width: calc(760px + 2 * var(--margem)); }

/* ------------------------------------------------------------ tipografia */
.t1 {
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1.03;
  letter-spacing: -.037em;
  font-weight: 500;
  text-wrap: balance;
}
.t2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.032em;
  font-weight: 500;
  text-wrap: balance;
}
.t3 {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 500;
}
.sub {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--mudo);
  text-wrap: pretty;
}
.mudo { color: var(--mudo); }
.pequeno { font-size: 15px; line-height: 1.5; }
.num { font-variant-numeric: tabular-nums; }
.prosa > * + * { margin-top: 1em; }
.prosa a { color: var(--texto); }

/* ------------------------------------------------------------ botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 980px;
  background: var(--claro);
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--suave), color .2s var(--suave), transform .2s var(--suave);
}
.botao:hover { background: #fff; }
@media (hover: hover) { .botao:hover { transform: translateY(-1px); } }
.botao:active { transform: none; }
.botao-sec { background: var(--vidro); color: #e5e5ea; }
.botao-sec:hover { background: var(--vidro2); color: #fff; }
.botao-perigo { background: var(--vidro); color: var(--perigo); }
.botao-perigo:hover { background: var(--vidro2); }
.botao-pq { min-height: 44px; padding: 0 20px; font-size: 15px; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .55; cursor: default; }
.botao-largo { width: 100%; }
@media (min-width: 560px) { .botao-largo { width: auto; } }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link-texto {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--mudo2); text-decoration: underline; text-underline-offset: .18em;
}
.link-texto:hover { color: var(--texto); }

/* ------------------------------------------------------------ marca */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.015em;
  text-decoration: none;
  white-space: nowrap;
}
.marca svg { width: auto; height: 22px; flex: none; }
@media (min-width: 768px) { .marca { font-size: 16px; } }

/* ------------------------------------------------------------ topo
   No jeito do site da Span: solto do teto, sem faixa nem contorno. Depois de
   rolar entra um véu escuro que some em degradê. No meio, a cápsula com as
   partes da página de entrada; no celular ela vira um menu de tela cheia.
   O topo é fixo: a página começa abaixo dele (respiro no body). */
body { padding-top: var(--topo-h); }
.topo { position: fixed; inset: 0 0 auto 0; z-index: 40; padding-block: var(--topo-pad); }
.topo::before {
  content: "";
  position: absolute;
  inset: 0 0 -44px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* só o degradê, sem desfoque: o desfoque fazia um brilho em volta do
     título que passa por baixo, e pesa no celular. Preto cheio atrás dos
     botões, e some logo abaixo deles. */
  background: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .86) 63%, rgba(0, 0, 0, .45) 81%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .4s var(--suave);
}
.topo.rolou::before { opacity: 1; }
.topo-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 24px;
  min-height: var(--topo-alt);
  transition: transform .4s var(--suave);
}
/* sobe um pouco depois de rolar (só deslocamento: nada na página se mexe) */
.topo.rolou .topo-in { transform: translateY(-6px); }
.topo .marca { min-width: 0; }
.topo .marca span { overflow: hidden; text-overflow: ellipsis; }

.capsula {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 980px;
  background: rgba(28, 28, 30, .62);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.capsula a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 980px;
  color: var(--mudo2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s var(--suave);
}
.capsula a:hover, .capsula a.ativo { color: #fff; }
.capsula-realce {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 980px;
  background: var(--vidro2);
  opacity: 0;
  pointer-events: none;
  transition: transform .55s var(--sai), width .55s var(--sai), height .55s var(--sai), opacity .3s var(--suave);
}
.capsula-realce.visivel { opacity: 1; }
.capsula-realce.sem-transicao { transition: opacity .3s var(--suave); }

.topo-dir { justify-self: end; display: flex; align-items: center; gap: 10px; }
.redondo {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--topo-alt);
  height: var(--topo-alt);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 28, 30, .62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--texto);
  cursor: pointer;
  transition: background-color .25s var(--suave);
}
.redondo:hover { background: rgba(58, 58, 60, .72); }
.redondo svg { width: 20px; height: 20px; }
.ico-zap { color: #25d366; }
.topo-cta { min-height: var(--topo-alt); padding: 0 24px; font-size: 15px; white-space: nowrap; }
.topo .botao-sec { background: rgba(28, 28, 30, .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.topo .botao-sec:hover { background: rgba(58, 58, 60, .72); }
.menu-btn { display: none; }
.menu-btn path { transform-origin: 10px 10px; transition: transform .4s var(--sai); }
.menu-btn[aria-expanded="true"] .menu-l1 { transform: rotate(45deg) translateY(3px); }
.menu-btn[aria-expanded="true"] .menu-l2 { transform: rotate(-45deg) translateY(-3px); }

.topo-enxuto .topo-in { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 1199.98px) {
  .capsula { display: none; }
  .topo-in { grid-template-columns: minmax(0, 1fr) auto; }
  .topo-completo .topo-zap { display: none; }
  .menu-btn { display: grid; }
}
@media (max-width: 833.98px) {
  .topo-cta { padding: 0 18px; }
}
@media (max-width: 560px) {
  .topo-completo .topo-cta { display: none; }
}

/* menu do celular: as duas linhas do botão viram um X, a parte da página que
   está na tela fica em branco e as outras em cinza, os links entram em
   cascata uma vez */
.topo.menu-aberto { z-index: 80; }
html.sem-rolar { overflow: hidden; }
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--topo-h) + 16px) var(--margem) calc(28px + env(safe-area-inset-bottom));
  background: #000;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: menu-entra .3s var(--suave) both;
}
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(8px, 1.5vh, 14px) 4px;
  color: var(--texto);
  font-size: clamp(26px, 4vh, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-decoration: none;
  animation: menu-sobe .6s var(--sai) both;
}
.menu nav.tem-ativo a[data-secao] { color: var(--mudo); }
.menu nav.tem-ativo a.ativo { color: #fff; }
.menu nav a .ico { flex: none; width: 18px; height: 18px; color: var(--mudo); }
.menu nav a:nth-child(2) { animation-delay: .035s; }
.menu nav a:nth-child(3) { animation-delay: .07s; }
.menu nav a:nth-child(4) { animation-delay: .105s; }
.menu nav a:nth-child(5) { animation-delay: .14s; }
.menu nav a:nth-child(6) { animation-delay: .175s; }
.menu-acoes { display: flex; flex-direction: column; gap: 10px; animation: menu-sobe .6s var(--sai) .22s both; }
.menu-acoes .botao, .menu-acoes .pilula { width: 100%; }
.menu-email { align-self: center; padding: 10px 12px; color: var(--mudo2); font-size: 15px; text-decoration: none; }
.menu-email:hover { color: #fff; }
@keyframes menu-entra { from { opacity: 0; } }
@keyframes menu-sobe { from { opacity: 0; transform: translateY(16px); } }

/* botões no jeito da Span: pílula de vidro e botão grande */
.pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 980px;
  background: var(--vidro);
  color: #e5e5ea;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s var(--suave), color .25s var(--suave);
}
.pilula:hover { background: var(--vidro2); color: #fff; }
.pilula .ico-zap { width: 18px; height: 18px; flex: none; }
.botao-g, .pilula-g { min-height: 58px; font-size: 17px; }

/* ------------------------------------------------------------ rodapé
   Estrutura do rodapé da Span: marca, frase e botões; quatro colunas; a parte
   legal embaixo. Em cima, um céu de estrelas paradas (desenhado uma vez). */
.rodape {
  position: relative;
  overflow: hidden;
  margin-top: clamp(24px, 4vw, 48px);
  padding: clamp(88px, 11vw, 150px) 0 40px;
  color: var(--mudo);
  font-size: 15px;
}
.ceu { position: absolute; inset: 0 0 auto 0; z-index: 0; width: 100%; height: min(100%, 560px); pointer-events: none; }
.rodape-in { position: relative; z-index: 1; }
.marca-g { gap: 14px; color: var(--texto); font-size: 22px; letter-spacing: -.025em; }
.marca-g svg { height: 34px; }
.rodape-marca p { margin-top: 18px; max-width: 28em; color: var(--mudo2); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.5; text-wrap: pretty; }
.rodape-acoes { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.rodape-colunas { margin-top: clamp(56px, 8vh, 96px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rodape-colunas h2 { margin-bottom: 18px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.rodape-colunas ul { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rodape-colunas li { display: flex; align-items: center; min-height: 28px; max-width: 100%; color: var(--mudo2); font-size: 16px; line-height: 1.4; }
.rodape-colunas a { display: inline-flex; align-items: center; min-height: 28px; gap: 8px; min-width: 0; color: var(--mudo2); text-decoration: none; overflow-wrap: anywhere; transition: color .2s var(--suave); }
.rodape-colunas a:hover { color: #fff; }
.rodape-colunas .ico { flex: none; width: 12px; height: 12px; opacity: .55; }
.rodape-colunas .inteiro { white-space: nowrap; }
.rodape-colunas .rodape-horario { max-width: 17em; color: var(--mudo); font-size: 15px; }
.rodape-base { margin-top: clamp(56px, 8vh, 96px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; color: #8e8e93; font-size: 14px; }
.rodape-base p + p { margin-top: 4px; }
.rodape-span { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 28px; color: var(--mudo2); text-decoration: none; white-space: nowrap; transition: color .2s var(--suave); }
.rodape-span:hover { color: #fff; }
.rodape-span svg { width: auto; height: 18px; }
@media (max-width: 919.98px) {
  .rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
}
@media (max-width: 833.98px) {
  .marca-g { font-size: 20px; }
  .marca-g svg { height: 30px; }
  .rodape-colunas li { font-size: 15px; }
  .rodape-base { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ seções */
.secao { padding-block: var(--respiro); }
.secao-topo { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.secao-topo .sub { margin-top: 16px; max-width: 640px; }

.grade-2, .grade-3 { display: grid; gap: 12px; }
@media (min-width: 768px) {
  .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bloco {
  background: var(--bloco);
  border-radius: var(--raio-m);
  padding: clamp(24px, 3vw, 36px);
}
.bloco > .t3 + p, .bloco > h3 + p { margin-top: 10px; }

.recado {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--raio-p);
  background: var(--bloco2);
  font-size: 16px;
}
.recado > * + * { margin-top: .5em; }

/* listas com marcador simples */
.lista { list-style: none; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 26px; }
.lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texto);
}
.lista-nao li::before { top: .74em; width: 12px; height: 2px; border-radius: 2px; background: var(--mudo); }
.passos { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.passos li { padding-left: 4px; }
.passos li::marker { color: var(--mudo); font-variant-numeric: tabular-nums; }

/* painel claro (perguntas, total do relatório) */
.claro {
  background: var(--claro);
  color: var(--claro-texto);
  border-radius: 40px;
}
.claro .mudo, .claro .sub { color: var(--claro-mudo); }
.claro .botao { background: var(--claro-texto); color: #fff; }
.claro .botao:hover { background: #000; }
.claro ::selection { background: var(--destaque); color: #000; }
.claro :focus-visible { outline-color: #000; }

/* ------------------------------------------------------------ página de entrada */
.abertura { padding-block: clamp(32px, 8vw, 120px) var(--respiro); }
/* O topo só aparece depois que o script decide se mostra o aviso de volta do
   Mercado Livre; assim o aviso não empurra o título depois de desenhado.
   Antes disso o topo já não tem texto (os textos vêm do textos.js). */
.abertura:not(.pronta) { visibility: hidden; }
.abertura .recado { margin: 0 0 32px; max-width: 640px; }
.abertura .t1 { max-width: 1000px; }
.abertura .sub { margin-top: 24px; max-width: 640px; color: var(--mudo2); }
.abertura .acoes { margin-top: 36px; }
.garantia { margin-top: 16px; color: var(--mudo); font-size: 15px; }

/* Título à esquerda e, ao lado, a cena: o painel funcionando com o exemplo.
   No celular a cena vem abaixo do botão. O palco tem altura fixa, para nada
   pular quando a cena chega. */
.abertura-grade { display: grid; gap: 56px; }
.abertura-texto { min-width: 0; }
.cena-caixa { min-width: 0; max-width: 560px; }
@media (min-width: 1024px) {
  .abertura { padding-top: clamp(40px, 4.5vw, 88px); }
  .abertura-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 88px); align-items: center; }
  .abertura .t1 { font-size: clamp(42px, 4.3vw, 64px); }
  .cena-caixa { max-width: none; }
}

.cena { position: relative; height: 476px; overflow: hidden; font-size: 15px; line-height: 1.4; }
@media (min-width: 560px) { .cena { height: 558px; } }
.cena-dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.cena-topo { display: grid; grid-template-columns: minmax(0, 1fr); }
.cena-lendo, .cena-pronto { grid-area: 1 / 1; padding: 22px 24px; border-radius: var(--raio-m); }
.cena-lendo { background: var(--bloco); }
.cena-pronto { background: var(--claro); color: var(--claro-texto); }
.cena-conta { color: var(--mudo); font-size: 13px; }
.cena-titulo { margin-top: 4px; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; }
.cena-barra { margin-top: 18px; }
.cena-cheia { height: 100%; background: var(--destaque); transform: scaleX(0); transform-origin: 0 50%; }
.cena-linhas { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--mudo2); font-size: 14px; }
.cena-linhas .num { color: var(--mudo); }
.cena-rotulo { color: var(--claro-mudo); font-size: 14px; font-weight: 500; }
.cena-valor {
  margin: 6px 0 8px;
  font-size: clamp(40px, 11vw, 56px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cena-casos { color: var(--claro-mudo); font-size: 14px; }

.cena-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cena-caso { position: relative; }
.cena-fundo { position: absolute; inset: 0; border-radius: 20px; background: var(--bloco); }
.cena-cabeca {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 14px 24px;
  border-radius: 20px;
  background: var(--bloco);
}
.cena-tipo, .cena-produto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cena-tipo { grid-column: 1 / -1; color: var(--mudo); font-size: 13px; }
.cena-produto { margin-top: 2px; font-weight: 500; letter-spacing: -.015em; }
.cena-v { font-size: 16px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cena-corpo { position: relative; padding: 0 10px 10px; }
.cena-pedido { padding: 14px 14px 14px; border-radius: 14px; background: var(--bloco2); }
.cena-pedido-rotulo { color: var(--mudo); font-size: 12px; font-weight: 500; }
.cena-pedido-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  height: 4.5em;
  margin-top: 4px;
  color: var(--mudo2);
  font-size: 14px;
  line-height: 1.5;
}
.cena-botao {
  display: inline-grid;
  align-items: center;
  min-height: 36px;
  margin-top: 12px;
  padding: 0 16px;
  border-radius: 980px;
  background: var(--vidro);
  color: #e5e5ea;
  font-size: 14px;
  font-weight: 500;
}
.cena-copiar, .cena-copiado { grid-area: 1 / 1; text-align: center; }
.cena-copiado { color: var(--destaque); opacity: 0; }
.cena-nota { margin-top: 14px; color: var(--mudo); font-size: 13px; }
@media (max-width: 559px) {
  .cena-caso:nth-child(3) { display: none; }
}

.mostra { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .mostra { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
}
.mostra-texto .sub { margin-top: 16px; }
.mostra-texto .link-seta { margin-top: 20px; }
.rotulo-caso { margin-bottom: 12px; color: var(--mudo); font-size: 14px; }
.link-seta { display: inline-block; padding: 10px 0; color: var(--mudo2); font-size: 16px; }
.link-seta:hover { color: var(--texto); }

.como { list-style: none; }
.leitura-lista { margin-top: 20px; }

.procura { display: grid; gap: 32px; }
@media (min-width: 768px) { .procura { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.procura p { margin-top: 10px; color: var(--mudo); }

.passo-n {
  display: block;
  margin-bottom: 8px;
  color: var(--mudo);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.como p { color: var(--mudo); }

/* Segurança: o painel claro com o que é lido, o que nunca é feito e como a
   autorização fica protegida; logo abaixo, no escuro, os dois avisos da tela
   do Mercado Livre. */
.seguranca { padding: clamp(28px, 5vw, 72px) clamp(16px, 5vw, 72px); }
.seguranca .secao-topo { padding-inline: 8px; }
.seguranca .bloco { background: #fff; }
.seguranca .lista li::before { background: var(--claro-texto); }
.seguranca .lista-nao li::before { background: var(--claro-mudo); }
.protecao { display: grid; gap: 28px; margin-top: clamp(40px, 5vw, 64px); padding-inline: 8px; }
@media (min-width: 768px) { .protecao { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.protecao p { margin-top: 10px; color: var(--claro-mudo); }
.seguranca + .avisos-ml { margin-top: 12px; }

/* As partes que o topo leva: o começo de cada uma fica logo abaixo dele. */
.secao[id] { scroll-margin-top: max(0px, calc(var(--topo-h) - var(--respiro) + 32px)); }
#perguntas { scroll-margin-top: calc(var(--topo-h) + 16px); }

/* Peça pequena do sistema em cima de cada passo. Acontece uma vez quando
   aparece na tela (classe .vivo) e fica parada no fim. */
.peca {
  display: grid;
  align-content: center;
  gap: 10px;
  height: 112px;
  margin-bottom: clamp(24px, 3vw, 32px);
  padding: 0 20px;
  border-radius: var(--raio-p);
  background: var(--bloco2);
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
}
.como .peca p { color: var(--texto); }
.peca p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peca-linha { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.como .peca .peca-mudo { margin-top: -6px; color: var(--mudo); }
.peca-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--destaque); transform: scale(0); }
.peca-cheia { height: 100%; border-radius: 8px; background: var(--destaque); transform: scaleX(0); transform-origin: 0 50%; }
.peca-botao {
  justify-self: start;
  display: inline-grid;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 980px;
  background: var(--vidro);
  color: #e5e5ea;
  font-size: 14px;
  font-weight: 500;
}
.peca-copiar, .peca-copiado { grid-area: 1 / 1; text-align: center; }
.peca-copiado { color: var(--destaque); opacity: 0; }
.como .peca .peca-voltou { display: flex; justify-content: space-between; gap: 12px; color: var(--mudo2); }
.peca-valor { color: var(--destaque); font-weight: 500; font-variant-numeric: tabular-nums; }
.peca-1 .peca-linha, .peca-1 .peca-mudo, .peca-voltou { opacity: 0; transform: translateY(6px); }

.peca.vivo .peca-linha, .peca.vivo .peca-mudo, .peca.vivo .peca-voltou {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--suave), transform .45s var(--suave);
}
.peca-1.vivo .peca-ponto { transform: none; transition: transform .35s var(--suave) .45s; }
.peca-1.vivo .peca-mudo { transition-delay: .6s; }
.peca-2.vivo .peca-cheia { transform: none; transition: transform 1.6s cubic-bezier(.4, 0, .2, 1) .25s; }
.peca-3.vivo .peca-copiar { opacity: 0; transition: opacity .25s var(--suave) .7s; }
.peca-3.vivo .peca-copiado { opacity: 1; transition: opacity .25s var(--suave) .7s; }
.peca-3.vivo .peca-voltou { transition-delay: 1.4s; }

/* Toda semana ele lê de novo: linha do tempo do relatório de exemplo. */
.semana { list-style: none; display: grid; gap: 2px; margin-top: clamp(28px, 4vw, 44px); }
.semana li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "d v" "t t";
  gap: 6px 16px;
  align-items: baseline;
  padding: 18px 22px;
  background: var(--bloco);
}
.semana li:first-child { border-radius: var(--raio-p) var(--raio-p) 0 0; }
.semana li:last-child { border-radius: 0 0 var(--raio-p) var(--raio-p); }
.semana-d { grid-area: d; color: var(--mudo); font-size: 15px; }
.semana-t { grid-area: t; }
.semana-v { grid-area: v; justify-self: end; font-weight: 500; white-space: nowrap; }
.voltou-linha .semana-v { color: var(--destaque); }
@media (min-width: 768px) {
  .semana li {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "d t v";
    gap: 24px;
    padding: 20px 28px;
  }
}
.semana-totais { margin-top: 20px; color: var(--mudo2); font-variant-numeric: tabular-nums; }
.semana-nota { margin-top: 8px; color: var(--mudo); font-size: 14px; }
.tipo-valor { color: var(--texto); }

.avisos-ml {
  background: var(--bloco);
  border-radius: var(--raio);
  padding: clamp(28px, 5vw, 64px);
}
.avisos-ml .grade-2 { margin-top: clamp(28px, 4vw, 44px); gap: 32px 48px; }
.avisos-ml h3 + p { margin-top: 10px; color: var(--mudo); }
.avisos-ml .acoes { margin-top: clamp(32px, 4vw, 48px); }
.avisos-ml .nota { margin-top: 16px; max-width: 560px; color: var(--mudo); font-size: 15px; }

/* Quem está por trás: o bloco do fundador (no jeito do site da Span, a foto
   à direita sumindo no fundo; no celular, em cima) e, embaixo, a fase de
   agora e o contato direto. */
.quem { display: grid; gap: 12px; }
.fundador { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--bloco); }
.fundador-foto { position: relative; aspect-ratio: 4 / 3; }
.fundador-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.fundador-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 19, 0) 50%, rgba(17, 17, 19, .7) 78%, var(--bloco) 100%);
}
.fundador-texto { position: relative; z-index: 1; margin-top: -24px; padding: 0 clamp(24px, 3vw, 48px) clamp(28px, 3vw, 48px); }
.fundador-nome { font-size: clamp(30px, 2.7vw, 46px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; }
.fundador-cargo { margin-top: 8px; color: var(--mudo); }
.fundador-sobre { margin-top: 20px; max-width: 26em; color: var(--mudo2); text-wrap: pretty; }
.fundador-acoes { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.nota-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 980px;
  background: var(--vidro);
  color: var(--mudo2);
  font-size: 16px;
  text-decoration: none;
  transition: background-color .25s var(--suave), color .25s var(--suave);
}
.nota-google:hover { background: var(--vidro2); color: #fff; }
.nota-google svg { flex: none; width: 17px; height: 17px; color: #fff; }
.nota-google strong { color: #fff; font-weight: 600; }
@media (min-width: 900px) {
  .fundador { display: flex; align-items: center; min-height: 540px; }
  .fundador-foto { position: absolute; inset: 0 0 0 auto; width: 58%; aspect-ratio: auto; }
  .fundador-foto img { object-position: 40% 30%; }
  .fundador-foto::after { background: linear-gradient(90deg, var(--bloco) 0%, rgba(17, 17, 19, .95) 18%, rgba(17, 17, 19, .6) 30%, rgba(17, 17, 19, 0) 46%); }
  .fundador-texto { width: 54%; margin-top: 0; padding: clamp(36px, 4vw, 56px); }
  .fundador-sobre { font-size: 18px; }
}
.quem-blocos .bloco { display: flex; flex-direction: column; }
.quem-prosa { margin-top: 10px; color: var(--mudo); }
.quem-prosa a { color: var(--texto); }

.dados { display: grid; gap: 2px; margin-top: 24px; }
.dados div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px;
  background: var(--bloco2);
}
.dados div:first-child { border-radius: var(--raio-p) var(--raio-p) 0 0; }
.dados div:last-child { border-radius: 0 0 var(--raio-p) var(--raio-p); }
.dados dt { color: var(--mudo); font-size: 15px; padding-top: 2px; }
.dados dd { overflow-wrap: anywhere; }
.dados a { text-decoration: none; }
.dados a:hover { text-decoration: underline; }

.perguntas { padding: clamp(28px, 5vw, 72px) clamp(16px, 5vw, 72px); }
.perguntas .t2 { padding-inline: 8px; }
.perguntas-lista { display: grid; gap: 8px; margin-top: clamp(24px, 3vw, 40px); }
.pergunta { background: #fff; border-radius: 20px; }
.pergunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: #1d1d1f;
  border-radius: 20px;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.pergunta[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat; }
.resposta-caixa { overflow: hidden; }
.pergunta .resposta { padding: 0 22px 22px; color: var(--claro-mudo); font-size: 16px; }
.pergunta .resposta a { color: var(--claro-texto); }

.fim .sub { margin-top: 16px; max-width: 560px; }
.fim .acoes { margin-top: 32px; }

/* ------------------------------------------------------------ relatório */
.rel-topo .sub { margin-top: 14px; }
.rel-topo .t2 { overflow-wrap: anywhere; }
.aviso-exemplo { margin-top: 24px; }

.total { margin-top: clamp(28px, 4vw, 48px); padding: clamp(28px, 5vw, 56px); border-radius: var(--raio); }
.total-rotulo { font-size: 16px; font-weight: 500; color: var(--claro-mudo); }
.total-valor {
  margin: 10px 0 14px;
  font-size: clamp(44px, 11vw, 120px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.moeda { font-size: .42em; letter-spacing: -.01em; vertical-align: .95em; margin-right: .18em; }
.total-casos { color: var(--claro-mudo); }
.total-zero { margin: 10px 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }

.tipos { margin-top: 12px; }
.tipo-nome { color: var(--mudo); font-size: 15px; font-weight: 500; }
.tipo-valor { margin-top: 6px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; font-variant-numeric: tabular-nums; }
.tipo-linhas { list-style: none; margin-top: 14px; display: grid; gap: 2px; color: var(--mudo); font-size: 15px; }

.grupo { margin-top: clamp(64px, 8vw, 112px); }
.grupo-topo { max-width: 720px; margin-bottom: 24px; }
.grupo-soma { margin-top: 6px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; font-weight: 500; font-variant-numeric: tabular-nums; }
.grupo-topo .sub { margin-top: 12px; font-size: 16px; }
.casos { list-style: none; display: grid; gap: 12px; }
.mais { margin-top: 16px; }

.caso {
  background: var(--bloco);
  border-radius: var(--raio-m);
  padding: clamp(20px, 3vw, 32px);
}
.caso-topo { display: grid; gap: 14px; }
@media (min-width: 640px) {
  .caso-topo { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
  .caso-valor { text-align: right; }
}
.caso-tipo { color: var(--mudo); font-size: 14px; font-weight: 500; }
.caso-titulo { margin-top: 4px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; overflow-wrap: anywhere; }
.caso-ref { margin-top: 6px; color: var(--mudo); font-size: 14px; overflow-wrap: anywhere; }
.caso-valor { font-size: 26px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caso-valor small { display: block; margin-top: 6px; color: var(--mudo); font-size: 13px; letter-spacing: 0; font-weight: 400; white-space: normal; }
.caso-valor.sem { font-size: 15px; letter-spacing: 0; font-weight: 400; color: var(--mudo); white-space: normal; max-width: 220px; }
.caso-detalhe { margin-top: 14px; color: var(--mudo2); font-size: 16px; }
.caso-data { margin-top: 8px; font-size: 16px; }

.pedido {
  margin-top: 20px;
  padding: 18px 20px 20px;
  border-radius: var(--raio-p);
  background: var(--bloco2);
}
.pedido-rotulo { color: var(--mudo); font-size: 13px; font-weight: 500; }
.pedido-texto { margin-top: 6px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.pedido .acoes { margin-top: 16px; }
.pedido .passos { margin-top: 10px; font-size: 16px; color: var(--mudo2); }
.retorno-copia { color: var(--mudo2); font-size: 15px; }
.retorno-copia.ok { color: var(--destaque); }

.onde { margin-top: 12px; }
.onde summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  color: var(--mudo2);
  font-size: 15px;
  list-style: none;
}
.onde summary::-webkit-details-marker { display: none; }
.onde summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.onde[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.onde summary:hover { color: var(--texto); }
.onde .passos { margin: 4px 0 6px; font-size: 16px; color: var(--mudo2); }
.nota-conferir { margin-top: 10px; color: var(--mudo); font-size: 14px; }

.voltou-topo { margin-bottom: 20px; }
.voltou { list-style: none; display: grid; gap: 2px; }
.voltou li {
  display: grid;
  gap: 4px 16px;
  padding: 16px 20px;
  background: var(--bloco);
}
.voltou li:first-child { border-radius: var(--raio-p) var(--raio-p) 0 0; }
.voltou li:last-child { border-radius: 0 0 var(--raio-p) var(--raio-p); }
.voltou li:only-child { border-radius: var(--raio-p); }
@media (min-width: 640px) { .voltou li { grid-template-columns: minmax(0, 1fr) auto; } .voltou .v { text-align: right; } }
.voltou .n { font-weight: 500; overflow-wrap: anywhere; }
.voltou .d { color: var(--mudo); font-size: 14px; }
.voltou .v { color: var(--destaque); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sobre { max-width: 720px; color: var(--mudo); font-size: 16px; }
.sobre p + p { margin-top: 10px; }
.sobre-titulo { margin-top: 32px; color: var(--texto); }
.sobre .lista { margin-top: 12px; }
.sobre .lista li::before { background: var(--mudo); }

/* ------------------------------------------------------------ painel */
.painel-topo { padding-top: clamp(16px, 4vw, 48px); }
/* Páginas que esperam o motor: o rodapé começa abaixo da tela, para nada pular quando o conteúdo chega. */
.carrega { min-height: 100vh; }
.estado { padding: clamp(28px, 5vw, 56px); border-radius: var(--raio); background: var(--bloco); }
.estado .sub { margin-top: 16px; max-width: 620px; }
.estado .acoes { margin-top: 28px; }
.progresso { margin-top: 32px; max-width: 620px; }
.barra { height: 8px; border-radius: 8px; background: var(--bloco3); overflow: hidden; }
.barra-cheia { width: 0; height: 100%; border-radius: 8px; background: var(--destaque); }
.progresso-linhas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font-size: 15px; }
.progresso-linhas .num { color: var(--mudo); }
.atualiza { margin-top: 20px; color: var(--mudo); font-size: 14px; }
.conta-nome { margin-bottom: 12px; overflow-wrap: anywhere; }
.acoes-falha { margin-top: 16px; }
.demo { margin-top: 0; margin-bottom: 20px; }

.painel-baixo { margin-top: clamp(64px, 8vw, 112px); }
.campo { margin-top: 20px; display: grid; gap: 8px; }
.campo label { font-size: 15px; font-weight: 500; }
.campo-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.entrada {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--bloco2);
  color: var(--texto);
  font-size: 16px;
  transition: background-color .2s var(--suave);
}
.entrada::placeholder { color: #7c7c80; }
.entrada:focus { background: var(--bloco3); }
.retorno { min-height: 1.5em; margin-top: 12px; font-size: 15px; color: var(--mudo2); }
.retorno.ruim { color: var(--perigo); }
.conta-linhas { margin-top: 16px; display: grid; gap: 4px; color: var(--mudo); font-size: 16px; }
.conta-linhas strong { color: var(--texto); font-weight: 500; }
.bloco .acoes { margin-top: 24px; }
.bloco .nota { margin-top: 14px; font-size: 14px; }

dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--bloco2);
  color: var(--texto);
}
dialog::backdrop { background: rgba(0, 0, 0, .72); }
.dialogo { padding: 28px; }
.dialogo p { margin-top: 12px; color: var(--mudo2); }
.dialogo .acoes { margin-top: 28px; }

/* ------------------------------------------------------------ admin */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
.numeros .dinheiro { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .numeros { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .numeros .dinheiro { grid-column: span 3; }
}
.numeros div { padding: 18px 20px; border-radius: var(--raio-p); background: var(--bloco); }
.numeros dt { color: var(--mudo); font-size: 14px; }
.numeros dd { margin-top: 6px; font-size: 26px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.numeros .dinheiro dd { font-size: clamp(30px, 4vw, 44px); white-space: nowrap; overflow-wrap: normal; }
.adm-secao { margin-top: clamp(56px, 7vw, 96px); }
.adm-secao > .sub { margin-top: 10px; font-size: 16px; }
.adm-lista { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.adm-conta .linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.adm-conta .t3 { overflow-wrap: anywhere; }
.adm-conta .situacao { color: var(--mudo2); font-size: 15px; }
.adm-conta .meta { margin-top: 4px; color: var(--mudo); font-size: 14px; }
.adm-totais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 16px; }
@media (min-width: 640px) { .adm-totais { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm-totais dt { color: var(--mudo); font-size: 13px; }
.adm-totais dd { margin-top: 2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.adm-conta .erro { margin-top: 12px; color: var(--perigo); font-size: 15px; }
.adm-relatorio { margin-top: 28px; padding-top: 4px; }
.adm-relatorio .total { border-radius: var(--raio-m); }
.linhas-simples { list-style: none; display: grid; gap: 2px; margin-top: 20px; }
.linhas-simples li { padding: 14px 20px; background: var(--bloco); font-size: 16px; }
.linhas-simples li:first-child { border-radius: var(--raio-p) var(--raio-p) 0 0; }
.linhas-simples li:last-child { border-radius: 0 0 var(--raio-p) var(--raio-p); }
.linhas-simples li:only-child { border-radius: var(--raio-p); }
.linhas-simples .d { display: block; color: var(--mudo); font-size: 14px; }
.vazio { margin-top: 16px; color: var(--mudo); }

/* ------------------------------------------------------------ páginas de texto */
/* O texto chega pelo script: o rodapé começa abaixo da tela, para não pular quando ele chega. */
.legal { min-height: 100vh; padding-top: clamp(24px, 5vw, 72px); }
.legal .sub { margin-top: 20px; }
.legal .recado { margin-top: 0; margin-bottom: 32px; }
.legal-secao { margin-top: 40px; }
.legal-secao h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; }
.legal-secao .prosa { margin-top: 10px; color: var(--mudo2); }
.legal-data { margin-top: 48px; color: var(--mudo); font-size: 15px; }

.perdida { padding-block: clamp(48px, 12vw, 160px); }
.perdida .sub { margin-top: 20px; }
.perdida .acoes { margin-top: 32px; }

/* ------------------------------------------------------------ carregando */
.carregando { padding-block: 48px; color: var(--mudo); }

/* ------------------------------------------------------------ movimento
   Bloco que entra na tela sobe um pouco, uma vez. Valor em reais que conta:
   o valor final fica no lugar (invisível) e o que conta passa por cima. */
.rv { opacity: 0; transform: translateY(14px); }
/* :root para valer acima da transição de fundo dos cards (mais abaixo), que tiraria a subida */
:root .rv.rv-in {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--suave) var(--atraso, 0ms), transform .45s var(--suave) var(--atraso, 0ms), background-color .25s var(--suave);
}
.contando { position: relative; }
.contando-fixo { opacity: 0; }
.contando-vivo { position: absolute; inset: 0; }

/* Cards e linhas das perguntas: o fundo muda de tom ao passar o mouse ou tocar. */
.como > .bloco, main .grade-2 > .bloco, .tipos .bloco, .caso, .pergunta { transition: background-color .25s var(--suave); }
@media (hover: hover) {
  .como > .bloco:hover, main .grade-2 > .bloco:hover, .tipos .bloco:hover, .caso:hover { background: #151517; }
  main .seguranca .grade-2 > .bloco:hover { background: #fbfbfd; }
  .pergunta:hover { background: #fbfbfd; }
  .pergunta summary:hover { color: #000; }
}
.como > .bloco:active, main .grade-2 > .bloco:active, .tipos .bloco:active, .caso:active { background: #151517; }
main .seguranca .grade-2 > .bloco:active { background: #fbfbfd; }
.pergunta summary:active { background: #f0f0f2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}