/* Sua Arca — Checklist do kit de 72 horas (/checklist-72-horas/).
   Usa os tokens e componentes de styles.css. Cores das faixas: sempre com o nome escrito. */

.checklist-pagina .topo { position: static; }   /* a barra fixa aqui é a das categorias */
.checklist-pagina .topo__interno { justify-content: space-between; }

/* Foco: contorno mata (contraste alto em fundo claro) com o âmbar da marca por fora */
.checklist-pagina :focus-visible { outline: 3px solid var(--mata); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ambar); }
.cl-colecao :focus-visible, .rodape :focus-visible { outline-color: var(--ambar); box-shadow: none; }

.cl-interno { max-width: 60rem; margin: 0 auto; padding: 0 var(--e4); }

/* Topo */
.cl-topo { background: var(--branco); border-bottom: 1px solid var(--salvia); padding: var(--e12) 0 var(--e8); }
.selo {
  display: inline-block; margin: 0 0 var(--e4); padding: var(--e1) var(--e3); border-radius: 999px;
  background: var(--salvia); color: var(--mata); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.cl-topo h1 { margin-bottom: var(--e4); }
.cl-topo__sub { font-size: 1.125rem; color: var(--tinta-suave); max-width: 40rem; margin: 0 0 var(--e6); }
.cl-topo__assinatura {
  margin: 0; padding-left: var(--e4); border-left: 3px solid var(--ambar);
  font-family: var(--fonte-titulo); font-size: 1.125rem; color: var(--mata);
}

/* Como usar */
.cl-como { padding-top: var(--e12); padding-bottom: var(--e8); }
.passos-cl { list-style: none; margin: 0 0 var(--e8); padding: 0; display: grid; gap: var(--e4); }
.passos-cl li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e4); align-items: start;
  background: var(--branco); border: 1px solid var(--salvia); border-radius: var(--raio); padding: var(--e4) var(--e6);
}
.passos-cl__num {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mata); color: var(--branco); font-weight: 700;
}
.passos-cl h3 { margin: var(--e1) 0 var(--e1); font-size: 1.125rem; }
.passos-cl p { margin: 0; color: var(--tinta-suave); }
.afiliados {
  margin: 0; padding: var(--e4) var(--e6); border-radius: var(--raio); background: var(--areia);
  border-left: 4px solid var(--ambar); font-size: 0.9375rem; line-height: 1.6; color: var(--tinta);
}

/* Progresso e filtros */
.cl-ferramentas { padding: var(--e6) 0; }
.progresso { margin-bottom: var(--e4); }
.progresso__texto { margin: 0 0 var(--e2); font-size: 1rem; color: var(--mata); }
.progresso__barra { height: 12px; border-radius: 999px; background: var(--salvia); overflow: hidden; }
.progresso__barra span { display: block; height: 100%; width: 0; background: var(--mata); border-radius: 999px; transition: width 240ms ease; }
.filtros { border: 1px solid var(--salvia); border-radius: var(--raio); background: var(--branco); padding: var(--e4); margin: 0; }
.filtros legend { padding: 0 var(--e2); font-weight: 650; color: var(--mata); font-size: 0.9375rem; }
.filtros__opcoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.filtro {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--alvo-toque); padding: 0 var(--e4);
  border: 1px solid var(--salvia); border-radius: 999px; background: var(--papel); cursor: pointer; font-size: 0.9375rem;
}
.filtro:has(input:checked) { border-color: var(--mata); background: var(--salvia); font-weight: 600; }
.filtro input { width: 18px; height: 18px; margin: 0; accent-color: var(--mata); }
.filtro__desc { color: var(--tinta-suave); font-weight: 400; }
.filtro--falta { margin-right: var(--e3); }
.filtros .botao { margin-top: var(--e2); }
.filtros__nota { margin: var(--e3) 0 0; font-size: 0.8125rem; color: var(--tinta-suave); }

