/* ============================================================
   VENTURA / SISTEMA DE DESIGN / BLOCOS DE PÁGINA DE VENDA
   Desenvolvido 07/08/2026 usando a página do Projeto Dublê como caso real.
   Fecha parte da fila parada (oferta, garantia, depoimento, FAQ, bônus, bio,
   contagem, muro de vídeo). Lê só aliases de tema, funciona nos três temas.
   Depende de tokens/tokens.css, css/base.css, css/componentes.css.
   ============================================================ */

/* ---- helpers de largura/centro que a venda repete ---- */
.centro{ text-align:center; }
.rotulo-centro{ margin-inline:auto; }
.lead-venda{ max-width:var(--largura-texto); margin-inline:auto; margin-top:var(--e-md);
  color:var(--texto-sutil); font-size:var(--texto-corpo-g); line-height:1.55; }
.h-venda{ margin-inline:auto; }   /* título de seção já é Oswald caixa alta pelo base */

/* ============ HERO DE VENDA (promessa direta, sem vídeo) ============ */
.venda-hero{ min-height:78svh; }
.venda-hero .peca-dentro{ max-width:1080px; }
/* headline de venda longa: menor que o h1 padrão e com entrelinha maior, pra a
   ênfase manuscrita (2,091x) respirar e não cruzar as linhas caixa alta vizinhas.
   A entrelinha da ênfase acompanha, mantendo o cálculo do DS. */
.venda-hero h1{ margin-top:var(--e-md); font-size:clamp(30px,4.7vw,58px); line-height:1.32; }
.venda-hero h1 .enfase{ line-height:calc(1.32 / var(--enfase-escala)); }
.venda-sub{ max-width:640px; margin:var(--e-md) auto 0; color:var(--texto-sutil);
  font-size:var(--texto-corpo-g); line-height:1.5; }
.venda-hero .btn{ margin-top:var(--e-lg); }

/* ============ ANCORAGEM DE VALOR ============ */
.ancora{ list-style:none; max-width:var(--largura-estreita); margin:var(--e-lg) auto 0; text-align:left; }
.ancora li{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--e-md);
  padding:12px 2px; border-bottom:1px solid var(--borda); font-size:var(--texto-corpo-g);
  color:var(--texto-sutil); }
.ancora li b{ font-family:var(--fonte-mono); font-weight:700; white-space:nowrap;
  color:var(--cor-acento); text-decoration:line-through; text-decoration-thickness:1.5px;
  font-variant-numeric:tabular-nums; }
.ancora .total{ border-bottom:0; padding-top:16px; color:var(--texto); font-weight:600; }
.ancora .total span:first-child{ font-family:var(--fonte-display); text-transform:uppercase; letter-spacing:.5px; }
.ancora .total b{ color:var(--texto); text-decoration:none; font-size:var(--texto-h4); }
.preco-inline{ color:var(--cor-acento); font-family:var(--fonte-display); }

/* ============ CAIXA DE PREÇO ============ */
.preco-caixa{ max-width:var(--largura-estreita); margin:var(--e-lg) auto 0; padding:var(--e-lg) var(--e-md);
  text-align:center; }
.preco-x{ display:flex; align-items:baseline; justify-content:center; gap:6px;
  font-family:var(--fonte-display); font-weight:700; color:var(--cor-acento); line-height:.9; }
.preco-x .pre{ display:flex; flex-direction:column; align-items:flex-end; line-height:.95; }
.preco-x .pre .l1{ font-size:var(--texto-corpo-p); letter-spacing:1px; text-transform:uppercase; }
.preco-x .pre .l2{ font-size:clamp(24px,4vw,34px); }
.preco-x .int{ font-size:clamp(58px,12vw,92px); letter-spacing:-2px; }
.preco-x .cents{ font-size:clamp(24px,5vw,38px); }
.preco-cash{ margin-top:6px; font-family:var(--fonte-mono); font-size:var(--texto-corpo-p);
  letter-spacing:1px; color:var(--texto-secundario); }
.preco-caixa .btn{ margin-top:var(--e-md); }
.preco-nota{ margin-top:12px; font-family:var(--fonte-mono); font-size:var(--texto-micro);
  letter-spacing:1.5px; text-transform:uppercase; color:var(--texto-fraco); }
