/* ============================================================================
   LANDING PAGE BASE — Estrutura por seções (comentários mínimos)
   Mantém: Hero full-bleed • Números full-bleed claro • Clientes (carousel)
           Soluções premium • Feedback/validação • Responsivo
   ========================================================================== */

/* 1) Base / Header */
body{
  font-family:'Montserrat',sans-serif;
  background:#f5f6f8;
  color:#0f1222;
  margin:0;
}
.menu{ padding:20px 20px; }        /* logo um pouco mais à esquerda */

/* 2) Hero (full-bleed) */
.hero-wrapper{
  width:100vw;
  margin-left:calc(-50vw + 50%);
}
.hero{
  background:#160c2c;
  color:#fff;
  border-radius:0;
  padding:64px 32px;
  min-height:80vh;
  display:flex; align-items:center;
}
.hero-title{
  color:#14d8fd;
  font-weight:800;
  font-size:clamp(32px,5.2vw,64px);
  line-height:1.08;
  margin:0 0 20px;
}
.hero-description{ color:#cbd3e1; margin:0 0 20px; }
.hero-hint{ font-weight:700; margin-bottom:24px; }
.hero-highlight{ color:#14d8fd; }

/* 3) Formulário / Botões / Feedback */
.form-card{
  background:#fff; color:#111;
  border-radius:22px; padding:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  margin-top:12px;
}
.form-control{
  height:48px; border-radius:999px;
  border:1px solid #e8e8f0;
  background:#f7f7fa; padding:0 16px;
  transition:all .2s ease;
}
.form-control::placeholder{ color:#a8acb8; }
.form-control:focus{
  border-color:#14d8fd; background:#fff;
  box-shadow:0 0 0 3px rgba(20,216,253,.25);
}
.btn-custom{
  background:linear-gradient(90deg,#ff156d,#ff4b93);
  color:#fff; border:0; border-radius:999px;
  height:52px; font-weight:800;
  box-shadow:0 8px 18px rgba(255,21,109,.25);
  transition:all .25s ease;
}
.btn-custom:hover{ transform:scale(1.02); box-shadow:0 10px 22px rgba(255,21,109,.35); filter:brightness(1.03); }
.btn-pink{
  background:#ff156d; color:#fff; border-radius:999px;
  padding:10px 18px; font-weight:700; transition:all .25s ease;
}
.btn-pink:hover{ background:#ff4b93; transform:scale(1.02); }
.lp-feedback{margin-top:10px;padding:10px 14px;border-radius:12px;font-weight:600}
.lp-feedback.alert-success{background:#e6ffef;color:#0f7a3e}
.lp-feedback.alert-danger{background:#ffecec;color:#9b1c1c}

/* 4) Números (full-bleed claro) */
.numbers-edge{
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
.numbers{
  background:#f5f6f8;
  padding:72px 0;
  color:#0f1222;
}
.numbers-title{
  font-weight:800;
  font-size:clamp(24px,3.2vw,40px);
  margin:0 0 6px; letter-spacing:-0.02em; color:#0f1222;
}
.numbers-subtitle{ color:#5a5e6d; margin:0 0 28px; }
.stat-card{
  height:100%;
  background:#fff; border:1px solid #eaeaea; border-radius:18px;
  padding:28px 22px;
  box-shadow:0 12px 28px rgba(0,0,0,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.08); }
.stat-value{
  font-weight:800; font-size:clamp(36px,6vw,64px);
  line-height:1; margin-bottom:8px; color:#ff156d;
}
.stat-label{ font-weight:700; color:#0f1222; margin-bottom:6px; }
.stat-desc{ margin:0; color:#5a5e6d; font-size:14px; }

/* ===== CLIENTES ===== */
.bg-clients{
  --clients-gap: 40px;
  --logo-box:  168px;
  --logo-maxh: 56px;
  background:#160c2c;
  color:#fff;
  padding:48px 0 64px;
}

@media (max-width: 991px){
  .bg-clients{ --clients-gap: 28px; --logo-box: 150px; --logo-maxh: 52px; padding:42px 0 56px; }
  #clientsCarousel .carousel-inner{ padding: 0 44px; }
}
@media (max-width: 576px){
  .bg-clients{ --clients-gap: 22px; --logo-box: 140px; --logo-maxh: 48px; padding:36px 0 48px; }
  #clientsCarousel .carousel-inner{ padding: 0 38px; }
}

.clients-title{
  color:#fff;
  font-weight:800;
  letter-spacing:-0.01em;
  padding-bottom: 1rem; /* ajuste aqui */
}

#clientsCarousel .carousel-inner{ padding: 0 56px; } /* respiro para setas */
#clientsCarousel .carousel-item .row-wrap,
#clientsCarousel .carousel-item .flex-wrap-row{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap: var(--clients-gap);
}

#clientsCarousel .carousel-control-prev,
#clientsCarousel .carousel-control-next{
  width:48px; top:50%; transform:translateY(-50%);
}
#clientsCarousel .carousel-control-prev-icon,
#clientsCarousel .carousel-control-next-icon{
  width:36px; height:36px;
}

/* cartões das logos – sem sombra, borda sutil para harmonia no escuro */
.client-card{
  min-width: var(--logo-box);
  min-height: 96px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.client-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

/* logos padronizadas (tamanho e proporção consistentes) */
.client-logo{
  display:block;
  width:auto;
  max-height: var(--logo-maxh);
  object-fit: contain;
  filter: brightness(0) invert(1);   /* garante legibilidade no fundo escuro */
  opacity:.95;
  transition: opacity .2s ease, transform .2s ease;
}
.client-card:hover .client-logo{ opacity:1; transform: scale(1.02); }

/* responsivo fino da seção de clientes */
@media (max-width: 991px){
  .bg-clients{ --clients-gap: 28px; --logo-box: 150px; --logo-maxh: 52px; }
  #clientsCarousel .carousel-inner{ padding: 0 44px; }
}
@media (max-width: 576px){
  .bg-clients{ --clients-gap: 22px; --logo-box: 140px; --logo-maxh: 48px; }
  #clientsCarousel .carousel-inner{ padding: 0 38px; }
}


/* 6) Soluções (look premium) */
.bg-solutions{
  background:linear-gradient(180deg,#f7f8fb 0%,#eef7ff 100%);
  padding:72px 0;
}
.solutions-subtitle{ color:#5a5e6d; margin:6px auto 36px; max-width:760px; }
.solutions-grid .col-md-4{ display:flex; }
.solution-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  width:100%; background:#fff; border:1px solid #eaeaea; border-radius:20px;
  padding:24px 22px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.solution-card::before{
  content:""; position:absolute; left:0; top:0; right:0; height:4px;
  background:linear-gradient(90deg,#ff156d,#ff4b93); opacity:.95;
}
.solution-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.12); border-color:#e2e2e2; }
.solution-icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,#ffe4ee 0%,#ffd3e6 40%,#fff 100%);
  font-size:26px; box-shadow:inset 0 0 0 2px rgba(255,21,109,.15);
}
.solution-title{ font-weight:800; margin:6px 0 2px; }
.solution-desc{ color:#5a5e6d; margin:0 0 6px; }
.solution-points{ margin:4px 0 10px; padding-left:18px; }
.solution-points li{ margin:4px 0; color:#3b3f50; list-style:"✓  "; }
.solution-cta{
  margin-top:auto; align-self:flex-start; display:inline-block;
  padding:10px 14px; border-radius:999px; font-weight:700; text-decoration:none;
  border:2px solid #ff156d; color:#ff156d; transition:background .2s ease,color .2s ease,transform .2s ease;
}
.solution-cta:hover{ background:#ff156d; color:#fff; transform:translateY(-1px); }

/* 7) Flutuantes / Footer */
.whatsapp-float{ position:fixed; right:20px; bottom:20px; z-index:1000; }
footer{ background:#f0f0f0; padding:24px 16px; text-align:center; font-size:14px; }

/* === WhatsApp flutuante (seguro, sem "vazar" verde) === */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1000;

  width: 60px;
  height: 60px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* animação base */
  opacity: 0;
  transform: translateY(14px) scale(.9);
  animation: whatsappPop .55s cubic-bezier(.2,.8,.2,1) .2s forwards;
}

/* 8) Mapa */
.map-rounded {
  border-radius: 16px;
  overflow: hidden; /* Garante que o iframe seja cortado */
}

/* bolinha verde e sombra ficam no pseudo-elemento */
.whatsapp-float::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25D366;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), 0 8px 10px rgba(0,0,0,.16);
}

/* ícone por cima da bolinha */
.whatsapp-float img {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* hover: pop e mais sombra (só no contêiner) */
.whatsapp-float:hover{
  transform: translateY(0) scale(1.06);
}
.whatsapp-float:hover::before{
  box-shadow: 0 18px 36px rgba(0,0,0,.32), 0 10px 14px rgba(0,0,0,.2);
  filter: brightness(1.04);
}

/* animação de entrada */
@keyframes whatsappPop{
  0%   { opacity:0; transform: translateY(14px) scale(.9); }
  60%  { opacity:1; transform: translateY(0)    scale(1.06); }
  100% { opacity:1; transform: translateY(0)    scale(1); }
}

/* acessibilidade: menos movimento */
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ animation: none; opacity: 1; transform: none; }
}

/* mobile */
@media (max-width: 480px){
  .whatsapp-float{ right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  .whatsapp-float img{ width: 26px; height: 26px; }
}

/* Footer com ícones sociais */
footer .social-icons {
  margin: 10px 0 14px;
}

footer .social-icons a {
  color: #0f1222;
  font-size: 24px;
  margin: 0 8px;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

footer .social-icons a:hover {
  color: #ff156d;
  transform: scale(1.1);
}

/* 8) Validação / Acesso (mantém integração com app.js) */
.is-valid{border-color:#36b37e !important}
.is-invalid{border-color:#e55353 !important}
.invalid-feedback{display:none;margin-top:6px;color:#e55353}
.is-invalid + .invalid-feedback{display:block}

/* 9) Animações / Micro-interações */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .col-md-6{ animation:fadeUp .6s ease both; }
.hero .col-md-6:nth-child(1){ animation-delay:.05s }
.hero .col-md-6:nth-child(2){ animation-delay:.12s }

/* 10) Responsivo */
@media (max-width:991px){
  .hero{ min-height:auto; padding:48px 20px; flex-direction:column; }
  .form-card{ margin-top:24px }
  .numbers{ padding:56px 0; }
}
@media (max-width:576px){
  .hero-title{ font-size:28px }
  .hero-description{ font-size:15px }
  .stat-card{ padding:22px 18px; }
  .numbers-subtitle{ font-size:14px; }
}