/* =========================================================
   Landing V2 (OTIMIZADO)
   - remove duplicações
   - concentra tokens em variáveis
   - mantém o visual atual
========================================================= */

/* =========================
   TOKENS (variáveis)
========================= */
:root{
  /* layout */
  --container: 1120px;
  --padX: 18px;

  /* cores */
  --bg: #f6f7f9;
  --bgHero: #f6f7f9;
  --white: #fff;
  --text: #0f172a;
  --muted: #52607a;
  --muted2: #6b7a94;

  --brand: #F58634;
  --brandDark: #e06b1f;
  --whats: #25D366;

  /* bordas/linhas */
  --line: rgba(15,23,42,.10);
  --borderSoft: rgba(15,23,42,.06);
  --border: rgba(15,23,42,.08);
  --borderStrong: rgba(15,23,42,.12);

  /* sombras */
  --shadowCard: 0 26px 70px rgba(15,23,42,.10);
  --shadowSoft: 0 16px 44px rgba(15,23,42,.08);
  --shadowHover: 0 34px 84px rgba(15,23,42,.12);

  /* radius */
  --radius: 15px;
  --radiusBtn: 15px;

  /* espaçamentos */
  --sectionY: 70px;
  --sectionYsm: 64px;
  --heroPad: 22px 0 64px;
  --heroPadSm: 18px 0 58px;

  /* tipografia */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --fsBase: 17px;

  /* botões */
  --btnPad: 16px 22px;
  --ctaMinW: 320px;

  /* gradientes */
  --stepGrad: linear-gradient(180deg, #ff9d2a, #ff7a00);
}

/* =========================
   RESET / BASE
========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-size: var(--fsBase);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.wrap{ max-width: var(--container); margin:0 auto; padding:0 var(--padX); }
.center{ text-align:center; }

/* =========================
   TOP
========================= */
.top{ background: var(--bgHero); }
.topInner{
  display:flex;
  justify-content:center;
  align-items:center;
  height:64px;
}
.brand img{ height:34px; width:auto; }

/* =========================
   SEÇÕES / HERO
========================= */
.section{ padding: var(--sectionY) 0; }
.hero{
  padding: var(--heroPad);
  background: var(--bgHero);
}

/* =========================
   TIPOGRAFIA
========================= */
.premissa{
  margin:0 0 10px;
  font-weight:600;
  color: var(--brandDark);
  letter-spacing:.2px;
}
.headline{
  margin:0 0 12px;
  font-weight:900;
  font-size: clamp(30px,4.2vw,52px);
  line-height:1.05;
  letter-spacing:-.02em;
}
.subhead{
  margin:0 auto 22px;
  max-width:860px;
  font-weight:400;
  color: var(--muted);
  line-height:1.7;
  font-size: 17px;
}

/* faixa do hero */
.heroStrip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius: var(--radius);
  background: var(--white);
  border:1px solid var(--border);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  color: var(--muted);
  font-weight:600;
  margin: 10px auto 18px;
  max-width: 900px;
}

/* =========================
   HERO POINTS
========================= */
.heroPoints{
  width:min(980px, 100%);
  margin: 0 auto 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 28px;
  text-align:left;
  font-size:15.5px;
  line-height:1.75;
  color: var(--muted);
}
.heroPoints .point:nth-child(3){ grid-column: 1 / -1; }

