html, body{
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ===== SCROLL SUAVE GLOBAL ===== */
html{
  scroll-behavior: smooth;
}


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

:root{

  /* ===============================
     APPLE MINIMAL – PALETA GLOBAL
     =============================== */

  --nx-brand:      #1D1D1F; /* agora preto premium */
  --nx-brand-2:    #000000;

  --nx-navy:       #1D1D1F;
  --nx-navy-2:     #000000;

  --nx-ice:        #F5F5F7;
  --nx-ice-2:      #E5E5E7;

  --nx-white:      #ffffff;
  --nx-white-85:   rgba(0,0,0,.85);
  --nx-white-70:   rgba(0,0,0,.65);
  --nx-white-25:   rgba(0,0,0,.10);

  --nx-shadow:     0 18px 40px rgba(0,0,0,.08);

  --nx-radius:     18px;

  --nx-font:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    system-ui,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;

  /* HEADER */
  --nx-head-bg: #ffffff;
  --nx-head-accent: #1D1D1F;
  --nx-head-line: rgba(0,0,0,.10);

  /* DRAWER */
  --nx-drawer-overlay: rgba(0,0,0,.35);
  --nx-drawer-bg: #ffffff;
  --nx-drawer-border: rgba(0,0,0,.10);
  --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: 80px; /* 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: #E11D48;         /* 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;
  }
}
.policy h1::after{
  background: var(--nx-brand); /* antes: #E11D48 */
}



/* ===== HEADER AZUL (MILLER MOTORS) ===== */

.nx-topbar{
  background: linear-gradient(135deg, #021546 0%, #0F60D1 100%);
}

/* texto da direita */
.nx-topbar__secure{
  color: rgba(255,255,255,.9);
}

/* burger menu branco */
.nx-burger span{
  background: #ffffff;
}

/* divisor inferior */
.nx-topbar__divider{
  background: rgba(255,255,255,.18);
}



/* ===== SAFE MOBILE WIDTH FIX ===== */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}






.nx-burger{
  transform: translateY(-5px);
}
.nx-topbar__logo{
  transform: translateY(-5px);
}
.nx-topbar__secure{
  transform: translateY(-4px);
}
:root{ --header-h: 72px; }  /* ajuste esse valor */

.nx-topbar{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
}

body{
  padding-top: var(--header-h);
}

.nx-topbar{
  background: #ffffff;
}
.nx-burger span{
  background: var(--nx-head-accent);
}
.nx-drawer__cta{
  background: var(--nx-head-accent);
  color: #fff;
}
.nx-footer{
  background: #1D1D1F;
  color: #fff;
}
.nx-icoCircle{
  background: #ffffff;
}

.nx-icoStroke,
.nx-icoFill{
  color: #1D1D1F;
}
.policy h1::after{
  background: #1D1D1F;
}
/* ===== HEADER — compra segura visível ===== */

.nx-topbar__secure{
  color: #1D1D1F !important;
}
/* ===== FOOTER — isolamento de cores ===== */

.nx-footer{
  background: #1D1D1F;
  color: #ffffff;
}

.nx-footer *{
  color: #ffffff !important;
}
.nx-footer .nx-icoStroke,
.nx-footer .nx-icoFill{
  color: #1D1D1F;
}

.nx-footer .nx-socialIcon{
  fill: #1D1D1F;
}
/* ===============================
   HEADER — APPLE BLACK PREMIUM
   =============================== */

.nx-topbar{
  background: #1D1D1F;
  color: #ffffff;
}

/* texto compra segura */
.nx-topbar__secure{
  color: rgba(255,255,255,.9) !important;
}

/* burger branco */
.nx-burger span{
  background: #ffffff !important;
}

/* divisor */
.nx-topbar__divider{
  background: rgba(255,255,255,.18);
}

/* logo — se for SVG */
.nx-topbar svg{
  fill: #ffffff;
  color: #ffffff;
}
.nx-topbar{
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.nx-footer *{
  color: #ffffff !important;
}
/* ===============================
   FOOTER — ÍCONES 100% VISÍVEIS
   =============================== */

/* textos brancos (sem matar ícones) */
.nx-footer{
  background: #1D1D1F;
  color: #fff;
}
.nx-footer .nx-footer__title,
.nx-footer .nx-footer__item,
.nx-footer .nx-footer__muted,
.nx-footer .nx-footer__menu a,
.nx-footer .nx-footer__bottom{
  color: rgba(255,255,255,.88) !important;
}
.nx-footer .nx-footer__title{ color:#fff !important; }
.nx-footer .nx-footer__link{ color:#fff !important; }

/* círculo branco */
.nx-footer .nx-icoCircle{
  background: #fff !important;
}

/* FORÇA SVG: fill + stroke escuros */
.nx-footer .nx-icoStroke,
.nx-footer .nx-icoFill{
  color: #1D1D1F !important;
}

.nx-footer .nx-icoStroke *{
  stroke: #1D1D1F !important;
  fill: none !important;
}

.nx-footer .nx-icoFill *{
  fill: #1D1D1F !important;
  stroke: none !important;
}

/* redes sociais: garante preto dentro do círculo */
.nx-footer .nx-socialCircle{
  background: #fff !important;
}
.nx-footer .nx-socialIcon{
  fill: #1D1D1F !important;
}
/* fundo global premium */
body{
  background: #F5F5F7;
}

/* seções */
.section-white{
  background: #ffffff;
}

.section-soft{
  background: #F5F5F7;
}
.hero{
  text-align: center;
  padding: 25px 20px 20px;
}

.hero-inner{
  width: min(900px, 92vw);
  margin: 0 auto;
}

.hero h1{
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  margin-bottom: 18px;
}

.hero p{
  font-size: 20px;
  color: #6E6E73;
  max-width: 640px;
  margin: 0 auto 40px;
}

/* PRODUTO */
.hero-product{
  margin-bottom: 40px;
}

.hero-product img{
  width: min(600000px, 100%);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.12));
  transition: transform .6s ease;
}

.hero-product img:hover{
  transform: scale(1.03);
}

/* BOTÃO */
.hero-cta{
  height: 54px;
  padding: 0 34px;
  border-radius: 999px;
  border: none;
  background: #1D1D1F;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

.hero-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
}
.hero-product{
  animation: floatHero 3s ease-in-out infinite alternate;
}

@keyframes floatHero{
  from{ transform: translateY(0px); }
  to{ transform: translateY(-8px); }
}
.hero h1{
  margin-bottom: 26px;
}

.hero p{
  margin-bottom: 50px;
}

.hero-product{
  margin-bottom: 50px;
}
.hero{
  background:
    radial-gradient(circle at center,
      #ffffff 0%,
      #F5F5F7 60%);
}
.hero h1{
  line-height: 1.08;
  letter-spacing: -0.4px;
}

.hero p{
  font-size: 18px;
  max-width: 300px;
}
.hero h1{
  margin-bottom: 22px;
}

.hero-product{
  margin: 0 0 28px;
}

.hero p{
  margin-bottom: 22px;
}
.hero p{
  font-size: 17px;
  line-height: 1.4;
  max-width: 320px;
}
/* ===== seção ===== */
.bgrid{ padding: 96px 20px; }
.bgrid__wrap{ width: min(1120px, 92vw); margin: 0 auto; }

.bgrid__head{ text-align:center; margin-bottom: 40px; }
.bgrid__title{
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
  color: #1D1D1F;
}
.bgrid__sub{
  margin: 0 auto;
  max-width: 520px;
  color: #6E6E73;
  font-size: 16px;
  line-height: 1.5;
}

/* ===== desktop grid ===== */
.bgrid__track{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

/* card */
.bcard{ text-align:center; }
.bcard__media{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
}
.bcard__media img{
  width: 100%;
  height: auto;
  display: block;
}
.bcard__title{
  margin: 14px 0 6px;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: #1D1D1F;
}
.bcard__text{
  margin: 0;
  font-size: 15px;
  color: #6E6E73;
  line-height: 1.5;
}

/* dots (some no desktop, aparece no mobile) */
.bgrid__dots{
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.bdot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(29,29,31,.18);
  transition: transform .2s ease, background .2s ease, width .2s ease;
}
.bdot.is-active{
  background: rgba(29,29,31,.75);
  width: 18px;
}

/* ===== mobile: vira carrossel Apple ===== */
@media (max-width: 860px){
  .bgrid{ padding: 72px 16px; }

  .bgrid__track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;

    overflow-x: auto;
    padding: 4px 2px 14px;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bgrid__track::-webkit-scrollbar{ display:none; }

  .bcard{
    scroll-snap-align: center;
  }

  .bgrid__dots{ display:flex; }
}

/* micro-interação elegante (Apple feel) */
@media (hover:hover){
  .bcard__media{ transition: transform .35s ease, box-shadow .35s ease; }
  .bcard__media:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(0,0,0,.14);
  }
}
.benefit-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.benefit-card img{
  border-radius: 14px;
  margin-bottom: 12px;
}
.benefit-card img{
  transform: scale(1.05);
}
.benefit-card{
  transition: all .3s ease;
}

.benefit-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,.12);
}
/* ===== FIX: menos topo na seção de benefícios ===== */
.bgrid{
  padding: 56px 20px 86px; /* topo menor, base continua confortável */
}

.bgrid__head{
  margin-bottom: 24px; /* antes 40px */
}

/* Mobile */
@media (max-width: 860px){
  .bgrid{
    padding: 34px 16px 72px; /* topo menor no mobile */
  }
  .bgrid__head{
    margin-bottom: 18px;
  }
}
.hero-eyebrow{
  display: block;
  text-align: center;

  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: #6E6E73;
  margin-bottom: -15px;
}
/* ===== Apple 1% motion pack ===== */
.a-reveal{
  opacity: 0;
  will-change: transform, opacity, filter;
  animation-duration: .85s;
  animation-timing-function: cubic-bezier(.2,.9,.2,1);
  animation-fill-mode: forwards;
}

/* 1) Eyebrow: fade-in curto (sem “subir”) */
.a-eyebrow{
  animation-name: aFade;
  animation-delay: .05s;
}

/* 2) Headline: micro scale + blur (bem Apple) */
.a-headline{
  transform: scale(.985);
  filter: blur(8px);
  animation-name: aScaleBlur;
  animation-delay: .12s;
}

/* 3) Sub: vem de baixo (leve) */
.a-sub{
  transform: translateY(10px);
  filter: blur(8px);
  animation-name: aUpBlur;
  animation-delay: .20s;
}

/* 4) CTA: vem da direita (bem sutil) */
.a-cta{
  transform: translateX(10px);
  animation-name: aRight;
  animation-delay: .30s;
}

/* Produto: aparece + depois flutua */
.a-product{
  transform: translateY(12px);
  filter: blur(8px);
  animation-name: aUpBlur;
  animation-delay: .24s;
}

/* Keyframes */
@keyframes aFade{
  to{ opacity: 1; }
}

@keyframes aScaleBlur{
  to{
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes aUpBlur{
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes aRight{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Floating effect (depois que apareceu) ===== */
.a-product img{
  will-change: transform;
  animation: aFloat 3.4s ease-in-out .95s infinite alternate;
}

@keyframes aFloat{
  from{ transform: translateY(0px); }
  to{ transform: translateY(-10px); }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .a-reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .a-product img{ animation: none !important; }
}

.bcard__media{
  border-radius: 16px;
  overflow: hidden;
}
.section-fade{
  height: 60px;

  background: linear-gradient(
    to bottom,
    #F5F5F7 0%,
    #F5F5F7 20%,
    #FFFFFF 60%,
    #FFFFFF 100%
  );

  margin-top: -30px;
  margin-bottom: -30px;

  pointer-events: none;
}
.video-premium{
  padding: 110px 20px;
  background: #fff;
  text-align: center;
}

.video-wrap{
  max-width: 900px;
  margin: auto;
}

.video-wrap h2{
  font-size: 34px;
  margin-bottom: 10px;
}

.video-wrap p{
  color: #6E6E73;
  margin-bottom: 40px;
}

.video-frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.12);
}

.video-frame video{
  width: 100%;
  display: block;
}
.video-frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.12);

  aspect-ratio: 4 / 3;
}

.video-frame video{
  width: 100%;
  height: 100%;

  object-fit: cover; /* ESSA LINHA É A MÁGICA */

  display: block;
}
/* reduz espaço embaixo do grid */
.bgrid{
  padding-bottom: 0px;
}

/* reduz topo da seção de vídeo */
.video-premium{
  padding-top: 40px;
}
.pain-video{
  padding: 15px 20px;
  text-align: center;
  background: #fff;
}

.pain-video h2{
  font-size: 32px;
  margin-bottom: 8px;
}

.pain-video p{
  color: #6E6E73;
  margin-bottom: 30px;
}

.pain-frame{
  border-radius: 20px;
  overflow: hidden;
  max-width: 700px;
  margin: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,.10);
}

