/* Natal que Vende · v4 (só a versão A, carregado DEPOIS do style.css).
   Identidade = a da v3 (decisão do orquestrador 04/11: §8.6 do brief-v4 NÃO aplicado).
   Aqui só entra o que a v4 acrescenta: ícones de ds/icons, cartões da oferta, mobile, barra fixa.
   Tudo escopado em .v4 (classe do <html> da A) para não vazar para a /b/, que nem carrega este arquivo. */

/* ---------- base ---------- */
/* §8.3: sem overflow-x:hidden no body (mascara rolagem lateral e quebra sticky no iOS).
   A rolagem fica contida no marquee (overflow:hidden) e nas seções .noite. */
.v4 body { overflow-x: visible; }
.v4 p, .v4 li, .v4 h1, .v4 h2, .v4 h3 { overflow-wrap: anywhere; }
.v4 .ic { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; }
.v4 .tag { max-width: 100%; }

/* barra fixa: o body ganha padding do tamanho dela enquanto aparece (JS seta --barra) */
.v4 body.com-barra { padding-bottom: var(--barra, 76px); }
.v4 footer { padding-bottom: 44px; }

/* ---------- marca (header) ---------- */
.v4 .marca-a4 { flex-wrap: nowrap; gap: 10px; justify-content: center; padding: 14px var(--gutter) 6px; }
.v4 .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ouro); }
.v4 .marca-txt { display: grid; justify-items: start; gap: 4px; text-align: left; }
.v4 .marca-a4 .sub-marca { line-height: 1.25; }

/* ---------- hero: só texto (LCP = h1) ---------- */
.v4 .hero-a4 { padding-block: 6px 52px; }
.v4 .hero-a4 .hero-txt { max-width: 820px; margin: 0 auto; text-align: center; }
.v4 .hero-a4 h1 { font-size: clamp(1.5rem, 6.3vw, 3.2rem); line-height: 1.12; }
.v4 .hero-a4 .sub, .v4 .hero-a4 .micro { margin-inline: auto; }
.v4 .hero-a4 .cta-primary { margin-inline: auto; min-height: 60px; }
.v4 .hero-a4 .preco-linha { margin-inline: auto; }
.v4 .prova-linha { margin: 18px auto 0; font-size: .94rem; font-weight: 600; line-height: 1.45; color: var(--tinta-2); max-width: 46ch; }