.point{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.point::before{
  content:"–";
  color: rgba(15,23,42,.40);
  font-weight:700;
}
.point p{ margin:0; font-weight:400; }

/* =========================
   VÍDEO
========================= */
.heroMedia{
  display:flex;
  justify-content:center;
  margin: 18px 0;
}
.videoBox{
  width:min(860px, 100%);
  border-radius: var(--radius);
  background: var(--white);
  border:1px solid var(--border);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}
.videoPlaceholder{
  aspect-ratio: 16 / 9;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:
    radial-gradient(600px 220px at 50% 40%, rgba(255,141,25,.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}
.playDot{
  width:54px;height:54px;
  border-radius:999px;
  background: var(--brand);
  box-shadow: 0 18px 44px rgba(255,141,25,.28);
  position:relative;
}
.playDot:after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-40%,-50%);
  width:0;height:0;
  border-left:14px solid var(--white);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.playText{ font-weight:700; color: var(--text); }

/* =========================
   BOTÕES / CTAs
========================= */
.btn, .bigCta, .accBtn{
  border-radius: var(--radiusBtn);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--btnPad);
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition: background-color .32s cubic-bezier(.2,.8,.2,1),
              color .32s cubic-bezier(.2,.8,.2,1),
              border-color .32s cubic-bezier(.2,.8,.2,1),
              transform .20s cubic-bezier(.2,.8,.2,1);
}

.btnPrimary{
  background: var(--brand);
  color: var(--white);
  min-width: var(--ctaMinW);
  box-shadow:none;
}
.btnGhost{
  background: var(--white);
  border-color: var(--line);
  color: var(--text);
  min-width:220px;
  box-shadow: var(--shadowSoft);
}

/* hover padrão CTA (btnPrimary + bigCta) */
.btnPrimary, .bigCta{ border:1px solid transparent; }
.btnPrimary:hover,
.btnPrimary:focus-visible,
.bigCta:hover,
.bigCta:focus-visible{
  background: var(--white) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
  text-decoration:none;
}
.btnPrimary:hover svg,
.btnPrimary:focus-visible svg,
.bigCta:hover svg,
.bigCta:focus-visible svg{
  stroke: var(--brand) !important;
  fill: var(--brand) !important;
}

.ctaInline{ margin-top:26px; display:flex; justify-content:center; }
.ctaStack{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin: 18px 0 10px;
}

/* =========================
   CARDS / GRIDS (base)
========================= */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  align-items:stretch;
  margin-top:8px;
}

.card, .proofBox, .quote, .step, .kitCard, .footer, .videoBox{
  border-radius: var(--radius);
}

.card{
  position:relative;
  background: var(--white);
  border:1px solid var(--borderSoft);
  box-shadow: var(--shadowCard);
  text-align:left;
  overflow:hidden;
  padding:34px 30px 30px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadowHover);
}
.card::before{
  content:"";
  display:block;
  width:44px;
  height:44px;
  margin-bottom:14px;
  border-radius:14px;
  background: rgba(255,141,25,.10);
  box-shadow: 0 18px 40px rgba(255,141,25,.14);
}
.card h3{
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: var(--brand);
  font-size:22px;
}
.card p{ margin:0; font-weight:400; color: var(--muted); line-height:1.75; }

/* =========================
   PROOF
========================= */
.proofBox{
  display:none;
  margin-top:20px;
  background: var(--white);
  border:1px solid var(--borderSoft);
  padding:20px;
  box-shadow: var(--shadowSoft);
}
.proofGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.quote{
  background: var(--white);
  border:1px solid var(--border);
  padding:16px;
  box-shadow: 0 16px 40px rgba(15,23,42,.07);
  font-weight:400;
  color: var(--muted);
  line-height:1.75;
}

/* =========================
   PASSOS (faixa laranja dentro do card)
   - use no HTML: <div class="step stepCard">...
     <div class="stepTop">Passo 01</div>
     <div class="stepBody">...</div>
========================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:14px;
}
.step{
  background: var(--white);
  border:1px solid var(--borderSoft);
  box-shadow: var(--shadowSoft);
}
.stepCard{
  padding:0 !important;
  overflow:hidden;
  text-align:center;
}
.stepTop{
  background: var(--stepGrad);
  color: var(--white);
  font-weight:700;
  font-size:18px;
  padding:22px 16px;
}
.stepBody{ padding:26px 22px 30px; }
.stepBody h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  color:#374151;
}
.stepBody p{
  margin:0;
  font-size:15px;
  color:#6b7280;
  line-height:1.6;
}
/* remove pill antiga (se existir no HTML) */
.pill{ display:none !important; }

