/* =========================================================
   GOMMA WELL V25 — IMPLEMENTAÇÃO DO CHECKLIST APROVADO
   (itens 🔴 obrigatórios + 🟠 importantes)
   Loaded last on purpose so it wins the cascade for the
   properties it touches. Nothing here removes markup — only
   overrides, in the same spirit as v20/v22/v23.
   ========================================================= */

/* ---------------------------------------------------------
   1) Fundo do bloco de potes no mobile (era creme/branco).
   Reaproveita o mesmo degradê do hero para manter a
   identidade da marca — só muda a cor de fundo, mais nada.
   --------------------------------------------------------- */
@media(max-width:720px){
  .mobile-first-view{
    background:linear-gradient(160deg,#1c0129 0%,#3a0a5c 45%,#7c1aa8 100%)!important;
    position:relative;
    overflow:hidden;
  }
  .mobile-first-view:before{
    content:"";
    position:absolute;
    width:280px;height:280px;
    right:-70px;top:-60px;
    border-radius:50%;
    background:#ff0a78;
    filter:blur(70px);
    opacity:.45;
    mix-blend-mode:screen;
    pointer-events:none;
  }
  .mobile-first-view:after{
    content:"";
    position:absolute;
    width:240px;height:240px;
    left:-90px;bottom:-70px;
    border-radius:50%;
    background:#91e600;
    filter:blur(70px);
    opacity:.22;
    mix-blend-mode:screen;
    pointer-events:none;
  }
  .mfv-product img{filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))}
}

/* ---------------------------------------------------------
   2) Reordenar a primeira dobra do mobile: potes → destaques
   (marquee) → institucional (hero). Mobile only — no desktop
   a ordem do DOM permanece exatamente a mesma de sempre.
   --------------------------------------------------------- */
@media(max-width:720px){
  main{display:flex;flex-direction:column}
  .mobile-first-view{order:1}
  .marquee{order:2}
  #hero{order:3}
  .quick-trust{order:4}
  .testimonials{order:7}
  .product-grid-section{order:7} /* empata com .testimonials: a ordem do DOM (nova seção logo após depoimentos) resolve o empate e garante que ela apareça entre depoimentos e a marca */
  .manifesto{order:8}
  .trust{order:10}
  .faq{order:12}
  .newsletter{order:13}
}

/* ---------------------------------------------------------
   4) "Conheça o produto" — o mesmo tratamento do Neuro Kids
   agora existe também para Melatonina e Creatina, e passa a
   aparecer em TODAS as telas (antes só existia no mobile).
   Reaproveita 100% das classes já usadas pelo nk-showcase
   (nk-eyebrow, nk-title, nk-lead, nk-features, nk-feature,
   nk-link) — os três blocos usam as mesmas classes, então
   compartilham a mesma tipografia sem duplicar CSS.
   --------------------------------------------------------- */
.manifesto-list{display:none}

.nk-showcase{
  display:block;
  margin-top:8px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);
}
.nk-showcase:first-of-type{margin-top:30px}

.nk-eyebrow{
  margin:0 0 10px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lime);
}
.nk-title{
  margin:0 0 12px;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
}
.nk-lead{
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
.nk-features{margin-top:22px}
.nk-feature{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.14);
  opacity:0;
  transform:translateX(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.nk-feature.visible{opacity:1;transform:none}
.nk-feature:nth-child(2){transition-delay:.06s}
.nk-feature:nth-child(3){transition-delay:.12s}
.nk-feature:nth-child(4){transition-delay:.18s}
.nk-feature span{font-size:11px;font-weight:950;color:var(--lime)}
.nk-feature h4{margin:0 0 5px;font-size:14.5px;line-height:1.28;font-weight:900;color:#fff}
.nk-feature p{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.58)}
.nk-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-size:13px;
  font-weight:900;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.nk-link span{font-size:14px}

/* Ajuste fino só em telas largas, pra não ficar pequeno
   dentro da coluna do manifesto no desktop. */
@media(min-width:1101px){
  .nk-title{font-size:33px}
  .nk-lead{font-size:16px}
  .nk-feature h4{font-size:16px}
  .nk-feature p{font-size:13.5px}
}

/* ---------------------------------------------------------
   7) Cartão de quantidade/preço (antes em seção própria)
   agora dentro de cada "Conheça o produto" — reaproveita
   .qty-kit-card tal como já existia, só muda de contexto.
   Pequeno ajuste pra funcionar bem sobre fundo escuro.
   --------------------------------------------------------- */
.nk-showcase .qty-kit-card{margin:26px 0 6px;background:var(--paper);color:var(--ink)}