/*
 * LOJA V2 (2026-10-19): a página inicial da loja (loja/index.html, com as áreas por público e a
 * vitrine de quem comprou) e a página "Para médicos" (loja/medicos.html).
 *
 * OS TOKENS SÃO OS APROVADOS PELO DONO para a loja (prévia loja-parecer/sugestoes/base.css):
 * grafite azul escuro, o dourado da marca só em ação, preço e logo, Bodoni nos títulos SEM
 * itálico e Jost no texto. As páginas de produto copiam os MESMOS valores do bloco :root abaixo.
 *
 * O CABEÇALHO PADRÃO DA LOJA (o mesmo nas páginas de produto):
 *
 *   <header class="lv-topo">
 *     <div class="lv-wrap lv-topo-linha">
 *       <a class="lv-marca" href="index.html#inicio" aria-label="SPI, Soluções Profissionais Integradas em Saúde: página inicial da loja">
 *         <img src="../images/marca/spi-logo-ouro.png" width="483" height="203" alt="SPI"></a>
 *       <button type="button" class="lv-produtos" data-menu-produtos>Produtos</button>
 *       <nav class="lv-conta" aria-label="Conta">
 *         <a class="lv-ja-comprei" href="index.html?entrar=1">Já comprei</a>
 *         <a class="lv-entrar" href="../index.html?entrar=1" aria-label="Entrar no SPI Prontuário">Entrar</a>
 *       </nav>
 *     </div>
 *   </header>
 *   <script src="produtos.js"></script> <script src="js/menu-produtos.js"></script>
 *
 * "Já comprei" é a entrada de quem comprou uma ferramenta da loja (na página inicial ele abre o
 * login ali mesmo; nas outras, index.html?entrar=1 faz o mesmo). "Entrar" é a entrada do SPI
 * Prontuário, o sistema por assinatura, como o "Entrar no SPI" de loja/spi.html.
 *
 * Esta folha NÃO é carregada pelas ferramentas nem pelos documentos (receita, laudo, atestado):
 * só por index.html e medicos.html. Nada aqui mexe em letra de documento nem em regra de impressão.
 */