/* =========================
   FAQ — estilo do print (menor bold/tamanho)
========================= */
.faqList{
  max-width: 980px;
  margin: 22px auto 0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faqItem{
  background: var(--white);
  border: 1px solid var(--borderStrong);
  border-radius: 10px;
  padding: 16px 16px 12px;
}
.faqQ{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  text-align:left;
}
.faqTitle{
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 500; /* menos bold */
  color: var(--text);
}
.faqIcon{
  margin-top: 6px;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:9px solid var(--text);
  opacity:.9;
  transition: transform .18s ease;
}
.faqA{
  padding: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.faqA p{ margin:0; }
.faqItem.is-open .faqIcon{ transform: rotate(-180deg); }

/* =========================
   CONVERSION
========================= */
.conversion{ padding-top: 34px; }
.conversionBox{ max-width: 880px; margin: 0 auto; }

.bigCta{
  display:block;
  width:100%;
  text-align:center;
  padding:20px 26px;
  background: var(--brand);
  color: var(--white);
  font-size:20px;
  font-weight:500;
  margin-bottom:48px;
}

/* lista */
.convList{ display:flex; flex-direction:column; }
.convItem{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:28px 4px;
}
.convDivider{ height:1px; background: var(--line); margin: 6px 0; }

.convIcon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--brand);
  filter: saturate(1.2);
}
.convIcon svg{ width:28px; height:28px; stroke: var(--brand); }

.convText h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:600;
  color: var(--text);
}
.convText p{
  margin:0;
  font-size:15px;
  color:#64748b;
  line-height:1.6;
}

/* =========================
   MANIFESTO
========================= */
.manifesto{ padding-top: 52px; }
.manifestoBox{
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.mTitle{
  margin: 0 0 16px;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--text);
}
.mAccent{ color: var(--brand); }
.mText p{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 400;
}
.mStrong{ color: var(--text); }
.mCta{ margin-top: 18px; display:flex; justify-content:center; }
.mCta .btnPrimary{ width: min(520px, 100%); }
.mSignature{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted2);
  font-size: 14px;
  font-weight: 400;
}
.mSignature span{ color: var(--muted); }

/* =========================
   STATS
========================= */
.statsTitle{
  margin:0 auto 8px;
  max-width:900px;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height:1.2;
  font-weight:800;
}
.statsSub{
  margin:0 auto 22px;
  max-width:860px;
  color: var(--muted);
  font-weight:400;
  line-height:1.7;
}
.statCard::before{ content:none !important; display:none !important; }
.statIcon{ width:34px;height:34px; display:flex;align-items:center;justify-content:center; margin-bottom:10px; }
.statIcon svg{ width:28px;height:28px; }
.statNum{ font-size:28px; font-weight:800; color: var(--text); line-height:1.1; }
.statLabel{
  margin-top:2px;
  color: var(--brandDark);
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.statDesc{ margin-top:10px; color: var(--muted); font-weight:400; line-height:1.65; }

/* =========================
   DESAFIO + KITS (somente imagens)
   - remove duplicações de .kitsGrid
========================= */
.desTitle{
  margin:0 auto 10px;
  max-width:920px;
  font-size:clamp(22px,2.8vw,34px);
  line-height:1.15;
  font-weight:800;
}
.desSub{
  margin:0 auto 26px;
  max-width:860px;
  color: var(--muted);
  font-weight:400;
  line-height:1.7;
}

.kitsGrid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  text-align:left;
}
.kitOnly{
  display:block;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  overflow:visible;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kitOnly:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}
.kitOnly img{
  width:100%;
  height:auto;
  max-height:300px;
  object-fit:contain;
  border-radius: var(--radius);
}

