/* ==========================================================================
   OFERTA STRONG PEAK — folha própria da /blog1 da Alfa Nutra
   Criada em 03/11/2026.

   DE ONDE VEIO CADA COISA
     · O CONTEÚDO é da strongpeak.store/vsl: os três kits, os preços, as
       fotos dos potes, os selos, a garantia e o disclaimer.
     · A IDENTIDADE E O ALINHAMENTO são da honeyfil.store/dtc: fundo preto,
       amarelo da marca, cartão escuro de canto 20px com faixa de topo,
       grade de três colunas de 383px com 34px de vão, tudo centralizado.

   POR QUE UMA FOLHA NOVA E NÃO A gelatin-blog1.css. Aquela é a oferta da
   gelatina inteira, com .gelatin em cada seletor. Esta oferta não é a
   mesma e não divide uma linha com ela — mexer lá mexeria num bloco que
   não é mais o desta página.

   O #pitch PERDEU A CLASSE .gelatin de propósito: era ela que prendia as
   regras daquela folha. Sem ela, nada de lá alcança este bloco.

   ESTA FOLHA É SÓ DESTA PÁGINA. Nada aqui é compartilhado.
   ========================================================================== */

/* ===== TOKENS =============================================================
   Lidos do honeyfil no navegador, um a um, e não copiados de olho.         */
.oferta-sp{
  --sp-preto:       #101010;   /* fundo da seção e do cartão comum         */
  --sp-preto-2:     #0B0A0A;   /* faixa do cronômetro                      */
  --sp-preto-3:     #050505;   /* rodapé                                   */
  --sp-cartao-best: #282828;   /* fundo do cartão campeão                  */
  --sp-amarelo:     #FFD902;   /* amarelo da marca                         */
  --sp-amarelo-2:   #FFDC17;   /* o do cronômetro, um fio mais claro       */
  --sp-texto:       #CFCFCF;
  --sp-branco:      #FFFFFF;
  --sp-borda:       rgba(255,255,255,.2);
  --sp-creme:       #FFF8EB;   /* fundo claro da área dos kits             */
  --sp-tinta:       #211915;   /* texto sobre o creme, e o bloco de garantia */
  --sp-sans:        "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ===== BASE DO BLOCO ====================================================== */
.oferta-sp{
  font-family:var(--sp-sans);
  color:var(--sp-texto);
  background:var(--sp-creme);
  text-align:center;
}
.oferta-sp *{ box-sizing:border-box; }
.oferta-sp img{ max-width:100%; }
/* O recuo lateral mora no container e não nas seções: assim as faixas
   pretas sangram de borda a borda e só o conteúdo respeita a margem. */
.oferta-sp__container{
  width:100%;
  max-width:1218px;
  margin:0 auto;
  padding-inline:16px;
}

/* ===== [SP1] FAIXA DO CRONÔMETRO ==========================================
   A seta amarela embaixo é ::after com a arte do honeyfil. Ela fica METADE
   fora da faixa (bottom negativo) — é o que dá o efeito de bico apontando
   para os potes. O z-index tira ela de baixo do bloco seguinte.           */
.oferta-sp__faixa{
  position:relative;
  padding:20px 0 24px;
  background:var(--sp-preto-2);
  color:var(--sp-branco);
}
.oferta-sp__faixa::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-19px;
  z-index:2;
  width:161px;
  height:39px;
  transform:translateX(-50%);
  background:url("../../img/oferta-sp/divisor.svg") no-repeat center/contain;
}
.oferta-sp__chamada{
  margin:0 0 10px;
  font-size:clamp(20px, 4.4vw, 28px);
  font-weight:400;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--sp-branco);
}
.oferta-sp__chamada strong{ font-weight:800; }
/* O relógio é imagem de fundo do ::before, como no original: assim o número
   e o ícone ficam na mesma linha de base sem truque de alinhamento. */
.oferta-sp__relogio{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:clamp(44px, 11vw, 72px);
  font-weight:700;
  line-height:1;
  color:var(--sp-amarelo-2);
  font-variant-numeric:tabular-nums;   /* o número não dança a cada segundo */
}
.oferta-sp__relogio::before{
  content:"";
  width:.9em;
  height:.9em;
  background:url("../../img/oferta-sp/clock.svg") no-repeat center/contain;
}

