/* =====================================================================
   NAC 600mg — lp09 | Always Fit
   PÁGINA FEITA PARA CELULAR. 100% do público chega pelo mobile, então
   o celular é a base do arquivo. No fim tem um bloco pequeno só para
   a página não ficar estranha em telas grandes.

   COMO USAR ESTE ARQUIVO
   ----------------------
   1. Para mudar CORES, FONTES ou ESPAÇAMENTOS: mexa SÓ no bloco :root
      logo abaixo. Tudo na página puxa desses valores.
   2. O resto está dividido por seção, na mesma ordem do index.html.
   ===================================================================== */


/* =====================================================================
   PAINEL DE CONTROLE — DESIGN SYSTEM (tokens)  ·  versão 1.4.0
   ===================================================================== */
:root {
  /* --- Paleta bruta --- */
  --verde-900: #06231C;   /* fundo escuro profundo */
  --verde-800: #0B3229;   /* superfície escura */
  --verde-700: #10493B;   /* borda em fundo escuro */
  --verde-500: #17876B;   /* verde da marca */
  --verde-300: #4FC49F;   /* verde claro de apoio */
  --verde-100: #E7F5EF;   /* fundo claro esverdeado */
  --ambar-500: #F2A21B;   /* AÇÃO — reservado ao botão */
  --ambar-600: #D98A0B;   /* AÇÃO — toque/hover */
  --tinta-900: #0E1A17;   /* texto principal */
  --tinta-500: #5A6B66;   /* texto secundário */
  --tinta-300: #A9C4BB;   /* texto suave sobre fundo escuro */
  --tinta-100: #EAF2EF;   /* texto sobre fundo escuro */
  --branco: #FFFFFF;
  --cinza-50: #F7FAF9;    /* fundo de seção clara */
  --cinza-200: #E3EAE7;   /* linhas e bordas */
  --vermelho-500: #C0392B;/* apenas o "✕" da comparação */

  /* --- Tokens semânticos: use SEMPRE estes no resto do CSS --- */
  --cor-fundo: var(--branco);
  --cor-fundo-claro: var(--cinza-50);
  --cor-fundo-verde: var(--verde-100);
  --cor-fundo-escuro: var(--verde-900);
  --cor-superficie: var(--branco);
  --cor-superficie-escura: var(--verde-800);
  --cor-marca: var(--verde-500);
  --cor-marca-clara: var(--verde-300);
  --cor-cta: var(--ambar-500);          /* NÃO usar esta cor fora do botão */
  --cor-cta-hover: var(--ambar-600);
  --cor-texto: var(--tinta-900);
  --cor-texto-suave: var(--tinta-500);
  --cor-texto-claro: var(--tinta-100);
  --cor-texto-claro-suave: var(--tinta-300);
  --cor-borda: var(--cinza-200);
  --cor-borda-escura: var(--verde-700);
  --cor-erro: var(--vermelho-500);

  /* --- Tipografia (tamanhos pensados para tela de celular) --- */
  --fonte: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-hero: clamp(2rem, 8.5vw, 2.7rem);
  --fs-titulo: clamp(1.5rem, 6.2vw, 2rem);
  --fs-sub: 1.02rem;
  --fs-texto: 1rem;
  --fs-pequeno: 0.9rem;
  --fs-mini: 0.78rem;

  /* --- Espaçamento --- */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-6: 3rem;
  --esp-8: 4rem;
  --pad-secao: 3.25rem;

  /* --- Forma --- */
  --raio-sm: 10px;
  --raio: 16px;
  --raio-lg: 20px;
  --raio-cta: 20px;        /* arredondamento dos botões */
  --raio-pill: 999px;      /* só para etiquetas pequenas */
  --sombra-sm: 0 2px 10px rgb(14 26 23 / 0.06);
  --sombra: 0 10px 30px rgb(14 26 23 / 0.10);
  --sombra-cta: 0 6px 18px rgb(242 162 27 / 0.35);

  /* --- Medidas --- */
  --largura-max: 620px;    /* largura de leitura no celular e em tela grande */
  --largura-cta: 100%;     /* botões ocupam a largura toda do conteúdo */
}


/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* impede o celular de reajustar a fonte */
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-texto);
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* espaço para o botão fixo do rodapé não cobrir o conteúdo */
  padding-bottom: 92px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0 0 var(--esp-2); line-height: 1.18; letter-spacing: -0.02em; }
p { margin: 0 0 var(--esp-2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--cor-cta); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}
.container--estreito { max-width: var(--largura-max); }


/* =====================================================================
   BOTÃO — largura cheia, cantos de 20px
   A cor âmbar só aparece aqui, em nenhum outro lugar da página.
   ===================================================================== */
.botao {
  display: flex;
  width: var(--largura-cta);
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-height: 60px;
  padding: 14px var(--esp-3);
  border-radius: var(--raio-cta);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;   /* só a cor muda no toque/hover */
}
.botao--cta {
  background: var(--cor-cta);
  color: #241703;
  box-shadow: var(--sombra-cta);
}
.botao--cta:hover,
.botao--cta:active { background: var(--cor-cta-hover); }
.botao--bloco { width: 100%; }
.botao--grande { min-height: 66px; }

