/* A loja da Escola de Concursados (03/11/2026). Pedido do Mário: uma vitrine de loja, com a tipografia da página de vendas
   (Inter 900 em caixa alta, preto, branco e amarelo #FFE000), tela branca com modo claro e modo escuro, banner com a foto dele
   e prateleiras que a pessoa vai passando. Sem topo, sem filtro e sem a faixa das garantias, que ficam dentro de cada produto
   (correção de 03/11/2026). A página de produto segue o modelo da Hotmart.
   O modo escuro entra com data-tema="escuro" no <html>. */
:root {
  color-scheme:light;
  --fundo:#FFFFFF; --painel:#F5F5F3; --painel-2:#ECECE8; --fio:#E4E4DF; --fio-forte:#C9C9C2;
  --tinta:#000000; --tinta-2:#3D3D3A; --tinta-3:#6E6E68;
  --amarelo:#FFE000; --amarelo-2:#F2D400; --preto:#000000; --verde:#0A8F3C; --laranja:#C25E00;
  --raio:10px; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
:root[data-tema="escuro"] {
  color-scheme:dark;
  --fundo:#0B0B0B; --painel:#161616; --painel-2:#202020; --fio:#2A2A2A; --fio-forte:#404040;
  --tinta:#FFFFFF; --tinta-2:#CFCFCA; --tinta-3:#9A9A94;
  --verde:#4CC27A; --laranja:#F2A35B;
}
*, *::before, *::after { box-sizing:border-box; }
html { background:var(--fundo); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--fundo); color:var(--tinta); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1, h2, h3, p, ul, ol, figure { margin:0; padding:0; }
ul, ol { list-style:none; }
img { max-width:100%; display:block; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--amarelo); outline-offset:2px; }

.miolo { max-width:1200px; margin:0 auto; padding:0 16px; }
@media (min-width:760px) { .miolo { padding:0 32px; } }