@font-face { font-family: "SPI Serif"; src: url("../fonts/campanha/bodoni-normal-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SPI Sans"; src: url("../fonts/campanha/jost-normal-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SPI Sans"; src: url("../fonts/campanha/jost-normal-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SPI Sans"; src: url("../fonts/campanha/jost-normal-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  /* superfícies */
  --tinta: #0e141c;          /* fundo escuro da marca */
  --tinta-2: #151e29;        /* superfície sobre o escuro */
  --linha-escura: #2b3746;
  --claro: #eceef0;          /* fundo claro, frio (não creme) */
  --claro-2: #f8f9fa;
  --linha-clara: #cdd3d9;
  /* texto */
  --texto-claro: #eef1f4;
  --texto-claro-2: #b4bdc7;
  --texto-escuro: #131a22;
  --texto-escuro-2: #4a5562;
  /* marca: o dourado é só ação, preço e logo */
  --ouro: #d8b46a;
  --ouro-texto: #e2c27e;     /* dourado para texto sobre o escuro */
  --ouro-escuro: #7a5716;    /* dourado para link sobre o claro */
  --tinta-botao: #17120a;
  /* tipografia: 15 / 17 / 19 / 24 / 32 / 44 / 60 */
  --serif: "SPI Serif", "Bodoni 72", "Didot", Georgia, serif;
  --sans: "SPI Sans", "Futura", "Century Gothic", system-ui, sans-serif;
  --raio-tela: 14px;
  --raio-botao: 8px;
  --largura: 1200px;
  --lateral: 40px;

  /* a loja inteira, além dos tokens aprovados */
  --tinta-3: #1b2633;        /* superfície um degrau acima (passar o mouse, painel aberto) */
  --rodape: #0a0f15;
  --aviso: #ffb4a6;          /* erro de formulário sobre o escuro */
  --liberada: #9fd7a8;       /* "Liberada": a ferramenta já é da pessoa */
  /* a cor de cada público, a mesma das portas, do painel Produtos e das áreas */
  --c-medicos: #d8b46a;
  --c-hospitais: #6fa8ff;
  --c-mentorias: #c59bff;
  --c-professores: #8fd18b;
  --c-familias: #f49cb8;
}

/* ------------------------------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.loja-v2 { margin: 0; background: var(--tinta); color: var(--texto-claro); font: 400 17px/1.6 var(--sans); }
.loja-v2 *, .loja-v2 *::before, .loja-v2 *::after { box-sizing: border-box; }
.loja-v2 img { max-width: 100%; height: auto; display: block; }
:where(.loja-v2) a { color: inherit; }
.loja-v2 .hidden, .loja-v2 [hidden] { display: none !important; }
.loja-v2 :focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 3px; border-radius: 4px; }
.loja-v2 .num, .loja-v2 table { font-variant-numeric: tabular-nums; }
.lv-wrap { max-width: calc(var(--largura) + 2 * var(--lateral)); margin: 0 auto; padding: 0 var(--lateral); }
.lv-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lv-pular { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--raio-botao); background: var(--ouro); color: var(--tinta-botao); font-weight: 600; text-decoration: none; }
.lv-pular:focus { top: 12px; }
.loja-v2 main:focus { outline: none; }

/* títulos: a serifa da marca, sempre em pé, numa cor só */
.loja-v2 h1, .loja-v2 .lv-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }

/* ----------------------------------------------------------------------------- o topo */
.lv-topo { position: sticky; top: 0; z-index: 30; background: var(--tinta); border-bottom: 1px solid var(--linha-escura); }
.lv-topo-linha { display: flex; align-items: center; gap: 8px; min-height: 72px; }
.lv-marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: 20px; text-decoration: none; }
.lv-marca img { width: 76px; height: auto; }
.lv-produtos { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linha-escura); border-radius: var(--raio-botao); background: none; color: var(--texto-claro); font: 500 16px/1 var(--sans); cursor: pointer; }
.lv-produtos:hover { border-color: var(--ouro); }
.lv-produtos[aria-expanded="true"] { border-color: var(--ouro); background: var(--tinta-2); }
.lv-conta { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lv-conta a, .lv-conta button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; white-space: nowrap; border: 0; border-radius: var(--raio-botao); background: none; color: var(--texto-claro-2); font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.lv-conta a:hover, .lv-conta button:hover { color: var(--texto-claro); }
.lv-conta .lv-ja-comprei { color: var(--texto-claro); }

/* ------------------------------------------------------------------------- botões */
.lv-botao, .loja-v2 .btn-cta-primary, .loja-v2 .hub-botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border: 1px solid var(--ouro); border-radius: var(--raio-botao); background: var(--ouro); color: var(--tinta-botao);
  font: 600 17px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer;
}
.lv-botao:hover, .loja-v2 .btn-cta-primary:hover, .loja-v2 .hub-botao:hover { background: #e4c37f; border-color: #e4c37f; }
.lv-botao-linha, .loja-v2 .hub-botao.lv-botao-linha { background: none; color: var(--texto-claro); border-color: var(--linha-escura); }
.lv-botao-linha:hover, .loja-v2 .hub-botao.lv-botao-linha:hover { background: none; border-color: var(--ouro); }
.loja-v2 .btn-cta-primary:disabled { opacity: .6; cursor: progress; }
/* ação secundária escrita: texto, sem caixa e sem sublinhado fazendo papel de botão */
.lv-link, .loja-v2 .btn-link, .loja-v2 .loja-link-entrar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ouro-texto); font: 500 16px/1.3 var(--sans); text-decoration: none; cursor: pointer;
}
.lv-link:hover, .loja-v2 .btn-link:hover, .loja-v2 .loja-link-entrar:hover { color: var(--texto-claro); }
.lv-acoes, .loja-v2 .loja-desc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 0; }

/* ------------------------------------------------------- o que aparece em cada área (#hash) */
/* loja/js/grupos.js põe data-grupo no <html> antes de a página aparecer. Sem JavaScript, fica a
   página inicial com as portas, que levam às páginas de cada produto. */