/* Botão em duas linhas: ação em cima, DATA DE HOJE embaixo.
   A data é preenchida sozinha pelo js/script.js — muda todo dia. */
.botao--pilha {
  flex-direction: column;
  gap: 2px;
  min-height: 68px;
  line-height: 1.2;
}
.botao__principal { font-size: 1.05rem; font-weight: 900; }
.botao__data {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0;
  opacity: .85;
}


/* =====================================================================
   TEXTOS DE APOIO (rótulo, título, subtítulo, microcopy)
   ===================================================================== */
.rotulo {
  margin: 0 0 var(--esp-1);
  font-size: var(--fs-mini);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-marca);
}
.rotulo--claro { color: var(--cor-marca-clara); }

.titulo { font-size: var(--fs-titulo); font-weight: 900; margin-bottom: var(--esp-2); }
.titulo--claro { color: var(--cor-texto-claro); }

.subtitulo-secao {
  font-size: var(--fs-sub);
  color: var(--cor-texto-claro-suave);
  margin-bottom: var(--esp-3);
}
.subtitulo-secao--escuro { color: var(--cor-texto-suave); }

.microcopy {
  margin: var(--esp-2) 0 0;
  font-size: var(--fs-mini);
  color: var(--cor-texto-suave);
  text-align: center;
}
.microcopy--clara { color: var(--cor-texto-claro-suave); }

.nota-legal {
  font-size: var(--fs-mini);
  color: var(--cor-texto-claro-suave);
  margin-top: var(--esp-3);
}
.nota-legal--escura { color: var(--cor-texto-suave); }

.cta-centro { margin-top: var(--esp-4); }

/* Fundos de seção */
.secao { padding: var(--pad-secao) 0; }
.secao--branca { background: var(--cor-fundo); }
.secao--clara { background: var(--cor-fundo-claro); }
.secao--escura,
.secao--oferta { background: var(--cor-fundo-escuro); color: var(--cor-texto-claro); }


/* =====================================================================
   BARRA DO TOPO (lote + relógio)
   ===================================================================== */
.barra-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px var(--esp-2);
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-claro);
  font-size: var(--fs-mini);
  text-align: center;
}
.barra-lote strong { color: var(--cor-marca-clara); letter-spacing: 0.06em; }
.barra-lote__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  background: rgb(255 255 255 / 0.10);
  border-radius: var(--raio-sm);
  padding: 2px 8px;
}


/* =====================================================================
   SEÇÃO 1 — HERO
   Ordem na tela: nota → headline → foto → preço → botão → garantias
   ===================================================================== */
.hero {
  padding: var(--esp-4) 0 var(--esp-4);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--verde-100) 0%, transparent 65%),
    var(--cor-fundo);
}
.hero__conteudo { display: grid; justify-items: center; text-align: center; }

.selo-nota {
  display: inline-block;
  margin: 0 0 var(--esp-2);
  padding: 6px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: var(--branco);
  font-size: var(--fs-mini);
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.hero__titulo { font-size: var(--fs-hero); font-weight: 900; margin-bottom: var(--esp-2); }
.hero__titulo mark {
  background: linear-gradient(transparent 62%, var(--cor-marca-clara) 62%);
  color: inherit;
  padding: 0 2px;
}
.hero__titulo-linha2 {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--cor-texto-suave);
  letter-spacing: 0;
}

/* Foto do produto: compacta, para o preço e o botão caberem na 1ª tela */
.hero__visual { position: relative; width: 100%; display: grid; place-items: center; }
.hero__visual img { width: min(72%, 260px); position: relative; z-index: 1; }
.hero__brilho {
  position: absolute;
  inset: 10% 18% 6% 18%;
  background: radial-gradient(closest-side, rgb(23 135 107 / 0.22), transparent);
  filter: blur(4px);
  z-index: 0;
}

/* Caixa do preço — o botão abaixo tem exatamente esta largura */
.hero__oferta {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-sm);
}
.hero__oferta-label {
  font-size: var(--fs-mini);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-texto-suave);
}
.hero__oferta-preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--esp-1);
  flex-wrap: wrap;
}
.hero__oferta-preco s { color: var(--cor-texto-suave); font-size: var(--fs-pequeno); }
.hero__oferta-preco strong {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}
/* "12x de" pequeno, colado no valor da parcela */
.hero__oferta-prefixo {
  font-size: var(--fs-pequeno);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--cor-texto-suave);
}
.hero__oferta-vista { font-size: var(--fs-pequeno); color: var(--cor-texto); font-weight: 700; }
.hero__oferta-dia { font-size: var(--fs-mini); color: var(--cor-marca); font-weight: 700; }


/* =====================================================================
   SEÇÃO 2 — O QUE MUDA (cards)
   ===================================================================== */
