html{
  scroll-behavior: smooth;
}



/* ===============================
   NEXUS UI – STYLE (CLEAN)
   Reutilizável (footer + header)
   =============================== */

:root{
  /* Marca (FOOTER / geral) */
 /* Marca (FOOTER / geral) – SaveFood */
--nx-brand: #C7B2A3;
--nx-brand-2: #8B6A55;


  --nx-white: #ffffff;
  --nx-white-85: rgba(255,255,255,.85);
  --nx-white-70: rgba(255,255,255,.70);
  --nx-white-25: rgba(255,255,255,.25);
  --nx-shadow: 0 10px 30px rgba(0,0,0,.18);

  --nx-radius: 14px;
  --nx-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Header (troca fácil) */
  --nx-head-bg: #ffffff;
  --nx-head-accent: #8B6A55;
  --nx-head-line: rgba(0,0,0,.08);

  /* Drawer */
  --nx-drawer-overlay: rgba(0,0,0,.45);
  --nx-drawer-bg: #ffffff;
  --nx-drawer-border: rgba(0,0,0,.08);
  --nx-drawer-item-border: rgba(0,0,0,.12);
}

/* ===============================
   HEADER (igual ao print)
   =============================== */

.nx-topbar{
  font-family: var(--nx-font);
  background: var(--nx-head-bg);
  position: sticky;
  top: 0;
  z-index: 999;
}

.nx-topbar__wrap{
  height: 64px;
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 44px auto 1fr;
  align-items: center;
  gap: 10px;
}

.nx-topbar__logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nx-topbar__logoImg{
  height: 45px; /* ajuste aqui */
  width: auto;
  display: block;
}

.nx-topbar__right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nx-topbar__secure{
  font-size: 11px;
  letter-spacing: .6px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
  text-transform: uppercase;
}

.nx-topbar__divider{
  height: 1px;
  background: var(--nx-head-line);
  width: 100%;
}

/* Burger */
.nx-burger{
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.nx-burger span{
  width: 18px;
  height: 2px;
  background: var(--nx-head-accent);
  border-radius: 10px;
  display: block;
}
.nx-burger span:nth-child(2){ width: 14px; justify-self: start; }
.nx-burger span:nth-child(3){ width: 16px; justify-self: start; }

/* ===============================
   DRAWER (menu lateral)
   Fix: tirar grid 1fr que cria “vazios”
   =============================== */

.nx-drawer{
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.nx-drawer__overlay{
  position: absolute;
  inset: 0;
  background: var(--nx-drawer-overlay);
  opacity: 0;
  transition: opacity .18s ease;
}

/* painel: agora é FLEX, não grid */
.nx-drawer__panel{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(360px, 86vw);
  background: var(--nx-drawer-bg);
  transform: translateX(-102%);
  transition: transform .2s ease;
  border-right: 1px solid var(--nx-drawer-border);

  display: flex;
  flex-direction: column;
}

/* header do drawer */
.nx-drawer__header{
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nx-drawer-border);
}

.nx-drawer__title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
  color: #222;
}

.nx-drawer__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--nx-drawer-border);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 0;
  color: #444;
}

/* conteúdo: NÃO estica, e fica no topo */
.nx-drawer__content{
  padding: 14px;
  display: grid;
  gap: 8px;          /* aqui controla proximidade */
  align-content: start;
}

/* itens: botões compactos */
.nx-drawer__item{
  text-decoration: none;
  color: #111;
  font-weight: 800;
  font-size: 14px;

  height: 44px;
  display: flex;
  align-items: center;

  padding: 0 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--nx-drawer-item-border);

  box-sizing: border-box;
}

.nx-drawer__item:hover{ background: #f6f6f6; }

/* footer do drawer sempre embaixo */
.nx-drawer__footer{
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--nx-drawer-border);
}

.nx-drawer__cta{
  height: 48px;
  display: grid;
  place-items: center;

  text-align: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;

  color: #fff;
  background: var(--nx-head-accent);
  border-radius: 14px;
}

/* Estado aberto */
.nx-drawer.is-open{ pointer-events: auto; }
.nx-drawer.is-open .nx-drawer__overlay{ opacity: 1; }
.nx-drawer.is-open .nx-drawer__panel{ transform: translateX(0); }

body.nx-lock{ overflow: hidden; }

/* ===============================
   FOOTER (Nexus)
   =============================== */

.nx-footer{
  font-family: var(--nx-font);
  color: var(--nx-white);
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, var(--nx-brand) 0%, var(--nx-brand-2) 100%);
  padding: 26px 0 0;
}

.nx-footer__container{
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding: 0 0 18px;
}

.nx-footer__col{
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--nx-radius);
  padding: 16px 16px 14px;
  box-shadow: var(--nx-shadow);
}

.nx-footer__title{
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--nx-white-25);
  padding-bottom: 10px;
}

.nx-footer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.nx-footer__item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--nx-white-85);
  line-height: 1.25;
}

.nx-footer__muted{
  margin: 10px 0 10px;
  color: var(--nx-white-70);
  font-size: 13px;
}

.nx-footer__link{
  color: var(--nx-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.nx-footer__link:hover{ opacity: .9; }

.nx-footer__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.nx-footer__menu a{
  display: inline-block;
  font-size: 13px;
  color: var(--nx-white-85);
  text-decoration: none;
  padding-left: 10px;
  position: relative;
}

.nx-footer__menu a::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--nx-white);
}

.nx-footer__menu a:hover{ color: var(--nx-white); }

.nx-footer__block{ margin-top: 14px; }

/* Ícones círculo */
.nx-icoCircle{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--nx-white);
  display: grid;
  place-items: center;
  flex: 0 0 26px;
}

.nx-icoStroke,
.nx-icoFill{
  width: 16px;
  height: 16px;
  color: var(--nx-brand);
}