.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,
html[data-grupo="familias"] #loja-g-familias,
html[data-grupo="professores"] #loja-g-professores,
html:not([data-grupo]) #loja-hub { display: block; }
html[data-grupo="inicio"] .loja-main > :not(#loja-hub):not(#loja-bruno):not(#loja-inicio-mais),
html:not([data-grupo]) .loja-main > :not(#loja-hub):not(#loja-bruno):not(#loja-inicio-mais),
html[data-grupo="mentorias"] .loja-main > :not(#loja-g-mentorias):not(#loja-todas-areas),
html[data-grupo="escalas"] .loja-main > :not(#loja-g-escalas):not(#loja-todas-areas),
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; }
#loja-inicio-mais { display: none; }
html[data-grupo="inicio"] #loja-inicio-mais, html:not([data-grupo]) #loja-inicio-mais { display: block; }
/* Hospitais e equipes: a lista das duas, 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; }

/* o que muda quando a pessoa já entrou (loja/js/vitrine.js põe loja-logada no <html>) */
.lv-so-logada { display: none !important; }
html.loja-logada .lv-so-logada { display: revert !important; }
html.loja-logada a.lv-so-logada { display: inline-flex !important; }
html.loja-logada .lv-so-visitante { display: none !important; }

/* a volta à página inicial, no alto de cada área */
.loja-todas-areas { display: flex; align-items: center; width: fit-content; min-height: 44px; margin: 20px auto 0; max-width: calc(var(--largura) + 2 * var(--lateral)); padding: 0 var(--lateral); color: var(--texto-claro-2); font-size: 16px; text-decoration: none; }
.loja-v2 .loja-main > .loja-todas-areas { width: 100%; }
.loja-todas-areas:hover { color: var(--ouro-texto); }

/* -------------------------------------------------------------- a abertura e as portas */
.lv-abertura { padding: 56px 0 0; }
.lv-abertura h1 { margin: 0; max-width: 15em; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.06; }
.lv-abertura > .lv-wrap > p { margin: 18px 0 0; max-width: 34em; color: var(--texto-claro-2); font-size: 19px; line-height: 1.55; }
.portas { list-style: none; margin: 40px 0 0; padding: 0; border-bottom: 1px solid var(--linha-escura); }
.porta a {
  position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px 96px; gap: 28px; align-items: center;
  padding: 24px 0 24px 28px; border-top: 1px solid var(--linha-escura); color: inherit; text-decoration: none;
}
.porta a::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 2px; background: var(--cor, var(--ouro)); }
.porta a:hover { background: var(--tinta-2); }
.porta-quem { font-family: var(--serif); font-size: 31px; line-height: 1.1; letter-spacing: -0.01em; }
.porta-problema { font-size: 18px; line-height: 1.45; }
.porta-produto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.porta-produto b { font-weight: 600; font-size: 16px; line-height: 1.35; }
.porta-produto small { font-size: 15px; line-height: 1.45; color: var(--texto-claro-2); }
.porta-conta { justify-self: end; padding-right: 12px; color: var(--texto-claro-2); font-size: 15px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .porta a { transition: background-color .15s; } }

/* ----------------------------------------------------------------- o bloco do Dr. Bruno */
.bruno { padding: 72px 0; }
#loja-bruno { margin-top: 0; }
html[data-grupo="medicos"] #loja-bruno { margin-top: 56px; }
.bruno-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.bruno-foto { margin: 0; aspect-ratio: 4 / 5; max-height: 560px; overflow: hidden; border-radius: 4px; background: #d9d6cf; }
.bruno-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.bruno-assina { margin: 0 0 16px; color: var(--ouro-texto); font-weight: 500; font-size: 17px; }
.bruno h2 { margin: 0; max-width: 16em; font: 400 clamp(32px, 3.4vw, 48px)/1.12 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.bruno-texto { margin: 24px 0 0; max-width: 34em; color: var(--texto-claro-2); font-size: 18px; line-height: 1.6; }
.bruno-crm { margin: 20px 0 0; font-size: 16px; color: var(--texto-claro); font-weight: 500; }
/* as credenciais vêm de loja/produtos.js (AUTOR), desenhadas por loja/js/autor.js */
.bruno-credenciais { margin-top: 20px; }
.bruno-credenciais .loja-rx-kicker, .bruno-credenciais h2, .bruno-credenciais .loja-autor-titulo { display: none; }
.bruno-credenciais ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha-escura); }
.bruno-credenciais li { padding: 9px 0; border-bottom: 1px solid var(--linha-escura); color: var(--texto-claro-2); font-size: 16px; line-height: 1.45; }

/* ----------------------------------------------------------------- faixas de uma linha */
.lv-faixa { padding: 44px 0; border-top: 1px solid var(--linha-escura); }
.lv-faixa > .lv-wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lv-faixa h2, .lv-h { margin: 0 0 6px; font: 600 24px/1.25 var(--sans); }
.lv-faixa p { margin: 0; max-width: 40em; color: var(--texto-claro-2); }
.lv-faixa .lv-botao { flex: none; }

/* -------------------------------------------------------------------------- o rodapé */
.loja-v2 .loja-main { padding-bottom: 72px; }
html[data-grupo="inicio"] .loja-v2 .loja-main, html:not([data-grupo]) .loja-v2 .loja-main { padding-bottom: 0; }
.lv-rodape { margin-top: 0; padding: 48px 0 32px; border-top: 1px solid var(--linha-escura); background: var(--rodape); color: var(--texto-claro-2); font-size: 15px; line-height: 1.55; }
.lv-rodape h2 { margin: 0 0 12px; color: var(--texto-claro); font: 600 17px/1.3 var(--sans); }
.loja-guias-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0 0 32px; padding: 0; list-style: none; }
.loja-guias-lista a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--linha-escura); color: var(--texto-claro-2); text-decoration: none; }
.loja-guias-lista a:hover { color: var(--texto-claro); }
.lv-rodape p { margin: 0 0 8px; max-width: 60em; }
.lv-rodape-legal { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.lv-rodape-legal a, .lv-rodape .footer-legal-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-claro-2); }
.lv-rodape-legal a:hover { color: var(--texto-claro); }

