/*
 * Estilo da loja. Fica em cima do style.css do SPI, que já traz as variáveis de cor, a tipografia
 * e o desenho dos painéis. A loja reaproveita do SPI a grade, os painéis e o motor das telas, mas
 * NÃO a cara: topo, rodapé e tipografia de título são dela (bloco "Identidade própria da loja",
 * no fim deste arquivo). Decisão do dono, 2026-09-02: "aquela letra que está escrito ferramentas
 * para pediatras é a mesma letra lá do SPI, a mesma cor, aquela cor verdinha".
 *
 * Aqui mora só o que a loja tem e o SPI não: o estado de cada box (comprado, à venda, em breve),
 * o detalhe que abre quando alguém clica numa caixa que ainda não comprou, e a cor de cada caixa
 * por dentro.
 */

.loja-main { max-width: 1060px; margin: 0 auto; padding: 2.4rem 1.15rem 4rem; }

/* -----------------------------------------------------------------------------
   O CABEÇALHO. "Já comprei" mora aqui, e não no meio da página.
   ----------------------------------------------------------------------------- */
.loja-header-acoes { display: flex; align-items: center; gap: 1rem; }
.loja-link-entrar {
  font-size: .9rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  opacity: .85;
  padding: .35rem .1rem;
  border-bottom: 2px solid transparent;
  transition: opacity .14s ease, border-color .14s ease;
}
.loja-link-entrar:hover { opacity: 1; border-bottom-color: currentColor; }

/* -----------------------------------------------------------------------------
   O TOPO. Duas frases, alinhadas à esquerda.

   Antes era um bloco centralizado com título grande, subtítulo longo e três
   números: a forma de uma landing de aquisição. Esta página não é isso. Texto
   centralizado longo também se lê pior, porque o olho perde onde a próxima linha
   começa; para duas frases de orientação, esquerda é o certo.
   ----------------------------------------------------------------------------- */
.loja-topo { margin-bottom: 2.2rem; max-width: 46rem; }
.loja-topo-titulo { margin: 0 0 .5rem; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; }
.loja-topo-sub { margin: 0; max-width: 40rem; color: var(--color-muted); font-size: 1rem; line-height: 1.6; }

.loja-secao { margin: 0 0 2.6rem; }
.loja-secao-titulo { margin: 0 0 .35rem; font-size: 1.15rem; }
.loja-secao-sub { margin: 0 0 1.1rem; color: var(--color-muted); font-size: .95rem; }

/* -----------------------------------------------------------------------------
   OS CARTÕES.

   DUAS COLUNAS FIXAS, e nao auto-fit: a auditoria visual mediu o que o
   comentario anterior prometia errado. auto-fit com minimo de 19rem fechava em
   TRES colunas no container de 1023px, e o quarto produto (o SPI) ficava orfao
   numa segunda fileira com dois tercos vazios — auto-fit so colapsa trilha
   vazia, nao impede orfao. Com 4 produtos, 2x2 e simetrico e da cartoes
   maiores; abaixo de 620px vira coluna unica (media query no fim do bloco).
   ----------------------------------------------------------------------------- */
.loja-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
/*
 * TRES COLUNAS NO MONITOR LARGO, e o motivo é aritmética de órfão: com cinco caixas em duas
 * colunas sobra uma sozinha na terceira fileira, ao lado de um vazio do tamanho dela. Em três
 * colunas a conta vira 3 + 2, e a segunda fileira lê como fileira, não como sobra.
 *
 * E a última linha, quando sobra UMA, ocupa a largura toda em vez de ficar encolhida num canto.
 * Hoje quem cai nesse caso é o SPI Prontuário, que é o produto maior da vitrine: encolhido num
 * terço com metade da tela em branco ao lado, ele parecia o menor.
 */
@media (min-width: 1080px) {
  .loja-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loja-boxes > .loja-box:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 901px) and (max-width: 1079px) {
  .loja-boxes > .loja-box:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
   O CARTÃO DE PRODUTO.

   Ele era um retângulo branco com uma FOTO em cima, e as fotos eram o problema:
   o mockup do Plantão estava escrito em inglês ("Pediatric Emergency Toolkit",
   "Weight-Based Medication Dosing"), o do SPI era foto de tablet com ursinho de
   pelúcia, e o do Kit era um pedaço recortado de uma tela real que virava um
   fragmento solto no topo do cartão. Cinco cartões brancos iguais, com cinco
   imagens de origens diferentes, é o que faz uma loja parecer montada por
   ninguém. O dono disse na letra: "tira essa cara de IA".

   Agora cada produto É a cor dele, e a cor é a MESMA das imagens que vão para o
   checkout da Hotmart (loja/scripts/gerar-imagens-hotmart.js) e do topo da
   página de venda dele. O comprador vê o mesmo azul do Plantão no cartão, na
   página, no checkout e dentro da caixa: quatro lugares, uma identidade só.

   Sem foto nenhuma, de propósito. Uma foto honesta do produto exige um
   screenshot de verdade, em português, recortado para 16:7 sem decapitar texto.
   Enquanto isso não existir, cor e tipografia dizem mais que imagem emprestada.
   ----------------------------------------------------------------------------- */
.loja-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  text-align: left;
  padding: clamp(1.15rem, 3vw, 1.5rem);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(150deg, #14372a, #2d6b52);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  cursor: pointer;
  /* O movimento é curto e sem escala: cartão que cresce no hover empurra os
     vizinhos e a página inteira treme. Subir um fio e ganhar sombra basta. */
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.loja-box:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(20, 40, 30, .28); border-color: rgba(255,255,255,.28); }
.loja-box:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-primary); }
.loja-box:active { transform: translateY(0); }

/*
 * O BRILHO NO CANTO é o que impede o cartão de parecer um bloco de tinta chapada.
 * Fica atrás do conteúdo e não intercepta clique.
 */
.loja-box::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 6%, rgba(255,255,255,.16), transparent 46%),
    radial-gradient(circle at 4% 100%, rgba(0,0,0,.22), transparent 42%);
}
.loja-box > * { position: relative; z-index: 1; }

/* AS CORES (2026-10-10). Primeiro saíram ("aquelas coisas coloridas eu não sei se tá legal... queria
   algo mais sério"); depois voltaram um pouco ("volta um pouco de cor"). Cada caixa sai do tom do
   produto no canto e escurece até o preto: a cor identifica, sem gritar. */