.beneficios { display: grid; gap: var(--esp-2); }
.beneficio {
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.beneficio__icone {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--esp-2);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-verde);
  color: var(--cor-marca);
}
.beneficio__icone svg { width: 24px; height: 24px; }
.beneficio h3 { font-size: 1.1rem; font-weight: 800; }
.beneficio p { margin: 0; font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }


/* =====================================================================
   SEÇÃO 4 — COMO FUNCIONA (3 etapas)
   ===================================================================== */
.etapas { display: grid; gap: var(--esp-1); }
.etapa {
  padding: var(--esp-3);
  background: var(--cor-superficie-escura);
  border: 1px solid var(--cor-borda-escura);
  border-radius: var(--raio);
}
.etapa__topo { display: flex; align-items: center; gap: var(--esp-1); margin-bottom: var(--esp-1); }
.etapa__num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--cor-marca-clara);
  opacity: .6;
  letter-spacing: -0.04em;
}
.etapa__tag {
  padding: 4px 10px;
  border-radius: var(--raio-pill);
  background: rgb(79 196 159 / 0.14);
  color: var(--cor-marca-clara);
  font-size: var(--fs-mini);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.etapa h3 { font-size: 1.15rem; font-weight: 800; color: var(--cor-texto-claro); }
.etapa p { margin: 0; font-size: var(--fs-pequeno); color: var(--cor-texto-claro-suave); }
.etapa__seta {
  justify-self: center;
  color: var(--cor-marca-clara);
  font-size: 1.3rem;
  opacity: .55;
}

.caixa-mecanismo {
  margin-top: var(--esp-3);
  padding: var(--esp-3);
  border-radius: var(--raio);
  border: 1px dashed var(--cor-marca);
  background: rgb(23 135 107 / 0.12);
  font-size: var(--fs-sub);
  color: var(--cor-texto-claro);
}
.caixa-mecanismo__label {
  display: block;
  margin-bottom: var(--esp-1);
  font-size: var(--fs-mini);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-marca-clara);
}


/* =====================================================================
   SEÇÃO 4 — DEPOIMENTOS EM VÍDEO (arrasta para o lado)
   Cada vídeo ocupa quase a tela toda e "encaixa" ao arrastar.
   ===================================================================== */
.video-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--esp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--esp-1);
  /* deixa o primeiro e o último vídeo alinhados com o resto da página */
  scroll-padding-inline: 0;
}
.video-slider::-webkit-scrollbar { display: none; }

/* Só o vídeo: sem moldura, sem fundo, sem borda */
.video-slide {
  scroll-snap-align: center;
  /* espaço reservado (vídeo em pé) para nada pular quando o player carrega */
  min-height: 62vw;
}
.video-slide vturb-smartplayer {
  display: block;
  border-radius: var(--raio);
  overflow: hidden;
}

/* Bolinhas embaixo: mostram em qual vídeo a pessoa está */
.video-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--esp-2);
}
.video-slider__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cor-borda);
}
.video-slider__dots span.is-ativo { background: var(--cor-marca); }


/* =====================================================================
   SEÇÃO 6 — LINHA DO TEMPO
   ===================================================================== */
.linha-tempo { display: grid; gap: var(--esp-2); }
.linha-tempo li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.linha-tempo__num {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cor-marca);
  color: var(--branco);
  font-weight: 900;
}
.linha-tempo h3 { font-size: 1.06rem; font-weight: 800; margin-bottom: 4px; }
.linha-tempo p { margin: 0; font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }


/* =====================================================================
   SEÇÃO 6 — COMPARAÇÃO
   Tabela de 2 colunas (os outros × o NAC). Compacta: cabe na tela do
   celular sem rolar para o lado e sem virar uma lista comprida.
   ===================================================================== */
.tabela {
  width: 100%;
  margin-top: var(--esp-3);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--fs-mini);
}

/* Coluna da esquerda (as perguntas) ocupa quase metade da largura */
.tabela th[scope="row"] {
  width: 40%;
  text-align: left;
  font-size: var(--fs-mini);
  font-weight: 700;
  color: var(--cor-texto);
  padding: 12px var(--esp-1) 12px 0;
  border-bottom: 1px solid var(--cor-borda);
  line-height: 1.3;
}

/* Cabeçalho das duas colunas de comparação */
.tabela thead th {
  padding: var(--esp-1) 6px;
  font-size: var(--fs-mini);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cor-texto-suave);
  text-align: center;
  vertical-align: bottom;
}
.tabela thead th.col-destaque {
  color: var(--cor-marca);
  background: var(--cor-fundo-verde);
  border-radius: var(--raio-sm) var(--raio-sm) 0 0;
}

/* Células de resposta */
.tabela tbody td {
  padding: 12px 6px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  line-height: 1.3;
}
/* A coluna do NAC fica destacada de cima a baixo */
.tabela tbody td.col-destaque {
  background: var(--cor-fundo-verde);
  color: var(--cor-texto);
  font-weight: 800;
}
.tabela tbody tr:last-child td.col-destaque { border-radius: 0 0 var(--raio-sm) var(--raio-sm); }