/* ---------------------------------------------------------- as páginas de cada público */
.lv-area { padding: 0; }
.lv-publico { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; color: var(--texto-claro); font-weight: 500; font-size: 17px; }
.lv-publico::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--cor, var(--ouro)); }
.loja-v2 .hub-titulo, .loja-v2 .loja-topo-titulo { margin: 0; max-width: 18em; font: 400 clamp(34px, 3.6vw, 52px)/1.1 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.loja-v2 .hub-sub, .loja-v2 .loja-topo-sub { margin: 18px 0 0; max-width: 40em; color: var(--texto-claro-2); font-size: 18px; line-height: 1.6; }
/* cada produto da área numa linha: à esquerda o nome e a ação, à direita o que ele faz */
.area-produtos { margin: 40px 0 0; border-bottom: 1px solid var(--linha-escura); }
.area-produto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 56px; padding: 32px 0; border-top: 1px solid var(--linha-escura); }
.area-produto-cabeca { min-width: 0; }
.area-produto h3, .area-produto-cabeca h3 { margin: 0; font: 400 32px/1.15 var(--serif); letter-spacing: -0.01em; }
.area-produto-tipo { margin: 0 0 8px; color: var(--texto-claro-2); font-size: 16px; }
.area-produto-condicao { margin: 10px 0 0; font-weight: 500; font-size: 17px; }
.area-produto-condicao.breve, .area-produto-condicao[data-tipo="breve"] { color: var(--ouro-texto); }
.area-produto-condicao[data-tipo="outro"] { color: var(--texto-claro-2); }
.area-produto-corpo > p { margin: 0 0 14px; color: var(--texto-claro-2); }
.area-produto-corpo ul { margin: 0; padding: 0 0 0 20px; color: var(--texto-claro-2); }
.area-produto-corpo li { margin: 0 0 8px; line-height: 1.55; }
.area-produto-corpo li::marker { color: var(--linha-escura); }
.area-produto-corpo li b { color: var(--texto-claro); font-weight: 500; }
.area-produto .lv-acoes { margin-top: 20px; }
/* Na área, os produtos são iguais em importância: o botão de cada um é de contorno, para três
   botões dourados não disputarem a mesma tela. O dourado cheio fica para a ação única de cada página. */
.loja-v2 .area-produto .hub-botao { background: none; border-color: var(--linha-escura); color: var(--texto-claro); }
.loja-v2 .area-produto .hub-botao:hover { background: none; border-color: var(--ouro); }
/* Hospitais e equipes: as duas linhas que levam a cada uma */
.loja-v2 .hub-menu { display: block; margin: 40px 0 0; border-bottom: 1px solid var(--linha-escura); }
.loja-v2 .hub-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 56px; align-items: baseline; padding: 28px 0 28px 24px; position: relative; border-top: 1px solid var(--linha-escura); color: inherit; text-decoration: none; }
.loja-v2 .hub-item::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 4px; border-radius: 2px; background: var(--cor, var(--ouro)); }
.loja-v2 .hub-item:hover { background: var(--tinta-2); }
.loja-v2 .hub-item strong { font: 400 30px/1.15 var(--serif); }
.loja-v2 .hub-item .hub-txt-oque { color: var(--texto-claro-2); }
.loja-v2 .hub-item .hub-txt-oque b { display: block; margin-top: 6px; color: var(--texto-claro); font-weight: 500; }
.loja-v2 .hosp-vista .loja-voltar { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 4px; color: var(--texto-claro-2); text-decoration: none; }
.loja-v2 .hosp-vista .loja-voltar:hover { color: var(--ouro-texto); }

