/* ── Consultoria Form — Frontend ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* Box-sizing universal dentro do form */
#cf-root *, #cf-root *::before, #cf-root *::after {
  box-sizing: border-box;
}

#cf-root {
  --cf-accent: #c8ff00;
  --cf-bg:     #0a0a0f;
  --cf-text:   #f0f0f0;
  --cf-muted:  #888;
  --cf-border: rgba(255,255,255,0.07);
  --cf-surface:rgba(255,255,255,0.03);
  --cf-font-display: 'Syne', sans-serif;
  --cf-font-body:    'DM Sans', sans-serif;
  --cf-pad: clamp(20px, 5vw, 48px);

  position: fixed;
  inset: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--cf-font-body);
  overflow: hidden;
  z-index: 99999;
}

/* Grain */
#cf-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9;
  opacity: .4;
}

.cf-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.cf-glow-1 { width:500px;height:500px;background:rgba(200,255,0,.06);top:-100px;right:-100px; }
.cf-glow-2 { width:400px;height:400px;background:rgba(255,107,53,.05);bottom:-80px;left:-80px; }

.cf-progress {
  position: absolute; top:0;left:0;height:2px;
  background:var(--cf-accent);
  transition:width .5s cubic-bezier(.4,0,.2,1);
  z-index:20;
  box-shadow:0 0 12px var(--cf-accent);
}

.cf-header {
  position: absolute; top:0; left:0; right:0;
  padding: 20px var(--cf-pad);
  display: flex; justify-content: space-between; align-items: center;
  z-index: 10;
}
.cf-logo { font-family:var(--cf-font-display);font-weight:800;font-size:18px;letter-spacing:-.5px; }
.cf-logo span { color:var(--cf-accent); }
.cf-step-counter { font-size:13px;color:var(--cf-muted);font-family:var(--cf-font-display);font-weight:500; }

.cf-slides {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  /* Previne overflow horizontal */
  overflow: hidden;
}

/* Slides */
.cf-slide {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 720px;
  padding: 80px var(--cf-pad);
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: transform .55s cubic-bezier(.76,0,.24,1), opacity .4s ease;
  min-width: 0;
}
.cf-slide--enter-bottom { transform: translateY(80px); opacity:0; }
.cf-slide--enter-top    { transform: translateY(-80px); opacity:0; }
.cf-slide--active       { transform: translateY(0); opacity:1; }
.cf-slide--exit-top     { transform: translateY(-80px); opacity:0; }
.cf-slide--exit-bottom  { transform: translateY(80px); opacity:0; }

/* Welcome */
.cf-welcome-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(200,255,0,.08); border: 1px solid rgba(200,255,0,.2);
  color: var(--cf-accent); font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 6px 14px; border-radius: 100px;
  width: fit-content; max-width: 100%;
}
.cf-welcome-title {
  font-family: var(--cf-font-display);
  font-size: clamp(28px, 6vw, 60px);
  font-weight: 800; line-height: 1.05; letter-spacing: -1.5px;
  word-break: break-word;
}
.cf-welcome-desc {
  font-size: clamp(15px, 2.5vw, 17px);
  line-height: 1.7; color: rgba(240,240,240,.6); font-weight: 300;
  max-width: 520px;
}
.cf-welcome-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.cf-meta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cf-muted); }
.cf-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-accent); flex-shrink: 0; }

/* Question */
.cf-q-tag { display:flex;align-items:center;gap:10px;font-family:var(--cf-font-display);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--cf-accent); }
.cf-q-tag-num { width:22px;height:22px;border-radius:6px;background:rgba(200,255,0,.12);border:1px solid rgba(200,255,0,.25);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0; }
.cf-q-title {
  font-family: var(--cf-font-display);
  font-size: clamp(20px, 4vw, 38px);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.5px;
  word-break: break-word;
}
.cf-q-hint { font-size: 14px; color: var(--cf-muted); margin-top: -16px; }