.tabela .sim { display: block; color: var(--cor-marca); font-weight: 900; font-size: 1rem; }
.tabela .nao { display: block; color: var(--cor-erro); font-weight: 900; font-size: 1rem; }


/* =====================================================================
   SEÇÃO 8 — QUEM USA, CONTA
   ===================================================================== */
.nota-geral {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-3);
  margin-bottom: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.nota-geral__bloco { text-align: center; }
.nota-geral__numero { display: block; font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.nota-geral__estrelas { display: block; color: var(--cor-cta); letter-spacing: 2px; }
.nota-geral__contagem { display: block; font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }
.nota-geral__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-1); text-align: center; }
.nota-geral__stats strong { display: block; font-size: 1.1rem; font-weight: 900; color: var(--cor-marca); }
.nota-geral__stats span { font-size: var(--fs-mini); color: var(--cor-texto-suave); line-height: 1.3; }

.depoimentos { display: grid; gap: var(--esp-2); }
.depoimento {
  margin: 0;
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.depoimento__estrelas { color: var(--cor-cta); letter-spacing: 2px; margin-bottom: var(--esp-1); }
.depoimento blockquote { margin: 0 0 var(--esp-2); font-size: var(--fs-pequeno); font-style: italic; }
.depoimento figcaption { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap; }
.depoimento figcaption strong { display: block; font-size: var(--fs-pequeno); }
.depoimento figcaption span { font-size: var(--fs-mini); color: var(--cor-texto-suave); }
.avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cor-fundo-verde);
  color: var(--cor-marca);
  font-size: var(--fs-mini);
  font-weight: 800;
}
.verificado { margin-left: auto; color: var(--cor-marca); font-weight: 700; font-size: var(--fs-mini) !important; }

/* Fotos: arrasta para o lado (uma por vez), em vez de 3 miniaturas */
.fotos-prova {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.fotos-prova::-webkit-scrollbar { display: none; }
.fotos-prova img {
  scroll-snap-align: center;
  border-radius: var(--raio);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}


/* =====================================================================
   SEÇÃO 9 — OFERTA
   ===================================================================== */
.aviso-lote {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-3);
  margin-bottom: var(--esp-3);
  border: 1px solid var(--cor-borda-escura);
  border-radius: var(--raio);
  background: rgb(255 255 255 / 0.04);
}
/* Ícone e texto lado a lado. O texto fica dentro de um <span> para o
   negrito não quebrar a frase no meio (era o que acontecia antes). */
.aviso-lote__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-1);
  margin: 0;
  font-size: var(--fs-pequeno);
  text-align: left;
  line-height: 1.45;
}
.aviso-lote__topo svg { flex: 0 0 auto; margin-top: 3px; color: var(--cor-cta); }
.aviso-lote__topo span { flex: 1 1 auto; }
.aviso-lote__topo strong { color: var(--cor-texto-claro); white-space: nowrap; }
.aviso-lote__barra {
  display: block;
  height: 8px;
  border-radius: var(--raio-pill);
  background: rgb(255 255 255 / 0.12);
  overflow: hidden;
}
.aviso-lote__barra span {
  display: block;
  height: 100%;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--cor-marca), var(--cor-cta));
}
.aviso-lote__legenda { font-size: var(--fs-mini); color: var(--cor-texto-claro-suave); }

.kits { display: grid; gap: var(--esp-4); }
.kit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--esp-4) var(--esp-3) var(--esp-3);
  border-radius: var(--raio-lg);
  border: 1px solid var(--cor-borda-escura);
  background: var(--cor-superficie-escura);
  text-decoration: none;
  text-align: center;
}
.kit--destaque {
  border: 2px solid var(--cor-cta);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.35);
}
.kit__fita {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: var(--raio-pill);
  background: var(--cor-cta);
  color: #241703;
  font-size: var(--fs-mini);
  font-weight: 900;
  white-space: nowrap;
}
.kit__fita--secundaria { background: var(--cor-marca); color: var(--branco); }
.kit img { width: min(70%, 210px); }
.kit__nome { font-size: 1.2rem; font-weight: 800; margin: var(--esp-1) 0 0; color: var(--cor-texto-claro); }
.kit__off {
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  background: rgb(79 196 159 / 0.16);
  color: var(--cor-marca-clara);
  font-size: var(--fs-mini);
  font-weight: 900;
}
.kit__de { margin: var(--esp-1) 0 0; font-size: var(--fs-pequeno); color: var(--cor-texto-claro-suave); }
/* Número grande = valor da parcela. O "12x de" vem pequeno antes dele. */
.kit__preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--cor-texto-claro);
}
.kit__preco-prefixo {
  font-size: var(--fs-pequeno);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--cor-texto-claro-suave);
}
.kit__parcela { margin: 0; font-size: var(--fs-pequeno); font-weight: 700; color: var(--cor-texto-claro); }
.kit__dia { margin: 2px 0 var(--esp-2); font-size: var(--fs-pequeno); font-weight: 800; color: var(--cor-marca-clara); }
.kit__itens { display: grid; gap: 4px; margin-bottom: var(--esp-2); font-size: var(--fs-mini); color: var(--cor-texto-claro-suave); }
.kit__itens li::before { content: "✓ "; color: var(--cor-marca-clara); font-weight: 900; }
.kit__cartoes { width: 150px; margin-top: var(--esp-2); opacity: .85; }