/* ----------------------------------------------------------- a vitrine de quem comprou */
.lv-vitrine-topo { padding: 8px 0 0; }
.loja-topo-vantagens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 32px 0 0; padding: 0; list-style: none; }
.loja-topo-vantagens li { padding: 16px 0 0; border-top: 1px solid var(--linha-escura); color: var(--texto-claro-2); font-size: 16px; line-height: 1.5; }
.loja-topo-vantagens b { display: block; margin-bottom: 4px; color: var(--texto-claro); font-weight: 600; font-size: 17px; }
.lv-vitrine-comparar { margin: 20px 0 0; }
.loja-secao { margin: 0; }
.loja-v2 .loja-main > .loja-secao, .loja-v2 .loja-main > #loja-obrigado, .loja-v2 .loja-main > #loja-aviso,
.loja-v2 .loja-main > #loja-carregando, .loja-v2 .loja-main > #loja-detalhe, .loja-v2 .loja-main > .loja-login,
.loja-v2 .loja-main > #loja-area {
  max-width: calc(var(--largura) + 2 * var(--lateral)); margin-left: auto; margin-right: auto; padding-left: var(--lateral); padding-right: var(--lateral);
}
#loja-carregando { padding-top: 24px; color: var(--texto-claro-2); }
.loja-v2 .muted { color: var(--texto-claro-2); }
.loja-v2 .form-aviso { margin: 12px 0 0; color: var(--aviso); font-size: 16px; }
.loja-v2 .form-aviso:empty { display: none; }
#loja-aviso:not(.hidden) { display: block; margin-top: 24px; margin-bottom: 0; padding-top: 14px; padding-bottom: 14px; border-left: 4px solid var(--aviso); background: var(--tinta-2); }

/* a chegada de quem acabou de pagar */
#loja-obrigado:not(.hidden) { margin-top: 32px; }
.loja-obrigado { position: relative; padding: 28px 28px 28px 32px; border-radius: var(--raio-botao); background: var(--tinta-2); }
.loja-obrigado::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 2px; background: var(--ouro); }
.loja-obrigado h2 { margin: 0 0 8px; font: 400 32px/1.15 var(--serif); }
.loja-obrigado p { margin: 0; color: var(--texto-claro-2); max-width: 44em; }
.loja-obrigado-acoes { margin-top: 20px; }
.loja-v2 .loja-rx-kicker { margin: 0 0 8px; color: var(--ouro-texto); font-weight: 500; font-size: 16px; text-transform: none; letter-spacing: 0; }

/* use grátis */
#loja-gratis:not(.hidden) { margin-top: 40px; }
.loja-amostra { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 0; border-top: 1px solid var(--linha-escura); }
.loja-amostra h2 { margin: 0 0 4px; font: 600 22px/1.3 var(--sans); }
.loja-amostra-sub { margin: 0; color: var(--texto-claro-2); }
.loja-amostra .btn-cta-primary { flex: none; min-height: 48px; }
/* quem já entrou veio abrir o que comprou: o "Abrir" dourado é o da ferramenta dele, não o da amostra */
html.loja-logada .loja-amostra .btn-cta-primary { background: none; border-color: var(--linha-escura); color: var(--texto-claro); }
html.loja-logada .loja-amostra .btn-cta-primary:hover { border-color: var(--ouro); }

