/*
 * RASTREIO, PÁGINA DE VENDA (2026-10-11). Escopo: body.loja-produto-rastreio (loja/rastreio-produto.html).
 *
 * Vem DEPOIS de css/spi-venda.css, que traz o topo escuro e dourado, a moldura de celular, a faixa de
 * números, as linhas de diferencial, o bloco em destaque, os passos e o resto do modelo. Aqui só entra
 * o que é desta página: os cartões do texto do dono (dores, formatos, percursos, trilhas, cruzamentos,
 * os dois relatórios, o comparativo). Cor nova nenhuma: tudo vem dos tokens --sv-* do spi-venda.css.
 *
 * O tema verde claro que existia (css/rastreio-produto.css) saiu: o dono pediu o mesmo modelo das
 * outras páginas. O que dele continuava valendo (as listas com marca, o cartão recomendado, a grade
 * das trilhas, o aviso "Incluído em qualquer escolha") foi refeito aqui no tema escuro.
 */

/* títulos grandes das linhas: aqui são h2 (a página não tem um h2 de seção acima delas) */
.spi-venda .spi-dif h2, .spi-venda .spi-neuro h2 {
  max-width: none; margin: 0 0 .85rem; color: #fff;
  font-size: clamp(1.65rem, 6.2vw, 2.55rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
}
.spi-venda .spi-neuro h2 { font-size: clamp(1.85rem, 7vw, 3.15rem); }
.spi-venda .rs-linha { margin-top: clamp(1.4rem, 4vw, 2.4rem); }
.spi-venda .rs-primeira { border-top: 0; padding-top: 0; }
/* linha sem lista de pontos: o título fica no meio da altura das telas, e não colado no topo */
@media (min-width: 900px) {
  .spi-dif.rs-sem-pts { grid-template-areas: "cab vis"; }
  .rs-sem-pts .spi-dif-cab { align-self: center; }
}

/* faixa de números com três itens: a terceira ocupa a linha inteira no celular */
.rs-numeros-3 > div:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .rs-numeros-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-numeros-3 > div:last-child { grid-column: auto; }
}