.kit-unico {
  margin: var(--esp-3) 0 0;
  text-align: center;
  font-size: var(--fs-pequeno);
  color: var(--cor-texto-claro-suave);
}
.kit-unico a { color: var(--cor-marca-clara); font-weight: 700; text-decoration: underline; }

.reforcos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-1);
  margin: var(--esp-4) 0;
  text-align: center;
}
.reforcos li {
  padding: var(--esp-2) var(--esp-1);
  border-radius: var(--raio-sm);
  background: rgb(255 255 255 / 0.05);
  font-size: var(--fs-mini);
  font-weight: 600;
}
.reforcos li:last-child { grid-column: 1 / -1; }
.reforcos span { display: block; font-size: 1.2rem; margin-bottom: 2px; }

.garantia {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-radius: var(--raio-lg);
  border: 1px solid var(--cor-borda-escura);
  background: rgb(255 255 255 / 0.04);
}
.garantia__selo { text-align: center; color: var(--cor-marca-clara); }
.garantia__selo svg { width: 52px; height: 52px; margin: 0 auto; }
.garantia__selo strong { display: block; font-size: 1.3rem; font-weight: 900; }
.garantia__selo span { font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: 0.1em; }
.garantia__texto h3 { font-size: 1.2rem; font-weight: 800; color: var(--cor-texto-claro); }
.garantia__texto p { margin: 0; font-size: var(--fs-pequeno); color: var(--cor-texto-claro-suave); }

.selo-reclame { margin-top: var(--esp-3); text-align: center; }
.selo-reclame img { display: inline-block; height: 52px; width: auto; }


/* =====================================================================
   SEÇÃO 10 — SEM SEGREDO
   ===================================================================== */
.transparencia { display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.transparencia div {
  padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--cor-marca);
  background: var(--cor-fundo-claro);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.transparencia strong { display: block; font-size: var(--fs-texto); }
.transparencia span { font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }


/* =====================================================================
   SEÇÃO 11 — DÚVIDAS (abre e fecha sem JavaScript)
   ===================================================================== */
.faq { display: grid; gap: var(--esp-1); margin-top: var(--esp-3); }
.faq details {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  overflow: hidden;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  min-height: 60px;
  font-size: var(--fs-pequeno);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cor-marca);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 var(--esp-3) var(--esp-3); }
.faq details p { margin: 0; font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }


/* =====================================================================
   SEÇÃO 12 — FECHAMENTO
   ===================================================================== */
.fechamento { text-align: center; }
.fechamento__timer {
  display: grid;
  gap: 2px;
  padding: var(--esp-2);
  margin-bottom: var(--esp-3);
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda-escura);
  background: rgb(255 255 255 / 0.05);
}
.fechamento__timer span { font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cor-texto-claro-suave); }
.fechamento__timer strong { font-size: 1.9rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--cor-cta); }


/* =====================================================================
   RODAPÉ
   ===================================================================== */
.rodape { padding: var(--esp-6) 0; background: #08120F; color: var(--cor-texto-claro-suave); }
.rodape__inner { display: grid; gap: var(--esp-2); justify-items: center; text-align: center; }
.rodape__logo { width: 140px; }
.rodape__selos { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; justify-content: center; }
.rodape__selos img { height: 48px; width: auto; }
.rodape__legal { margin: 0; font-size: var(--fs-mini); line-height: 1.5; }
.rodape__copy { margin: 0; font-size: var(--fs-mini); opacity: .7; }


/* =====================================================================
   BOTÃO FIXO DO RODAPÉ + WHATSAPP
   ===================================================================== */
.cta-fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: 10px var(--esp-2) calc(10px + env(safe-area-inset-bottom));
  background: #061F19;
  border-top: 1px solid var(--cor-borda-escura);
}
.cta-fixo[hidden] { display: none; }
.cta-fixo__info { display: grid; gap: 0; color: var(--cor-texto-claro); line-height: 1.2; flex: 0 0 auto; }
.cta-fixo__label { font-size: var(--fs-mini); color: var(--cor-texto-claro-suave); }
.cta-fixo__preco { font-size: 1.2rem; font-weight: 900; }
.cta-fixo__dia { font-size: var(--fs-mini); color: var(--cor-marca-clara); }
.cta-fixo .botao {
  width: auto;
  flex: 1 1 auto;
  min-height: 52px;
  padding: 12px var(--esp-2);
  font-size: 0.95rem;
  box-shadow: none;
}