/* Choice */
.cf-choices { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cf-choice {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 12px;
  cursor: pointer; text-align: left; color: var(--cf-text); font-family: var(--cf-font-body);
  font-size: 15px; transition: all .2s ease; width: 100%;
}
.cf-choice:hover { background:rgba(200,255,0,.05);border-color:rgba(200,255,0,.25);transform:translateX(4px); }
.cf-choice.selected { background:rgba(200,255,0,.08);border-color:rgba(200,255,0,.4);color:var(--cf-accent); }
.cf-choice-letter {
  width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-family:var(--cf-font-display);font-size:12px;font-weight:700;flex-shrink:0;transition:all .2s;
}
.cf-choice.selected .cf-choice-letter { background:var(--cf-accent);border-color:var(--cf-accent);color:#000; }

/* NPS */
.cf-nps-wrap { display:flex;flex-direction:column;gap:10px;width:100%; }
.cf-nps-scale { display:flex;gap:6px;flex-wrap:wrap; }
.cf-nps-btn {
  width: 48px; height: 48px; border-radius: 10px; background: var(--cf-surface);
  border: 1px solid var(--cf-border); cursor: pointer; font-family: var(--cf-font-display);
  font-size: 15px; font-weight: 700; color: var(--cf-text); transition: all .2s;
  flex-shrink: 0;
}
.cf-nps-btn:hover { background:rgba(200,255,0,.08);border-color:rgba(200,255,0,.3); }
.cf-nps-btn.selected { background:var(--cf-accent);border-color:var(--cf-accent);color:#000; }
.cf-nps-labels { display:flex;justify-content:space-between;font-size:12px;color:var(--cf-muted); }

/* Input */
.cf-input, .cf-textarea {
  background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 16px 18px; color: var(--cf-text); font-family: var(--cf-font-body);
  font-size: 16px; font-weight: 300; width: 100%; outline: none; transition: border-color .2s;
  min-width: 0; /* Previne overflow em flex */
}
.cf-textarea { resize: none; }
.cf-input:focus, .cf-textarea:focus { border-color: rgba(200,255,0,.35); }
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--cf-muted); }
.cf-input--error { border-color: #ff6b6b !important; box-shadow: 0 0 0 3px rgba(255,107,107,.15) !important; }

/* CTA */
.cf-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
  background: var(--cf-accent); color: #000; font-family: var(--cf-font-display);
  font-size: 15px; font-weight: 700; letter-spacing: .3px; border: none;
  border-radius: 12px; cursor: pointer; transition: all .2s;
  width: fit-content; max-width: 100%;
}
.cf-btn:hover { transform:translateY(-2px);box-shadow:0 12px 40px rgba(200,255,0,.25); }
.cf-btn:disabled { opacity:.3;cursor:not-allowed;transform:none;box-shadow:none; }
.cf-btn-arrow { font-size:18px;transition:transform .2s; }
.cf-btn:hover .cf-btn-arrow { transform:translateX(4px); }

/* Nav */
.cf-nav {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 10;
}
.cf-back {
  width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--cf-border);color:var(--cf-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s;
}
.cf-back:hover { background:rgba(255,255,255,.08);color:var(--cf-text); }
.cf-nav-hint { font-size:12px;color:rgba(136,136,136,.5);letter-spacing:.5px; }

/* Thank you */
.cf-ty-icon { width:68px;height:68px;border-radius:18px;background:rgba(200,255,0,.1);border:1px solid rgba(200,255,0,.2);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0; }
.cf-divider { width:40px;height:2px;background:var(--cf-accent);border-radius:2px; }

/* Error */
.cf-error-msg { font-size:13px;color:#ff6b6b;margin-top:-16px; }

/* ── Phone field ───────────────────────────────────────────────────────────── */
.cf-phone-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.cf-dial-wrap {
  position: relative;
  flex: 0 0 auto;
}
.cf-dial-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 56px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s;
  user-select: none;
  min-width: 72px;
  justify-content: center;
}
.cf-dial-btn:hover, .cf-dial-btn:focus {
  border-color: var(--cf-accent);
  outline: none;
}
.cf-dial-flag { font-size: 24px; line-height: 1; }
.cf-dial-arrow { font-size: 11px; color: var(--cf-muted); }
.cf-dial-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  display: none;
}
.cf-dial-dropdown--open { display: block; }
.cf-dial-search {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--cf-text);
  font-family: var(--cf-font-body);
  font-size: 14px;
  outline: none;
}
.cf-dial-search::placeholder { color: var(--cf-muted); }
.cf-dial-list {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.cf-dial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.cf-dial-item:hover { background: rgba(255,255,255,0.06); }
.cf-dial-item--active { background: rgba(200,255,0,0.08); }
.cf-dial-item-name { flex: 1; color: var(--cf-text); min-width: 0; }
.cf-dial-code { color: var(--cf-muted); font-size: 13px; flex-shrink: 0; }
.cf-phone-input { flex: 1; min-width: 0; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cf-header { padding: 14px 20px; }

  .cf-slide { gap: 24px; padding-top: 72px; padding-bottom: 72px; }

  .cf-welcome-title { letter-spacing: -1px; }

  .cf-nps-btn { width: 40px; height: 40px; font-size: 13px; }

  .cf-nav { bottom: 16px; }

  /* Phone em mobile: empilha verticalmente */
  .cf-phone-row { flex-direction: column; }
  .cf-dial-btn { width: 100%; justify-content: flex-start; height: 52px; }
  .cf-dial-dropdown { width: 100%; left: 0; }
}

@media (max-width: 380px) {
  .cf-nps-btn { width: 34px; height: 34px; font-size: 12px; }
  .cf-nps-scale { gap: 4px; }
}

/* ── Embedded mode ─────────────────────────────────────────────────────────── */
#cf-root.cf-root--embedded {
  position: relative;
  inset: auto;
  background: transparent;
  overflow: visible;
  z-index: auto;
  height: auto;
  min-height: 0;
}
#cf-root.cf-root--embedded::before { display: none; }
#cf-root.cf-root--embedded .cf-glow { display: none; }
#cf-root.cf-root--embedded .cf-slides {
  position: relative;
  height: auto;
  min-height: 360px;
  overflow: visible;
}
#cf-root.cf-root--embedded .cf-slide {
  position: relative;
  padding-top: 60px;
  padding-bottom: 60px;
}
/* Instant swap — sem animações verticais */
#cf-root.cf-root--embedded .cf-slide--enter-bottom,
#cf-root.cf-root--embedded .cf-slide--enter-top {
  transform: none !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}