/* ----------------------------------------------------------------------------- cartões do texto */
.rs-dores, .rs-formatos, .rs-modulos, .rs-versoes, .rs-comparacao, .rs-cruzes, .rs-track-list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: 1.6rem 0 0;
}
.rs-dores article, .rs-formato, .rs-modulo, .rs-versoes article, .rs-comparacao article, .rs-cruzes article, .rs-track-list article {
  position: relative; min-width: 0; padding: 1.2rem 1.25rem;
  background: var(--sv-painel); border: 1px solid var(--sv-fio); border-radius: 1.1rem;
}
.rs-dores article > span, .rs-formato > span, .rs-track-list i {
  color: var(--sv-ouro); font-size: .78rem; font-style: normal; font-weight: 800; letter-spacing: .12em;
}
.spi-venda .rs-dores h3, .spi-venda .rs-formato h3, .spi-venda .rs-modulo h3, .spi-venda .rs-versoes h3,
.spi-venda .rs-cruzes h3, .spi-venda .rs-track-list h3 {
  margin: .5rem 0 .4rem; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.rs-dores p, .rs-formato > p:not(.rs-recommended), .rs-modulo > p:not(.rs-modulo-num), .rs-versoes p,
.rs-cruzes p, .rs-track-list p {
  margin: 0; color: var(--sv-mudo); font-size: .95rem; line-height: 1.55;
}
.rs-modulo-num, .rs-versoes small, .rs-cruzes small, .rs-comparacao small {
  display: block; margin: 0; color: var(--sv-claro); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* listas com marca */
.rs-formato ul, .rs-modulo ul, .rs-versoes ul, .rs-comparacao ul {
  display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none;
}
.rs-formato li, .rs-modulo li, .rs-versoes li, .rs-comparacao li {
  position: relative; padding-left: 1.45rem; color: rgba(252, 244, 232, .88); font-size: .93rem; line-height: 1.5;
}
.rs-formato li::before, .rs-modulo li::before, .rs-versoes li::before, .rs-compare-good li::before {
  content: ""; position: absolute; left: 0; top: .22rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--sv-ouro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1306' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.rs-compare-muted li::before { content: "\00d7"; position: absolute; left: .15rem; top: -.05rem; color: var(--sv-mudo); font-size: 1.1rem; font-weight: 700; }
.rs-compare-muted li { color: var(--sv-mudo); }

/* ----------------------------------------------------------------------------- formatos */
.rs-formato { display: flex; flex-direction: column; }
.rs-formato > b { margin-top: auto; padding-top: 1rem; color: var(--sv-claro); font-size: .86rem; font-weight: 700; }
.rs-formato-destaque {
  border: 2px solid var(--sv-borda);
  background: radial-gradient(80% 60% at 50% 0%, rgba(241, 207, 107, .13), transparent 70%), var(--sv-painel);
  box-shadow: 0 0 0 1px rgba(241, 207, 107, .2), 0 20px 50px rgba(0, 0, 0, .45);
}
.rs-recommended {
  position: absolute; top: -.8rem; right: 1rem; margin: 0; padding: .3rem .75rem; border-radius: 999px;
  background: var(--ouro-grad); color: #1a1306; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

/* ----------------------------------------------------------------------------- trilhas */
.rs-track-list article { padding: 1.05rem 1.2rem; }
.spi-venda .rs-track-list h3 { font-size: 1.1rem; margin-top: .4rem; }
.rs-track-list p { font-size: .9rem; }
.rs-track-context {
  margin: .8rem 0 0; padding: 1.1rem 1.3rem; border: 1px solid rgba(241, 207, 107, .35); border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(241, 207, 107, .1), rgba(241, 207, 107, .02));
  color: rgba(252, 244, 232, .88); font-size: 1rem; line-height: 1.55;
}
.rs-track-context b { color: #fff; }

/* ----------------------------------------------------------------------------- cruzamentos */
.spi-dif > .rs-cruzes { grid-area: pts; margin: 0; }
.rs-cruzes article { padding-left: 4.1rem; }
.rs-cruzes article::before {
  content: "+"; position: absolute; left: 1.1rem; top: 1.1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--ouro-grad); color: #1a1306; font-size: 1.3rem; font-weight: 800; line-height: 1;
}
.spi-venda .rs-cruzes h3 { margin-top: .35rem; }

/* ----------------------------------------------------------------------------- módulos por idade */
.rs-modulos { margin-top: 1.8rem; }
.rs-modulo-num { margin-bottom: .1rem; }
.spi-venda .rs-modulo h3 { margin-top: .35rem; }

/* ----------------------------------------------------------------------------- os dois relatórios */
.spi-neuro .rs-versoes { margin-top: 1.2rem; }
.spi-neuro .rs-versoes article { background: rgba(255, 255, 255, .04); border-color: rgba(241, 207, 107, .24); }
.spi-neuro .rs-versoes article:last-child { border-top: 3px solid var(--sv-ouro); }
.rs-leituras { margin-top: 1rem; }
.rs-leituras .lp2-screen { background: rgba(255, 255, 255, .03); border-color: rgba(241, 207, 107, .24); box-shadow: none; }
.rs-leituras .lp2-screen-bar b { color: var(--sv-claro); }
.rs-leituras .lp2-screen-body { background: transparent; padding: .4rem; }
.rs-leituras .lp2-row { background: var(--sv-painel); border: 1px solid var(--sv-fio); }
.rs-leituras .lp2-row b { color: #fff; }
.rs-leituras .lp2-row span { color: var(--sv-mudo); }
.rs-leituras .lp2-row-src { background: rgba(241, 207, 107, .1); border-color: rgba(241, 207, 107, .3); }
.rs-leituras .lp2-row-src span { color: var(--sv-claro); }

/* ----------------------------------------------------------------------------- comparativo */
.rs-comparacao article { padding: 1.5rem 1.4rem; }
.rs-compare-good { border: 2px solid var(--sv-borda); box-shadow: 0 0 0 1px rgba(241, 207, 107, .2), 0 20px 50px rgba(0, 0, 0, .45); }
.rs-compare-muted small { color: var(--sv-mudo); }

/* ----------------------------------------------------------------------------- segurança e passos */
.rs-seguranca { margin-top: 1.4rem; }
.rs-passos-3 { grid-template-columns: minmax(0, 1fr); }

/* ----------------------------------------------------------------------------- tablet e PC */
@media (min-width: 620px) {
  .rs-track-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-versoes, .rs-comparacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-seguranca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .rs-passos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rs-dores, .rs-formatos, .rs-modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-formatos { margin-top: 1rem; }
  .rs-track-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spi-dif > .rs-cruzes { align-self: start; }
}
@media (max-width: 380px) {
  .rs-cruzes article { padding-left: 3.6rem; }
  .rs-cruzes article::before { left: .85rem; }
}