/* EssenciaCred styles */
:root{
  --brand:#6c5ce7;
  --brand-2:#a29bfe;
  --grad: linear-gradient(90deg, #6c5ce7, #00c2ff);
}
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Arial; }
.navbar .logo-badge{ display:inline-flex; width:36px; height:36px; border-radius:12px; background:var(--grad); color:#fff; align-items:center; justify-content:center; box-shadow: 0 8px 20px rgba(108,92,231,.35); }
.hero{ padding: 6rem 0 3rem; background: radial-gradient(1200px 600px at -10% 0%, #e8f2ff 0%, rgba(232,242,255,0) 60%), linear-gradient(160deg, #ffffff 0%, #f6f9ff 100%); position:relative; }
.hero .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .hero-card{ border-radius: 1.25rem; }
.hero-blob{ position:absolute; right:-10%; top:5%; width:520px; height:520px; background:radial-gradient(circle at 30% 30%, rgba(108,92,231,.18), transparent 60%), radial-gradient(circle at 70% 70%, rgba(0,194,255,.18), transparent 60%); filter: blur(40px); z-index:-1; }

.text-bg-primary-soft{ background: rgba(108,92,231,.12); color:#3d3d7a; }

.step-card{ border:1px dashed rgba(0,0,0,.08); border-radius:1rem; padding:1.25rem; height:100%; transition:.2s; background:#fff; }
.step-card:hover{ transform: translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.step-number{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:700; margin-bottom:.5rem; }

.adv-card{ background:#fff; border-radius:1rem; padding:1.25rem; box-shadow:0 10px 30px rgba(0,0,0,.06); height:100%; }
.adv-card i{ font-size:1.5rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.form-side{ background: radial-gradient(600px 300px at 0% 0%, rgba(0,0,0,.12), rgba(0,0,0,0) 60%), linear-gradient(145deg, #3b2bd1, #0ea5e9); }

/* Valor pretendido criativo */
.value-wrapper{ position:relative; }
.value-bubble{ position:absolute; top:-18px; left:0; transform: translateX(-50%); padding:.25rem .5rem; background:#111827; color:#fff; border-radius:.5rem; font-size:.85rem; white-space:nowrap; }
.form-range::-webkit-slider-thumb{ background-color:#6c5ce7; }
.form-range::-moz-range-thumb{ background-color:#6c5ce7; }
.input-group-text{ background:#fff; }

.chip{ border:1px solid rgba(0,0,0,.1); background:#fff; border-radius:999px; padding:.25rem .75rem; font-size:.9rem; cursor:pointer; }
.chip:hover{ background:#f2f2ff; border-color:#a29bfe; }

.mini-card{ background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius: .75rem; padding: .75rem; color:#fff; }

/* Utilities */
.shadow-xl{ box-shadow: 0 20px 60px rgba(0,0,0,.08); }
.fw-extrabold{ font-weight: 800; }

/* --- Correção de overflow horizontal --- */
html, body { overflow-x: hidden; } /* cinto de segurança */

.hero { 
  overflow: hidden;                /* esconde o que sair da seção */
}

/* Ajusta o blob para nunca passar do viewport */
.hero-blob{
  right: -18vw;                    /* em vez de -10% fixo */
  width: min(520px, 75vw);
  height: min(520px, 75vw);
  pointer-events: none;            /* evita capturar cliques */
}

@media (max-width: 576px){
  .hero-blob{
    right: -35vw;                  /* afasta um pouco mais em telas bem pequenas */
  }
}

/* (opcional) garante que nada “vaze” por largura intrínseca */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* (opcional) bolha do slider não ultrapassar a borda em telas pequenas */
.value-wrapper { position: relative; overflow: visible; }
.value-bubble{
  max-width: calc(100% - 16px);
  /* mantém centralizada sem passar das bordas */
  left: var(--bubble-left, 0); 
  transform: translateX(-50%);
}