/* as ferramentas: uma linha por produto, com a cor dele na régua da esquerda */
.loja-v2 .loja-boxes { display: block; margin: 40px 0 0; border-bottom: 1px solid var(--linha-escura); }
.loja-v2 .loja-box {
  --acento: var(--ouro);
  position: relative; display: grid; width: 100%;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(190px, 3fr);
  grid-template-areas: "nome itens selo" "resumo itens fim";
  grid-template-rows: auto 1fr;
  gap: 4px 40px; align-items: start; margin: 0; padding: 28px 0 28px 28px;
  border: 0; border-top: 1px solid var(--linha-escura); border-radius: 0; background: none;
  color: var(--texto-claro); font: inherit; text-align: left; cursor: pointer;
}
.loja-v2 .loja-box::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 4px; border-radius: 2px; background: var(--acento); }
.loja-v2 .loja-box:hover { background: var(--tinta-2); }
.loja-v2 .loja-box:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: -2px; border-radius: 4px; }
.loja-v2 .loja-box-spi { --acento: #eed5a0; }
.loja-v2 .loja-box-plantao { --acento: #acd9fa; }
.loja-v2 .loja-box-consultorio { --acento: #ade0c9; }
.loja-v2 .loja-box-emergencia { --acento: #fac6af; }
.loja-v2 .loja-box-central_ia { --acento: #d8c5ef; }
.loja-v2 .loja-box-rastreio { --acento: #a6e1df; }
.loja-v2 .loja-box-agenda_plantao { --acento: #f0d09d; }
.loja-v2 .loja-box-corpo { display: contents; }
.loja-v2 .loja-box-nome { grid-area: nome; font: 600 22px/1.25 var(--sans); }
.loja-v2 .loja-box-resumo { grid-area: resumo; color: var(--texto-claro-2); font-style: normal; font-size: 16px; line-height: 1.5; }
.loja-v2 .loja-box-itens { grid-area: itens; margin: 0; padding: 0 0 0 20px; color: var(--texto-claro-2); font-size: 15px; line-height: 1.5; }
.loja-v2 .loja-box-itens li { margin: 0 0 6px; }
.loja-v2 .loja-box-itens li::marker { color: var(--linha-escura); }
.loja-v2 .loja-box-selo { grid-area: selo; justify-self: end; color: var(--texto-claro-2); font-weight: 500; font-size: 16px; }
.loja-v2 .loja-box-breve .loja-box-selo { color: var(--ouro-texto); }
.loja-v2 .loja-box-comprado .loja-box-selo { color: var(--liberada); }
.loja-v2 .loja-box-fim { grid-area: fim; justify-self: end; align-self: end; }
.loja-v2 .loja-box-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--linha-escura); border-radius: var(--raio-botao); color: var(--texto-claro); font-weight: 500; font-size: 16px; white-space: nowrap; }
.loja-v2 .loja-box:hover .loja-box-cta { border-color: var(--acento); }
.loja-v2 .loja-box-comprado .loja-box-cta { border-color: var(--acento); background: var(--acento); color: var(--tinta-botao); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .loja-v2 .loja-box { transition: background-color .15s; } }

/* o combo */
#loja-combo:not(.hidden) { margin-top: 48px; }
.loja-combo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 56px; align-items: end; padding: 32px 0; border-top: 1px solid var(--linha-escura); border-bottom: 1px solid var(--linha-escura); }
.loja-combo h2 { margin: 0; font: 400 32px/1.15 var(--serif); text-wrap: balance; }
.loja-combo-lista { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--texto-claro-2); }
.loja-combo-convite { margin: 0 0 14px; color: var(--texto-claro-2); }
.loja-combo-oferta { justify-self: end; text-align: right; }

/* o detalhe de uma ferramenta que ainda não está à venda */
#loja-detalhe:not(.hidden) { margin-top: 40px; }
.loja-detalhe > * { max-width: 44em; }
.loja-detalhe h2 { margin: 0 0 8px; font: 400 32px/1.15 var(--serif); }
.loja-detalhe-sub { margin: 0 0 14px; color: var(--texto-claro-2); }
.loja-detalhe-itens { margin: 0 0 20px; padding-left: 20px; color: var(--texto-claro-2); }
.loja-breve { color: var(--ouro-texto); }

/* o login e a criação de senha */
.loja-v2 .loja-login:not(.hidden) { display: block; margin-top: 48px; }
.loja-v2 .loja-login > * { max-width: 460px; }
.loja-v2 .loja-login h2 { margin: 0 0 6px; font: 400 32px/1.15 var(--serif); }
.loja-v2 .loja-login form { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding: 24px; border: 1px solid var(--linha-escura); border-radius: var(--raio-botao); background: var(--tinta-2); }
.loja-v2 .loja-login label { margin-top: 8px; color: var(--texto-claro); font-weight: 500; font-size: 16px; }
.loja-v2 .loja-login input { min-height: 48px; padding: 0 14px; border: 1px solid #3c4b5e; border-radius: 6px; background: var(--tinta); color: var(--texto-claro); font: 400 17px/1.3 var(--sans); }
.loja-v2 .loja-login input:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 1px; border-color: var(--ouro); }
.loja-v2 .loja-login .btn-cta-primary { margin-top: 16px; }
.loja-v2 .loja-login .btn-link { align-self: flex-start; }
#loja-area:not(.hidden) { margin-top: 24px; }

/* --------------------------------------------------------------- a página Para médicos */
/* Todos os produtos para médicos, um abaixo do outro (o dono, 2026-10-19: "pode tirar aquelas
   colunas comparativas, e manter todos os produtos visiveis"). Cada linha: a tela real do produto
   à esquerda, e à direita o nome, o que é, o preço do ano com a parcela embaixo e o botão. As linhas
   se separam por um fio, sem caixa em volta. */
.med-cabeca { padding: 32px 0 8px; }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--texto-claro-2); font-size: 16px; }
.trilha a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -4px; padding: 0 4px; text-decoration: none; color: var(--texto-claro-2); }
.trilha a:hover { color: var(--ouro-texto); }
.med-cabeca h1 { margin: 0; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.1; }
.med-cabeca p { margin: 14px 0 0; max-width: 46em; color: var(--texto-claro-2); font-size: 18px; }
.med-lista { margin: 32px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linha-escura); }
.med-produto { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 48px; align-items: start; padding: 36px 0; border-top: 1px solid var(--linha-escura); }
.med-tela { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--linha-escura); border-radius: var(--raio-tela); background: #000; }
.med-tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* As imagens são as das páginas de propaganda de cada produto (o dono, 2026-10-19: "TEM IMAGENS MTO
   MELHORES NO BANCO DE IMAGENS DAS PROPAGANDAS"). A fotografia enche a moldura 4:5 com o rosto no
   terço de cima. O notebook ilustrativo (imagem larga) entra em detalhe, com o foco no painel. A tela
   do computador da Agenda entra quase inteira, sobre o mesmo preto dela. O Combo junta as quatro
   que ele traz. */
.med-tela-foto img { object-position: 50% 30%; }
.med-tela-larga img { object-position: var(--foco, 50% 50%); }
.med-tela-pc { background: #0a0a0a; }
.med-tela-pc img { object-fit: contain; object-position: 50% 50%; transform: scale(1.5); }
.med-tela-mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.med-tela-mosaico img { min-width: 0; min-height: 0; object-position: var(--foco, 50% 30%); }
.med-corpo { max-width: 46em; padding-top: 4px; }
.med-nome { margin: 0; font: 400 34px/1.15 var(--serif); letter-spacing: -0.01em; }
.med-oque { margin: 16px 0 0; color: var(--texto-claro-2); font-size: 18px; line-height: 1.55; }
.med-preco { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; }
.med-preco strong { font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--texto-claro); }
.med-preco strong.breve { color: var(--ouro-texto); }
.med-preco span { color: var(--texto-claro-2); font-size: 16px; line-height: 1.45; }
.med-preco span:empty { display: none; }
.med-acao { margin: 22px 0 0; }
.med-acao .lv-botao { min-height: 48px; }
.med-tambem { margin: 56px 0 0; }
.med-tambem h2 { margin: 0 0 12px; font: 600 22px/1.3 var(--sans); }
.med-tambem ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha-escura); }
.med-tambem a { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; min-height: 44px; padding: 14px 0; border-bottom: 1px solid var(--linha-escura); color: inherit; text-decoration: none; }
.med-tambem a:hover .med-t-nome { text-decoration: underline; text-underline-offset: 3px; }
.med-t-nome { font-weight: 600; }
.med-t-oque { color: var(--texto-claro-2); }
.med-t-preco { white-space: nowrap; }