#btn-watsapp {
  position: fixed;
  right: 14px;
  bottom: 100px;   /* acima do botão fixo, para não competir com ele */
  z-index: 89;
  line-height: 0;
  opacity: .9;
}
#btn-watsapp svg { width: 52px; height: 52px; }


/* =====================================================================
   TELAS GRANDES — ajuste mínimo só para não ficar esticado.
   A página é feita para celular; aqui ela só ganha respiro e 2 colunas
   nos blocos em lista.
   ===================================================================== */
@media (min-width: 900px) {
  :root { --largura-max: 760px; }

  body { padding-bottom: 0; }

  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .depoimentos { grid-template-columns: repeat(2, 1fr); }
  .linha-tempo { grid-template-columns: repeat(1, 1fr); }
  .reforcos { grid-template-columns: repeat(3, 1fr); }
  .reforcos li:last-child { grid-column: auto; }
  .fotos-prova { grid-auto-columns: 46%; }

  .cta-fixo { display: none !important; }
  #btn-watsapp { bottom: 24px; }
}


/* =====================================================================
   V4 — POP-UP DO CUPOM ("back redirect embutido")
   Módulo copiado da colageno-verisol/meta/lp02, nas cores do NAC.
   Tudo o que é do pop-up mora daqui para baixo. Para tirar o pop-up
   da página, basta apagar o bloco <div class="sorteio"> do HTML e a
   linha do js/popup.js — o resto da página não depende disto.

   CORES: o cupom amarelo é o do módulo; o fundo da etapa 1 é o verde
   escuro da página. O âmbar continua exclusivo do botão.
   ===================================================================== */
:root {
  --cupom-fundo:   #FFD600;
  --cupom-texto:   #1A1A1A;
  --cupom-entalhe: #0B3229;  /* mesma cor do fundo da etapa 1: "recorta" o ticket */
  --cupom-destaque: #9A5A00; /* preço com desconto sobre fundo claro (âmbar escuro, legível) */
  --cupom-marcacao-txt: #6B5300;
  --sorteio-escuro-1: #10493B;
  --sorteio-escuro-2: #06231C;
}

/* ---------- CUPOM (ticket em CSS puro, igual ao back-2) ---------- */
.cupom {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: linear-gradient(160deg, #FFE45C 0%, var(--cupom-fundo) 45%, #F2BD00 100%);
  color: var(--cupom-texto);
  font-family: var(--fonte);
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  transform: rotate(-3deg);
}
.cupom::before,
.cupom::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cupom-entalhe);
  transform: translateY(-50%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.cupom::before { left: -13px; }
.cupom::after  { right: -13px; }
.cupom__esq {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  padding: 16px 10px 14px 16px;
}
.cupom__moeda { font-size: 20px; font-weight: 800; align-self: flex-start; margin-top: 8px; }
.cupom__valor { font-size: 60px; font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; }
.cupom__off   { font-size: 21px; font-weight: 900; }
.cupom__dir {
  flex: 0 0 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 24px 12px 10px;  /* 24px à direita: o entalhe come 13px do ticket */
  border-left: 2px dashed rgba(0, 0, 0, 0.35);
  text-align: center;
}
.cupom__tag { font-size: 12px; font-weight: 900; letter-spacing: 0.12em; }
.cupom__txt { font-size: 10px; font-weight: 700; line-height: 1.25; opacity: 0.8; white-space: nowrap; }

/* ---------- ESTRUTURA DO POP-UP ---------- */
.sorteio {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.sorteio[hidden] { display: none; }

.sorteio__fundo {
  position: absolute;
  inset: 0;
  background: rgba(3, 18, 14, 0.8);
  animation: sorteio-fade 0.25s ease-out;
}

.sorteio__caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cor-fundo);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: sorteio-sobe 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  outline: none;
}

.sorteio__fechar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
/* na etapa clara o X precisa de contraste */
.sorteio--etapa2 .sorteio__fechar { background: var(--cor-fundo-verde); color: var(--cor-marca); }

.sorteio__etapa { padding: 26px 18px 20px; text-align: center; }
.sorteio__etapa[hidden] { display: none; }
.sorteio__etapa--escura {
  background: radial-gradient(120% 80% at 50% 0%, var(--sorteio-escuro-1) 0%, #0B3229 55%, var(--sorteio-escuro-2) 100%);
  color: var(--cor-texto-claro);
}

/* ---------- ETAPA 1: SORTEIO ---------- */
.sorteio__contador {
  margin: 0 0 6px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--cor-marca-clara);
}
.sorteio__contador strong {
  display: inline-block;
  min-width: 3.2em;
  color: #FFFFFF;
  font-family: var(--fonte);
  font-variant-numeric: tabular-nums;
}

.sorteio__badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--cupom-fundo);
  color: var(--cupom-texto);
  font-family: var(--fonte);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  visibility: hidden;
}