/* ===== [SP2] ESTOQUE ======================================================
   NÃO EXISTE NO ORIGINAL. Ficou porque é mecanismo que já rodava nesta
   página: o rodarToasts() desconta deste número a cada compra anunciada.
   Tirar o elemento não quebra nada — o baixarEstoque() devolve null quando
   não acha —, mas apaga a escassez. Para tirar, apague o bloco inteiro.  */
.oferta-sp__estoque{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:26px auto 0;
  padding:9px 16px;
  border:1px solid rgba(33,25,21,.16);
  border-radius:999px;
  background:#fff;
  font-size:14px;
  color:var(--sp-tinta);
}
.oferta-sp__estoque__ponto{
  width:8px; height:8px;
  border-radius:50%;
  background:#D40E14;
  animation:spPulsa 1.8s ease-in-out infinite;
}
.oferta-sp__estoque strong{ font-weight:800; }
@keyframes spPulsa{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){
  .oferta-sp__estoque__ponto{ animation:none; }
}

/* ===== [SP3] ÁREA DOS KITS ================================================ */
.oferta-sp__kits{
  padding:40px 0;
  background:var(--sp-creme);
}
.oferta-sp__titulo{
  margin:0 auto 6px;
  max-width:620px;
  font-size:clamp(21px, 4.4vw, 24px);
  font-weight:700;
  line-height:1.3;
  color:var(--sp-tinta);
}
.oferta-sp__sub{
  margin:0 0 28px;
  font-size:clamp(15px, 3.4vw, 18px);
  color:var(--sp-tinta);
}

/* A GRADE. Três colunas fixas de 383px no desktop, como no honeyfil, e uma
   coluna no celular. justify-content:center é o que mantém o conjunto no
   meio quando sobra espaço — com 1fr as colunas esticariam e o cartão
   perderia a proporção das fotos. */
