:root {
  --cor-fundo: #FFFFFF;
  --cor-painel: #EEF3F8;
  --cor-texto: #000000;
  --cor-primaria: #00D6C9;
  --cor-primaria-escura: #00A9A5;
  --cor-foco-bg: #EAFBFA;
  --cor-borda: #D7DDE4;
  --cor-borda-card: #E4E7EB;
  --cor-botao-compra: #1FA97A;
  --fonte-titulo: 'Nunito', sans-serif;
  --fonte-corpo: 'Open Sans', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-painel);
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
}

h1, h2, h3, .secao-titulo { font-family: var(--fonte-titulo); font-weight: 800; }

.pagina { max-width: 1040px; margin: 0 auto; padding: 20px 16px 60px; }

.hero-produto {
  width: 100%;
  aspect-ratio: 851 / 315;
  border-radius: 12px;
  margin-bottom: 18px;
  display: block;
  position: relative;
  overflow: hidden;
}
.hero-produto-vazio {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
}
/* ── Crossfade real entre 2 imagens sobrepostas — 04/09/2026 ──
   Antes era 1 img só (apaga → troca src → surge). Agora 2 camadas
   absolutas na mesma área: a nova sobe de opacidade enquanto a atual
   desce, ao mesmo tempo — dá a mistura real entre as duas. Camada B
   nasce com opacity 0 (só a A aparece até a 1ª troca, controlada via JS). */
.hero-produto-camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.4s ease;
}
.hero-produto-camada:nth-of-type(2) {
  opacity: 0;
}

.layout { display: flex; flex-direction: column; gap: 16px; }
.bonus-mobile { display: none; }
@media (min-width: 900px) {
  .layout.com-lateral {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "principal lateral"
      "posgrid   .";
    align-items: start;
    gap: 24px;
  }
  .layout.com-lateral .coluna-principal { grid-area: principal; }
  .layout.com-lateral .coluna-lateral { grid-area: lateral; position: sticky; top: 20px; }
  .layout.com-lateral .coluna-pos-grid { grid-area: posgrid; }
}

.coluna-principal { display: flex; flex-direction: column; gap: 16px; }
.coluna-pos-grid { display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-card);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  padding: 18px;
}

