/* =====================================================================
 * Villela Academy — páginas públicas (landing, marketplace, curso).
 * Camada de acabamento sobre o CSS base de paginas.js: tipografia maior,
 * respiro, capa em destaque, currículo em sanfona e cartão de compra fixo.
 * Identidade do Grupo Villela Stay (navy/âmbar/ouro, Lora + Inter).
 * ===================================================================== */
:root{
  --pv-tinta:#101828;--pv-tinta2:#475467;--pv-tinta3:#79839A;--pv-borda:#E4E7EC;--pv-borda2:#F0F2F5;
  --pv-navy:#1B2A4A;--pv-navy2:#24365C;--pv-ambar:#D97706;--pv-ambar2:#B45309;--pv-ambar-luz:#FEF3E7;
  --pv-ouro:#C9A227;--pv-ok:#12805C;--pv-sombra:0 1px 2px rgba(16,24,40,.04),0 10px 28px rgba(16,24,40,.07);
  --pv-sombra-f:0 16px 44px rgba(16,24,40,.14);
}
.pv{max-width:1180px;margin:0 auto;padding:0 22px}
.pv-fino{color:var(--pv-tinta3);font-size:.84rem}
.pv-olho{font:700 .74rem/1.3 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--pv-ambar2);margin:0 0 8px}