.oferta-sp__lista{
  display:grid;
  grid-template-columns:repeat(3, 383px);
  justify-content:center;
  gap:34px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (max-width:1240px){
  .oferta-sp__lista{ grid-template-columns:repeat(2, minmax(0,383px)); }
}
@media (max-width:820px){
  .oferta-sp__lista{ grid-template-columns:minmax(0,383px); gap:24px; }
}

/* ===== [SP4] CARTÃO ======================================================= */
.oferta-sp__kit{ margin:0; }
/* O cartão inteiro é um link: a área clicável é tudo, não só o botão. O
   overflow:hidden é o que faz a faixa de topo herdar o canto arredondado. */
.oferta-sp__kit > a{
  display:block;
  overflow:hidden;
  border:1px solid var(--sp-borda);
  border-radius:20px;
  background:var(--sp-preto);
  box-shadow:0 8px 16px rgba(0,0,0,.10);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.oferta-sp__kit > a:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(0,0,0,.22);
}
@media (prefers-reduced-motion:reduce){
  .oferta-sp__kit > a{ transition:none; }
  .oferta-sp__kit > a:hover{ transform:none; }
}

/* A FAIXA DE TOPO. No cartão comum é um degradê cinza-branco-cinza, que é o
   que dá o brilho de metal do original; no campeão é o amarelo chapado. */
.oferta-sp__kit__faixa{
  padding:16px 5px;
  background:linear-gradient(90deg,#999 0%,#fff 50%,#999 100%);
  color:#010101;
  font-size:18px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.oferta-sp__kit--best > a{
  border:2px solid var(--sp-amarelo);
  background:var(--sp-cartao-best);
}
.oferta-sp__kit--best .oferta-sp__kit__faixa{
  background:var(--sp-amarelo);
}

.oferta-sp__kit__corpo{ padding:16px 12px 0; }
.oferta-sp__kit__qtd{
  display:block;
  font-size:24px;
  font-weight:800;
  color:var(--sp-branco);
}
.oferta-sp__kit__supply{
  display:block;
  margin-top:2px;
  font-size:14px;
  text-transform:uppercase;
  color:var(--sp-texto);
}

/* A ÁREA DA FOTO. position:relative porque os dois selos — frete grátis à
   esquerda, economia à direita — são absolutos sobre ela. */
.oferta-sp__kit__figura{
  position:relative;
  margin:10px 0 4px;
  min-height:186px;
  display:grid;
  place-items:center;
}
.oferta-sp__kit__potes{
  width:auto;
  max-width:100%;
  height:186px;
  object-fit:contain;
}
.oferta-sp__kit__frete{
  position:absolute;
  left:0;
  bottom:26%;
  z-index:2;
  width:clamp(50px, 34%, 110px);
}
/* O selo de economia é a arte de explosão com o número por cima. O grid de
   uma célula empilha os três textos sem altura cravada. */
.oferta-sp__kit__save{
  position:absolute;
  right:4%;
  bottom:24%;
  z-index:2;
  display:grid;
  place-content:center;
  width:72px;
  height:72px;
  background:url("../../img/oferta-sp/save.svg") no-repeat center/contain;
  color:#fff;
  line-height:1;
  transform:rotate(-8deg);
}
.oferta-sp__kit__save small{ display:block; font-size:9px; font-weight:700; text-transform:uppercase; }
.oferta-sp__kit__save b{ display:block; font-size:17px; font-weight:800; }

.oferta-sp__kit__rodape{ padding:0 12px 20px; }
.oferta-sp__kit__preco{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  margin-bottom:12px;
}
.oferta-sp__kit__preco strong{
  font-size:50px;
  font-weight:800;
  line-height:1;
  color:var(--sp-branco);
}
.oferta-sp__kit__preco span{ font-size:15px; color:var(--sp-texto); }

/* OS BENEFÍCIOS. Lista alinhada à ESQUERDA dentro de um cartão centralizado
   — é assim no honeyfil, e é o que impede a lista de três itens de virar
   três linhas soltas no meio. A largura fixa é o que mantém as três colunas
   com o mesmo recuo. */
.oferta-sp__kit__itens{
  display:grid;
  gap:4px;
  width:min(314px, 100%);
  margin:0 auto 12px;
  padding:0;
  list-style:none;
  text-align:left;
}
.oferta-sp__kit__itens li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--sp-texto);
}
.oferta-sp__kit__itens li::before{
  content:"";
  flex-shrink:0;
  width:16px; height:16px;
  background:url("../../img/oferta-sp/checkverde.svg") no-repeat center/contain;
}
/* Cada kit tem o seu marcador, como no original: vermelho no básico,
   amarelo no intermediário, verde no campeão. É o que faz a leitura de
   cima para baixo parecer uma escada em vez de três listas iguais. */
.oferta-sp__kit--starter .oferta-sp__kit__itens li::before{
  background-image:url("../../img/oferta-sp/checkvermelho.svg");
}
.oferta-sp__kit--standard .oferta-sp__kit__itens li::before{
  background-image:url("../../img/oferta-sp/chekamarelo.svg");
}

.oferta-sp__kit__botao{ display:block; width:171px; margin:0 auto 10px; }
.oferta-sp__kit__bandeiras{ width:171px; margin:0 auto 14px; display:block; }
.oferta-sp__kit__total{
  margin:0;
  font-size:16px;
  color:var(--sp-texto);
}
.oferta-sp__kit__total s{ opacity:.75; margin-right:6px; }
.oferta-sp__kit__total b{ color:var(--sp-branco); font-weight:800; }

.oferta-sp__selos{
  display:block;
  width:min(920px, 100%);
  margin:28px auto 0;
  height:auto;
}

/* ===== [SP5] GARANTIA ===================================================== */
.oferta-sp__garantia{ padding:0 0 40px; background:var(--sp-creme); }
.oferta-sp__garantia__bloco{
  display:flex;
  align-items:center;
  gap:24px;
  padding:32px 24px;
  border-radius:20px;
  background:var(--sp-tinta);
  text-align:left;
}
.oferta-sp__garantia__selo{ flex-shrink:0; width:clamp(120px, 22vw, 200px); height:auto; }
.oferta-sp__garantia__olho{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--sp-branco);
}
.oferta-sp__garantia__titulo{
  margin:0 0 10px;
  font-size:clamp(20px, 4.2vw, 26px);
  font-weight:800;
  line-height:1.2;
  color:var(--sp-branco);
}
.oferta-sp__garantia__titulo span{ color:var(--sp-amarelo); }
.oferta-sp__garantia__texto{ margin:0; font-size:15px; line-height:1.55; color:#E7E3DF; }
.oferta-sp__garantia__texto b{ color:var(--sp-branco); }
/* O botão de voltar aos potes é o único elemento amarelo do bloco escuro:
   é ele que tem de puxar o olho depois do texto de garantia. */
.oferta-sp__garantia__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  padding:16px 34px;
  border-radius:50px;
  background:linear-gradient(#FFFE4A 0%, #FFD901 100%);
  color:#0E0D11;
  font-size:clamp(17px, 3.6vw, 22px);
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
}
@media (max-width:760px){
  .oferta-sp__garantia__bloco{ flex-direction:column; text-align:center; gap:16px; }
  .oferta-sp__garantia__btn{ width:100%; }
}

/* ===== [SP6] RODAPÉ ======================================================= */
/* SEM RESPIRO desde 03/11/2026: o rodapé perdeu a logo e a isenção da FDA
   e sobrou só a assinatura. Com os 36px de topo ele deixaria uma tira
   preta vazia entre a garantia e a faixa creme. */
.oferta-sp__rodape{ background:var(--sp-preto-3); padding:0; }
.oferta-sp__rodape__logo{ display:block; width:160px; margin:0 auto 22px; }
.oferta-sp__rodape__texto{
  margin:0 auto 30px;
  max-width:1000px;
  font-size:14px;
  line-height:1.4;
  color:var(--sp-branco);
}
/* O creme da assinatura é o mesmo da área dos kits: fecha o bloco com a cor
   com que ele abriu, em vez de terminar em mais um preto. */
.oferta-sp__copy{
  padding:28px 16px;
  background:#E2C677;
  color:#211915;
  font-size:15px;
}
.oferta-sp__copy p{ margin:0; }

/* ===== [SP7] BARRA FIXA DO CELULAR ========================================
   REESCRITA DO ZERO em 03/11/2026, e não é capricho: a estrutura inteira
   desta barra morava em .gelatin .sticky-mobile-cta, na gelatin-blog1.css.
   A classe .gelatin saiu do #pitch com a oferta nova, e com ela foram o
   position:fixed, o flex e o botão. Sobrou um <div> comum com um link
   sublinhado — era isso que aparecia na tela. Aqui ela existe por conta
   própria e não depende de folha nenhuma.

   SÓ NO CELULAR. Acima de 760px os três cartões cabem na tela e a barra
   vira estorvo: tapa o rodapé e não resolve nada.

   ESCONDIDA POR transform, e não por display: assim ela DESLIZA para
   dentro quando o vigiarCtaFixa() põe a classe .visible. Com display:none
   a entrada seria um salto.

   O env(safe-area-inset-bottom) é o que a mantém acima da barra do
   navegador no iPhone — sem ele o botão fica metade embaixo da barra do
   Safari, que é exatamente onde o dedo não alcança.                     */
.oferta-sp .sticky-mobile-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--sp-preto-2);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -6px 18px rgba(0,0,0,.45);
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.oferta-sp .sticky-mobile-cta.visible{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .oferta-sp .sticky-mobile-cta{ transition:none; }
}
@media (min-width:761px){
  .oferta-sp .sticky-mobile-cta{ display:none; }
}

