/* ============================================================
   OSS YOGA · BLOCO DE PREÇO
   Componente único de apresentação de valor, usado em todas as
   páginas de curso e na assinatura do Dojo.

   Padrão: VALOR ANCORADO. O valor à vista aparece grande e as
   outras condições ficam abaixo, menores. Cursos com mais de um
   formato ganham a fileira .invest-opcoes acima do bloco.

   A cor vem de var(--page-accent) de cada página, então o mesmo
   HTML fica dourado no Vinyasa e cobre na Primeira Etapa.

   Fundo escuro. Em página de fundo claro, envolver numa seção
   escura (.investimento) como fazem as páginas de curso.
   ============================================================ */

.invest-valor{
  max-width:720px;margin:0 auto;padding:52px 40px 44px;text-align:center;
  background:rgba(13,26,16,.55);
  border:1px solid var(--page-accent,#c9a94f);
  border-color:color-mix(in srgb, var(--page-accent,#c9a94f) 30%, transparent);
}

/* Nome do curso, no topo do bloco */
.invest-valor-curso{
  font-family:Helvetica,Arial,sans-serif;font-size:.62rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--page-accent,#c9a94f);font-weight:700;
  margin-bottom:26px;line-height:1.5;
}

/* "À vista", "Por mês" — o que o número grande representa */
.invest-valor-lab{
  font-family:Georgia,serif;font-style:italic;font-size:1rem;
  color:rgba(245,241,232,.55);margin-bottom:10px;
}

.invest-valor-num{
  font-family:Georgia,serif;font-weight:300;line-height:1;
  font-size:clamp(3rem,9vw,5rem);color:var(--page-accent,#c9a94f);
  margin-bottom:6px;
}
.invest-valor-num small{
  font-size:.34em;vertical-align:.9em;margin-right:.12em;font-weight:400;
}
/* Curso ainda sem tabela publicada */
.invest-valor-num.is-consulta{
  font-family:Georgia,serif;font-style:italic;
  font-size:clamp(1.7rem,4vw,2.4rem);
}

/* Forma de pagamento do valor em destaque, quando ela é conhecida */
.invest-valor-forma{
  font-size:.8rem;color:rgba(245,241,232,.5);line-height:1.6;
}

.invest-valor-regua{
  width:64px;height:1px;margin:30px auto;
  background:color-mix(in srgb, var(--page-accent,#c9a94f) 45%, transparent);
}

/* As demais condições de pagamento */
.invest-valor-cond{
  font-family:Georgia,serif;font-size:1rem;line-height:2;
  color:rgba(245,241,232,.72);margin-bottom:6px;
}
.invest-valor-cond b{color:#f5f1e8;font-weight:400}

/* Total do parcelamento. Obrigatório sempre que se anuncia parcela. */
.invest-valor-total{
  font-size:.76rem;color:rgba(245,241,232,.42);line-height:1.6;
  margin-bottom:32px;
}

/* Aviso em destaque dentro do bloco (isenção de taxa, prazo, etc.) */
.invest-valor-aviso{
  border-left:2px solid var(--page-accent,#c9a94f);
  background:color-mix(in srgb, var(--page-accent,#c9a94f) 8%, transparent);
  padding:14px 18px;margin:0 0 28px;text-align:left;
  font-size:.84rem;line-height:1.65;color:rgba(245,241,232,.72);
}
.invest-valor-aviso strong{color:var(--page-accent,#c9a94f);font-weight:600}

.invest-valor-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Cada página tem o seu nome de botão; todos ficam do mesmo tamanho aqui */
.invest-valor-btns .btn,
.invest-valor-btns .btn-primary,
.invest-valor-btns .btn-wa,
.invest-valor-btns .btn-gold,
.invest-valor-btns .btn-outline{min-width:200px;justify-content:center}

/* Observação abaixo do bloco (hospedagem não inclusa, etc.) */
.invest-valor-obs{
  max-width:720px;margin:22px auto 0;text-align:center;
  font-size:.82rem;line-height:1.75;color:rgba(245,241,232,.5);
}

/* ---- Variante clara, para seções de fundo pergaminho ---- */
.invest-valor.is-claro{
  background:rgba(255,255,255,.5);
  border-color:color-mix(in srgb, var(--page-accent,#8b6f47) 35%, transparent);
}
.invest-valor.is-claro .invest-valor-lab{color:rgba(28,38,30,.6)}
.invest-valor.is-claro .invest-valor-forma{color:rgba(28,38,30,.58)}
.invest-valor.is-claro .invest-valor-cond{color:rgba(28,38,30,.78)}
.invest-valor.is-claro .invest-valor-cond b{color:#1c261e}
.invest-valor.is-claro .invest-valor-total{color:rgba(28,38,30,.5)}
.invest-valor.is-claro .invest-valor-aviso{color:rgba(28,38,30,.78)}
.invest-valor.is-claro + .invest-valor-obs,
.invest-valor-obs.is-claro{color:rgba(28,38,30,.55)}

/* ---- Seletor, para cursos com mais de um formato ---- */
.invest-opcoes{
  display:flex;gap:7px;justify-content:center;flex-wrap:wrap;
  max-width:900px;margin:0 auto 22px;
}
.invest-opcao{
  font-family:Helvetica,Arial,sans-serif;font-size:.68rem;letter-spacing:1.2px;
  text-transform:uppercase;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:11px 15px;background:transparent;color:rgba(245,241,232,.55);
  border:1px solid rgba(245,241,232,.14);
  transition:color .3s,border-color .3s,background .3s;
}
.invest-opcao:hover{color:#f5f1e8;border-color:rgba(245,241,232,.35)}
.invest-opcao[aria-selected="true"]{
  color:var(--page-accent,#c9a94f);
  border-color:var(--page-accent,#c9a94f);
  background:color-mix(in srgb, var(--page-accent,#c9a94f) 10%, transparent);
}
.invest-opcoes-nota{
  max-width:720px;margin:-8px auto 22px;text-align:center;
  font-size:.78rem;color:rgba(245,241,232,.42);line-height:1.6;
}

@media(max-width:560px){
  .invest-valor{padding:40px 22px 34px}
  .invest-valor-btns{flex-direction:column;width:100%}
  .invest-valor-btns .btn,
  .invest-valor-btns .btn-primary,
  .invest-valor-btns .btn-wa,
  .invest-valor-btns .btn-gold,
  .invest-valor-btns .btn-outline{width:100%}
  .invest-opcao{flex:1 1 auto;padding:10px 12px;font-size:.63rem;letter-spacing:1px}
}

/* ============================================================
   BARRA DE COMPRA · só no celular
   A intenção de compra nasce no meio da leitura, quase nunca no
   fim. Sem uma âncora de ação à mão, ela evapora antes do rodapé.
   Aparece depois que o hero sai da tela.
   ============================================================ */
.barra-compra{
  position:fixed;left:0;right:0;bottom:0;z-index:99990;
  display:none;align-items:center;gap:14px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(13,26,16,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid color-mix(in srgb, var(--page-accent,#c9a94f) 30%, transparent);
  transform:translateY(100%);transition:transform .3s ease;
}
.barra-compra.is-visivel{transform:translateY(0)}
.barra-compra-info{flex:1;min-width:0;line-height:1.25}
.barra-compra-nome{
  display:block;font-size:.62rem;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:700;color:rgba(245,241,232,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.barra-compra-valor{
  display:block;font-family:Georgia,serif;font-size:1.15rem;
  color:var(--page-accent,#c9a94f);margin-top:3px;
}
.barra-compra-valor small{font-size:.62rem;color:rgba(245,241,232,.5);letter-spacing:1px;margin-left:5px}
.barra-compra .btn{
  padding:13px 22px;font-size:.66rem;letter-spacing:2px;
  flex:0 0 auto;min-width:0;
  /* as páginas esticam .btn para 100% no celular; aqui ele volta a ser
     do tamanho do texto, senão espreme o nome e o valor até sumirem */
  width:auto;display:inline-block;white-space:nowrap;
}
@media(max-width:768px){
  .barra-compra{display:flex}
  /* o balão do chat sobe para não sentar em cima da barra */
  body.tem-barra-compra #oss-chat-btn{bottom:78px}
  body.tem-barra-compra{padding-bottom:66px}
}

/* Segunda oferta para quem chega no preço e recua: o Dojo é o
   único degrau barato do catálogo. Uma linha, discreta. */
.invest-dojo{
  max-width:720px;margin:26px auto 0;text-align:center;
  font-size:.86rem;line-height:1.7;color:rgba(245,241,232,.5);
}
.invest-dojo a{color:var(--page-accent,#c9a94f);border-bottom:1px solid currentColor}
.invest-dojo.is-claro{color:rgba(28,38,30,.6)}