.kitsMore{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.kitsHint{ font-size:13px; color: var(--muted2); }
.kitsFooter{ position:relative; z-index:5; margin-top:26px; text-align:center; }
#kitsMore{ position:relative; z-index:6; }

/* =========================
   FOOTER + WHATS
========================= */
.footer{
  padding:46px 0;
  border-top:1px solid var(--border);
  background: var(--white);
}
.fine{ margin:0; color: var(--muted2); font-size:14px; font-weight:400; }

.whatsFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--whats);
  border-radius:999px;
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
  z-index:60;
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsFloat:hover{
  transform: translateY(-3px);
  box-shadow: 0 34px 88px rgba(15,23,42,.22);
}
.whatsFloat svg{ width:30px; height:30px; fill: var(--white); }

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 1024px){
  .kitsGrid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  :root{ --padX: 16px; }
  .topInner{ height:60px; }
  .brand img{ height:32px; }

  .section{ padding: var(--sectionYsm) 0; }
  .hero{ padding: var(--heroPadSm); }

  .grid3, .proofGrid, .steps{ grid-template-columns:1fr; }
  .btnPrimary, .btnGhost{ min-width:100%; }

  .heroPoints{ grid-template-columns:1fr; }
  .heroPoints .point:nth-child(3){ grid-column:auto; }

  .kitsGrid{ grid-template-columns: repeat(2, 1fr); }
  .kitOnly img{ max-height: 240px; }
}

@media (max-width: 640px){
  .bigCta{ font-size:18px; padding:18px; }

  /* KITS — 2 por linha no celular */
  .kitsGrid{ grid-template-columns: repeat(2, 1fr) !important; gap:12px !important; }
  .kitOnly img{ max-height: 220px; }

  /* FAQ mais compacto */
  .faqTitle{ font-size: 14px; }
  .faqA{ font-size: 14.5px; }
}

@media (max-width: 420px){
  .kitsGrid{ grid-template-columns: 1fr; }
  .kitOnly img{ max-height: 200px; }
}
/* =========================
   KITS — 5 por linha + mais juntos + radius leve (desktop)
========================= */
:root{
  --kitColsDesktop: 5;
  --kitGapDesktop: 10px;   /* mais junto */
  --kitRadius: 10px;       /* leve arredondado */
}

.kitsGrid{
  grid-template-columns: repeat(var(--kitColsDesktop), 1fr) !important;
  gap: var(--kitGapDesktop) !important;
}

/* radius leve nos kits (imagem) */
.kitOnly img{
  border-radius: var(--kitRadius) !important;
}

/* opcional: deixa o hover bem sutil (sem “separar” muito) */
.kitOnly:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05) !important;
}

/* =========================
   Responsivo (mantém o que você já queria)
========================= */
@media (max-width: 1024px){
  .kitsGrid{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 900px){
  .kitsGrid{ grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px){
  .kitsGrid{ grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 420px){
  .kitsGrid{ grid-template-columns: 1fr !important; }
}
/* =========================
   KITS — MOBILE 2 por linha + border radius
========================= */
@media (max-width: 640px){

  /* força 2 por linha */
  .kitsGrid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;            /* deixa levemente juntos */
  }

  /* garante que o card respeite o radius */
  .kitOnly{
    border-radius: 10px !important;
    overflow: hidden !important;     /* corta a imagem dentro do radius */
  }

  /* imagem ocupa todo espaço e mantém radius */
  .kitOnly img{
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    object-fit: cover;
  }
}
/* Espaço maior entre título e grid de kits */
.desTitle{
  margin-bottom: 28px;   /* antes era menor */
}

/* Cor laranja da marca no texto */
.brandText{
  color: var(--brand);
}
.depoGrid{
  column-count: 4;
  column-gap: 8px;
}

.depoItem{
  break-inside: avoid;
  margin-bottom: 8px;
}

.depoItem img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}
@media (max-width: 900px){
  .depoGrid{ column-count: 3; }
}
@media (max-width: 640px){
  .depoGrid{ column-count: 2; }
}