/* ========== VARS & RESET ========== */
:root{
  --green-1:#7ed04a;
  --green-2:#63b338;
  --green-dark:#2f6b2a;
  --muted:#6b7280;
  --bg:#f6f8f9;
  --card:#ffffff;
  --accent-gradient: linear-gradient(135deg,var(--green-1),var(--green-2));
  --hero-bg: url('hero-bg.jpg'); /* <- troque por sua imagem (ou deixe vazio) */
  --max-width:1200px;
}

li{
    list-style: none;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:#0b1220;background:var(--bg);-webkit-font-smoothing:antialiased;
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* ===== header ===== */
.site-header{background:#fff;box-shadow:0 6px 18px rgba(8,12,20,0.06);position:sticky;top:0;z-index:80}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-weight:800;color:var(--green-1);font-size:20px;letter-spacing:0.2px}
.logo span{color:#0b1220}
.tag{font-size:12px;color:var(--muted)}
.main-nav{display:flex;align-items:center;gap:18px}
.main-nav a{font-weight:600;padding:8px 6px;transition:color .22s ease,transform .18s ease}
.main-nav a:hover{color:var(--green-dark)}
.main-nav .btn-contact{background:var(--green-1);color:white;padding:8px 20px;border-radius:999px;font-weight:700;box-shadow:0 8px 20px rgba(49,128,46,0.12);transition:transform .18s ease}
.mobile-toggle{display:none;background:transparent;border:none;font-size:20px}

/* ===== HERO (grid for responsive placement) ===== */
.hero{ padding: 50px 0;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02)); scroll-snap-align: start; /* trava no início da seção */;position:relative; overflow:hidden}
/* optional hero background image: set --hero-bg in :root to your URL */
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image: var(--hero-bg);
  background-size:cover;
  background-position:center;
  opacity:0.06;pointer-events:none;
  filter:blur(2px) saturate(.95);
}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:20px;align-items:center}
.hero-text{padding:8px; display: flex; flex-direction: column; align-items: center;}
.eyebrow{color:var(--muted);font-weight:700;margin-bottom:8px}
.hero-title{font-size:44px;line-height:1.02;margin:0 0 12px}
.hero-title strong{color:#0b1220}
.hero-lead{color:var(--muted);max-width:640px;margin-bottom:18px; text-align: center;}

/* CTA area placed under text (desktop rows) */
.hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;border:none}
.btn-primary{background:var(--accent-gradient);color:white;box-shadow:0 12px 30px rgba(50,120,50,0.12);transition:transform .28s cubic-bezier(.2,.9,.3,1),filter .28s}
.btn-ghost{background:transparent;border:1px solid rgba(12,20,30,0.06);color:var(--green-dark);padding:10px 16px}
/* button micro animation: gradient shift */
.btn-primary:hover{transform:translateY(-6px);filter:brightness(1.03)}
.btn-primary:active{transform:translateY(-2px) scale(.995)}

/* hero media (video) */
.hero-media{width:70%;height:90%;min-height:260px;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(10,20,30,0.12);background:#000}
.wistia_responsive_wrapper, .wistia_responsive_padding{height:90%}

/* ===== sections ===== */
.section{padding:48px 0;
    height: 100vh; /* cada seção ocupa 100% da tela */
  scroll-snap-align: start; /* trava no início da seção */
  display: flex;
  justify-content: center;
  align-items: center;
}
h2{font-size:28px;text-align:center;margin-bottom:18px}
.muted{color:var(--muted); text-align: justify; padding: 3px;}

/* ===== stats ===== */
.stats{display:flex;gap:18px;margin-top:18px;justify-content: center;}
.stats .num1{background-color: #84e245;}
.stats .num2{background-color: #cbd5e1;}
.stat{background:var(--card);padding:18px;width: 180px;border-radius:12px;box-shadow:0 8px 30px rgba(10,20,30,0.04);min-width:140px;text-align:center}
.stat-num{font-size:32px;font-weight:800;color:var(--green-dark); text-align: center;}
.stat-label{color:var(--muted);font-size:16px; text-align: center;}

/* ===== cards grid ===== */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);padding:20px;border-radius:14px;box-shadow:0 10px 30px rgba(10,20,30,0.05);transition:transform .28s ease,box-shadow .28s}
.card p{font-weight: 300;margin-top: 7px;}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 70px rgba(10,20,30,0.09)}
.pillar{font-weight:700;text-align:center;padding:28px}