.nx-icoStroke path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nx-icoFill path{ fill: currentColor; }

/* Redes sociais */
.nx-socialRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.nx-socialBtn{
  width: 34px;
  height: 34px;
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.nx-socialCircle{
  position: absolute;
  inset: 0;
  background: var(--nx-white);
  border-radius: 999px;
  opacity: .95;
}

.nx-socialIcon{
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
  fill: var(--nx-brand);
}

.nx-socialBtn:hover{ transform: translateY(-1px); }
.nx-socialBtn:active{ transform: translateY(0px); }

/* Pagamentos/verificada */
.nx-badges{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 8px;
  row-gap: 10px;
  padding: 12px 0;
  align-items: center;
}

.nx-badge{
  height: 32px;
  width: auto;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  justify-self: center;
  align-self: center;
  object-fit: contain;
  opacity: .95;
}

/* Newsletter */
.nx-news{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 10px;
}

.nx-news__input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(0,0,0,.18);
  color: var(--nx-white);
  padding: 0 12px;
  outline: none;
}

.nx-news__input::placeholder{ color: rgba(255,255,255,.70); }

.nx-news__input:focus{
  border-color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.22);
}

.nx-news__btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.95);
  color: var(--nx-brand);
  font-weight: 700;
}

.nx-news__btn:hover{ opacity: .95; }
.nx-news__btn:active{ transform: translateY(1px); }

.nx-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.20);
  padding: 14px 0 16px;
  text-align: center;
  color: var(--nx-white-85);
  font-size: 12px;
}
.nx-footer__bottom p{ margin: 4px 0; }

/* Responsivo */
@media (max-width: 820px){
  .nx-footer__container{ grid-template-columns: 1fr; }
}
/* dá espaço pra logo maior */
.nx-topbar__wrap{
  height: 72px !important;       /* antes 64 */
  align-items: center !important;
}
/* ===== POLÍTICAS (Termos / Entrega / etc) ===== */
.policy{
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  line-height: 1.65;
  color: #111;
}

.policy h1{
  text-align: center;
  font-size: 28px;
  margin: 0 0 18px;
}