/* ---------- topo do curso ---------- */
.pv-hero h1,.pv-hero h2{color:#fff!important}
.pv-hero{position:relative;overflow:hidden;color:#F8F9FA;padding:34px 0 46px;
  background:linear-gradient(135deg,#16233E 0%,var(--pv-navy) 45%,var(--pv-navy2) 100%)}
.pv-hero:before{content:'';position:absolute;width:620px;height:620px;right:-140px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,.28),transparent 62%);pointer-events:none}
.pv-hero .pv{position:relative}
.pv-trilha{font-size:.82rem;color:#9FB0CB;margin:0 0 20px}
.pv-trilha a{color:#9FB0CB;text-decoration:none}.pv-trilha a:hover{color:var(--pv-ouro)}
.pv-hero h1{color:#fff;font-family:'Lora',Georgia,serif;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.14;margin:.3rem 0 .8rem;max-width:22ch}
.pv-hero .dek{font-size:1.13rem;line-height:1.55;color:#CBD6E8;max-width:62ch;margin:0 0 18px}
.pv-chips{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 16px}
.pv-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  color:#E8EDF6;border-radius:99px;padding:5px 13px;font:600 .82rem/1.3 'Inter',sans-serif}
.pv-chip.ouro{background:var(--pv-ouro);border-color:var(--pv-ouro);color:#1B2A4A}
.pv-chip.ambar{background:var(--pv-ambar);border-color:var(--pv-ambar);color:#fff}
.pv-autor{display:flex;align-items:center;gap:11px;color:#CBD6E8;font-size:.95rem;margin:16px 0 0}
.pv-autor .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--pv-ouro),var(--pv-ambar));
  display:grid;place-items:center;font:700 1rem/1 'Inter',sans-serif;color:#1B2A4A}
.pv-autor a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}

/* ---------- corpo: conteúdo + cartão de compra ---------- */
.pv-corpo{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:40px;align-items:start;padding:44px 0 10px}
@media(max-width:980px){.pv-corpo{grid-template-columns:1fr;gap:26px;padding-top:28px}}
.pv-sec{padding:0 0 34px}
.pv-sec h2{font-family:'Lora',Georgia,serif;font-size:1.55rem;color:var(--pv-navy);margin:0 0 14px;line-height:1.25}
.pv-sec p{line-height:1.7;margin:0 0 14px;color:#283246}
/* descrição longa do produtor: subtítulos e listas que vêm do texto (textoRico, em paginas.js) */
.pv-sec .pv-sub{font:700 1.08rem/1.35 'Inter',sans-serif;color:var(--pv-navy);margin:22px 0 10px}
.pv-sec .pv-sub:first-child{margin-top:0}
.pv-sec .pv-pontos{margin:0 0 16px;padding:0 0 0 20px;display:grid;gap:9px;color:#283246}
.pv-sec .pv-pontos li{line-height:1.6;padding-left:2px}
.pv-sec .pv-pontos li::marker{color:var(--pv-ambar)}
.pv-lista{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.pv-lista.duas{grid-template-columns:1fr 1fr}
@media(max-width:700px){.pv-lista.duas{grid-template-columns:1fr}}
.pv-lista li{display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.pv-lista li svg{flex:0 0 20px;margin-top:2px;color:var(--pv-ok)}
.pv-lista.alvo li svg{color:var(--pv-ambar)}
.pv-lista.bonus li svg{color:var(--pv-ouro)}

/* cartão de compra — acompanha a rolagem */
.pv-compra{position:sticky;top:18px;background:#fff;border:1px solid var(--pv-borda);border-radius:18px;
  box-shadow:var(--pv-sombra-f);overflow:hidden}
@media(max-width:980px){.pv-compra{position:static}}
.pv-compra .capa{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0B1120;display:block}
.pv-compra .in{padding:20px}
.pv-preco{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.pv-preco b{font:800 2.1rem/1 'Inter',sans-serif;color:var(--pv-navy)}
.pv-preco s{color:var(--pv-tinta3);font-size:1rem}
.pv-preco .mes{font-size:.95rem;color:var(--pv-tinta2);font-weight:600}
.pv-parcela{color:var(--pv-tinta2);font-size:.88rem;margin:0 0 16px}
.pv-bt{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:0;border-radius:12px;
  background:var(--pv-ambar);color:#fff;font:700 1.02rem/1 'Inter',sans-serif;padding:15px 18px;cursor:pointer;
  text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s}
.pv-bt:hover{background:var(--pv-ambar2);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(217,119,6,.3)}
.pv-bt.fan{background:#fff;color:var(--pv-navy);border:1px solid var(--pv-borda);font-weight:600;font-size:.95rem;padding:12px 16px;margin-top:9px}
.pv-bt.fan:hover{background:var(--pv-ambar-luz);border-color:var(--pv-ambar);box-shadow:none}
.pv-inclui{list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--pv-borda2);display:grid;gap:10px}
.pv-inclui li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#2C3648;line-height:1.45}
.pv-inclui li svg{flex:0 0 18px;margin-top:1px;color:var(--pv-ambar2)}
.pv-garantia{margin-top:14px;background:var(--pv-ambar-luz);border-radius:12px;padding:12px 14px;font-size:.86rem;color:#6B4416;line-height:1.5}

/* ---------- currículo em sanfona ---------- */
.pv-curr{border:1px solid var(--pv-borda);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--pv-sombra)}
.pv-curr details{border-bottom:1px solid var(--pv-borda2)}
.pv-curr details:last-child{border-bottom:0}
.pv-curr summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:15px 18px;
  font:600 .98rem/1.35 'Inter',sans-serif;color:var(--pv-navy);background:#fff;transition:background .14s}
.pv-curr summary::-webkit-details-marker{display:none}
.pv-curr summary:hover{background:var(--pv-borda2)}
.pv-curr summary .seta{transition:transform .2s;color:var(--pv-tinta3);flex:0 0 auto}
.pv-curr details[open] summary{background:var(--pv-ambar-luz)}
.pv-curr details[open] summary .seta{transform:rotate(90deg)}
.pv-curr summary .qt{margin-left:auto;color:var(--pv-tinta3);font-weight:500;font-size:.82rem;white-space:nowrap}
.pv-curr .aulas{padding:4px 0 10px}
.pv-curr .aula{display:flex;align-items:flex-start;gap:11px;padding:8px 18px 8px 44px;font-size:.9rem;color:#2C3648;line-height:1.45}
.pv-curr .aula svg{flex:0 0 17px;margin-top:2px;color:var(--pv-tinta3)}
.pv-curr .aula .dur{margin-left:auto;color:var(--pv-tinta3);font-size:.8rem;white-space:nowrap;padding-left:10px}
.pv-curr .aula .free{background:#E7F5EF;color:var(--pv-ok);border-radius:99px;padding:1px 8px;font-size:.72rem;font-weight:700;margin-left:7px}
.pv-resumo-curr{display:flex;gap:18px;flex-wrap:wrap;color:var(--pv-tinta2);font-size:.9rem;margin:0 0 14px}
/* curso que hospeda o Estude: o currículo é a lista de DISCIPLINAS com o nº de aulas (sem sanfona) */
.pv-curr.pv-disc .aula{padding:13px 18px;font-size:.95rem;font-weight:600;color:var(--pv-navy);border-bottom:1px solid var(--pv-borda2)}
.pv-curr.pv-disc .aula:last-child{border-bottom:0}
.pv-curr.pv-disc .aula .dur{font-weight:500;font-size:.82rem}
/* gotejamento: a trilha é método, e o comprador lê isso ANTES de pagar */
.pv-gote{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:rgba(217,119,6,.10);
  border:1px solid rgba(217,119,6,.28);color:var(--pv-tinta2);font-size:.9rem;line-height:1.6}
.pv-gote b{color:var(--pv-ouro)}
.pv-gote svg{vertical-align:-2px;margin-right:4px}

/* ---------- instrutor, depoimentos, faq ---------- */
.pv-prof{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--pv-borda);
  border-radius:16px;padding:22px;box-shadow:var(--pv-sombra)}
.pv-prof .av{width:76px;height:76px;flex:0 0 76px;border-radius:50%;background:linear-gradient(135deg,var(--pv-navy),var(--pv-navy2));
  color:#fff;display:grid;place-items:center;font:700 1.6rem/1 'Lora',serif}
.pv-prof h3{font-family:'Lora',serif;color:var(--pv-navy);margin:0 0 3px;font-size:1.18rem}
.pv-dep{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pv-dep .d{background:#fff;border:1px solid var(--pv-borda);border-radius:16px;padding:20px;box-shadow:var(--pv-sombra);
  display:flex;flex-direction:column;gap:10px}
.pv-dep .est{color:var(--pv-ouro);letter-spacing:2px}
.pv-dep .t{line-height:1.6;color:#283246;font-style:italic}
.pv-faq details{background:#fff;border:1px solid var(--pv-borda);border-radius:14px;margin-bottom:10px;box-shadow:var(--pv-sombra)}
.pv-faq summary{cursor:pointer;list-style:none;padding:15px 18px;font:600 .98rem/1.45 'Inter',sans-serif;color:var(--pv-navy);
  display:flex;gap:12px;align-items:flex-start}
.pv-faq summary::-webkit-details-marker{display:none}
.pv-faq summary .mais{margin-left:auto;color:var(--pv-ambar);font-size:1.3rem;line-height:1;transition:transform .2s;flex:0 0 auto}
.pv-faq details[open] summary .mais{transform:rotate(45deg)}
.pv-faq .r{padding:0 18px 16px;line-height:1.65;color:#3A4557}

/* ---------- faixa final e relacionados ---------- */
.pv-fim{background:linear-gradient(135deg,var(--pv-navy),var(--pv-navy2));color:#fff;padding:52px 0;margin-top:30px;text-align:center}
.pv-fim h2{font-family:'Lora',serif;font-size:1.9rem;margin:0 0 10px;color:#fff!important}
.pv-fim p{color:#CBD6E8;max-width:60ch;margin:0 auto 22px;line-height:1.6}
.pv-fim .pv-bt{display:inline-flex;width:auto;padding:15px 34px}
.pv-rel{padding:46px 0 56px;background:#F7F8FA}
.pv-rel h2{font-family:'Lora',serif;color:var(--pv-navy);font-size:1.45rem;margin:0 0 6px}

/* ---------- barra de compra do celular ----------
   Abaixo de 980px o cartão de compra sai do lado e desce para depois do conteúdo:
   o preço ficava a mais de 3.000px do topo (auditoria de 11/10/2026, M6). A barra
   fica presa ao rodapé da TELA com preço e botão. Ela é o último elemento antes do
   <footer>, e é por isso que o espaço é aberto nele (`~ footer`): sem esse respiro
   a barra cobriria as últimas linhas da página. A altura dela é fixa (62px + a
   área segura do aparelho) para o respiro ser exato. */
.pv-barra{display:none}
@media(max-width:980px){
  .pv-barra{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:60;box-sizing:border-box;
    height:calc(62px + env(safe-area-inset-bottom,0px));padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1px solid var(--pv-borda);box-shadow:0 -8px 24px rgba(16,24,40,.14)}
  .pv-barra-preco{display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;min-width:0;line-height:1.15}
  .pv-barra-preco b{font:800 1.18rem/1.15 'Inter',sans-serif;color:var(--pv-navy);white-space:nowrap}
  .pv-barra-preco s{color:var(--pv-tinta3);font-size:.76rem}
  .pv-barra-preco .mes{font-size:.76rem;color:var(--pv-tinta2);font-weight:600}
  .pv-barra .pv-bt{flex:1 1 auto;width:auto;min-width:0;padding:13px 12px;white-space:nowrap}
  .pv-barra .pv-bt:hover{transform:none}
  .pv-barra ~ footer{padding-bottom:calc(30px + 62px + env(safe-area-inset-bottom,0px))}
}
@media print{.pv-barra{display:none!important}}

/* ---------- landing: vitrine e números ---------- */
/* auto-FIT (não auto-fill) + teto de 320px + justify-content:center: com poucos
   cursos a grade fica CENTRADA em vez de pender para a esquerda. `auto-fill`
   mantém trilhos VAZIOS ocupando a linha — com um cartão só ele continuava
   encostado à esquerda; `auto-fit` colapsa os vazios. E o teto impede que dois
   cartões estiquem até virar dois banners. */
.pv-vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,320px));gap:20px;justify-content:center}
.pv-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;text-align:center}
.pv-num div{background:#fff;border:1px solid var(--pv-borda);border-radius:16px;padding:22px 16px;box-shadow:var(--pv-sombra)}
.pv-num b{display:block;font:800 1.9rem/1 'Inter',sans-serif;color:var(--pv-navy);margin-bottom:5px}
.pv-num span{color:var(--pv-tinta2);font-size:.88rem}
.pv-passos{counter-reset:p;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.pv-passos div{position:relative;background:#fff;border:1px solid var(--pv-borda);border-radius:16px;padding:26px 20px 20px;box-shadow:var(--pv-sombra)}
.pv-passos div:before{counter-increment:p;content:counter(p);position:absolute;top:-16px;left:20px;width:34px;height:34px;border-radius:50%;
  background:var(--pv-ambar);color:#fff;display:grid;place-items:center;font:800 1rem/1 'Inter',sans-serif;box-shadow:0 6px 14px rgba(217,119,6,.32)}
.pv-passos h3{font-family:'Lora',serif;color:var(--pv-navy);font-size:1.08rem;margin:0 0 6px}
.pv-passos p{color:var(--pv-tinta2);font-size:.92rem;line-height:1.55;margin:0}

/* ---------- cartão de curso (vitrine, landing e relacionados) ----------
   Mora aqui, e não no <style> de um shell: a landing tem <head> próprio e
   mostrava o card sem estilo nenhum. Uma regra, três páginas.
   O respiro do texto vem do PADDING do cartão, não de margem nos filhos:
   `.cardp>*{margin-left}` era vencido por qualquer regra mais específica
   (`.cardp .sub{margin:0}`) e o texto colava na borda. A capa sai da caixa
   com margem negativa para continuar sangrando de ponta a ponta. */
.cardp{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  background:#fff;border:1px solid var(--pv-borda);border-radius:16px;padding:0 18px 20px;
  overflow:hidden;box-shadow:var(--pv-sombra);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.cardp:hover{transform:translateY(-3px);box-shadow:var(--pv-sombra-f);border-color:#D6DBE3;color:inherit}
/* max-width:none é obrigatório: o design system limita img a 100% do conteúdo,
   e com a margem negativa a capa ficava 36px mais estreita que o cartão. */
.cardp img,.cardp .capa-vazia{display:block;width:calc(100% + 36px);max-width:none;margin:0 -18px 10px;
  aspect-ratio:16/9;object-fit:cover;border-radius:0}
.cardp .capa-vazia{background:linear-gradient(135deg,#24365C,#1B2A4A 60%,#16233E)}
.cardp .tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.cardp .tag{background:var(--pv-ambar-luz);color:var(--pv-ambar2);border-radius:99px;
  padding:3px 10px;font:600 .74rem/1.4 'Inter',sans-serif}
.cardp .tag.area{background:#EEF2F8;color:#5B6472}
.cardp b{font-family:'Lora',Georgia,serif;color:var(--pv-navy);font-size:1.08rem;line-height:1.3}
/* descrição em 3 linhas: com textos de tamanhos muito diferentes, um cartão
   esticava e os vizinhos ficavam com um vão no meio. O texto inteiro está na
   página do curso — aqui ele é chamada, não conteúdo. */
.cardp .sub{color:var(--pv-tinta2);font-size:.88rem;line-height:1.55;text-align:left;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cardp .autor{color:var(--pv-tinta3);font-size:.82rem;margin:2px 0 0}
.cardp .preco{font:800 1.25rem/1 'Inter',sans-serif;color:var(--pv-navy);margin:auto 0 0;padding-top:10px}
.cardp .preco s{color:var(--pv-tinta3);font-weight:400;font-size:.9rem;margin-right:5px}

/* ---------- filtros de área (marketplace e home) ----------
   Eram botões `.btn peq secund` em três linhas: pesados, todos com o mesmo
   peso visual e sem dizer qual estava ativo nem quantos cursos há em cada um. */
.pv-areas{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:0 0 30px}
.pv-areas a{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:99px;
  border:1px solid var(--pv-borda);background:#fff;color:var(--pv-navy);
  font:600 .89rem/1 'Inter',sans-serif;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .15s,color .15s,background .15s,transform .15s,box-shadow .15s}
.pv-areas a:hover{border-color:var(--pv-ambar);color:var(--pv-ambar2);transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(217,119,6,.14)}
.pv-areas a.on{background:var(--pv-navy);border-color:var(--pv-navy);color:#fff;
  box-shadow:0 8px 18px rgba(27,42,74,.26)}
.pv-areas a.on:hover{color:#fff;background:var(--pv-navy2);border-color:var(--pv-navy2)}
.pv-areas .n{display:inline-block;min-width:20px;padding:1px 7px;border-radius:99px;background:var(--pv-borda2);
  color:var(--pv-tinta3);font:700 .74rem/1.5 'Inter',sans-serif}
.pv-areas a:hover .n{background:var(--pv-ambar-luz);color:var(--pv-ambar2)}
.pv-areas a.on .n{background:rgba(255,255,255,.18);color:#fff}
/* no celular vira uma faixa que rola de lado: 15 áreas em pilha empurram a vitrine para fora da tela */
@media(max-width:700px){
  .pv-areas{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 22px 10px;margin:0 -22px 18px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pv-areas::-webkit-scrollbar{display:none}
}
/* busca do marketplace, ao lado dos filtros */
.pv-busca{display:flex;gap:9px;max-width:520px;margin:0 auto 22px}
.pv-busca input{flex:1;margin:0;padding:12px 16px;border:1px solid var(--pv-borda);border-radius:99px;
  font:400 .95rem/1.2 'Inter',sans-serif;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.pv-busca input:focus{outline:none;border-color:var(--pv-ambar);box-shadow:0 0 0 3px rgba(217,119,6,.14)}
.pv-busca button{border:0;border-radius:99px;background:var(--pv-navy);color:#fff;font:600 .93rem/1 'Inter',sans-serif;
  padding:0 22px;cursor:pointer;transition:background .15s}
.pv-busca button:hover{background:var(--pv-ambar)}

/* ---------- subtítulo de seção ----------
   O CSS base define `.sub{margin:0 auto 34px}`, mas o design system do grupo
   redefine `.sub` com `margin:0 0 20px` (sem auto) e vence por especificidade:
   o parágrafo ficava encostado à ESQUERDA numa caixa de ~670px, enquanto o
   título e a vitrine ocupavam a largura toda — desalinhado com o resto da
   página. Aqui ele volta a se centralizar na caixa. */
.sec>.wrap>.sub{margin-left:auto;margin-right:auto;max-width:70ch;text-wrap:balance}

/* parágrafo/botão centralizado numa seção: o design system limita a largura de
   `p` e tira o `margin:auto`, então "text-align:center" centraliza dentro de uma
   caixa que já está encostada à esquerda. Esta classe devolve a caixa inteira. */
.sec .pv-centro{max-width:none;width:100%;margin-left:auto;margin-right:auto;text-align:center}

/* ---------- AMOSTRAS GRÁTIS (página do curso + selo do card) ----------
   Trechos públicos de vídeo. A coluna usa minmax(min(100%,230px),1fr): com
   `1fr` puro um título longo inflaria a coluna e a grade estouraria no celular. */
.pv-am-intro{margin:-6px 0 16px!important}
.pv-amostras{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px}
.pv-am{margin:0;min-width:0;background:#fff;border:1px solid var(--pv-borda);border-radius:14px;overflow:hidden;
  box-shadow:var(--pv-sombra);display:flex;flex-direction:column}
.pv-am video{display:block;width:100%;max-width:none;aspect-ratio:16/9;background:#0B1120;object-fit:cover}
.pv-am figcaption{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px}
.pv-am .meta{font:700 .72rem/1.3 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--pv-ambar2)}
.pv-am b{font:600 .95rem/1.4 'Inter',sans-serif;color:var(--pv-navy);overflow-wrap:anywhere}
.pv-am .ponte{font-size:.86rem;line-height:1.5;color:var(--pv-tinta2);overflow-wrap:anywhere}
.pv-am-mais{margin:16px 0 0}
.pv-am-mais>summary{cursor:pointer;display:inline-block;list-style:none;font:600 .92rem/1 'Inter',sans-serif;color:var(--pv-navy);
  border:1px solid var(--pv-borda);border-radius:99px;padding:11px 18px;background:#fff}
.pv-am-mais>summary::-webkit-details-marker{display:none}
.pv-am-mais>summary:hover{border-color:var(--pv-ambar);color:var(--pv-ambar2)}
.pv-am-mais[open]>summary{margin-bottom:16px}
.pv-am-cta{margin:18px 0 0!important;font-weight:600}
.pv-compra video.capa{width:100%;max-width:none;aspect-ratio:16/9;object-fit:cover;background:#0B1120;display:block}
.cardp .tag.amostra{background:#E9F6F0;color:var(--pv-ok)}
/* no celular as amostras viram uma faixa que rola de lado: seis cartões em pilha são
   2 000 px de rolagem antes do currículo. O cartão seguinte aparece cortado de propósito
   (84%), que é o que avisa que há mais para o lado. */
@media(max-width:700px){
  .pv-amostras{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -22px;padding:2px 22px 12px;scroll-padding:0 22px}
  .pv-am{scroll-snap-align:start}
}

/* EM BREVE (produto pausado): card da vitrine e aviso no lugar do botão de compra */
.tag.embreve{background:#1B2A4A;color:#F7F3EA;font-weight:700}
.pv-embreve{margin:4px 0 10px;background:var(--pv-ambar-luz);border-radius:12px;padding:14px 16px;font-size:.92rem;color:#6B4416;line-height:1.5}
.pv-embreve b{color:#1B2A4A}