.sorteio__titulo {
  margin: 0 0 18px;
  font-size: clamp(1.3rem, 6vw, 1.6rem);
  line-height: 1.2;
  color: #FFFFFF;
}
.sorteio__titulo b { color: var(--cupom-fundo); }
.sorteio__titulo span {
  display: block;
  margin-top: 6px;
  font-size: 0.9em;
  color: var(--cupom-fundo);
}

/* O conteúdo abaixo do contador só aparece depois do "sorteio" */
.sorteio__revela { opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; }
.sorteio--revelado .sorteio__revela { opacity: 1; transform: none; }
.sorteio--revelado .sorteio__badge { visibility: visible; animation: carimbo 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.sorteio--revelado .sorteio__cupom { animation: cupom-cai 0.6s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }

.sorteio__cupom { margin-bottom: 18px; }

.sorteio__texto { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.45; }
.sorteio__texto strong { color: #FFFFFF; }

.sorteio__timer {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: var(--raio-sm);
  font-size: 0.9rem;
}
.sorteio__timer span,
.sorteio__faixa span,
.cupom-chip span {
  font-family: var(--fonte);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.sorteio__timer span { color: var(--cupom-fundo); font-size: 1.05rem; }

.sorteio .botao { width: 100%; border: 0; cursor: pointer; }
.sorteio .botao__principal { font-size: 1.08rem; }

.sorteio__aviso { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--cor-marca-clara); }
.sorteio__aviso strong { color: #FFFFFF; }

/* ---------- ETAPA 2: ESCOLHA ---------- */
.sorteio__faixa {
  margin: -26px -18px 18px;
  padding: 10px 44px 10px 14px;
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-claro);
  font-size: 0.84rem;
  font-weight: 600;
}
.sorteio__faixa span { color: var(--cupom-fundo); }

.sorteio__titulo--clara { color: var(--cor-texto); margin-bottom: 4px; }
.sorteio__titulo--clara span { color: var(--cor-marca); margin-top: 2px; }

.sorteio__dica { margin: 0 0 14px; font-size: 0.9rem; color: var(--cor-texto-suave); }

.escolha { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }

.escolha__kit {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px 10px 8px;
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda);
  border-radius: 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.escolha__kit:active { transform: scale(0.98); }
.escolha__kit img { width: 60px; height: 60px; object-fit: contain; }

.escolha__info { display: flex; flex-direction: column; min-width: 0; }
.escolha__tag {
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--cor-marca);
  color: #FFFFFF;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.escolha__nome { font-family: var(--fonte); font-size: 1.05rem; font-weight: 800; color: var(--cor-marca); line-height: 1.2; }
.escolha__sub  { font-size: 0.8rem; color: var(--cor-texto-suave); line-height: 1.3; }

.escolha__preco { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.escolha__de {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  visibility: hidden;
}
.escolha__por {
  font-family: var(--fonte);
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Selo "−R$ 30" que carimba no kit escolhido */
.escolha__selo {
  position: absolute;
  top: -11px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--cupom-fundo);
  color: var(--cupom-texto);
  font-family: var(--fonte);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transform: scale(0) rotate(-12deg);
  opacity: 0;
}

/* Kit escolhido */
.escolha__kit.is-sel {
  border-color: var(--cor-cta);
  background: #FFF9EE;
  box-shadow: 0 6px 18px rgba(242, 162, 27, 0.28);
}
.escolha__kit.is-sel .escolha__de { visibility: visible; }
.escolha__kit.is-sel .escolha__por { color: var(--cupom-destaque); }
.escolha__kit.is-sel .escolha__selo { opacity: 1; transform: rotate(-6deg); animation: carimbo 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5); }

/* Dica de toque: o kit com data-dica "respira" até a pessoa escolher algo */
.escolha--dica .escolha__kit[data-dica] { animation: respira 1.6s ease-in-out infinite; }
.escolha__tag--sec { background: var(--cor-fundo-escuro); }

/* Tocou em "finalizar" sem escolher: a lista treme */
.escolha--treme { animation: treme 0.4s; }

/* Resumo da compra */
.resumo {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed var(--cor-marca-clara);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-claro);
  text-align: left;
  animation: sorteio-fade 0.3s ease-out;
}
.resumo[hidden] { display: none; }
.resumo p { margin: 0; display: flex; justify-content: space-between; gap: 8px; }
.resumo__linha { font-size: 0.86rem; color: var(--cor-texto-suave); }
.resumo__linha--cupom { color: var(--cor-marca); font-weight: 700; }
.resumo__total {
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px solid var(--cor-borda);
  font-family: var(--fonte);
  font-weight: 800;
  color: var(--cor-texto);
}
.resumo__total strong { font-size: 1.25rem; color: var(--cupom-destaque); font-variant-numeric: tabular-nums; }
.resumo__parc { justify-content: flex-end !important; font-size: 0.8rem; color: var(--cor-texto-suave); }

/* Botão ainda sem kit escolhido */
.sorteio .botao--espera,
.sorteio .botao--espera:hover { background: #C3D0CB; color: #43524D; box-shadow: none; }
.botao--pronto { animation: pulsa 1.8s ease-in-out infinite; }

/* Caixa amarela com os kits que aceitam o cupom (3, 6 e 12 frascos) */
.escolha-cupom {
  margin: 0 0 10px;
  padding: 12px 10px 12px;
  border: 2px dashed #C79E00;
  border-radius: 18px;
  background: #FFF8D6;
}
.escolha-cupom__titulo {
  margin: 0 0 12px;
  font-family: var(--fonte);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cupom-marcacao-txt);
}
.escolha-cupom .escolha { margin: 0; }
.escolha-cupom .escolha__kit { border-color: #EAD27A; }
.escolha-cupom .escolha__kit.is-sel { border-color: var(--cor-cta); }

/* 1 pote: sem cupom, de propósito discreto (uma saída, não uma opção) */
.escolha__kit--sem {
  grid-template-columns: 1fr auto;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px dashed var(--cor-borda);
  background: transparent;
}
.escolha__kit--sem .escolha__nome {
  font-family: var(--fonte);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
  text-decoration: underline;
}
.escolha__kit--sem .escolha__por { font-family: var(--fonte); font-size: 0.85rem; font-weight: 600; color: var(--cor-texto-suave); }
.escolha__kit--sem.is-sel { border-color: var(--cor-marca-clara); background: var(--cor-fundo-claro); box-shadow: none; }
.escolha__kit--sem.is-sel .escolha__por { color: var(--cor-texto-suave); }

/* Troca sugerida: 1 pote → 2 potes com cupom */
.sorteio__upsell {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px;
  border: 2px dashed #8A6A00;
  border-radius: 14px;
  background: var(--cupom-fundo);
  color: var(--cupom-texto);
  font-family: var(--fonte);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  animation: respira 1.6s ease-in-out infinite;
}
.sorteio__upsell[hidden] { display: none; }
.resumo__linha[hidden] { display: none; }

.sorteio__seguro { margin: 12px 0 0; font-size: 0.76rem; color: var(--cor-texto-suave); }

/* Confete do carimbo (criado pelo JS) */
.confete {
  position: fixed;
  z-index: 101;
  --dur: 0.9s;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  animation: confete var(--dur) cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}

/* ---------- SELO FLUTUANTE (pop-up fechado, cupom valendo) ---------- */
.cupom-chip {
  position: fixed;
  left: 12px;
  bottom: 108px;               /* mesma altura do WhatsApp, do outro lado */
  z-index: 89;
  padding: 9px 14px;
  border: 2px solid #C79E00;
  border-radius: 999px;
  background: var(--cupom-fundo);
  color: var(--cupom-texto);
  font-family: var(--fonte);
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  animation: respira 2s ease-in-out infinite;
}
.cupom-chip[hidden] { display: none; }

/* Com o cupom ativo, os cards de 3, 6 e 12 frascos ganham a faixa do cupom
   em destaque, e o botão "QUERO X FRASCOS" encolhe para segundo plano. */
.kit__cupom { display: none; }
.cupom-ativo .kit[data-cupom-kit] .kit__cupom {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 14px 12px;
  border: 2px dashed #8A6A00;
  border-radius: 14px;
  background: linear-gradient(160deg, #FFE45C 0%, var(--cupom-fundo) 50%, #F2BD00 100%);
  color: var(--cupom-texto);
  font-family: var(--fonte);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(199, 158, 0, 0.45);
  animation: respira 1.6s ease-in-out infinite;
}
.cupom-ativo .kit[data-cupom-kit] .botao {
  min-height: 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  box-shadow: none;
  opacity: 0.85;
}

/* Trava a rolagem da página com o pop-up aberto */
html.sorteio-aberto, html.sorteio-aberto body { overflow: hidden; }

/* ---------- ANIMAÇÕES ---------- */
@keyframes sorteio-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sorteio-sobe { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes carimbo { 0% { transform: scale(2.4) rotate(-18deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
@keyframes cupom-cai { 0% { transform: translateY(-40px) rotate(-14deg) scale(0.7); opacity: 0; } 100% { transform: rotate(-3deg); opacity: 1; } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes pulsa { 0%, 100% { box-shadow: var(--sombra-cta); } 50% { box-shadow: 0 0 0 7px rgba(242, 162, 27, 0.22), var(--sombra-cta); } }
@keyframes treme { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes confete {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

@media (min-width: 900px) {
  .cupom-chip { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sorteio__caixa, .sorteio__fundo, .cupom-chip,
  .escolha--dica .escolha__kit[data-dica], .botao--pronto,
  .sorteio--revelado .sorteio__badge, .sorteio--revelado .sorteio__cupom,
  .escolha__kit.is-sel .escolha__selo, .sorteio__upsell,
  .cupom-ativo .kit[data-cupom-kit] .kit__cupom { animation: none; }
  .confete { display: none; }
}