.card h2 { font-size: 17px; margin: 0 0 4px; }
.preco-produto { font-size: 22px; font-weight: 800; color: var(--cor-primaria-escura); margin: 2px 0; }
.preco-parcelado { font-size: 22px; font-weight: 800; color: var(--cor-primaria-escura); margin: 2px 0; }
.preco-parcelado-valor { font-size: 26px; }
.preco-avista { font-size: 14px; color: #666; margin: 0 0 2px; }
.descricao-produto { font-size: 14px; color: #444; margin: 8px 0 0; line-height: 1.5; }

/* Card do produto ("Seu Closet na Medida") — todas as fontes +10%,
   pedido do Neto, 03/09/2026. Escopado por .card-produto-info (único
   dessa seção) pra não afetar h2/preco/descricao de nenhum outro card
   (resumo-pedido, etc. usam as mesmas classes genéricas acima). */
.card-produto-linha .card-produto-info h2 { font-size: 21.7px; } /* 20.7px +1px, pedido do Neto */
.card-produto-info .preco-produto { font-size: 24.2px; }
.card-produto-linha .card-produto-info .preco-parcelado { font-size: 26.62px; line-height: 1; } /* 24.2px +10%, pedido do Neto; line-height:1 novo, aproxima "ou em até" de "12x de R$...", pedido do Neto 06/09/2026 */
.card-produto-linha .card-produto-info .preco-parcelado-valor { font-size: 30.46px; font-weight: 800; } /* 29.46px→30.46px (+1px, pedido do Neto 13/09/2026); font-weight explícito porque .preco-parcelado-resto (pai) ficou normal */
.card-produto-linha .card-produto-info .preco-parcelado-prefixo { color: var(--cor-texto); font-size: 19.23px; font-weight: 400; } /* "ou em até" preto, sem negrito; 22.62px -15%, pedido do Neto 06/09/2026 — resto da linha mantém tamanho/cor teal herdados */
.card-produto-linha .card-produto-info .preco-avista { font-size: 20px; font-weight: 400; color: var(--cor-texto); } /* 25.02px→20px, peso uniforme (era 400 no texto + 700 no valor) — pedido do Neto 13/09/2026: texto configurável antes/depois do preço deixou os pesos diferentes confusos */
.card-produto-linha .card-produto-info .preco-avista-valor { font-weight: 400; }
.card-produto-linha .card-produto-info .preco-parcelado-resto { white-space: nowrap; margin-top: -18px; display: inline-block; font-weight: 400; } /* "12x de R$ 6,61" sempre junto na 2ª linha, aproximado de "ou em até" (-6px → -12px → -18px, pedido do Neto 06/09/2026); font-weight 400 novo — "12x de" deixa de ser negrito, pedido do Neto 13/09/2026 (valor mantém negrito via .preco-parcelado-valor) */
.card-produto-linha .card-produto-info .descricao-produto { font-size: 16.94px; font-weight: 700; margin-top: 16px; } /* 15.4px +10%, pedido do Neto; margin-top 16px novo, afasta da frase de cima, pedido do Neto 06/09/2026 */

/* ── Card produto — miniatura ao lado do nome/preço, novo 15/08/2026 ──
   Layout referência Hotmart: miniatura quadrada à esquerda, nome/preço/
   descrição deslocam pro bloco à direita. Sem miniatura cadastrada, o
   bloco de texto ocupa a linha inteira normalmente (flex sem 2º filho). */
.card-produto-linha { display: flex; gap: 19px; align-items: stretch; }
.miniatura-produto {
  width: 115px; /* 100px +15%, pedido do Neto */
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
/* Formatos de altura — Miniatura do Produto (Checkout). Sem altura própria,
   .card-produto-linha (align-items: stretch) estica a imagem até a altura
   do texto ao lado, distorcendo o crop. Cada classe trava a altura real,
   deixando o object-fit: cover cortar certo. Campo de origem (Porta 4)
   ainda não existe — enquanto não existir, card-produto.ejs sempre aplica
   --1x1 como padrão. */
.miniatura-produto--1x1 { height: 115px; } /* 100px +15%, pedido do Neto */
.miniatura-produto--3x4 { height: 153px; } /* 133px +15%, pedido do Neto */
.miniatura-produto--2x3 { height: 172px; } /* 150px +15%, pedido do Neto */
.card-produto-info { flex: 1; min-width: 0; }

.secao-titulo { text-transform: uppercase; font-size: 15px; margin: 0 0 12px; }

.campo, .campo-grupo { margin-bottom: 14px; }
.campo label, .campo-grupo label { display: block; font-size: 15.4px; font-weight: 700; margin-bottom: 6px; } /* 14px +10%, pedido do Neto */
.campo label .obrig, .campo-grupo label .obrig, .campo-checkbox label .obrig { color: #D64545; margin-left: 2px; }
.campo input, .campo select, .campo-grupo input, .campo-grupo select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 8px 12px;
  font-size: 16.5px; /* 15px +10%, pedido do Neto */
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: #FDFDFE;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  margin-bottom: 10px;
}
.campo input::placeholder, .campo-grupo input::placeholder {
  color: #424953; /* #5E6774 escurecido mais um pouco, pedido do Neto */
}
.campo input:focus, .campo select:focus, .campo-grupo input:focus, .campo-grupo select:focus,
.campo input.preenchido, .campo select.preenchido, .campo-grupo input.preenchido, .campo-grupo select.preenchido {
  outline: none;
  border: 1.5px solid var(--cor-primaria);
  background: var(--cor-foco-bg);
}
.campo-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 15.4px; margin-bottom: 10px; } /* 14px +10%, pedido do Neto */
.campo-checkbox input { margin-top: 3px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── CEP com busca (ViaCEP) ── */
.campo-cep label { font-size: 14.3px; font-weight: 600; margin-bottom: 4px; color: #555; } /* 13px +10%, pedido do Neto */
.campo-cep-linha { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.campo-cep-linha input { flex: 1; margin-bottom: 0; }
.btn-buscar-cep {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: #FDFDFE;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333;
}
.btn-buscar-cep svg { width: 18px; height: 18px; }
.btn-buscar-cep:hover { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }

/* Rua/Bairro/Cidade/Estado/Número/Complemento — ocultos até o CEP ser encontrado com sucesso */
.bloco-endereco-oculto { display: none; }
.bloco-endereco-oculto.visivel { display: block; }

/* ── Forma de pagamento — acordeão ── */
.metodo-pagamento { border: 1px solid var(--cor-borda); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.metodo-pagamento.aberto { border: 1.5px solid var(--cor-primaria); }
.metodo-cabecalho {
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  background: #fff;
}
.icone-pagamento { width: 22px; height: 22px; flex-shrink: 0; color: #333; }
.metodo-pagamento.aberto .icone-pagamento { color: var(--cor-primaria-escura); }
.radio-fake { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #999; flex-shrink: 0; position: relative; }
.metodo-pagamento.aberto .radio-fake { border-color: var(--cor-primaria-escura); }
.metodo-pagamento.aberto .radio-fake::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--cor-primaria-escura);
}
.metodo-corpo { display: none; padding: 16px 14px; background: #FAFBFC; border-top: 1px solid var(--cor-borda-card); }
.metodo-pagamento.aberto .metodo-corpo { display: block; }

/* ── CPF/CNPJ — sempre visível, logo após Confirmar email (movido de
   dentro do acordeão do Pix nesta sessão, evitava salto de tela/fuga de
   compra). Contorno teal fixo no input, mesma cor do card do Cupom
   (var(--cor-primaria)) — sempre aparece assim, não só em foco (diferente
   do .campo input:focus padrão). */
#campo-cpf { border: 1px solid var(--cor-primaria); }

/* Select decorativo CPF/CNPJ ao lado do input — só visual (menos texto
   pro usuário ler), não altera máscara/validação. Sem seta customizada,
   mesmo padrão "sem seta" dos demais selects do projeto (appearance:none
   herdado de .campo-grupo select, PDR_DESIGN_SYSTEM.md). */
.campo-cpf-linha { display: flex; gap: 8px; }
.campo-cpf-linha select { flex: 0 0 92px; }
.campo-cpf-linha input { flex: 1; }

/* ── Pix — mini-cards informativos ── */
.pix-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 4px; }
.pix-info-card { border: 1px solid var(--cor-borda-card); border-radius: 8px; padding: 12px; background: #fff; }
.pix-info-card svg { width: 18px; height: 18px; color: var(--cor-primaria-escura); margin-bottom: 8px; }
.pix-info-card h4 { font-size: 13px; margin: 0 0 4px; font-family: var(--fonte-corpo); font-weight: 700; }
.pix-info-card p { font-size: 12px; color: #666; margin: 0; line-height: 1.4; }
@media (max-width: 640px) {
  .pix-info-grid { grid-template-columns: 1fr; }
}

/* ── Descrição do produto ("Aprenda como estar sempre elegante...") —
   escondida só no mobile, pedido do Neto. Desktop não muda em nada. */
@media (max-width: 640px) {
  .descricao-produto { display: none; }
}

/* ── Validação — campos obrigatórios (Nome, Whatsapp, CPF, Email) ── */
.campo-erro input, .campo-erro select { border-color: #D64545 !important; }
.campo-erro-msg { color: #D64545; font-size: 12px; margin: -8px 0 10px; }

/* ── Bônus / Order bump ── */
.item-extra { border: 1px solid var(--cor-borda-card); border-radius: 10px; padding: 12px; display: flex; gap: 12px; margin-bottom: 10px; }
.item-extra:last-child { margin-bottom: 0; }
.item-extra img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--cor-painel); }
.item-extra .item-extra-nome { font-weight: 700; font-size: 14px; margin: 0 0 4px; }
.item-extra .item-extra-desc { font-size: 13px; color: #555; margin: 0 0 6px; }
.item-extra .item-extra-parcelado { font-size: 13px; font-weight: 700; color: var(--cor-primaria-escura); margin: 0 0 2px; }
.item-extra .item-extra-preco { font-size: 13px; font-weight: 700; color: var(--cor-primaria-escura); }
.item-extra-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; }
.coluna-lateral .item-extra { flex-direction: column; }
.coluna-lateral .item-extra img { width: 100%; height: 90px; }

/* ── Bônus — card da coluna lateral da Porta 5, novo 17/08/2026 ──
   Escopo fechado com o Neto: título dinâmico com contagem, cada bônus em
   card individual e separado, sombra forte reaproveitada de
   `.gateway-painel` (Módulo 04, Porta 4) — 5px 6px 10px rgba(0,0,0,0.14),
   nenhum valor novo inventado. Card master em offwhite (#FAF9F7),
   confirmado pelo Neto. Fontes de título e numeração 40% maiores que o
   padrão (.secao-titulo 15px→21px, numeração 13px→18px), escopadas só
   nesta seção via classes próprias — não afeta .secao-titulo global. */
.bonus-master-card {
  background: #f2efe6; /* cor final, fixada pelo Neto (03/09/2026) — era rosa de teste */
  box-shadow: 0 0 24px rgba(0,0,0,0.28); /* mais escuro que o blur dos cards internos, pedido do Neto */
  position: relative;
  overflow: hidden;
}
.bonus-mascara {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cor-painel);
  z-index: 5;
}
.bonus-titulo-dinamico { font-size: 18px; line-height: 1.3; }
.bonus-titulo-numero { color: var(--cor-primaria-escura); font-size: 28px; }
.bonus-titulo-card { box-shadow: 8px 10px 14px rgba(0,0,0,0.2); }
.bonus-titulo-card .bonus-card-corpo { padding-left: 6px; padding-right: 6px; }
.bonus-card {
  background: var(--cor-fundo);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0,0,0,0.18);
  margin-bottom: 19px;
  text-align: center;
  overflow: hidden;
}
.bonus-card:last-child { margin-bottom: 0; }
.bonus-card-corpo { padding: 14px; }
.bonus-card-imagem {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--cor-painel);
}
.bonus-card-numero {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 21px;
  color: var(--cor-primaria-escura);
  margin: 0 0 10px;
}
.bonus-card-nome { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.bonus-card-desc { font-size: 13px; color: #555; margin: 0; line-height: 1.4; }

/* Empilhamento mobile: bônus entre a capa e o card de produto, antes do
   formulário — só dentro desta media query (max-width, abaixo do
   breakpoint desktop de 900px), nunca no grid desktop (senão inverte a
   coluna). */
@media (max-width: 899px) {
  /* Troca de bloco — pedido do Neto, 03/09/2026: bônus fica entre o card
     de produto e o formulário (bonus-mobile.ejs), não mais na sidebar
     (que só faz sentido lado a lado no desktop). Sidebar escondida aqui,
     bloco novo assume — mesmas classes internas, mesmo CSS abaixo. */
  .coluna-lateral { display: none; }
  .bonus-mobile { display: block; }

  /* Alterado — pedido do Neto, 03/09/2026: imagem volta a aparecer no
     mobile. Mesmo padrão do desktop (imagem+texto), card gira 90° — vira
     linha em vez de coluna: imagem à esquerda, texto à direita. Escopo
     só nos cards individuais de bônus (.bonus-card:not(.bonus-titulo-card))
     — o card de título ("+ N Bônus...") não tem imagem, mantém como está.
     Sem descrição no mobile, só "Bônus N" + título. Desktop não muda em
     nada. */
  .bonus-card:not(.bonus-titulo-card) {
    display: grid;
    grid-template-columns: 90px 1fr;
    height: 90px;
    text-align: left;
  }
  .bonus-titulo-card {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bonus-titulo-card .bonus-card-corpo {
    padding: 0 6px;
  }
  .bonus-card:not(.bonus-titulo-card) .bonus-card-imagem {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: cover;
  }
  .bonus-card:not(.bonus-titulo-card) .bonus-card-corpo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 12px;
  }
  .bonus-card-numero { font-size: 22.44px; margin: 0 0 4px; } /* 20.4px +10%, pedido do Neto */
  .bonus-titulo-numero { font-size: 22.44px; } /* mesmo +10%, pedido do Neto */
  .bonus-titulo-dinamico { font-size: 15.3px; } /* "e você não paga nada a mais", 17px -10%, pedido do Neto */
  .bonus-card-nome { font-size: 17.55px; } /* 19.5px -10%, pedido do Neto */
  .bonus-card-desc { display: none; }
}

/* ── Resumo ── */
.resumo-linha { display: flex; justify-content: space-between; font-size: 15px; padding: 6px 0; }
.resumo-linha.total { font-weight: 800; font-size: 17px; border-top: 1px solid var(--cor-borda-card); margin-top: 6px; padding-top: 12px; }
.resumo-linha-parcelado { text-align: right; font-size: 13px; color: #666; margin-top: 2px; }

/* ── Selo Mercado Pago — branding oficial (Módulo 07, 13/08/2026) ──
   Discreto: logo pequeno + texto, alinhado horizontal, acima do botão de
   compra. Segue a área de proteção do logo oficial (mercadopago.com.br/mp/
   logo-oficial) mantendo espaço livre ao redor, sem esticar/recolorir. */
.selo-mercadopago {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 20px;
}
.selo-mercadopago-logo {
  height: 96px;
  width: auto;
  display: block;
}
.selo-mercadopago span {
  font-size: 14px;
  color: #555;
}

/* ── Botão de compra ── */
.btn-comprar {
  width: 100%;
  background: var(--cor-botao-compra);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--fonte-titulo);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: background-color .12s ease, transform .1s ease, box-shadow .1s ease;
}
.btn-comprar:active {
  background: #178C63;
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* ── Botão de ação da Página de Obrigado (link, ex: WhatsApp de suporte) ──
   Não usa largura total como o .btn-comprar — pedido do Neto: botão menor,
   padding máx 15px nas laterais, tamanho pelo conteúdo. */
.obrigado-botao-wrap { text-align: center; }
.btn-obrigado-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  background: var(--cor-botao-compra);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 16px 15px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--fonte-titulo);
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: background-color .12s ease, transform .1s ease, box-shadow .1s ease;
}
.btn-obrigado-acao:active {
  background: #178C63;
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* ── Página de Obrigado — nome do cliente em destaque + frase acima do botão ── */
.obrigado-cliente-nome { font-size: 18px; font-weight: 800; font-family: var(--fonte-titulo); margin: 2px 0 6px; }
.obrigado-duvida-texto { text-align: center; font-size: 13px; color: #666; margin: 4px 0 10px; }

.rodape { text-align: center; font-size: 12px; color: #777; margin-top: 20px; line-height: 1.6; }

/* ── Toast de erro — customizado, some sozinho (Design System: nunca alert() nativo) ── */
.toast-erro {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #FDECEC;
  color: #D64545;
  border: 1px solid #F4BFBF;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  z-index: 999;
  max-width: 90%;
  text-align: center;
}

/* ── Endereço obrigatório pro Boleto — novo, 14/08/2026 (Módulo 07) ──
   Hint discreto ao lado do label, mesmo tom de texto secundário já usado
   em .preco-avista/.item-extra-desc (#666/#555). */
.hint-boleto { font-size: 12px; font-weight: 400; color: #666; text-transform: none; }

/* ── Botão de WhatsApp flutuante — Checkout ──
   Fixo na tela (acompanha o scroll), canto inferior direito, sempre
   visível. Cor #25D366 é exceção deliberada ao Design System (que usa
   --cor-botao-compra no resto do checkout) — verde oficial da marca
   WhatsApp, pedido explícito do Neto. Sombra cinza neutra, nunca
   colorida (regra 2 do Design System).
   Formato pill (ícone com contorno + texto "Ajuda") igual em mobile e
   desktop — pedido do Neto, referência visual de mercado. A única
   diferença entre os 2 é a posição: no desktop (≥900px, mesmo
   breakpoint já usado pra sidebar), o botão acompanha a borda real da
   coluna de bônus em vez de ficar preso na borda da tela. */
.whatsapp-flutuante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 998;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, right .15s ease;
}
.whatsapp-flutuante:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.whatsapp-icone-circulo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 2px solid #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-icone-circulo svg { width: 17px; height: 17px; }
.whatsapp-texto {
  color: #000000;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

/* Desktop — só a posição muda, acompanha a borda real da coluna de
   bônus (300px, gap 24px, dentro do .pagina max-width:1040px com
   padding lateral de 16px) em vez de ficar preso na borda da tela.
   max() evita valor negativo em telas entre 900px e ~1040px. */
@media (min-width: 900px) {
  .whatsapp-flutuante {
    right: max(20px, calc((100vw - 1040px) / 2 + 36px));
  }
}

/* Mobile — sobe 25px no total (20px → 45px), pedido do Neto em 2
   rodadas: +10px (estava sobre uma imagem), depois +15px. */
@media (max-width: 640px) {
  .whatsapp-flutuante {
    bottom: 45px;
  }
}

/* ── Pix/Boleto — resultado inline + polling — novo, 14/08/2026 ──
   Reaproveita .card (container), .secao-titulo, .cta-secundario (botão
   Copiar) e as cores já definidas nas variáveis do topo do arquivo. */
.pix-qrcode {
  display: block;
  width: 220px;
  height: 220px;
  margin: 8px auto 14px;
  border: 1px solid var(--cor-borda-card);
  border-radius: 8px;
}
.pix-instrucao { font-size: 14px; color: #444; text-align: center; margin: 0 0 10px; }
.pix-copia-cola {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.pix-copia-cola code { font-size: 12px; color: var(--cor-texto); word-break: break-all; flex: 1; }
.btn-copiar-pix {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--fonte-corpo);
  color: var(--cor-primaria-escura);
  background: #FFFFFF;
  border: 1px solid var(--cor-primaria);
  border-radius: 7px;
  cursor: pointer;
}
.btn-copiar-pix:hover { background: var(--cor-foco-bg); }
.cta-boleto-link {
  display: block;
  text-align: center;
  background: var(--cor-primaria);
  color: #0F1414;
  font-weight: 800;
  font-family: var(--fonte-titulo);
  text-decoration: none;
  border-radius: 8px;
  padding: 13px;
  margin: 10px 0;
}
.cta-boleto-link:hover { background: var(--cor-primaria-escura); color: #FFFFFF; }
.aguardando-pagamento {
  text-align: center;
  font-size: 13px;
  color: var(--cor-primaria-escura);
  font-weight: 600;
  margin-top: 12px;
}

/* ── Cupom de Desconto — novo, 05/09/2026 (pendência Alta desde sessão 24) ──
   Acordeão fechado por padrão, mesmo princípio visual do acordeão de Forma
   de Pagamento (.metodo-pagamento/.metodo-corpo), com classes próprias por
   ser um bloco independente (fora do grupo de radio de forma de
   pagamento). Botão "Aplicar" reaproveita a paleta já usada em
   .btn-comprar (cinza/desabilitado até o campo ter texto, teal quando
   ativo). Mensagem de erro reaproveita a cor de .campo-erro-msg. */
.cupom-acordeao { border: 1px solid var(--cor-primaria); border-radius: 8px; overflow: hidden; }
.cupom-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}
.cupom-cabecalho .icone-cupom { width: 20px; height: 20px; flex-shrink: 0; color: var(--cor-primaria-escura); }
.cupom-cabecalho span { flex: 1; color: var(--cor-primaria-escura); }
.cupom-seta { width: 18px; height: 18px; flex-shrink: 0; color: #666; transition: transform .15s ease; }
.cupom-acordeao.aberto .cupom-seta { transform: rotate(180deg); }
.cupom-corpo { display: none; padding: 0 14px 14px; border-top: 1px solid var(--cor-borda-card); padding-top: 14px; }
.cupom-acordeao.aberto .cupom-corpo { display: block; }
.cupom-linha { display: flex; gap: 8px; }
.cupom-linha input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--fonte-corpo);
}
.cupom-linha input:focus { border-color: var(--cor-primaria); outline: none; background: var(--cor-foco-bg); }
.btn-aplicar-cupom {
  flex-shrink: 0;
  padding: 0 20px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: #F2F4F6;
  color: #999;
  font-weight: 700;
  font-family: var(--fonte-titulo);
  font-size: 14px;
  cursor: not-allowed;
  transition: background-color .12s ease;
}
.btn-aplicar-cupom.ativo { background: var(--cor-primaria-escura); color: #FFFFFF; border-color: var(--cor-primaria-escura); cursor: pointer; }
.cupom-msg { font-size: 13px; margin: 8px 0 0; }
.cupom-msg.erro { color: #D64545; }
/* ── Banner de sucesso do Cupom — novo, 05/09/2026. Fundo/borda ciano
   (mesmas variáveis já usadas no resto do checkout), 2 linhas (título +
   valores), desvanece sozinho via opacity + .visivel (cupom.js controla
   o timing). Nunca vira elemento fixo — depois de alguns segundos some,
   o corte de preço no card é quem permanece. */
.cupom-msg.sucesso {
  background: var(--cor-foco-bg);
  border: 1px solid var(--cor-primaria);
  border-radius: 8px;
  padding: 10px 12px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cupom-msg.sucesso.visivel { opacity: 1; }
.cupom-msg-titulo { font-size: 13px; font-weight: 700; color: var(--cor-primaria-escura); margin: 0; }
.cupom-msg-detalhe { font-size: 13px; color: var(--cor-primaria-escura); margin: 4px 0 0; }

/* ── Pulso momentâneo no card do produto ao aplicar cupom — novo,
   05/09/2026. Box-shadow ciano de ~1,2s, some sozinho (cupom.js remove
   a classe via setTimeout). Chama o olho pro corte de preço que acabou
   de acontecer, sem virar elemento fixo na tela. */
.pulso-cupom { box-shadow: 0 0 0 2px var(--cor-primaria); transition: box-shadow 0.3s ease; }
.preco-riscado { text-decoration: line-through; color: #999; font-weight: 400; }
.resumo-desconto-linha span:last-child { color: var(--cor-primaria-escura); font-weight: 700; }

/* ── Prova Social — canto inferior esquerdo, oposto ao WhatsApp
   flutuante (canto inferior direito), pra não sobrepor. Cada notificação
   é seu próprio card (não reaproveita 1 slot único) — permite sobrepor
   uma nova antes da anterior sumir. Fade in/out via opacity + translateY,
   mesmo princípio do banner de sucesso do Cupom (.cupom-msg.sucesso). */
#prova-social-wrapper {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
}
.prova-social-card {
  background: #181A20;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 10px 14px;
  font-size: 13px;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 2.2s ease, transform 2.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.prova-social-card.visivel {
  opacity: 1;
  transform: translateY(0);
}
.prova-social-icone {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cor-primaria);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prova-social-icone svg { width: 17px; height: 17px; }
.prova-social-destaque { color: var(--cor-primaria); font-weight: 700; }
@media (max-width: 640px) {
  #prova-social-wrapper { left: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
}