/* chip de revisão (só interno, some no publish) */
.chip-rev{ display:inline-block; margin-top:var(--e-md); font-family:var(--fonte-mono);
  font-size:var(--texto-micro); letter-spacing:1px; text-transform:uppercase;
  color:var(--cor-acento); border:1px solid var(--cor-acento); padding:5px 12px; }

/* ============ CONTADOR (número gigante + barra reta) ============
   Redesenhado pro DS: nada de medidor circular (o núcleo quadrado dentro do
   círculo ficava estranho). Número enorme em Oswald + barra reta que preenche. */
.contador{ display:grid; gap:var(--e-lg); align-items:center; }
@media (min-width:860px){ .contador{ grid-template-columns:1fr 1fr; }
  .contador .contador-copy h2, .contador .contador-copy p{ text-align:left; } }
.medidor-num{ position:relative; }
.medidor-num .n{ font-family:var(--fonte-display); font-weight:700; line-height:.82;
  font-size:clamp(120px,26vw,260px); letter-spacing:-4px; color:var(--cor-acento);
  display:flex; align-items:flex-start; justify-content:center; }
.medidor-num .n .pct{ font-size:.34em; margin-top:.12em; }
.medidor-num .rot{ font-family:var(--fonte-mono); text-transform:uppercase;
  letter-spacing:2px; font-size:var(--texto-micro); color:var(--texto-secundario);
  text-align:center; margin-top:var(--e-sm); }
.medidor-barra{ position:relative; height:6px; margin-top:var(--e-md);
  background:var(--cor-acento-suave); overflow:hidden; }
.medidor-barra i{ position:absolute; inset:0 100% 0 0; background:var(--cor-acento);
  transition:right 1.6s cubic-bezier(.2,.7,.2,1); }
.on .medidor-barra i{ right:10%; }   /* 90% preenchido */

/* ============ DOR (lista) ============ */
.dores{ display:grid; gap:0; max-width:820px; margin:var(--e-lg) auto 0; text-align:left; }
.dores .dor{ border:1px solid var(--borda); border-bottom:0; padding:var(--e-md);
  font-size:var(--texto-corpo-g); color:var(--texto-sutil); }
.dores .dor:last-child{ border-bottom:1px solid var(--borda); }
.dores .dor b{ color:var(--texto); font-weight:600; }

/* ============ CARD "PARA QUEM" (ícone de vidro + kicker + h3) ============ */
.quem-card{ text-align:left; }
.quem-card .icone{ margin-bottom:var(--e-sm); }
.quem-card .kicker{ display:block; font-family:var(--fonte-mono); font-size:var(--texto-micro);
  letter-spacing:2px; text-transform:uppercase; color:var(--cor-acento); margin-bottom:8px; }
.quem-card p{ color:var(--texto-sutil); margin-top:8px; font-size:var(--texto-corpo); }

/* ============ PILARES (foto + texto, ordem numerada) ============ */
.pilar{ position:relative; overflow:hidden; border:1px solid var(--borda);
  display:grid; grid-template-rows:190px auto; background:var(--fundo-elevado); }
.pilar .pilar-foto{ position:relative; overflow:hidden; }
.pilar .pilar-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pilar .pilar-luz{ position:absolute; inset:0; background:var(--luz-canto); mix-blend-mode:hard-light; opacity:.5; }
.pilar .pilar-txt{ padding:var(--e-md); }
.pilar .pilar-n{ font-family:var(--fonte-mono); font-size:var(--texto-micro); letter-spacing:2px;
  text-transform:uppercase; color:var(--cor-acento); }
.pilar h3{ margin:8px 0; }
.pilar p{ color:var(--texto-sutil); font-size:var(--texto-corpo); }

/* ============ BÔNUS (card com número translúcido próprio) ============ */
.bonus-card{ position:relative; overflow:hidden; }
.bonus-num{ position:absolute; right:var(--e-md); top:6px; z-index:1;
  font-family:var(--fonte-display); font-weight:700; font-size:96px; line-height:1;
  color:var(--texto); opacity:.07; pointer-events:none; }