#cf-root.cf-root--embedded .cf-slide--active {
  transform: none !important;
  opacity: 1 !important;
  transition: opacity .15s ease !important;
}
#cf-root.cf-root--embedded .cf-slide--exit-top,
#cf-root.cf-root--embedded .cf-slide--exit-bottom {
  transform: none !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}
#cf-root.cf-root--embedded .cf-nav {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  padding: 0 var(--cf-pad) 24px;
  justify-content: flex-start;
}
#cf-root.cf-root--embedded .cf-progress { position: relative; }
#cf-root.cf-root--embedded .cf-header   { position: relative; }

/* ── Classic mode ──────────────────────────────────────────────────────────── */
/* Classic + fullscreen: manter position:fixed, activar scroll (Bug 1 + Bug 4) */
#cf-root.cf-root--classic:not(.cf-root--embedded) {
  overflow-y: auto;
}
/* Decoração desativa em qualquer classic */
#cf-root.cf-root--classic::before { display: none; }
#cf-root.cf-root--classic .cf-glow { display: none; }
.cf-classic-wrap {
  position: relative; /* garante que fica acima do overlay de bg (z-index:1) */
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px var(--cf-pad);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cf-classic-header {
  margin-bottom: 32px;
}
.cf-classic-welcome {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.cf-classic-questions {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cf-classic-question {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--cf-border);
}
.cf-classic-question:last-child { border-bottom: none; }
.cf-classic-q--error .cf-q-title { color: #ff6b6b; }
.cf-classic-q--error .cf-input,
.cf-classic-q--error .cf-textarea { border-color: #ff6b6b; }
.cf-classic-actions {
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.cf-classic-thankyou {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0;
  align-items: flex-start;
}