/* ------------------------------------------------------------------------ tablet */
@media (max-width: 1100px) {
  .porta a { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "quem problema" "quem produto"; gap: 10px 28px; align-items: start; }
  .porta-quem { grid-area: quem; align-self: center; }
  .porta-problema { grid-area: problema; }
  .porta-produto { grid-area: produto; }
  .porta-conta { display: none; }
  .loja-v2 .loja-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nome selo" "resumo resumo" "itens itens" "fim fim"; gap: 8px 24px; }
  .loja-v2 .loja-box-itens { margin-top: 8px; }
  .loja-v2 .loja-box-fim { justify-self: start; margin-top: 12px; }
}
@media (max-width: 900px) {
  .bruno-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; }
  .area-produto, .loja-v2 .hub-item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* numa coluna só, o botão vem depois do que o produto faz, e não antes */
  .area-produto { gap: 0; }
  .area-produto-cabeca { display: contents; }
  .area-produto-corpo { order: 1; margin-top: 16px; }
  .area-produto .lv-acoes { order: 2; }
  .loja-combo { grid-template-columns: minmax(0, 1fr); }
  .loja-combo-oferta { justify-self: start; text-align: left; }
  .loja-guias-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loja-topo-vantagens { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .med-tambem a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .med-tambem .med-t-oque { grid-column: 1 / -1; grid-row: 2; }
  .med-produto { grid-template-columns: 180px minmax(0, 1fr); gap: 0 32px; }
}