.policy h2{
  font-size: 18px;
  margin: 0 0 16px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.policy h3{
  font-size: 16px;
  margin: 20px 0 10px;
}

.policy p{
  margin: 0 0 12px;
}

.policy a{
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 520px){
  .policy{
    padding: 28px 16px 44px;
  }
  .policy h1{
    font-size: 24px;
  }
}
/* ===== POLÍTICAS (Termos / Entrega / Reembolso / etc) ===== */
.policy{
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  line-height: 1.65;
  color: #111;
}

.policy h1{
  text-align: center;
  font-size: 28px;
  margin: 0 0 18px;
}

.policy h2{
  font-size: 18px;
  margin: 0 0 16px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.policy h3{
  font-size: 16px;
  margin: 20px 0 10px;
}

.policy p{
  margin: 0 0 12px;
}

.policy ul{
  margin: 8px 0 14px 18px;
  padding: 0;
}

.policy li{
  margin: 6px 0;
}

.policy a{
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 520px){
  .policy{
    padding: 28px 16px 44px;
  }
  .policy h1{
    font-size: 24px;
  }
}
/* ===== POLÍTICAS (fino e elegante) ===== */
.policy{
  max-width: 920px;
  margin: 0 auto;
  padding: 34px 18px 56px;
  line-height: 1.75;
  color: #121212;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.policy h1{
  text-align: center;
  font-size: 22px;
  margin: 6px 0 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.policy h2{
  font-size: 14px;
  margin: 18px 0 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

.policy h3{
  font-size: 14.5px;
  margin: 18px 0 8px;
  font-weight: 700;
}

.policy p{
  margin: 0 0 12px;
  color: rgba(18,18,18,.92);
}

.policy b, .policy strong{
  font-weight: 700;
}

.policy ul{
  margin: 8px 0 14px 18px;
  padding: 0;
}

.policy li{
  margin: 6px 0;
  color: rgba(18,18,18,.92);
}

.policy a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Mobile (deixa mais “premium”) */
@media (max-width: 520px){
  .policy{
    padding: 22px 16px 40px;
    font-size: 15px;
    line-height: 1.8;
  }

  .policy h1{
    font-size: 20px;
    margin-bottom: 12px;
  }

  .policy h2{
    font-size: 13px;
    margin-top: 16px;
  }

  .policy h3{
    font-size: 14px;
  }

  .policy ul{
    margin-left: 16px;
  }
}
/* ===== POLÍTICAS – PREMIUM ===== */
.policy{
  max-width: 920px;
  margin: 24px auto 60px;
  padding: 34px 22px 44px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 6px 20px rgba(0,0,0,.04),
    0 1px 3px rgba(0,0,0,.05);
  line-height: 1.75;
  color: #121212;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}

.policy h1{
  text-align: center;
  font-size: 22px;
  margin: 6px 0 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.policy h2{
  font-size: 13.5px;
  margin: 20px 0 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

.policy h3{
  font-size: 14.5px;
  margin: 18px 0 8px;
  font-weight: 700;
}

.policy p{
  margin: 0 0 12px;
  color: rgba(18,18,18,.92);
}

.policy ul{
  margin: 8px 0 14px 18px;
}

.policy a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Mobile refinado */
@media (max-width: 520px){
  .policy{
    margin: 14px 12px 40px;
    padding: 22px 16px 34px;
    font-size: 15px;
    line-height: 1.8;
    border-radius: 12px;
  }

  .policy h1{ font-size: 20px; }
  .policy h2{ font-size: 13px; }
}
/* ===== TÍTULO COM LINHA SUTIL (NEXUS) ===== */
.policy h1{
  position: relative;
  text-align: center;
  font-size: 22px;
  margin: 6px 0 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.policy h1::after{
  content: "";
  display: block;
  width: 48px;                 /* comprimento da linha */
  height: 2px;                 /* espessura fina */
  margin: 10px auto 0;
  border-radius: 2px;
  background: #8B6A55;        /* vermelho NEXUS */
  opacity: .85;
}

/* Mobile refinado */
@media (max-width: 520px){
  .policy h1{
    font-size: 20px;
    margin-bottom: 18px;
  }

  .policy h1::after{
    width: 40px;
    height: 2px;
    margin-top: 8px;
  }
}
  :root{
    /* Paleta da loja (SaveFood) */
    --nx-brand:#C7B2A3;    /* bege */
    --nx-brand-2:#8B6A55;  /* marrom */

    --sf-bg:#F5F2EF;
    --sf-title:#2F2F2F;
    --sf-text:#6B6B6B;
  }

  .sf-hero{
    background:
      radial-gradient(900px 520px at 12% -10%, rgba(199,178,163,.40), transparent 60%),
      radial-gradient(760px 480px at 92% 10%, rgba(139,106,85,.18), transparent 62%),
      var(--sf-bg);
    padding: 34px 16px 18px;
  }

  .sf-hero__wrap{
    max-width: 1060px;
    margin: 0 auto;
  }

  .sf-hero__grid{
    display: grid;
    gap: 18px;
    align-items: center;
  }

  .sf-hero__kicker{
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .22px;
    color: rgba(47,47,47,.62);
  }

  .sf-hero__title{
    margin: 0 0 10px;
    font-size: clamp(30px, 6.8vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.8px;
    font-weight: 950;
    color: var(--sf-title);
  }

  .sf-hero__sub{
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sf-text);
    max-width: 52ch;
  }

  .sf-hero__cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: min(360px, 100%);
    padding: 14px 16px;
    border-radius: 999px;
    background: var(--nx-brand-2);
    color: #fff;
    font-weight: 900;
    letter-spacing: .2px;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 16px 30px rgba(139,106,85,.22);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .sf-hero__cta:hover{
    background: #7A5C49;
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(139,106,85,.28);
  }

  .sf-hero__micro{
    margin: 10px 0 0;
    font-size: 12.5px;
    color: rgba(47,47,47,.60);
    line-height: 1.35;
  }

  .sf-hero__media{
    display: grid;
    place-items: center;
    padding: 6px 0 0;
  }

  .sf-hero__img{
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,.14));
  }

  /* Desktop */
  @media (min-width: 920px){
    .sf-hero{
      padding: 56px 18px 24px;
    }
    .sf-hero__grid{
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
    }
  }
  /* 1) HEADER branco combinando com degradê (separação sutil) */
header, .header, .nx-header{
  background: #fff;
  border-bottom: 1px solid rgba(47,47,47,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
}

/* 2) HERO: garantir espaçamento entre imagem e CTA */
.sf-hero__grid{
  gap: 18px; /* se tiver */
}

.sf-hero__media{
  margin-bottom: 14px; /* <-- cria respiro antes do botão */
  padding-bottom: 2px;
}

/* 3) IMAGEM com leve radius + sem “vazar” */
.sf-hero__img{
  border-radius: 14px;       /* leve */
  overflow: hidden;
  display: block;
}

/* se a imagem estiver dentro de um container, aplique também */
.sf-hero__media{
  border-radius: 14px;
}

/* 4) CTA reto/centralizado (corrige “torto”) */
.sf-hero__cta{
  width: min(360px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 14px 18px;
  line-height: 1;            /* <- isso resolve 90% dos “tortos” */
  border-radius: 999px;

  margin-top: 8px;           /* respiro extra */
}

/* opcional: se o texto estiver desalinhando por fonte */
.sf-hero__cta{
  font-weight: 900;
  letter-spacing: .2px;
}
/* ==== FIX DEFINITIVO: CTA centralizado (mesmo se o pai empurrar) ==== */
.sf-hero__cta{
  display: block !important;
  width: min(360px, 100%) !important;
  margin: 14px auto 0 !important;  /* centraliza SEMPRE */
  text-align: center !important;

  padding: 14px 18px !important;
  line-height: 1 !important;
}

/* se o container do texto estiver com text-align diferente */
.sf-hero__copy{
  text-align: left !important;     /* mantém textos à esquerda */
}

/* se o GRID estiver empurrando items para o lado */
.sf-hero__grid{
  justify-items: stretch !important;
}

/* se por acaso o botão está dentro de um wrapper */
.sf-hero__actions,
.sf-hero__cta-wrap{
  display: block !important;
  width: 100% !important;
}
/* === CTA: centralizar de verdade (independente do layout) === */

/* 1) garante que o container do hero não tenha alinhamento estranho */
.sf-hero__copy{
  width: 100%;
  text-align: left; /* textos continuam à esquerda */
}

/* 2) cria uma "linha" só pro botão e centraliza */
.sf-hero__cta{
  display: inline-block !important;   /* não depende do flex/grid */
  width: min(360px, 100%) !important;
  margin: 14px auto 0 !important;
}

/* 3) CENTRALIZA o botão com um wrapper automático */
.sf-hero__copy .sf-hero__cta{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* 4) garante texto do botão central */
.sf-hero__cta{
  text-align: center !important;
  line-height: 1 !important;
}
/* CTA – ajuste fino (menor e elegante) */
.sf-hero__cta{
  width: min(300px, 92%);   /* ↓ diminui a largura */
  padding: 12px 14px;       /* ↓ menos altura */
  font-size: 14px;          /* ↓ tipografia mais clean */
  box-shadow: 0 12px 22px rgba(139,106,85,.22);
}

/* Mais respiro entre CTA e próximo bloco */
.sf-hero__micro{
  margin-top: 8px;
}
/* CTA FORCE SMALL – SEM CHANCE DE OVERRIDE */
.sf-hero__cta{
  width: 250px !important;      /* largura menor */
  max-width: 250px !important;
  min-width: unset !important;

  padding: 8px 10px !important; /* altura bem menor */
  height: auto !important;
  min-height: unset !important;

  font-size: 12.5px !important;
  font-weight: 700 !important;

  line-height: 1.1 !important;
  border-radius: 999px !important;

  margin: 12px auto 0 !important;
  box-shadow: 0 6px 12px rgba(139,106,85,.18) !important;
}
/* CTA – tamanho ideal (meio termo premium) */
.sf-hero__cta{
  width: min(300px, 86%) !important;
  max-width: 300px !important;

  padding: 11px 14px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;

  line-height: 1.1 !important;
  margin: 12px auto 0 !important;

  box-shadow: 0 10px 18px rgba(139,106,85,.20) !important;
}
.sf-highlight{
  color: var(--nx-brand-2); /* marrom da LP */
  font-weight: 950;
}
.sf-hero__sub{
  margin-top: 10px;
  margin-bottom: 10px; /* ↓ menos espaço antes do CTA */
}
.sf-hero__micro{
  font-size: 11px;
  letter-spacing: .2px;
  white-space: nowrap;   /* força 1 linha */
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-vcarousel{
  background: #FFFFFF; /* muda do hero e descansa a vista */
  padding: 44px 16px 36px;
}

.sf-vcarousel__wrap{
  max-width: 1040px;
  margin: 0 auto;
}

.sf-vcarousel__head{
  text-align: center;
  margin-bottom: 18px;
}

.sf-vcarousel__title{
  margin: 0 0 8px;
  font-size: clamp(22px, 5.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--sf-title, #2F2F2F);
}

.sf-vcarousel__sub{
  margin: 0 auto;
  max-width: 520px;
  font-size: 14.5px;
  color: var(--sf-text, #6B6B6B);
  line-height: 1.5;
}

/* viewport com swipe */
.sf-vcarousel__viewport{
  position: relative;
  overflow: hidden;
}

.sf-vcarousel__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 6px 2px 10px;

  /* esconder scrollbar */
  scrollbar-width: none;
}
.sf-vcarousel__track::-webkit-scrollbar{ display:none; }

.sf-vcarousel__slide{
  scroll-snap-align: center;
  flex: 0 0 88%;
  background: #F9F7F5;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  border: 1px solid rgba(47,47,47,.06);
}

/* vídeo 1:1 perfeito */
.sf-vcarousel__media{
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(199,178,163,.18); /* bege bem leve */
  margin-bottom: 12px;
}

.sf-vcarousel__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sf-vcarousel__h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 850;
  color: #2F2F2F;
}

.sf-vcarousel__p{
  margin: 0;
  font-size: 13.5px;
  color: #6B6B6B;
  line-height: 1.45;
}

.sf-vcarousel__dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.sf-vcarousel__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(139,106,85,.25);
  border: 1px solid rgba(139,106,85,.18);
}

.sf-vcarousel__dot.is-active{
  background: var(--nx-brand-2, #8B6A55);
}

/* Desktop: vira grid (mais bonito e sem swipe) */
@media (min-width: 900px){
  .sf-vcarousel{ padding: 64px 20px 44px; }

  .sf-vcarousel__track{
    overflow: visible;
    scroll-snap-type: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .sf-vcarousel__slide{
    flex: initial;
  }

  .sf-vcarousel__dots{ display:none; }
}
.sf-kit-wave{
  position: relative;
  background: var(--nx-brand, #C7B2A3);
  padding: 64px 16px;            /* espaço real pro conteúdo */
  overflow: hidden;
  isolation: isolate;            /* z-index seguro */
}

/* ONDA TOP (entra do branco para o bege) */
.sf-kit-wave::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:92px;
  background: #fff;
  z-index:0;

  /* onda suave recortada */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,72 C240,120 420,18 720,70 C980,112 1180,40 1440,70 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,72 C240,120 420,18 720,70 C980,112 1180,40 1440,70 L1440,0 L0,0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* ONDA BOTTOM (invertida: sai do bege para o branco) */
.sf-kit-wave::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:92px;
  background: #fff;
  z-index:0;

  /* onda invertida */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C260,0 520,110 760,55 C1040,-5 1220,100 1440,50 L1440,120 L0,120 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C260,0 520,110 760,55 C1040,-5 1220,100 1440,50 L1440,120 L0,120 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* conteúdo acima das ondas */
.sf-kit-wave__wrap{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* Head */
.sf-kit-wave__head{
  text-align: center;
  margin-bottom: 16px;
}

.sf-kit-wave__title{
  margin: 0 0 6px;
  font-size: clamp(22px, 5.2vw, 32px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.4px;
}

.sf-kit-wave__sub{
  margin: 0 auto;
  max-width: 520px;
  font-size: 14px;
  color: rgba(255,255,255,.86);
}

/* Card list */
.sf-kit-wave__list{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
}

/* item */
.sf-kit-wave__row{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  background:#fff;
  border: 1px solid rgba(47,47,47,.08);
  border-radius: 18px;
  padding: 12px;
}

.sf-kit-wave__row + .sf-kit-wave__row{ margin-top: 10px; }

.sf-kit-wave__thumb{
  width: 54px; height: 54px;
  border-radius: 14px;
  background: rgba(199,178,163,.22);
  overflow:hidden;
  flex-shrink:0;
}
.sf-kit-wave__thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

.sf-kit-wave__text{ display:flex; flex-direction:column; gap:2px; }
.sf-kit-wave__line1{ display:flex; gap:8px; align-items:baseline; }

.sf-kit-wave__qty{
  font-size: 12.5px;
  font-weight: 900;
  color: var(--nx-brand-2, #8B6A55);
}
.sf-kit-wave__name{
  font-size: 14px;
  font-weight: 800;
  color: #2F2F2F;
}
.sf-kit-wave__line2{
  font-size: 13px;
  color: rgba(47,47,47,.65);
}

/* brinde */
.sf-kit-wave__row--bonus{
  border-style: dashed;
  border-color: rgba(139,106,85,.28);
  background: #FFFEFD;
}
.sf-kit-wave__badge{
  position:absolute;
  right:12px; top:12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
  color: var(--nx-brand-2, #8B6A55);
  background: rgba(139,106,85,.14);
  border: 1px solid rgba(139,106,85,.18);
  padding: 5px 9px;
  border-radius: 999px;
}

@media (max-width: 420px){
  .sf-kit-wave{ padding: 62px 16px; }
  .sf-kit-wave__row--bonus .sf-kit-wave__name{ padding-right: 78px; }
}
/* + espaço útil dentro do bege (resolve título “sumindo” e card saindo) */
.sf-kit-wave{
  padding-top: 96px !important;     /* ↑ mais espaço pro título */
  padding-bottom: 110px !important; /* ↑ mais espaço pro card */
}

/* ondas mais altas */
.sf-kit-wave::before,
.sf-kit-wave::after{
  height: 130px !important;
}

/* TOP: “sobe” a onda (mais alta sem invadir o título) */
.sf-kit-wave::before{
  top: -26px !important;
}

/* BOTTOM: “desce” a onda (mais baixa sem bater no card) */
.sf-kit-wave::after{
  bottom: -30px !important;
}
/* ✅ FIX: some o bloco branco e o texto volta */
.sf-kit-wave__head{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;

  position: relative !important;
  z-index: 5 !important; /* acima das ondas e de qualquer overlay */
}

.sf-kit-wave__title,
.sf-kit-wave__sub{
  background: transparent !important;
  background-color: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;

  position: relative !important;
  z-index: 6 !important;
}

/* Se algum CSS global estiver “zerando” a cor do H2 */
.sf-kit-wave__title{
  color: #fff !important;
}

/* Garante que as ondas nunca ficam por cima */
.sf-kit-wave::before,
.sf-kit-wave::after{
  z-index: 0 !important;
}

.sf-kit-wave__wrap{
  z-index: 2 !important;
  position: relative !important;
}
.sf-kit-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  margin: 8px 0 12px;
}

.sf-kit-tab{
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  text-decoration:none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

.sf-kit-tab--hot{
  border-color: rgba(255,255,255,.55);
  background: rgba(139,106,85,.28);
}

.sf-kit-slider{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.sf-kit-slider::-webkit-scrollbar{ height: 0; }

.sf-kit-card{
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.sf-kit-card__title{
  margin: 0 0 10px;
  color:#fff;
  font-size: 15px;
  font-weight: 900;
  text-align:left;
}

.sf-kit-card__pill{
  display:inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.22);
  padding: 4px 8px;
  border-radius: 999px;
}

.sf-kit-dots{
  display:flex;
  justify-content:center;
  gap: 8px;
  margin-top: 8px;
  opacity: .9;
}
.sf-kit-dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.sf-kit-slider{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.sf-kit-slider::-webkit-scrollbar{ display:none; }

.sf-kit-card{
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* tabs */
.sf-kit-tab{
  cursor: pointer;
}
.sf-kit-tab.is-active{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.70);
  transform: translateY(-1px);
}

/* dots (ativo) */
.sf-kit-dot.is-active{
  background: rgba(255,255,255,.90);
}
:root{
  --nx-brand:#C7B2A3;    /* bege */
  --nx-brand-2:#8B6A55;  /* marrom */
  --sf-title:#2F2F2F;
  --sf-text:#6B6B6B;
}

/* CTA */
.sf-offer{
  background:#fff;
  padding: 34px 16px 46px;
}
.sf-offer__wrap{ max-width: 860px; margin:0 auto; }

.sf-offer__head{ text-align:center; margin-bottom: 14px; }
.sf-offer__kicker{
  margin:0 0 8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(47,47,47,.62);
}
.sf-offer__title{
  margin:0 0 8px;
  font-size: clamp(22px, 5.6vw, 34px);
  font-weight: 950;
  letter-spacing: -.4px;
  color: var(--sf-title);
}
.sf-offer__sub{
  margin:0;
  font-size: 14px;
  color: var(--sf-text);
}

.sf-offer__heroImg{ display:flex; justify-content:center; margin: 16px 0 12px; }
.sf-offer__heroImg img{
  width: min(520px, 100%);
  height:auto;
  border-radius: 18px;
  display:block;
}

.sf-offer__box{
  background: rgba(199,178,163,.12);
  border: 1px solid rgba(199,178,163,.30);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,.08);
}

.sf-offer__badgeRow{
  display:flex;
  gap: 8px;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.sf-offer__badge{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .25px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--nx-brand-2);
}
.sf-offer__badge--soft{
  background: rgba(139,106,85,.20);
  color: var(--nx-brand-2);
  border: 1px solid rgba(139,106,85,.22);
}

.sf-offer__choices{ display:grid; gap: 10px; margin: 10px 0 12px; }

.sf-offer__choice{
  text-align:left;
  width:100%;
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(47,47,47,.10);
  cursor:pointer;
}
.sf-offer__choice.is-active{
  border-color: rgba(139,106,85,.45);
  box-shadow: 0 14px 34px rgba(139,106,85,.16);
}

.sf-offer__choiceTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.sf-offer__choiceName{ font-weight: 950; color: var(--sf-title); }
.sf-offer__choiceTag{
  font-size: 11px;
  font-weight: 900;
  color: rgba(47,47,47,.62);
  background: rgba(199,178,163,.22);
  border: 1px solid rgba(199,178,163,.30);
  padding: 4px 8px;
  border-radius: 999px;
  white-space:nowrap;
}
.sf-offer__choiceTag--hot{
  color: #fff;
  background: var(--nx-brand-2);
  border-color: rgba(0,0,0,.06);
}

.sf-offer__choiceBottom{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
}
.sf-offer__choiceLine{ font-size: 12.5px; color: rgba(47,47,47,.68); }
.sf-offer__choicePrice{ font-size: 15px; font-weight: 950; color: var(--nx-brand-2); }

.sf-offer__pricing{ padding: 8px 2px 12px; }
.sf-offer__old{ font-size: 12.5px; color: rgba(47,47,47,.60); }
.sf-offer__old span{ text-decoration: line-through; }

.sf-offer__now{
  display:flex; align-items:baseline; gap: 8px; flex-wrap:wrap;
  margin-top: 4px;
}
.sf-offer__nowLabel{ font-size: 12px; color: rgba(47,47,47,.60); font-weight: 800; }
.sf-offer__nowValue{ font-size: 28px; font-weight: 950; color: var(--nx-brand-2); }
.sf-offer__off{
  font-size: 11px;
  font-weight: 950;
  color: var(--nx-brand-2);
  background: rgba(139,106,85,.16);
  border: 1px solid rgba(139,106,85,.18);
  padding: 4px 8px;
  border-radius: 999px;
}

.sf-offer__mini{ margin-top: 6px; font-size: 12.5px; color: rgba(47,47,47,.70); }

.sf-offer__cta{
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 16px 18px;
  background: var(--nx-brand-2);
  color:#fff;
  font-weight: 950;
  font-size: 15px;
  cursor:pointer;
  box-shadow: 0 18px 36px rgba(139,106,85,.28);
}

.sf-offer__trust{ margin-top: 12px; }
.sf-offer__ml{
  display:flex; align-items:center; justify-content:center;
  gap: 6px; font-size: 12.5px; color: rgba(47,47,47,.68);
  margin-bottom: 8px;
}
.sf-offer__ml img{ height: 16px; }
.sf-offer__pay{ text-align:center; }
.sf-offer__payRow{
  display:flex; justify-content:center; gap: 8px; flex-wrap:wrap;
  font-size: 12px; color: rgba(47,47,47,.60);
}
.sf-offer__dot{ opacity:.55; }
.sf-offer__secure{ margin-top: 6px; font-size: 12px; color: rgba(47,47,47,.56); }

/* MODAL */
.sf-modal{ position: fixed; inset: 0; display:none; z-index: 9999; }
.sf-modal.is-open{ display:block; }
.sf-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }

.sf-modal__panel{
  position: relative;
  width: min(520px, calc(100% - 24px));
  margin: 10vh auto 0;
  background:#fff;
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}

.sf-modal__close{
  position:absolute;
  right: 10px; top: 8px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  font-size: 20px;
  cursor:pointer;
}

.sf-modal__title{ margin: 6px 0 2px; font-size: 18px; font-weight: 950; color: var(--sf-title); }
.sf-modal__desc{ margin: 0 0 10px; font-size: 13px; color: rgba(47,47,47,.68); }

.sf-modal__card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 10px;
  background: rgba(199,178,163,.12);
}
.sf-modal__row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 8px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
}
.sf-modal__row + .sf-modal__row{ margin-top: 8px; }
.sf-modal__label{ font-size: 12.5px; color: rgba(47,47,47,.65); }
.sf-modal__value{ font-size: 12.5px; color: var(--sf-title); }

.sf-modal__actions{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.sf-modal__ghost{
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-weight: 900;
  cursor:pointer;
}
.sf-modal__primary{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px 14px;
  border-radius: 14px;
  text-decoration:none;
  background: var(--nx-brand-2);
  color:#fff;
  font-weight: 950;
}
.sf-modal__foot{
  margin-top: 10px;
  text-align:center;
  font-size: 12px;
  color: rgba(47,47,47,.55);
}
.sf-offer__nowValue{
  font-size: 30px;
}
.sf-offer__choices{
  gap: 12px;
}
.sf-offer__cta{
  box-shadow: 0 16px 32px rgba(139,106,85,.28);
}
.sf-offer__cta{
  position: relative;
  animation: ctaPulse 2.6s ease-in-out infinite;
}

@keyframes ctaPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 16px 32px rgba(139,106,85,.28);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 22px 44px rgba(139,106,85,.38);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 16px 32px rgba(139,106,85,.28);
  }
}
.sf-offer__title span{
  color:#8B6A55;
}
.sf-benefits__title{
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 900;
  color:#2F2F2F;
}
.sf-benefits__title span{
  color:#8B6A55;
}
.sf-offer__heroImg{
  position: relative;
  display: flex;
  justify-content: center;
}

/* Badge Frete Grátis */
.sf-offer__badge{
  position: absolute;
  top: 10px;
  left: 10px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;

  color: #8B6A55;                 /* marrom da paleta */
  background: rgba(255,255,255,.95);

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(139,106,85,.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);

  z-index: 2;
  pointer-events: none;           /* não interfere em clique */
}
.sf-count{
  background: #fff;
  padding: 14px 16px 22px;
}

.sf-count__wrap{
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.sf-count__pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(199,178,163,.14);           /* bege suave */
  border: 1px solid rgba(199,178,163,.35);

  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}

.sf-count__plus{
  font-weight: 950;
  color: var(--nx-brand-2, #8B6A55);
}

.sf-count__num{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: -.2px;
  color: var(--nx-brand-2, #8B6A55);
  min-width: 44px; /* evita “pular” */
  text-align: right;
}

.sf-count__label{
  font-size: 12.5px;
  color: rgba(47,47,47,.70);
}
.sf-test{
  background: #fff;
  padding: 28px 16px 34px;
}

.sf-test__wrap{
  max-width: 980px;
  margin: 0 auto;
}

.sf-test__head{
  text-align: center;
  margin-bottom: 14px;
}

.sf-test__title{
  margin: 0 0 6px;
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 950;
  color: #2F2F2F;
  letter-spacing: -.4px;
}

.sf-test__sub{
  margin: 0 auto;
  max-width: 54ch;
  font-size: 14px;
  color: rgba(47,47,47,.65);
}

/* slider */
.sf-test__slider{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px 12px;
  scrollbar-width: none;
}
.sf-test__slider::-webkit-scrollbar{ display:none; }

.sf-test__card{
  flex: 0 0 88%;
  scroll-snap-align: start;

  background: rgba(199,178,163,.12);
  border: 1px solid rgba(199,178,163,.32);
  border-radius: 22px;
  padding: 12px;

  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

@media (min-width: 860px){
  .sf-test__card{ flex-basis: 420px; }
}

.sf-test__top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sf-test__pf{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.sf-test__name{
  font-weight: 950;
  color: #2F2F2F;
  line-height: 1.1;
}

.sf-test__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sf-test__stars{
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--nx-brand-2, #8B6A55);
}

.sf-test__ver{
  font-size: 11px;
  font-weight: 900;
  color: var(--nx-brand-2, #8B6A55);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(139,106,85,.20);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.sf-test__text{
  margin: 0 0 10px;
  color: rgba(47,47,47,.72);
  font-size: 13.5px;
  line-height: 1.55;
}

/* imagem do feedback */
.sf-test__shot{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 8px;
}

.sf-test__shot img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* dots */
.sf-test__dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.sf-test__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(199,178,163,.55);
}

.sf-test__dot.is-active{
  background: var(--nx-brand-2, #8B6A55);
}
/* container da imagem do feedback */
.sf-test__shot{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;      /* 👈 padrão 3:4 */
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

/* imagem */
.sf-test__shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* preenche sem distorcer */
  display: block;
}
.sf-gallery{
  background: #fff;
  padding: 22px 0 26px;
  overflow: hidden;
}

.sf-gallery__wrap{
  width: 100%;
  overflow: hidden;
}

.sf-gallery__track{
  display: flex;
  width: max-content;
  animation: sfGalleryMove 26s linear infinite;
}

.sf-gallery__track img{
  width: 240px;              /* controla o tamanho */
  height: auto;
  object-fit: cover;
  display: block;
}

/* animação horizontal infinita */
@keyframes sfGalleryMove{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}
.sf-gallery__track img{
  width: 220px;          /* largura fixa */
  aspect-ratio: 3 / 4;  /* 👈 trava 3:4 */
  height: auto;

  object-fit: cover;    /* preenche sem distorcer */
  display: block;
}
.sf-faq{
  background: #fff;
  padding: 28px 16px 34px;
}

.sf-faq__wrap{
  max-width: 860px;
  margin: 0 auto;
}

.sf-faq__head{
  text-align: center;
  margin-bottom: 16px;
}

.sf-faq__title{
  margin: 0 0 6px;
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 950;
  color: #2F2F2F;
  letter-spacing: -.3px;
}

.sf-faq__sub{
  margin: 0 auto;
  max-width: 52ch;
  font-size: 14px;
  color: rgba(47,47,47,.65);
}

.sf-faq__item{
  background: rgba(199,178,163,.10);
  border: 1px solid rgba(199,178,163,.28);
  border-radius: 16px;
  padding: 12px 14px;
}

.sf-faq__item + .sf-faq__item{ margin-top: 10px; }

.sf-faq__item summary{
  cursor: pointer;
  font-weight: 900;
  color: #2F2F2F;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.sf-faq__item summary::-webkit-details-marker{ display: none; }

.sf-faq__item summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--nx-brand-2, #8B6A55);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(139,106,85,.20);
  font-weight: 950;
}

.sf-faq__item[open] summary::after{
  content: "–";
}

.sf-faq__item p{
  margin: 10px 0 0;
  font-size: 13.5px;
  color: rgba(47,47,47,.72);
  line-height: 1.55;
}
.sf-specs{
  background: #fff;
  padding: 26px 16px 42px;
}

.sf-specs__wrap{
  max-width: 760px;
  margin: 0 auto;
}

.sf-specs__title{
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 950;
  color: #2F2F2F;
}

.sf-specs__list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.sf-specs__list li{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 13.5px;
  color: rgba(47,47,47,.72);
}

.sf-specs__list li strong{
  color: #2F2F2F;
}
.sf-offer__hint{
  margin: 10px 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(47,47,47,.65);
}
.sf-offer__install{
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(47,47,47,.62);
}
.sf-offer__install b{
  color: #2F2F2F;
  font-weight: 900;
}
.sf-offer__install span{
  color: rgba(47,47,47,.52);
}
.sf-offer__install{
  margin-top: 6px;
  font-size: 11px;                 /* menor */
  line-height: 1.25;
  color: rgba(47,47,47,.42);       /* mais fraco */
  font-weight: 600;
}

.sf-offer__install b{
  color: rgba(47,47,47,.55);       /* destaque suave (não compete com o preço) */
  font-weight: 700;               /* menos pesado */
}

.sf-offer__install span{
  color: rgba(47,47,47,.34);       /* ainda mais discreto */
}
.sf-offer__off{
  background: rgba(139,106,85,.12);
  color: #8B6A55;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
/* =========================
   SAVEFOOD CTA (Checkout Verde)
   - tudo ajustável via variáveis
   ========================= */
:root{
  /* Verde do botão (estilo checkout) */
  --sf-green: #16A34A;        /* verde vivo */
  --sf-green-2: #15803D;      /* hover/pressionado */
  --sf-green-soft: rgba(22,163,74,.14); /* fundo leve do badge */

  /* Vermelho do desconto */
  --sf-red: #E11D48;          /* vermelho forte (tipo conversão) */
  --sf-red-soft: rgba(225,29,72,.12);

  /* Texto */
  --sf-price: #111111;        /* preço em preto */
  --sf-muted: rgba(17,17,17,.55);

  /* Sombras e bordas */
  --sf-cta-shadow: 0 16px 28px rgba(22,163,74,.22);
  --sf-radius-pill: 999px;
}

/* =========================
   1) CTA (Botão principal)
   ========================= */
.sf-offer__cta{
  background: var(--sf-green) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: var(--sf-radius-pill) !important;

  box-shadow: var(--sf-cta-shadow) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.sf-offer__cta:hover{
  background: var(--sf-green-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 20px 34px rgba(22,163,74,.28) !important;
}

.sf-offer__cta:active{
  transform: translateY(0);
  box-shadow: 0 12px 22px rgba(22,163,74,.22) !important;
}

/* acessibilidade: foco */
.sf-offer__cta:focus-visible{
  outline: 3px solid rgba(22,163,74,.35);
  outline-offset: 3px;
}

/* =========================
   2) Badge "Recomendado" (verde)
   ========================= */
.sf-offer__choiceTag--hot{
  background: var(--sf-green-soft) !important;
  color: var(--sf-green-2) !important;
  border: 1px solid rgba(22,163,74,.22) !important;
}

/* "Mais econômico" neutro (mantém clean) */
.sf-offer__choiceTag{
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.62);
  border: 1px solid rgba(17,17,17,.08);
}

/* =========================
   3) Preço (valor atual em preto)
   ========================= */
.sf-offer__nowValue{
  color: var(--sf-price) !important;
}

/* "por" e textos menores */
.sf-offer__nowLabel,
.sf-offer__old{
  color: var(--sf-muted) !important;
}

/* =========================
   4) Badge de desconto (-43%) em vermelho
   ========================= */
.sf-offer__off{
  background: var(--sf-red-soft) !important;
  color: var(--sf-red) !important;
  border: 1px solid rgba(225,29,72,.20) !important;
  border-radius: var(--sf-radius-pill) !important;

  font-weight: 900 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
}

/* =========================
   5) Parcelamento (bem discreto)
   ========================= */
.sf-offer__install{
  font-size: 11px;
  color: rgba(17,17,17,.40);
}
.sf-offer__install b{
  color: rgba(17,17,17,.55);
  font-weight: 700;
}
.sf-offer__install span{
  color: rgba(17,17,17,.35);
}

/* =========================
   6) "Entregue por Mercado Livre / Pix / Cartão" discreto
   ========================= */
.sf-offer__ship,
.sf-offer__payline{
  color: rgba(17,17,17,.52);
  font-size: 12px;
}
/* =========================
   MODAL – CTA PAGAMENTO (VERDE)
   ========================= */

/* reutiliza o verde da LP */
:root{
  --sf-green: #16A34A;
  --sf-green-2: #15803D;
  --sf-green-shadow: 0 14px 26px rgba(22,163,74,.25);
}

/* botão principal do modal */
.sf-modal__cta,
.sf-modal__primary,
button[data-modal-cta="pay"]{
  background: var(--sf-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;

  font-weight: 900;
  letter-spacing: .2px;

  box-shadow: var(--sf-green-shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* hover */
.sf-modal__cta:hover,
.sf-modal__primary:hover,
button[data-modal-cta="pay"]:hover{
  background: var(--sf-green-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(22,163,74,.32);
}

/* active */
.sf-modal__cta:active,
.sf-modal__primary:active,
button[data-modal-cta="pay"]:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(22,163,74,.22);
}

/* foco acessível */
.sf-modal__cta:focus-visible,
.sf-modal__primary:focus-visible,
button[data-modal-cta="pay"]:focus-visible{
  outline: 3px solid rgba(22,163,74,.35);
  outline-offset: 3px;
}
/* =========================
   MODAL – CTA PAGAMENTO (VERDE)
   ========================= */

/* reutiliza o verde da LP */
:root{
  --sf-green: #16A34A;
  --sf-green-2: #15803D;
  --sf-green-shadow: 0 14px 26px rgba(22,163,74,.25);
}

/* botão principal do modal */
.sf-modal__cta,
.sf-modal__primary,
button[data-modal-cta="pay"]{
  background: var(--sf-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;

  font-weight: 900;
  letter-spacing: .2px;

  box-shadow: var(--sf-green-shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* hover */
.sf-modal__cta:hover,
.sf-modal__primary:hover,
button[data-modal-cta="pay"]:hover{
  background: var(--sf-green-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(22,163,74,.32);
}

/* active */
.sf-modal__cta:active,
.sf-modal__primary:active,
button[data-modal-cta="pay"]:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(22,163,74,.22);
}

/* foco acessível */
.sf-modal__cta:focus-visible,
.sf-modal__primary:focus-visible,
button[data-modal-cta="pay"]:focus-visible{
  outline: 3px solid rgba(22,163,74,.35);
  outline-offset: 3px;
}
/* =========================
   PREÇO DOS KITS (PRETO)
   ========================= */

/* valor dentro do card do kit */
.sf-offer__choicePrice{
  color: #111111 !important;   /* preto forte */
  font-weight: 900;
}

/* linha de descrição do kit */
.sf-offer__choiceLine{
  color: rgba(17,17,17,.60);
}

/* nome do kit */
.sf-offer__choiceName{
  color: #111111;
}