.loja-box-plantao     { --cor-acento: #7cc6ea; background: linear-gradient(150deg, #0e3150, #0f1b26 58%, #0e0e0e); }
.loja-box-emergencia  { --cor-acento: #ffa78f; background: linear-gradient(150deg, #4a1714, #1d1010 58%, #0e0e0e); }
.loja-box-consultorio { --cor-acento: #e2bd67; background: linear-gradient(150deg, #16442f, #101e17 58%, #0e0e0e); }
.loja-box-central_ia  { --cor-acento: #d6a6ff; background: linear-gradient(150deg, #33194d, #170f21 58%, #0e0e0e); }
.loja-box-rastreio    { --cor-acento: #9fe3d6; background: linear-gradient(150deg, #113a46, #0e1e23 58%, #0e0e0e); }
.loja-box-agenda_plantao { --cor-acento: #f2b273; background: linear-gradient(150deg, #4a2a10, #1f150d 58%, #0e0e0e); }
/*
 * O SPI Prontuário é o único que ainda não está à venda, e a cor acompanha: grafite,
 * sem saturação. Ele continua na vitrine, mas não disputa atenção com o que dá para
 * comprar hoje. O selo "Em breve" diz; a cor não desmente.
 */
.loja-box-spi         { --cor-acento: #e6bb5a; background: linear-gradient(150deg, #3a2e12, #17140d 58%, #0e0e0e); }

.loja-box-selo {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .28rem .65rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.92); color: #14241d;
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
}
/* "Em breve" não é conquista: fica discreto, vazado, sem competir com "Liberada". */
.loja-box-breve .loja-box-selo { background: rgba(255,255,255,.12); color: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.28); box-shadow: none; }

.loja-box-corpo { display: flex; flex-direction: column; gap: .5rem; padding: 0; flex: 1 1 auto; }
.loja-box-nome { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.loja-box-resumo { font-style: normal; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.45; }

/* Os itens em lista, e não grudados por "·" num parágrafo truncado. Três linhas
   se leem de relance; um parágrafo cortado no meio da frase não se lê. */
.loja-box-itens { margin: .35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .38rem; }
.loja-box-itens li {
  position: relative; padding-left: 1.35rem;
  font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.92);
}
/* Check, e não bolinha: cada linha é uma coisa que a pessoa LEVA, e o visto diz isso. */
.loja-box-itens li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  font-size: .8rem; font-weight: 800; color: var(--cor-acento, #e2bd67);
}

/* -----------------------------------------------------------------------------
   O RODAPÉ DO CARTÃO: preço à esquerda, chamada à direita.

   Antes o preço era uma pílula minúscula dividindo espaço com um cadeado. Numa
   página que vende, preço é informação de primeira linha; e cadeado comunica
   "você não pode", que é o oposto do que se quer dizer a quem ainda não comprou.
   ----------------------------------------------------------------------------- */
.loja-box-fim {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.loja-box-preco { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--cor-acento, #e2bd67); }
.loja-box-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .9rem; font-weight: 600; color: #fff;
  margin-left: auto;
  padding: .42rem .85rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  transition: background .16s ease;
}
.loja-box:hover .loja-box-cta { background: rgba(255,255,255,.24); }
.loja-box-seta { display: inline-flex; width: 1.05rem; height: 1.05rem; transition: transform .16s ease; }
.loja-box-seta svg { width: 100%; height: 100%; }
.loja-box:hover .loja-box-seta { transform: translateX(3px); }

/* Já liberada: o produto continua igual, muda o que o rodapé promete. */
.loja-box-comprado { border-color: rgba(255,255,255,.4); }

/* Não comprada continua legível, só um passo mais discreta. Apagar demais
   transformaria a melhor propaganda da loja num rodapé que ninguém lê. */
.loja-box-breve { opacity: .9; }
.loja-box-breve:hover { opacity: 1; }

/* O login desce para o fim e fica estreito: ele serve a quem ja e cliente.
   (definicao unica: havia uma duplicata de 27rem que perdia para esta) */

@media (max-width: 640px) {
  .loja-main { padding: 1.6rem .9rem 3rem; }
  .loja-boxes { grid-template-columns: 1fr; }
}

.loja-detalhe {
  margin-top: 1.6rem;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.2rem;
  padding: 1.5rem;
}
.loja-detalhe h2 { margin: 0 0 0.2rem; font-family: var(--font-display); color: var(--color-primary-dark); }
.loja-detalhe-sub { margin: 0 0 1rem; color: var(--color-muted); font-size: 0.95rem; }
.loja-detalhe-itens { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }
.loja-detalhe-itens li { display: flex; gap: 0.55rem; font-size: 0.92rem; }
.loja-detalhe-itens li::before { content: "✓"; color: var(--color-gold-deep, var(--color-accent)); font-weight: 700; flex: none; }
.loja-breve { margin: 0; color: var(--color-muted); font-size: 0.9rem; }

/* A tela de aceite da isenção, antes de abrir a ferramenta comprada. Mesma largura de leitura
   das telas de login; o checkbox e o botão herdam o resto. */
.loja-aceite { max-width: 620px; margin: 2rem auto 0; }
.loja-aceite h2 { margin: 0 0 0.6rem; }
.loja-aceite .loja-aceite-check { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0; font-size: 0.95rem; }
.loja-aceite .loja-aceite-check input { margin-top: 0.2rem; }

/* Faixa de confiança logo abaixo do preço: teste grátis + garantia. É o quebra-objeção mais
   barato, e fica perto do preço de propósito, onde a dúvida "e se eu me arrepender?" aparece. */
.loja-garantia {
  margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; border-radius: 12px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem; line-height: 1.5; color: inherit;
}
.loja-garantia b { font-weight: 700; }

/* Identificacao do medico anunciante (Res. CFM 2.336/2023): linha pequena no hero e no fecho de
   cada pagina de venda. Discreta de proposito: e obrigacao, nao chamariz. */
.loja-cfm-linha { font-size: 0.8rem; opacity: 0.8; margin: 0.25rem 0 0.6rem; line-height: 1.45; }
.loja-spi-final .loja-cfm-linha { margin-top: 1rem; }

.loja-login { max-width: 420px; margin: 2.6rem auto 0; }
/* O "esqueci a senha": parece link, e nao botao, de proposito. E um caminho de socorro,
   nao a acao principal da tela; competir visualmente com o Entrar so confundiria. */
.loja-login .btn-link {
  display: block; margin: 0.9rem auto 0; background: none; border: none; cursor: pointer;
  color: var(--cor-acento, #2d6b52); font-size: 0.85rem; text-decoration: underline; padding: 0.2rem;
}

.loja-login label { display: block; margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; }
/* Os inputs vestem a roupa da pagina: sem isto ficavam com o cru do navegador
   (13px, borda inset cinza, canto reto) dentro de um cartao arredondado — a
   auditoria chamou de "site dos anos 90", e e o que era. */
.loja-login input {
  width: 100%; padding: .65rem .8rem;
  font: inherit; font-size: 1rem; color: var(--color-text);
  background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: .6rem;
}
.loja-login input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.loja-login button { margin-top: 1rem; width: 100%; }

@media (max-width: 620px) {
  .loja-box-selo { font-size: 0.7rem; padding: 0.22rem 0.55rem; }
  .loja-boxes { grid-template-columns: 1fr; }
  .loja-box { min-height: 0; }
  .loja-box .entrada-bloco-txt em { min-height: 0; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .loja-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ páginas vendidas */
.loja-pagina { max-width: 900px; }
.loja-voltar {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: none;
}
.loja-voltar:hover { color: var(--color-primary); }

.loja-start { max-width: 460px; }
.loja-start label { display: block; margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; }
.loja-start input { width: 100%; }
.loja-start button { margin-top: 1.1rem; width: 100%; }
.loja-nota { font-size: 0.8rem; margin: 0.7rem 0 0; }

/* ------------------------------------------------ Assistente de Prescrição Pediátrica
   É uma camada exclusiva da loja sobre o receituário compartilhado. O verde e o dourado vêm
   da identidade do SPI; as referências externas orientaram a hierarquia, não a aparência. */
.loja-rx-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: clamp(1.45rem, 5vw, 2.5rem);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(211, 171, 88, 0.24), transparent 34%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: 1.35rem;
  box-shadow: 0 18px 42px rgba(23, 62, 46, 0.18);
}
.loja-rx-hero::after {
  content: "Rx";
  position: absolute;
  right: -0.2rem;
  bottom: -2.2rem;
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 11rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}
.loja-rx-hero h2 {
  position: relative;
  max-width: 620px;
  margin: 0.25rem 0 0.7rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.02;
}
.loja-rx-hero > p:not(.loja-rx-kicker) { position: relative; max-width: 610px; margin: 0; color: rgba(255,255,255,.84); line-height: 1.65; }
.loja-rx-kicker { margin: 0; color: var(--color-gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.loja-rx-hero .loja-rx-kicker { color: var(--color-gold, #e2bd67); }
.loja-rx-beneficios { position: relative; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }
.loja-rx-beneficios span { padding: 0.42rem 0.72rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill); background: rgba(255,255,255,.08); font-size: 0.78rem; }
.loja-rx-beneficios b { color: var(--color-gold, #e2bd67); }
.loja-rx-start { max-width: none; padding: clamp(1.1rem, 4vw, 1.5rem); }
.loja-rx-start h2 { margin: 0.25rem 0 0.1rem; font-family: var(--font-display); color: var(--color-primary-dark); }
.loja-rx-start label { max-width: 520px; }
.loja-rx-start button { max-width: 520px; }

.loja-rx-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 1rem; }
.loja-rx-passo { display: flex; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.65rem 0.75rem; color: var(--color-muted); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 0.8rem; font-size: 0.78rem; font-weight: 700; }
.loja-rx-passo b { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; flex: none; border-radius: 50%; background: var(--color-secondary); color: var(--color-primary-dark); }
.loja-rx-passo-ok,
.loja-rx-passo-atual { color: var(--color-primary-dark); border-color: rgba(31, 77, 58, .28); }
.loja-rx-passo-atual { background: var(--color-secondary); }
.loja-rx-passo-atual b { color: #fff; background: var(--color-primary); }

.loja-rx-escolha { margin: 0 0 1rem; }
.loja-rx-escolha h3 { margin: 0.25rem 0 0.25rem; font-family: var(--font-display); color: var(--color-primary-dark); font-size: 1.45rem; }
.loja-rx-escolha > .muted { max-width: 720px; margin: 0 0 0.9rem; line-height: 1.55; }
.loja-rx-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.55rem; }
.loja-rx-categoria {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 72px;
  padding: 0.7rem;
  text-align: left;
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  cursor: pointer;
  font: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.loja-rx-categoria:hover { transform: translateY(-1px); border-color: var(--color-primary); box-shadow: 0 8px 20px rgba(31,77,58,.08); }
.loja-rx-categoria-ativa { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(31,77,58,.12); background: var(--color-secondary); }
.loja-rx-categoria > span:last-child { min-width: 0; }
.loja-rx-categoria strong { display: block; color: var(--color-primary-dark); font-size: 0.84rem; line-height: 1.18; }
.loja-rx-categoria small { display: block; margin-top: 0.25rem; color: var(--color-muted); font-size: 0.7rem; }
.loja-rx-cat-icone { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 0.7rem; font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--color-primary-dark); }
.loja-rx-cat-cor-0 { background: #faead5; }
.loja-rx-cat-cor-1 { background: #e7ddf5; }
.loja-rx-cat-cor-2 { background: #ddefe5; }
.loja-rx-cat-cor-3 { background: #f6dddd; }
.loja-rx-cat-cor-4 { background: #dcecf0; }
.loja-rx-cat-cor-5 { background: #dfe8f5; }
.loja-rx-cat-cor-6 { background: #f4ead3; }
.loja-rx-cat-cor-7 { background: #e6efe0; }
.loja-rx-select-alternativo { display: none !important; }
.loja-rx-assistente .rx-result { padding: 0.75rem 0.85rem; }
.loja-rx-assistente .rx-result:hover { background: var(--color-secondary); }

.loja-rx-revisao {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.9rem;
  padding: 0.8rem;
  color: var(--color-muted);
  background: #f6faf7;
  border: 1px solid rgba(31, 77, 58, .18);
  border-radius: 0.8rem;
  font-size: 0.76rem;
}
.loja-rx-revisao > strong { color: var(--color-primary-dark); font-size: 0.82rem; }
.loja-rx-revisao-bloqueada { background: var(--loja-ambar-lavado); border-color: var(--loja-ambar); }
.loja-rx-fontes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.loja-rx-fonte-citacao {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  color: var(--color-primary-dark);
  background: var(--loja-cartao);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  line-height: 1.35;
}
.loja-rx-fonte-generica { color: #8a5a1f; }

.loja-rx-emissor-campos { display: none !important; }
.loja-rx-emissor-resumo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f6faf7;
  border: 1px solid rgba(31, 77, 58, .18);
  border-radius: 0.9rem;
}
.loja-rx-emissor-resumo img { width: 84px; max-height: 70px; object-fit: contain; flex: none; }
.loja-rx-emissor-resumo > div { display: grid; gap: 0.15rem; min-width: 0; }
.loja-rx-emissor-resumo strong { color: var(--color-primary-dark); }
.loja-rx-emissor-resumo span { color: var(--color-muted); font-size: 0.78rem; }
.loja-rx-emissor-resumo a { margin-top: 0.35rem; color: var(--color-primary); font-size: 0.78rem; font-weight: 700; }

@media (max-width: 620px) {
  .loja-rx-passos { grid-template-columns: 1fr; }
  .loja-rx-passo { padding: 0.5rem 0.65rem; }
  .loja-rx-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .loja-rx-categoria { min-height: 86px; align-items: flex-start; flex-direction: column; gap: 0.45rem; padding: 0.65rem; }
  .loja-rx-cat-icone { width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; }
  .loja-rx-categoria strong { font-size: 0.78rem; }
  .loja-rx-beneficios span { font-size: 0.72rem; }
  .loja-rx-emissor-resumo { align-items: flex-start; }
  .loja-rx-emissor-resumo img { width: 64px; max-height: 56px; }
}

.loja-timbre { max-width: 520px; }
.loja-timbre label { display: block; margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; }
.loja-timbre input { width: 100%; }
.loja-timbre small { display: block; margin-top: 0.15rem; font-size: 0.75rem; }
.loja-timbre button { margin-top: 1.2rem; }
.loja-timbre-previa {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.loja-timbre-previa b { display: block; margin-bottom: 0.4rem; color: var(--color-muted); font-weight: 600; }
.loja-timbre-previa #tb-previa { color: var(--color-text); line-height: 1.5; }

/* CORREÇÃO DE UM DEFEITO QUE NÃO É NOSSO, e por isso mora aqui e não no style.css.
   .exam-field tem "flex: 1 1 220px", desenhado para a linha .exam-ident. O campo de indicação
   clínica, porém, é filho direto de .exam-wrap, que é coluna: em coluna, a base de 220px vira
   ALTURA, e abre um vão de 150px no meio da tela. Medido: isso acontece igual no exames.html do
   SPI hoje. Consertar lá é uma linha, mas lá é o SPI e esta pasta não o toca, então aqui a regra
   é limitada às telas da loja. Quando o dono autorizar mexer no style.css, o certo é corrigir na
   origem e apagar este bloco. */
.loja-body .exam-wrap > .exam-field { flex: 0 0 auto; }

/* ------------------------------------------------------- curvas e puericultura avulsas */
.loja-curvas-linha { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.9rem; }
.loja-curvas-linha label { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 150px; font-size: 0.8rem; color: var(--color-muted); }
.loja-curvas-linha input,
.loja-curvas-linha select { font: inherit; color: var(--color-text); padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: 0.6rem; background: var(--color-panel); }
.loja-curvas-form button { margin-top: 1.1rem; }
.loja-curvas-idade { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; }

.loja-curva-card { margin-top: 0.9rem; }
.loja-curva-card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.loja-curva-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin: 0; }
.loja-curva-num strong { font-size: 1.3rem; color: var(--color-primary-dark); }
.loja-curva-num span { font-size: 0.85rem; color: var(--color-muted); }
.loja-curva-classe { margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; }
.loja-nivel-alerta .loja-curva-classe { color: var(--color-accent, #b06a2c); }
.loja-nivel-grave .loja-curva-classe { color: #a3312b; }
.loja-curva { display: block; width: 100%; height: 190px; margin-top: 0.8rem; color: var(--color-primary); }

.loja-pu-form label { display: block; margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; }
.loja-pu-form input { width: 100%; max-width: 200px; }
.loja-pu-form button { margin-top: 1rem; }
.loja-pu-ficha { margin-top: 1rem; }
.loja-pu-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.loja-pu-top h3 { margin: 0; font-family: var(--font-display); color: var(--color-primary-dark); }
.loja-pu-auto { font-size: 0.72rem; color: var(--color-muted); background: var(--color-secondary); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); }
.loja-pu-check { margin-top: 1rem; padding: 0.9rem; background: var(--color-cream); border-radius: 0.9rem; }
.loja-pu-check > h4 { margin: 0 0 0.6rem; font-size: 0.9rem; }
.loja-pu-grupo h4 { margin: 0.7rem 0 0.2rem; font-size: 0.82rem; color: var(--color-primary); }
.loja-pu-grupo ul { margin: 0; padding-left: 1.1rem; font-size: 0.87rem; line-height: 1.5; }
.loja-pu-html { margin-top: 1.2rem; font-size: 0.9rem; line-height: 1.55; }
.loja-pu-html h4 { margin: 1rem 0 0.3rem; font-size: 0.9rem; color: var(--color-primary-dark); }
.loja-pu-html ul { padding-left: 1.1rem; }

/* ------------------------------------------------ paginação visual dos dois boxes
   O mesmo componente atende Pronto Atendimento e Consultório. Ele situa a ferramenta atual,
   permite avançar em sequência e ainda mantém o acesso direto a qualquer página do produto. */
.loja-menu {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.4rem;
  padding: 1rem;
  background: linear-gradient(145deg, var(--loja-cartao), var(--loja-suave));
  border: 1px solid rgba(31, 77, 58, .16);
  border-radius: 1.15rem;
  box-shadow: 0 12px 30px rgba(23, 62, 46, .07);
}
.loja-menu-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.loja-menu-identidade { display: grid; gap: 0.18rem; min-width: 0; }
.loja-menu-identidade > span { color: var(--color-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.loja-menu-voltar { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-primary-dark); text-decoration: none; font-weight: 700; }
.loja-menu-voltar:hover { color: var(--color-primary); }
.loja-menu-paginacao { display: flex; align-items: center; gap: .4rem; }
.loja-menu-paginacao a {
  display: flex;
  align-items: center;
  gap: .38rem;
  min-height: 36px;
  padding: .42rem .65rem;
  color: var(--color-primary-dark);
  background: var(--loja-cartao);
  border: 1px solid var(--color-border);
  border-radius: .7rem;
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
}
.loja-menu-paginacao a:hover { border-color: var(--color-primary); background: var(--color-secondary); }
.loja-menu-pagina-vazia { width: 1px; }
.loja-menu-progresso { height: 5px; overflow: hidden; margin-bottom: .8rem; background: rgba(31,77,58,.1); border-radius: 99px; }
.loja-menu-progresso i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-gold-deep, #b18438)); border-radius: inherit; transition: width .2s ease; }
.loja-menu-itens { display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; padding: .05rem .05rem .35rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.loja-menu-itens::-webkit-scrollbar { display: none; }
.loja-menu-item {
  flex: none;
  scroll-snap-align: start;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.75rem;
}
.loja-menu-item:hover { border-color: var(--color-primary); }
.loja-menu-atual { background: var(--color-primary); border-color: transparent; color: #fff; }
.loja-menu-outras { margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-muted); }
.loja-menu-outras a { color: var(--color-primary); }

@media (max-width: 620px) {
  .loja-menu { margin-inline: -.2rem; padding: .85rem; border-radius: 1rem; }
  .loja-menu-topo { align-items: flex-start; }
  .loja-menu-paginacao a { width: 38px; justify-content: center; padding: .4rem; }
  .loja-menu-paginacao a span { display: none; }
  .loja-menu-voltar { font-size: 1rem; }
}

@media print {
  .loja-menu,
  .loja-rx-revisao,
  .loja-rx-passos,
  .loja-rx-emissor-resumo { display: none !important; }
}

/* O topo do índice é a faixa da tela inicial do SPI (.home-hero, em ../style.css), que aqui
   veste a COR DA CAIXA (bloco "A cor da caixa por dentro", no fim). Aqui sobra só o respiro
   embaixo: antes era um título solto sobre o fundo creme, e o dono comparou com o SPI dele:
   "está muito pelado, não tem nada". */
.loja-caixa-topo { margin-bottom: 1.4rem; }

/* O índice da caixa usa os CARTÕES DO SPI (.hub-cards/.hub-card, em ../style.css). Aqui
   sobra só o espaçamento: a antiga .loja-ferramenta, uma lista de linhas empilhadas com
   coluna mínima de 210px (uma coluna só no celular), saiu inteira em 2026-08-30 a pedido
   do dono, que comparou as duas telas. Grade, sombra e estado de clique agora vêm de um
   lugar só, e as duas mudam juntas. */
.loja-ferramentas { margin-top: 1rem; }

.loja-caixa-itens { margin-top: 1.6rem; }
.loja-caixa-itens h3 { margin: 0 0 0.7rem; font-size: 1rem; }
.loja-caixa-itens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.loja-caixa-itens li { display: flex; gap: 0.55rem; font-size: 0.9rem; }
.loja-caixa-itens li::before { content: "✓"; color: var(--color-gold-deep, var(--color-accent)); font-weight: 700; flex: none; }
.loja-caixa-outras { margin-top: 1.2rem; text-align: center; }

/* -------------------------------------------------------------- página do SPI Prontuário */
.loja-spi { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.loja-spi-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.6rem, 6vw, 4rem);
  color: #fff;
  background:
    radial-gradient(circle at 88% 14%, rgba(226, 189, 103, .22), transparent 29%),
    linear-gradient(135deg, #102d22, var(--color-primary));
  border-radius: 1.5rem;
  box-shadow: 0 24px 55px rgba(16, 45, 34, .2);
}
/* Teto de 3.8rem, e nao 4.5: a 72px a palavra "acompanhamento," media 617px numa
   coluna de 535px e invadia o painel do hero do Consultorio. 60.8px cabe com
   folga e suaviza o salto para os h2 de secao. */
.loja-spi-hero h1 { max-width: 680px; margin: .35rem 0 1rem; color: #fff; font-family: var(--font-display); font-size: clamp(2.35rem, 5.2vw, 3.8rem); line-height: 1.02; }
.loja-spi-hero p:not(.loja-rx-kicker) { max-width: 650px; color: rgba(255,255,255,.8); line-height: 1.65; }
.loja-spi-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.45rem; }
/* Fantasma sobre fundo escuro vira botao de verdade: com so border-color ele nao
   tinha borda nem padding (26px de altura no toque) e, no cabecalho, verde sobre
   verde dava ~2:1 de contraste — o "Entrar" praticamente sumia. */
.loja-spi-hero .btn-ghost, .loja-spi-final .btn-ghost {
  color: #fff; padding: .5rem 1rem;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
}
.loja-spi-em-breve { color: rgba(255,255,255,.68); font-size: .8rem; }
.loja-spi-painel { display: grid; gap: .45rem; padding: 1.2rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 1.15rem; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.loja-spi-painel span { margin-top: .45rem; color: rgba(255,255,255,.56); font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; }
.loja-spi-painel strong { padding-bottom: .65rem; border-bottom: 1px solid rgba(255,255,255,.1); font-family: var(--font-display); font-size: 1.08rem; }
.loja-spi-painel strong:last-child { border: 0; padding-bottom: 0; }
.loja-spi-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1rem 0 0; }
.loja-spi-numeros div { display: grid; gap: .2rem; padding: 1rem 1.15rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: 1rem; }
.loja-spi-numeros strong { color: var(--color-primary-dark); font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; }
.loja-spi-numeros span { color: var(--color-muted); font-size: .8rem; }
.loja-spi-secao { margin-top: clamp(3rem, 8vw, 6rem); }
.loja-spi-secao > h2, .loja-spi-final h2 { max-width: 720px; margin: .35rem 0 .8rem; color: var(--color-primary-dark); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.35rem); line-height: 1.05; }
.loja-spi-intro { max-width: 680px; color: var(--color-muted); line-height: 1.65; }
.loja-spi-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1.5rem; }
.loja-spi-grade-3 { grid-template-columns: repeat(3, 1fr); }
.loja-spi-grade article, .loja-spi-colunas > div { padding: 1.25rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: 1.05rem; }
.loja-spi-grade article > b { display: block; margin-bottom: 1.3rem; color: var(--color-gold-deep, #b18438); font-family: var(--font-display); font-size: 1.4rem; }
.loja-spi-grade h3, .loja-spi-colunas h3 { margin: 0 0 .45rem; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 1.25rem; }
.loja-spi-grade p, .loja-spi-colunas p { margin: 0; color: var(--color-muted); line-height: 1.58; font-size: .9rem; }
.loja-spi-secao-escura { padding: clamp(1.5rem, 5vw, 3rem); color: #fff; background: #102d22; border-radius: 1.35rem; }
.loja-spi-secao-escura h2 { color: #fff; }
.loja-spi-secao-escura .loja-rx-kicker { color: #f0cc7a; }
.loja-spi-secao-escura > p:last-child { max-width: 760px; margin: 1.4rem 0 0; color: rgba(255,255,255,.72); line-height: 1.65; }
.loja-spi-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .55rem; margin-top: 1.4rem; }
.loja-spi-lista span { padding: .8rem .9rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; font-size: .88rem; }
/* Os chips brancos translucidos foram desenhados para a secao escura; em secao
   clara viravam texto solto (borda e fundo imperceptiveis sobre o creme — a
   auditoria achou a secao de especialidades "inacabada"). Fora da escura, chip
   de cartao branco com borda, como os vizinhos. */
.loja-spi-secao:not(.loja-spi-secao-escura) .loja-spi-lista span { background: var(--loja-cartao); border-color: var(--color-border); }
.loja-spi-colunas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1.4rem; }
.loja-spi-colunas ul { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--color-muted); line-height: 1.75; font-size: .9rem; }
.loja-spi-integracoes { padding: clamp(1.4rem, 5vw, 2.6rem); background: var(--loja-suave); border-radius: 1.35rem; }
.loja-spi-final { margin-top: clamp(3rem, 8vw, 6rem); padding: clamp(1.6rem, 6vw, 3.5rem); color: #fff; background: linear-gradient(135deg, var(--color-primary), #102d22); border-radius: 1.4rem; }
.loja-spi-final h2 { color: #fff; }
.loja-spi-final > p:not(.loja-rx-kicker) { color: rgba(255,255,255,.75); }

/* Páginas comerciais dos três produtos. A base é compartilhada para a vitrine parecer uma
   família, mas cada produto ganha uma cor e uma narrativa próprias. */
.loja-produto-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.loja-produto-nav-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.loja-produto-nav-links a { padding: .42rem .7rem; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; font-size: .76rem; }
.loja-produto-nav-links a:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }
.loja-produto-plantao .loja-spi-hero { background: radial-gradient(circle at 88% 14%, rgba(101,188,231,.24), transparent 30%), linear-gradient(135deg, #071f35, #124e72); }
.loja-produto-consultorio .loja-spi-hero { background: radial-gradient(circle at 88% 14%, rgba(226,189,103,.22), transparent 30%), linear-gradient(135deg, #14372a, #2d6b52); }
/*
 * KIT EMERGÊNCIA: vermelho de urgência, e não o azul do Plantão.
 *
 * A cor aqui faz trabalho de produto, não de enfeite. As duas caixas vivem lado a lado na
 * vitrine e vendem o mesmo contexto clínico por preços diferentes; se as páginas tiverem a mesma
 * cara, o comprador acha que é a mesma coisa mais barata e escolhe pelo preço, sem entender o
 * que está deixando para trás. Cores diferentes é o primeiro sinal de que são recortes
 * diferentes, e ele chega antes de qualquer texto ser lido.
 */
.loja-produto-emergencia .loja-spi-hero { background: radial-gradient(circle at 88% 14%, rgba(255,145,120,.26), transparent 30%), linear-gradient(135deg, #3a0f10, #8c2018); }
.loja-produto-emergencia .loja-spi-final { background: linear-gradient(135deg, #8c2018, #3a0f10); }
/* DOUTOR CONTEUDO: roxo, pelo mesmo motivo que o Kit e vermelho.
   Ela herdava o verde padrao, que e o verde do Consultorio, e as duas ficavam iguais na vitrine
   sendo produtos de mundos diferentes (uma atende, a outra publica). O roxo tambem e a cor da
   imagem que vai para o checkout da Hotmart (loja/scripts/gerar-imagens-hotmart.js): pagina e
   pagamento vestindo cores diferentes e o detalhe que faz parecer que o checkout saiu do site. */
.loja-produto-central .loja-spi-hero { background: radial-gradient(circle at 88% 14%, rgba(214,166,255,.24), transparent 30%), linear-gradient(135deg, #241436, #5b2d82); }
.loja-produto-central .loja-spi-final { background: linear-gradient(135deg, #5b2d82, #241436); }
.loja-produto-rastreio .loja-spi-hero { background: radial-gradient(circle at 88% 14%, rgba(159,227,214,.22), transparent 30%), linear-gradient(135deg, #0f2e3d, #1d6b73); }
.loja-produto-rastreio .loja-spi-final { background: linear-gradient(135deg, #1d6b73, #0f2e3d); }
.loja-produto-plantao .loja-spi-final { background: linear-gradient(135deg, #124e72, #071f35); }
.loja-produto-consultorio .loja-spi-final { background: linear-gradient(135deg, #2d6b52, #14372a); }
.loja-hero-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin-top: 1.15rem; }
.loja-hero-preco del { color: rgba(255,255,255,.48); font-size: .92rem; }
.loja-hero-preco strong { color: #f0cc7a; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.35rem); }
.loja-hero-preco span { color: rgba(255,255,255,.85); font-size: .95rem; }
.loja-produto-visual { display: grid; gap: .6rem; padding: 1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 1.15rem; }
.loja-produto-visual::before { content: ""; display: block; aspect-ratio: 16 / 9; border-radius: .8rem; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.loja-produto-plantao .loja-produto-visual::before { background-image: url("../images/plantao-dashboard.png"); }
.loja-produto-consultorio .loja-produto-visual::before { background-image: url("../images/consultorio-dashboard.png"); }
/* O Kit mostra a MESMA tela de doses do Plantão, e isso é honesto: é literalmente a mesma
   ferramenta, servida pelo mesmo arquivo. Inventar uma imagem diferente prometeria outra coisa. */
.loja-produto-emergencia .loja-produto-visual::before { background-image: url("../images/plantao-dashboard.png"); }
/* DOIS NIVEIS, e nao um, e a diferenca nao e descuido de contagem.

   url() de CSS resolve pela FOLHA, e esta folha mora em loja/css/. Entao "../images/" daqui
   apontava para loja/images/, que existe e tem outras duas imagens, mas nao esta. O arquivo mora
   em images/, na raiz do repositorio.

   O engano fica invisivel porque loja/js/vitrine.js:91 usa a MESMA string, "../images/tela-dose.png",
   e ali esta certo: caminho em JavaScript resolve pela PAGINA, e a pagina e loja/spi.html, entao
   ".." ja chega na raiz. Duas linhas iguais, dois resolvedores diferentes, uma certa e uma errada.

   Medido antes: 404 em /loja/images/tela-dose.png, e o bloco do mockup ficava vazio na pagina que
   vende o SPI. */
.loja-produto-central .loja-produto-visual::before { background-image: url("../images/central-dashboard.svg"); }
/* Aqui existia um fallback por exclusao: .loja-spi-body:not(plantao):not(consultorio):not(central).
   Ele vazava duas vezes. A Central estreou vestindo seringa e ampola. Depois o Kit
   Emergencia entrou com regra propria, so que a corrente de :not() tinha
   especificidade maior e vinha depois no arquivo: a regra nova nasceu morta e o Kit
   apareceu com o painel do SPI. Cada produto agora declara a sua imagem pelo nome, e
   produto sem regra fica sem imagem de fundo (visivel na hora, e nao errado em silencio). */
.loja-produto-spi .loja-produto-visual::before { background-image: url("../images/spi-dashboard.svg"); }
.loja-produto-visual-top { display: flex; justify-content: space-between; gap: .5rem; color: rgba(255,255,255,.68); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.loja-produto-visual-card { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .72rem .8rem; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); border-radius: .78rem; }
.loja-produto-visual-card b { color: #fff; font-size: .86rem; }
.loja-produto-visual-card span { color: rgba(255,255,255,.68); font-size: .75rem; }
.loja-produto-visual-card em { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #f0cc7a; font-style: normal; font-weight: 700; }
.loja-problema { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 5vw, 3rem); align-items: start; }
/* O h2 desta secao mora DENTRO da coluna do grid, entao o seletor de filho
   direto (.loja-spi-secao > h2) nao o alcancava e ele caia no h2 base de 24px,
   parecendo acidente ao lado de irmaos de 53.6px. Tamanho intermediario
   deliberado: titulo de coluna, nao titulo de secao inteira. */
.loja-problema h2 { margin: .35rem 0 .8rem; color: var(--color-primary-dark); font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.12; }
.loja-problema-lista { display: grid; gap: .65rem; }
.loja-problema-lista div { padding: .9rem 1rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: .9rem; }
.loja-problema-lista b { display: block; color: var(--color-primary-dark); font-size: .92rem; }
.loja-problema-lista span { color: var(--color-muted); font-size: .82rem; line-height: 1.45; }
.loja-modulos { display: grid; gap: .8rem; margin-top: 1.5rem; }
.loja-modulo { display: grid; grid-template-columns: minmax(170px,.35fr) 1fr; gap: 1.3rem; align-items: start; padding: 1.25rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: 1.05rem; }
.loja-modulo-cab { display: grid; gap: .3rem; }
.loja-modulo-cab span { color: var(--color-gold-deep,#a57932); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.loja-modulo h3 { margin: 0; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 1.35rem; }
.loja-modulo p { margin: 0 0 .65rem; color: var(--color-muted); line-height: 1.55; font-size: .88rem; }
.loja-modulo ul { margin: 0; padding-left: 1.05rem; color: var(--color-text); font-size: .84rem; line-height: 1.65; }
.loja-jornada { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; margin-top: 1.4rem; }
.loja-jornada div { padding: 1rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: .95rem; }
.loja-jornada b { display: block; margin-bottom: .45rem; color: var(--color-gold-deep,#a57932); font-family: var(--font-display); font-size: 1.2rem; }
.loja-jornada h3 { margin: 0 0 .3rem; color: var(--color-primary-dark); font-size: 1.05rem; }
.loja-jornada p { margin: 0; color: var(--color-muted); font-size: .82rem; line-height: 1.45; }
.loja-oferta-grade { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin-top: 1.5rem; }
.loja-oferta { position: relative; display: flex; flex-direction: column; padding: 1.35rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: 1.1rem; box-shadow: 0 12px 30px rgba(16,45,34,.07); }
.loja-oferta-destaque { border: 2px solid var(--color-gold-deep,#b18438); }
.loja-oferta-selo { position: absolute; right: 1rem; top: 1rem; padding: .28rem .58rem; color: #fff; background: var(--color-primary); border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.loja-oferta h3 { margin: 0; color: var(--color-primary-dark); font-family: var(--font-display); font-size: 1.45rem; }
.loja-oferta-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: .38rem; margin: .85rem 0 .2rem; }
.loja-oferta-preco del { width: 100%; color: var(--color-muted); font-size: .8rem; }
.loja-oferta-preco strong { color: var(--color-primary-dark); font-family: var(--font-display); font-size: 2.15rem; }
.loja-oferta-preco span { color: var(--color-muted); font-size: .82rem; }
.loja-oferta-parcela { margin: 0 0 .9rem; color: var(--color-gold-deep,#9a6e28); font-weight: 700; font-size: .85rem; }
.loja-oferta ul { flex: 1; margin: 0 0 1.1rem; padding-left: 1.05rem; color: var(--color-text); font-size: .84rem; line-height: 1.75; }
.loja-oferta .btn-cta-primary { width: 100%; text-align: center; }
/* O link para a vitrine e SECUNDARIO: quando ele vestia btn-cta-primary, o botao
   mais vivo da secao de preco era o que levava PARA FORA da pagina de venda. */
.loja-oferta-secundario {
  display: block; width: 100%; padding: .7rem 1rem; text-align: center;
  color: var(--color-primary-dark); font-weight: 600; text-decoration: none;
  border: 1px solid var(--color-border); border-radius: 999px;
}
.loja-oferta-secundario:hover { border-color: var(--color-primary); }
/* Sem checkout o botao NAO se apaga: a auditoria mediu opacity .62 nos tres CTAs
   de compra e o unico botao vivo era o que levava PARA FORA da pagina. O estado
   e dito pelo aviso ao lado; o clique rola ate ele (produto-venda.js). */
.loja-checkout-indisponivel { cursor: pointer; }
.loja-checkout-aviso { display: block; margin-top: .55rem; color: var(--color-muted); text-align: center; font-size: .85rem; }
.loja-checkout-aviso-destaque { color: var(--color-primary-dark); font-weight: 700; }
.loja-faq { display: grid; gap: .55rem; margin-top: 1.25rem; }
.loja-faq details { padding: .9rem 1rem; background: var(--loja-cartao); border: 1px solid var(--color-border); border-radius: .9rem; }
.loja-faq summary { cursor: pointer; color: var(--color-primary-dark); font-weight: 700; font-size: .9rem; }
.loja-faq p { margin: .65rem 0 0; max-width: 65ch; color: var(--color-muted); font-size: .95rem; line-height: 1.55; }
.loja-dado-nota { margin-top: 1rem; padding: .9rem 1rem; color: var(--color-muted); background: var(--loja-suave); border-radius: .85rem; font-size: .82rem; line-height: 1.55; }


@media (max-width: 760px) {
  .loja-spi-hero { grid-template-columns: 1fr; }
  .loja-spi-painel { display: none; }
  .loja-spi-numeros, .loja-spi-grade, .loja-spi-grade-3, .loja-spi-colunas { grid-template-columns: 1fr; }
  .loja-spi-lista { grid-template-columns: 1fr; }
  .loja-problema, .loja-modulo { grid-template-columns: 1fr; }
  .loja-jornada { grid-template-columns: repeat(2,1fr); }
  .loja-oferta-grade { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .loja-jornada { grid-template-columns: 1fr; }
  .loja-produto-nav-links { display: none; }
}

/* --------------------------------------------------------------------------- Meu perfil */
.loja-perfil { max-width: 560px; }
.loja-perfil h3 { margin: 1.6rem 0 0.6rem; font-size: 0.95rem; color: var(--color-primary); }
.loja-perfil label { display: block; margin-top: 0.9rem; font-size: 0.85rem; font-weight: 600; }
.loja-perfil input[type="text"] { width: 100%; }
.loja-perfil small { display: block; margin-top: 0.15rem; font-size: 0.75rem; }
.loja-perfil button { margin-top: 1.2rem; }

.loja-perfil-logo-previa {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 0.8rem;
  background: var(--color-cream);
  border: 1px dashed var(--color-border);
  border-radius: 0.9rem;
  margin-bottom: 0.7rem;
}
.loja-perfil-logo-previa img { max-height: 76px; max-width: 100%; }
.loja-perfil-logo input[type="file"] { font-size: 0.85rem; }
.loja-perfil-logo button { margin-top: 0.6rem; }

.loja-perfil-previa { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; }
.loja-perfil-previa b { display: block; margin-bottom: 0.5rem; color: var(--color-muted); font-weight: 600; }
.loja-perfil-papel {
  background: var(--loja-cartao);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  padding: 1rem;
  text-align: center;
  line-height: 1.5;
  color: #222;
}
.loja-perfil-papel img { max-height: 60px; max-width: 70%; margin-bottom: 0.6rem; }

/* ------------------------------------------------------- mostruário de telas do produto
   Pedido do dono: as figuras que ilustram a propaganda do SPI têm de aparecer também nas
   páginas do PA e do Consultório. A moldura de tela (.lp2-screen, .lp2-row) vem do style.css
   do SPI de propósito: é a MESMA tela da página de entrada, e reaproveitar em vez de copiar é
   o que impede as duas de envelhecerem diferentes. Aqui mora só o arranjo em grade. */
.loja-telas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; align-items: start; }
.loja-tela { margin: 0; }
.loja-tela figcaption { margin-top: .6rem; padding: 0 .3rem; color: var(--color-muted); font-size: .78rem; line-height: 1.45; }
.loja-tela .lp2-row b { font-size: .82rem; }
.loja-tela .lp2-row span { color: var(--color-muted); font-size: .76rem; white-space: nowrap; }
.loja-tela .lp2-row-src span { color: var(--color-primary-dark); }

@media (max-width: 900px) { .loja-telas-grade { grid-template-columns: 1fr; } }

/* ============================== a lista de escalas ==============================
   O DONO OLHOU TRINTA DESTES EMPILHADOS: "aquelas caixinhas ali. Faz botãozinho mais bonitinho,
   com um breve resumo também, do pra que que serve, qual a indicação dessa escala."

   E o diagnóstico foi mais simples do que parecia: `.loja-esc-item` não tinha UMA linha de CSS
   em lugar nenhum. O navegador desenhava o botão cru dele. Medido antes de mexer:

     border ......... 2px outset black
     padding ........ 1px 6px
     border-radius .. 0
     altura ......... 21px
     display ........ inline-block, num container block

   O nome ainda colava na faixa etária, porque <strong> e <span> são inline e nada os separava:
   saía "M-CHAT (23 itens, versão antiga)16-30 meses".

   Agora é grade de cartões, com três informações de pesos diferentes: o nome, a faixa etária como
   etiqueta, e a indicação. A indicação é a que responde "por que esta e não a outra", que é a
   pergunta de quem encara uma lista de trinta.
   =============================================================================== */
.loja-esc-grupo { margin-bottom: 2rem; }
.loja-esc-grupo h3 {
  margin: 0 0 .8rem;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}

/* auto-fill, e não auto-fit: com auto-fit, uma categoria de UMA escala (e existem) faria aquele
   cartão sozinho esticar por toda a largura da tela, o que fica pior que a caixinha de antes. */
.loja-esc-itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .7rem;
  align-items: stretch;
}

.loja-esc-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  width: 100%;
  height: 100%;
  padding: .85rem .95rem;
  text-align: left;
  font: inherit;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.loja-esc-item:hover {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}
.loja-esc-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.loja-esc-nome {
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.3;
  color: var(--color-text);
}

/* O CAMPO `ageRange` NÃO É UMA FAIXA ETÁRIA, e descobrir isso mudou o desenho.

   A primeira versão fez dele uma etiqueta arredondada, do tipo "16-30 meses". Ficou bom em três
   escalas e ridículo no resto. Medindo os 59 arquivos: 48 têm mais de 22 caracteres, e o campo
   guarda frases inteiras de população, não idades. Os extremos:

     164  "Criança que não consegue autoavaliar a dor por deficiência intelectual, comprometimento
           neurológico ou paralisia cerebral (é a versão com validação nessa população)"
     125  "Crianças de 2 meses a 7 anos não-verbais ou incapazes de se autoavaliar…"
      54  "Adultos com suspeita clínica de embolia pulmonar (TEP)"

   Etiqueta com 164 caracteres não é etiqueta: é parágrafo com borda arredondada em volta. Então
   vira LINHA DE TEXTO, com peso próprio, e serve às duas pontas: "16-30 meses" continua legível
   como linha, e a frase de população deixa de ser espremida.

   E repare que muitas dessas frases JÁ SÃO metade do que o dono pediu de resumo. O dado existia;
   estava amassado dentro de uma caixinha. */
.loja-esc-faixa {
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.loja-esc-ind {
  font-size: .84rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* No celular a grade vira coluna única: dois cartões lado a lado em 360px espremeriam a indicação
   a duas palavras por linha, e aí ela deixa de ser lida. */
@media (max-width: 560px) {
  .loja-esc-itens { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ faixa do combo
   Ela mora entre a grade das caixas e o rodapé, e precisa parecer OUTRA coisa, e não um sexto
   cartão: quem bate o olho tem de entender que é uma forma de comprar as quatro, e não uma quinta
   caixa para escolher. Daí o formato deitado, o fundo escuro e o dourado, que na loja já é a cor
   do preço (.loja-hero-preco strong). */
.loja-combo {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
  gap: clamp(1.2rem, 4vw, 2.6rem); align-items: center;
  padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: 1.25rem; color: #fff;
  background: radial-gradient(circle at 90% 10%, rgba(240,204,122,.24), transparent 40%),
    linear-gradient(135deg, #100e09, #3d2c10);
  box-shadow: 0 18px 44px rgba(20, 16, 10, .22);
}
.loja-combo .loja-rx-kicker { color: #f0cc7a; }
.loja-combo h2 { margin: .2rem 0 .8rem; font-family: var(--font-display); font-size: clamp(1.25rem, 3.2vw, 1.7rem); line-height: 1.2; }
.loja-combo-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; }
.loja-combo-lista li { display: flex; align-items: center; gap: .5rem; font-size: .93rem; color: rgba(255,255,255,.92); }
.loja-combo-lista li::before { content: "✓"; color: #f0cc7a; font-weight: 700; }
.loja-combo-oferta { display: grid; gap: .3rem; justify-items: start; }
.loja-combo-soma { margin: 0; font-size: .9rem; color: rgba(255,255,255,.66); }
/* O convite no lugar do preço (a vitrine não mostra valor antes do clique, #520). */
.loja-combo-convite { margin: 0 0 .7rem; max-width: 28ch; font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.9); }
.loja-combo-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin: 0; }
.loja-combo-preco strong { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); color: #f0cc7a; }
.loja-combo-preco span { font-size: .92rem; color: rgba(255,255,255,.85); }
.loja-combo-economia { margin: 0 0 .7rem; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.94); }
@media (max-width: 720px) {
  .loja-combo { grid-template-columns: 1fr; }
  .loja-combo-lista { grid-template-columns: 1fr; }
}

/* COMBO: o bronze da faixa da vitrine e da imagem que vai para o checkout, pelo mesmo motivo que
   o Kit é vermelho e o Doutor Conteúdo é roxo. Aqui a cor faz um trabalho a mais: o combo é o
   produto caro da vitrine, e o dourado é a cor que a loja já usa para preço (.loja-hero-preco
   strong). */
.loja-produto-combo .loja-spi-hero { background: radial-gradient(circle at 90% 10%, rgba(240,204,122,.26), transparent 38%), linear-gradient(135deg, #100e09, #3d2c10); }
.loja-produto-combo .loja-spi-final { background: linear-gradient(135deg, #3d2c10, #100e09); }
/* SEM MOCKUP, E ISSO É DECISÃO ESCRITA, não regra esquecida.
   As outras páginas mostram uma foto da tela porque vendem UMA ferramenta. O combo vende quatro
   caixas, e escolher a tela de uma delas para representar as quatro faria a foto mentir sobre o
   que está sendo comprado. O painel aqui lista as quatro com o preço de cada uma, que é a
   informação que o comprador do combo realmente quer ver.
   loja/tests/hero-imagem.test.js aceita esta linha justamente por ser explícita: o que ele reprova
   é a página que fica sem imagem por descuido. */
.loja-produto-combo .loja-produto-visual::before { display: none; }
.loja-produto-rastreio .loja-produto-visual::before { display: none; }

/* ------------------------------------------------------------- chegada do checkout
   O painel que quem acabou de pagar vê. Fica no topo, antes das caixas, e precisa parecer
   RESPOSTA e não propaganda: por isso o verde da marca e não o dourado do preço. */
.loja-obrigado {
  display: grid; gap: .45rem; margin-bottom: 1.6rem;
  padding: clamp(1.1rem, 3.5vw, 1.7rem);
  border-radius: 1.1rem; color: #fff;
  background: radial-gradient(circle at 88% 12%, rgba(226,189,103,.22), transparent 40%),
    linear-gradient(135deg, #102d22, #2d6b52);
  box-shadow: 0 14px 34px rgba(16, 45, 34, .18);
}
.loja-obrigado .loja-rx-kicker { color: #f0cc7a; }
.loja-obrigado h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 3.4vw, 1.6rem); line-height: 1.2; }
.loja-obrigado p { margin: 0; color: rgba(255,255,255,.92); font-size: .95rem; line-height: 1.5; max-width: 46rem; }
.loja-obrigado-acoes { margin-top: .7rem; }

/* ------------------------------------------------------------------ quem fez as ferramentas
   Fica claro, e não escuro como os cartões: depois de cinco blocos coloridos, um bloco claro é
   o que faz esta seção parecer conversa e não mais um anúncio. É a parte da página em que o
   autor fala em primeira pessoa. */
.loja-autor {
  margin: 2.2rem 0 0;
  padding: clamp(1.3rem, 4vw, 2.2rem);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
}
.loja-autor h2 { margin: .2rem 0 .1rem; font-family: var(--font-display); font-size: clamp(1.2rem, 3.2vw, 1.55rem); color: var(--color-primary-dark); line-height: 1.2; }
.loja-autor-titulo { margin: 0 0 .9rem; color: var(--color-muted); font-size: .95rem; font-weight: 600; }
.loja-autor-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.loja-autor-lista li { position: relative; padding-left: 1.3rem; font-size: .95rem; line-height: 1.45; color: var(--color-text); }
.loja-autor-lista li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-gold-deep, #b18438); font-weight: 800; font-size: .85rem; }
/* Dentro das páginas de venda escuras, o bloco continua claro e ganha respiro em volta. */
.loja-spi .loja-autor { margin: 2.6rem 0; }

/* O que ainda não está à venda ocupa a largura toda, no fim: sozinho numa grade de três ele
   ficaria encolhido num terço, com dois vazios ao lado, parecendo o menor produto da loja. */
.loja-boxes-breve { grid-template-columns: 1fr; }

/* ------------------------------------------------------------- infusão contínua (bomba)
   A sequência das quatro contas, desenhada como sequência. Em texto corrido ela vira uma lista
   que ninguém lê; em passos com seta, o leitor entende em dois segundos que existe um caminho
   de ida (preparo, vazão, titulação) e um de VOLTA (a conferência), que é o diferencial. */
.loja-bomba-fluxo {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: .6rem;
  margin: 1.2rem 0;
}
.loja-bomba-passo {
  flex: 1 1 9rem; display: flex; flex-direction: column; gap: .15rem;
  padding: .85rem .9rem; border-radius: .8rem;
  background: var(--color-cream, #f7f4ec); border: 1px solid var(--color-border);
}
.loja-bomba-passo span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.loja-bomba-passo b { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-primary-dark); line-height: 1.15; }
.loja-bomba-passo em { font-style: normal; font-size: .82rem; color: var(--color-muted); }
.loja-bomba-seta { display: flex; align-items: center; color: var(--color-primary); font-size: 1.3rem; opacity: .55; }
/* A seta da conferência aponta para TRÁS: é o caminho de volta, e a direção é o que explica. */
.loja-bomba-volta { color: #b0281c; opacity: .9; }
.loja-bomba-destaque { border-color: var(--color-high); background: var(--loja-alerta); }
.loja-bomba-destaque b { color: var(--color-high); }
.loja-bomba-nota { margin: .2rem 0 1rem; padding: .8rem .95rem; border-left: 3px solid var(--color-high); background: var(--loja-alerta); border-radius: .5rem; font-size: .95rem; line-height: 1.5; }
.loja-bomba-limite { margin-top: 1rem; font-size: .88rem; line-height: 1.5; color: var(--color-muted); }
@media (max-width: 720px) {
  .loja-bomba-fluxo { flex-direction: column; }
  .loja-bomba-seta { justify-content: center; transform: rotate(90deg); }
}

/* =============================================================================================
   IDENTIDADE PRÓPRIA DA LOJA (2026-09-02).

   O dono, sobre a barra de cima: "aquela letra que está escrito ferramentas para pediatras é a
   mesma letra lá do SPI, a mesma cor, aquela cor verdinha". Este bloco veste o CASCO (topo,
   rodapé, links de navegação, foco) de papel, tinta e âmbar, e troca a fonte de título por
   Fraunces na vitrine e nas páginas de venda. A Fraunces é a serifa que o SPI abandonou em
   2026-08-24: é, literalmente, a letra que o SPI não usa.

   Tudo escopado por .loja-body, que está no <body> de toda página da loja e de nenhuma do SPI.
   style.css não é tocado; onde a regra do SPI é mais específica, a daqui ganha por carregar
   .loja-body na frente e por vir depois no arquivo.

   O que ele NÃO mexe, de propósito: as cores dos cartões e dos heros por produto (azul, vinho,
   verde, roxo, bronze). Elas são a identidade de cada produto e batem com as imagens do checkout.
   ============================================================================================= */

/* 0. OS TOKENS DA LOJA. Nomes próprios (loja-*) para nunca colidir com os --color-* do SPI. */
.loja-body {
  /*
   * A LOJA ESTAVA METADE NUM TEMA E METADE NO OUTRO, E ISSO ERA O DEFEITO (2026-09-22).
   *
   * Estes tokens nasceram descrevendo papel: papel branco, tinta preta, fio bege. Só que a
   * PÁGINA passou a ser escura quando o tema da plataforma mudou, e ninguém voltou aqui. O
   * resultado, medido em 37 lugares das 40 telas da loja:
   *
   *   - caixa branca com o texto do tema escuro por cima: creme sobre branco, 1,09 de contraste;
   *   - tinta preta da loja sobre o fundo escuro da página: 1,04 no nome e no CRM do dono, que
   *     é o print que ele mandou ("onde está escrito em preto em cima do fundo escuro também
   *     não dá para ler igual aí meu nome meus dados").
   *
   * O pedido dele foi direto: "tem que mudar essa questão de caixas brancas". Então a loja
   * assume o tema escuro de uma vez, e os tokens passam a apontar para os da plataforma. Assim
   * a loja não tem mais uma paleta própria para envelhecer sozinha: quando o tema do SPI mudar,
   * ela muda junto.
   *
   * Os nomes continuam sendo loja-* porque as regras da loja inteira os usam, e porque o papel
   * de cada um continua o mesmo: papel é superfície, tinta é texto, linha é fio.
   */
  --loja-papel: var(--color-panel);
  --loja-papel-2: var(--color-cream);
  --loja-tinta: var(--color-text);
  --loja-tinta-2: var(--color-muted);
  --loja-linha: var(--color-border);
  --loja-ambar: var(--color-gold);
  --loja-ambar-claro: var(--color-gold);
  --loja-ambar-lavado: color-mix(in oklch, var(--color-gold) 14%, var(--color-panel));
  /* Superfícies dos cartões: existiam como #fff solto em 21 regras. Agora têm nome, e o nome
     aponta para o tema. `--loja-alerta` é a caixa vermelha (era #fdf1ef, rosa de papel). */
  --loja-cartao: var(--color-panel);
  --loja-suave: var(--color-cream);
  --loja-alerta: color-mix(in oklch, var(--color-high) 14%, var(--color-panel));
  /* A FONTE DE TÍTULO VOLTOU A SER A MONTSERRAT (2026-10-10). O dono, sobre a Fraunces: "aquela
     fonte que tá usando ali também, fonte de IA... deixa num padrão top, igual das escalas,
     Oculoplastic". A loja fala na mesma letra das escalas e do SPI. */
  --loja-fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
}

/* 1. O TOPO: papel, tinta, um fio. Sem o verde e sem o fio dourado embutido do SPI. */
.loja-body header.app-header {
  min-height: 64px;
  padding: .8rem clamp(1rem, 3vw, 1.6rem);
  background: var(--loja-papel);
  color: var(--loja-tinta);
  border-bottom: 1px solid var(--loja-linha);
  box-shadow: none;
}
.loja-body header.app-header h1 {
  font-family: var(--loja-fonte-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--loja-tinta);
  gap: .65rem;
}
/* Na vitrine o título não é link: mão de link ali é mentira. */
.loja-body header.loja-header h1 { cursor: default; }
.loja-body header.app-header .header-home-link { color: inherit; }
.loja-body header.app-header .header-home-link:hover { color: var(--loja-ambar); }
/* O selo do dono (verde e dourado) sobre papel ganha um anel de 1px para não parecer colado. */
.loja-body header.app-header .header-mark-img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(28, 26, 22, .10);
}

/* Os botões do topo (Entrar, Já comprei, Sair) numa língua só: pílula de contorno em tinta.
   Cobre o <button> das telas geradas (que o SPI pinta creme sobre transparente e SUMIRIA no
   papel), o <a class="btn-ghost"> das páginas de venda e o "Já comprei" da vitrine. */
.loja-body header.app-header button,
.loja-body header.app-header .btn-ghost,
.loja-body header.app-header .loja-link-entrar {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .4rem .95rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--loja-tinta);
  background: transparent;
  border: 1px solid rgba(28, 26, 22, .28);
  border-radius: 999px;
  opacity: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.loja-body header.app-header button:hover,
.loja-body header.app-header .btn-ghost:hover,
.loja-body header.app-header .loja-link-entrar:hover {
  background: var(--loja-ambar-lavado);
  border-color: var(--loja-ambar);
  color: var(--loja-ambar);
}
.loja-body header.app-header :focus-visible {
  outline: 2px solid var(--loja-ambar);
  outline-offset: 2px;
}

/* 2. TÍTULOS EM FRAUNCES, só onde a loja VENDE: vitrine (body.loja-vitrine) e páginas de venda
   (body.loja-spi-body). Uma variável basta, porque tudo aqui já pede var(--font-display).
   Dentro das telas compradas o miolo continua Montserrat: ali é o produto funcionando. */
.loja-vitrine,
.loja-spi-body {
  --font-display: var(--loja-fonte-titulo);
}
.loja-vitrine h1, .loja-vitrine h2, .loja-vitrine h3,
.loja-spi-body h1, .loja-spi-body h2, .loja-spi-body h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
}
/* Os grandes: hero e títulos de seção. Serifa de display pede um fio a mais de entrelinha do
   que a Montserrat tinha (1.02 vira 1.06) e tracking mais fechado. */
.loja-spi-body .loja-spi-hero h1,
.loja-spi-body .loja-spi-secao > h2,
.loja-spi-body .loja-spi-final h2,
.loja-spi-body .loja-problema h2 {
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.loja-vitrine .loja-topo-titulo { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
/* Preço e numerais em tabular: "R$ 159" alinhado é o que faz o serifado parecer etiqueta. */
.loja-spi-body .loja-hero-preco strong,
.loja-spi-body .loja-oferta-preco strong,
.loja-spi-body .loja-spi-numeros strong,
.loja-vitrine .loja-box-preco,
.loja-vitrine .loja-combo-preco strong {
  font-variant-numeric: lining-nums tabular-nums;
}

/* 3. O RODAPÉ: fio em cima, tinta secundária, e a identificação do médico anunciante na
   primeira linha (o texto vai no HTML; aqui só a roupa). */
.loja-body footer.app-footer {
  margin-top: 2rem;
  padding: 1.4rem 1rem 2rem;
  border-top: 1px solid var(--loja-linha);
  color: var(--loja-tinta-2);
  font-size: .8rem;
  line-height: 1.6;
}
.loja-body footer.app-footer .loja-rodape-medico {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--loja-fonte-titulo);
  font-size: .95rem;
  color: var(--loja-tinta);
}
.loja-body footer.app-footer a { color: inherit; text-decoration-color: var(--loja-linha); }
.loja-body footer.app-footer a:hover { color: var(--loja-ambar); text-decoration-color: currentColor; }

/* 4. OS LINKS DO CASCO que ainda eram verdes. */
.loja-body .loja-voltar { color: var(--loja-tinta-2); }
.loja-body .loja-voltar:hover { color: var(--loja-ambar); }
.loja-body .loja-produto-nav-links a { color: var(--loja-tinta-2); border-color: var(--loja-linha); }
.loja-body .loja-produto-nav-links a:hover { color: var(--loja-tinta); border-color: var(--loja-tinta); }
/* Links sem classe nas seções claras das páginas que vendem (ex.: o "veja o Combo" do FAQ):
   âmbar, e não o verde de `a { color: --color-primary }` do SPI. Nas seções escuras, o âmbar
   claro do preço. */
.loja-vitrine main a:not([class]),
.loja-spi-body main a:not([class]) { color: var(--loja-ambar); }
.loja-spi-body .loja-spi-secao-escura a:not([class]),
.loja-spi-body .loja-spi-final a:not([class]),
.loja-spi-body .loja-spi-hero a:not([class]) { color: var(--loja-ambar-claro); }
/* O selo "recomendado" do cartão de oferta era verde SPI: vira tinta. */
.loja-spi-body .loja-oferta-selo { background: var(--loja-tinta); color: var(--color-chapa); }
/* O bloco "quem fez": a borda esquerda era verde SPI; vira o âmbar do acento. */
.loja-body .loja-autor { border-left-color: var(--loja-ambar-claro); }
.loja-body .loja-autor h2 { color: var(--loja-tinta); }
/* Anéis de foco do casco, dos cartões e do login em âmbar, e não em verde. */
.loja-body .loja-box:focus-visible { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--loja-ambar); }
.loja-body .loja-login input:focus,
.loja-body .loja-start input:focus { outline-color: var(--loja-ambar); border-color: var(--loja-ambar); }
.loja-body .loja-login .btn-link { color: var(--loja-ambar); }
/* O painel de chegada do checkout era "verde da marca". Continua sendo resposta e não anúncio,
   agora em tinta quente com o âmbar do preço. */
.loja-vitrine .loja-obrigado {
  background: radial-gradient(circle at 88% 12%, rgba(240, 204, 122, .22), transparent 40%),
    linear-gradient(135deg, #1c1a16, #3a3128);
  box-shadow: 0 14px 34px rgba(28, 26, 22, .18);
}

/* 5. CELULAR. As regras do SPI a 560px (padding .75rem 1rem; h1 1rem) perdem para estas por
   especificidade, independentemente da ordem. */
@media (max-width: 560px) {
  .loja-body header.app-header { min-height: 56px; padding: .6rem .9rem; }
  .loja-body header.app-header h1 { font-size: 1.02rem; }
  .loja-body header.app-header button,
  .loja-body header.app-header .btn-ghost,
  .loja-body header.app-header .loja-link-entrar { min-height: 34px; padding: .35rem .8rem; font-size: .8rem; }
  .loja-body footer.app-footer { padding: 1.2rem .9rem 1.8rem; }
}

/* =============================================================================================
   A COR DA CAIXA POR DENTRO (2026-09-02).

   O dono: "quando entra numa caixa, que é verde, ali a caixa do consultório, fica aquela faixa
   verde dentro. Quando entra na roxa ou na azul, ou na vermelha, a faixa de dentro continua
   sendo verde. Eu acho que a faixa ali dentro deveria manter a cor da caixa de fora."

   caixa-loja.js e menu-caixa.js carimbam loja-caixa-<id> no <body>. Cada id define três tons,
   os MESMOS do cartão da vitrine (.loja-box-<id>, no alto do arquivo), e as regras genéricas
   abaixo pintam com eles a faixa do índice, o menu de navegação, a barra de progresso e o hero
   do receituário. Sem carimbo (nenhuma caixa) nada muda.
   ============================================================================================= */
.loja-caixa-plantao     { --caixa-a: #0e3150; --caixa-b: #0f1b26; --caixa-acento: #7cc6ea; }
.loja-caixa-emergencia  { --caixa-a: #4a1714; --caixa-b: #1d1010; --caixa-acento: #ffa78f; }
.loja-caixa-consultorio { --caixa-a: #16442f; --caixa-b: #101e17; --caixa-acento: #e2bd67; }
.loja-caixa-central_ia  { --caixa-a: #33194d; --caixa-b: #170f21; --caixa-acento: #d6a6ff; }
.loja-caixa-rastreio    { --caixa-a: #113a46; --caixa-b: #0e1e23; --caixa-acento: #9fe3d6; }
.loja-caixa-agenda_plantao { --caixa-a: #4a2a10; --caixa-b: #1f150d; --caixa-acento: #f2b273; }
.loja-caixa-protocolos { --caixa-a: #1c1c1c; --caixa-b: #0f0f0f; --caixa-acento: #e6bb5a; }
.loja-caixa-escala_ps { --caixa-a: #1c1c1c; --caixa-b: #0f0f0f; --caixa-acento: #e6bb5a; }
.loja-caixa-escalas_unimed { --caixa-a: #1c1c1c; --caixa-b: #0f0f0f; --caixa-acento: #e6bb5a; }
.loja-caixa-combo       { --caixa-a: #1c1c1c; --caixa-b: #0f0f0f; --caixa-acento: #e6bb5a; }
.loja-caixa-spi         { --caixa-a: #3a2e12; --caixa-b: #17140d; --caixa-acento: #e6bb5a; }
/* A amostra por dentro veste o âmbar do casco, e não a cor de nenhum produto: ela não é um deles,
   e sair da faixa verde padrão evita que o índice dela pareça o Consultório. */
.loja-caixa-gratis      { --caixa-a: #1c1c1c; --caixa-b: #0f0f0f; --caixa-acento: #e6bb5a; }

/* A faixa do índice (.home-hero do SPI) e o hero do receituário: o gradiente da caixa. */
.loja-body[class*="loja-caixa-"] .loja-caixa-topo,
.loja-body[class*="loja-caixa-"] .loja-rx-hero {
  background:
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--caixa-acento) 26%, transparent), transparent 32%),
    linear-gradient(135deg, var(--caixa-a), var(--caixa-b));
  box-shadow: 0 22px 50px -30px color-mix(in srgb, var(--caixa-a) 70%, transparent);
}
.loja-body[class*="loja-caixa-"] .loja-caixa-topo::before { background: none; }
.loja-body[class*="loja-caixa-"] .loja-rx-hero .loja-rx-kicker,
.loja-body[class*="loja-caixa-"] .loja-rx-hero .loja-rx-beneficios b { color: var(--caixa-acento); }

/* O menu de navegação entre as telas da caixa: fio, item atual, progresso e links na cor dela. */
.loja-body[class*="loja-caixa-"] .loja-menu {
  background: linear-gradient(145deg, var(--loja-cartao), color-mix(in srgb, var(--caixa-b) 12%, var(--loja-cartao)));
  border-color: color-mix(in srgb, var(--caixa-b) 28%, #fff);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--caixa-a) 8%, transparent);
}
.loja-body[class*="loja-caixa-"] .loja-menu-voltar { color: var(--loja-ambar); }
.loja-body[class*="loja-caixa-"] .loja-menu-voltar:hover { color: var(--caixa-acento); }
/* --caixa-a e --caixa-b sao as pontas do DEGRADE do produto, feitas para ser fundo. Usadas
   como texto sobre o fundo escuro da pagina davam 1,16 de contraste (a seta e o nome da
   ficha, em loja/escalas.html e loja/reanimacao.html). O acento de cada produto e a versao
   clara da mesma familia, e e ele que serve de tinta aqui. */
.loja-body[class*="loja-caixa-"] .loja-menu-paginacao a { color: var(--caixa-acento); }
.loja-body[class*="loja-caixa-"] .loja-menu-paginacao a:hover { border-color: var(--caixa-b); }
.loja-body[class*="loja-caixa-"] .loja-menu-progresso { background: color-mix(in srgb, var(--caixa-b) 18%, var(--loja-cartao)); }
.loja-body[class*="loja-caixa-"] .loja-menu-progresso i { background: linear-gradient(90deg, var(--caixa-a), var(--caixa-b)); }
.loja-body[class*="loja-caixa-"] .loja-menu-item:hover { border-color: var(--caixa-b); }
.loja-body[class*="loja-caixa-"] .loja-menu-atual { background: var(--caixa-b); color: #fff; }
.loja-body[class*="loja-caixa-"] .loja-menu-outras a { color: var(--caixa-acento); }

/* =============================================================================================
   A CAIXA DE TESTE GRÁTIS (2026-09-04).

   Pedido do dono: "eu quero que tenha uma caixa no site do SPI, uma caixa escrito teste grátis".

   Ela é de PAPEL, e não um bloco escuro como os cartões de produto. O motivo é de leitura, não
   de gosto: os cinco cartões acima são retângulos escuros na cor de cada caixa, e mais um bloco
   escuro aqui entraria na fila deles como se fosse um sexto produto. Papel com fio âmbar diz
   "isto é outra coisa" antes de a pessoa ler uma palavra, e é o mesmo âmbar do casco da loja.
   ============================================================================================= */
.loja-amostra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.4rem;
  padding: clamp(.9rem, 2.5vw, 1.2rem) clamp(1rem, 3vw, 1.5rem);
  background: linear-gradient(150deg, var(--loja-cartao), var(--loja-ambar-lavado));
  border: 1px solid var(--loja-ambar-claro, #f0cc7a);
  border-radius: 1.1rem;
  box-shadow: 0 10px 26px -20px rgba(138, 93, 28, .5);
}
.loja-amostra-texto { min-width: 0; flex: 1 1 18rem; }
.loja-amostra h2 {
  margin: 0 0 .15rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  line-height: 1.15;
  color: var(--loja-tinta, #1c1a16);
}
.loja-amostra-sub { margin: 0; color: var(--loja-tinta-2, #6b6355); font-size: .88rem; line-height: 1.45; }
/* O botão não estica na tira: ele é o fim da frase, e não uma faixa. */
.loja-amostra .btn-cta-primary { flex: 0 0 auto; padding-inline: 1.6rem; }
@media (max-width: 560px) {
  .loja-amostra { gap: .7rem; }
  .loja-amostra .btn-cta-primary { padding: .55rem 1.5rem; font-size: .92rem; }
}

/* Os guias públicos na vitrine (2026-09-08): lista simples de links, uma por linha. */
.loja-guias-lista { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.loja-guias-lista a { display: block; padding: .55rem .8rem; border: 1px solid var(--color-border); border-radius: .5rem; text-decoration: none; color: var(--color-text); }
.loja-guias-lista a:hover { border-color: var(--color-primary); }
.loja-guia-produtos { display: flex; flex-wrap: wrap; gap: .6rem; }
.loja-guia-produtos .loja-oferta-secundario { flex: 1 1 220px; }

/* O "/mês" pequeno colado no valor grande (2026-09-09): o mensal manda, o anual fica na frase ao lado. */
.loja-hero-preco strong small, .loja-oferta-preco strong small { font-size: .42em; font-weight: 600; margin-left: .1em; }
.loja-box-preco-bloco { display: flex; flex-direction: column; gap: .05rem; margin-bottom: .55rem; }
.loja-box-preco-bloco .loja-box-preco { font-size: 1.55rem; line-height: 1.1; }
.loja-box-preco small { font-size: .7rem; font-weight: 600; margin-left: .2rem; letter-spacing: 0; }
.loja-box-preco-ano { display: block; font-size: .8rem; color: rgba(255,255,255,.8); }

/* ------------------------------------------------------------------ Consulta de hoje
 * A tela em que a consulta é colada (consulta.html) e a faixa que as telas irmãs mostram
 * quando estão usando essa consulta. */
.loja-consulta-entrada textarea { width: 100%; min-height: 220px; font: inherit; line-height: 1.5; resize: vertical; }
.loja-consulta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.9rem; }
.loja-consulta-acoes .btn-cta-primary { margin: 0; }
.loja-consulta-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; margin-bottom: 0.4rem; }
.loja-consulta-cab h2 { margin: 0; }
.loja-consulta-medidas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; }
.loja-consulta-medidas span { padding: 0.32rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 0.82rem; background: var(--color-panel); }
.loja-consulta-campos textarea { width: 100%; font: inherit; line-height: 1.5; resize: vertical; }
.loja-consulta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.loja-consulta-grade > div { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem; border: 1px solid var(--color-border); border-radius: 0.9rem; background: var(--color-panel); }
.loja-consulta-grade h3 { margin: 0; }
.loja-consulta-grade .sug-lista { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.loja-consulta-grade .btn-cta-primary { margin-top: auto; text-align: center; text-decoration: none; }
.loja-consulta-resumo textarea { width: 100%; font: inherit; line-height: 1.55; resize: vertical; }
.loja-consulta-rodape { text-align: center; margin: 1.2rem 0 0; }
.loja-consulta-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 0.8rem; background: #e6f4ea; color: #1d6b3a; font-size: 0.9rem; }
.loja-consulta-faixa a { color: inherit; font-weight: 700; }
@media print { .loja-consulta-faixa { display: none !important; } }

/* ---------------------------------------------------------------------------------------------
 * A PÁGINA INICIAL POR GRUPOS (2026-10-07, loja/js/grupos.js). O atributo data-grupo no <html>
 * decide o que aparece: a página inicial, a vitrine dos médicos (o resto do <main>, como sempre
 * foi), a descrição do CRM para mentorias ou a das escalas.
 * ------------------------------------------------------------------------------------------- */
.loja-grupo-pagina { display: none; }
html[data-grupo="inicio"] #loja-hub,
html[data-grupo="mentorias"] #loja-g-mentorias,
html[data-grupo="escalas"] #loja-g-escalas { display: block; }
html[data-grupo="inicio"] .loja-main > :not(#loja-hub),
html[data-grupo="mentorias"] .loja-main > :not(#loja-g-mentorias),
html[data-grupo="escalas"] .loja-main > :not(#loja-g-escalas) { display: none !important; }
html[data-grupo="inicio"] .loja-body header.app-header .loja-so-grupo { display: none; }
html:not([data-grupo]) .loja-body header.app-header .loja-so-grupo { display: none; }

/* A página inicial e os grupos novos: preto, sóbrio, menu em lista (2026-10-07: "tira esse
   aspecto de box colorido da página inicial, deixa uma página séria, parecida com a do SPI,
   coloca preto, coloca um menu moderno"). A vitrine dos médicos segue como era. */
html[data-grupo="inicio"] body, html[data-grupo="mentorias"] body, html[data-grupo="escalas"] body { background: #0a0a0a; color: #e9e9e6; }
html[data-grupo="inicio"] .loja-body header.app-header, html[data-grupo="mentorias"] .loja-body header.app-header, html[data-grupo="escalas"] .loja-body header.app-header { background: rgba(10, 10, 10, .92); color: #f2f2ef; border-bottom: 1px solid #1f1f1f; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
html[data-grupo="inicio"] .loja-body header.app-header h1, html[data-grupo="mentorias"] .loja-body header.app-header h1, html[data-grupo="escalas"] .loja-body header.app-header h1 { color: #f2f2ef; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-weight: 700; letter-spacing: 0; }
html[data-grupo="inicio"] .loja-body header.app-header .loja-link-entrar, html[data-grupo="mentorias"] .loja-body header.app-header .loja-link-entrar, html[data-grupo="escalas"] .loja-body header.app-header .loja-link-entrar, html[data-grupo="inicio"] .loja-body header.app-header button, html[data-grupo="mentorias"] .loja-body header.app-header button, html[data-grupo="escalas"] .loja-body header.app-header button { color: #f2f2ef; border-color: #3a3a3a; }
html[data-grupo="inicio"] .loja-body header.app-header .loja-link-entrar:hover, html[data-grupo="mentorias"] .loja-body header.app-header .loja-link-entrar:hover, html[data-grupo="escalas"] .loja-body header.app-header .loja-link-entrar:hover { color: #c9a227; border-color: #c9a227; background: transparent; }
html[data-grupo="inicio"] .app-footer, html[data-grupo="mentorias"] .app-footer, html[data-grupo="escalas"] .app-footer { background: #0a0a0a; color: #8a8a86; border-top: 1px solid #1f1f1f; }
html[data-grupo="inicio"] .app-footer a, html[data-grupo="mentorias"] .app-footer a, html[data-grupo="escalas"] .app-footer a { color: #b9b9b4; }

/* menu do topo: no computador, fora da vitrine */
.hub-topo-menu { display: none; gap: 1.6rem; margin-right: .6rem; }
.hub-topo-menu a { color: #b9b9b4; text-decoration: none; font-size: .88rem; font-weight: 500; letter-spacing: .02em; }
.hub-topo-menu a:hover { color: #c9a227; }
@media (min-width: 760px) { html[data-grupo="inicio"] .hub-topo-menu, html[data-grupo="mentorias"] .hub-topo-menu, html[data-grupo="escalas"] .hub-topo-menu { display: inline-flex; } }

.loja-body .loja-grupo-pagina { max-width: 860px; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; }
.loja-body .hub-sobrancelha { margin: 2.2rem 0 .6rem; color: #c9a227; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.loja-body .hub-titulo { margin: 0 0 .7rem; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #f4f4f1; }
.loja-body .hub-sub { margin: 0 0 2rem; max-width: 40rem; color: #a3a39e; font-size: 1.02rem; line-height: 1.6; }
.hub-menu { display: flex; flex-direction: column; border-top: 1px solid #222; margin-bottom: 3rem; }
.hub-item { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 1rem; padding: 1.35rem .3rem; border-bottom: 1px solid #222; color: #ededea; text-decoration: none; transition: background .15s ease, padding .15s ease; }
.hub-item:hover, .hub-item:focus-visible { background: #121212; padding-left: .9rem; outline: none; }
.hub-num { color: #5d5d59; font-size: .82rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.hub-txt { display: flex; flex-direction: column; gap: .3rem; }
.hub-txt strong { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.005em; }
.hub-txt > span { color: #9b9b96; font-size: .93rem; }
.hub-breve { display: inline-block; margin-left: .5rem; padding: .12rem .5rem; border: 1px solid #3a3a3a; border-radius: 999px; color: #c9a227; font-size: .66rem; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.hub-seta { color: #5d5d59; font-size: 1.3rem; transition: transform .15s ease, color .15s ease; }
.hub-item:hover .hub-seta { color: #c9a227; transform: translateX(4px); }
.hub-item:hover strong { color: #fff; }
.hub-botao { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.3rem; border-radius: 999px; background: #c9a227; color: #111; font-weight: 700; text-decoration: none; }
.hub-botao:hover { background: #ddb73a; }
/* Hospitais e equipes (2026-10-08): a lista das caixinhas, ou uma delas aberta (data-hosp, grupos.js). */
#loja-g-escalas .hosp-vista { display: none; }
html:not([data-hosp]) #loja-g-escalas .hosp-lista,
html[data-hosp="plantao"] #loja-g-escalas .hosp-plantao,
html[data-hosp="protocolos"] #loja-g-escalas .hosp-protocolos { display: block; }
#loja-g-escalas .hosp-protocolos .loja-desc-grade + .loja-desc-grade { margin-top: 8px; }
#loja-g-escalas .loja-desc-grade h3 { color: #f2f2ef; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-size: 1rem; letter-spacing: .02em; }
#loja-g-escalas .loja-desc-grade ul { color: #c6c6c1; }
#loja-g-escalas .loja-desc-grade b { color: #ededea; }
#loja-g-escalas .loja-link-entrar { color: #e9e9e6; }

.loja-voltar { color: #8a8a86; text-decoration: none; font-size: .9rem; }
.loja-voltar:hover { color: #c9a227; }
.loja-voltar:hover { color: var(--color-text); }
.loja-desc-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 2rem; margin: 1.2rem 0; }
.loja-desc-grade h3 { margin: 0 0 .5rem; font-family: var(--font-display); }
.loja-desc-grade ul { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.loja-desc-grade li { margin-bottom: .45rem; }
.loja-desc-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.4rem 0 2.6rem; }

/* =============================================================================================
   A LOJA SÉRIA (2026-10-10). O dono: "repaginar a página dos box de ferramenta pra médicos [...]
   aquelas coisas coloridas eu não sei se tá legal... queria algo mais sério [...] deixa num
   padrão top, igual das escalas, Oculoplastic [...] faz algo MAGNÍFICO".

   A língua é a das escalas: chapa escura, fio dourado em cima, borda definida, dourado só no que
   importa (número, check, preço, seta). Montserrat em tudo.
   ============================================================================================= */
.loja-body { --ouro: #e6bb5a; --ouro-claro: #f8e3a6; --ouro-borda: #f1cf6b; --ouro-grad: linear-gradient(90deg, #b48d47 0%, #f8e3a6 50%, #b48d47 100%); }

/* 1. AS CAIXAS DA VITRINE */
.loja-box { border: 1px solid #2c2c2c; border-radius: 1.2rem; box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05); }
.loja-box::before { background: radial-gradient(circle at 92% 0%, rgba(255,255,255,.08), transparent 42%); }
.loja-box::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--cor-acento, #e6bb5a) 50%, transparent 100%); z-index: 2; }
.loja-box:hover { border-color: var(--ouro-borda); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(241,207,107,.25); }
.loja-box-nome { color: #f6f2e7; font-weight: 700; letter-spacing: -0.01em; }
.loja-box-resumo { color: #bdb9ae; }
.loja-box-itens li { color: #dedad0; }
.loja-box-fim { border-top-color: #2a2a2a; }
.loja-box-cta { color: var(--ouro-claro); background: transparent; border: 1px solid rgba(241,207,107,.55); font-weight: 700; }
.loja-box:hover .loja-box-cta { background: var(--ouro); color: #1a1306; border-color: var(--ouro); }
.loja-box-selo { background: var(--ouro); color: #1a1306; box-shadow: 0 2px 8px rgba(230,187,90,.3); }
.loja-box-breve .loja-box-selo { background: transparent; color: var(--ouro-claro); border: 1px solid rgba(241,207,107,.5); }
.loja-box-comprado { border-color: rgba(241,207,107,.6); }
.loja-vitrine .loja-topo-titulo { font-weight: 700; letter-spacing: -0.015em; }

/* 2. O MENU "TODOS OS PRODUTOS" */
.loja-body header.app-header .loja-pm-abrir { gap: .55rem; border-color: rgba(241,207,107,.55); color: var(--ouro-claro); }
.loja-body header.app-header .loja-pm-abrir:hover, html.loja-pm-aberto .loja-body header.app-header .loja-pm-abrir { background: var(--ouro); border-color: var(--ouro); color: #1a1306; }
.loja-pm-hamb { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; }
.loja-pm-hamb i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.loja-pm[hidden] { display: none; }
.loja-pm { position: fixed; inset: 0; z-index: 60; }
.loja-pm-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.loja-pm-caixa { position: relative; margin: 4.6rem auto 0; width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); overflow: auto; padding: 1.2rem 1.3rem 1.4rem; border: 1px solid #2f2f2f; border-radius: 1.3rem; background: linear-gradient(180deg, #1b1b1b, #0e0e0e); box-shadow: 0 30px 70px rgba(0,0,0,.65); font-family: "Montserrat", "Segoe UI", Arial, sans-serif; color: #ededea; }
.loja-pm-caixa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ouro-grad); border-radius: 1.3rem 1.3rem 0 0; }
.loja-pm-topo { display: flex; align-items: stretch; gap: .7rem; margin-bottom: 1rem; }
.loja-pm-inicio { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; border: 1px solid rgba(241,207,107,.45); border-radius: .95rem; background: rgba(230,187,90,.07); color: #f6f2e7; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.loja-pm-inicio small { display: block; margin-bottom: .15rem; color: var(--ouro); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.loja-pm-inicio b { color: var(--ouro); font-size: 1.3rem; transition: transform .15s ease; }
.loja-pm-inicio:hover { border-color: var(--ouro-borda); background: rgba(230,187,90,.13); }
.loja-pm-inicio:hover b { transform: translateX(4px); }
.loja-body .loja-pm-fechar { flex: none; width: 3rem; margin: 0; padding: 0; border: 1px solid #333; border-radius: .95rem; background: #121212; color: #cfcfcf; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.loja-body .loja-pm-fechar:hover { border-color: var(--ouro-borda); color: var(--ouro-claro); }
.loja-pm-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: .8rem; }
@media (min-width: 1000px) { .loja-pm-caixa { width: min(76rem, calc(100vw - 3rem)); } .loja-pm-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.loja-body header.app-header .loja-pm-abrir, .loja-body header.app-header .loja-link-entrar { white-space: nowrap; }
.loja-pm-grade section { padding: .95rem 1rem 1rem; border: 1px solid #262626; border-radius: 1rem; background: #121212; }
.loja-pm-grade h3 { margin: 0 0 .55rem; font-size: 1rem; }
.loja-pm-grade h3 a { display: flex; align-items: baseline; gap: .6rem; color: #f6f2e7; text-decoration: none; font-weight: 700; }
.loja-pm-grade h3 a:hover { color: var(--ouro-claro); }
.loja-pm-grade h3 b { color: var(--ouro); font-size: .78rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.loja-pm-grade ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.loja-pm-grade li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.loja-pm-grade li a { display: block; padding: .32rem 0; color: #c9c5bb; text-decoration: none; font-size: .93rem; }
.loja-pm-grade li a:hover { color: var(--ouro-claro); }
.loja-pm-grade em { padding: .05rem .45rem; border: 1px solid #3a3a3a; border-radius: 999px; color: var(--ouro); font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html.loja-pm-aberto, html.loja-pm-aberto body { overflow: hidden; }
@media (max-width: 560px) {
  .loja-pm-caixa { margin-top: 3.8rem; width: calc(100vw - 1.2rem); padding: 1rem .9rem 1.1rem; }
  .loja-body header.app-header .loja-pm-abrir { font-size: 0; gap: 0; padding: .35rem .7rem; }
  .loja-body header.app-header .loja-pm-abrir::after { content: "Produtos"; font-size: .8rem; margin-left: .45rem; }
  .loja-body header.app-header h1 { font-size: .95rem; line-height: 1.2; }
  .loja-body header.app-header .loja-header-acoes { gap: .4rem; }
}

/* 3. A PÁGINA INICIAL: as cinco áreas em caixas grandes */
.loja-body .loja-grupo-pagina { max-width: 1040px; }
.hub-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; border-top: 0; margin-bottom: 3.5rem; }
.hub-areas .hub-item { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; gap: .9rem 1rem; min-height: 11.5rem; padding: 1.5rem 1.5rem 1.4rem; border: 1px solid #2c2c2c; border-radius: 1.3rem; background: linear-gradient(180deg, #1c1c1c 0%, #111 100%); box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hub-areas .hub-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ouro-grad); }
.hub-areas .hub-item::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, rgba(230,187,90,.12), transparent 70%); pointer-events: none; }
.hub-areas .hub-item:hover, .hub-areas .hub-item:focus-visible { padding-left: 1.5rem; background: linear-gradient(180deg, #202020 0%, #131313 100%); border-color: var(--ouro-borda); transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(241,207,107,.22); }
.hub-areas .hub-num { grid-column: 1; grid-row: 1; color: var(--ouro); font-size: 2.3rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.hub-areas .hub-txt { grid-column: 1 / -1; grid-row: 2; align-self: end; gap: .45rem; }
.hub-areas .hub-txt strong { font-size: 1.45rem; font-weight: 700; color: #f6f2e7; }
.hub-areas .hub-txt > span { color: #aaa69c; font-size: .98rem; line-height: 1.5; }
.hub-areas .hub-seta { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(241,207,107,.45); border-radius: 50%; color: var(--ouro); font-size: 1.15rem; }
.hub-areas .hub-item:hover .hub-seta { background: var(--ouro); color: #1a1306; transform: none; }
/* a primeira, a dos médicos, ocupa a linha toda: é a maior área */
.hub-areas .loja-hub-medicos { grid-column: 1 / -1; min-height: 10rem; }
.hub-areas .loja-hub-medicos .hub-txt strong { font-size: 1.7rem; }
@media (max-width: 720px) {
  .hub-areas { grid-template-columns: 1fr; gap: .85rem; }
  .hub-areas .hub-item { min-height: 0; padding: 1.25rem 1.2rem 1.2rem; }
  .hub-areas .hub-item:hover { padding-left: 1.2rem; }
  .hub-areas .hub-num { font-size: 1.9rem; }
  .hub-areas .hub-txt strong, .hub-areas .loja-hub-medicos .hub-txt strong { font-size: 1.3rem; }
}

/* 4. AS ÁREAS NOVAS (famílias, professores): os produtos em caixas, como a vitrine */
html[data-grupo="familias"] #loja-g-familias, html[data-grupo="professores"] #loja-g-professores { display: block; }
html[data-grupo="familias"] .loja-main > :not(#loja-g-familias):not(#loja-todas-areas),
html[data-grupo="professores"] .loja-main > :not(#loja-g-professores):not(#loja-todas-areas) { display: none !important; }
html[data-grupo="familias"] body, html[data-grupo="professores"] body { background: #0a0a0a; color: #e9e9e6; }
html[data-grupo="familias"] .loja-body header.app-header, html[data-grupo="professores"] .loja-body header.app-header { background: rgba(10, 10, 10, .92); color: #f2f2ef; border-bottom: 1px solid #1f1f1f; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
html[data-grupo="familias"] .loja-body header.app-header h1, html[data-grupo="professores"] .loja-body header.app-header h1 { color: #f2f2ef; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-weight: 700; letter-spacing: 0; }
html[data-grupo="familias"] .loja-body header.app-header .loja-link-entrar, html[data-grupo="professores"] .loja-body header.app-header .loja-link-entrar { color: #f2f2ef; border-color: #3a3a3a; }
html[data-grupo="familias"] .app-footer, html[data-grupo="professores"] .app-footer { background: #0a0a0a; color: #8a8a86; border-top: 1px solid #1f1f1f; }
html[data-grupo="familias"] .app-footer a, html[data-grupo="professores"] .app-footer a { color: #b9b9b4; }
.area-produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.1rem; margin: .4rem 0 3rem; }
.area-produto { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.35rem; border: 1px solid #2c2c2c; border-radius: 1.3rem; background: linear-gradient(180deg, #1c1c1c 0%, #111 100%); box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); color: #dedad0; }
.area-produto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ouro-grad); }
.area-produto-tipo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .55rem; color: var(--ouro); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.area-produto-selo { padding: .12rem .55rem; border: 1px solid rgba(241,207,107,.5); border-radius: 999px; color: var(--ouro-claro); font-size: .62rem; letter-spacing: .08em; }
.area-produto h3 { margin: 0 0 .55rem; color: #f6f2e7; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.area-produto > p { margin: 0 0 .8rem; color: #bdb9ae; line-height: 1.55; }
.area-produto ul { margin: .2rem 0 1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.area-produto li { position: relative; padding-left: 1.4rem; font-size: .92rem; line-height: 1.5; color: #dedad0; }
.area-produto li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ouro); font-weight: 800; font-size: .8rem; }
.area-produto li b { color: #f6f2e7; }
.area-produto .area-produto-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid #262626; }
.area-produto-breve { border-style: dashed; border-color: #3a3a3a; }
.area-produto .loja-link-entrar { color: var(--ouro-claro); }

/* 5. A JANELA GRANDE "TODAS AS ÁREAS", no fim de cada área */
.loja-todas-areas { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.2rem; padding: .45rem .95rem .45rem .5rem; border: 1px solid rgba(241,207,107,.45); border-radius: 999px; background: #121212; color: #f8e3a6; text-decoration: none; font: 600 .85rem "Montserrat", "Segoe UI", Arial, sans-serif; transition: border-color .18s ease, background .18s ease; }
.loja-todas-areas:hover { border-color: var(--ouro-borda); background: #1a1712; }
.lta-seta { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ouro); color: #1a1306; font-size: .95rem; font-weight: 700; }
html[data-grupo="inicio"] .loja-main > #loja-todas-areas, html:not([data-grupo]) .loja-main > #loja-todas-areas { display: none !important; }
html[data-grupo="mentorias"] .loja-main > #loja-todas-areas, html[data-grupo="escalas"] .loja-main > #loja-todas-areas { display: inline-flex !important; }

/* A MARCA SPI NO TOPO (2026-10-10): no lugar da logo verde pequena e do nome, "SPI" em dourado e o
   significado embaixo (desde 2026-10-11, Soluções Profissionais Integradas em Saúde). */
.loja-body header.app-header h1 .loja-spi-marca { display: inline-flex; flex-direction: column; justify-content: center; gap: .1rem; color: inherit; text-decoration: none; line-height: 1; cursor: pointer; }
.loja-spi-marca b { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-size: 1.55rem; font-weight: 800; letter-spacing: .14em; background: linear-gradient(180deg, #f8e3a6 0%, #e6bb5a 55%, #b48d47 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loja-spi-marca small { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #b9b5aa; }
.loja-spi-marca:hover small { color: #f8e3a6; }
@media (max-width: 560px) {
  .loja-spi-marca b { font-size: 1.3rem; }
  .loja-spi-marca small { font-size: .52rem; letter-spacing: .1em; }
}


/* AS TRÊS VANTAGENS na abertura da vitrine dos médicos (2026-10-10, "coloca um texto TOP"). */
.loja-topo-vantagens { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.3rem 0 0; padding: 0; }
.loja-topo-vantagens li { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem 1.05rem; border: 1px solid #2c2c2c; border-radius: 1rem; background: linear-gradient(180deg, #1a1a1a 0%, #111 100%); }
.loja-topo-vantagens li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ouro-grad); }
.loja-topo-vantagens b { color: var(--ouro-claro); font-size: .95rem; font-weight: 700; }
.loja-topo-vantagens span { color: #bdb9ae; font-size: .86rem; line-height: 1.45; }
@media (max-width: 720px) { .loja-topo-vantagens { grid-template-columns: 1fr; gap: .55rem; } }

/* OS CARTÕES DO ÍNDICE DA CAIXA (2026-10-10). O dono: "as caixinhas em cima tão desatualizadas...
   sem detalhes, sem borda, sem nada". Vestem o mesmo desenho dos boxes da vitrine: borda, filete
   na cor da caixa no alto, ícone num selo, o que a tela faz numa linha e a seta. Só na loja: o
   .hub-card do SPI (style.css) continua como está. */
.loja-body .loja-ferramentas { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; }
.loja-body .loja-ferramentas .hub-card { overflow: hidden; gap: .55rem; padding: 1.25rem 1.15rem 2.6rem; border: 1px solid #2e2e2e; border-radius: 1.15rem; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--caixa-acento, #e6bb5a) 12%, transparent), transparent 55%), linear-gradient(180deg, #1c1c1c 0%, #111 100%); box-shadow: 0 14px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
.loja-body .loja-ferramentas .hub-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--caixa-acento, #e6bb5a) 55%, #000) 0%, var(--caixa-acento, #e6bb5a) 50%, color-mix(in srgb, var(--caixa-acento, #e6bb5a) 55%, #000) 100%); }
.loja-body .loja-ferramentas .hub-card::after { display: none; }
.loja-body .loja-ferramentas .hub-card-ico { width: 2.6rem; height: 2.6rem; margin-bottom: .25rem; border: 1px solid color-mix(in srgb, var(--caixa-acento, #e6bb5a) 45%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--caixa-acento, #e6bb5a) 10%, #121212); color: var(--caixa-acento, #e6bb5a); }
.loja-body .loja-ferramentas .hub-card-ico svg { width: 22px; height: 22px; }
.loja-body .loja-ferramentas .hub-card-label { font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 1.02rem; color: #f6f2e7; }
.loja-body .loja-ferramentas .hub-card-nota { margin-top: 0; font-size: .82rem; line-height: 1.4; color: #b4b0a5; }
.loja-body .loja-ferramentas .hub-card-seta { position: absolute; right: 1.05rem; bottom: .85rem; color: var(--caixa-acento, #e6bb5a); font-size: 1.05rem; font-weight: 700; transition: transform .18s ease; }
.loja-body .loja-ferramentas .hub-card:hover { border-color: color-mix(in srgb, var(--caixa-acento, #e6bb5a) 60%, #2e2e2e); box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--caixa-acento, #e6bb5a) 22%, transparent); transform: translateY(-3px); }
.loja-body .loja-ferramentas .hub-card:hover .hub-card-ico { color: var(--caixa-acento, #e6bb5a); }
.loja-body .loja-ferramentas .hub-card:hover .hub-card-seta { transform: translateX(4px); }
.loja-body .loja-ferramentas .hub-card:active { transform: translateY(1px) scale(.985); background: linear-gradient(180deg, #222 0%, #151515 100%); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.loja-body .loja-caixa-topo { border: 1px solid color-mix(in srgb, var(--caixa-acento, #e6bb5a) 35%, #2e2e2e); }
@media (max-width: 560px) {
  .loja-body .loja-ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .loja-body .loja-ferramentas .hub-card { padding: 1rem .85rem 2.3rem; border-radius: 1rem; }
  .loja-body .loja-ferramentas .hub-card-label { font-size: .93rem; }
  .loja-body .loja-ferramentas .hub-card-nota { font-size: .76rem; }
}
.loja-vitrine .loja-topo { max-width: none; }
.loja-vitrine .loja-topo-titulo { max-width: 46rem; }
/* Os quatro planos do SPI na página do SPI Prontuário (2026-10-10). */
.loja-oferta-grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .loja-oferta-grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .loja-oferta-grade-4 { grid-template-columns: 1fr; } }
/* Os planos das Escalas de plantão (2026-10-10): três cartões com preço, o do meio em destaque. */
.area-planos-titulo { margin: 2.2rem 0 .8rem; color: #f6f2e7; font-size: 1.35rem; }
.area-planos { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: .6rem; }
.area-produto-preco { display: flex; align-items: baseline; gap: .3rem; margin: .1rem 0 .8rem; font-variant-numeric: tabular-nums; }
.area-produto-preco strong { color: #f6f2e7; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.area-produto-preco span { color: #bdb9ae; font-size: .95rem; }
.area-produto-destaque { border-color: rgba(241,207,107,.6); box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(241,207,107,.22); }
.area-planos-nota { margin: 0 0 1.4rem; font-size: .88rem; }

/* A IDENTIDADE NOVA (2026-10-11): o "SPI" escrito vira o logotipo "SPi" dourado do quadro da
   marca que o dono mandou. Só CSS, para valer em todas as páginas da loja de uma vez. */
.loja-spi-marca b {
  display: block; width: 76px; height: 30px; font-size: 0; letter-spacing: 0; color: transparent;
  background: url("../../images/marca/spi-logo-ouro.png") no-repeat left center / contain;
  -webkit-background-clip: border-box; background-clip: border-box;
}
@media (max-width: 480px) { .loja-spi-marca b { width: 64px; height: 25px; } }

/* A abertura da página inicial com a arte da identidade nova (2026-10-11): a imagem inteira no
   computador e um recorte no celular. Desde 2026-10-12 ocupa a largura toda da tela, sem moldura e
   sem etiquetas por cima. O dono: "Coloca a foto na página inteira, não dentro de um box fechado,
   tira aqueles escritos, aquelas caixinhas de dentro da foto." */
.loja-body { overflow-x: clip; }
/* Desde 2026-10-12 a largura toda e as margens são do carrossel (.loja-carrossel, mais abaixo), e a
   foto é o painel 1 dele: o mesmo tamanho, a mesma imagem e o mesmo degradê de sempre. */
.loja-carrossel { position: relative; width: 100vw; max-width: none; margin: -2.4rem 0 1.8rem calc(50% - 50vw); }
.loja-abertura { position: relative; margin: 0; background: #050505; }
.loja-abertura img { display: block; width: 100%; height: auto; }
.loja-abertura::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,5,0), var(--color-bg, #0a0a0a)); }
@media (max-width: 700px) { .loja-carrossel { margin-bottom: 1.3rem; } }
@media (max-width: 640px) { .loja-carrossel { margin-top: -1.6rem; } }

/* O CONTORNO DAS CAIXAS (2026-10-12). Caixa preta sobre fundo preto sumia. O dono, sobre as
   páginas de área (Para famílias, Professores, Hospitais e equipes): "tá muito preto no preto [...]
   Tem que ter um realcezinho. Acho que um pouco dourado [...] mostrando o contorno dessa caixa".
   Só nessas páginas: os cartões de produto (.area-produto) e os itens da lista de Hospitais e
   equipes, que viram caixas. A página inicial e as caixas coloridas de Para médicos ficam como
   estavam (o dono não pediu mexer nelas). */
.area-produto {
  border-color: rgba(241, 207, 107, .5);
  background: linear-gradient(180deg, #1f1d19 0%, #141311 100%);
  box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(248, 227, 166, .12), 0 0 24px -12px rgba(230, 187, 90, .35);
}
.area-produto:hover { border-color: rgba(241, 207, 107, .7); }
.hub-menu:not(.hub-areas) { gap: .9rem; border-top: 0; }
.hub-menu:not(.hub-areas) .hub-item {
  padding: 1.3rem 1.2rem; border: 1px solid rgba(241, 207, 107, .5); border-radius: 1.2rem;
  background: linear-gradient(180deg, #1f1d19 0%, #141311 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(248, 227, 166, .12), 0 0 24px -12px rgba(230, 187, 90, .35);
}
.hub-menu:not(.hub-areas) .hub-item:hover, .hub-menu:not(.hub-areas) .hub-item:focus-visible { padding-left: 1.2rem; border-color: rgba(241, 207, 107, .75); background: linear-gradient(180deg, #24211b 0%, #161411 100%); }

/* =============================================================================================
   A AGENDA DE PLANTÃO DENTRO DA LOJA (2026-10-12). O calendário do SPI (style.css, .pl-cal) usa
   repeat(7, 1fr) com etiqueta que não quebra linha: 1fr nunca fica menor que o conteúdo, então no
   celular um nome de local comprido ("Pronto-socorro Central") alarga a coluna e empurra os
   sábados para fora da tela. Aqui as sete colunas ficam do mesmo tamanho e a etiqueta corta com
   reticências (o texto inteiro está na lista do mês). Escopo .loja-body: a página do SPI, na raiz,
   não é tocada.
   ============================================================================================= */
.loja-body .pl-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.loja-body .pl-cal-dia { min-width: 0; }

/* =============================================================================================
   O CÉREBRO DO SPI NA ABERTURA (2026-10-12). O dono, depois de aprovar o Cérebro do consultório:
   "Agora eu quero que você faça um outro cérebro. É... como se fosse o SPI. A sigla é SPI no
   centro. E tudo o que ela tem. Da parte de médicos. Aí da parte de médicos saem outras bolinhas
   que dão o nome do que ela tem. Da parte de famílias saem as bolinhas com o nome do que tem.
   Mentorias, escalas, mostrando várias bolinhas, tudo aí. Aí, nessa página inicial, ficaria tipo
   arrastando para o lado. Deixa essa imagem aí que tá legal, e aí a hora que arrasta para o lado,
   tipo passa para o cérebro."
   A foto (.loja-abertura) é o painel 1 de um carrossel que se passa arrastando para o lado
   (scroll-snap); o painel 2 é o grafo de loja/js/cerebro-spi.js, no visual do Cérebro do
   consultório (css/cerebro.css do SPI): preto e dourado. Tudo prefixado com cs- (o cérebro) e lc-
   (os pontos, as setas e a dica, no estilo das tiras de telas de css/spi-venda.css).
   ============================================================================================= */
.loja-carrossel { --cs-ouro: #e6bb5a; --cs-ouro-claro: #f8e3a6; --cs-nav: 4.4rem; --cs-extra: 0px; }
.loja-carrossel-faixa {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; cursor: grab;
}
.loja-carrossel-faixa::-webkit-scrollbar { display: none; }
.loja-carrossel-faixa:focus-visible { outline: 2px solid var(--cs-ouro-claro); outline-offset: -3px; }
.loja-carrossel-faixa.lc-arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.loja-carrossel-faixa.lc-assentando { scroll-snap-type: none; }
.loja-carrossel-faixa img { -webkit-user-drag: none; user-select: none; }
.loja-carrossel-faixa > .loja-abertura { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

.cs-painel {
  position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 1671 / 941; overflow: hidden; isolation: isolate; color: #e9e0c9;
  background:
    radial-gradient(46% 62% at 50% 46%, rgba(230, 187, 90, .11) 0%, rgba(230, 187, 90, .035) 48%, transparent 78%),
    radial-gradient(120% 90% at 50% 0%, #1b1a16 0%, #0b0b09 58%, #050505 100%);
}
.cs-painel::after { content: ""; position: absolute; inset: auto 0 0; height: var(--cs-nav); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,5,0), var(--color-bg, #0a0a0a)); }
.cs-canvas, .cs-areas { position: absolute; left: 0; right: 0; top: 0; bottom: var(--cs-nav); width: 100%; height: calc(100% - var(--cs-nav)); display: block; }
.cs-areas { z-index: 2; list-style: none; margin: 0; padding: 0; }
.cs-areas ul { list-style: none; margin: 0; padding: 0; }
.cs-selo {
  position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0;
  display: inline-flex; align-items: center; gap: .5rem; padding: .34rem .85rem .34rem .7rem; border-radius: 999px;
  background: rgba(10, 10, 8, .72); border: 1px solid rgba(230, 187, 90, .4); color: var(--cs-ouro-claro);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 0 18px rgba(230, 187, 90, .18);
}
.cs-selo-ponto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cs-ouro); box-shadow: 0 0 0 0 rgba(230, 187, 90, .7); animation: cs-pulso 1.8s ease-out infinite; }
@keyframes cs-pulso { 0% { box-shadow: 0 0 0 0 rgba(230, 187, 90, .7); } 70%, 100% { box-shadow: 0 0 0 .6rem rgba(230, 187, 90, 0); } }
.cs-esfera-rotulo {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transform: translate(-50%, -50%);
  font-weight: 800; font-size: 1.7rem; letter-spacing: .06em; color: #2a1d05; text-shadow: 0 1px 0 rgba(255, 244, 205, .55);
}

/* Cada bolinha é um link: o ponto fica no canvas, e aqui só a área de toque e o nome. O JS põe o
   link no centro da bolinha (largura zero) e o nome ao lado ou embaixo, nunca por cima de outro. */
.cs-vivo .cs-no { position: absolute; z-index: 2; width: 0; height: 0; display: block; color: inherit; text-decoration: none; opacity: 0; transition: opacity .7s ease; -webkit-tap-highlight-color: transparent; }
.cs-vivo .cs-no.cs-visivel { opacity: 1; }
.cs-vivo .cs-bola { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; }
.cs-vivo .cs-no-area .cs-bola { left: -22px; top: -22px; width: 44px; height: 44px; }
.cs-vivo .cs-rot {
  position: absolute; left: 0; top: 0; width: max-content; max-width: 150px; line-height: 1.2; font-size: .88rem; font-weight: 500; color: #e9e0c9;
  text-shadow: 0 0 6px #000, 0 0 12px #000, 0 1px 2px #000;
}
.cs-vivo .cs-no-area .cs-rot { font-size: 1.06rem; font-weight: 800; color: var(--cs-ouro-claro); letter-spacing: .01em; padding: .18rem .6rem; border: 1px solid rgba(241, 207, 107, .6); border-radius: 999px; background: rgba(10, 10, 10, .78); box-shadow: 0 0 14px rgba(230, 187, 90, .25); }
.cs-vivo .cs-no:not(.cs-no-area) .cs-rot { color: #d9d2c2; font-weight: 400; }
.cs-vivo .cs-no.cs-lado-dir .cs-rot { text-align: left; }
.cs-vivo .cs-no.cs-lado-esq .cs-rot { text-align: right; }
.cs-vivo .cs-no.cs-lado-baixo .cs-rot, .cs-vivo .cs-no.cs-lado-cima .cs-rot { text-align: center; }
.cs-vivo .cs-no:hover .cs-rot, .cs-vivo .cs-no:focus-visible .cs-rot { color: #fff; }
.cs-vivo .cs-no:focus-visible .cs-bola { outline: 2px solid var(--cs-ouro-claro); outline-offset: 1px; }
.cs-vivo .cs-no:focus-visible .cs-rot { outline: 2px solid var(--cs-ouro-claro); outline-offset: 2px; border-radius: 3px; }

/* Sem JavaScript o painel 2 é uma lista comum de links. */
.cs-painel:not(.cs-vivo) { aspect-ratio: auto; min-height: 24rem; }
.cs-painel:not(.cs-vivo) .cs-canvas, .cs-painel:not(.cs-vivo) .cs-esfera-rotulo { display: none; }
.cs-painel:not(.cs-vivo) .cs-areas { position: static; height: auto; padding: 3.4rem 1.4rem 1.4rem; display: grid; gap: .9rem; }
.cs-painel:not(.cs-vivo) .cs-no { color: var(--cs-ouro-claro); line-height: 1.7; }
.cs-vivo .cs-area, .cs-vivo .cs-area ul, .cs-vivo .cs-area li { display: contents; }

/* Os pontos, as setas e a dica de arrastar (o mesmo estilo das tiras de telas). */
.lc-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--cs-nav); display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 0 1rem .35rem; pointer-events: none; }
.lc-nav > * { pointer-events: auto; }
.lc-meio { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; }
.lc-seta { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(241, 207, 107, .55); background: rgba(10, 10, 10, .8); color: var(--cs-ouro-claro); font: 700 1.5rem/1 "Montserrat", Arial, sans-serif; cursor: pointer; }
.lc-seta:disabled { opacity: .3; cursor: default; }
.lc-seta:focus-visible, .lc-ponto:focus-visible { outline: 2px solid var(--cs-ouro-claro); outline-offset: 2px; }
.lc-pontos { display: flex; gap: .15rem; }
.lc-ponto { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; background: none; cursor: pointer; }
.lc-ponto i { display: block; width: .5rem; height: .5rem; border-radius: 50%; background: rgba(241, 207, 107, .35); transition: background .2s, width .2s; }
.lc-ponto.ativo i { width: 1.3rem; border-radius: 999px; background: var(--cs-ouro); }
.lc-dica { color: var(--cs-ouro-claro); font-size: .82rem; font-weight: 700; text-align: center; text-shadow: 0 1px 3px #000; animation: lc-dica 1.6s ease-in-out 4; }
@keyframes lc-dica { 50% { transform: translateX(6px); } }

@media (max-width: 719px) {
  /* No celular a foto é mais baixa e o grafo precisa de altura: o painel 2 fica mais alto, a foto fica
     colada no alto, do mesmo tamanho de sempre, e o fundo escuro da página completa o resto. */
  .loja-carrossel { --cs-nav: 3.9rem; --cs-extra: 13rem; }
  .cs-painel { aspect-ratio: auto; height: calc(100vw * 784 / 900 + var(--cs-extra)); }
  .cs-selo { top: .5rem; font-size: .74rem; padding: .26rem .75rem .26rem .6rem; }
  .lc-seta { width: 2.2rem; height: 2.2rem; }
  .cs-esfera-rotulo { font-size: 1.25rem; }
  .cs-vivo .cs-rot { font-size: .72rem; max-width: 86px; }
  .cs-vivo .cs-no-area .cs-rot { font-size: .82rem; max-width: 110px; padding: .12rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-selo-ponto, .lc-dica { animation: none; }
  .cs-vivo .cs-no { transition: none; }
}