/* a etiqueta amarela da página de vendas */
.tag { display:inline-block; background:var(--amarelo); color:#000; font-weight:900; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:6px 10px; line-height:1.2; }
.tag.preta { background:#000; color:var(--amarelo); }
.titulo { font-weight:900; text-transform:uppercase; letter-spacing:-1px; line-height:1.02; }

/* a prévia (sai antes de publicar) */
.previa { background:#000; color:#fff; font-size:13px; }
.previa .miolo { padding-top:8px; padding-bottom:8px; }
.conferir { color:var(--laranja); font-size:12px; font-weight:700; }
.previa .conferir { color:#F2A35B; }

/* o banner no formato da capa do YouTube (correção de 03/11/2026).
   No celular: o título grande em cima, na largura toda; embaixo, o texto branco à esquerda e a foto à direita.
   No computador: a foto à direita, o título em cima à esquerda e o texto embaixo à esquerda.
   A mesa de estudos da Escola fica atrás, como nas capas das aulas. */
.banner { position:relative; background:#000; color:#fff; overflow:hidden; }
.banner-mesa { position:absolute; right:0; top:0; height:100%; width:100%; object-fit:cover; object-position:70% 40%; opacity:.3; }
.banner::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.35) 100%); }
/* no celular (05/11/2026, pedido do Mário): o texto à esquerda, de cima a baixo, e à direita só a metade dele que olha para o texto,
   para não sobrar o espaço vazio acima da cabeça. A foto tem o dobro da largura da coluna, e a borda da tela corta a outra metade. */
.banner-capa { position:relative; z-index:2; display:grid; grid-template-columns:1fr 40%; grid-template-rows:auto 1fr; grid-template-areas:"titulo foto" "sub foto"; column-gap:6px; padding-top:28px; }
.banner-titulo { grid-area:titulo; position:relative; z-index:3; }
.banner h1 { font-size:29px; margin-top:12px; letter-spacing:-1.2px; }
.banner h1 em { font-style:normal; color:var(--amarelo); }
.banner-sub { grid-area:sub; align-self:end; padding:16px 0 26px; position:relative; z-index:3; }
.banner .forte { font-size:17px; line-height:1.25; font-weight:900; color:#fff; }
.banner .sub { font-size:14px; line-height:1.4; color:#E2E2DC; margin-top:8px; }
.banner-foto { grid-area:foto; position:relative; align-self:end; justify-self:stretch; margin-right:-16px; padding-top:40px; overflow:visible; }
.banner-foto img { display:block; width:200%; height:auto; max-width:none; }
.banner .tema { position:absolute; top:14px; right:10px; z-index:4; color:#fff; background:rgba(255,255,255,.1); }
.banner .tema:hover { background:rgba(255,255,255,.2); }
@media (min-width:760px) {
  .banner-mesa { width:62%; opacity:.55; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%); mask-image:linear-gradient(90deg,transparent 0%,#000 45%); }
  .banner::before { background:linear-gradient(90deg,#000 0%,#000 38%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.1) 100%); }
  .banner-capa { grid-template-columns:1.15fr .85fr; grid-template-rows:1fr auto; grid-template-areas:"titulo foto" "sub foto"; min-height:460px; padding-top:0; column-gap:24px; }
  .banner-titulo { align-self:start; padding:56px 0 0; }
  .banner h1 { font-size:58px; letter-spacing:-2px; }
  .banner-sub { align-self:end; padding:24px 0 56px; max-width:30em; }
  .banner .forte { font-size:28px; letter-spacing:-.5px; }
  .banner .sub { font-size:19px; margin-top:10px; }
  .banner-foto { margin-right:0; padding-top:0; justify-self:end; }
  .banner-foto img { height:auto; width:100%; max-width:440px; }
  .banner .tema { top:18px; right:24px; }
}

/* as pílulas das seções, como o cardápio de um aplicativo: ficam presas no topo e marcam a seção em que a pessoa está */
.secoes { position:sticky; top:0; z-index:30; background:var(--fundo); border-bottom:1px solid var(--fio); }
.pilulas { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 16px 12px 0; margin-right:-16px; }
.pilulas::-webkit-scrollbar { display:none; }
/* 04/11/2026: branca com contorno preto; só a seção que está na tela fica amarela (se tudo for amarelo, nada chama atenção) */
.pilula { flex:none; background:var(--fundo); color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--tinta); font-weight:900; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; padding:10px 14px; border-radius:6px; line-height:1.2; white-space:nowrap; }
.pilula:hover { background:var(--painel); }
.pilula[aria-current="true"] { background:var(--amarelo); color:#000; box-shadow:inset 0 0 0 1.5px #000; }
@media (min-width:760px) { .pilulas { margin-right:0; padding-right:0; flex-wrap:wrap; overflow:visible; } }

/* o botão do modo claro e escuro */
.tema { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--tinta-2); }
.tema:hover { background:var(--painel); color:var(--tinta); }
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
:root[data-tema="escuro"] .s-claro, :root:not([data-tema="escuro"]) .s-escuro { display:none; }

/* os botões */
.bt { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 22px; border-radius:6px; background:var(--amarelo); color:#000; font-weight:900; font-size:15px; letter-spacing:2px; text-transform:uppercase; text-align:center; }
.bt:hover { background:var(--amarelo-2); }
.bt.vazado { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px #fff; }
.bt.vazado:hover { background:rgba(255,255,255,.08); }
.bt.cheio { display:flex; width:100%; }

/* as prateleiras */
.prateleira { padding:36px 0 4px; scroll-margin-top:64px; }
.prat-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.prat-cab h2 { font-size:26px; }
.prat-cab p { color:var(--tinta-3); font-size:14px; margin-top:6px; max-width:40em; }
.prat-cab .conta { flex:none; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--tinta-3); }
@media (min-width:760px) { .prat-cab h2 { font-size:32px; } }

.carrossel { position:relative; }
.trilho { display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -16px; padding:2px 16px 8px; scroll-padding:0 16px; }
.trilho::-webkit-scrollbar { display:none; }
.trilho > * { scroll-snap-align:start; }
@media (min-width:560px) { .trilho { grid-auto-columns:46%; } }
@media (min-width:760px) { .trilho { grid-auto-columns:calc((100% - 48px) / 4.3); margin:0; padding:2px 0 8px; scroll-padding:0; } }
.seta { position:absolute; top:calc(39% - 22px); z-index:5; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#000; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.seta:hover { background:#222; }
.seta.esq { left:-6px; }
.seta.dir { right:-6px; }
.seta .ic { width:22px; height:22px; stroke-width:2.4; }
:root[data-tema="escuro"] .seta { background:#fff; color:#000; }
@media (min-width:760px) { .seta.esq { left:-20px; } .seta.dir { right:-20px; } .seta { top:calc(28% - 22px); } }

/* o cartão do produto, como na vitrine da Hotmart */
.card { position:relative; display:flex; flex-direction:column; background:var(--fundo); border:1px solid var(--fio); border-radius:var(--raio); overflow:hidden; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--fio-forte); }
.card .selo { position:absolute; top:10px; left:10px; z-index:3; }
.capa { position:relative; aspect-ratio:1/1; background:var(--painel); overflow:hidden; }
.card-txt { display:flex; flex-direction:column; flex:1; padding:14px 14px 16px; }
.card .card-txt > .conferir:first-of-type { margin-top:8px; }
.card-tipo { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--tinta-3); }
.card-nome { font-size:16px; font-weight:900; line-height:1.2; margin-top:4px; letter-spacing:-.2px; }
.card-res { font-size:13px; color:var(--tinta-2); margin-top:6px; line-height:1.4; }
.card-preco { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; padding:8px 8px 8px 12px; background:var(--painel); border-radius:8px; }
.card-preco .rot { font-size:12px; line-height:1.25; color:var(--tinta-2); }
.card-preco .valor { flex:none; background:#000; color:var(--amarelo); font-weight:900; font-size:18px; letter-spacing:-.3px; padding:7px 10px; border-radius:6px; line-height:1.1; }
:root[data-tema="escuro"] .card-preco .valor { box-shadow:inset 0 0 0 1px #3a3a3a; }
.card-preco.gratis .valor { background:var(--verde); color:#fff; }
.card-preco.breve .valor { background:var(--painel-2); color:var(--tinta-3); font-size:15px; }
.card .conferir { margin-top:4px; }
.card .capa { display:block; }
.card-nome a:hover { text-decoration:underline; text-underline-offset:3px; }
/* os botões do cartão: Mais detalhes em cima e Comprar embaixo */
.card-bts { display:grid; gap:8px; margin-top:auto; padding-top:14px; }
.bt.pequeno { min-height:42px; padding:0 12px; font-size:12px; letter-spacing:1.5px; border-radius:6px; }
.bt.contorno { background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 2px var(--tinta); }
.bt.contorno:hover { background:var(--painel); }

/* as capas que a loja desenha (sem custo) */
.capa-livros { display:flex; align-items:center; justify-content:center; height:100%; padding:14px; }
.capa-livros img { height:84%; width:auto; aspect-ratio:1240/1760; object-fit:cover; border-radius:3px; box-shadow:0 6px 18px rgba(0,0,0,.28); margin:0 -9%; }
.capa-livros.n2 img { height:auto; width:44%; margin:0 -3%; }
.capa-livros.n2 img:nth-child(1) { transform:rotate(-5deg) translateX(6%); }
.capa-livros.n2 img:nth-child(2) { transform:rotate(4deg) translateX(-6%) translateY(4%); }
.capa-livros.n5 img { height:auto; width:27%; margin:0 -4.5%; }
.capa-livros.n5 img:nth-child(1) { transform:translateY(8%) rotate(-9deg); }
.capa-livros.n5 img:nth-child(2) { transform:translateY(3%) rotate(-4.5deg); z-index:1; }
.capa-livros.n5 img:nth-child(3) { z-index:2; }
.capa-livros.n5 img:nth-child(4) { transform:translateY(3%) rotate(4.5deg); z-index:1; }
.capa-livros.n5 img:nth-child(5) { transform:translateY(8%) rotate(9deg); }

/* o título se ajusta à largura do cartão (12% dela) e a foto fica embaixo, sem encostar no texto */
.capa-escola { background:var(--amarelo); color:#000; height:100%; display:flex; flex-direction:column; justify-content:flex-start; padding:48px 16px 18px; position:relative; container-type:inline-size; }
.capa-escola .titulo { font-size:12cqw; letter-spacing:-.04em; position:relative; z-index:2; }
.capa-escola .titulo small { display:block; font-size:12px; letter-spacing:2px; margin-bottom:8px; }
.capa-escola img { position:absolute; right:0; bottom:0; height:56%; width:auto; z-index:1; }
.capa-escola.branco { background:#F2F2EE; }
.capa-escola.preto { background:#000; color:#fff; }
.capa-escola.preto .titulo small { color:var(--amarelo); }
:root[data-tema="escuro"] .capa-escola.branco { background:#E9E9E4; color:#000; }
.capa-escola.preto { box-shadow:inset 0 0 0 1px #222; }

/* os mockups (fotos quadradas prontas) */
.capa-foto { width:100%; height:100%; object-fit:cover; }

.capa-texto { height:100%; background:#000; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; position:relative; }
.capa-texto::before { content:""; position:absolute; left:16px; top:16px; width:36px; height:6px; background:var(--amarelo); }
.capa-texto .titulo { font-size:26px; }
.capa-texto .tag { align-self:flex-start; margin-top:10px; font-size:10px; }

.capa-aula { height:100%; background:#141414; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:16px; }
.capa-aula .play { width:54px; height:38px; border-radius:10px; background:var(--amarelo); display:flex; align-items:center; justify-content:center; }
.capa-aula .play::after { content:""; border-left:14px solid #000; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:3px; }
.capa-aula .titulo { font-size:24px; }
.capa-aula span { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#A9A9A2; }

/* o destaque da mentoria (o primeiro cartão, maior) */
.vitrine-mentoria { display:grid; grid-template-columns:1fr; border-radius:var(--raio); overflow:hidden; border:1px solid var(--fio); }
.vitrine-mentoria .capa { aspect-ratio:auto; min-height:300px; }
.vm-txt { padding:22px 20px 24px; display:flex; flex-direction:column; gap:14px; }
.vm-txt h3 { font-size:26px; }
.vm-txt p { color:var(--tinta-2); }
.vm-planos { display:grid; gap:8px; }
.vm-planos li { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--painel); border-radius:8px; font-size:14px; }
.vm-planos li b { font-weight:900; }
.vm-planos li span { color:var(--tinta-2); text-align:right; }
@media (min-width:760px) { .vitrine-mentoria { grid-template-columns:1fr 1fr; } .vitrine-mentoria .capa { min-height:440px; } .vm-txt { padding:36px; } }

.nada { padding:28px 16px; text-align:center; color:var(--tinta-3); background:var(--painel); border-radius:var(--raio); font-size:14px; }

/* o fim da página */
.ajuda { margin-top:48px; background:var(--painel); }
.ajuda .miolo { display:flex; flex-direction:column; gap:14px; padding-top:32px; padding-bottom:32px; }
.ajuda h2 { font-size:24px; }
.ajuda p { color:var(--tinta-2); }
.ajuda .bt { align-self:flex-start; background:var(--tinta); color:var(--fundo); }
@media (min-width:760px) { .ajuda .miolo { flex-direction:row; align-items:center; justify-content:space-between; } }
.rodape { padding:28px 0 96px; font-size:13px; color:var(--tinta-3); border-top:1px solid var(--fio); }
.rodape p + p { margin-top:6px; }
.rodape a { color:var(--tinta-2); text-decoration:underline; text-underline-offset:2px; }
@media (min-width:760px) { .rodape { padding-bottom:32px; } }

/* ============ a página do produto ============ */
.migalha { font-size:13px; color:var(--tinta-3); padding:16px 0 0; }
.migalha a { color:var(--tinta-2); }
.migalha a:hover { color:var(--tinta); text-decoration:underline; }
.migalha-linha { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.migalha-linha .migalha { padding:0; }
.pdp-tipo { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--tinta-3); margin-top:12px; }
.pdp-compra .tag + .pdp-tipo { margin-top:14px; }
.outros-planos { margin-top:22px; border-top:1px solid var(--fio); padding-top:16px; display:grid; gap:8px; }
.outros-planos .rot { font-size:12px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--tinta-3); }
.outros-planos a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--fio); border-radius:8px; font-size:14px; }
.outros-planos a:hover { border-color:var(--tinta); }
.outros-planos a b { font-weight:900; }
.outros-planos .card-preco { margin:0; padding:4px 4px 4px 10px; }
.outros-planos .card-preco .valor { font-size:15px; }
.tabela th a { text-decoration:underline; text-underline-offset:3px; }
.tabela .atual { background:rgba(255,224,0,.18); }
.tabela thead th.atual { background:var(--amarelo); color:#000; }
.galeria.quadrada .capa { background:var(--painel); }
.galeria.quadrada .miniaturas button { width:72px; aspect-ratio:1/1; }
.pdp { display:grid; grid-template-columns:1fr; gap:24px; padding:16px 0 8px; }
/* no computador, a foto acompanha a rolagem enquanto a pessoa lê a coluna da compra: assim não sobra o espaço em branco embaixo da foto */
@media (min-width:900px) { .pdp { grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start; padding-top:24px; } .pdp .galeria { position:sticky; top:20px; } }
.galeria .capa { aspect-ratio:1/1; border-radius:var(--raio); border:1px solid var(--fio); }
.galeria .miniaturas { display:flex; gap:8px; margin-top:10px; overflow-x:auto; }
.galeria .miniaturas button { flex:none; width:64px; aspect-ratio:1240/1760; border-radius:4px; overflow:hidden; border:2px solid transparent; }
.galeria .miniaturas button[aria-current="true"] { border-color:var(--tinta); }
.galeria .miniaturas img { width:100%; height:100%; object-fit:cover; }
.foto-grande { display:flex; align-items:center; justify-content:center; height:100%; padding:18px; }
.foto-grande img { max-height:100%; width:auto; border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.25); }

.pdp-compra h1 { font-size:30px; margin-top:6px; }
@media (min-width:760px) { .pdp-compra h1 { font-size:40px; } }
.autor { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:14px; color:var(--tinta-2); }
.autor img { width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:top; background:#000; }
.autor b { color:var(--tinta); }
.fatos { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fatos li { font-size:13px; font-weight:700; padding:7px 12px; border-radius:999px; background:var(--painel); }
.pdp-compra .res { margin-top:16px; color:var(--tinta-2); }

.planos { display:grid; gap:10px; margin-top:20px; border:0; padding:0; }
.planos legend { font-size:12px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--tinta-3); margin-bottom:10px; padding:0; }
.plano { position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; padding:14px 16px; border:2px solid var(--fio); border-radius:var(--raio); cursor:pointer; }
.plano:hover { border-color:var(--fio-forte); }
.plano input { grid-row:span 3; margin:3px 0 0; width:20px; height:20px; accent-color:#000; }
:root[data-tema="escuro"] .plano input { accent-color:var(--amarelo); }
.plano:has(input:checked) { border-color:var(--tinta); }
.plano .p-nome { font-weight:900; font-size:15px; }
.plano .p-preco { font-weight:900; font-size:20px; letter-spacing:-.5px; }
.plano .p-preco small { font-weight:400; font-size:13px; color:var(--tinta-3); letter-spacing:0; margin-left:4px; }
.plano .p-nota { font-size:13px; color:var(--tinta-2); grid-column:2; }
.plano .tag { position:absolute; top:-10px; right:12px; font-size:10px; padding:4px 8px; }

.caixa-preco { margin-top:20px; }
.caixa-preco .valor { font-size:38px; font-weight:900; letter-spacing:-1.5px; line-height:1.05; }
.caixa-preco .valor .suf, .b-preco .suf { font-size:16px; font-weight:400; letter-spacing:0; color:var(--tinta-3); }
.caixa-preco .cond { font-size:14px; color:var(--tinta-3); margin-top:4px; }
.comprar { margin-top:16px; }
/* o que vem junto com a apostila: três caixas com borda amarela */
.junto { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:760px) { .junto { grid-template-columns:repeat(3,1fr); } }
.junto-item { display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:var(--raio); background:var(--painel); border-top:4px solid var(--amarelo); }
.junto-item h3 { font-size:16px; font-weight:900; line-height:1.2; }
.junto-item p { color:var(--tinta-2); font-size:15px; }
.junto-item .bt { margin-top:auto; align-self:flex-start; }
/* o aviso grande do que a pessoa recebe */
.aviso-produto { margin-top:18px; padding:16px 18px; border:2px solid var(--tinta); border-radius:var(--raio); }
.aviso-produto .rot { font-size:12px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.aviso-produto li { position:relative; padding-left:24px; font-size:15px; line-height:1.45; }
.aviso-produto li::before { content:""; position:absolute; left:3px; top:5px; width:11px; height:6px; border-left:2.4px solid var(--verde); border-bottom:2.4px solid var(--verde); transform:rotate(-45deg); }
.aviso-produto .bonus { margin-top:12px; font-size:15px; line-height:1.45; }
.aviso-produto .bonus .tag { font-size:10px; padding:3px 7px; margin-right:4px; vertical-align:2px; }
.aviso-produto .nota { margin-top:12px; padding-top:10px; border-top:1px solid var(--fio); font-size:14px; color:var(--tinta-2); }
.aviso-produto .nota b { color:var(--tinta); }
.aviso-produto .nota a { text-decoration:underline; text-underline-offset:2px; }
/* a amostra da apostila: o botão vazado logo abaixo do Comprar */
.bt.amostra { margin-top:10px; min-height:48px; }
.amostras { margin-top:8px; display:grid; gap:4px; font-size:13px; }
.amostras a { color:var(--tinta-2); text-decoration:underline; text-underline-offset:2px; }
/* 05/11/2026: o material gratuito para baixar (os PDFs em A4 embaixo do botão do celular) */
.rot-baixar { margin-top:16px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-2); }
.rot-baixar + .amostras { font-size:15px; gap:8px; }
.seguro { display:grid; gap:8px; margin-top:16px; font-size:13px; color:var(--tinta-2); }
.seguro li { display:flex; gap:8px; align-items:center; }
.seguro .ic { width:18px; height:18px; color:var(--verde); }

.secao { padding:36px 0 0; }
.secao h2 { font-size:24px; margin-bottom:16px; }
@media (min-width:760px) { .secao h2 { font-size:30px; } }
.secao .texto p { color:var(--tinta-2); max-width:44em; font-size:17px; }
.secao .texto p + p { margin-top:12px; }
.listas { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:760px) { .listas { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } }
.lista { background:var(--painel); border-radius:var(--raio); padding:18px; }
.lista h3 { font-size:13px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.lista li { position:relative; padding-left:26px; margin-top:8px; font-size:15px; line-height:1.45; }
.lista li::before { content:""; position:absolute; left:3px; top:5px; width:11px; height:6px; border-left:2.4px solid var(--verde); border-bottom:2.4px solid var(--verde); transform:rotate(-45deg); }
.lista.nao li::before { border:0; width:12px; height:2.4px; top:10px; background:#C0392B; transform:none; }

.tabela { border:1px solid var(--fio); border-radius:var(--raio); overflow-x:auto; }
.tabela table { width:100%; min-width:520px; border-collapse:collapse; font-size:14px; }
.tabela th, .tabela td { padding:12px 14px; border-top:1px solid var(--fio); text-align:center; }
.tabela thead th { border-top:0; background:var(--painel); font-size:12px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.tabela th:first-child, .tabela td:first-child { text-align:left; }
.tabela .s { color:var(--verde); font-weight:900; }
.tabela .n { color:var(--tinta-3); }

.perguntas details { border-top:1px solid var(--fio); }
.perguntas details:last-child { border-bottom:1px solid var(--fio); }
.perguntas summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-weight:900; }
.perguntas summary::-webkit-details-marker { display:none; }
.perguntas summary::after { content:"+"; font-size:22px; line-height:1; color:var(--tinta-3); }
.perguntas details[open] summary::after { content:"−"; }
.perguntas details p { padding:0 0 16px; color:var(--tinta-2); }

.bio { display:grid; grid-template-columns:72px 1fr; gap:16px; align-items:start; background:var(--painel); border-radius:var(--raio); padding:18px; }
.bio img { width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:top; background:#000; }
.bio p { color:var(--tinta-2); font-size:15px; }
.bio b { display:block; color:var(--tinta); font-weight:900; font-size:16px; margin-bottom:4px; }

/* a barra de compra fixa no celular */
.barra { position:fixed; left:0; right:0; bottom:0; z-index:50; background:#000; color:#fff; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.barra .b-preco { font-weight:900; font-size:17px; line-height:1.15; }
.barra .b-preco small { display:block; font-weight:400; font-size:12px; color:#A9A9A2; }
.barra .bt { min-height:46px; padding:0 18px; font-size:14px; }
@media (min-width:900px) { .barra { display:none; } }

/* o cartão da categoria sem produto no ar (05/11/2026): o aviso de obra, sem link e sem botão */
.card.obra { cursor:default; }
.card.obra:hover { transform:none; border-color:var(--fio); }
.card.obra .capa svg { display:block; width:100%; height:100%; }
.card.obra .card-txt { padding-bottom:18px; }