:root {
      --brand: #08C293;   /* rosa Incub */
      --deep:  #0878C2;   /* azul escuro Incub */
      --white: #ffffff;
      --muted: #0878C2;
        --card-border: #e7eaf0;
  --card-radius: 8px;
  --card-text: #3e4a59;     /* descrição */
  --card-title: #0f172a;  
    }
    html { scroll-behavior: smooth; }
    body{
        font-family: "Poppins", sans-serif;
        font-weight: 200;
        font-style: normal;
    }
    .text-deep { color: var(--deep)!important; }
    .bg-deep { background-color: var(--deep)!important; }
    .bg-muted { background: var(--muted); }
    .btn-brand { background: var(--brand); border-color: var(--white); color: var(--white); }
    .btn-brand:hover { filter: brightness(0.95); color: var(--brand); }
    .btn-outline-brand { color: var(--brand); border-color: var(--brand); }
    .btn-outline-brand:hover { background: var(--brand); color: var(--white); }
    .badge-brand { background: var(--brand); }
    /* Hero */
    /* .hero {
      background: radial-gradient(1200px 600px at 80% -10%, rgba(56, 106, 242, 0.25), transparent 60%),
                  linear-gradient(135deg, #ffffff, #ffffff 60%, #0878C2);
      color: var(--deep);
    } */
    .hero h1 span { color: var(--brand); }
    .hero .card {
      background: var(--brand); border: 1px solid var(--brand); backdrop-filter: blur(4px);
    }
    .section-label { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
    .feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: .75rem; background: rgba(255, 255, 255, 0.895); color: var(--brand); }
    /* Pricing */
    .price { font-weight: 800; font-size: 2.2rem; }
    .setup { font-size: .95rem; opacity: .85; }
    .card-pricing { border: 1px solid #e8e8ef; }
    .card-pricing.pop { border-color: var(--brand); box-shadow: 0 10px 30px #0878C2; }
    .check { color: #12b886; }
    .minus { color: #ffffff; }
    /* Sticky CTA mobile */
    .sticky-cta { position: sticky; bottom: 0; z-index: 1030; background: var(--brand); backdrop-filter: blur(6px); border-top: 1px solid var(--brand); }
    /* Footer */
    .footer { background: var(--deep); color: #dfe1ff; }
    .footer a { color: #ffffff; text-decoration: underline; }

    .text-white{
      color: white;
    }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 72vh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

/* vídeo por trás */
.hero .video-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero .video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay COM TRANSPARÊNCIA (agora o vídeo aparece) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(56,106,242,0.25), rgba(56,106,242,0) 60%),
    /* antes estava #0878C2 opaco; troque por alpha */
    linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(8,120,194,0.75) 100%);
}

/* conteúdo acima do overlay */
.hero .container { position: relative; z-index: 1; }
/* Fonte apenas no H1 do hero */
.hero-title {
   font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* garante que só o h1 receba e não “vaze” para filhos */
.hero-title * { 
  text-shadow: 20px 2px 300px #000000 ;
  font-family: inherit; }

#dor .k-card{
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 224px;
}

#dor .k-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border-color: #d9dde6;
}

#dor .k-icon{
  width: 4px; height: 40px;
  display: grid; place-items: left;
  border: none;          /* ícone escuro como no print */
}


#dor .k-title{
  color: var(--card-title);
  font-weight: 400;
  font-size: 18px;
}

#dor .k-desc{
  color: var(--card-text);
  margin: 0;
  font-size: 16px;
}

/* em fundo azul, garanta contraste do título da seção */
#dor .section-label{ color: #c8eef0; }
#dor h2{ color: #fff; }

/* ===== Scroll reveal (leve e profissional) ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Variações de direção/estilo */
.reveal.fade  { transform: none; }
.reveal.up    { transform: translateY(22px); }
.reveal.down  { transform: translateY(-22px); }
.reveal.left  { transform: translateX(-22px); }
.reveal.right { transform: translateX(22px); }
.reveal.zoom  { transform: scale(.96); }

/* Suporte a atraso com variável CSS */
.reveal[data-delay] { transition-delay: var(--delay, 0s); }

/* Acessibilidade: respeita reduzir movimentos */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* (opcional) leve animação de hover para cards */
.k-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.k-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }

.dor{
  z-index: 5;
  margin-top: 32px;
  border-radius: 8px;
  position: relative;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/* Espaço da seção "solução" em relação à seção de cima */
#solucao{
  margin-top: 56px;          /* ajuste esse valor para mais/menos espaço */
  position: relative;
  overflow: visible; bottom: -16px; 
}

/* Coluna que segura a imagem vira o referencial */
#solucao .col-image{
  position: relative;
  min-height: 420px;
  filter: drop-shadow(0 0 0.75rem rgba(33, 56, 78, 0.631));         /* altura mínima para caber a imagem */
}

/* A figura fica colada no fundo da seção */
#solucao .solution-visual{
  position: absolute;
  right: 0;
  bottom: -1px;              /* -1px para “grudar” visualmente na próxima seção */
  left: auto;
  display: flex;
  justify-content: flex-end; /* encosta à direita em telas grandes */
  pointer-events: none;      /* imagem não captura cliques por engano */
}

#solucao .solution-visual .person-img{
  width: clamp(360px, 54vw, 720px);  /* imagem maior porém responsiva */
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.12));
}

/* Responsivo: volta pro fluxo e centraliza */
@media (max-width: 991px){
  #solucao .col-image{ min-height: auto; }
  #solucao .solution-visual{
    position: static;
    justify-content: center;
    margin-top: 16px;
    pointer-events: auto;
  }
  #solucao .solution-visual .person-img{
    width: min(500px, 92%);
  }
}