.pain-frame video{
  width: 100%;
  display: block;
  object-fit: cover;
}
/* fundo 100% branco, sem faixa */
.divider-wrap{
  background: #fff !important;
  padding: 18px 0;           /* respiro pequeno */
}

/* só a linha (forte no meio e some nas pontas) */
.divider-line{
  display: block;
  height: 2px;
  width: min(880px, 90%);
  margin: 0 auto;

  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,.18),
    rgba(0,0,0,0)
  );
}
.video-wrap h2{
  margin-top: 0;
  margin-bottom: 6px;
}

.video-wrap p{
  margin-bottom: 20px;
}
/* ===== Vídeo + checklist (Apple minimal) ===== */
.video-proof{
  background: #fff;
  padding: 56px 20px 86px; /* topo menor (sem "borda gigante") */
}

.video-proof__wrap{
  width: min(1120px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}

.video-proof__title{
  margin: 0 0 8px;
  font-size: clamp(22px, 3.1vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  color: #1D1D1F;
}

.video-proof__sub{
  margin: 0 0 20px;
  color: #6E6E73;
  font-size: 16px;
  line-height: 1.55;
  max-width: 520px;
}

/* checklist */
.proof-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

/* item minimalista com "check" elegante */
.proof-list li{
  position: relative;
  padding-left: 36px;
  font-size: 15px;
  color: #1D1D1F;
  line-height: 1.4;

  /* estado inicial (para animação) */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.9,.2,1), filter .65s ease;
}

.proof-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

.proof-list li::after{
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: rotate(-45deg);
  opacity: .9;
}

/* quando ativa, os itens aparecem */
.video-proof.is-on .proof-list li{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* stagger (um por um) */
.video-proof.is-on .proof-list li:nth-child(1){ transition-delay: .05s; }
.video-proof.is-on .proof-list li:nth-child(2){ transition-delay: .12s; }
.video-proof.is-on .proof-list li:nth-child(3){ transition-delay: .19s; }
.video-proof.is-on .proof-list li:nth-child(4){ transition-delay: .26s; }
.video-proof.is-on .proof-list li:nth-child(5){ transition-delay: .33s; }

/* seu frame do vídeo (sem faixa/borda) */
.video-frame{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.12);
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-frame video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* mobile */
@media (max-width: 860px){
  .video-proof{
    padding: 44px 16px 72px;
  }
  .video-proof__wrap{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .video-proof__left{
    text-align: left;
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .proof-list li{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
/* ===== GRID PRETO PREMIUM ===== */
.bgrid-dark{
  position: relative;
  background:
radial-gradient(circle at top, #141416, #050505 70%);

  color: #fff;
  overflow: hidden;
}

/* força textos do grid a ficarem claros */
.bgrid-dark .bgrid__title{ color: #fff; }
.bgrid-dark .bgrid__sub{ color: rgba(255,255,255,.72); }
.bgrid-dark .bcard__title{ color: #fff; }
.bgrid-dark .bcard__text{ color: rgba(255,255,255,.72); }

/* cards: vitrine no escuro */
.bgrid-dark .bcard__media{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}

/* dots no mobile */
.bgrid-dark .bdot{ background: rgba(255,255,255,.22); }
.bgrid-dark .bdot.is-active{ background: rgba(255,255,255,.72); }

/* ===== ARC DIVIDERS (curva premium, não “onda”) ===== */
.arc{
  height: 28px;                 /* sutil */
  background: #fff;             /* cor da seção vizinha (branco) */
}

/* curva “recortada” usando mask (fica MUITO premium) */
@supports (-webkit-mask-image: radial-gradient(circle, #000 60%, transparent 61%)){
  .arc{
    background: #fff;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 100%, transparent 55%, #000 56%);
            mask-image: radial-gradient(120% 120% at 50% 100%, transparent 55%, #000 56%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  .arc--bottom{
    transform: rotate(180deg); /* espelha para “sentido oposto” */
  }
}

/* fallback (se mask não suportar): vira divisor reto elegante */
@supports not (-webkit-mask-image: radial-gradient(circle, #000 60%, transparent 61%)){
  .arc{
    background: linear-gradient(to bottom, rgba(255,255,255,.9), #fff);
  }
}
.bgrid-dark .bcard__media{
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
}
.acc{
  background: #fff;
  padding: 0px 20px;
}

.acc__wrap{
  width: min(1120px, 92vw);
  margin: auto;
  text-align: center;
}

.acc__eyebrow{
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6E6E73;
}

.acc__title{
  margin: 6px 0 8px;
  font-size: 32px;
  color: #1D1D1F;
}

.acc__sub{
  color: #6E6E73;
  margin-bottom: 36px;
}

.acc__row{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

.acc__item{
  display: grid;
  gap: 12px;
  justify-items: center;
}

.acc__chip{
  width: 90px;
  height: 90px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.acc__chip img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acc__item h3{
  margin: 0;
  font-size: 15px;
}

.acc__item p{
  margin: 0;
  font-size: 14px;
  color: #6E6E73;
  max-width: 220px;
}

/* hover premium */
@media (hover:hover){
  .acc__chip{
    transition: .3s ease;
  }

  .acc__chip:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 60px rgba(0,0,0,.12);
  }
}

/* mobile */
@media(max-width:860px){

  .acc__row{
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
  }

  .acc__item{
    scroll-snap-align: center;
  }
}
.specs{
  background: #ffffff;
  padding: 10px 20px;
}

.specs-wrap{
  width: min(900px, 92vw);
  margin: auto;
}

.specs h2{
  text-align: center;
  font-size: 32px;
  margin-bottom: 28px;
  color: #1D1D1F;
}

.specs-table{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fafafa;
}

.spec-row{
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 15px;
}

.spec-row:nth-child(even){
  background: rgba(0,0,0,.02);
}

.spec-row span:last-child{
  font-weight: 500;
  color: #1D1D1F;
}
:root{
  --bg: #ffffff;
  --text: #0b0f17;
  --muted: rgba(11,15,23,.62);
  --hair: rgba(11,15,23,.10);
  --chip: rgba(11,15,23,.06);
  --chip2: rgba(11,15,23,.08);
  --radius: 18px;
  --green: #16a34a;
  --green2: #0f7a34;
}

*{ box-sizing:border-box; }
body{ background: var(--bg); color: var(--text); }

.cta{
  background:#fff;
  padding: 40px 16px 56px;
}

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

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

.cta__kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,15,23,.45);
  margin: 0 0 10px;
}

.cta__title{
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.12;
  margin: 0 0 10px;
  font-weight: 700;
}

.cta__sub{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.cta__media{
  margin: 22px 0 10px;
}

#ctaMainImg{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 22px;
  background:#fff; /* garante fundo branco */
  transition: opacity .18s ease;
  border: 1px solid rgba(11,15,23,.08);
}

/* thumbs */
.cta__thumbs{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding: 12px 2px 4px;
  scrollbar-width: none;
}
.cta__thumbs::-webkit-scrollbar{ display:none; }

.cta-thumb{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(11,15,23,.10);
  background:#fff;
  padding: 0;
  flex: 0 0 auto;
  cursor:pointer;
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cta-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.cta-thumb.is-active{
  border-color: rgba(11,15,23,.28);
  box-shadow: 0 6px 22px rgba(11,15,23,.10);
}
.cta-thumb:active{ transform: scale(.98); }

/* variants */
.cta__variants{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin: 18px 0 12px;
}
.cta-variant{
  border: 1px solid rgba(11,15,23,.12);
  background: rgba(11,15,23,.04);
  color: rgba(11,15,23,.85);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor:pointer;
  transition: background .16s ease, border-color .16s ease, transform .08s ease;
}
.cta-variant.is-active{
  background: rgba(11,15,23,.08);
  border-color: rgba(11,15,23,.22);
}
.cta-variant:active{ transform: scale(.99); }

/* pricing */
.cta__pricing{
  text-align:center;
  padding: 12px 0 0;
}

.cta__compareRow{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
}

.cta__compare{
  color: rgba(11,15,23,.45);
  text-decoration: line-through;
  font-size: 14px;
}

.cta__off{
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,15,23,.72);
  background: rgba(11,15,23,.06);
  border: 1px solid rgba(11,15,23,.10);
  padding: 4px 8px;
  border-radius: 999px;
  transform: translateY(-1px);
}

.cta__saleRow{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:center;
}

.cta__sale{
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -.02em;
}

.cta__install{
  color: rgba(11,15,23,.72);
  font-size: 13px;
}
.cta__install b{ color: rgba(11,15,23,.92); }

/* perks */
.cta__perks{
  margin: 18px auto 0;
  display:grid;
  gap: 12px;
  max-width: 720px;
}

.mx-perk{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border: 1px solid rgba(11,15,23,.10);
  border-radius: 16px;
  background: #fff;
}

.mx-perk__ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(11,15,23,.05);
  color: rgba(11,15,23,.85);
  flex: 0 0 auto;
}
.mx-perk__ico svg{ width: 18px; height: 18px; }

.mx-perk__txt{
  margin: 0;
  font-size: 13px;
  color: rgba(11,15,23,.72);
  line-height: 1.35;
}
.mx-perk__txt b{ color: rgba(11,15,23,.95); }

/* CTA button */
.cta__actions{
  margin-top: 18px;
  text-align:center;
}

.cta-btn{
  width: min(520px, 100%);
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  cursor:pointer;
  background: linear-gradient(180deg, #22c55e, var(--green));
  box-shadow: 0 12px 30px rgba(22,163,74,.22);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.cta-btn:hover{ filter: brightness(1.02); box-shadow: 0 14px 34px rgba(22,163,74,.26); }
.cta-btn:active{ transform: translateY(1px) scale(.99); }

.cta__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(11,15,23,.55);
}

/* desktop spacing */
@media (min-width: 860px){
  .cta{ padding: 54px 16px 72px; }
  .cta__perks{ grid-template-columns: repeat(3, 1fr); }
}
/* =========================
   PATCH PREMIUM — CTA
   (cole no final do seu CSS)
========================= */

/* 1) “Ambiente” atrás do produto (luz suave + depth) */
.cta__media{
  position: relative;
  isolation: isolate;
}
.cta__media::before{
  content:"";
  position:absolute;
  inset: -10px -12px -16px;
  border-radius: 26px;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(11,15,23,.06) 0%, rgba(11,15,23,0) 60%),
    radial-gradient(60% 55% at 20% 30%, rgba(34,197,94,.10) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(60% 55% at 80% 35%, rgba(22,163,74,.08) 0%, rgba(22,163,74,0) 55%);
  z-index: 0;
  pointer-events:none;
}
.cta__media::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -10px;
  height: 20px;
  filter: blur(14px);
  background: rgba(11,15,23,.14);
  opacity: .16;
  z-index: 0;
  pointer-events:none;
}

#ctaMainImg{
  position: relative;
  z-index: 1;
  border: 1px solid rgba(11,15,23,.09);
  box-shadow:
    0 18px 50px rgba(11,15,23,.10),
    0 1px 0 rgba(255,255,255,.7) inset;
}

/* 2) Thumbs com “ring” premium + hover */
.cta-thumb{
  border-color: rgba(11,15,23,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.cta-thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(11,15,23,.10);
  border-color: rgba(11,15,23,.18);
}
.cta-thumb.is-active{
  border-color: rgba(11,15,23,.24);
  box-shadow:
    0 10px 28px rgba(11,15,23,.12),
    0 0 0 3px rgba(22,163,74,.16);
}

/* 3) Variantes “chip” premium (com bolinha de cor) */
.cta__variants{
  margin: 16px 0 10px;
}
.cta-variant{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: rgba(11,15,23,.03);
  border-color: rgba(11,15,23,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.cta-variant::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(11,15,23,.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset;
}
.cta-variant[data-variant="preto"]::before{ background: #0b0f17; }
.cta-variant[data-variant="branco"]::before{ background: #ffffff; box-shadow: 0 0 0 1px rgba(11,15,23,.18) inset; }

.cta-variant:hover{
  border-color: rgba(11,15,23,.18);
  background: rgba(11,15,23,.05);
}
.cta-variant.is-active{
  background: rgba(11,15,23,.085);
  border-color: rgba(11,15,23,.24);
  box-shadow:
    0 10px 24px rgba(11,15,23,.10),
    0 0 0 3px rgba(22,163,74,.12);
}

/* 4) Preço: hierarquia + OFF mais elegante */
.cta__pricing{
  padding-top: 10px;
}
.cta__off{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(11,15,23,.78);
  background: rgba(11,15,23,.045);
  border-color: rgba(11,15,23,.08);
  padding: 3px 8px;
}
.cta__install{
  color: rgba(11,15,23,.64);
}

/* 5) Perks com “fill” leve (menos borda seca) */
.mx-perk{
  border-color: rgba(11,15,23,.08);
  background: rgba(11,15,23,.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}
.mx-perk__ico{
  background: rgba(11,15,23,.055);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}

/* 6) CTA: brilho sutil + micro feedback */
.cta-btn{
  position: relative;
  overflow: hidden;
}
.cta-btn::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  transform: translateX(-30%);
  opacity: .0;
  transition: opacity .22s ease, transform .22s ease;
}
.cta-btn:hover::before{
  opacity: .85;
  transform: translateX(0%);
}
.cta__note{
  color: rgba(11,15,23,.52);
}

/* 7) reduz “cara de bloco colado” */
.cta__thumbs{ padding-bottom: 8px; }
.cta__micro{
  margin: 0 0 8px;
  font-size: 12px;
  color: rgba(11,15,23,.48);
  letter-spacing: .02em;
  margin-top: 10px;
}
/* =========================
   FRETE — Apple Clean Block
========================= */

.nxShip{
  margin: 22px auto 0;
  padding: 0px 16px;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7faf8 100%
  );

  border: 1px solid rgba(11,15,23,.08);
  border-radius: 18px;

  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 14px 36px rgba(11,15,23,.06);

  max-width: 720px;
}

/* layout */
.nxShip__row{
  display:flex;
  align-items:center;
  gap: 14px;
}

/* logo */
.nxShip__logo{
  width: 44px;
  height: auto;
  flex: 0 0 auto;

  filter: saturate(.95) contrast(1.05);
}

/* texto */
.nxShip__txt{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

/* linha principal */
.nxShip__line1{
  font-size: 14px;
  line-height: 1.2;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  align-items:center;
}

/* destaque frete grátis */
.nxShip__free{
  color: #16a34a;
  font-weight: 800;
  letter-spacing: .02em;
}

/* “para” */
.nxShip__to{
  color: rgba(11,15,23,.55);
}

/* cidade */
.nxShip__city{
  color: rgba(11,15,23,.9);
  font-weight: 700;
}

/* linha secundária */
.nxShip__line2{
  font-size: 12.5px;
  color: rgba(11,15,23,.6);
  line-height: 1.3;
}

/* micro animação suave quando atualiza */
.nxShip__city,
.nxShip__line2{
  transition: opacity .25s ease, transform .25s ease;
}

.nxShip__city:empty,
.nxShip__line2:empty{
  opacity:.6;
}

/* hover sutil desktop */
@media (hover:hover){
  .nxShip:hover{
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 18px 44px rgba(11,15,23,.08);
    transform: translateY(-1px);
    transition: all .25s ease;
  }
}

/* mobile ajuste */
@media (max-width: 480px){
  .nxShip{
    padding: 12px 14px;
  }

  .nxShip__line1{
    font-size: 13px;
  }

  .nxShip__line2{
    font-size: 12px;
  }
}
/* =========================
   FIX — espaçamento entre CTA e frete
========================= */

.cta{
  padding-bottom: 28px !important;
  margin-bottom: 0 !important;
}

.nxShip{
  margin-top: 8px !important;
}
/* remove bolinha/dot dentro do chip de cor (caso seja ::before) */
.cta-variant::before{
  content: none !important;
  display: none !important;
}

/* remove bolinha/dot (caso você tenha um span tipo .dot dentro do botão) */
.cta-variant .dot,
.cta-variant .bullet,
.cta-variant i{
  display: none !important;
}

/* garante padding normal sem “espaço do dot” */
.cta-variant{
  padding-left: 14px !important;
}
.cta__variantsTitle{
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(11,15,23,.55);
  text-align: left;
}
/* Cores para esquerda */
.cta__variants{
  justify-content: flex-start !important;
}

/* Preços para esquerda */
.cta__pricing{
  text-align: left !important;
}

.cta__compareRow{
  justify-content: flex-start !important;
}

.cta__saleRow{
  align-items: flex-start !important;
}

/* Botão para esquerda */
.cta__actions{
  text-align: left !important;
}
/* ===== PREÇO PREMIUM DOMINANTE ===== */

.cta__sale{
  font-size: clamp(36px, 6vw, 52px) !important;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--green);
}

.cta__compare{
  font-size: 16px;
}

.cta__install{
  font-size: 14px;
}
/* ===== CTA pulse premium ===== */

.cta-btn{
  animation: ctaPulse 2.4s ease-in-out infinite;
}

@keyframes ctaPulse{

  0%{
    box-shadow: 0 12px 30px rgba(22,163,74,.22);
    transform: scale(1);
  }

  50%{
    box-shadow: 0 18px 42px rgba(22,163,74,.32);
    transform: scale(1.02);
  }

  100%{
    box-shadow: 0 12px 30px rgba(22,163,74,.22);
    transform: scale(1);
  }

}
/* ===== COUNTER PREMIUM ===== */

.nx-counter{
  text-align: center;
  padding: 20px 20px;
}

.nx-counter__label{
  font-size: 14px;
  color: rgba(0,0,0,.55);
  margin: 0;
}

.nx-counter__number{
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 6px 0;
  color: #0b0f17;
}

.nx-counter__sub{
  font-size: 14px;
  color: rgba(0,0,0,.65);
  margin: 0;
}
/* =========================
   FEEDBACKS — CAROUSEL VIDEO
========================= */

.fb{
  padding: 26px 16px 10px;
  background: #fff;
}

.fb__head{
  max-width: 980px;
  margin: 0 auto 14px;
  text-align: left;
}

.fb__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,15,23,.45);
}

.fb__title{
  margin: 0 0 6px;
  font-size: clamp(18px, 3.6vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0b0f17;
}

.fb__sub{
  margin: 0;
  font-size: 13px;
  color: rgba(11,15,23,.62);
}

/* shell + nav */
.fb__shell{
  position: relative;
  max-width: 980px;
  margin: 14px auto 0;
}

.fb__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
  scrollbar-width: none;
}
.fb__track::-webkit-scrollbar{ display:none; }

@media (min-width: 720px){
  .fb__track{ grid-auto-columns: 44%; }
}
@media (min-width: 980px){
  .fb__track{ grid-auto-columns: 32%; }
}

.fb__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(11,15,23,.12);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(11,15,23,.10);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: rgba(11,15,23,.85);
}

@media (min-width: 860px){
  .fb__nav{ display:flex; }
}
.fb__nav--prev{ left: -10px; }
.fb__nav--next{ right: -10px; }
.fb__nav:active{ transform: translateY(-50%) scale(.98); }

/* card */
.fbCard{
  scroll-snap-align: start;
  border: 1px solid rgba(11,15,23,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(11,15,23,.06);
  padding: 14px;
}

.fbCard__top{
  display:flex;
  gap: 10px;
  align-items:center;
}

.fbCard__avatar{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(11,15,23,.10);
}

.fbCard__who{ flex: 1; min-width: 0; }

.fbCard__nameRow{
  display:flex;
  align-items:center;
  gap: 8px;
}

.fbCard__name{
  font-weight: 800;
  font-size: 14px;
  color: #0b0f17;
}

.fbCard__verified{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
  color: rgba(11,15,23,.78);
}
.fbCard__verified svg{ width: 18px; height: 18px; display:block; }

.fbCard__stars{
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(11,15,23,.72);
}

.fbCard__text{
  margin: 10px 0 12px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(11,15,23,.72);
}

/* video 3:4 */
.fbCard__media{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(11,15,23,.10);
  background: rgba(11,15,23,.03);
  aspect-ratio: 3 / 4;
}

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

/* sound toggle */
.fbCard__sound{
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.fbCard__sound.is-on{
  background: rgba(22,163,74,.75);
}

/* dots */
.fb__dots{
  max-width: 980px;
  margin: 10px auto 0;
  display:flex;
  justify-content:center;
  gap: 8px;
}

.fbDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(11,15,23,.18);
  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
}
.fbDot.is-active{
  background: rgba(11,15,23,.55);
  transform: scale(1.2);
}
/* ===== FAQ PREMIUM ===== */

.faq{
  padding: 72px 16px;
  background: #fff;
  max-width: 880px;
  margin: auto;
}

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

.faq__kicker{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#6e6e73;
}

.faq__title{
  font-size: clamp(24px,4vw,36px);
  margin: 6px 0;
}

.faq__sub{
  color:#6e6e73;
  font-size:14px;
}

.faqItem{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.faqQ{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:18px 0;
  font-size:16px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.faqIcon{
  width:14px;
  height:14px;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  transform:rotate(45deg);
  transition:.3s;
}

.faqItem.active .faqIcon{
  transform:rotate(-135deg);
}

.faqA{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.faqInner{
  padding-bottom:18px;
  color:#555;
  font-size:14px;
  line-height:1.6;
}
.stats-number{
  font-family: var(--nx-font);
  font-weight: 800;
  letter-spacing: -.02em;

  font-size: clamp(42px, 7vw, 64px);
  line-height: 1;

 
}