/* ============================================================
   Diagnóstico Veza — estilos isolados (prefixo veza-)
   ============================================================ */
.veza-diag-root{
  --veza-bg-card: #211f3a;
  --veza-magenta: #ff00ff;
  --veza-violet: #6057f9;
  --veza-violet-soft: #8b84ff;
  --veza-white: #ffffff;
  --veza-grey: #cfcfe8;
  --veza-grey-dim: #8d8ba8;
  --veza-line: rgba(207,207,232,0.12);
  --veza-line-strong: rgba(207,207,232,0.22);
  --veza-result-grad-1: rgba(255,0,255,0.14);
  --veza-result-grad-2: rgba(96,87,249,0.1);
  --veza-selected-grad-1: rgba(255,0,255,0.12);
  --veza-selected-grad-2: rgba(96,87,249,0.08);
  --veza-btn-shadow: rgba(255,0,255,0.45);
  --veza-btn-text: #ffffff;
  --veza-option-font-size: 15px;
  --veza-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --veza-font-body: 'Inter', 'Segoe UI', sans-serif;
  --veza-radius: 16px;
  --veza-radius-sm: 10px;
  --veza-ease: cubic-bezier(.16,1,.3,1);

  max-width:720px;
  margin:0 auto;
  font-family: var(--veza-font-body);
  box-sizing:border-box;
  position:relative;
}
.veza-diag-root *, .veza-diag-root *::before, .veza-diag-root *::after{ box-sizing:border-box; }
.veza-diag-root img, .veza-diag-root svg{ display:block; max-width:100%; }

.veza-diag-head{ text-align:center; max-width:560px; margin:0 auto 32px; }
.veza-diag-title{
  font-family:var(--veza-font-display);
  font-size:clamp(24px,3.2vw,32px);
  font-weight:600; color:var(--veza-white);
  line-height:1.2; margin:0 0 12px;
}
.veza-diag-subtitle{ color:var(--veza-grey); font-size:15.5px; line-height:1.6; margin:0; }

/* ---------- Buttons ---------- */
.veza-btn{
  font-family:var(--veza-font-display);
  font-weight:600; font-size:15px;
  border:none; border-radius:100px; cursor:pointer;
  padding:15px 30px;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .3s var(--veza-ease), box-shadow .3s var(--veza-ease), background .3s var(--veza-ease);
}
.veza-btn-primary{
  background: linear-gradient(95deg, var(--veza-magenta), var(--veza-violet) 130%);
  color: var(--veza-btn-text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -8px transparent;
}
.veza-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -8px var(--veza-btn-shadow);
}
.veza-btn-primary[disabled]{ opacity:.35; cursor:not-allowed; transform:none !important; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -8px transparent !important; }
.veza-btn-ghost{
  background:transparent; color:var(--veza-white);
  border:1px solid var(--veza-line-strong);
}
.veza-btn-ghost:hover{
  transform: translateY(-2px);
  border-color: var(--veza-magenta);
  background: var(--veza-selected-grad-1);
}

/* ---------- Quiz shell ---------- */
.veza-quiz-shell{
  background: var(--veza-bg-card);
  border:1px solid var(--veza-line-strong);
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.7);
}
.veza-quiz-progress-track{ height:3px; background:rgba(255,255,255,0.06); position:relative; }
.veza-quiz-progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--veza-violet), var(--veza-magenta));
  width:0%; transition: width .5s var(--veza-ease);
}
.veza-quiz-meta{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 36px 0;
  font-family:var(--veza-font-display); font-size:13px;
  color:var(--veza-grey-dim); letter-spacing:0.04em;
}
.veza-quiz-body{ padding:32px 36px 40px; }
.veza-quiz-stage-label{
  font-family:var(--veza-font-display); font-size:13px;
  color:var(--veza-violet-soft); text-transform:uppercase;
  letter-spacing:0.1em; font-weight:600; margin-bottom:14px;
}
.veza-quiz-question{
  font-family:var(--veza-font-display);
  font-size:clamp(20px,2.8vw,26px);
  font-weight:600; line-height:1.3; color:var(--veza-white);
  margin-bottom:26px;
}
.veza-quiz-options{ display:flex; flex-direction:column; gap:10px; }
.veza-quiz-option{
  display:flex; align-items:center; gap:14px;
  text-align:left;
  background: rgba(255,255,255,0.02);
  border:1px solid var(--veza-line);
  border-radius:var(--veza-radius-sm);
  padding:16px 18px;
  font-family:var(--veza-font-body); font-size:var(--veza-option-font-size, 15px);
  color:var(--veza-white); cursor:pointer;
  transition: border-color .25s var(--veza-ease), background .25s var(--veza-ease), transform .15s var(--veza-ease);
  width:100%;
}
.veza-quiz-option:hover{ border-color: var(--veza-violet-soft); background: rgba(96,87,249,0.08); transform: translateX(2px); }
.veza-quiz-option.veza-selected{
  border-color: var(--veza-magenta);
  background: linear-gradient(95deg, var(--veza-selected-grad-1), var(--veza-selected-grad-2));
}
.veza-quiz-option-letter{
  flex-shrink:0; width:26px; height:26px; border-radius:8px;
  border:1px solid var(--veza-line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--veza-font-display); font-size:12px; font-weight:600;
  color:var(--veza-grey-dim); transition: all .25s var(--veza-ease);
}
.veza-quiz-option.veza-selected .veza-quiz-option-letter{
  background:var(--veza-magenta); border-color:var(--veza-magenta); color:#fff;
}
.veza-quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:30px; }
.veza-quiz-back{
  background:none; border:none; color:var(--veza-grey-dim);
  font-family:var(--veza-font-body); font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:color .2s;
}
.veza-quiz-back:hover{ color:var(--veza-white); }
.veza-quiz-back[disabled]{ opacity:0; pointer-events:none; }