/* ------------------------------------------------------------------------ celular */
@media (max-width: 760px) {
  :root { --lateral: 16px; }
  .lv-topo-linha { min-height: 60px; gap: 4px; }
  .lv-marca { margin-right: 8px; }
  .lv-marca img { width: 60px; }
  .lv-produtos { padding: 0 12px; font-size: 16px; }
  .lv-conta { gap: 0; }
  .lv-conta a, .lv-conta button { padding: 0 10px; font-size: 16px; }
  .lv-abertura { padding-top: 32px; }
  .lv-abertura h1 { font-size: 38px; }
  .lv-abertura > .lv-wrap > p { font-size: 17px; }
  .portas { margin-top: 28px; }
  .porta a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quem conta" "problema problema" "produto produto"; gap: 6px 12px; padding: 20px 0 20px 18px; }
  .porta a::before { top: 20px; bottom: 20px; }
  .porta-quem { grid-area: quem; font-size: 28px; }
  .porta-conta { grid-area: conta; display: block; padding-right: 0; align-self: center; }
  .porta-problema { grid-area: problema; font-size: 17px; }
  .porta-produto { grid-area: produto; margin-top: 6px; }
  .bruno { padding: 40px 0 56px; }
  .bruno > .lv-wrap { padding: 0; }
  .bruno-grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bruno-foto { aspect-ratio: auto; height: 340px; border-radius: 0; }
  .bruno-foto img { object-position: 50% 18%; }
  .bruno-grade > div { padding: 0 16px; }
  .bruno h2 { font-size: 32px; }
  .bruno-texto { font-size: 17px; }
  .lv-faixa { padding: 36px 0; }
  .lv-faixa > .lv-wrap { flex-direction: column; align-items: stretch; gap: 20px; }
  .lv-botao, .loja-v2 .hub-botao { width: 100%; }
  .loja-guias-lista { grid-template-columns: minmax(0, 1fr); }
  .loja-v2 .hub-titulo, .loja-v2 .loja-topo-titulo { font-size: 34px; }
  .loja-v2 .hub-sub, .loja-v2 .loja-topo-sub { font-size: 17px; }
  .area-produto { padding: 28px 0; }
  .area-produto h3, .area-produto-cabeca h3 { font-size: 28px; }
  .loja-v2 .hub-item { padding: 22px 0 22px 18px; }
  .loja-v2 .hub-item::before { top: 22px; bottom: 22px; }
  .loja-v2 .hub-item strong { font-size: 28px; }
  .loja-amostra { flex-direction: column; align-items: stretch; gap: 16px; }
  .loja-amostra .btn-cta-primary { width: 100%; }
  .loja-v2 .loja-box { grid-template-columns: minmax(0, 1fr) auto; padding: 24px 0 24px 18px; }
  .loja-v2 .loja-box::before { top: 24px; bottom: 24px; }
  .loja-v2 .loja-box-nome { font-size: 20px; }
  /* no celular, o nome, o que é e a ação: a lista do que vem dentro fica na página do produto */
  .loja-v2 .loja-box-itens { display: none; }
  .loja-v2 .loja-box-fim { justify-self: stretch; }
  .loja-v2 .loja-box-cta { width: 100%; }
  .loja-obrigado { padding: 24px 20px 24px 24px; }
  .loja-v2 .loja-login form { padding: 20px 16px; }
  .med-cabeca { padding-top: 16px; }
  .med-cabeca h1 { font-size: 34px; }
  .med-cabeca p { font-size: 17px; }
  /* no celular: a tela pequena ao lado do nome e do preço; o que é e o botão embaixo, na largura toda */
  .med-lista { margin-top: 24px; }
  .med-produto { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "tela corpo"; gap: 0 16px; padding: 24px 0; }
  .med-tela { grid-area: tela; border-radius: 10px; }
  .med-corpo { display: contents; }
  .med-cab { grid-column: 2; grid-row: 1; align-self: center; }
  .med-nome { font-size: 26px; }
  .med-preco { margin-top: 8px; }
  .med-preco strong { font-size: 19px; }
  .med-preco span { font-size: 15px; }
  .med-oque { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; font-size: 17px; }
  .med-acao { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  .med-acao .lv-botao { width: 100%; }
}
@media (max-width: 380px) {
  .lv-marca img { width: 52px; }
  .lv-produtos { padding: 0 10px; }
  .lv-conta a, .lv-conta button { padding: 0 8px; }
}
/* Na tela mais estreita (320 px) não cabem os três: "Entrar" (o SPI Prontuário) passa para o
   rodapé do painel Produtos, que o mostra só nessa largura. */
@media (max-width: 359px) {
  .lv-conta .lv-entrar { display: none; }
}