/* ==========================================================================
   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);

  /* ----- A CHAPA METÁLICA, lida da strongpeak.store/vsl em 05/11/2026 -----
     As paradas quebradas são da referência e não são enfeite: é a distância
     desigual entre os brilhos que lê como metal escovado. Arredondá-las
     para 25/50/75 devolve um gradiente comum. */
  --sp-prata:       linear-gradient(90deg,#A3A3A3 0%,#FFF 24.519%,#A3A3A3 45.192%,#FFF 66.346%,#A3A3A3 100%);
  --sp-ouro:        linear-gradient(270deg,#FDEFA5 0%,#CB9043 28.125%,#FDEFA5 56.875%,#CB9043 100%);
  --sp-ouro-claro:  #FDEFA5;   /* a moldura do campeão                     */
  /* O BRONZE, 05/11/2026: mesma geometria da prata — 90deg e as mesmas
     cinco paradas quebradas —, só trocando os dois tons. É o que faz os
     três metais parecerem o mesmo material sob a mesma luz.
     #B5793F e não um bronze mais fechado por causa do texto preto da
     tarja: este dá 5,7:1 de contraste, na faixa da prata e do ouro; um
     #8C5A30 cairia para 3,3:1. */
  --sp-bronze:      linear-gradient(90deg,#B5793F 0%,#F2DCC0 24.519%,#B5793F 45.192%,#F2DCC0 66.346%,#B5793F 100%);
  --sp-cartao-best-topo: #786937;  /* o alto do degradê do cartão campeão  */
  --sp-preto-ref:   #0E0D11;   /* o preto dos cartões comuns, de lá        */
  --sp-borda-ref:   #515151;   /* a borda dos cartões comuns, de lá        */
  --sp-creme:       #FFFBF2;   /* fundo claro da área dos kits             */
  /* CLAREADO UM PASSO EM 05/11/2026, a pedido: era #FFF8EB. O token é um
     só e vale para a área dos kits E para a faixa da garantia — as duas
     clareiam juntas, que é o certo: são a mesma superfície vista pela
     pessoa, e separá-las criaria uma emenda visível entre as seções. */
  --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 LISTA. GRADE DE TRÊS COLUNAS IGUAIS, e isto é o contrário do que o
   Strong Peak pedia. Lá o campeão era mais largo que os vizinhos (454
   contra 390) e por isso a lista tinha de ser flex; aqui os três medem o
   mesmo — conferi no honeyfil: 383px cada, campeão incluído. Com larguras
   iguais, grade é o instrumento certo e dispensa o flex-basis de cada um.

   align-items:flex-end alinha os três pelo RODAPÉ. Como as fotos ganharam
   caixa de altura fixa (ver [SP4]), os três acabam com a mesma altura e o
   alinhamento não tem trabalho — mas fica, porque é ele que segura o
   desenho se um cartão um dia crescer. */
.oferta-sp__lista{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
  align-items:flex-end;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0;
  list-style:none;
}

/* ===== [SP4] CARTÃO =======================================================
   Desenho do honeyfil.store/dtc, medido no navegador. O cartão é uma COLUNA
   simples — faixa, miolo, rodapé —, e não a grade de áreas que o Strong
   Peak usava.
========================================================================== */
.oferta-sp__kit{
  margin:0;
  list-style:none;
}
.oferta-sp__kit > a{
  /* EMPILHADO NO DESKTOP, DEITADO NO CELULAR — voltou assim em 05/11/2026,
     a pedido. Entre de manhã e agora esta regra foi grade de duas colunas
     em toda largura; o desenho empilhado é o do print do honeyfil, que é
     de onde este cartão veio.
     Quem deita o cartão abaixo de 900px é o @media lá embaixo, como sempre
     foi. */
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
  border:1px solid var(--sp-borda-ref);
  /* 10px: É O RAIO DA PRÓPRIA REFERÊNCIA — o header dela tem
     border-radius:10px 10px 0 0. Esta folha passou por 20px (demais) e por
     0 (reto demais) antes de parar aqui.
     Quem faz a tarja metálica respeitar o canto é o overflow:hidden logo
     abaixo; sem ele o degradê vaza pelos quatro cantos. */
  border-radius:10px;
  /* overflow:hidden segura a faixa e o selo de economia dentro do cartão. */
  overflow:hidden;
  background:var(--sp-preto-ref);
  box-shadow:0 8px 16px rgba(0,0,0,.1);
  color:var(--sp-texto);
  text-align:center;
  text-decoration:none;
  transition:all .6s;
}
.oferta-sp__kit > a:hover{ border-color:#e2c677; }

/* ------ a faixa do topo ------
   Degradê prateado nos comuns. No honeyfil o amarelo do campeão vem num
   style= no próprio HTML; aqui ele é regra, que é onde cor mora. */
.oferta-sp__kit__faixa{
  width:100%;
  padding:16px 5px;
  background:var(--sp-prata);
  color:#010101;
  font-size:24px;
  font-weight:500;
  line-height:normal;
  text-align:center;
  text-transform:uppercase;
}

/* ------ o campeão ------ */
.oferta-sp__kit--best{ transition:all .7s; }

/* ------ O LEVANTE DO CAMPEÃO (09/11/2026) ------
   28px A MAIS NA CAIXA DA FOTO, e não um scale. transform não ocupa
   espaço: a primeira versão desta regra ampliava o cartão e os pixels
   extras iam por cima do subtítulo "Sélectionnez le pack…", porque a
   grade continuava reservando o tamanho antigo. Altura é layout de
   verdade — a linha da grade cresce junto e o respiro de cima fica.
   COMO OS TRÊS SE ALINHAM PELO RODAPÉ, os 28px aparecem todos em cima,
   que é o levante. Só no desktop: abaixo de 900px a lista é de uma coluna
   e a caixa da foto é livre (ver [SP4c]). */
@media (min-width:901px){
  .oferta-sp__kit--best .oferta-sp__kit__figura{ height:320px; }
}

/* O HOVER SÓ COM PONTEIRO DE VERDADE. No celular o toque entra como hover
   e GRUDA: o cartão ficava ampliado por cima do texto de cima. Esta
   consulta é o teste que separa mouse de dedo. */
@media (hover:hover) and (pointer:fine){
  .oferta-sp__kit--best:hover{ transform:scale(1.03); }
}
.oferta-sp__kit--best > a{
  /* 3px, e não 2: na referência a moldura do campeão é mais grossa que a
     linha dos comuns, e é essa diferença que faz o cartão do meio pesar
     mais antes de qualquer texto ser lido. */
  border:3px solid var(--sp-ouro-claro);
  /* SÓ A TARJA DE CIMA É DOURADA, a pedido (05/11/2026). O fundo era um
     degradê marrom->preto copiado da referência e dourava o cartão
     inteiro. Volta a ser o mesmo preto dos outros dois; a moldura fica,
     porque é ela que marca o campeão à distância. */
  background:var(--sp-preto-ref);
}
.oferta-sp__kit--best .oferta-sp__kit__faixa{
  background:var(--sp-ouro);
  font-weight:700;
}

/* ------ o de 2 flacons ------
   BRONZE NA TARJA, a pedido (05/11/2026), para os três virarem medalha:
   ouro no de 6, prata no de 3, bronze no de 2.
   SÓ A TARJA — a moldura segue o cinza dos comuns, pelo mesmo critério que
   deixou o campeão só com a tarja dourada por dentro. */
.oferta-sp__kit--starter .oferta-sp__kit__faixa{
  background:var(--sp-bronze);
}

/* ------ o miolo ------ */
.oferta-sp__kit__corpo{
  width:100%;
  padding:16px 12px 0;
}
/* ------ as cinco estrelas ------
   alt="" e aria-hidden: é enfeite, não informação. Leitor de tela que
   anunciasse "imagem" aqui só atrapalharia a leitura do cartão.
   62x12,5 é a medida da referência convertida para a nossa caixa (lá o
   cartão tinha 351px de largura quando medi; aqui tem 394). */
.oferta-sp__kit__estrelas{
  display:block;
  width:62px;
  height:auto;
  /* SEM RESPIRO EM CIMA. Ele existiu enquanto o cartão era deitado, para
     alinhar as estrelas com o topo do "49 €" que ficava ao lado. Empilhado
     não há nada ao lado, e o respiro viraria um buraco entre a tarja e a
     quantidade. */
  margin:0 auto 6px;
}

.oferta-sp__kit__qtd{
  display:block;
  color:var(--sp-branco);
  font-size:40px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
}
.oferta-sp__kit__supply{
  display:block;
  margin-bottom:10px;
  color:var(--sp-texto);
  font-size:18px;
  font-weight:400;
  line-height:normal;
  text-align:center;
  text-transform:uppercase;
}

/* ------ a foto ------
   A CAIXA tem os 292px do honeyfil; a FOTO se encaixa dentro dela. No
   original é a foto que tem 292px de altura e largura livre, porque as
   artes de lá são quase quadradas. As do MagnoraX são deitadas: a de 6
   flacons teria 574px de largura contra 359 de espaço, e o overflow:hidden
   a cortaria. Com a altura na caixa, as três ficam iguais — que é o efeito
   que o 292 existe para dar — e nenhuma é cortada. */
.oferta-sp__kit__figura{
  position:relative;
  overflow:hidden;
  height:292px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.oferta-sp__kit__potes{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}

/* ------ o selo de economia ------
   Estrela vermelha com o valor. O --tam governa tudo: o fundo, a altura e
   os dois corpos de letra saem dele por calc, como no original. */
.oferta-sp__kit__save{
  --tam:80px;
  position:absolute;
  z-index:10;
  top:0;
  right:0;
  width:var(--tam);
  height:var(--tam);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:url("../../img/oferta-sp/save.svg") center/100% 100% no-repeat;
  color:var(--sp-branco);
  text-align:center;
  text-transform:uppercase;
}
/* 0,15 e não os 0,18 do original. "REMISE" e "DU JOUR" são bem mais longos
   que "Save" e "Today" — mesmo problema que o selo já teve no desenho
   anterior desta página. A 0,18 o texto passa da estrela. */
.oferta-sp__kit__save span{
  font-size:calc(var(--tam) * .15);
  font-weight:400;
  line-height:.9;
}
.oferta-sp__kit__save strong{
  font-size:calc(var(--tam) * .26);
  font-weight:700;
  line-height:1;
}

/* ------ o rodapé do cartão ------ */
.oferta-sp__kit__rodape{
  width:100%;
  padding:0 12px 20px;
}
.oferta-sp__kit__preco{
  display:flex;
  align-items:baseline;
  justify-content:center;
  margin:8px 0 18px;
  color:var(--sp-texto);
  font-size:24px;
  font-weight:400;
  line-height:normal;
}
.oferta-sp__kit__preco strong{
  color:var(--sp-branco);
  font-size:64px;
  font-weight:700;
  line-height:normal;
}

/* ------ os itens ------
   O ÍCONE VEM POR ::before, não por <img>. É assim no honeyfil, e tem uma
   vantagem: a coluna de 20px da grade reserva o lugar do ícone mesmo antes
   de o SVG chegar, então a linha não pula.
   Verde é o padrão. Vermelho e amarelo são modificadores. */
.oferta-sp__kit__itens{
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:5px;
  width:100%;
  margin:0 0 12px;
  padding:0;
  list-style:none;
  text-align:left;
}
.oferta-sp__kit__itens li{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:center;
  gap:8px;
  /* ----- A PÍLULA, medida na referência em 05/11/2026 -----
     Os valores de lá foram multiplicados por 394/351, que é a razão entre
     a nossa caixa e a dela na largura em que medi. Px cru copiado de uma
     caixa menor deixaria a pílula apertada em proporção.
     O fundo é translúcido de propósito: sobre o preto comum ele quase não
     aparece, e sobre o dourado do campeão ele escurece na medida. Fundo
     chapado precisaria de duas cores, uma por cartão. */
  padding:5px 8px;
  border:1px solid #41403E;
  border-radius:6px;
  background:rgba(34,33,27,.7);
  color:var(--sp-texto);
  font-size:18px;
  font-weight:400;
  line-height:normal;
  /* ESPACEJAMENTO ZERADO junto com a redução para 11px. Era .54px, herdado
     do desenho antigo, e em 17 letras ele sozinho come ~9px de linha — o
     bastante para "GARANTIE 60 JOURS" quebrar em duas. A referência não
     usa espacejamento nenhum nos benefícios. Medido: com .54 as alturas
     eram 40/35/40px; com 0 passam a 35/35/40. */
  letter-spacing:0;
}
.oferta-sp__kit__itens li::before{ content:url(../../img/oferta-sp/checkverde.svg); }
.oferta-sp__kit__itens li.oferta-sp__kit__item--nao::before{ content:url(../../img/oferta-sp/checkvermelho.svg); }
.oferta-sp__kit__itens li.oferta-sp__kit__item--meio::before{ content:url(../../img/oferta-sp/chekamarelo.svg); }

/* ------ o botão ------
   É um <span> e não um <button>: o cartão inteiro já é um <a>, e botão
   dentro de link é marcação inválida — o navegador desmonta o aninhamento e
   o clique passa a cair em lugares diferentes em cada um. */
.oferta-sp__kit__botao{
  position:relative;
  display:block;
  width:100%;
  margin-bottom:16px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
}
.oferta-sp__kit__botao > img:not(.oferta-sp__kit__cursor){
  display:block;
  width:100%;
  height:auto;
  /* O RAIO VAI NA IMAGEM, E NÃO NO <span> QUE A ENVOLVE. O webp é um
     retângulo amarelo de canto RETO com o botão redondo pintado dentro —
     por isso sobram quatro cantos amarelos quadrados em volta. A
     referência corta os cantos com overflow:hidden no <span>; aqui isso
     decaparia a mãozinha animada, que é position:absolute e estoura a
     borda de baixo de propósito. Cortando na própria <img>, o canto some
     e a mão fica.
     12px é o raio da referência (11,94px) na nossa caixa. */
  border-radius:12px;
}
.oferta-sp__kit__cursor{
  position:absolute;
  top:57%;
  left:50%;
}
.oferta-sp__kit--best .oferta-sp__kit__botao{
  animation:sp-pulsar alternate infinite .7s;
}
/* Nome próprio, sp-pulsar: "pulsar" é curto demais para uma folha que
   convive com outras cinco nesta página. */
@keyframes sp-pulsar{ 100%{ transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){
  .oferta-sp__kit--best .oferta-sp__kit__botao{ animation:none; }
}

.oferta-sp__kit__bandeiras{
  display:block;
  width:100%;
  margin:0 auto 16px;
}

/* ------ os totais ------ */
.oferta-sp__kit__valores{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
}
.oferta-sp__kit__valores *{
  color:var(--sp-texto);
  font-size:24px;
  font-weight:600;
  line-height:1.3;
}
.oferta-sp__kit__valores s{
  text-decoration:line-through;
  text-decoration-color:red;
}
.oferta-sp__kit__valores span{ font-weight:700; }
.oferta-sp__kit__valores .oferta-sp__kit__novo{ color:var(--sp-branco); }

/* ===== [SP4b] AS MEDIDAS DO CARTÃO ========================================
   AS MESMAS EM QUALQUER LARGURA desde 05/11/2026, a pedido: o celular usa
   o cartão do desktop, empilhado, e não há mais um desenho por largura.

   ESTAS REGRAS VIVERAM DENTRO DE @media (max-width:900px) DESDE SEMPRE,
   porque lá era o único lugar onde o cartão ficava estreito. Hoje ele tem
   ~404px no desktop (lista de 1280 com gap 34 em três colunas) e ~343px no
   celular — praticamente a mesma caixa —, então as mesmas medidas servem
   nas duas.

   APAGÁ-LAS EM VEZ DE SUBI-LAS TERIA SIDO O ERRO FÁCIL: o desktop voltaria
   à letra da folha original, com quantidade em 40px, preço em 64 e
   benefício em 18, desfazendo a redução pedida há pouco sem ninguém
   mandar.

   OS SELETORES DOBRAM A CLASSE (.oferta-sp__kit .oferta-sp__kit__x) porque
   era assim que estavam, e mexer na especificidade ao mudar de lugar é a
   forma mais fácil de quebrar uma folha sem perceber.
========================================================================== */
.oferta-sp__kit .oferta-sp__kit__corpo{ padding:16px 0; }
.oferta-sp__kit .oferta-sp__kit__qtd{ font-size:24px; }
.oferta-sp__kit .oferta-sp__kit__supply{ font-size:14px; }
/* A CAIXA DA FOTO NÃO ESTÁ AQUI — ela desceu para o @media de 900px em
   09/11/2026. Em três colunas, height:auto dava a cada cartão a altura da
   sua arte e o de 2 flacons, que é a mais quadrada, subia acima dos outros
   dois. No desktop vale o height:292px do [SP4]. */
.oferta-sp__kit .oferta-sp__kit__save{ --tam:60px; }
.oferta-sp__kit .oferta-sp__kit__preco{ font-size:14px; margin-top:16px; }
.oferta-sp__kit .oferta-sp__kit__preco strong{ font-size:50px; }
.oferta-sp__kit .oferta-sp__kit__rodape{ padding:0 10px 20px; }
.oferta-sp__kit .oferta-sp__kit__bandeiras{ width:100%; }
.oferta-sp__kit .oferta-sp__kit__valores *{ font-size:12px; }
.oferta-sp__kit .oferta-sp__kit__itens li{ display:flex; gap:8px; margin-left:0; font-size:11px; }
.oferta-sp__kit--best .oferta-sp__kit__faixa{ margin-bottom:16px; }

/* ===== [SP4c] A LISTA NO CELULAR ==========================================
   900px é o ponto do honeyfil, não um escolhido por mim. Sobrou aqui SÓ o
   que é mesmo sobre tela estreita: três colunas viram uma, e a ordem passa
   a 6/3/2. O DESENHO DO CARTÃO NÃO DEPENDE MAIS DESTA CONSULTA — é o mesmo
   acima e abaixo dos 900px.
========================================================================== */
@media (max-width:900px){
  .oferta-sp__lista{ grid-template-columns:repeat(1, 1fr); max-width:600px; gap:24px; }

  /* A ORDEM NO CELULAR: 6, 3, 2 — o campeão primeiro. Vem por grid-row, que
     só funciona porque a lista virou uma coluna de grade na linha acima. */
  .oferta-sp__kit.oferta-sp__kit--best{ grid-row:1; }
  .oferta-sp__kit.oferta-sp__kit--standard{ grid-row:2; }
  .oferta-sp__kit.oferta-sp__kit--starter{ grid-row:3; }

  /* ------ a caixa da foto solta no celular ------
     09/11/2026. Em UMA coluna não há com quem empatar altura, e a caixa
     fixa de 292px só sobraria ar em volta das artes mais deitadas. Aqui o
     cartão acompanha a arte, que é como o celular já estava e foi
     aprovado. */
  .oferta-sp__kit .oferta-sp__kit__figura{ height:auto; }
}

/* O honeyfil AUMENTA a letra do item abaixo de 370px — de 12 para 14. Parece
   engano, mas é o que a folha deles faz, e em tela estreita a linha fica
   mesmo mais legível assim. Portado como está. */
@media (max-width:370px){
  .oferta-sp__kit .oferta-sp__kit__itens li{ font-size:14px; }
}

/* ===== [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; }
}