.bonus-card h3{ margin-bottom:8px; }
.bonus-card p{ color:var(--texto-sutil); font-size:var(--texto-corpo); }
.bonus-destaque{ background:linear-gradient(var(--cor-acento-suave),var(--cor-acento-suave)), var(--fundo-elevado);
  border-color:var(--cor-acento); }

/* ============ MURO DE VÍDEO (3 colunas, proporção 9:16 / 9:18) ============ */
.muro-video{ display:flex; gap:var(--e-sm); margin-top:var(--e-lg); align-items:flex-start; }
.mv-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--e-sm); }
.mv-card{ position:relative; overflow:hidden; aspect-ratio:9/16; background:var(--verde-superficie);
  border:1px solid var(--borda); }
.mv-card.alto{ aspect-ratio:9/18; }
.mv-card .mv-poster, .mv-card video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.mv-card .mv-poster{ z-index:0; }
.mv-card video{ z-index:1; }
.mv-card figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 12px 10px;
  font-family:var(--fonte-mono); font-size:var(--texto-micro); letter-spacing:1px;
  color:#fff; text-align:left;
  background:linear-gradient(to top, rgba(6,7,10,.72), transparent); }

/* ============ DEPOIMENTOS (masonry de prints) ============ */
.depos{ columns:1; column-gap:var(--e-sm); margin-top:var(--e-lg); }
@media (min-width:640px){ .depos{ columns:2; } }
@media (min-width:1024px){ .depos{ columns:3; } }
.depo{ break-inside:avoid; margin-bottom:var(--e-sm); border:1px solid var(--borda);
  background:var(--fundo-elevado); overflow:hidden; }
.depo img{ width:100%; height:auto; display:block; }
.depo .quem{ display:flex; align-items:center; gap:9px; padding:11px 12px; }
.depo .quem .pt{ width:8px; height:8px; background:var(--cor-acento); flex:none; }
.depo .quem .nm{ font-family:var(--fonte-mono); font-size:var(--texto-micro); letter-spacing:1px;
  text-transform:uppercase; color:var(--texto-secundario); }

/* ============ MENTOR (retrato + texto + citação) ============ */
.mentor{ display:grid; gap:var(--e-lg); align-items:start; }
@media (min-width:860px){ .mentor{ grid-template-columns:.85fr 1.15fr; gap:var(--e-xl); } }
.mentor .retrato{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--borda); }
.mentor .retrato img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.mentor .retrato .pilar-luz{ position:absolute; inset:0; background:var(--luz-canto); mix-blend-mode:hard-light; opacity:.4; }
.mentor .m-txt{ text-align:left; }
.mentor .m-txt p{ color:var(--texto-sutil); margin-bottom:var(--e-sm); font-size:var(--texto-corpo-g); line-height:1.6; }
.mentor .citacao{ font-family:var(--fonte-enfase); font-size:clamp(30px,5vw,46px); color:var(--cor-acento);
  line-height:1; margin:var(--e-md) 0; }

/* ============ FAQ (accordion) ============ */
.faq{ max-width:760px; margin:var(--e-lg) auto 0; text-align:left; }
.faq details{ border:1px solid var(--borda); border-bottom:0; }
.faq details:last-child{ border-bottom:1px solid var(--borda); }
.faq summary{ cursor:pointer; list-style:none; padding:18px var(--e-md); display:flex;
  align-items:center; gap:var(--e-md);
  font-family:var(--fonte-display); font-weight:600; text-transform:uppercase; letter-spacing:.3px;
  font-size:var(--texto-h4); color:var(--texto); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; color:var(--cor-acento); font-size:24px;
  font-family:var(--fonte-corpo); transition:transform var(--t-base); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ padding:0 var(--e-md) var(--e-md); color:var(--texto-sutil); font-size:var(--texto-corpo); }

/* ============ RODAPÉ ============ */
.rodape-venda{ padding:var(--e-lg) 0; text-align:center; font-family:var(--fonte-mono);
  font-size:var(--texto-micro); letter-spacing:1.5px; text-transform:uppercase; color:var(--texto-fraco); }