/* Navegação por categoria, fixa ao rolar */
.cl-nav { position: sticky; top: 0; z-index: 40; background: rgba(246, 243, 235, 0.97); border-bottom: 1px solid var(--salvia); }
.cl-nav ul { list-style: none; margin: 0; padding: var(--e2) 0; display: flex; gap: var(--e2); overflow-x: auto; scrollbar-width: thin; }
.cl-nav a {
  display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding: 0 var(--e4); white-space: nowrap;
  border-radius: 999px; color: var(--mata); text-decoration: none; font-size: 0.9375rem; font-weight: 600;
}
.cl-nav a:hover { background: var(--salvia); }
.cl-nav a[aria-current="true"] { background: var(--mata); color: var(--branco); }

/* Lista */
.cl-lista { padding-top: var(--e8); }
.cl-vazio { padding: var(--e6); border-radius: var(--raio); background: var(--branco); border: 1px dashed var(--salvia); text-align: center; }
.categoria { scroll-margin-top: 5rem; margin-bottom: var(--e12); }
.categoria__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e3); }
.categoria__conta { font: 400 0.9375rem var(--fonte-ui); color: var(--tinta-suave); letter-spacing: 0; }
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.item {
  scroll-margin-top: 5rem; background: var(--branco); border: 1px solid var(--salvia); border-radius: var(--raio);
  padding: var(--e6); transition: border-color var(--transicao);
}
.item.marcado { border-color: var(--verde-chuva); background: #FBFCFA; }
.item__cabeca { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: center; }
.item__marcar { width: 28px; height: 28px; margin: 0; accent-color: var(--mata); cursor: pointer; }
.item__nome { margin: 0; font-size: 1.1875rem; }
.item__nome label { display: inline-flex; align-items: center; min-height: var(--alvo-toque); cursor: pointer; }
.item.marcado .item__nome label { text-decoration: line-through; text-decoration-color: var(--verde-chuva); }

.nivel {
  justify-self: end; padding: var(--e1) var(--e3); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.nivel--essencial { background: var(--mata); color: var(--branco); }
.nivel--complementar { background: var(--salvia); color: var(--mata); }
.nivel--reforcado { background: var(--areia); color: var(--mata); border-color: var(--ambar); }
.nivel--se-houver { background: var(--branco); color: var(--tinta-suave); border-color: var(--salvia); }

.item__dados { margin: var(--e4) 0 0; display: grid; gap: var(--e2); }
.item__dados div { display: grid; gap: 2px; align-content: start; }
.item__dados dt { font-size: 0.8125rem; font-weight: 700; color: var(--mata); text-transform: uppercase; letter-spacing: 0.04em; }
.item__dados dd { margin: 0; color: var(--tinta); }
.item__onde { margin: var(--e4) 0 0; padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: var(--papel); color: var(--tinta-suave); font-size: 0.9375rem; }

/* Faixas de preço (cor própria + nome escrito) */
.faixas { margin-top: var(--e4); display: grid; gap: var(--e3); }
.faixa { border-radius: var(--raio-p); border: 1px solid; border-top-width: 4px; padding: var(--e3) var(--e4) var(--e4); }
.faixa--barato { border-color: #3F6D63; background: #EEF5F1; }
.faixa--intermediario { border-color: #3C6A92; background: #EDF2F8; }
.faixa--top { border-color: var(--ambar); background: #FBF4E4; }
.faixa__rotulo { margin: 0 0 var(--e2); font: 700 0.875rem var(--fonte-ui); letter-spacing: 0.05em; text-transform: uppercase; }
.faixa--barato .faixa__rotulo { color: #2F5A50; }
.faixa--intermediario .faixa__rotulo { color: #2C5577; }
.faixa--top .faixa__rotulo { color: #6B4C12; }
.faixa__produtos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.produto { display: grid; gap: var(--e1); }
.produto + .produto { padding-top: var(--e3); border-top: 1px solid rgba(23, 62, 55, 0.12); }
.produto__nome { font-size: 0.9375rem; line-height: 1.4; color: var(--tinta); }
.produto__preco { font-weight: 700; color: var(--mata); }
.produto__botao { justify-self: start; margin-top: var(--e1); background: var(--branco); }
.produto__loja-impressa { display: none; }
.faixa__vazia { font-size: 0.875rem; color: var(--tinta-suave); font-style: italic; }

/* Revisão e coleção */
.cl-revisao { padding-bottom: var(--e12); }
.lembretes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.lembretes li { background: var(--branco); border: 1px solid var(--salvia); border-left: 4px solid var(--verde-chuva); border-radius: var(--raio-p); padding: var(--e3) var(--e4); }
.lembretes strong { color: var(--mata); }
.cl-colecao { background: var(--mata-profunda); color: var(--salvia); padding: var(--e12) 0; }
.cl-colecao h2 { color: var(--branco); }
.cl-colecao__interno { display: grid; gap: var(--e8); align-items: center; }
.cl-colecao__cartao { background: var(--papel); color: var(--tinta); border-radius: calc(var(--raio) + 4px); padding: var(--e6); border-top: 6px solid var(--ambar); text-align: center; }
.cl-colecao__preco { font-family: var(--fonte-titulo); font-size: 2rem; color: var(--mata); margin: 0 0 var(--e4); }
.cl-colecao__gratis { display: inline-flex; align-items: center; min-height: var(--alvo-toque); margin-top: var(--e3); color: var(--mata); font-weight: 600; }

@media (min-width: 40rem) {
  .passos-cl { grid-template-columns: repeat(3, 1fr); }
  .passos-cl li { grid-template-columns: 1fr; padding: var(--e6); }
  .passos-cl__num { grid-row: auto; margin-bottom: var(--e3); }
  .item__dados { grid-template-columns: 1fr 2fr 1fr; gap: var(--e4); }
}
@media (min-width: 52rem) {
  .faixas { grid-template-columns: repeat(3, 1fr); }
  .cl-colecao__interno { grid-template-columns: 1.3fr 1fr; }
}
@media (max-width: 30rem) {
  .item { padding: var(--e4); }
  .item__cabeca { grid-template-columns: auto 1fr; }
  .nivel { grid-column: 2; justify-self: start; }
  .filtro__desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .progresso__barra span, .item { transition: none; }
  html { scroll-behavior: auto; }
}

/* Impressão: só a lista, com caixas de marcar e nomes dos produtos */
@media print {
  .pular, .topo .botao, .cl-ferramentas, .cl-nav, .cl-colecao, .cl-vazio, .rodape__links, .produto__botao { display: none !important; }
  .item[hidden], .categoria[hidden] { display: block !important; }
  body { background: #fff; font-size: 11pt; }
  .cl-topo, .item, .faixa, .passos-cl li, .lembretes li, .afiliados { background: #fff !important; box-shadow: none; }
  .item { break-inside: avoid; padding: 8pt; border-color: #999; }
  .item.marcado .item__nome label { text-decoration: none; }
  .categoria { margin-bottom: 14pt; }
  .faixas { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .produto__loja-impressa { display: inline; font-size: 9pt; color: #333; }
  .produto__loja-impressa::before { content: "Loja: "; }
  .rodape { background: #fff; color: #000; border-top: 1px solid #999; padding: 10pt 0; }
  .rodape__aviso strong, .rodape__nome { color: #000; }
  .rodape__marca img { display: none; }
  a { color: inherit; text-decoration: none; }
}

/* Tela para quem ainda não pediu o Volume 1 */
.cl-portao { padding-top: var(--e12); padding-bottom: var(--e12); }
.cl-portao__cartao {
  background: var(--branco); border: 1px solid var(--salvia); border-top: 6px solid var(--ambar);
  border-radius: calc(var(--raio) + 4px); padding: var(--e8) var(--e6); max-width: 40rem;
}
.cl-portao__cartao p:not(.sobretitulo) { color: var(--tinta-suave); font-size: 1.0625rem; }
.cl-portao__cartao .botao { margin-top: var(--e2); }
.cl-portao__nota { margin: var(--e4) 0 0; font-size: 0.9375rem !important; }
@media print { .cl-portao { display: none !important; } }