/* ============================================================
   REVISTA DEPILADORAS · Página de vendas (v2)
   Carrega DEPOIS de landing.css e só sobrepõe o que muda.
   Copy: COPY-ONEPAGE-v6.md. A v1 (index.html + landing.css) fica intacta.
   ============================================================ */

:root{ --tarja:38px; }

/* A barra fixa desce a altura da tarja, e tudo que depende do topo
   passa a contar as duas alturas somadas. */
html{ scroll-padding-top:calc(var(--tarja) + var(--topo) + 12px); }

/* ============================================================
   0 · Tarja de prazo
   ============================================================ */
.tarja-topo{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--tarja);
  background:var(--ouro); color:var(--tinta);
  display:flex; align-items:center;
}
.tarja-topo .envelope{ padding-inline:var(--gutter); }
.tarja-topo span{
  display:block; text-align:center;
  font-family:var(--sans); font-weight:600; font-size:.72rem; line-height:1.2;
  letter-spacing:.04em;
}
@media (min-width:860px){
  :root{ --tarja:36px; }
  .tarja-topo span{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
}

.topo-fixo{ top:var(--tarja); }

/* ============================================================
   1 · Hero
   ============================================================ */
.venda .hero{ padding-top:calc(var(--tarja) + var(--topo) + clamp(26px,6vw,92px)); }

/* No celular o botão tem que caber na primeira tela, então ele sobe para logo
   depois da promessa e a caixa da oferta desce. O prazo não se perde nisso:
   ele continua na tarja fixa, acima de tudo. */
@media (max-width:899px){
  .venda .acao{ display:flex; flex-direction:column; margin-top:clamp(1.4rem,3vw,2rem); }
  .venda .acao-col{ order:-1; }
  .venda .hero h1{ font-size:clamp(1.9rem,1.2rem + 3.9vw,3rem); }
  .venda .hero .sub{ margin-top:1.2rem; font-size:1rem; }
  .venda .linha-fina{ margin-top:.85rem; }
}

/* No celular tudo empilha na ordem da leitura: promessa, oferta, botão.
   No desktop a oferta e o botão sobem para a coluna da direita, na altura
   do título, senão sobra meia tela vazia acima da dobra. */
.venda .acao{ gap:clamp(1.6rem,3vw,2rem); }

@media (min-width:1080px){
  .hero-grade{
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:clamp(3rem,5vw,5rem); align-items:center;
  }
  .venda .hero h1{ max-width:14ch; }
  .venda .hero .sub{ max-width:44ch; }
  .venda .acao{ display:flex; flex-direction:column; align-items:stretch; }
  .venda .acao-col{ align-items:stretch; }
  .venda .acao .btn{ width:100%; max-width:none; }
  .venda .caixa-oferta{ max-width:none; }
  .venda .linha-fina{ max-width:none; }
}

.caixa-oferta{
  border-left:3px solid var(--ouro); background:rgba(184,137,59,.1);
  padding:clamp(1.1rem,2.5vw,1.5rem) clamp(1.15rem,2.5vw,1.6rem);
  max-width:52ch;
}
.caixa-oferta .chamada{
  font-family:var(--sans); font-weight:600; font-size:.96rem; line-height:1.4;
  color:var(--ouro-claro); margin-bottom:1rem;
}
.caixa-oferta ul{ list-style:none; display:grid; gap:.7rem; }
.caixa-oferta li{
  position:relative; padding-left:1.5rem;
  font-size:.95rem; font-weight:400; line-height:1.5; color:#efe7da;
}
.caixa-oferta li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; background:var(--ouro); border-radius:50%;
}
/* A condição de tiragem fecha a caixa, separada dos benefícios por um fio. */
.caixa-oferta .rodape-oferta{
  margin-top:1.05rem; padding-top:.95rem; border-top:1px solid rgba(216,178,113,.28);
  font-size:.86rem; font-weight:400; line-height:1.5; color:var(--ouro-claro);
}

/* ============================================================
   5 · Edição 0 · 6 · Primeira fila
   ============================================================ */
.edicao .grade{ display:grid; gap:clamp(2.4rem,5vw,4rem); align-items:center; }
.bloco-corpo{ margin-top:1.8rem; }
.bloco-acao{ margin-top:clamp(2rem,4vw,2.6rem); }

@media (min-width:900px){
  .edicao .grade{ grid-template-columns:minmax(300px,.85fr) 1fr; }
  .edicao .capa-moldura{ margin-inline:0; }
  /* O segundo bloco espelha o primeiro, pra página não repetir a mesma
     composição duas vezes seguidas. */
  .edicao .grade.invertida{ grid-template-columns:1fr minmax(300px,.85fr); }
  .edicao .grade.invertida figure{ order:2; }
}

/* No polo claro a sombra da capa precisa ser mais leve, senão vira mancha. */
.claro .capa-moldura img, .claro-creme .capa-moldura img{
  box-shadow:0 18px 44px rgba(20,17,15,.22), 0 1px 0 var(--linha);
}
.claro .capa-legenda, .claro-creme .capa-legenda{ color:var(--cinza); }
.claro .capa-moldura::after, .claro-creme .capa-moldura::after{ display:none; }

.edicao .destaque-linha{
  margin-top:1.6rem; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.12rem,1rem + .7vw,1.45rem); line-height:1.32; max-width:30ch;
}
.escuro.edicao .destaque-linha{ color:#fff; }

/* ============================================================
   7 · Assinatura
   ============================================================ */
/* O bloco mudou de polo: sobre o creme, a caixa de entrega vira papel. */
.claro-creme .box-entrega{ background:var(--papel); }

/* ============================================================
   8 · Objeções
   ============================================================ */
/* Idem: sobre o papel, o cartão da objeção fica creme, que já é o padrão,
   e o fio da grade precisa contrastar com o fundo claro. */
.claro.objecoes .lista{ background:var(--linha); }