/* O preço à esquerda, o botão à direita. O min-width:0 no texto é o que
   permite ele encolher antes de empurrar o botão para fora da tela. */
.oferta-sp .sticky-inner{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:520px;
  margin:0 auto;
}
.oferta-sp .sticky-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left;
  line-height:1.2;
}
.oferta-sp .sticky-info strong{
  font-size:15px;
  font-weight:800;
  color:var(--sp-branco);
  white-space:nowrap;
}
.oferta-sp .sticky-shipping{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--sp-amarelo);
}
/* O botão empurra a si mesmo para a direita com margin-left:auto, em vez
   de um space-between no pai: assim o texto manda na largura e o botão
   fica com o que sobra, nunca o contrário. */
.oferta-sp .sticky-btn{
  flex-shrink:0;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:13px 20px;
  border-radius:999px;
  background:linear-gradient(#FFFE4A 0%, #FFD901 100%);
  color:#0E0D11;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;          /* era sublinhado: <a> sem estilo nenhum */
  box-shadow:0 3px 10px rgba(255,217,1,.28);
}
.oferta-sp .sticky-btn:active{ transform:translateY(1px); }

/* Com a barra na tela, o último bloco da página ficava embaixo dela. O
   respiro só existe no celular, que é onde a barra existe. */
@media (max-width:760px){
  .oferta-sp__copy{ padding-bottom:88px; }
}