/* leader */
.leader-grid{display:flex;gap:18px;align-items:center}
.leader-avatar{width:120px;height:120px;border-radius:16px;background:linear-gradient(180deg,#f1f5f9,#e6eef6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;box-shadow:0 18px 40px rgba(10,20,30,0.04)}
.leader-info a{color:var(--green-dark);font-weight:700;display:inline-block;margin-top:8px}

/* services list (detailed) */
.list-services{
    margin-top: 50px;
    margin-bottom: 200px;
}
.list-services .services-list{margin-top:18px;display:grid;gap:10px}
.services-list li{background:linear-gradient(180deg,#ffffff,#fbfffb);padding:12px 16px;border-radius:10px;border-left:6px solid var(--green-1);box-shadow:0 10px 30px rgba(10,20,30,0.04);font-weight:600;color:#0b1220;transition:transform .18s ease,box-shadow .18s}
.services-list li:hover{transform:translateX(6px);box-shadow:0 28px 60px rgba(10,20,30,0.08)}

/* testimonials row */
.testimonials-row{display:flex;gap:16px;margin-top:18px;overflow:hidden}
.testimonial{min-width:300px;padding:20px;border-radius:12px;background:var(--card);box-shadow:0 10px 30px rgba(10,20,30,0.04)}
/* ====== CAROUSEL DEPOIMENTOS (com prints de conversa) ====== */
/* ====== CAROUSEL DEPOIMENTOS (prints de conversa menores) ====== */
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 400px; /* largura máxima do carrossel */
  margin: 0 auto;
  border-radius: 16px;
  padding: 25px 0 10px 0;

}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;  /* garante que só 1 item aparece por vez */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.carousel-item img {
  max-width: 90%;   /* controla o tamanho da imagem dentro do slide */
  max-height: 400px; /* evita imagens muito altas */
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* Botões de navegação */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 22px;
  padding: 10px 14px;
  border-radius: 10%;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 5;
}
.carousel-btn:hover { background: rgba(0,0,0,0.8); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

/* Indicadores */
.carousel-dots {
  display: flex;
  justify-content: center;
  margin: 14px 0;
  gap: 8px;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.3s;
}
.carousel-dots button.active {
  background: var(--green-1);
}





/* CTA section */
.cta p{
    color: white; text-align: center;
}
.cta{background:linear-gradient(90deg,var(--green-1),var(--green-2));color:white;text-align:center;padding:44px;border-radius:12px}
.btn.large{ animation: btnlarge ease-out infinite 2.0s;transition: 0.35s;background-color: white; color: #16b823;padding:14px 28px;border-radius:999px; margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.377); box-shadow: rgb(233, 233, 233) 0px 6px 0px;}
.btn.large:hover{

    transform: translateY(5px);
    box-shadow: rgb(221, 221, 221) 0px 2px 0px;
}


/* @keyframes btnlarge{
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
  70%{ box-shadow: 0 0 0 10px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
} */



/* footer */
.site-footer{margin-top:30px;background:#0b1722;color:#cbd5e1;padding:28px 0; scroll-snap-align: start; /* trava no início da seção */}
.footer-grid{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
.logo-footer{font-weight:800;color:var(--green-1)}

/* ===== small animations (fade up) ===== */
.fade-up{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.fade-up.show{opacity:1;transform:none}

/* subtle floating element (reused) */
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* ===== responsive ===== */
@media (max-width:1100px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr 380px}
}
@media (max-width:860px){
  .cards-grid{grid-template-columns:1fr}
  .header-inner{padding:14px 0}
}
@media (max-width:720px){
  .main-nav a{display:none}
  .mobile-toggle{display:inline-block}
  /* hero grid becomes vertical: headline, then video, then cta (exactly as requested) */
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"text" "media" "cta"}
  .hero-text{grid-area:text}
  .hero-media{grid-area:media;order:2;margin-top:5px; place-self: center;}
  .hero-cta{grid-area:cta;order:3;margin-top:12px;justify-content:center}
  .hero-title{font-size:28px}
  .hero-media .wistia_responsive_wrapper iframe{height:100%;}
  .brand{display:flex;justify-content: center; width: 100%;}

  .header-inner{display:none;}

  .leader-grid{display: flex; flex-direction: column;}


  .services-list li{
    padding: 4px;
  }

  .list-services{
    margin-top: 250px;
  }

   .testimonials{
    margin-top: 100px;
   }

  .testimonials h2{
    font-size: 25px;
  }

  .footer-grid{
    display: flex;   flex-direction: column;
  }

  .testimonials .testimonials-row{
    display: flex; flex-direction: column;
  }
}
@media (max-width:420px){
  .hero-title{font-size:22px}
  .brand{justify-content: center;}
}








/* Botão WhatsApp flutuante (canto inferior esquerdo) */
.whats-btn{
  position: fixed;
  right: 20px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 58px;
  height: 58px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #34d058, #25d366);
  color: #0b0f1a;
  box-shadow: 0 12px 24px rgba(37, 211, 102, .35), inset 0 0 0 1px rgba(255,255,255,.2);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  isolation: isolate; /* garante a sombra correta */
}

/* Ícone */
.whats-btn svg{
  width: 28px;
  height: 28px;
  fill: #0b0f1a;
}

/* Efeito de pulso */
.whats-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45);
  animation: whats-pulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes whats-pulse{
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Hover/focus */
.whats-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px rgba(37, 211, 102, .45), inset 0 0 0 1px rgba(255,255,255,.2); }
.whats-btn:focus-visible{ outline: 3px solid rgba(255,255,255,.6); outline-offset: 3px; }

/* Badge (tooltip) – aparece ao passar o mouse no desktop */
.whats-badge{
  position: absolute;
  right: 64px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: .2s ease;
  font: 700 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  color: #eafaf0;
  background: #0b1711;
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.whats-btn:hover .whats-badge{ opacity: 1; transform: translateX(0); }

/* Em telas muito pequenas, recua um pouco do canto */
@media (max-width: 480px){
  .whats-btn{ right: 14px; bottom: 14px; width: 56px; height: 56px; }
  .whats-btn svg{ width: 26px; height: 26px; }
  .whats-badge{ display:none; } /* esconde o tooltip no mobile */
}






/* Botão WhatsApp flutuante (canto inferior esquerdo) */
.inst-btn{
  position: fixed;
  left: 20px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 58px;
  height: 58px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 9999px;
  background: linear-gradient(180deg, #9421ff, #ff21b5, #ff8f0e);
  color: #0b0f1a;
  box-shadow: 0 12px 24px #ff8f0e5b, inset 0 0 0 1px rgba(255,255,255,.2);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  isolation: isolate; /* garante a sombra correta */
}


/* Ícone */
.inst-btn i{
  font-size: 25px;
  color: white;
}

/* Efeito de pulso */
.inst-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 #ff8f0e;
  animation: inst-pulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes inst-pulse{
  0% { box-shadow: 0 0 0 0 #ff8f0e }
  70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Hover/focus */
.inst-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px rgba(37, 211, 102, .45), inset 0 0 0 1px rgba(255,255,255,.2); }
.inst-btn:focus-visible{ outline: 3px solid rgba(255,255,255,.6); outline-offset: 3px; }

/* Badge (tooltip) – aparece ao passar o mouse no desktop */
.inst-badge{
  position: absolute;
  left: 64px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: .2s ease;
  font: 700 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  color: #eafaf0;
  background: #0b1711;
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.inst-btn:hover .inst-badge{ opacity: 1; transform: translateX(0); }

/* Em telas muito pequenas, recua um pouco do canto */
@media (max-width: 480px){
  .inst-btn{ left: 14px; bottom: 14px; width: 56px; height: 56px; }
  .inst-btn svg{ width: 26px; height: 26px; }
  .inst-badge{ display:none; } /* esconde o tooltip no mobile */
}