/* ---------- Contact fields ---------- */
.veza-field-group{ display:flex; flex-direction:column; gap:16px; }
.veza-field{ display:flex; flex-direction:column; gap:8px; }
.veza-field label{ font-size:13px; color:var(--veza-grey-dim); font-family:var(--veza-font-display); letter-spacing:0.03em; }
.veza-field input{
  background: rgba(255,255,255,0.03);
  border:1px solid var(--veza-line-strong);
  border-radius:var(--veza-radius-sm);
  padding:14px 16px; color:var(--veza-white);
  font-family:var(--veza-font-body); font-size:15px;
  outline:none; width:100%;
  transition: border-color .25s var(--veza-ease), background .25s var(--veza-ease);
}
.veza-field input::placeholder{ color:var(--veza-grey-dim); }
.veza-field input:focus{ border-color:var(--veza-magenta); background: rgba(255,0,255,0.04); }
.veza-field-error{ font-size:12px; color:var(--veza-magenta); display:none; }
.veza-field.veza-invalid input{ border-color: #ff5c7a; }
.veza-field.veza-invalid .veza-field-error{ display:block; color:#ff5c7a; }

/* ---------- Result ---------- */
.veza-result-screen{ display:none; }
.veza-result-shell{
  margin-top:0;
  background:var(--veza-bg-card);
  border:1px solid var(--veza-line-strong);
  border-radius:24px; overflow:hidden;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.7);
}
.veza-result-top{
  background: linear-gradient(135deg, var(--veza-result-grad-1), var(--veza-result-grad-2));
  padding:40px 36px 30px; border-bottom:1px solid var(--veza-line);
}
.veza-result-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--veza-font-display); font-size:12px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px;
  border:1px solid var(--veza-line-strong); margin-bottom:18px; color:var(--veza-white);
}
.veza-result-headline{
  font-family:var(--veza-font-display);
  font-size:clamp(22px,3vw,28px); font-weight:600; line-height:1.25;
  color:var(--veza-white); margin-bottom:14px;
}
.veza-result-score-row{ display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.veza-result-score .num{
  font-family:var(--veza-font-display); font-size:34px; font-weight:700;
  background:linear-gradient(95deg,var(--veza-magenta),var(--veza-violet-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.veza-result-score .label{ font-size:12px; color:var(--veza-grey-dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }
.veza-result-body{ padding:36px 36px 40px; }
.veza-result-body p{ color:var(--veza-grey); font-size:15px; line-height:1.7; margin:0 0 22px; }
.veza-result-rec{
  background:rgba(255,255,255,0.03);
  border-left:2px solid var(--veza-magenta);
  padding:18px 20px; border-radius:0 var(--veza-radius-sm) var(--veza-radius-sm) 0;
  margin-bottom:28px;
}
.veza-result-rec span{
  font-family:var(--veza-font-display); font-size:12px; color:var(--veza-violet-soft);
  text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:8px; font-weight:600;
}
.veza-result-rec p{ margin:0; color:var(--veza-white); font-size:14.5px; }
.veza-result-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* breakdown bars */
.veza-breakdown{ margin:0 0 30px; display:flex; flex-direction:column; gap:14px; }
.veza-breakdown-row-head{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.veza-breakdown-row-head .veza-name{ color:var(--veza-white); font-family:var(--veza-font-display); }
.veza-breakdown-row-head .veza-val{ color:var(--veza-grey-dim); }
.veza-breakdown-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; }
.veza-breakdown-bar-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg,var(--veza-violet),var(--veza-magenta)); width:0%; transition:width 1.1s var(--veza-ease); }

/* classification tags */
.veza-tag-frio{ background:rgba(140,140,170,0.18); color:#b9b8d6; border-color:transparent; }
.veza-tag-morno{ background:rgba(255,200,0,0.14); color:#ffd24d; border-color:transparent; }
.veza-tag-quente{ background:rgba(255,120,0,0.16); color:#ff9a4d; border-color:transparent; }
.veza-tag-prioritario{ background:rgba(255,0,255,0.16); color:var(--veza-magenta); border-color:transparent; }

@media (max-width:600px){
  .veza-quiz-body{ padding:26px 20px 32px; }
  .veza-quiz-meta{ padding:18px 20px 0; }
  .veza-result-top, .veza-result-body{ padding:28px 22px; }
}

/* ---------- Blindagem contra CSS do tema/host (ex: "button{color:#c36}") ----------
   Alguns temas aplicam cor em [type=button], [type=submit], button (inclusive no
   :hover), o que pode ganhar da nossa classe sozinha por causa da especificidade do
   seletor de elemento. Reforçamos aqui com seletores mais específicos. */
.veza-diag-root button,
.veza-diag-root [type="button"],
.veza-diag-root [type="submit"] { color: inherit; }

.veza-diag-root .veza-quiz-option,
.veza-diag-root .veza-quiz-option:hover,
.veza-diag-root .veza-quiz-option:focus,
.veza-diag-root .veza-quiz-option.veza-selected,
.veza-diag-root .veza-quiz-option.veza-selected:hover { color: var(--veza-white) !important; }

.veza-diag-root .veza-quiz-back,
.veza-diag-root .veza-quiz-back:focus { color: var(--veza-grey-dim) !important; }
.veza-diag-root .veza-quiz-back:hover { color: var(--veza-white) !important; }
.veza-diag-root .veza-quiz-back {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.veza-diag-root .veza-btn-ghost,
.veza-diag-root .veza-btn-ghost:hover,
.veza-diag-root .veza-btn-ghost:focus { color: var(--veza-white) !important; }

.veza-diag-root .veza-btn-ghost {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--veza-line-strong) !important;
  background: transparent !important;
}
.veza-diag-root .veza-btn-ghost:hover {
  border-color: var(--veza-magenta) !important;
  background: var(--veza-selected-grad-1) !important;
}

.veza-diag-root .veza-btn,
.veza-diag-root button.veza-btn,
.veza-diag-root a.veza-btn {
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: normal !important;
  text-decoration: none !important;
}

.veza-diag-root .veza-btn-primary,
.veza-diag-root .veza-btn-primary:hover,
.veza-diag-root .veza-btn-primary:focus { color: var(--veza-btn-text) !important; }

.veza-diag-root .veza-btn-primary,
.veza-diag-root .veza-btn-primary[disabled] { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -8px transparent !important; }
.veza-diag-root .veza-btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -8px var(--veza-btn-shadow) !important; }

/* ---------- Blindagem de arredondamento e tipografia ----------
   Mesmo motivo do bloco acima: temas/Elementor costumam zerar border-radius e
   redefinir font-family em button/input/select genericamente. Reforçamos aqui. */
.veza-diag-root,
.veza-diag-root button,
.veza-diag-root input,
.veza-diag-root select,
.veza-diag-root textarea,
.veza-diag-root p,
.veza-diag-root span,
.veza-diag-root div { font-family: var(--veza-font-body) !important; }

.veza-diag-root .veza-diag-title,
.veza-diag-root .veza-quiz-stage-label,
.veza-diag-root .veza-quiz-question,
.veza-diag-root .veza-result-headline,
.veza-diag-root .veza-result-score .num,
.veza-diag-root .veza-quiz-meta,
.veza-diag-root .veza-quiz-option-letter,
.veza-diag-root .veza-field label,
.veza-diag-root .veza-btn,
.veza-diag-root .veza-result-rec span { font-family: var(--veza-font-display) !important; }

.veza-diag-root .veza-quiz-shell,
.veza-diag-root .veza-result-shell { border-radius: var(--veza-radius) !important; }

.veza-diag-root .veza-quiz-option,
.veza-diag-root .veza-field input { border-radius: var(--veza-radius-sm) !important; }
.veza-diag-root .veza-quiz-option-letter { border-radius: 8px !important; }

.veza-diag-root .veza-btn,
.veza-diag-root button.veza-btn { border-radius: 100px !important; }

.veza-diag-root .veza-quiz-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 18px !important;
  gap: 14px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--veza-line) !important;
  background: rgba(255,255,255,0.02) !important;
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: var(--veza-option-font-size, 15px) !important;
}
.veza-diag-root .veza-quiz-option-letter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
}
.veza-diag-root .veza-quiz-option > span:last-child {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
.veza-diag-root .veza-quiz-option { height: auto !important; }
.veza-diag-root .veza-quiz-option:hover {
  border-color: var(--veza-violet-soft) !important;
  background: rgba(96,87,249,0.08) !important;
}
.veza-diag-root .veza-quiz-option.veza-selected,
.veza-diag-root .veza-quiz-option.veza-selected:hover {
  border-color: var(--veza-magenta) !important;
  background: linear-gradient(95deg, var(--veza-selected-grad-1), var(--veza-selected-grad-2)) !important;
}
.veza-diag-root .veza-quiz-option span { text-align: left !important; }

.veza-diag-root .veza-btn-primary,
.veza-diag-root .veza-btn-ghost { padding: 15px 30px !important; }

.veza-diag-root .veza-btn-primary,
.veza-diag-root .veza-btn-primary:hover,
.veza-diag-root .veza-btn-primary:focus,
.veza-diag-root .veza-btn-primary:active,
.veza-diag-root .veza-btn-primary:focus-visible {
  border: none !important;
  outline: none !important;
}