/* ---------- chips com ícone (2x2 no mobile, não é pílula) ---------- */
.v4 .s-chips-a4 { padding-bottom: 40px; }
.v4 .chips-a4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(1040px, 100% - var(--gutter) * 2); margin: 0 auto; }
.v4 .chips-a4 li {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px;
  background: var(--papel); color: var(--tinta); border: 1px solid rgba(18, 48, 31, .2); border-radius: 4px;
  font-family: var(--f-placa); font-weight: 700; font-size: .94rem; line-height: 1.25;
}
.v4 .chips-a4 .ic { width: 20px; height: 20px; color: var(--verde-escuro); }
@media (min-width: 768px) { .v4 .chips-a4 { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

/* ---------- listas com check (para-voce, benefícios) ---------- */
.v4 .lista-a4 li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.v4 .lista-a4 .ic-check { width: 26px; height: 26px; padding: 4px; margin-top: 1px; border-radius: 50%; background: rgba(31, 122, 63, .12); color: var(--verde-escuro); }

/* ---------- prova (flag desligada: 3 itens com ícone) ---------- */
.v4 .s-prova-a4 h2 { max-width: 22ch; }
.v4 .prova-icones { display: grid; gap: 20px; margin: 26px 0 0; max-width: 760px; }
.v4 .prova-icones li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.v4 .prova-icones .ic { width: 28px; height: 28px; margin-top: 1px; color: var(--verde-escuro); }
.v4 .prova-icones p { margin: 0; }
@media (min-width: 900px) { .v4 .prova-icones { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 32px; } }

/* carrossel de depoimentos (só renderiza com DEPOIMENTOS_LIBERADOS = True) */
.v4 .depo-trilho {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 26px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.v4 .depo-trilho::-webkit-scrollbar { display: none; }
.v4 .depo-card { flex: 0 0 78vw; max-width: 320px; margin: 0; scroll-snap-align: start; background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 14px; box-shadow: var(--sombra); }
.v4 .depo-frase { margin: 0 0 12px; }
.v4 .depo-frase p { margin: 0; font-family: var(--f-mao); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.v4 .depo-card img { width: 100%; height: auto; border-radius: 8px; }
.v4 .depo-legenda { margin-top: 10px; font-size: .875rem; font-weight: 700; color: var(--tinta-2); }
.v4 .depo-indicador { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 6px 0 0; font-size: .875rem; color: var(--tinta-2); }
.v4 .depo-dica { display: inline-flex; align-items: center; gap: 6px; }
.v4 .depo-dica .ic { width: 16px; height: 16px; order: 2; }
@media (min-width: 960px) {
  .v4 .depo-trilho { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .v4 .depo-card { max-width: none; }
  .v4 .depo-indicador { display: none; }
}

/* ---------- faixas: as 3 coisas (fundo noite) ---------- */
.v4 .coisas { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.v4 .coisa { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.v4 .coisa-num { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--ouro); }
.v4 .coisa-num span { font-family: var(--f-placa); font-weight: 900; font-stretch: 80%; font-size: 2rem; line-height: 1; }
.v4 .coisa-num .ic { width: 30px; height: 30px; }
.v4 .coisa p { color: #dfe7de; margin: 0; }
.v4 .coisas-fecho { margin-top: 40px; color: #fff; font-family: var(--f-placa); font-weight: 800; font-size: 1.25rem; }
@media (min-width: 900px) { .v4 .coisas { grid-template-columns: repeat(3, 1fr); gap: 44px; } }

/* ---------- oferta: a única seção com foto de peça ---------- */
.v4 .oferta-h2 { max-width: 20ch; }
.v4 .grupos { display: grid; gap: 18px; margin-top: 26px; }
.v4 .grupo { background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 16px 20px; box-shadow: var(--sombra); }
.v4 .grupo-bonus { border-top: 4px solid var(--ouro); }
.v4 .grupo-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.v4 .grupo-cab .ic { width: 26px; height: 26px; color: var(--xadrez); }
.v4 .grupo-cab h3 { margin: 0; font-size: 1.3rem; line-height: 1.15; }
.v4 .grupo-txt { margin: 0 0 6px; }
.v4 .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.v4 .tile { padding-top: 0; transform: none; filter: drop-shadow(0 8px 12px rgba(60, 30, 20, .12)); }
.v4 .tiles > li { display: flex; }
.v4 .tile { flex: 1; display: flex; flex-direction: column; }
.v4 .tile .tag-corpo { flex: 1; }
.v4 .tile .tag-corpo { padding: 8px 6px 10px; border: 1px solid var(--linha); border-radius: 10px; }
.v4 .tile .furo { display: none; }
.v4 .tile .tag-foto { aspect-ratio: 3 / 4; border-radius: 6px; }
.v4 .tile .letra { font-size: .98rem; line-height: 1.2; }
.v4 .tile-sem .tag-sem { outline: 0; background: #eef1ec; color: var(--tinta-2); }
.v4 .tile-sem .tag-sem .ic { width: 40px; height: 40px; }
.v4 .tile-texto { height: 100%; }
.v4 .tile-texto .tag-corpo { height: 100%; display: grid; }
.v4 .tile-texto .tag-sem { height: 100%; aspect-ratio: auto; min-height: 120px; background: var(--kraft-claro); }
.v4 .tile-texto p { margin: 0; font-family: var(--f-mao); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--vermelho-esc); }
@media (hover: hover) { .v4 .tile:hover { --y: 0; transform: none; } }
.v4 .extras { display: grid; gap: 18px; margin: 30px 0 0; max-width: 860px; }
.v4 .extras li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.v4 .extras .ic { width: 28px; height: 28px; margin-top: 2px; color: var(--verde-escuro); }
.v4 .extras h3 { font-size: 1.25rem; margin: 0 0 .25em; }
.v4 .extras p { margin: 0; }
.v4 .resumo-recibo {
  display: flex; align-items: flex-start; justify-content: center; gap: 10px;
  max-width: 560px; margin: 30px auto 0; padding: 16px 18px; text-align: center;
  background: #fffdf8; border: 2px dashed rgba(31, 122, 63, .55); border-radius: 12px;
  font-weight: 750; line-height: 1.45;
}
.v4 .resumo-recibo .ic { color: var(--verde-escuro); margin-top: 1px; }
.v4 .s-oferta-a4 .chamada { text-align: center; margin-inline: auto; }
.v4 .s-oferta-a4 .cta-primary { margin-inline: auto; }
@media (min-width: 768px) {
  .v4 .grupos { grid-template-columns: 1fr 1fr; gap: 22px; }
  .v4 .tiles { grid-template-columns: repeat(4, 1fr); }
  .v4 .grupo-bonus { grid-column: 1 / -1; }
  .v4 .grupo-bonus .tiles { grid-template-columns: repeat(6, 1fr); }
  .v4 .grupo { padding: 22px 20px 24px; }
}

/* ---------- bio ---------- */
.v4 .bio-foto { padding-top: 34px; }

/* ---------- preço (fundo noite) ---------- */
.v4 .preco-a4-grid { display: grid; gap: 30px; }
.v4 .preco-txt p { color: #e3eae1; }
.v4 .preco-caixa { display: grid; justify-items: center; text-align: center; }
.v4 .preco-caixa p { margin-inline: auto; }
.v4 .por-peca { color: #fff; font-weight: 700; margin-bottom: 14px; }
.v4 .plaquinha { margin-bottom: 14px; align-items: baseline; gap: 10px; }
.v4 .plaquinha small { font-size: .26em; font-stretch: 90%; font-weight: 800; letter-spacing: .02em; }
.v4 .parcelas { color: #fff; font-family: var(--f-placa); font-weight: 800; font-size: 1.3rem; margin-bottom: 16px; }
.v4 .acesso { display: inline-flex; align-items: flex-start; gap: 10px; text-align: left; color: #e3eae1; max-width: 42ch; }
.v4 .acesso .ic { color: var(--ouro); margin-top: 2px; }
.v4 .atencao { color: #fff; max-width: 46ch; }
.v4 .s-preco-a4 .chamada { color: #fff; }
.v4 .s-preco-a4 .cta-primary { margin-inline: auto; }
.v4 .selo-pag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 18px; font-size: .92rem; font-weight: 700; color: #e3eae1; }
.v4 .selo-pag span { display: inline-flex; align-items: center; gap: 6px; }
.v4 .selo-pag .ic { width: 20px; height: 20px; color: var(--ouro); }
@media (min-width: 900px) { .v4 .preco-a4-grid { grid-template-columns: 1fr 460px; gap: 72px; align-items: center; } }
/* style.css (v3) põe grid-area: txt no .preco-txt a partir do desktop; sem template de áreas isso cria trilhas implícitas e quebra a grade */
.v4 .preco-a4-grid > * { grid-area: auto; }

/* ---------- garantia: selo picô estático ---------- */
.v4 .selo-a4, .v4.js-motion .selo-a4 { animation: none; transform: rotate(-6deg); }
.v4 .s-garantia-a4 .cta-primary { margin-inline: auto; }
@media (min-width: 768px) { .v4 .s-garantia-a4 .cta-primary { margin-inline: 0; } }

/* ---------- FAQ: ícone "mais" do ds (stroke 1,75) ---------- */
.v4 .faq-lista summary { min-height: 56px; }
.v4 .faq-lista summary .ic { flex: 0 0 24px; width: 24px; height: 24px; color: var(--xadrez); }
.v4 .faq-lista summary .ic path { stroke: currentColor; stroke-width: 1.75; }

/* ---------- CTA final ---------- */
.v4 .s-final-a4 .final-papel { text-align: center; }
.v4 .s-final-a4 .final-papel p { margin-inline: auto; }
.v4 .s-final-a4 .cta-primary { margin-inline: auto; }
.v4 .final-linha { font-size: 1.1rem; }

/* ---------- barra fixa (v4: rótulo próprio, fio superior, raio 10) ---------- */
.v4 .barra-fixa { padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(253, 250, 244, .97); border-top: 2px solid var(--xadrez); }
.v4 .barra-fixa .cta-sticky { min-height: 52px; border-radius: 10px; font-size: .97rem; letter-spacing: 0; font-stretch: 88%; padding: 10px 12px; white-space: nowrap; }
@media (max-width: 359px) { .v4 .barra-fixa .cta-sticky { white-space: normal; font-size: .92rem; } }

/* ---------- primeira dobra mobile (CTA 1 inteiro em 375x667) ---------- */
@media (max-width: 599px) {
  html.v4 { --gutter: 20px; }
  .v4 section { padding-block: 72px; }
  .v4 .s-marca { padding-block: 0; }
  .v4 .hero-a4 { padding-block: 4px 52px; }
  .v4 .hero-a4 .hero-txt { padding: 12px 0 0; }
  .v4 .hero-a4 h1 { font-size: clamp(1.45rem, 6.6vw, 1.75rem); line-height: 1.13; margin-bottom: .45em; }
  .v4 .hero-a4 .sub { font-size: .96rem; line-height: 1.48; margin-bottom: .5em; }
  .v4 .hero-a4 .micro { font-size: .94rem; line-height: 1.35; }
  .v4 .hero-a4 .cta-bloco { margin-top: 12px; }
  .v4 .s-marquee { padding-block: 34px 26px; }
  .v4 .s-chips-a4 { padding-block: 0 36px; }
  .v4 h2 { font-size: clamp(1.625rem, 7vw, 2rem); line-height: 1.12; }
  .v4 .caderno { padding: 30px 18px 26px; }
  .v4 .chips-a4 li { font-size: .9rem; padding: 10px; }
}

/* ---------- movimento: tudo desligado com prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .v4 .cta-primary::after, .v4 .cta-sticky::after, .v4 .plaquinha::after { animation: none !important; display: none; }
  .v4 .barra-fixa { transition: none; }
  .v4 .neve { display: none; }
}
@media (max-width: 767px) { .v4 .neve { display: none; } }

/* CTAs de 2 linhas: equilibra a quebra (evita "R$ / 47!" e palavra órfã) sem mexer no texto exato */
.v4 .cta-primary { text-wrap: balance; }